@majoo-ui/react 1.42.0 → 1.42.3

package/index.esm.js

@@ -1134,7 +1134,8 @@ const {
     lineHeights: Object.assign({}, foundations.lineHeights),
     letterSpacings: Object.assign({}, foundations.letterSpacings),
     radii: Object.assign({}, foundations.radii),
-    sizes: Object.assign({}, foundations.sizes)
+    sizes: Object.assign({}, foundations.sizes),
+    zIndices: Object.assign({}, foundations.zIndices)
   },
   media: {
     sm: '(min-width: 359px)',
@@ -2620,10 +2621,25 @@ const Text$1 = styled('p', {
         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'];
@@ -2732,7 +2748,13 @@ const Paragraph = styled(Text$1, {
         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',
@@ -7284,7 +7306,7 @@ fixRegExpWellKnownSymbolLogic$2('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-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,
@@ -7352,6 +7374,17 @@ const BoxSelect = styled('div', {
           border: '1px solid $gray300'
         }
       }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $formError',
+        '&:focus-within': {
+          border: '1px solid $formError'
+        },
+        '&:hover': {
+          border: '1px solid $formError'
+        }
+      }
     }
   }
 });
@@ -7502,7 +7535,8 @@ function Select$1(_ref) {
     disabledOptions,
     css,
     onSearch,
-    readOnly
+    readOnly,
+    isInvalid
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
@@ -7556,7 +7590,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 266,
+      lineNumber: 274,
       columnNumber: 5
     }
   }), ({
@@ -7575,7 +7609,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 285,
+      lineNumber: 293,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -7584,10 +7618,11 @@ function Select$1(_ref) {
     size: size,
     disabled: disabled,
     readOnly: readOnly,
+    isInvalid: isInvalid,
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 286,
+      lineNumber: 294,
       columnNumber: 11
     }
   }), search ? /*#__PURE__*/React.createElement("div", {
@@ -7597,7 +7632,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 293,
+      lineNumber: 302,
       columnNumber: 15
     }
   }, icon ? /*#__PURE__*/React.createElement("div", {
@@ -7608,7 +7643,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 295,
+      lineNumber: 304,
       columnNumber: 19
     }
   }, /*#__PURE__*/React.createElement(InputLeftElement, {
@@ -7616,14 +7651,14 @@ function Select$1(_ref) {
       __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.createElement(Input$5, _extends({
@@ -7637,7 +7672,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 297,
+      lineNumber: 306,
       columnNumber: 21
     }
   }))) : /*#__PURE__*/React.createElement(Input$5, _extends({
@@ -7651,7 +7686,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 305,
+      lineNumber: 314,
       columnNumber: 19
     }
   }))) : /*#__PURE__*/React.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -7663,7 +7698,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 314,
+      lineNumber: 323,
       columnNumber: 15
     }
   }), selectedItem ? /*#__PURE__*/React.createElement(Text$1, {
@@ -7672,7 +7707,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 321,
+      lineNumber: 330,
       columnNumber: 19
     }
   }, selectedItem.name) : /*#__PURE__*/React.createElement(Text$1, {
@@ -7681,7 +7716,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 325,
+      lineNumber: 334,
       columnNumber: 19
     }
   }, placeholder)), !icon ? /*#__PURE__*/React.createElement(IconContainer, _extends({}, getToggleButtonProps({
@@ -7692,7 +7727,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 332,
+      lineNumber: 341,
       columnNumber: 15
     }
   }), /*#__PURE__*/React.createElement(CaretDownOutline, {
@@ -7700,7 +7735,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 337,
+      lineNumber: 346,
       columnNumber: 17
     }
   })) : null), /*#__PURE__*/React.createElement(OptionWrapper$2, {
@@ -7711,14 +7746,14 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 341,
+      lineNumber: 350,
       columnNumber: 11
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 343,
+      lineNumber: 352,
       columnNumber: 15
     }
   }), item.map((item, index) => {
@@ -7741,7 +7776,7 @@ function Select$1(_ref) {
       __self: this,
       __source: {
         fileName: _jsxFileName$F,
-        lineNumber: 345,
+        lineNumber: 354,
         columnNumber: 19
       }
     }), item.name);
@@ -7749,14 +7784,14 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 367,
+      lineNumber: 376,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(StyledDiv$2, {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 368,
+      lineNumber: 377,
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -7766,7 +7801,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 369,
+      lineNumber: 378,
       columnNumber: 19
     }
   }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -7778,7 +7813,7 @@ function Select$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$F,
-      lineNumber: 370,
+      lineNumber: 379,
       columnNumber: 21
     }
   })), "Item tidak ditemukan")))));
@@ -7798,7 +7833,8 @@ Select$1.propTypes = {
   valueSelector: PropTypes.string,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
   onSearch: PropTypes.func,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  isInvalid: PropTypes.bool
 };
 Select$1.defaultProps = {
   placeholder: 'Select Item',
@@ -7811,7 +7847,8 @@ Select$1.defaultProps = {
   disabledOptions: [],
   textSelector: 'name',
   valueSelector: 'value',
-  readOnly: false
+  readOnly: false,
+  isInvalid: false
 };
 
 var toPropertyKey = toPropertyKey$3;
@@ -8230,6 +8267,17 @@ const Select = styled('div', {
           border: '1px solid $gray300'
         }
       }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $formError',
+        '&:focus-within': {
+          border: '1px solid $formError'
+        },
+        '&:hover': {
+          border: '1px solid $formError'
+        }
+      }
     }
   }
 });
@@ -8376,6 +8424,7 @@ function InputSelectTag({
   disabledOptions,
   textEmptyItem,
   onRemoveItem,
+  isInvalid,
   props
 }) {
   const [initItem, setInitItem] = React.useState(option || []); //init filter selectedItems on useMultipleSelection
@@ -8546,16 +8595,17 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 373,
+      lineNumber: 380,
       columnNumber: 5
     }
   }, /*#__PURE__*/React.createElement(Select, {
     size: size,
     disabled: disabled || readOnly,
+    isInvalid: isInvalid,
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 374,
+      lineNumber: 381,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -8566,7 +8616,7 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 375,
+      lineNumber: 382,
       columnNumber: 9
     }
   }), search ? /*#__PURE__*/React.createElement(Input$4, _extends({}, getInputProps({
@@ -8577,7 +8627,7 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 380,
+      lineNumber: 387,
       columnNumber: 13
     }
   })) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps({
@@ -8588,7 +8638,7 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 386,
+      lineNumber: 393,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -8599,7 +8649,7 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 395,
+      lineNumber: 402,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(IconCaretDown, {
@@ -8607,22 +8657,21 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 400,
+      lineNumber: 407,
       columnNumber: 11
     }
-  }))), selectedItems.length !== 0 ? /*#__PURE__*/React.createElement(TagWrapper$1, {
+  }))), selectedItems.length !== 0 && /*#__PURE__*/React.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 404,
+      lineNumber: 411,
       columnNumber: 9
     }
-  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag // ref={ref}
-  , _extends({
+  }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
     isRemovable: readOnly || disabled ? false : true,
     disabled: disabled,
-    size: size === 'sm' ? 'lg' : 'sm',
+    size: "lg",
     readOnly: readOnly,
     key: `selected-item-${index}`
   }, getSelectedItemProps({
@@ -8640,10 +8689,10 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 406,
+      lineNumber: 413,
       columnNumber: 13
     }
-  }), selectedItem.name))) : null, /*#__PURE__*/React.createElement(OptionWrapper$1, {
+  }), selectedItem.name))), /*#__PURE__*/React.createElement(OptionWrapper$1, {
     placement: placement,
     css: {
       display: isOpen && disabled === false ? 'block' : 'none',
@@ -8652,14 +8701,14 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 428,
+      lineNumber: 434,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 433,
+      lineNumber: 439,
       columnNumber: 11
     }
   }), isOpen && item.map((item, index) => /*#__PURE__*/React.createElement(ItemWrapper$1, _extends({
@@ -8677,7 +8726,7 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 436,
+      lineNumber: 442,
       columnNumber: 17
     }
   }), /*#__PURE__*/React.createElement(IconWrapper, {
@@ -8690,7 +8739,7 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 449,
+      lineNumber: 455,
       columnNumber: 19
     }
   }, item.isDisabled ? /*#__PURE__*/React.createElement(CheckOutline, {
@@ -8698,25 +8747,25 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 458,
+      lineNumber: 464,
       columnNumber: 23
     }
-  }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) ? /*#__PURE__*/React.createElement(CheckOutline, {
+  }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React.createElement(CheckOutline, {
     color: colors.iconGreen,
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 461,
-      columnNumber: 23
+      lineNumber: 468,
+      columnNumber: 25
     }
-  }) : null), /*#__PURE__*/React.createElement(Item$2, {
+  })), /*#__PURE__*/React.createElement(Item$2, {
     css: {
       backgroundColor: 'unset'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 464,
+      lineNumber: 472,
       columnNumber: 19
     }
   }, item.name)))) : /*#__PURE__*/React.createElement(Option, _extends({
@@ -8727,14 +8776,14 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 469,
+      lineNumber: 477,
       columnNumber: 11
     }
   }), /*#__PURE__*/React.createElement(StyledDiv$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 470,
+      lineNumber: 478,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -8744,7 +8793,7 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 471,
+      lineNumber: 479,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -8756,7 +8805,7 @@ function InputSelectTag({
     __self: this,
     __source: {
       fileName: _jsxFileName$D,
-      lineNumber: 472,
+      lineNumber: 480,
       columnNumber: 17
     }
   })), textEmptyItem))));
