@majoo-ui/react 1.52.9 → 1.53.0

package/index.esm.js

@@ -42,8 +42,9 @@ import request from 'superagent';
 import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$1 } from 'recharts';
 import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
+import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
-import imageCompression from 'browser-image-compression';
+import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
 
 var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
@@ -3875,6 +3876,20 @@ const ButtonNegativeGhost = {
     outline: '1px solid $btnNegative'
   }
 };
+const ButtonGhostSecondary = {
+  backgroundColor: '$btnSecondary',
+  color: '$textSecondary',
+  border: 'none',
+  '&:hover': {
+    backgroundColor: '$gray100',
+    outline: '1px solid $gray100',
+    color: '$textSecondary'
+  },
+  '&:active': {
+    backgroundColor: '$gray150',
+    outline: '1px solid $gray150'
+  }
+};
 const ButtonHeaderMenu = {
   backgroundColor: '$bgWhite',
   border: '1px solid $bgBorder',
@@ -3962,6 +3977,7 @@ const ButtonPrimitive = styled('button', {
       primary: Object.assign({}, ButtonPrimary),
       secondary: Object.assign({}, PrimarySecondary),
       ghost: Object.assign({}, GhostButton),
+      'ghost-secondary': Object.assign({}, ButtonGhostSecondary),
       negative: Object.assign({}, ButtonNegative),
       'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
       'negative-ghost': Object.assign({}, ButtonNegativeGhost),
@@ -4818,7 +4834,7 @@ var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packa
 const {
   zIndices: zIndices$1
 } = foundations;
-const slideUpAndFade$1 = keyframes({
+const slideUpAndFade$2 = keyframes({
   '0%': {
     opacity: 0,
     transform: 'translateY(2px)'
@@ -4828,7 +4844,7 @@ const slideUpAndFade$1 = keyframes({
     transform: 'translateY(0)'
   }
 });
-const slideRightAndFade$1 = keyframes({
+const slideRightAndFade$2 = keyframes({
   '0%': {
     opacity: 0,
     transform: 'translateX(-2px)'
@@ -4838,7 +4854,7 @@ const slideRightAndFade$1 = keyframes({
     transform: 'translateX(0)'
   }
 });
-const slideDownAndFade$1 = keyframes({
+const slideDownAndFade$2 = keyframes({
   '0%': {
     opacity: 0,
     transform: 'translateY(-2px)'
@@ -4848,7 +4864,7 @@ const slideDownAndFade$1 = keyframes({
     transform: 'translateY(0)'
   }
 });
-const slideLeftAndFade$1 = keyframes({
+const slideLeftAndFade$2 = keyframes({
   '0%': {
     opacity: 0,
     transform: 'translateX(2px)'
@@ -4875,16 +4891,16 @@ const StyledContent$6 = styled(TooltipPrimitive.Content, {
     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
       }
     }
   }
@@ -6341,7 +6357,7 @@ InputRadioGroup.propTypes = {
 };
 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',
@@ -6412,6 +6428,20 @@ const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
         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, {
@@ -6431,6 +6461,11 @@ const Container$8 = styled(Flex$1, {
         }
       }
     },
+    disabledOutlined: {
+      true: {
+        backgroundColor: '$gray150 !important'
+      }
+    },
     active: {
       true: {
         border: '1px solid $primary400 !important'
@@ -6457,7 +6492,8 @@ const InputRadio = _ref => {
     css,
     inputType,
     inputProps,
-    description
+    description,
+    readOnly
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
@@ -6466,22 +6502,24 @@ const InputRadio = _ref => {
       case 'number':
         return /*#__PURE__*/React__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.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
           }
         }));
 
@@ -6495,12 +6533,12 @@ const InputRadio = _ref => {
             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);
@@ -6511,7 +6549,7 @@ const InputRadio = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$E,
-      lineNumber: 151,
+      lineNumber: 183,
       columnNumber: 5
     }
   }, ({
@@ -6523,13 +6561,14 @@ const InputRadio = _ref => {
     return /*#__PURE__*/React__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.createElement(Flex$1, {
@@ -6538,24 +6577,25 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 163,
+        lineNumber: 196,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__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.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 165,
+        lineNumber: 198,
         columnNumber: 17
       }
     })), renderInputType(inputType, checked)), description && /*#__PURE__*/React__default.createElement(Text$1, {
@@ -6567,7 +6607,7 @@ const InputRadio = _ref => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$E,
-        lineNumber: 171,
+        lineNumber: 203,
         columnNumber: 15
       }
     }, description));
@@ -6581,7 +6621,8 @@ InputRadio.propTypes = {
   css: PropTypes.object,
   inputType: PropTypes.oneOf(['number', 'text', 'default']),
   onChange: PropTypes.func,
-  description: PropTypes.string
+  description: PropTypes.string,
+  readOnly: PropTypes.bool
 };
 InputRadio.displayName = 'InputRadio';
 
@@ -6763,7 +6804,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     size: size,
     isInvalid: isInvalid,
     readOnly: readOnly,
-    isReadOnly: readOnly,
+    isReadOnly: readOnly && !(props !== null && props !== void 0 && props.inputGroup),
     disabled: disabled
   }, props, {
     __self: undefined,
@@ -9324,7 +9365,7 @@ const ItemWrapper$1 = styled(Box, {
   alignItems: 'center',
   borderBottom: '1px solid $bgBorder'
 });
-const Item$2 = styled('div', {
+const Item$3 = styled('div', {
   overflow: 'hidden',
   backgroundColor: '$bgWhite',
   lineHeight: '20px',
@@ -9820,7 +9861,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 617,
       columnNumber: 25
     }
-  })), /*#__PURE__*/React__default.createElement(Item$2, {
+  })), /*#__PURE__*/React__default.createElement(Item$3, {
     css: {
       backgroundColor: 'unset'
     },
@@ -10094,7 +10135,7 @@ const ItemWrapper = styled('div', {
   color: '$textGreen',
   height: '100%'
 });
-const Item$1 = styled('div', {
+const Item$2 = styled('div', {
   backgroundColor: '$bgWhite',
   cursor: 'pointer',
   lineHeight: '20px'
@@ -10185,7 +10226,7 @@ function InputCreatable({
       lineNumber: 181,
       columnNumber: 11
     }
-  }), /*#__PURE__*/React__default.createElement(Item$1, {
+  }), /*#__PURE__*/React__default.createElement(Item$2, {
     onClick: () => {
       if (onClickItem) onClickItem();
       setOpen(false);
@@ -14107,7 +14148,7 @@ function useMediaQuery(query) {
 }
 
 const ButtonGroup = styled(ToggleGroupPrimitive.Root, {});
-const Item = styled(ButtonGroupItem, {
+const Item$1 = styled(ButtonGroupItem, {
   fontSize: '$label',
   lineHeight: '$label',
   letterSpacing: '$label',
@@ -14125,7 +14166,7 @@ const AdvancedOption = ({
     type: "single",
     orientation: "vertical"
   }, {
-    children: _options.map(option => jsx(Item, Object.assign({
+    children: _options.map(option => jsx(Item$1, Object.assign({
       isToggle: false,
       disabled: disabled,
       value: option.value,
@@ -16343,13 +16384,11 @@ function advancePickerDate(type) {
 
 moment.locale('id');
 
-const getInputPickerValue = (type, date) => {
+const getInputPickerValue = (type, date, isTimePicker) => {
   if (!date) return '';
 
   if (type === SINGLE_PICKER) {
-    return Intl.DateTimeFormat('id-ID', {
-      dateStyle: 'long'
-    }).format(date);
+    return `${moment(date).format(isTimePicker ? 'D MMMM YYYY, HH:mm' : 'D MMMM YYYY')}`;
   } else {
     return `${moment(date[0]).format('ll')} - ${moment(date[1]).format('ll')}`;
   }
@@ -16415,7 +16454,7 @@ function InputDatePicker({
       children: jsx(CalendarOutline, {}, void 0)
     }, void 0), jsx(InputText, {
       placeholder: placeholder,
-      value: getInputPickerValue(type, selectedDate),
+      value: getInputPickerValue(type, selectedDate, showTimePicker),
       // eslint-disable-next-line @typescript-eslint/no-empty-function
       onChange: () => {},
       isPicker: true
@@ -16988,6 +17027,130 @@ Pagination.propTypes = {
 };
 Pagination.displayName = 'Pagination';
 
+const Trigger = props => {
+  return jsx(ContextMenuTrigger$1, Object.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);
+};
+
+const Menu = props => {
+  return jsx(ContextMenu$1, Object.assign({}, props, {
+    children: props === null || props === void 0 ? void 0 : props.children
+  }), void 0);
+};
+
+const Item = props => {
+  return jsx(MenuItem, Object.assign({}, props, {
+    children: props === null || props === void 0 ? void 0 : props.children
+  }), void 0);
+};
+
+const slideUpAndFade$1 = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideRightAndFade$1 = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const slideDownAndFade$1 = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideLeftAndFade$1 = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const ContextMenuTrigger = styled(Trigger);
+const 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
+      }
+    }
+  }
+});
+const 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
+  }
+});
+const ContextMenuSeparator = styled('div', {
+  height: 1,
+  backgroundColor: colors$4.gray150,
+  margin: 5
+});
+
 const TableContainer$4 = styled(Flex$1, {
   position: 'relative',
   flexDirection: 'column',
@@ -17475,9 +17638,11 @@ function Table({
   columnOrder,
   customRowsStyle,
   isMobileLayout,
-  showDuplicatedData
+  showDuplicatedData,
+  onRowClick
 }) {
   const [limit, setLimit] = useState(rowLimit);
+  const [dataRow, setDataRow] = useState({});
 
   const getInitialState = () => {
     const initialState = {};
@@ -17622,6 +17787,54 @@ function Table({
       });
     }
   }, [data, selectedIds]);
+
+  const getOptionsMenu = () => {
+    var _a, _b;
+
+    let options = [];
+
+    for (let i = 0; i < (page === null || page === void 0 ? void 0 : page.length); i++) {
+      prepareRow(page[i]);
+
+      for (let j = 0; j < page[i].cells.length; j++) {
+        const 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;
+  };
+
+  const renderContextMenu = () => {
+    const options = getOptionsMenu();
+    return jsx(ContextMenu, Object.assign({
+      id: "context-menu-table"
+    }, {
+      children: options === null || options === void 0 ? void 0 : options.map((option, index) => {
+        return jsxs(React.Fragment, {
+          children: [jsx(ContextMenuItem, Object.assign({
+            data: {
+              row: dataRow
+            },
+            onClick: () => 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 && jsx(ContextMenuSeparator, {}, void 0)]
+        }, index);
+      })
+    }), void 0);
+  };
+
+  const handleRowClick = (row, i) => {
+    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i);
+    setDataRow(row);
+  };
+
   return jsxs(Box, Object.assign({
     css: {
       position: 'relative',
@@ -17649,11 +17862,11 @@ function Table({
         children: "Loading .... "
       }), void 0)
     }), void 0), !isMobile ? jsxs(Fragment, {
-      children: [jsx(TableContainer$3, Object.assign({
+      children: [jsxs(TableContainer$3, Object.assign({
         css: css,
         ref: scrollerRef
       }, {
-        children: renderInfiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
+        children: [renderInfiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
           children: [jsx(TableHead$3, Object.assign({
             css: headerCss
           }, {
@@ -17689,12 +17902,17 @@ function Table({
             })
           }), void 0), jsx(TableBody$3, Object.assign({}, getTableBodyProps(), {
             children: page.map((row, i) => {
-              var _a;
+              var _a, _b;
 
               prepareRow(row);
               const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
               const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
               const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
+              const isContextMenu = (_b = row.cells.filter(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;
               let customStyle = {};
 
               if (customRowsStyle && customRowsStyle(row.values).length) {
@@ -17714,13 +17932,35 @@ function Table({
                   css: customStyle
                 }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
+                    var _a, _b;
+
                     return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign(Object.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: () => handleRowClick(row, i)
                     }, {
-                      children: cell.render('Cell')
+                      children: jsx(ConditionalWrapper, Object.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: children => jsx(ContextMenuTrigger, Object.assign({
+                          id: "context-menu-table",
+                          triggerSide: "left"
+                        }, {
+                          children: jsx(Box, Object.assign({
+                            css: {
+                              cursor: 'pointer',
+                              padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                            },
+                            onClick: () => handleRowClick(row, i)
+                          }, {
+                            children: children
+                          }), void 0)
+                        }), void 0)
+                      }, {
+                        children: cell.render('Cell')
+                      }), void 0)
                     }), void 0);
                   })
                 }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$3, Object.assign({
@@ -17760,7 +18000,7 @@ function Table({
               }, row.id);
             })
           }), void 0)]
-        }), void 0))
+        }), void 0)), renderContextMenu()]
       }), void 0), !isInfiniteScroll && jsx(Box, Object.assign({
         css: {
           width: '100%'
@@ -18534,6 +18774,7 @@ var _jsxFileName$d = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packa
 
 const rowMenuColumn = (options, icon, config) => ({
   id: 'menu',
+  options,
   Header: () => null,
   Cell: props => {
     const defaultConfig = {
@@ -18557,7 +18798,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 36,
+        lineNumber: 37,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
@@ -18565,7 +18806,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 37,
+        lineNumber: 38,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18578,7 +18819,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 38,
+        lineNumber: 39,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -18586,21 +18827,21 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 39,
+        lineNumber: 40,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 39,
+        lineNumber: 40,
         columnNumber: 70
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 42,
+        lineNumber: 43,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
@@ -18623,7 +18864,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 43,
+        lineNumber: 44,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -18631,7 +18872,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 63,
+        lineNumber: 64,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -18643,7 +18884,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 64,
+        lineNumber: 65,
         columnNumber: 19
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
@@ -18654,7 +18895,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 73,
+        lineNumber: 74,
         columnNumber: 19
       }
     })))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
@@ -18665,7 +18906,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 79,
+        lineNumber: 80,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -18673,7 +18914,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 80,
+        lineNumber: 81,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18686,28 +18927,28 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 81,
+        lineNumber: 82,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 82,
+        lineNumber: 83,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 82,
+        lineNumber: 83,
         columnNumber: 36
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 85,
+        lineNumber: 86,
         columnNumber: 11
       }
     }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -18717,7 +18958,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 86,
+        lineNumber: 87,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18732,7 +18973,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 87,
+        lineNumber: 88,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -18740,7 +18981,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 89,
+        lineNumber: 90,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18756,7 +18997,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 90,
+        lineNumber: 91,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18765,7 +19006,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 101,
+        lineNumber: 102,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18773,7 +19014,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 105,
+        lineNumber: 106,
         columnNumber: 19
       }
     })))))));
@@ -21754,6 +21995,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio) {
 function upload({
   url,
   file,
+  customBody,
   tokenKey,
   token,
   progress,
@@ -21764,8 +22006,18 @@ function upload({
   onProgress
 }) {
   const promise = new Promise((resolve, reject) => {
+    var _a;
+
     const formdata = new FormData();
-    formdata.append(reqKey, file);
+
+    if (customBody) {
+      for (let 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.post(url).set(tokenKey, token).send(formdata).on('progress', e => {
       onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
       progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
@@ -21902,6 +22154,7 @@ const Upload = ({
   multiple,
   fileList,
   onChange,
+  onBeforeCrop,
   onError,
   onSuccess,
   onProgress,
@@ -21919,6 +22172,7 @@ const Upload = ({
   progress,
   loading,
   action,
+  customBodyRequest,
   token,
   tokenKey,
   reqKey,
@@ -21926,7 +22180,9 @@ const Upload = ({
   ratio,
   disabled,
   errorMessage,
-  maxSizeMB
+  maxSizeMB,
+  imageCompression,
+  hiddenToggleAspect
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -22100,6 +22356,7 @@ const Upload = ({
         upload({
           url: action,
           file: newFile,
+          customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
           token,
           tokenKey,
           reqKey,
@@ -22122,7 +22379,7 @@ const Upload = ({
               }
             }
 
-            (_onChange = onChange({
+            onChange === null || onChange === void 0 ? void 0 : (_onChange = onChange({
               fileList: arrProgress,
               file: fileProgress,
               indexReplace: indexReplace.current,
@@ -22144,7 +22401,7 @@ const Upload = ({
             }
           }
 
-          (_onChange2 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange2 = onChange({
             fileList: arrSuccess,
             file: fileSuccess,
             indexReplace: indexReplace.current,
@@ -22165,7 +22422,7 @@ const Upload = ({
             }
           }
 
-          (_onChange3 = onChange({
+          onChange === null || onChange === void 0 ? void 0 : (_onChange3 = onChange({
             fileList: arrError,
             file: fileError,
             indexReplace: indexReplace.current,
@@ -22175,7 +22432,7 @@ const Upload = ({
       } else {
         var _onChange4, _onChange4$then;
 
-        (_onChange4 = onChange({
+        onChange === null || onChange === void 0 ? void 0 : (_onChange4 = onChange({
           fileList: arrFile,
           file: newFile,
           indexReplace: indexReplace.current,
@@ -22193,15 +22450,41 @@ const Upload = ({
   }
 
   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]));
+        }
       }
     }
   }
@@ -22209,22 +22492,36 @@ const Upload = ({
   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(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(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 {
@@ -22254,15 +22551,13 @@ const Upload = ({
   }
 
   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) {
@@ -22355,7 +22650,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 572,
+        lineNumber: 607,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -22365,7 +22660,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 573,
+        lineNumber: 608,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22381,7 +22676,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 583,
+            lineNumber: 618,
             columnNumber: 16
           }
         });
@@ -22393,7 +22688,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 586,
+          lineNumber: 621,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22403,7 +22698,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 587,
+          lineNumber: 622,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22412,7 +22707,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 588,
+          lineNumber: 623,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22425,7 +22720,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 589,
+          lineNumber: 624,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22434,7 +22729,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 597,
+          lineNumber: 632,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -22444,7 +22739,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 599,
+          lineNumber: 634,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22463,7 +22758,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 610,
+            lineNumber: 645,
             columnNumber: 16
           }
         });
@@ -22474,7 +22769,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 648,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22484,7 +22779,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 614,
+          lineNumber: 649,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22493,7 +22788,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 615,
+          lineNumber: 650,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22506,7 +22801,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 616,
+          lineNumber: 651,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22516,14 +22811,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 624,
+          lineNumber: 659,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Tooltip$1, {
@@ -22531,7 +22826,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 626,
+          lineNumber: 661,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -22546,7 +22841,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 627,
+          lineNumber: 662,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -22559,7 +22854,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 642,
+          lineNumber: 677,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22568,7 +22863,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 685,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -22576,7 +22871,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 652,
+          lineNumber: 687,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22592,7 +22887,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 663,
+        lineNumber: 698,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22606,7 +22901,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 664,
+        lineNumber: 699,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -22632,7 +22927,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 665,
+        lineNumber: 700,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -22640,14 +22935,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 678,
+        lineNumber: 713,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 679,
+        lineNumber: 714,
         columnNumber: 11
       }
     }, "Berkas sedang diunggah")));
@@ -22660,7 +22955,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 687,
+        lineNumber: 722,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -22676,7 +22971,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 688,
+        lineNumber: 723,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -22688,21 +22983,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 734,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 735,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 702,
+        lineNumber: 737,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -22711,7 +23006,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 703,
+        lineNumber: 738,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -22719,7 +23014,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 739,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -22729,14 +23024,14 @@ const Upload = ({
       __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.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 748,
         columnNumber: 19
       }
     }, error));
@@ -22747,7 +23042,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 720,
+        lineNumber: 755,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -22755,7 +23050,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 721,
+        lineNumber: 756,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -22763,7 +23058,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 722,
+        lineNumber: 757,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -22776,7 +23071,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 724,
+        lineNumber: 759,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -22788,7 +23083,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 727,
+        lineNumber: 762,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -22799,7 +23094,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 728,
+        lineNumber: 763,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -22813,14 +23108,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 729,
+        lineNumber: 764,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 732,
+        lineNumber: 767,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22832,16 +23127,23 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 733,
+        lineNumber: 768,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 770,
+        columnNumber: 15
+      }
+    }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
       label: "Aspect Ratio",
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
-        columnNumber: 13
+        lineNumber: 772,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
       style: {
@@ -22852,15 +23154,15 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
-        columnNumber: 15
+        lineNumber: 773,
+        columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
       gap: 4,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 741,
+        lineNumber: 780,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22869,7 +23171,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 742,
+        lineNumber: 781,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22877,7 +23179,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 745,
+        lineNumber: 784,
         columnNumber: 15
       }
     }, "Simpan")))));
@@ -22893,7 +23195,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 754,
+      lineNumber: 793,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -22902,7 +23204,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 757,
+      lineNumber: 796,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -22920,7 +23222,8 @@ Upload.defaultProps = {
   resKey: 'url',
   ratio: 16 / 9,
   disabled: false,
-  maxSizeMB: 1
+  maxSizeMB: 1,
+  imageCompression: true
 };
 Upload.propTypes = {
   /**
@@ -23031,6 +23334,11 @@ Upload.propTypes = {
    */
   showCropper: PropTypes.bool,
 
+  /**
+   Hidden toggle aspect ratio image cropper.
+   */
+  hiddenToggleAspect: PropTypes.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.
    */
@@ -23056,6 +23364,11 @@ Upload.propTypes = {
    */
   action: PropTypes.string,
 
+  /**
+   Custom body request to upload action.
+   */
+  customBodyRequest: PropTypes.func,
+
   /**
    Contains an authentication token for upload API.
    */
@@ -23074,7 +23387,17 @@ Upload.propTypes = {
   /**
    Referencing the key to get the file from the API response.
    */
-  resKey: PropTypes.string
+  resKey: PropTypes.string,
+
+  /**
+   To compression image if file size > 1MB.
+   */
+  imageCompression: PropTypes.bool,
+
+  /**
+   Callback to handle before crop image.
+   */
+  onBeforeCrop: PropTypes.func
 };
 Upload.displayName = 'Upload';
 
@@ -26631,6 +26954,8 @@ const Navigation = props => {
         align: "center",
         key: `step-${i}`,
         onClick: () => {
+          if (props.onNavClicked) props.onNavClicked(i);
+
           if (!forbidClickNav && isComplete && !isHide) {
             props.goToStep(i);
           }
@@ -26648,7 +26973,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 118,
+          lineNumber: 119,
           columnNumber: 15
         }
       }), isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -26660,7 +26985,7 @@ const Navigation = props => {
         __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.createElement(Tooltip$1, {
@@ -26669,7 +26994,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 122,
+          lineNumber: 123,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -26681,7 +27006,7 @@ const Navigation = props => {
         __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.createElement(Flex$1, {
@@ -26692,7 +27017,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 127,
+          lineNumber: 128,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -26701,7 +27026,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 128,
+          lineNumber: 129,
           columnNumber: 19
         }
       }, "Coming Soon")))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26718,7 +27043,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 136,
+          lineNumber: 137,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -26727,7 +27052,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 148,
+          lineNumber: 149,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26743,7 +27068,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 150,
+          lineNumber: 151,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26753,7 +27078,7 @@ const Navigation = props => {
         __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.createElement(Tooltip$1, {
@@ -26763,7 +27088,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 166,
+          lineNumber: 167,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -26772,7 +27097,7 @@ const Navigation = props => {
         __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.createElement(Flex$1, {
@@ -26784,7 +27109,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 171,
+          lineNumber: 172,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -26793,7 +27118,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 172,
+          lineNumber: 173,
           columnNumber: 19
         }
       }, "Coming Soon"))));
@@ -26815,7 +27140,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 182,
+      lineNumber: 183,
       columnNumber: 5
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -26827,7 +27152,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 198,
+      lineNumber: 199,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -26840,7 +27165,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 199,
+      lineNumber: 200,
       columnNumber: 11
     }
   }, stepItems)) : stepItems);
@@ -26941,7 +27266,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 296,
+      lineNumber: 297,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
@@ -26963,7 +27288,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 297,
+      lineNumber: 298,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -26971,11 +27296,12 @@ const Default = props => {
     className: !props.isMobile && 'stepperInstance',
     instance: setInstance,
     nav: /*#__PURE__*/React__default.createElement(Navigation, {
+      onNavClicked: props.onNavClicked,
       isComplete: state.isComplete,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 319,
+        lineNumber: 320,
         columnNumber: 16
       }
     }),
@@ -26985,7 +27311,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 314,
+      lineNumber: 315,
       columnNumber: 9
     }
   }), props.children)));
@@ -27489,7 +27815,8 @@ function EditableTableMobile(props) {
   const {
     instance,
     emptyDataMessage,
-    showCheckbox
+    showCheckbox,
+    customRows
   } = props;
   const {
     getTableProps,
@@ -27500,6 +27827,156 @@ function EditableTableMobile(props) {
     state,
     toggleAllRowsExpanded
   } = instance;
+
+  const getCustomRows = (row, renderRow) => {
+    var _a, _b;
+
+    let customStyle = {};
+    let CustomRow;
+    let showInMobile = false;
+
+    if (customRows && customRows(row).length) {
+      for (let i = 0; i < customRows(row).length; 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 = () => {
+            var _a;
+
+            return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+          };
+        }
+      }
+    }
+
+    return {
+      CustomRow,
+      customStyle,
+      showInMobile
+    };
+  };
+
+  const renderTableRow = (row, index, customStyle) => {
+    return jsxs(Fragment, {
+      children: [/*#__PURE__*/createElement$2(TableRow$2, Object.assign({
+        css: customStyle
+      }, row.getRowProps(), {
+        key: `row_mobile_${index}`
+      }), row.cells.map((cell, index) => {
+        var _a, _b;
+
+        const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+        const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+        return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
+          style: {
+            minWidth: cell.column.minWidth,
+            width: isSelector ? 10 : cell.column.width,
+            maxWidth: isSelector ? 10 : cell.column.maxWidth
+          }
+        }), {
+          key: index
+        }), jsxs(Flex$1, Object.assign({
+          align: "center",
+          justify: "between",
+          css: {
+            cursor: 'pointer',
+            minHeight: 40
+          }
+        }, {
+          children: [jsx(Box, {
+            children: cell.render('Cell')
+          }, void 0), !isSelector && jsx(Flex$1, Object.assign({
+            justify: "center",
+            align: "center",
+            onClick: () => {
+              if (!Object.keys(state.expanded).includes(row.id)) {
+                toggleAllRowsExpanded(false);
+              }
+
+              row.toggleRowExpanded(!row.isExpanded);
+            }
+          }, {
+            children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
+          }), void 0)]
+        }), void 0));
+      })), /*#__PURE__*/createElement$2(TableRowCollapse, Object.assign({}, row.getRowProps(), {
+        key: `row_mobile_collapse_${index}`,
+        css: {
+          backgroundColor: '$gray50'
+        }
+      }), showCheckbox && jsx(TableCell$2, {}, void 0), jsx(TableCellCollapse, {
+        children: jsx(Collapalse, Object.assign({
+          isOpen: row.isExpanded
+        }, {
+          children: jsx(Flex$1, Object.assign({
+            direction: "column",
+            css: {
+              borderTop: '1pt solid $bgBorder'
+            }
+          }, {
+            children: row.cells.filter(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((cell, index) => {
+              var _a, _b, _c, _d;
+
+              const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
+              const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+              const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+              return !isMobileHeader && !isSelector && jsx(Flex$1, Object.assign({
+                direction: "column",
+                justify: "center",
+                css: {
+                  borderBottom: '1pt solid $bgBorder',
+                  padding: '10px 12px',
+                  minHeight: 52
+                }
+              }, {
+                children: jsxs(Grid, Object.assign({
+                  columns: 6,
+                  flow: "row",
+                  css: {
+                    gridRowGap: '$spacing-04',
+                    gridColumnGap: '$spacing-04',
+                    alignItems: 'center'
+                  }
+                }, {
+                  children: [jsx(GridItem, Object.assign({
+                    colSpan: 3
+                  }, {
+                    children: jsx(Heading, Object.assign({
+                      heading: "headerTable",
+                      color: "secondary"
+                    }, {
+                      children: typeof headerRender === 'string' ? jsxs(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) ? jsx(Required$2, {
+                          children: "*"
+                        }, void 0) : '']
+                      }, void 0) : headerRender
+                    }), void 0)
+                  }), void 0), jsx(GridItem, Object.assign({
+                    colSpan: 3
+                  }, {
+                    children: jsx(Flex$1, Object.assign({
+                      justify: "end"
+                    }, {
+                      children: cell.render('Cell')
+                    }), void 0)
+                  }), void 0)]
+                }), void 0)
+              }), index);
+            })
+          }), void 0)
+        }), void 0)
+      }, void 0))]
+    }, void 0);
+  };
+
   return jsx(TableContainer$2, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
@@ -27532,117 +28009,17 @@ function EditableTableMobile(props) {
       }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
           prepareRow(row);
-          return jsxs(React__default.Fragment, {
-            children: [/*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
-              key: `row_mobile_${index}`
-            }), row.cells.map((cell, index) => {
-              var _a, _b;
-
-              const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
-              const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
-              return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
-                style: {
-                  minWidth: cell.column.minWidth,
-                  width: isSelector ? 10 : cell.column.width,
-                  maxWidth: isSelector ? 10 : cell.column.maxWidth
-                }
-              }), {
-                key: index
-              }), jsxs(Flex$1, Object.assign({
-                align: "center",
-                justify: "between",
-                css: {
-                  cursor: 'pointer',
-                  minHeight: 40
-                }
-              }, {
-                children: [jsx(Box, {
-                  children: cell.render('Cell')
-                }, void 0), !isSelector && jsx(Flex$1, Object.assign({
-                  justify: "center",
-                  align: "center",
-                  onClick: () => {
-                    if (!Object.keys(state.expanded).includes(row.id)) {
-                      toggleAllRowsExpanded(false);
-                    }
-
-                    row.toggleRowExpanded(!row.isExpanded);
-                  }
-                }, {
-                  children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
-                }), void 0)]
-              }), void 0));
-            })), /*#__PURE__*/createElement$2(TableRowCollapse, Object.assign({}, row.getRowProps(), {
-              key: `row_mobile_collapse_${index}`,
-              css: {
-                backgroundColor: '$gray50'
-              }
-            }), showCheckbox && jsx(TableCell$2, {}, void 0), jsx(TableCellCollapse, {
-              children: jsx(Collapalse, Object.assign({
-                isOpen: row.isExpanded
-              }, {
-                children: jsx(Flex$1, Object.assign({
-                  direction: "column",
-                  css: {
-                    borderTop: '1pt solid $bgBorder'
-                  }
-                }, {
-                  children: row.cells.filter(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((cell, index) => {
-                    var _a, _b, _c, _d;
-
-                    const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                    const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
-                    const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
-                    return !isMobileHeader && !isSelector && jsx(Flex$1, Object.assign({
-                      direction: "column",
-                      justify: "center",
-                      css: {
-                        borderBottom: '1pt solid $bgBorder',
-                        padding: '10px 12px',
-                        minHeight: 52
-                      }
-                    }, {
-                      children: jsxs(Grid, Object.assign({
-                        columns: 6,
-                        flow: "row",
-                        css: {
-                          gridRowGap: '$spacing-04',
-                          gridColumnGap: '$spacing-04',
-                          alignItems: 'center'
-                        }
-                      }, {
-                        children: [jsx(GridItem, Object.assign({
-                          colSpan: 3
-                        }, {
-                          children: jsx(Heading, Object.assign({
-                            heading: "headerTable",
-                            color: "secondary"
-                          }, {
-                            children: typeof headerRender === 'string' ? jsxs(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) ? jsx(Required$2, {
-                                children: "*"
-                              }, void 0) : '']
-                            }, void 0) : headerRender
-                          }), void 0)
-                        }), void 0), jsx(GridItem, Object.assign({
-                          colSpan: 3
-                        }, {
-                          children: jsx(Flex$1, Object.assign({
-                            justify: "end"
-                          }, {
-                            children: cell.render('Cell')
-                          }), void 0)
-                        }), void 0)]
-                      }), void 0)
-                    }), index);
-                  })
-                }), void 0)
-              }), void 0)
-            }, void 0))]
+          const {
+            customStyle
+          } = getCustomRows(row);
+          const {
+            CustomRow,
+            showInMobile
+          } = getCustomRows(row, () => renderTableRow(row, index, customStyle));
+          return jsx(React__default.Fragment, {
+            children: CustomRow && showInMobile ? jsx(CustomRow, {
+              style: customStyle
+            }, void 0) : renderTableRow(row, index, customStyle)
           }, index);
         })
       }), void 0), rows.length < 1 && jsx(TableFoot$1, {
@@ -28044,6 +28421,67 @@ function EditableTable(props) {
     }
   }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
   const isDesktop = useMediaQuery('(min-width: 767px)');
+
+  const getCustomRows = (row, renderRow) => {
+    var _a;
+
+    let customStyle = {};
+    let CustomRow;
+
+    if (customRows && customRows(row).length) {
+      for (let i = 0; i < customRows(row).length; i++) {
+        if (customRows(row)[i].predicate) {
+          customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
+
+          CustomRow = () => {
+            var _a;
+
+            return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+          };
+        }
+      }
+    }
+
+    return {
+      CustomRow,
+      customStyle
+    };
+  };
+
+  const renderTableRow = (row, customStyle) => {
+    return jsx(TableRow$1, Object.assign({
+      css: customStyle
+    }, row.getRowProps(), {
+      children: row.cells.filter(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(cell => {
+        var _a;
+
+        return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsx(TableCell$1, Object.assign({}, cell.getCellProps({
+          style: {
+            minWidth: cell.column.minWidth,
+            width: cell.column.width,
+            maxWidth: cell.column.maxWidth
+          }
+        }), {
+          css: {
+            '@md': {
+              height: rowHeight
+            }
+          }
+        }, {
+          children: jsx(TableCellContent$1, Object.assign({
+            align: align
+          }, {
+            children: cell.render('Cell')
+          }), void 0)
+        }), void 0);
+      })
+    }), void 0);
+  };
+
   return isDesktop ? jsx(TableContainer$1, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
@@ -28071,62 +28509,19 @@ function EditableTable(props) {
         })
       }, void 0), jsx(TableBody$1, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
-          var _a;
-
           prepareRow(row);
           const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
           const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
-          let customStyle = {};
-          let CustomRow;
-
-          if (customRows && customRows(row).length) {
-            for (let i = 0; i < customRows(row).length; i++) {
-              if (customRows(row)[i].predicate) {
-                customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
-
-                CustomRow = () => {
-                  var _a;
-
-                  return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values);
-                };
-              }
-            }
-          }
-
+          const {
+            customStyle
+          } = getCustomRows(row);
+          const {
+            CustomRow
+          } = getCustomRows(row, () => renderTableRow(row, customStyle));
           return jsxs(React__default.Fragment, {
             children: [CustomRow ? jsx(CustomRow, {
               style: customStyle
-            }, void 0) : jsx(TableRow$1, Object.assign({
-              css: customStyle
-            }, row.getRowProps(), {
-              children: row.cells.filter(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(cell => {
-                var _a;
-
-                return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsx(TableCell$1, Object.assign({}, cell.getCellProps({
-                  style: {
-                    minWidth: cell.column.minWidth,
-                    width: cell.column.width,
-                    maxWidth: cell.column.maxWidth
-                  }
-                }), {
-                  css: {
-                    '@md': {
-                      height: rowHeight
-                    }
-                  }
-                }, {
-                  children: jsx(TableCellContent$1, Object.assign({
-                    align: align
-                  }, {
-                    children: cell.render('Cell')
-                  }), void 0)
-                }), void 0);
-              })
-            }), void 0), subRowCells.map(cell => {
+            }, void 0) : renderTableRow(row, customStyle), subRowCells.map(cell => {
               var _a;
 
               return jsx(TableRow$1, Object.assign({
@@ -28197,7 +28592,8 @@ function EditableTable(props) {
     css: props === null || props === void 0 ? void 0 : props.css,
     instance: instance,
     emptyDataMessage: emptyDataMessage,
-    showCheckbox: showCheckbox
+    showCheckbox: showCheckbox,
+    customRows: customRows
   }, void 0);
 }
 
@@ -32036,4 +32432,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };