npm - @majoo-ui/react - Versions diffs - 1.42.0 → 1.42.3 - Mend

@majoo-ui/react 1.42.0 → 1.42.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/components/form/components/InputResourceList/InputResourceList.d.ts +2 -2
package/components/stepWizard/index.d.ts +2 -0
package/index.esm.js +785 -369
package/index.umd.js +789 -371
package/package.json +2 -2

package/index.umd.js CHANGED Viewed

@@ -1150,7 +1150,8 @@
       lineHeights: Object.assign({}, core.foundations.lineHeights),
       letterSpacings: Object.assign({}, core.foundations.letterSpacings),
       radii: Object.assign({}, core.foundations.radii),
-      sizes: Object.assign({}, core.foundations.sizes)
+      sizes: Object.assign({}, core.foundations.sizes),
+      zIndices: Object.assign({}, core.foundations.zIndices)
     },
     media: {
       sm: '(min-width: 359px)',
@@ -2636,10 +2637,25 @@
           overflow: 'hidden',
           whiteSpace: 'nowrap'
         }
+      },
+      align: {
+        justify: {
+          textAlign: 'justify'
+        },
+        center: {
+          textAlign: 'center'
+        },
+        right: {
+          textAlign: 'right'
+        },
+        left: {
+          textAlign: 'left'
+        }
       }
     },
     defaultVariants: {
-      as: 'p'
+      as: 'p',
+      align: 'left'
     }
   });
   const TextVariantsEnum = ['link', 'contentButton', 'placeholder', 'breadcrumb', 'label', 'status', 'helper', 'caption'];
@@ -2748,7 +2764,13 @@
           letterSpacing: '$long-content-regular',
           fontWeight: '400'
         }
-      }
+      },
+      maxLine: seqNumberVariants(value => ({
+        '-webkit-line-clamp': `${value}`,
+        display: '-webkit-box',
+        '-webkit-box-orient': 'vertical',
+        overflow: 'hidden'
+      }), 10, true)
     },
     defaultVariants: {
       paragraph: 'shortContentRegular',
@@ -7319,7 +7341,7 @@
     ];
   });
-  const _excluded$h = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly"];
+  const _excluded$h = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly", "isInvalid"];
   var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
   const Box = styled('div', {
     margin: 0,
@@ -7387,6 +7409,17 @@
             border: '1px solid $gray300'
           }
         }
+      },
+      isInvalid: {
+        true: {
+          border: '1px solid $formError',
+          '&:focus-within': {
+            border: '1px solid $formError'
+          },
+          '&:hover': {
+            border: '1px solid $formError'
+          }
+        }
       }
     }
   });
@@ -7537,7 +7570,8 @@
       disabledOptions,
       css,
       onSearch,
-      readOnly
+      readOnly,
+      isInvalid
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
@@ -7591,7 +7625,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 266,
+        lineNumber: 274,
         columnNumber: 5
       }
     }), ({
@@ -7610,7 +7644,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 285,
+        lineNumber: 293,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -7619,10 +7653,11 @@
       size: size,
       disabled: disabled,
       readOnly: readOnly,
+      isInvalid: isInvalid,
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 286,
+        lineNumber: 294,
         columnNumber: 11
       }
     }), search ? /*#__PURE__*/React__namespace.createElement("div", {
@@ -7632,7 +7667,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 293,
+        lineNumber: 302,
         columnNumber: 15
       }
     }, icon ? /*#__PURE__*/React__namespace.createElement("div", {
@@ -7643,7 +7678,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 295,
+        lineNumber: 304,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__namespace.createElement(InputLeftElement, {
@@ -7651,14 +7686,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$F,
-          lineNumber: 296,
+          lineNumber: 305,
           columnNumber: 49
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 296,
+        lineNumber: 305,
         columnNumber: 21
       }
     }), /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
@@ -7672,7 +7707,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 297,
+        lineNumber: 306,
         columnNumber: 21
       }
     }))) : /*#__PURE__*/React__namespace.createElement(Input$5, _extends({
@@ -7686,7 +7721,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 305,
+        lineNumber: 314,
         columnNumber: 19
       }
     }))) : /*#__PURE__*/React__namespace.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -7698,7 +7733,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 314,
+        lineNumber: 323,
         columnNumber: 15
       }
     }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Text$1, {
@@ -7707,7 +7742,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 321,
+        lineNumber: 330,
         columnNumber: 19
       }
     }, selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Text$1, {
@@ -7716,7 +7751,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 325,
+        lineNumber: 334,
         columnNumber: 19
       }
     }, placeholder)), !icon ? /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps({
@@ -7727,7 +7762,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 332,
+        lineNumber: 341,
         columnNumber: 15
       }
     }), /*#__PURE__*/React__namespace.createElement(icons.CaretDownOutline, {
@@ -7735,7 +7770,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 337,
+        lineNumber: 346,
         columnNumber: 17
       }
     })) : null), /*#__PURE__*/React__namespace.createElement(OptionWrapper$2, {
@@ -7746,14 +7781,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 341,
+        lineNumber: 350,
         columnNumber: 11
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 343,
+        lineNumber: 352,
         columnNumber: 15
       }
     }), item.map((item, index) => {
@@ -7776,7 +7811,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$F,
-          lineNumber: 345,
+          lineNumber: 354,
           columnNumber: 19
         }
       }), item.name);
@@ -7784,14 +7819,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 367,
+        lineNumber: 376,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(StyledDiv$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 368,
+        lineNumber: 377,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -7801,7 +7836,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 369,
+        lineNumber: 378,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -7813,7 +7848,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 370,
+        lineNumber: 379,
         columnNumber: 21
       }
     })), "Item tidak ditemukan")))));
@@ -7833,7 +7868,8 @@
     valueSelector: PropTypes__default["default"].string,
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
     onSearch: PropTypes__default["default"].func,
-    readOnly: PropTypes__default["default"].bool
+    readOnly: PropTypes__default["default"].bool,
+    isInvalid: PropTypes__default["default"].bool
   };
   Select$1.defaultProps = {
     placeholder: 'Select Item',
@@ -7846,7 +7882,8 @@
     disabledOptions: [],
     textSelector: 'name',
     valueSelector: 'value',
-    readOnly: false
+    readOnly: false,
+    isInvalid: false
   };
   var toPropertyKey = toPropertyKey$3;
@@ -8265,6 +8302,17 @@
             border: '1px solid $gray300'
           }
         }
+      },
+      isInvalid: {
+        true: {
+          border: '1px solid $formError',
+          '&:focus-within': {
+            border: '1px solid $formError'
+          },
+          '&:hover': {
+            border: '1px solid $formError'
+          }
+        }
       }
     }
   });
@@ -8411,6 +8459,7 @@
     disabledOptions,
     textEmptyItem,
     onRemoveItem,
+    isInvalid,
     props
   }) {
     const [initItem, setInitItem] = React__namespace.useState(option || []); //init filter selectedItems on useMultipleSelection
@@ -8581,16 +8630,17 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 373,
+        lineNumber: 380,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__namespace.createElement(Select, {
       size: size,
       disabled: disabled || readOnly,
+      isInvalid: isInvalid,
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 374,
+        lineNumber: 381,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -8601,7 +8651,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 375,
+        lineNumber: 382,
         columnNumber: 9
       }
     }), search ? /*#__PURE__*/React__namespace.createElement(Input$4, _extends({}, getInputProps({
@@ -8612,7 +8662,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 380,
+        lineNumber: 387,
         columnNumber: 13
       }
     })) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
@@ -8623,7 +8673,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 386,
+        lineNumber: 393,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__namespace.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -8634,7 +8684,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 395,
+        lineNumber: 402,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
@@ -8642,22 +8692,21 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 400,
+        lineNumber: 407,
         columnNumber: 11
       }
-    }))), selectedItems.length !== 0 ? /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
+    }))), selectedItems.length !== 0 && /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
       disabled: disabled,
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 404,
+        lineNumber: 411,
         columnNumber: 9
       }
-    }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag // ref={ref}
-    , _extends({
+    }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag, _extends({
       isRemovable: readOnly || disabled ? false : true,
       disabled: disabled,
-      size: size === 'sm' ? 'lg' : 'sm',
+      size: "lg",
       readOnly: readOnly,
       key: `selected-item-${index}`
     }, getSelectedItemProps({
@@ -8675,10 +8724,10 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 406,
+        lineNumber: 413,
         columnNumber: 13
       }
-    }), selectedItem.name))) : null, /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
+    }), selectedItem.name))), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -8687,14 +8736,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 428,
+        lineNumber: 434,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 433,
+        lineNumber: 439,
         columnNumber: 11
       }
     }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper$1, _extends({
@@ -8712,7 +8761,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 436,
+        lineNumber: 442,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
@@ -8725,7 +8774,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 449,
+        lineNumber: 455,
         columnNumber: 19
       }
     }, item.isDisabled ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -8733,25 +8782,25 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 458,
+        lineNumber: 464,
         columnNumber: 23
       }
-    }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
+    }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__namespace.createElement(CheckOutline, {
       color: colors.iconGreen,
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 461,
-        columnNumber: 23
+        lineNumber: 468,
+        columnNumber: 25
       }
-    }) : null), /*#__PURE__*/React__namespace.createElement(Item$2, {
+    })), /*#__PURE__*/React__namespace.createElement(Item$2, {
       css: {
         backgroundColor: 'unset'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 464,
+        lineNumber: 472,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, _extends({
@@ -8762,14 +8811,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 469,
+        lineNumber: 477,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 470,
+        lineNumber: 478,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -8779,7 +8828,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 471,
+        lineNumber: 479,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -8791,7 +8840,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 472,
+        lineNumber: 480,
         columnNumber: 17
       }
     })), textEmptyItem))));
@@ -8802,6 +8851,7 @@
     size: PropTypes__default["default"].string,
     disabled: PropTypes__default["default"].bool,
     readOnly: PropTypes__default["default"].bool,
+    isInvalid: PropTypes__default["default"].bool,
     value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].string), PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)]),
     onChange: PropTypes__default["default"].func,
     onRemoveItem: PropTypes__default["default"].func,
@@ -8815,6 +8865,7 @@
     size: 'lg',
     disabled: false,
     readOnly: false,
+    isInvalid: false,
     search: true,
     placement: 'bottom',
     value: [],
@@ -9098,8 +9149,8 @@
         counterFooterText = _d === void 0 ? 'kategori dipilih' : _d,
         _e = _a.isLoading,
         isLoading = _e === void 0 ? false : _e,
-        _f = _a.disableUnchecked,
-        disableUnchecked = _f === void 0 ? false : _f,
+        _f = _a.enabledItems,
+        enabledItems = _f === void 0 ? [] : _f,
         value = _a.value,
         fetchData = _a.fetchData,
         onQueryChange = _a.onQueryChange,
@@ -9109,8 +9160,8 @@
         checkedResources = _g[0],
         setCheckedResources = _g[1];
-    var _h = React.useState(value),
-        tempCheckedRes = _h[0];
+    var _h = React.useState(value);
+        _h[0];
         _h[1];
     var _j = React.useState(),
@@ -9129,7 +9180,9 @@
     var renderCheckbox = function renderCheckbox(resource, index) {
       var _a;
-      var isDisabled = disableUnchecked && !tempCheckedRes.includes(resource);
+      var isDisabled = enabledItems.length > 0 && !enabledItems.find(function (id) {
+        return id === resource.value;
+      });
       return jsxRuntime.jsx(InputCheckbox, {
         label: jsxRuntime.jsxs(Flex$1, __assign({
           gap: 3
@@ -9282,6 +9335,9 @@
   const _excluded$g = ["children"];
   var _jsxFileName$B = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
+  const {
+    zIndices
+  } = core.foundations;
   const PopoverContext = /*#__PURE__*/React.createContext();
   const Popover = ({
     children,
@@ -9319,7 +9375,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 42,
+        lineNumber: 44,
         columnNumber: 10
       }
     }, children);
@@ -9361,7 +9417,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 60,
+        lineNumber: 62,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, getFloatingProps({
@@ -9370,13 +9426,13 @@
         position: strategy,
         top: isMobile ? 0 : y != null ? y : '',
         left: isMobile ? 0 : x != null ? x : '',
-        zIndex: 50
+        zIndex: zIndices.popover
       }, style)
     }), {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 61,
+        lineNumber: 63,
         columnNumber: 7
       }
     }), children)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
@@ -9398,7 +9454,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$B,
-        lineNumber: 84,
+        lineNumber: 86,
         columnNumber: 5
       }
     }), children);
@@ -10590,6 +10646,7 @@
         animation: 'unset'
       }),
       ref: ref,
+      onOpenAutoFocus: props.onOpenAutoFocus,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
@@ -10606,7 +10663,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 69,
+        lineNumber: 74,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10620,7 +10677,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 70,
+        lineNumber: 75,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10634,7 +10691,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 79,
+        lineNumber: 84,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(DialogTitle, {
@@ -10644,7 +10701,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 80,
+        lineNumber: 93,
         columnNumber: 17
       }
     }, modalDialogTitle && /*#__PURE__*/React__default["default"].createElement(Heading, _extends({
@@ -10654,7 +10711,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 81,
+        lineNumber: 94,
         columnNumber: 40
       }
     }))), /*#__PURE__*/React__default["default"].createElement(DialogClose, {
@@ -10662,7 +10719,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 83,
+        lineNumber: 96,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10677,7 +10734,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 84,
+        lineNumber: 97,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -10685,7 +10742,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 94,
+        lineNumber: 107,
         columnNumber: 21
       }
     }))))), modalDialogContent && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, modalDialogContent.props, {
@@ -10697,8 +10754,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 99,
-        columnNumber: 36
+        lineNumber: 113,
+        columnNumber: 15
       }
     })), modalDialogFooter && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, modalDialogFooter.props, {
       css: Object.assign({
@@ -10710,8 +10767,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 100,
-        columnNumber: 35
+        lineNumber: 124,
+        columnNumber: 15
       }
     }))))));
   };
@@ -10748,7 +10805,7 @@
     bottom: 0,
     left: 0,
     backgroundColor: '$bgDimmer',
-    zIndex: 10000,
+    zIndex: '$overlay',
     '&[data-state="open"]': {
       animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
     },
@@ -10809,7 +10866,7 @@
     top: 0,
     bottom: 0,
     width: '100%',
-    zIndex: 10000,
+    zIndex: '$modal',
     display: 'flex',
     flexDirection: 'column',
     maxHeight: '100vh',
@@ -12276,8 +12333,8 @@
     }
   });
   const AdvanceViewToggleButton = styled(Flex$1, {
-    alignSelf: 'flex-end',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    padding: '0px 12px'
   });
   const DATE_PICKER = 0;
   const MONTH_PICKER = 1;
@@ -12617,6 +12674,7 @@
       }, advanceView && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AdvanceViewToggleButton, {
         gap: 3,
         align: "center",
+        justify: "between",
         onClick: () => setExpandAdvanceView(!expandAdvanceView),
         __self: undefined,
         __source: {
@@ -12629,21 +12687,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 505,
+          lineNumber: 510,
           columnNumber: 15
         }
       }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 506,
+          lineNumber: 511,
           columnNumber: 36
         }
       }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 506,
+          lineNumber: 511,
           columnNumber: 61
         }
       })), expandAdvanceView && advanceView, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -12653,16 +12711,19 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 509,
+          lineNumber: 514,
           columnNumber: 13
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        css: {
+          textAlign: 'center'
+        },
         variant: "status",
         color: selected.length > 1 ? 'primary' : 'disable',
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 516,
+          lineNumber: 521,
           columnNumber: 9
         }
       }, selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : 'Tanggal belum dipilih'), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -12670,12 +12731,12 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 521,
+          lineNumber: 526,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
         buttonType: "ghost",
-        size: "lg",
+        size: "sm",
         css: {
           width: '160px',
           fontWeight: 600,
@@ -12687,11 +12748,11 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 522,
+          lineNumber: 527,
           columnNumber: 11
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
-        size: "lg",
+        size: "sm",
         css: {
           width: '160px',
           fontWeight: 600,
@@ -12703,7 +12764,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 536,
+          lineNumber: 541,
           columnNumber: 11
         }
       }, "Proses")));
@@ -12714,7 +12775,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 556,
+          lineNumber: 561,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(CalendarsContainer, {
@@ -12722,7 +12783,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 557,
+          lineNumber: 562,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(CalendarItemContainer, {
@@ -12731,7 +12792,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 558,
+          lineNumber: 563,
           columnNumber: 11
         }
       }, calendars.map((calendar, index) => /*#__PURE__*/React__default["default"].createElement(DateContainer, {
@@ -12739,7 +12800,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 560,
+          lineNumber: 565,
           columnNumber: 15
         }
       }, renderHeader(index), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -12749,7 +12810,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$q,
-          lineNumber: 562,
+          lineNumber: 567,
           columnNumber: 17
         }
       }), pickerState.type === DATE_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderWeekLabel(calendar), renderDateNumber(calendar)), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList())))), multiDatePicker && renderFooter());
@@ -13715,29 +13776,23 @@
         lineNumber: 100,
         columnNumber: 7
       }
-    }, currentPage > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+    }, currentPage > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
       buttonType: "secondary",
       disabled: currentPage === 1,
       onClick: () => handleSelectPage(1),
-      css: {
-        display: 'none',
-        '@md': {
-          display: 'inline-flex'
-        }
-      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 103,
-        columnNumber: 13
+        lineNumber: 104,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
       color: currentPage === 1 ? colors.iconDisable : colors.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 112,
-        columnNumber: 15
+        lineNumber: 105,
+        columnNumber: 17
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
@@ -13747,7 +13802,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 114,
+        lineNumber: 108,
         columnNumber: 13
       }
     }, "Sebelumnya")), generatePages().map((page, index) => {
@@ -13758,7 +13813,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$m,
-          lineNumber: 126,
+          lineNumber: 120,
           columnNumber: 13
         }
       }, page);
@@ -13770,32 +13825,26 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 137,
+        lineNumber: 131,
         columnNumber: 13
       }
-    }, "Selanjutnya"), /*#__PURE__*/React__default["default"].createElement(IconButton, {
+    }, "Selanjutnya"), !isLg && /*#__PURE__*/React__default["default"].createElement(IconButton, {
       buttonType: "secondary",
       disabled: currentPage === totalPages,
       onClick: () => handleSelectPage(totalPages),
-      css: {
-        display: 'none',
-        '@md': {
-          display: 'inline-flex'
-        }
-      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 145,
-        columnNumber: 13
+        lineNumber: 140,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
       color: currentPage === totalPages ? colors.iconDisable : colors.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 154,
-        columnNumber: 15
+        lineNumber: 145,
+        columnNumber: 17
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       orientation: "vertical",
@@ -13806,7 +13855,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 160,
+        lineNumber: 152,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -13818,7 +13867,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 162,
+        lineNumber: 154,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -13826,7 +13875,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 163,
+        lineNumber: 155,
         columnNumber: 9
       }
     }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -13850,7 +13899,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 164,
+        lineNumber: 156,
         columnNumber: 9
       }
     })));
@@ -14104,9 +14153,12 @@
   });
   const MobileTable = /*#__PURE__*/React__default["default"].forwardRef(({
     instance,
+    totalData,
+    emptyDataMessage,
     isInfiniteScroll,
     footer,
     infiniteScrollWrapper,
+    isLoading,
     css
   }, ref) => {
     const {
@@ -14161,6 +14213,7 @@
           columnNumber: 21
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
+        isMobile: true,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$j,
@@ -14334,7 +14387,28 @@
         lineNumber: 190,
         columnNumber: 17
       }
-    }, footer))))));
+    }, totalData > 0 || isLoading ? footer : /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      css: {
+        padding: '$spacing-05 $spacing-07'
+      },
+      align: "center",
+      justify: "center",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 193,
+        columnNumber: 19
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      heading: "shortContentRegular",
+      color: "secondary",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$j,
+        lineNumber: 200,
+        columnNumber: 21
+      }
+    }, emptyDataMessage || 'Tidak ada data'))))))));
   });
   var _jsxFileName$i = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\table\\Table.js";
@@ -14432,6 +14506,11 @@
             }
           }
         }
+      },
+      isMobile: {
+        true: {
+          padding: '0'
+        }
       }
     }
   });
@@ -14545,15 +14624,33 @@
     onSelectedChange,
     isInfiniteScroll,
     hasMoreItems,
-    rowLimit
+    rowLimit,
+    selectedIds
   }) {
     const [limit, setLimit] = React.useState(rowLimit);
+    const getInitialState = () => {
+      let initialState = {};
+      if (fetchData) {
+        Object.assign(initialState, {
+          pageIndex: controlledPageIndex
+        });
+      }
+      if (selectedIds) {
+        Object.assign(initialState, {
+          selectedRowIds: selectedIds
+        });
+      }
+      return Object.keys(initialState).length > 0 ? initialState : undefined;
+    };
     const instance = reactTable.useTable({
       columns,
       data,
-      initialState: fetchData ? {
-        pageIndex: controlledPageIndex
-      } : undefined,
+      initialState: getInitialState(),
       manualPagination: !!fetchData,
       manualSortBy: !!fetchData,
       defaultCanSort: true,
@@ -14574,6 +14671,7 @@
       page,
       gotoPage,
       setPageSize,
+      toggleRowSelected,
       state: {
         pageIndex,
         pageSize,
@@ -14614,13 +14712,13 @@
       css: {
         padding: '$spacing-04 0',
         '@md': {
-          padding: '$spacing-06'
+          padding: '$spacing-06 $spacing-03'
         }
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 289,
+        lineNumber: 310,
         columnNumber: 5
       }
     });
@@ -14637,14 +14735,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 316,
+          lineNumber: 337,
           columnNumber: 9
         }
       }, children),
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 313,
+        lineNumber: 334,
         columnNumber: 5
       }
     }, children);
@@ -14683,6 +14781,15 @@
         });
       }
     }, [data]);
+    React.useEffect(() => {
+      if (selectedIds && data.length > 0) {
+        const selectedIdsKeys = Object.keys(selectedIds);
+        selectedIdsKeys.map(key => {
+          toggleRowSelected(key, true);
+          return key;
+        });
+      }
+    }, [data, selectedIds]);
     return /*#__PURE__*/React__default["default"].createElement(Box$1, {
       css: {
         position: 'relative',
@@ -14692,14 +14799,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 370,
+        lineNumber: 401,
         columnNumber: 5
       }
     }, isLoading && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "center",
       align: "center",
       css: {
-        zIndex: 10,
+        zIndex: '$docked',
         position: 'absolute',
         inset: 0,
         top: isMobile ? 40 : 64,
@@ -14711,7 +14818,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 372,
+        lineNumber: 403,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
@@ -14719,7 +14826,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 386,
+        lineNumber: 417,
         columnNumber: 11
       }
     }, "Loading .... ")), !isMobile ? /*#__PURE__*/React__default["default"].createElement(TableContainer$2, {
@@ -14728,21 +14835,21 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 390,
+        lineNumber: 421,
         columnNumber: 9
       }
     }, renderInfiniteScrollWrapper( /*#__PURE__*/React__default["default"].createElement(TableContent$2, _extends({}, getTableProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 392,
+        lineNumber: 423,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(TableHead$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 393,
+        lineNumber: 424,
         columnNumber: 15
       }
     }, headerGroups.map(headerGroup => {
@@ -14751,7 +14858,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 397,
+          lineNumber: 428,
           columnNumber: 21
         }
       }), visibleHeaders.map((column, index) => {
@@ -14768,7 +14875,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$i,
-            lineNumber: 401,
+            lineNumber: 432,
             columnNumber: 27
           }
         }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer // css={{
@@ -14785,7 +14892,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$i,
-            lineNumber: 417,
+            lineNumber: 448,
             columnNumber: 31
           }
         }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
@@ -14793,7 +14900,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$i,
-            lineNumber: 430,
+            lineNumber: 461,
             columnNumber: 35
           }
         }, headerRender.toUpperCase()))) : headerRender);
@@ -14802,7 +14909,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 446,
+        lineNumber: 477,
         columnNumber: 15
       }
     }), page.map((row, i) => {
@@ -14817,14 +14924,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 456,
+          lineNumber: 487,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableRow$2, _extends({}, row.getRowProps(), {
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 457,
+          lineNumber: 488,
           columnNumber: 23
         }
       }), row.cells.filter(cell => !cell.column.isSubRow).map((cell, index) => /*#__PURE__*/React__default["default"].createElement(TableCell$2, _extends({
@@ -14837,7 +14944,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 461,
+          lineNumber: 492,
           columnNumber: 29
         }
       }), cell.render('Cell')))), row.isExpanded ? subRowCells.map(cell => /*#__PURE__*/React__default["default"].createElement(TableRow$2, {
@@ -14846,7 +14953,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 475,
+          lineNumber: 506,
           columnNumber: 29
         }
       }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
@@ -14854,7 +14961,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 477,
+          lineNumber: 508,
           columnNumber: 33
         }
       })), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -14862,7 +14969,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 479,
+          lineNumber: 510,
           columnNumber: 31
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableCell$2, {
@@ -14876,7 +14983,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 480,
+          lineNumber: 511,
           columnNumber: 33
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -14884,7 +14991,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 489,
+          lineNumber: 520,
           columnNumber: 35
         }
       }, cell.column.Header)), /*#__PURE__*/React__default["default"].createElement(TableCell$2, {
@@ -14897,7 +15004,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 491,
+          lineNumber: 522,
           columnNumber: 33
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -14905,7 +15012,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 499,
+          lineNumber: 530,
           columnNumber: 35
         }
       }, cell.render('Cell')))))) : null);
@@ -14913,14 +15020,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 510,
+        lineNumber: 541,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 511,
+        lineNumber: 542,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootCell, {
@@ -14928,7 +15035,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 512,
+        lineNumber: 543,
         columnNumber: 21
       }
     }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -14940,7 +15047,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 516,
+        lineNumber: 547,
         columnNumber: 25
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -14949,20 +15056,23 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 523,
+        lineNumber: 554,
         columnNumber: 27
       }
     }, emptyDataMessage || 'Tidak ada data')))))))) : /*#__PURE__*/React__default["default"].createElement(MobileTable, {
       ref: scrollerRef,
       instance: instance,
+      totalData: totalData,
+      emptyDataMessage: emptyDataMessage,
       isInfiniteScroll: isInfiniteScroll,
       footer: renderFooter(),
       infiniteScrollWrapper: renderInfiniteScrollWrapper,
+      isLoading: isLoading,
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 536,
+        lineNumber: 567,
         columnNumber: 9
       }
     }));
@@ -14982,7 +15092,8 @@
     emptyDataMessage: PropTypes__default["default"].string,
     isInfiniteScroll: PropTypes__default["default"].bool,
     hasMoreItems: PropTypes__default["default"].bool,
-    rowLimit: PropTypes__default["default"].number
+    rowLimit: PropTypes__default["default"].number,
+    selectedIds: PropTypes__default["default"].object
   };
   Table.defaultProps = {
     keyId: 'id',
@@ -15810,10 +15921,21 @@
   var _jsxFileName$f = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowMenuColumn.js";
-  const rowMenuColumn = (options, icon) => ({
+  const rowMenuColumn = (options, icon, config) => ({
     id: 'menu',
     Header: () => null,
     Cell: props => {
+      const defaultConfig = {
+        mobileTitle: 'Aksi',
+        cssContent: {},
+        cssMenuItem: {}
+      };
+      const currentConfig = Object.assign({}, defaultConfig, config);
+      const {
+        mobileTitle,
+        cssContent,
+        cssMenuItem
+      } = currentConfig;
       const [openModal, setOpenModal] = React.useState(false);
       const [openDrop, setOpenDrop] = React.useState(false);
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
@@ -15823,7 +15945,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 27,
+          lineNumber: 34,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -15831,7 +15953,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 28,
+          lineNumber: 35,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15844,7 +15966,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 29,
+          lineNumber: 36,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -15852,19 +15974,20 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 30,
+          lineNumber: 37,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 30,
+          lineNumber: 37,
           columnNumber: 70
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
         onInteractOutside: () => setOpenDrop(false),
-        css: {
+        css: Object.assign({
+          width: 'auto',
           color: '$textPrimary',
           padding: '12px 16px',
           '& > div': {
@@ -15876,23 +15999,31 @@
           '& > *:last-child': {
             display: 'none'
           }
-        },
+        }, cssContent),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 33,
+          lineNumber: 40,
           columnNumber: 11
         }
-      }, options.map(option => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
-        key: `${option.title}dd`,
+      }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+        key: `${option.title}dd-${index}`,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$f,
+          lineNumber: 59,
+          columnNumber: 15
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
         onClick: () => {
           setOpenDrop(false);
           option.onClick(props);
         },
+        css: cssMenuItem,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 51,
+          lineNumber: 60,
           columnNumber: 17
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -15903,7 +16034,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 60,
+          lineNumber: 69,
           columnNumber: 17
         }
       }))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -15912,10 +16043,11 @@
         modal: true,
         open: openModal,
         onOpenChange: setOpenModal,
+        width: "100%",
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 65,
+          lineNumber: 74,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -15923,7 +16055,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 66,
+          lineNumber: 75,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15936,38 +16068,38 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 67,
+          lineNumber: 76,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 68,
+          lineNumber: 77,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 68,
+          lineNumber: 77,
           columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 71,
+          lineNumber: 80,
           columnNumber: 11
         }
-      }, "Aksi"), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
+      }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
         css: {
           padding: '20px 16px'
         },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 72,
+          lineNumber: 81,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15982,11 +16114,18 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 73,
+          lineNumber: 82,
           columnNumber: 13
         }
-      }, options.map(option => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
-        key: `${option.title}mb`,
+      }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+        key: `${option.title}mb-${index}`,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$f,
+          lineNumber: 84,
+          columnNumber: 17
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
         type: "button",
         role: "button",
         onClick: () => {
@@ -15996,7 +16135,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 76,
+          lineNumber: 85,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -16005,7 +16144,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 85,
+          lineNumber: 93,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -16013,7 +16152,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 89,
+          lineNumber: 97,
           columnNumber: 19
         }
       })))))));
@@ -16135,6 +16274,7 @@
         zIndex: layer
       }),
       ref: ref,
+      onOpenAutoFocus: props.onOpenAutoFocus,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
@@ -16151,7 +16291,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 53,
+        lineNumber: 58,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16167,7 +16307,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 61,
+        lineNumber: 66,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16182,7 +16322,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 72,
+        lineNumber: 77,
         columnNumber: 15
       }
     }, !isMobile && /*#__PURE__*/React__default["default"].createElement(DialogClose, {
@@ -16190,7 +16330,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 83,
+        lineNumber: 88,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16207,7 +16347,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 84,
+        lineNumber: 89,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -16215,17 +16355,18 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 96,
+        lineNumber: 101,
         columnNumber: 23
       }
     }))), /*#__PURE__*/React__default["default"].createElement(DialogTitle, {
       css: {
-        margin: 0
+        margin: 0,
+        zIndex: isMobile ? 1 : 'unset'
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 100,
+        lineNumber: 105,
         columnNumber: 17
       }
     }, headerTitle && /*#__PURE__*/React__default["default"].createElement(Heading, _extends({
@@ -16235,7 +16376,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 101,
+        lineNumber: 106,
         columnNumber: 35
       }
     }))), isMobile && /*#__PURE__*/React__default["default"].createElement(DialogClose, {
@@ -16243,13 +16384,11 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 104,
+        lineNumber: 109,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
       css: {
-        width: 24,
-        height: 24,
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -16258,7 +16397,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 105,
+        lineNumber: 110,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -16266,7 +16405,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 115,
+        lineNumber: 118,
         columnNumber: 23
       }
     })))), !isMobile && /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16279,7 +16418,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 121,
+        lineNumber: 124,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -16287,7 +16426,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 122,
+        lineNumber: 125,
         columnNumber: 19
       }
     }))), pageDialogChildren && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, pageDialogChildren.props, {
@@ -16299,7 +16438,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 127,
+        lineNumber: 130,
         columnNumber: 15
       }
     })), footerChildren && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, footerChildren.props, {
@@ -16314,13 +16453,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 138,
+        lineNumber: 143,
         columnNumber: 15
       }
     }))))));
   };
   PageDialog.defaultProps = {
-    size: 'full'
+    size: 'full',
+    layer: '$modal'
   };
   const _excluded$2 = ["children"];
@@ -16459,6 +16599,7 @@
     }
   });
   const StyledOverlay = styled(ADialog__namespace.Overlay, {
+    zIndex: 1,
     backgroundColor: colors.bgDimmer,
     position: 'fixed',
     inset: 0,
@@ -16468,7 +16609,7 @@
   });
   const StyledContent$1 = styled(ADialog__namespace.Content, {
     backgroundColor: 'white',
-    borderRadius: 6,
+    borderRadius: 8,
     boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px',
     position: 'fixed',
     top: '50%',
@@ -16477,7 +16618,6 @@
     width: '90vw',
     maxWidth: '500px',
     maxHeight: '100vh',
-    padding: 25,
     '@media (prefers-reduced-motion: no-preference)': {
       animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
     },
@@ -16486,13 +16626,20 @@
     }
   });
   const StyledTitle = styled(ADialog__namespace.Title, {
-    margin: '0 0 10px 0',
+    '@sm': {
+      margin: '24px 16px'
+    },
+    margin: '16px 24px 10px 24px',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
     color: colors.gray900,
     fontSize: 17,
     fontWeight: 500
   });
   const StyledDescription = styled(ADialog__namespace.Description, {
-    marginBottom: 20,
+    mx: 24,
+    my: 20,
     color: colors.gray900,
     fontSize: 15,
     lineHeight: 1.5
@@ -16511,21 +16658,21 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 66,
+        lineNumber: 74,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 67,
+        lineNumber: 75,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$1, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 68,
+        lineNumber: 76,
         columnNumber: 7
       }
     }), children));
@@ -16539,14 +16686,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 77,
+          lineNumber: 85,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(TemplateAlertFunction, _extends({}, props, {
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 78,
+          lineNumber: 86,
           columnNumber: 9
         }
       }))), document.getElementById('a-dialog'));
@@ -16555,6 +16702,16 @@
   const TemplateAlertFunction = props => {
     const [open, setOpen] = React__default["default"].useState(true);
+    const isMobileCss = props.isMobile && {
+      minWidth: '100%',
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      animation: 'unset',
+      bottom: 0,
+      top: 'auto',
+      left: 0,
+      transform: 'translate(0,0)'
+    };
     const onCancelFunc = props.onCancel ? props.onCancel : () => {};
     const onConfirmFunc = props.onConfirm ? props.onConfirm : () => {};
@@ -16576,21 +16733,24 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 104,
+        lineNumber: 123,
         columnNumber: 5
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Content$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
+      css: Object.assign({
+        zIndex: props.css ? props.css.zIndex : 1
+      }, isMobileCss, props.css),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 105,
+        lineNumber: 124,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 106,
+        lineNumber: 125,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -16598,32 +16758,81 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 107,
+        lineNumber: 126,
         columnNumber: 11
       }