@@ -8767,6 +8816,7 @@ InputSelectTag.propTypes = {
   size: PropTypes.string,
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
+  isInvalid: PropTypes.bool,
   value: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
   onChange: PropTypes.func,
   onRemoveItem: PropTypes.func,
@@ -8780,6 +8830,7 @@ InputSelectTag.defaultProps = {
   size: 'lg',
   disabled: false,
   readOnly: false,
+  isInvalid: false,
   search: true,
   placement: 'bottom',
   value: [],
@@ -9059,14 +9110,14 @@ function InputResourceList({
   searchPlaceholder = 'Cari ...',
   counterFooterText = 'kategori dipilih',
   isLoading = false,
-  disableUnchecked = false,
+  enabledItems = [],
   value,
   fetchData,
   onQueryChange,
   css
 }) {
   const [checkedResources, setCheckedResources] = useState([]);
-  const [tempCheckedRes, setTempCheckedRes] = useState(value);
+  useState(value);
   const [query, setQuery] = useState();
   const scrollerRef = useRef(null);
   useEffect(() => {
@@ -9080,7 +9131,7 @@ function InputResourceList({
   const renderCheckbox = (resource, index) => {
     var _a;
 
-    const isDisabled = disableUnchecked && !tempCheckedRes.includes(resource);
+    const isDisabled = enabledItems.length > 0 && !enabledItems.find(id => id === resource.value);
     return jsx(InputCheckbox, {
       label: jsxs(Flex$1, Object.assign({
         gap: 3
@@ -9219,6 +9270,9 @@ function InputResourceList({
 
 const _excluded$g = ["children"];
 var _jsxFileName$B = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
+const {
+  zIndices
+} = foundations;
 const PopoverContext = /*#__PURE__*/createContext();
 const Popover = ({
   children,
@@ -9256,7 +9310,7 @@ const Popover = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 42,
+      lineNumber: 44,
       columnNumber: 10
     }
   }, children);
@@ -9298,7 +9352,7 @@ const PopoverContent = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 60,
+      lineNumber: 62,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, getFloatingProps({
@@ -9307,13 +9361,13 @@ const PopoverContent = ({
       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.createElement(React__default.Fragment, null);
@@ -9335,7 +9389,7 @@ const PopoverClose = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$B,
-      lineNumber: 84,
+      lineNumber: 86,
       columnNumber: 5
     }
   }), children);
@@ -10527,6 +10581,7 @@ const ModalDialog = _ref => {
       animation: 'unset'
     }),
     ref: ref,
+    onOpenAutoFocus: props.onOpenAutoFocus,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
@@ -10543,7 +10598,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 69,
+      lineNumber: 74,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -10557,7 +10612,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 70,
+      lineNumber: 75,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -10571,7 +10626,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 79,
+      lineNumber: 84,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(DialogTitle, {
@@ -10581,7 +10636,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 80,
+      lineNumber: 93,
       columnNumber: 17
     }
   }, modalDialogTitle && /*#__PURE__*/React__default.createElement(Heading, _extends({
@@ -10591,7 +10646,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 81,
+      lineNumber: 94,
       columnNumber: 40
     }
   }))), /*#__PURE__*/React__default.createElement(DialogClose, {
@@ -10599,7 +10654,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 83,
+      lineNumber: 96,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -10614,7 +10669,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 84,
+      lineNumber: 97,
       columnNumber: 19
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -10622,7 +10677,7 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 94,
+      lineNumber: 107,
       columnNumber: 21
     }
   }))))), modalDialogContent && /*#__PURE__*/React__default.createElement(Box$1, _extends({}, modalDialogContent.props, {
@@ -10634,8 +10689,8 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 99,
-      columnNumber: 36
+      lineNumber: 113,
+      columnNumber: 15
     }
   })), modalDialogFooter && /*#__PURE__*/React__default.createElement(Box$1, _extends({}, modalDialogFooter.props, {
     css: Object.assign({
@@ -10647,8 +10702,8 @@ const ModalDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 100,
-      columnNumber: 35
+      lineNumber: 124,
+      columnNumber: 15
     }
   }))))));
 };
@@ -10685,7 +10740,7 @@ const StyledOverlay$2 = styled(DialogPrimitive.Overlay, {
   bottom: 0,
   left: 0,
   backgroundColor: '$bgDimmer',
-  zIndex: 10000,
+  zIndex: '$overlay',
   '&[data-state="open"]': {
     animation: `${fadeIn} 150ms cubic-bezier(0.22, 1, 0.36, 1)`
   },
@@ -10746,7 +10801,7 @@ const StyledContent$4 = styled(DialogPrimitive.Content, {
   top: 0,
   bottom: 0,
   width: '100%',
-  zIndex: 10000,
+  zIndex: '$modal',
   display: 'flex',
   flexDirection: 'column',
   maxHeight: '100vh',
@@ -12213,8 +12268,8 @@ const MonthButton = styled(Text$1, {
   }
 });
 const AdvanceViewToggleButton = styled(Flex$1, {
-  alignSelf: 'flex-end',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  padding: '0px 12px'
 });
 const DATE_PICKER = 0;
 const MONTH_PICKER = 1;
@@ -12554,6 +12609,7 @@ const MobileCalendarBox = ({
     }, advanceView && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AdvanceViewToggleButton, {
       gap: 3,
       align: "center",
+      justify: "between",
       onClick: () => setExpandAdvanceView(!expandAdvanceView),
       __self: undefined,
       __source: {
@@ -12566,21 +12622,21 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 505,
+        lineNumber: 510,
         columnNumber: 15
       }
     }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 506,
+        lineNumber: 511,
         columnNumber: 36
       }
     }) : /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 506,
+        lineNumber: 511,
         columnNumber: 61
       }
     })), expandAdvanceView && advanceView, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -12590,16 +12646,19 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 509,
+        lineNumber: 514,
         columnNumber: 13
       }
     })), /*#__PURE__*/React__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.createElement(Flex$1, {
@@ -12607,12 +12666,12 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 521,
+        lineNumber: 526,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
       buttonType: "ghost",
-      size: "lg",
+      size: "sm",
       css: {
         width: '160px',
         fontWeight: 600,
@@ -12624,11 +12683,11 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 522,
+        lineNumber: 527,
         columnNumber: 11
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
-      size: "lg",
+      size: "sm",
       css: {
         width: '160px',
         fontWeight: 600,
@@ -12640,7 +12699,7 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 536,
+        lineNumber: 541,
         columnNumber: 11
       }
     }, "Proses")));
@@ -12651,7 +12710,7 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 556,
+        lineNumber: 561,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(CalendarsContainer, {
@@ -12659,7 +12718,7 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 557,
+        lineNumber: 562,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(CalendarItemContainer, {
@@ -12668,7 +12727,7 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 558,
+        lineNumber: 563,
         columnNumber: 11
       }
     }, calendars.map((calendar, index) => /*#__PURE__*/React__default.createElement(DateContainer, {
@@ -12676,7 +12735,7 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 560,
+        lineNumber: 565,
         columnNumber: 15
       }
     }, renderHeader(index), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -12686,7 +12745,7 @@ const MobileCalendarBox = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 562,
+        lineNumber: 567,
         columnNumber: 17
       }
     }), pickerState.type === DATE_PICKER && /*#__PURE__*/React__default.createElement(React__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());
@@ -13652,29 +13711,23 @@ const PaginationButton = ({
       lineNumber: 100,
       columnNumber: 7
     }
-  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isLg && /*#__PURE__*/React__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.createElement(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.createElement(PrevNextButton, {
     variant: "caption",
@@ -13684,7 +13737,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 114,
+      lineNumber: 108,
       columnNumber: 13
     }
   }, "Sebelumnya")), generatePages().map((page, index) => {
@@ -13695,7 +13748,7 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 126,
+        lineNumber: 120,
         columnNumber: 13
       }
     }, page);
@@ -13707,32 +13760,26 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 137,
+      lineNumber: 131,
       columnNumber: 13
     }
-  }, "Selanjutnya"), /*#__PURE__*/React__default.createElement(IconButton, {
+  }, "Selanjutnya"), !isLg && /*#__PURE__*/React__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.createElement(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.createElement(Separator$2, {
     orientation: "vertical",
@@ -13743,7 +13790,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 160,
+      lineNumber: 152,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -13755,7 +13802,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 162,
+      lineNumber: 154,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -13763,7 +13810,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 163,
+      lineNumber: 155,
       columnNumber: 9
     }
   }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputText, {
@@ -13787,7 +13834,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 164,
+      lineNumber: 156,
       columnNumber: 9
     }
   })));
@@ -14041,9 +14088,12 @@ const TableCell$3 = styled('td', {
 });
 const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   instance,
+  totalData,
+  emptyDataMessage,
   isInfiniteScroll,
   footer,
   infiniteScrollWrapper,
+  isLoading,
   css
 }, ref) => {
   const {
@@ -14098,6 +14148,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
         columnNumber: 21
       }
     }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
+      isMobile: true,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$j,
@@ -14271,7 +14322,28 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
       lineNumber: 190,
       columnNumber: 17
     }
-  }, footer))))));
+  }, totalData > 0 || isLoading ? footer : /*#__PURE__*/React__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.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";
@@ -14369,6 +14441,11 @@ const TableHeaderCellContainer = styled(Flex$1, {
           }
         }
       }
+    },
+    isMobile: {
+      true: {
+        padding: '0'
+      }
     }
   }
 });
@@ -14482,15 +14559,33 @@ function Table({
   onSelectedChange,
   isInfiniteScroll,
   hasMoreItems,
-  rowLimit
+  rowLimit,
+  selectedIds
 }) {
   const [limit, setLimit] = 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 = useTable({
     columns,
     data,
-    initialState: fetchData ? {
-      pageIndex: controlledPageIndex
-    } : undefined,
+    initialState: getInitialState(),
     manualPagination: !!fetchData,
     manualSortBy: !!fetchData,
     defaultCanSort: true,
@@ -14511,6 +14606,7 @@ function Table({
     page,
     gotoPage,
     setPageSize,
+    toggleRowSelected,
     state: {
       pageIndex,
       pageSize,
@@ -14551,13 +14647,13 @@ function Table({
     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
     }
   });
@@ -14574,14 +14670,14 @@ function Table({
       __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);
@@ -14620,6 +14716,15 @@ function Table({
       });
     }
   }, [data]);
+  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.createElement(Box$1, {
     css: {
       position: 'relative',
@@ -14629,14 +14734,14 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 370,
+      lineNumber: 401,
       columnNumber: 5
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "center",
     align: "center",
     css: {
-      zIndex: 10,
+      zIndex: '$docked',
       position: 'absolute',
       inset: 0,
       top: isMobile ? 40 : 64,
@@ -14648,7 +14753,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 372,
+      lineNumber: 403,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -14656,7 +14761,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 386,
+      lineNumber: 417,
       columnNumber: 11
     }
   }, "Loading .... ")), !isMobile ? /*#__PURE__*/React__default.createElement(TableContainer$2, {
@@ -14665,21 +14770,21 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 390,
+      lineNumber: 421,
       columnNumber: 9
     }
   }, renderInfiniteScrollWrapper( /*#__PURE__*/React__default.createElement(TableContent$2, _extends({}, getTableProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 392,
+      lineNumber: 423,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(TableHead$2, {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 393,
+      lineNumber: 424,
       columnNumber: 15
     }
   }, headerGroups.map(headerGroup => {
@@ -14688,7 +14793,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 397,
+        lineNumber: 428,
         columnNumber: 21
       }
     }), visibleHeaders.map((column, index) => {
@@ -14705,7 +14810,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 401,
+          lineNumber: 432,
           columnNumber: 27
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer // css={{
@@ -14722,7 +14827,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 417,
+          lineNumber: 448,
           columnNumber: 31
         }
       }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
@@ -14730,7 +14835,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$i,
-          lineNumber: 430,
+          lineNumber: 461,
           columnNumber: 35
         }
       }, headerRender.toUpperCase()))) : headerRender);
@@ -14739,7 +14844,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 446,
+      lineNumber: 477,
       columnNumber: 15
     }
   }), page.map((row, i) => {
@@ -14754,14 +14859,14 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 456,
+        lineNumber: 487,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__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.createElement(TableCell$2, _extends({
@@ -14774,7 +14879,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 461,
+        lineNumber: 492,
         columnNumber: 29
       }
     }), cell.render('Cell')))), row.isExpanded ? subRowCells.map(cell => /*#__PURE__*/React__default.createElement(TableRow$2, {
@@ -14783,7 +14888,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 475,
+        lineNumber: 506,
         columnNumber: 29
       }
     }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default.createElement("td", {
@@ -14791,7 +14896,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 477,
+        lineNumber: 508,
         columnNumber: 33
       }
     })), /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -14799,7 +14904,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 479,
+        lineNumber: 510,
         columnNumber: 31
       }
     }, /*#__PURE__*/React__default.createElement(TableCell$2, {
@@ -14813,7 +14918,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 480,
+        lineNumber: 511,
         columnNumber: 33
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -14821,7 +14926,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 489,
+        lineNumber: 520,
         columnNumber: 35
       }
     }, cell.column.Header)), /*#__PURE__*/React__default.createElement(TableCell$2, {
@@ -14834,7 +14939,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 491,
+        lineNumber: 522,
         columnNumber: 33
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -14842,7 +14947,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 499,
+        lineNumber: 530,
         columnNumber: 35
       }
     }, cell.render('Cell')))))) : null);