-    }, props.title)), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
+    }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
+      asChild: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 109,
+        lineNumber: 127,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      onClick: buttonCancel,
+      css: {
+        cursor: 'pointer'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 128,
+        columnNumber: 13
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
+      size: 22,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 129,
+        columnNumber: 15
+      }
+    })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+      orientation: "horizontal",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 133,
+        columnNumber: 9
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 134,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      css: {
+        textAlign: 'justify'
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 110,
+        lineNumber: 135,
         columnNumber: 11
       }
-    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Flex, {
+    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+      orientation: "horizontal",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 137,
+        columnNumber: 9
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Flex, {
       css: {
         gap: 10,
-        justifyContent: 'flex-end'
+        justifyContent: 'flex-end',
+        mt: 20,
+        mb: 18,
+        mx: 24
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 112,
+        lineNumber: 138,
         columnNumber: 9
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -16631,16 +16840,17 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 114,
+        lineNumber: 140,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      size: "sm",
       onClick: buttonConfirm,
       buttonType: props.dialogType,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 115,
+        lineNumber: 141,
         columnNumber: 15
       }
     }, props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -16648,10 +16858,11 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 121,
+        lineNumber: 147,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      size: "sm",
       onClick: buttonCancel,
       css: {
         color: props.dialogType === 'negative' && '$gray900 !important'
@@ -16660,7 +16871,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 122,
+        lineNumber: 148,
         columnNumber: 17
       }
     }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -16668,43 +16879,56 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 130,
+        lineNumber: 157,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      size: "sm",
       onClick: buttonConfirm,
       buttonType: props.dialogType,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 131,
+        lineNumber: 158,
         columnNumber: 17
       }
     }, props.labelConfirm ? props.labelConfirm : 'Confirm'))))));
   };
   function AlertDialog(props) {
-    return /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Root, _extends({
-      open: props.open
-    }, props, {
+    const isMobileCss = props.isMobile && {
+      minWidth: '100%',
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      animation: 'unset',
+      bottom: 0,
+      top: 'auto',
+      left: 0,
+      transform: 'translate(0,0)'
+    };
+    return /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Root, {
+      open: props.open,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 144,
+        lineNumber: 181,
         columnNumber: 5
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Content$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
+      css: Object.assign({
+        zIndex: props.css ? props.css.zIndex : 1
+      }, isMobileCss, props.css),
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 145,
+        lineNumber: 182,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 146,
+        lineNumber: 183,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -16712,32 +16936,81 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 147,
+        lineNumber: 184,
         columnNumber: 11
       }
-    }, props.title)), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
+    }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
+      asChild: true,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 149,
+        lineNumber: 185,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      onClick: props.onCancel,
+      css: {
+        cursor: 'pointer'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 186,
+        columnNumber: 13
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
+      size: 22,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 187,
+        columnNumber: 15
+      }
+    })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+      orientation: "horizontal",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 191,
+        columnNumber: 9
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 192,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      css: {
+        textAlign: 'justify'
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 150,
+        lineNumber: 193,
         columnNumber: 11
       }
-    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Flex, {
+    }, props.description)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+      orientation: "horizontal",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$b,
+        lineNumber: 195,
+        columnNumber: 9
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Flex, {
       css: {
         gap: 10,
-        justifyContent: 'flex-end'
+        justifyContent: 'flex-end',
+        mt: 20,
+        mb: 18,
+        mx: 24
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 152,
+        lineNumber: 196,
         columnNumber: 9
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -16745,16 +17018,17 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 154,
+        lineNumber: 198,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      size: "sm",
       onClick: props.onConfirm,
       buttonType: props.dialogType,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 155,
+        lineNumber: 199,
         columnNumber: 15
       }
     }, props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -16762,10 +17036,11 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 161,
+        lineNumber: 205,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      size: "sm",
       onClick: props.onCancel,
       css: {
         color: props.dialogType === 'negative' && '$gray900 !important'
@@ -16774,7 +17049,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 162,
+        lineNumber: 206,
         columnNumber: 17
       }
     }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -16782,16 +17057,17 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 170,
+        lineNumber: 215,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
+      size: "sm",
       onClick: props.onConfirm,
       buttonType: props.dialogType,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 171,
+        lineNumber: 216,
         columnNumber: 17
       }
     }, props.labelConfirm ? props.labelConfirm : 'Confirm'))))));
@@ -19017,20 +19293,22 @@
     max,
     replaceLabel,
     width,
-    height
+    height,
+    css
   }) => {
     const isFile = listType === 'file';
     const hiddenFileInput = React.useRef(null);
     const indexReplace = React.useRef(null);
+    const [dragActive, setDragActive] = React.useState(false);
     const [errorMessage, setErrorMessage] = React.useState(null);
-    const defaultSize = 200;
     const ContainerUpload = styled('div', {
       border: '2px dashed $gray300',
       borderRadius: 8,
-      height: height != null ? height : defaultSize,
-      width: width != null ? width : defaultSize,
+      height: height,
+      width: width,
       cursor: 'pointer',
       transition: '0.2s',
+      transitionDuration: '0.5s',
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -19052,25 +19330,44 @@
           true: {
             display: 'none !important'
           }
+        },
+        focus: {
+          true: {
+            height: height + 16,
+            width: width + 16
+          }
+        }
+      }
+    });
+    const FocusArea = styled('div', {
+      transition: '0.2s',
+      transitionDuration: '0.5s',
+      variants: {
+        focus: {
+          true: {
+            border: '2px solid $borderFocus',
+            padding: 8,
+            borderRadius: 8
+          }
         }
       }
     });
     const Container = styled('div', {
-      height: height != null ? height : defaultSize,
-      width: width != null ? width : defaultSize,
+      height: height,
+      width: width,
       background: '$white',
       borderRadius: 8
     });
     const Image = styled('img', {
       borderRadius: 8,
-      width: width != null ? width : defaultSize,
-      height: height ? height - 36 : defaultSize - 36,
+      width: width,
+      height: height - 36,
       objectFit: 'cover'
     });
     const Blank = styled('div', {
       borderRadius: 8,
-      width: width != null ? width : defaultSize,
-      height: height ? height - 36 : defaultSize - 36,
+      width: width,
+      height: height - 36,
       background: 'rgba(39, 42, 42, 0.6);'
     });
@@ -19139,6 +19436,40 @@
       }
     }
+    function handleDragEnter(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(true);
+    }
+    function handleDragLeave(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+    }
+    function handleDragOver(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    function handleDrop(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+      const {
+        files
+      } = e.dataTransfer;
+      if (files && files.length) {
+        handleChange({
+          target: {
+            files
+          }
+        });
+      }
+    }
     function renderButtonReplace(index) {
       return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         justify: "center",
@@ -19149,7 +19480,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 240,
+          lineNumber: 283,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -19158,7 +19489,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 241,
+          lineNumber: 284,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -19171,7 +19502,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 251,
+            lineNumber: 294,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -19181,7 +19512,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 252,
+            lineNumber: 295,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -19190,7 +19521,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 253,
+            lineNumber: 296,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -19203,7 +19534,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 254,
+            lineNumber: 297,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -19212,7 +19543,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 262,
+            lineNumber: 305,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -19220,7 +19551,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 264,
+            lineNumber: 307,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -19234,7 +19565,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 275,
+            lineNumber: 318,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -19244,7 +19575,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 276,
+            lineNumber: 319,
             columnNumber: 11
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -19253,7 +19584,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 277,
+            lineNumber: 320,
             columnNumber: 13
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -19266,7 +19597,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 278,
+            lineNumber: 321,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -19276,7 +19607,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 286,
+            lineNumber: 329,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(CheckIcon, {
@@ -19284,7 +19615,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 287,
+            lineNumber: 330,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -19298,14 +19629,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 288,
+            lineNumber: 331,
             columnNumber: 17
           }
         }, item.name))), /*#__PURE__*/React__default["default"].createElement(Blank, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 301,
+            lineNumber: 344,
             columnNumber: 13
           }
         })), renderButtonReplace(index));