@@ -14850,14 +14955,14 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 510,
+      lineNumber: 541,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(TableFootRow, {
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 511,
+      lineNumber: 542,
       columnNumber: 19
     }
   }, /*#__PURE__*/React__default.createElement(TableFootCell, {
@@ -14865,7 +14970,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 512,
+      lineNumber: 543,
       columnNumber: 21
     }
   }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -14877,7 +14982,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 516,
+      lineNumber: 547,
       columnNumber: 25
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -14886,20 +14991,23 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 523,
+      lineNumber: 554,
       columnNumber: 27
     }
   }, emptyDataMessage || 'Tidak ada data')))))))) : /*#__PURE__*/React__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
     }
   }));
@@ -14919,7 +15027,8 @@ Table.propTypes = {
   emptyDataMessage: PropTypes.string,
   isInfiniteScroll: PropTypes.bool,
   hasMoreItems: PropTypes.bool,
-  rowLimit: PropTypes.number
+  rowLimit: PropTypes.number,
+  selectedIds: PropTypes.object
 };
 Table.defaultProps = {
   keyId: 'id',
@@ -15747,10 +15856,21 @@ const rowExpanderColumn = {
 
 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] = useState(false);
     const [openDrop, setOpenDrop] = useState(false);
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenu, {
@@ -15760,7 +15880,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 27,
+        lineNumber: 34,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
@@ -15768,7 +15888,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 28,
+        lineNumber: 35,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15781,7 +15901,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 29,
+        lineNumber: 36,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -15789,19 +15909,20 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 30,
+        lineNumber: 37,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 30,
+        lineNumber: 37,
         columnNumber: 70
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
       onInteractOutside: () => setOpenDrop(false),
-      css: {
+      css: Object.assign({
+        width: 'auto',
         color: '$textPrimary',
         padding: '12px 16px',
         '& > div': {
@@ -15813,23 +15934,31 @@ const rowMenuColumn = (options, icon) => ({
         '& > *:last-child': {
           display: 'none'
         }
-      },
+      }, cssContent),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 33,
+        lineNumber: 40,
         columnNumber: 11
       }
-    }, options.map(option => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
-      key: `${option.title}dd`,
+    }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: `${option.title}dd-${index}`,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$f,
+        lineNumber: 59,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/React__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.createElement(DropdownMenuSeparator, {
@@ -15840,7 +15969,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 60,
+        lineNumber: 69,
         columnNumber: 17
       }
     }))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
@@ -15849,10 +15978,11 @@ const rowMenuColumn = (options, icon) => ({
       modal: true,
       open: openModal,
       onOpenChange: setOpenModal,
+      width: "100%",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 65,
+        lineNumber: 74,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -15860,7 +15990,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 66,
+        lineNumber: 75,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15873,38 +16003,38 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 67,
+        lineNumber: 76,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 68,
+        lineNumber: 77,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 68,
+        lineNumber: 77,
         columnNumber: 36
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 71,
+        lineNumber: 80,
         columnNumber: 11
       }
-    }, "Aksi"), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
+    }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
       css: {
         padding: '20px 16px'
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 72,
+        lineNumber: 81,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -15919,11 +16049,18 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 73,
+        lineNumber: 82,
         columnNumber: 13
       }
-    }, options.map(option => /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
-      key: `${option.title}mb`,
+    }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: `${option.title}mb-${index}`,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$f,
+        lineNumber: 84,
+        columnNumber: 17
+      }
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
       type: "button",
       role: "button",
       onClick: () => {
@@ -15933,7 +16070,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 76,
+        lineNumber: 85,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -15942,7 +16079,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 85,
+        lineNumber: 93,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -15950,7 +16087,7 @@ const rowMenuColumn = (options, icon) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$f,
-        lineNumber: 89,
+        lineNumber: 97,
         columnNumber: 19
       }
     })))))));
@@ -16072,6 +16209,7 @@ const PageDialog = _ref => {
       zIndex: layer
     }),
     ref: ref,
+    onOpenAutoFocus: props.onOpenAutoFocus,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
@@ -16088,7 +16226,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 53,
+      lineNumber: 58,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -16104,7 +16242,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 61,
+      lineNumber: 66,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -16119,7 +16257,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 72,
+      lineNumber: 77,
       columnNumber: 15
     }
   }, !isMobile && /*#__PURE__*/React__default.createElement(DialogClose, {
@@ -16127,7 +16265,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 83,
+      lineNumber: 88,
       columnNumber: 19
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -16144,7 +16282,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 84,
+      lineNumber: 89,
       columnNumber: 21
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -16152,17 +16290,18 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 96,
+      lineNumber: 101,
       columnNumber: 23
     }
   }))), /*#__PURE__*/React__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.createElement(Heading, _extends({
@@ -16172,7 +16311,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 101,
+      lineNumber: 106,
       columnNumber: 35
     }
   }))), isMobile && /*#__PURE__*/React__default.createElement(DialogClose, {
@@ -16180,13 +16319,11 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 104,
+      lineNumber: 109,
       columnNumber: 19
     }
   }, /*#__PURE__*/React__default.createElement(Box$1, {
     css: {
-      width: 24,
-      height: 24,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
@@ -16195,7 +16332,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 105,
+      lineNumber: 110,
       columnNumber: 21
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -16203,7 +16340,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 115,
+      lineNumber: 118,
       columnNumber: 23
     }
   })))), !isMobile && /*#__PURE__*/React__default.createElement(Box$1, {
@@ -16216,7 +16353,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 121,
+      lineNumber: 124,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Image, {
@@ -16224,7 +16361,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 122,
+      lineNumber: 125,
       columnNumber: 19
     }
   }))), pageDialogChildren && /*#__PURE__*/React__default.createElement(Box$1, _extends({}, pageDialogChildren.props, {
@@ -16236,7 +16373,7 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 127,
+      lineNumber: 130,
       columnNumber: 15
     }
   })), footerChildren && /*#__PURE__*/React__default.createElement(Box$1, _extends({}, footerChildren.props, {
@@ -16251,13 +16388,14 @@ const PageDialog = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 138,
+      lineNumber: 143,
       columnNumber: 15
     }
   }))))));
 };
 PageDialog.defaultProps = {
-  size: 'full'
+  size: 'full',
+  layer: '$modal'
 };
 
 const _excluded$2 = ["children"];
@@ -16396,6 +16534,7 @@ const contentShow = keyframes({
   }
 });
 const StyledOverlay = styled(ADialog.Overlay, {
+  zIndex: 1,
   backgroundColor: colors.bgDimmer,
   position: 'fixed',
   inset: 0,
@@ -16405,7 +16544,7 @@ const StyledOverlay = styled(ADialog.Overlay, {
 });
 const StyledContent$1 = styled(ADialog.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%',
@@ -16414,7 +16553,6 @@ const StyledContent$1 = styled(ADialog.Content, {
   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`
   },
@@ -16423,13 +16561,20 @@ const StyledContent$1 = styled(ADialog.Content, {
   }
 });
 const StyledTitle = styled(ADialog.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.Description, {
-  marginBottom: 20,
+  mx: 24,
+  my: 20,
   color: colors.gray900,
   fontSize: 15,
   lineHeight: 1.5
@@ -16448,21 +16593,21 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 66,
+      lineNumber: 74,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 67,
+      lineNumber: 75,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 68,
+      lineNumber: 76,
       columnNumber: 7
     }
   }), children));
@@ -16476,14 +16621,14 @@ function AlertDialogFunction(properties) {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 77,
+        lineNumber: 85,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TemplateAlertFunction, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 78,
+        lineNumber: 86,
         columnNumber: 9
       }
     }))), document.getElementById('a-dialog'));
@@ -16492,6 +16637,16 @@ function AlertDialogFunction(properties) {
 
 const TemplateAlertFunction = props => {
   const [open, setOpen] = React__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 : () => {};
 
@@ -16513,21 +16668,24 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 104,
+      lineNumber: 123,
       columnNumber: 5
     }
-  }), /*#__PURE__*/React__default.createElement(Content$1, {
+  }), /*#__PURE__*/React__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.createElement(StyledTitle, {
+  }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 106,
+      lineNumber: 125,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -16535,32 +16693,81 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 107,
+      lineNumber: 126,
       columnNumber: 11
     }
-  }, props.title)), /*#__PURE__*/React__default.createElement(StyledDescription, {
+  }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
+    asChild: true,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 109,
+      lineNumber: 127,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    onClick: buttonCancel,
+    css: {
+      cursor: 'pointer'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 128,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/React__default.createElement(CloseOutline, {
+    size: 22,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 129,
+      columnNumber: 15
+    }
+  })))), /*#__PURE__*/React__default.createElement(Separator$2, {
+    orientation: "horizontal",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 133,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React__default.createElement(StyledDescription, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 134,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
+    css: {
+      textAlign: 'justify'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 110,
+      lineNumber: 135,
       columnNumber: 11
     }
-  }, props.description)), /*#__PURE__*/React__default.createElement(Flex, {
+  }, props.description)), /*#__PURE__*/React__default.createElement(Separator$2, {
+    orientation: "horizontal",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 137,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React__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.createElement(ADialog.Action, {
@@ -16568,16 +16775,17 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 114,
+      lineNumber: 140,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -16585,10 +16793,11 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 121,
+      lineNumber: 147,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, {
+    size: "sm",
     onClick: buttonCancel,
     css: {
       color: props.dialogType === 'negative' && '$gray900 !important'
@@ -16597,7 +16806,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 122,
+      lineNumber: 148,
       columnNumber: 17
     }
   }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -16605,43 +16814,56 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 130,
+      lineNumber: 157,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__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.createElement(ADialog.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.createElement(ADialog.Root, {
+    open: props.open,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 144,
+      lineNumber: 181,
       columnNumber: 5
     }
-  }), /*#__PURE__*/React__default.createElement(Content$1, {
+  }, /*#__PURE__*/React__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.createElement(StyledTitle, {
+  }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 146,
+      lineNumber: 183,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -16649,32 +16871,81 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 147,
+      lineNumber: 184,
       columnNumber: 11
     }
-  }, props.title)), /*#__PURE__*/React__default.createElement(StyledDescription, {
+  }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
+    asChild: true,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 149,
+      lineNumber: 185,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    onClick: props.onCancel,
+    css: {
+      cursor: 'pointer'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 186,
+      columnNumber: 13
+    }
+  }, /*#__PURE__*/React__default.createElement(CloseOutline, {
+    size: 22,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 187,
+      columnNumber: 15
+    }
+  })))), /*#__PURE__*/React__default.createElement(Separator$2, {
+    orientation: "horizontal",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 191,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React__default.createElement(StyledDescription, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 192,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
+    css: {
+      textAlign: 'justify'
+    },
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 150,
+      lineNumber: 193,
       columnNumber: 11
     }
-  }, props.description)), /*#__PURE__*/React__default.createElement(Flex, {
+  }, props.description)), /*#__PURE__*/React__default.createElement(Separator$2, {
+    orientation: "horizontal",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$b,
+      lineNumber: 195,
+      columnNumber: 9
+    }
+  }), /*#__PURE__*/React__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.createElement(ADialog.Action, {
@@ -16682,16 +16953,17 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 154,
+      lineNumber: 198,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -16699,10 +16971,11 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 161,
+      lineNumber: 205,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, {
+    size: "sm",
     onClick: props.onCancel,
     css: {
       color: props.dialogType === 'negative' && '$gray900 !important'
@@ -16711,7 +16984,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 162,
+      lineNumber: 206,
       columnNumber: 17
     }
   }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -16719,16 +16992,17 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 170,
+      lineNumber: 215,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__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'))))));
@@ -18954,20 +19228,22 @@ const Upload = ({
   max,
   replaceLabel,
   width,
-  height
+  height,
+  css
 }) => {
   const isFile = listType === 'file';
   const hiddenFileInput = useRef(null);
   const indexReplace = useRef(null);
+  const [dragActive, setDragActive] = useState(false);
   const [errorMessage, setErrorMessage] = 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',
@@ -18989,25 +19265,44 @@ const Upload = ({
         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);'
   });
 
@@ -19076,6 +19371,40 @@ const Upload = ({
     }
   }
 
+  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.createElement(Flex$1, {
       justify: "center",
@@ -19086,7 +19415,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 240,
+        lineNumber: 283,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -19095,7 +19424,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 241,
+        lineNumber: 284,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -19108,7 +19437,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 251,
+          lineNumber: 294,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -19118,7 +19447,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 252,
+          lineNumber: 295,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -19127,7 +19456,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 253,
+          lineNumber: 296,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -19140,7 +19469,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 254,
+          lineNumber: 297,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -19149,7 +19478,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 262,
+          lineNumber: 305,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -19157,7 +19486,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 264,
+          lineNumber: 307,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -19171,7 +19500,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 275,
+          lineNumber: 318,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box$1, {
@@ -19181,7 +19510,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 276,
+          lineNumber: 319,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -19190,7 +19519,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 277,
+          lineNumber: 320,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -19203,7 +19532,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 278,
+          lineNumber: 321,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -19213,7 +19542,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 286,
+          lineNumber: 329,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(CheckIcon, {
@@ -19221,7 +19550,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 287,
+          lineNumber: 330,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(Text, {
@@ -19235,14 +19564,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 288,
+          lineNumber: 331,
           columnNumber: 17
         }
       }, item.name))), /*#__PURE__*/React__default.createElement(Blank, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 301,
+          lineNumber: 344,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -19250,21 +19579,28 @@ const Upload = ({
   };
 
   function renderUpload() {
-    return /*#__PURE__*/React__default.createElement(Box$1, {
+    return /*#__PURE__*/React__default.createElement(FocusArea, {
+      focus: dragActive,
+      css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 311,
+        lineNumber: 354,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__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.createElement(Input$1, {
@@ -19275,49 +19611,49 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 317,
+        lineNumber: 365,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 318,
+        lineNumber: 366,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 320,
+        lineNumber: 368,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 321,
+        lineNumber: 369,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 322,
+        lineNumber: 370,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__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.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 329,
+        lineNumber: 377,
         columnNumber: 26
       }
     }, errorMessage));
@@ -19333,7 +19669,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 335,
+      lineNumber: 383,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), renderUpload());
@@ -19341,7 +19677,9 @@ const Upload = ({
 
 Upload.defaultProps = {
   listType: 'file',
-  fileList: []
+  fileList: [],
+  height: 200,
+  width: 200
 };
 Upload.propType = {
   listType: PropTypes.oneOf(['file', 'picture']),
@@ -19354,7 +19692,8 @@ Upload.propType = {
   max: PropTypes.number,
   replaceLabel: PropTypes.string,
   width: PropTypes.number,
-  height: PropTypes.number
+  height: PropTypes.number,
+  css: PropTypes.object
 };
 Upload.displayName = 'Upload';
 
@@ -22386,7 +22725,6 @@ const StepperList = styled(Flex$1, {
 });
 const StepperItem = styled(Flex$1, {
   userSelect: 'none',
-  cursor: 'pointer',
   height: '$spacing-06',
   fontWeight: 600
 });
@@ -22401,7 +22739,10 @@ const StyledCircleInfoOutline = styled(CircleInfoOutline, {});
 const WrapperDiv = styled('div', {
   '& .stepperInstance': {
     display: 'flex',
-    gap: 10
+    gap: 10,
+    '& .rsw_2Y': {
+      width: '100%'
+    }
   }
 });
 const centerAbsolute = {
@@ -22451,8 +22792,13 @@ const Navigation = props => {
   const {
     isMobile,
     data,
-    cssNav
+    cssNav,
+    isHide
   } = React__default.useContext(StepWizardContext);
+  const mobileHidden = isMobile && isHide && {
+    height: 'unset',
+    margin: 'unset'
+  };
   const stepItems = [];
   const height = props.totalSteps * 24 + (props.totalSteps - 1) * 16;
 
@@ -22465,19 +22811,20 @@ const Navigation = props => {
 
       !isMobile ? stepItems.push( /*#__PURE__*/React__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.createElement(Span, {
@@ -22487,7 +22834,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 99,
+          lineNumber: 109,
           columnNumber: 15
         }
       }), isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -22499,7 +22846,7 @@ const Navigation = props => {
         __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.createElement(Tooltip, {
@@ -22508,7 +22855,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 103,
+          lineNumber: 113,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -22520,7 +22867,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 104,
+          lineNumber: 114,
           columnNumber: 19
         }
       })))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22537,7 +22884,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 110,
+          lineNumber: 120,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -22546,7 +22893,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 122,
+          lineNumber: 132,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22562,7 +22909,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 124,
+          lineNumber: 134,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -22572,7 +22919,7 @@ const Navigation = props => {
         __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.createElement(Tooltip, {
@@ -22582,7 +22929,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 138,
+          lineNumber: 148,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -22591,7 +22938,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 139,
+          lineNumber: 149,
           columnNumber: 19
         }
       }))));
@@ -22602,15 +22949,16 @@ const Navigation = props => {
     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.createElement(StyledDiv, {
@@ -22622,7 +22970,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 159,
+      lineNumber: 171,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22635,16 +22983,25 @@ const Navigation = props => {
     __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.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;
 
@@ -22679,21 +23036,37 @@ const Default = props => {
       completeArr.push(false);
     }
 
+    if (props.setSw) props.setSw(SW);
     updateState(Object.assign({}, state, {
       isComplete: completeArr,
       SW
     }));
   };
 
+  const WrapperBox = props => {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
+      id: "content-container",
+      css: props.css,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 235,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default.cloneElement(props.children, props));
+  };
+
   return /*#__PURE__*/React__default.createElement(WrapperDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 217,
+      lineNumber: 241,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
     value: {
+      toogleVisibility,
+      isHide: state == null ? void 0 : state.hide,
       setComplete,
       setState,
       state,
@@ -22708,7 +23081,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 218,
+      lineNumber: 242,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -22720,7 +23093,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 237,
+        lineNumber: 263,
         columnNumber: 16
       }
     }),
@@ -22728,10 +23101,27 @@ const Default = props => {
     __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.createElement(WrapperBox, {
+    key: idx,
+    css: props.cssContent,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 268,
+      columnNumber: 15
+    }
+  }, child)) : /*#__PURE__*/React__default.createElement(WrapperBox, {
+    css: props.cssContent,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 273,
+      columnNumber: 13
+    }
+  }, props.children))));
 };
 
 const StepWizard = props => {
@@ -22789,7 +23179,9 @@ var _jsxFileName$2 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packa
 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': {
@@ -22803,8 +23195,11 @@ const MobileContainer = styled(Flex$1, {
   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': {
@@ -22820,12 +23215,6 @@ const ListWrap = styled('ul', {
 const List = styled('li', {
   '&:not(:last-child)': {
     marginBottom: 20
-  },
-  '&:first-child': {
-    marginTop: -4
-  },
-  '&:last-child': {
-    marginBottom: -4
   }
 });
 const Title = styled('a', {
@@ -22895,7 +23284,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 98,
+      lineNumber: 99,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -22903,7 +23292,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 99,
+      lineNumber: 100,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(ListWrap, {
@@ -22913,7 +23302,7 @@ function Content({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 100,
+      lineNumber: 101,
       columnNumber: 7
     }
   }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
@@ -22922,7 +23311,7 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 103,
+        lineNumber: 104,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22930,15 +23319,22 @@ function Content({
       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.createElement(Title, {
+      className: "link-title",
       active: (item == null ? void 0 : item.id) === activeId,
       href: `#${item == null ? void 0 : item.id}`,
       onClick: e => {
@@ -22966,25 +23362,10 @@ function Content({
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 105,
+        lineNumber: 119,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__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));
   })));
 }
 
@@ -23010,7 +23391,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 157,
+      lineNumber: 161,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -23021,26 +23402,48 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 158,
+      lineNumber: 162,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
+    css: {
+      position: 'absolute',
+      top: 8,
+      right: 8
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 163,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+  }, mobileCollapse ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
     style: {
       cursor: 'pointer'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 159,
-      columnNumber: 7
+      lineNumber: 165,
+      columnNumber: 11
     }
-  })) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
+  }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    style: {
+      cursor: 'pointer'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 167,
+      columnNumber: 11
+    }
+  }))) : /*#__PURE__*/React__default.createElement(DesktopContainer, {
     direction: "row",
     css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 162,
+      lineNumber: 172,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content, {
@@ -23050,7 +23453,7 @@ function TableOfContent({
     __self: this,
     __source: {
       fileName: _jsxFileName$2,
-      lineNumber: 163,
+      lineNumber: 173,
       columnNumber: 7
     }
   }));
@@ -23129,8 +23532,9 @@ const TableContent$1 = styled('table', {
 const 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
 });
 const TableHeadRow$1 = styled('tr', {
   borderBottom: '1pt solid $bgBorder'
@@ -23249,13 +23653,19 @@ function EditableTableMobile(props) {
                 }, void 0)]
               }), void 0));
             })), /*#__PURE__*/createElement$1(TableRowCollapse, Object.assign({}, row.getRowProps(), {
-              key: `row_mobile_collapse_${index}`
+              key: `row_mobile_collapse_${index}`,
+              css: {
+                backgroundColor: '$gray50'
+              }
             }), jsx(TableCellCollapse, {
               children: jsx(Collapalse, Object.assign({
                 isOpen: row.isExpanded
               }, {
                 children: jsx(Flex$1, Object.assign({
-                  direction: "column"
+                  direction: "column",
+                  css: {
+                    borderTop: '1pt solid $bgBorder'
+                  }
                 }, {
                   children: row.cells.map((cell, index) => {
                     var _a, _b, _c;
@@ -23264,7 +23674,7 @@ function EditableTableMobile(props) {
                       direction: "column",
                       css: {
                         borderBottom: '1pt solid $bgBorder',
-                        padding: '10px 0px'
+                        padding: '12px 16px'
                       }
                     }, {
                       children: jsxs(Grid, Object.assign({
@@ -23281,7 +23691,7 @@ function EditableTableMobile(props) {
                         }, {
                           children: jsxs(Heading, Object.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) ? jsx(Required$1, {
                               children: "*"
@@ -23290,7 +23700,11 @@ function EditableTableMobile(props) {
                         }), void 0), jsx(GridItem, Object.assign({
                           colSpan: 4
                         }, {
-                          children: cell.render('Cell')
+                          children: jsx(Flex$1, Object.assign({
+                            justify: "end"
+                          }, {
+                            children: cell.render('Cell')
+                          }), void 0)
                         }), void 0)]
                       }), void 0)
                     }), index);
@@ -23321,7 +23735,8 @@ const TableHead = styled('thead', {
   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
 });
 const TableHeadRow = styled('tr', {
   borderBottom: '1pt solid $bgBorder'
@@ -23541,7 +23956,8 @@ function EditableTable(props) {
   } = props;
   const instance = useTable({
     columns,
-    data
+    data,
+    autoResetExpanded: false
   }, useExpanded);
   const {
     getTableProps,