@@ -19313,21 +19644,28 @@
     };
     function renderUpload() {
-      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      return /*#__PURE__*/React__default["default"].createElement(FocusArea, {
+        focus: dragActive,
+        css: css,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 311,
+          lineNumber: 354,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
         hidden: max ? fileList.length >= max ? true : false : false,
         showError: errorMessage !== null,
         onClick: handleClick,
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        focus: dragActive,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 312,
+          lineNumber: 355,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$1, {
@@ -19338,49 +19676,49 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 317,
+          lineNumber: 365,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 318,
+          lineNumber: 366,
           columnNumber: 11
         }
       }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 320,
+          lineNumber: 368,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 321,
+          lineNumber: 369,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 322,
+          lineNumber: 370,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 324,
+          lineNumber: 372,
           columnNumber: 17
         }
       }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 329,
+          lineNumber: 377,
           columnNumber: 26
         }
       }, errorMessage));
@@ -19396,7 +19734,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 335,
+        lineNumber: 383,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), renderUpload());
@@ -19404,7 +19742,9 @@
   Upload.defaultProps = {
     listType: 'file',
-    fileList: []
+    fileList: [],
+    height: 200,
+    width: 200
   };
   Upload.propType = {
     listType: PropTypes__default["default"].oneOf(['file', 'picture']),
@@ -19417,7 +19757,8 @@
     max: PropTypes__default["default"].number,
     replaceLabel: PropTypes__default["default"].string,
     width: PropTypes__default["default"].number,
-    height: PropTypes__default["default"].number
+    height: PropTypes__default["default"].number,
+    css: PropTypes__default["default"].object
   };
   Upload.displayName = 'Upload';
@@ -22463,7 +22804,6 @@
   });
   const StepperItem = styled(Flex$1, {
     userSelect: 'none',
-    cursor: 'pointer',
     height: '$spacing-06',
     fontWeight: 600
   });
@@ -22478,7 +22818,10 @@
   const WrapperDiv = styled('div', {
     '& .stepperInstance': {
       display: 'flex',
-      gap: 10
+      gap: 10,
+      '& .rsw_2Y': {
+        width: '100%'
+      }
     }
   });
   const centerAbsolute = {
@@ -22528,8 +22871,13 @@
     const {
       isMobile,
       data,
-      cssNav
+      cssNav,
+      isHide
     } = React__default["default"].useContext(StepWizardContext);
+    const mobileHidden = isMobile && isHide && {
+      height: 'unset',
+      margin: 'unset'
+    };
     const stepItems = [];
     const height = props.totalSteps * 24 + (props.totalSteps - 1) * 16;
@@ -22542,19 +22890,20 @@
         !isMobile ? stepItems.push( /*#__PURE__*/React__default["default"].createElement(StepperItem, {
           css: {
-            color: isActive ? '$textGreen' : isComplete ? '$gray900' : '$textDisable'
+            color: isActive ? '$textGreen' : isComplete ? '$gray900' : '$textDisable',
+            cursor: props.totalSteps !== props.currentStep ? 'pointer' : 'auto'
           },
           align: "center",
           key: `step-${i}`,
           onClick: () => {
-            if (isComplete) {
+            if (isComplete && !isHide) {
               props.goToStep(i);
             }
           },
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 89,
+            lineNumber: 96,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Span, {
@@ -22564,7 +22913,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 99,
+            lineNumber: 109,
             columnNumber: 15
           }
         }), isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -22576,7 +22925,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 100,
+            lineNumber: 110,
             columnNumber: 30
           }
         }), data[i - 1].title, ((_data = data[i - 1]) == null ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -22585,7 +22934,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 103,
+            lineNumber: 113,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -22597,7 +22946,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 104,
+            lineNumber: 114,
             columnNumber: 19
           }
         })))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22614,7 +22963,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 110,
+            lineNumber: 120,
             columnNumber: 13
           }
         }, isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -22623,7 +22972,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 122,
+            lineNumber: 132,
             columnNumber: 30
           }
         }), !isComplete && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22639,7 +22988,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 124,
+            lineNumber: 134,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -22649,7 +22998,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 136,
+            lineNumber: 146,
             columnNumber: 15
           }
         }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -22659,7 +23008,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 138,
+            lineNumber: 148,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(StyledCircleInfoOutline, {
@@ -22668,7 +23017,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 139,
+            lineNumber: 149,
             columnNumber: 19
           }
         }))));
@@ -22679,15 +23028,16 @@
       css: Object.assign({
         borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
         marginBottom: isMobile ? 65 : undefined,
-        height: !isMobile ? height : undefined
-      }, cssNav),
+        height: !isMobile ? height : undefined,
+        opacity: isHide ? 0 : undefined
+      }, cssNav, mobileHidden),
       gap: 5,
       justify: isMobile ? 'center' : undefined,
       direction: isMobile ? 'row' : 'column',
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 147,
+        lineNumber: 157,
         columnNumber: 5
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -22699,7 +23049,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 159,
+        lineNumber: 171,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22712,16 +23062,25 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 160,
+        lineNumber: 172,
         columnNumber: 11
       }
     }, stepItems)) : stepItems);
   };
   const Default = props => {
+    var _props$children, _props$children2;
     const [state, updateState] = React__default["default"].useState(Object.assign({
-      isComplete: []
+      isComplete: [],
+      hide: false
     }, props.state));
+    const toogleVisibility = value => {
+      updateState(Object.assign({}, state, {
+        hide: !state.hide
+      }));
+    };
     const getIsComplete = currentStep => {
       var _state$isComplete;
@@ -22756,21 +23115,37 @@
         completeArr.push(false);
       }
+      if (props.setSw) props.setSw(SW);
       updateState(Object.assign({}, state, {
         isComplete: completeArr,
         SW
       }));
     };
+    const WrapperBox = props => {
+      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
+        id: "content-container",
+        css: props.css,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$4,
+          lineNumber: 235,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].cloneElement(props.children, props));
+    };
     return /*#__PURE__*/React__default["default"].createElement(WrapperDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 217,
+        lineNumber: 241,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StepWizardContext.Provider, {
       value: {
+        toogleVisibility,
+        isHide: state == null ? void 0 : state.hide,
         setComplete,
         setState,
         state,
@@ -22785,7 +23160,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 218,
+        lineNumber: 242,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -22797,7 +23172,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 237,
+          lineNumber: 263,
           columnNumber: 16
         }
       }),
@@ -22805,10 +23180,27 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 232,
+        lineNumber: 258,
         columnNumber: 9
       }
-    }), props.children)));
+    }), ((_props$children = props.children) == null ? void 0 : _props$children.length) > 1 ? (_props$children2 = props.children) == null ? void 0 : _props$children2.map((child, idx) => /*#__PURE__*/React__default["default"].createElement(WrapperBox, {
+      key: idx,
+      css: props.cssContent,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 268,
+        columnNumber: 15
+      }
+    }, child)) : /*#__PURE__*/React__default["default"].createElement(WrapperBox, {
+      css: props.cssContent,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 273,
+        columnNumber: 13
+      }
+    }, props.children))));
   };
   var StepWizard = function StepWizard(props) {
@@ -22866,7 +23258,9 @@
   const DesktopContainer = styled(Flex$1, {
     display: 'none',
     '& .active-scroll-spy': {
-      borderLeft: '4px solid #04c99e !important',
+      borderLeft: '4px solid #04c99e !important'
+    },
+    '& .active-scroll-spy .link-title': {
       color: '#04c99e !important'
     },
     '@md': {
@@ -22880,8 +23274,11 @@
     padding: '8px 8px',
     width: '100%',
     transition: '0.4s max-height',
+    position: 'relative',
     '& .active-scroll-spy': {
-      borderLeft: '4px solid #04c99e !important',
+      borderLeft: '4px solid #04c99e !important'
+    },
+    '& .active-scroll-spy .link-title': {
       color: '#04c99e !important'
     },
     '@md': {
@@ -22897,12 +23294,6 @@
   const List = styled('li', {
     '&:not(:last-child)': {
       marginBottom: 20
-    },
-    '&:first-child': {
-      marginTop: -4
-    },
-    '&:last-child': {
-      marginBottom: -4
     }
   });
   const Title = styled('a', {
@@ -22972,7 +23363,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 98,
+        lineNumber: 99,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -22980,7 +23371,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 99,
+        lineNumber: 100,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(ListWrap, {
@@ -22990,7 +23381,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 100,
+        lineNumber: 101,
         columnNumber: 7
       }
     }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
@@ -22999,7 +23390,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 103,
+          lineNumber: 104,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23007,15 +23398,22 @@
         gap: 5,
         align: "center",
         css: {
+          marginLeft: '-4px !important',
+          borderLeftWidth: '4px !important',
+          borderLeftStyle: 'solid !important',
+          borderLeftColor: 'transparent !important',
+          paddingLeft: '16px !important',
           minHeight: 25
         },
+        "data-to-scrollspy-id": item == null ? void 0 : item.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 104,
+          lineNumber: 105,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(Title, {
+        className: "link-title",
         active: (item == null ? void 0 : item.id) === activeId,
         href: `#${item == null ? void 0 : item.id}`,
         onClick: e => {
@@ -23043,25 +23441,10 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$2,
-          lineNumber: 105,
+          lineNumber: 119,
           columnNumber: 17
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
-        css: {
-          marginLeft: '-4px !important',
-          borderLeftWidth: '4px !important',
-          borderLeftStyle: 'solid !important',
-          borderLeftColor: 'transparent !important',
-          paddingLeft: '16px !important'
-        },
-        "data-to-scrollspy-id": item == null ? void 0 : item.id,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 126,
-          columnNumber: 19
-        }
-      }, item == null ? void 0 : item.title)), item == null ? void 0 : item.icon));
+      }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
     })));
   }
@@ -23087,7 +23470,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 157,
+        lineNumber: 161,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -23098,26 +23481,48 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 158,
+        lineNumber: 162,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      css: {
+        position: 'absolute',
+        top: 8,
+        right: 8
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 163,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+    }, mobileCollapse ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
       style: {
         cursor: 'pointer'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 159,
-        columnNumber: 7
+        lineNumber: 165,
+        columnNumber: 11
       }
-    })) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
+    }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      style: {
+        cursor: 'pointer'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 167,
+        columnNumber: 11
+      }
+    }))) : /*#__PURE__*/React__default["default"].createElement(DesktopContainer, {
       direction: "row",
       css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 162,
+        lineNumber: 172,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content, {
@@ -23127,7 +23532,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 163,
+        lineNumber: 173,
         columnNumber: 7
       }
     }));
@@ -23206,8 +23611,9 @@
   var TableHead$1 = styled('thead', {
     position: 'sticky',
     top: 0,
-    backgroundColor: '$bgWhite',
-    boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)'
+    backgroundColor: '$gray50',
+    boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
+    zIndex: 10
   });
   var TableHeadRow$1 = styled('tr', {
     borderBottom: '1pt solid $bgBorder'
@@ -23326,13 +23732,19 @@
                   }, void 0)]
                 }), void 0));
               })), /*#__PURE__*/React.createElement(TableRowCollapse, __assign({}, row.getRowProps(), {
-                key: "row_mobile_collapse_".concat(index)
+                key: "row_mobile_collapse_".concat(index),
+                css: {
+                  backgroundColor: '$gray50'
+                }
               }), jsxRuntime.jsx(TableCellCollapse, {
                 children: jsxRuntime.jsx(Collapalse, __assign({
                   isOpen: row.isExpanded
                 }, {
                   children: jsxRuntime.jsx(Flex$1, __assign({
-                    direction: "column"
+                    direction: "column",
+                    css: {
+                      borderTop: '1pt solid $bgBorder'
+                    }
                   }, {
                     children: row.cells.map(function (cell, index) {
                       var _a, _b, _c;
@@ -23341,7 +23753,7 @@
                         direction: "column",
                         css: {
                           borderBottom: '1pt solid $bgBorder',
-                          padding: '10px 0px'
+                          padding: '12px 16px'
                         }
                       }, {
                         children: jsxRuntime.jsxs(Grid, __assign({
@@ -23358,7 +23770,7 @@
                           }, {
                             children: jsxRuntime.jsxs(Heading, __assign({
                               heading: "headerTable",
-                              color: "primary"
+                              color: "secondary"
                             }, {
                               children: [(_b = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header) === null || _b === void 0 ? void 0 : _b.toUpperCase(), ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.isRequired) ? jsxRuntime.jsx(Required$1, {
                                 children: "*"
@@ -23367,7 +23779,11 @@
                           }), void 0), jsxRuntime.jsx(GridItem, __assign({
                             colSpan: 4
                           }, {
-                            children: cell.render('Cell')
+                            children: jsxRuntime.jsx(Flex$1, __assign({
+                              justify: "end"
+                            }, {
+                              children: cell.render('Cell')
+                            }), void 0)
                           }), void 0)]
                         }), void 0)
                       }), index);
@@ -23398,7 +23814,8 @@
     position: 'sticky',
     top: 0,
     backgroundColor: '$gray50',
-    boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)'
+    boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
+    zIndex: 10
   });
   var TableHeadRow = styled('tr', {
     borderBottom: '1pt solid $bgBorder'
@@ -23618,7 +24035,8 @@
         data = props.data;
     var instance = reactTable.useTable({
       columns: columns,
-      data: data
+      data: data,
+      autoResetExpanded: false
     }, reactTable.useExpanded);
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,