@majoo-ui/react 1.54.4 → 1.54.6

package/index.umd.js

@@ -4128,7 +4128,7 @@
       }
     }
   });
-  var Button$3 = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
+  var Button$4 = /*#__PURE__*/React__namespace.forwardRef(function (_a, forwardedRef) {
     var children = _a.children,
         type = _a.type,
         _b = _a.buttonType,
@@ -6655,7 +6655,7 @@
       }
     }
   });
-  const Container$9 = styled(Flex$1, {
+  const Container$a = styled(Flex$1, {
     variants: {
       outlined: {
         true: {
@@ -6782,7 +6782,7 @@
       outlined
     }) => {
       const checked = value != null ? value : defaultValue;
-      return /*#__PURE__*/React__default["default"].createElement(Container$9, {
+      return /*#__PURE__*/React__default["default"].createElement(Container$a, {
         direction: "column",
         outlined: outlined,
         disabledOutlined: outlined && (readOnly || disabled),
@@ -8591,7 +8591,7 @@
       }
     }
   });
-  var Button$2 = styled('button', {
+  var Button$3 = styled('button', {
     display: 'flex',
     width: '100%',
     height: '100%',
@@ -9028,7 +9028,7 @@
                     disabled: disabled || readOnly
                   }).onClick : undefined
                 }, void 0)
-              }), void 0) : jsxRuntime.jsx(Button$2, __assign({}, getToggleButtonProps({
+              }), void 0) : jsxRuntime.jsx(Button$3, __assign({}, getToggleButtonProps({
                 disabled: disabled || readOnly
               }), {
                 disabled: disabled,
@@ -9477,7 +9477,7 @@
     }
   }));
 
-  const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter"];
+  const _excluded$d = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible"];
   var _jsxFileName$v = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -9589,7 +9589,7 @@
       }
     }
   });
-  const Button$1 = styled('button', {
+  const Button$2 = styled('button', {
     background: 'none',
     outline: 'none',
     border: 'none',
@@ -9709,7 +9709,7 @@
     alignItems: 'center'
   });
   const InputSelectCheck = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-    var _selectedItems$filter;
+    var _selectedItems$filter, _selectedItems$filter2;
 
     let {
       placeholder,
@@ -9733,7 +9733,8 @@
       helperText,
       css,
       showCounter,
-      labelCounter
+      labelCounter,
+      collapsible
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
@@ -9742,6 +9743,7 @@
     const [items, setItems] = React__default["default"].useState([]);
     const [selectedValue, setSelectedValue] = React__default["default"].useState([]);
     const [inputValue, setInputValue] = React__default["default"].useState('');
+    const [showAllTags, setShowAllTags] = React__default["default"].useState(false);
     const sortItems = React__default["default"].useCallback(() => {
       if (sortBy === 'id') {
         option.sort(function (a, b) {
@@ -9983,13 +9985,16 @@
     React.useEffect(() => {
       setSelectedValue(items.length > 0 && value.length === items.length - 1 ? ['!all', ...value] : value);
     }, [value]);
+
+    const toggleCollapsible = () => setShowAllTags(!showAllTags);
+
     return /*#__PURE__*/React__default["default"].createElement(Wrapper$1, _extends({
       css: css
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 517,
+        lineNumber: 521,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Select, {
@@ -9999,7 +10004,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 518,
+        lineNumber: 522,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -10014,7 +10019,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 519,
+        lineNumber: 523,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Input$6, _extends({}, getInputProps({
@@ -10030,10 +10035,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 529,
+        lineNumber: 533,
         columnNumber: 13
       }
-    })), /*#__PURE__*/React__default["default"].createElement(Button$1, _extends({}, getToggleButtonProps({
+    })), /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({}, getToggleButtonProps({
       disabled: disabled || readOnly
     }), {
       disabled: disabled || readOnly,
@@ -10043,7 +10048,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 535,
+        lineNumber: 539,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__default["default"].createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -10054,7 +10059,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 545,
+        lineNumber: 549,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconCaretDown, {
@@ -10062,7 +10067,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 550,
+        lineNumber: 554,
         columnNumber: 13
       }
     }))), helperText && /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -10075,18 +10080,24 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 554,
+        lineNumber: 558,
         columnNumber: 11
       }
-    }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 559,
-        columnNumber: 11
+        lineNumber: 564,
+        columnNumber: 13
+      }
+    }, selectedItems == null ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
+      if (showAllTags || !collapsible) {
+        return true;
+      } else {
+        return idx < 5;
       }
-    }, selectedItems == null ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item == null ? void 0 : item.id) !== '!all')) == null ? void 0 : _selectedItems$filter.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
+    })) == null ? void 0 : _selectedItems$filter2.map((selectedItem, index) => /*#__PURE__*/React__default["default"].createElement(Tag, _extends({
       disabled: disabled,
       isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
       size: size,
@@ -10107,15 +10118,81 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 563,
+        lineNumber: 575,
+        columnNumber: 19
+      }
+    }), selectedItem.name))), collapsible && (selectedItems == null ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      align: "center",
+      justify: "center",
+      onClick: toggleCollapsible,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 596,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 597,
+        columnNumber: 17
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      align: "center",
+      justify: "center",
+      css: {
+        cursor: 'pointer',
+        userSelect: 'none',
+        padding: '0px 8px'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 598,
+        columnNumber: 17
+      }
+    }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
+      color: colors$4.iconSecondary,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 604,
+        columnNumber: 21
+      }
+    }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      color: colors$4.iconSecondary,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 606,
+        columnNumber: 21
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      css: {
+        fontWeight: 600,
+        whiteSpace: 'nowrap'
+      },
+      color: "secondary",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 608,
+        columnNumber: 19
+      }
+    }, showAllTags ? 'Tampilkan Sebagian' : 'Tampilkan Semua')), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$v,
+        lineNumber: 612,
         columnNumber: 17
       }
-    }), selectedItem.name))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
+    }))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
       disabled: disabled,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 585,
+        lineNumber: 618,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Tag, {
@@ -10142,7 +10219,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 586,
+        lineNumber: 619,
         columnNumber: 13
       }
     }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
@@ -10154,7 +10231,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 606,
+        lineNumber: 639,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -10163,7 +10240,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 611,
+        lineNumber: 644,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -10181,7 +10258,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 614,
+        lineNumber: 647,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -10194,7 +10271,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 627,
+        lineNumber: 660,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -10202,7 +10279,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 636,
+        lineNumber: 669,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -10210,21 +10287,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 640,
+        lineNumber: 673,
         columnNumber: 27
       }
     }), showSelectAll && (item == null ? void 0 : item.id) === '!all' && selectedValue != null && selectedValue.length && (selectedValue == null ? void 0 : selectedValue.length) < (items == null ? void 0 : items.length) ? /*#__PURE__*/React__default["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 647,
+        lineNumber: 680,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 649,
+        lineNumber: 682,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -10234,7 +10311,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 652,
+        lineNumber: 685,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -10247,14 +10324,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 657,
+        lineNumber: 690,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 658,
+        lineNumber: 691,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10264,7 +10341,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 659,
+        lineNumber: 692,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -10276,7 +10353,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$v,
-        lineNumber: 660,
+        lineNumber: 693,
         columnNumber: 19
       }
     })), textEmptyItem))));
@@ -10303,7 +10380,8 @@
     css: PropTypes__default["default"].object,
     helperText: PropTypes__default["default"].string,
     showCounter: PropTypes__default["default"].bool,
-    labelCounter: PropTypes__default["default"].string
+    labelCounter: PropTypes__default["default"].string,
+    collapsible: PropTypes__default["default"].bool
   };
   InputSelectCheck.defaultProps = {
     placeholder: 'Select Item',
@@ -10321,7 +10399,8 @@
     showSelectAll: false,
     selectAllLabel: 'Pilih Semua',
     showCounter: false,
-    labelCounter: 'Item terpilih'
+    labelCounter: 'Item terpilih',
+    collapsible: true
   };
 
   var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
@@ -10356,7 +10435,8 @@
     textEmptyItem: PropTypes__default["default"].string,
     helperText: PropTypes__default["default"].string,
     showCounter: PropTypes__default["default"].bool,
-    labelCounter: PropTypes__default["default"].string
+    labelCounter: PropTypes__default["default"].string,
+    collapsible: PropTypes__default["default"].bool
   };
   InputSelectTag.defaultProps = {
     placeholder: 'Select Item',
@@ -10372,7 +10452,8 @@
     textEmptyItem: 'Item tidak ditemukan',
     sortBy: 'name',
     showCounter: false,
-    labelCounter: 'Item terpilih'
+    labelCounter: 'Item terpilih',
+    collapsible: true
   };
 
   var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
@@ -11239,7 +11320,7 @@
       }
     }
   });
-  var Button = styled(Button$3, {
+  var Button$1 = styled(Button$4, {
     border: "1px solid $gray150 !important",
     paddingRight: '16px !important',
     paddingLeft: '16px !important',
@@ -11360,7 +11441,7 @@
       align: "center",
       css: css
     }, {
-      children: [jsxRuntime.jsx(Button, __assign({
+      children: [jsxRuntime.jsx(Button$1, __assign({
         type: "button",
         disabled: disabled || disabledDecrement,
         buttonType: "secondary",
@@ -11383,7 +11464,7 @@
         prefix: prefix,
         suffix: suffix,
         size: size
-      }, void 0), jsxRuntime.jsx(Button, __assign({
+      }, void 0), jsxRuntime.jsx(Button$1, __assign({
         type: "button",
         disabled: disabled || disabledIncrement,
         buttonType: "secondary",
@@ -12150,7 +12231,7 @@
     outline: 'none',
     boxShadow: '$medium'
   });
-  const ScrollButton = styled(Button$3, {
+  const ScrollButton = styled(Button$4, {
     width: '28px',
     '&:hover': {
       boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.07), 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 10px rgba(0, 0, 0, 0.05)'
@@ -15376,7 +15457,7 @@
           }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
             gap: 3
           }, {
-            children: [jsxRuntime.jsx(Button$3, __assign({
+            children: [jsxRuntime.jsx(Button$4, __assign({
               buttonType: "ghost",
               css: {
                 fontWeight: 600
@@ -15386,7 +15467,7 @@
               size: "sm"
             }, {
               children: "Batal"
-            }), void 0), jsxRuntime.jsx(Button$3, __assign({
+            }), void 0), jsxRuntime.jsx(Button$4, __assign({
               css: {
                 fontWeight: 600
               },
@@ -15992,7 +16073,7 @@
         }), void 0), jsxRuntime.jsxs(Flex$1, __assign({
           gap: 3
         }, {
-          children: [jsxRuntime.jsx(Button$3, __assign({
+          children: [jsxRuntime.jsx(Button$4, __assign({
             buttonType: "ghost",
             size: "sm",
             css: {
@@ -16005,7 +16086,7 @@
             disabled: disabled
           }, {
             children: "Batal"
-          }), void 0), jsxRuntime.jsx(Button$3, __assign({
+          }), void 0), jsxRuntime.jsx(Button$4, __assign({
             size: "sm",
             css: {
               width: '160px',
@@ -16073,7 +16154,7 @@
       }
     }
   });
-  const Container$8 = styled(Flex$1, {
+  const Container$9 = styled(Flex$1, {
     borderRadius: 8,
     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12);',
     width: 200,
@@ -16134,7 +16215,7 @@
     }
   });
 
-  const IconStateFull$1 = props => {
+  const IconStateFull$2 = props => {
     const [isHover, setIsHover] = React.useState(false);
 
     function toggleHover() {
@@ -16236,7 +16317,7 @@
         lineNumber: 165,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
       type: "up",
       disabled: disabled,
       onClick: () => handleUp('hour'),
@@ -16246,7 +16327,7 @@
         lineNumber: 166,
         columnNumber: 9
       }
-    }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
       type: "up",
       disabled: disabled,
       onClick: () => handleUp('minutes'),
@@ -16284,7 +16365,7 @@
         lineNumber: 171,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
+    }, /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
       type: "down",
       disabled: disabled,
       onClick: () => handleDown('hour'),
@@ -16294,7 +16375,7 @@
         lineNumber: 172,
         columnNumber: 9
       }
-    }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(IconStateFull$2, {
       type: "down",
       disabled: disabled,
       onClick: () => handleDown('minutes'),
@@ -16347,7 +16428,7 @@
     minDate,
     maxDate
   }) => {
-    return /*#__PURE__*/React__default["default"].createElement(Container$8, {
+    return /*#__PURE__*/React__default["default"].createElement(Container$9, {
       size: size,
       disabled: disabled,
       direction: "column",
@@ -16659,9 +16740,13 @@
   };
   InputTimePicker.displayName = 'InputTimePicker';
 
+  var DEFAULT = 'default';
   var SINGLE_PICKER = 'single';
   var RANGE_PICKER = 'range';
   var ADVANCE_PICKER = 'advance';
+  var RANGE_CONTROL = 'range_control';
+  var WEEKLY = 'weekly';
+  var MONTHLY = 'monthly';
 
   var CalendarPicker = function CalendarPicker(_a) {
     var isMultiDatePicker = _a.isMultiDatePicker,
@@ -16845,6 +16930,10 @@
   var YESTERDAY = 'YESTERDAY';
   var LAST_7_DAYS = 'LAST_7_DAYS';
   var LAST_WEEK = 'LAST_WEEK';
+  var PREV_WEEK = 'PREV_WEEK';
+  var NEXT_WEEK = 'NEXT_WEEK';
+  var PREV_MONTH = 'PREV_MONTH';
+  var NEXT_MONTH = 'NEXT_MONTH';
   var THIS_WEEK = 'THIS_WEEK';
   var LAST_MONTH = 'LAST_MONTH';
   var LAST_TWO_MONTHS = 'LAST_TWO_MONTH';
@@ -16966,7 +17055,7 @@
         }
     }
   }
-  function advancePickerDate(type) {
+  function advancePickerDate(type, date) {
     var tempDate = new Date();
     var today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
 
@@ -17008,6 +17097,38 @@
           return [startThisWeek, endThisWeek];
         }
 
+      case NEXT_WEEK:
+        {
+          var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
+          var startThisWeek = currentDate.startOf('week').toDate();
+          var endThisWeek = currentDate.endOf('week').toDate();
+          return [startThisWeek, endThisWeek];
+        }
+
+      case PREV_WEEK:
+        {
+          var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
+          var startThisWeek = currentDate.startOf('week').toDate();
+          var endThisWeek = currentDate.endOf('week').toDate();
+          return [startThisWeek, endThisWeek];
+        }
+
+      case NEXT_MONTH:
+        {
+          var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
+          var startThisMonth = currentDate.startOf('month').toDate();
+          var endThisMonth = currentDate.endOf('month').toDate();
+          return [startThisMonth, endThisMonth];
+        }
+
+      case PREV_MONTH:
+        {
+          var currentDate = moment__default["default"](date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
+          var startThisMonth = currentDate.startOf('month').toDate();
+          var endThisMonth = currentDate.endOf('month').toDate();
+          return [startThisMonth, endThisMonth];
+        }
+
       case LAST_MONTH:
         {
           var startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
@@ -17036,6 +17157,157 @@
     }
   }
 
+  var Container$8 = styled(Flex$1, {
+    flexDirection: 'row',
+    alignItems: 'center',
+    userSelect: 'none',
+    border: '1px solid $gray300',
+    borderRadius: 6,
+    '&:hover': {
+      border: '1px solid $primary400'
+    },
+    variants: {
+      readOnly: {
+        true: {
+          backgroundColor: '$formDisable'
+        }
+      },
+      disabled: {
+        true: {
+          backgroundColor: '$formDisable',
+          color: '$textDisable',
+          cursor: 'not-allowed',
+          '&::placeholder': {
+            color: '$textDisable'
+          },
+          '&:hover': {
+            border: '1px solid $colors$gray300'
+          },
+          '& > input': {
+            color: '$textSecondary',
+            cursor: 'not-allowed'
+          }
+        }
+      },
+      isInvalid: {
+        true: {
+          border: '1px solid $colors$red400',
+          '&:focus': {
+            border: '1px solid $colors$red400'
+          },
+          '&:hover': {
+            border: '1px solid $colors$red400'
+          }
+        }
+      }
+    }
+  });
+  var Button = styled(Flex$1, {
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer',
+    userSelect: 'none',
+    margin: 4,
+    padding: '0px 4px'
+  });
+
+  var IconStateFull$1 = function IconStateFull(props) {
+    var _a = React.useState(false),
+        isHover = _a[0],
+        setIsHover = _a[1];
+
+    function handleHover() {
+      setIsHover(true);
+    }
+
+    function handleUnHover() {
+      setIsHover(false);
+    }
+
+    return props.type === 'next' ? jsxRuntime.jsx(icons.ChevronRightOutline, __assign({}, props, {
+      color: isHover && !props.disabled ? '#36D4B1' : '#404545',
+      onMouseEnter: handleHover,
+      onMouseLeave: handleUnHover
+    }), void 0) : jsxRuntime.jsx(icons.ChevronLeftOutline, __assign({}, props, {
+      color: isHover && !props.disabled ? '#36D4B1' : '#404545',
+      onMouseEnter: handleHover,
+      onMouseLeave: handleUnHover
+    }), void 0);
+  };
+
+  function ContainerDateRangePicker(props) {
+    var css = props.css,
+        children = props.children,
+        disabled = props.disabled,
+        readOnly = props.readOnly,
+        onRangeChange = props.onRangeChange,
+        isInvalid = props.isInvalid;
+    return jsxRuntime.jsxs(Container$8, __assign({
+      css: css,
+      disabled: disabled,
+      readOnly: readOnly,
+      isInvalid: isInvalid
+    }, {
+      children: [jsxRuntime.jsx(Button, __assign({
+        css: {
+          borderRight: '1px solid $bgBorder'
+        },
+        onClick: function () {
+          return onRangeChange('prev');
+        }
+      }, {
+        children: jsxRuntime.jsx(IconStateFull$1, {
+          type: "prev",
+          disabled: disabled || readOnly || isInvalid
+        }, void 0)
+      }), void 0), children, jsxRuntime.jsx(Button, __assign({
+        css: {
+          borderLeft: '1px solid $bgBorder'
+        },
+        onClick: function () {
+          return onRangeChange('next');
+        }
+      }, {
+        children: jsxRuntime.jsx(IconStateFull$1, {
+          type: "next",
+          disabled: disabled || readOnly || isInvalid
+        }, void 0)
+      }), void 0)]
+    }), void 0);
+  }
+  function InputDateRangePicker(props) {
+    var value = props.value,
+        disabled = props.disabled,
+        readOnly = props.readOnly,
+        onClick = props.onClick,
+        size = props.size,
+        isInvalid = props.isInvalid,
+        placeholder = props.placeholder;
+    return jsxRuntime.jsxs(InputGroup, __assign({
+      css: {
+        border: 'none',
+        '&:hover': {
+          border: 'none'
+        }
+      },
+      disabled: disabled,
+      readOnly: readOnly,
+      isInvalid: isInvalid,
+      onClick: onClick,
+      size: size
+    }, {
+      children: [jsxRuntime.jsx(InputLeftElement, {
+        children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)
+      }, void 0), jsxRuntime.jsx(InputText, {
+        placeholder: placeholder,
+        value: value,
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        onChange: function () {},
+        isPicker: true
+      }, void 0)]
+    }), void 0);
+  }
+
   moment__default["default"].locale('id');
 
   var getInputPickerValue = function getInputPickerValue(type, date, isTimePicker) {
@@ -17051,10 +17323,14 @@
   function InputDatePicker(_a) {
     var _b = _a.type,
         type = _b === void 0 ? SINGLE_PICKER : _b,
-        _c = _a.placeholder,
-        placeholder = _c === void 0 ? 'Pilih Tanggal' : _c,
-        _d = _a.size,
-        size = _d === void 0 ? 'sm' : _d,
+        _c = _a.inputType,
+        inputType = _c === void 0 ? DEFAULT : _c,
+        _d = _a.rangeControl,
+        rangeControl = _d === void 0 ? WEEKLY : _d,
+        _e = _a.placeholder,
+        placeholder = _e === void 0 ? 'Pilih Tanggal' : _e,
+        _f = _a.size,
+        size = _f === void 0 ? 'sm' : _f,
         disabled = _a.disabled,
         onChange = _a.onChange,
         defaultDateValue = _a.defaultValue,
@@ -17062,8 +17338,8 @@
         defaultDate = _a.defaultDate,
         date = _a.date,
         advanceView = _a.advanceView,
-        _e = _a.placement,
-        placement = _e === void 0 ? 'bottom-start' : _e,
+        _g = _a.placement,
+        placement = _g === void 0 ? 'bottom-start' : _g,
         css = _a.css,
         showTimePicker = _a.showTimePicker,
         minDate = _a.minDate,
@@ -17071,13 +17347,13 @@
         readOnly = _a.readOnly,
         isInvalid = _a.isInvalid;
 
-    var _f = React.useState(date || dateValue),
-        value = _f[0],
-        setValue = _f[1];
+    var _h = React.useState(date || dateValue),
+        value = _h[0],
+        setValue = _h[1];
 
-    var _g = React.useState(defaultDate || defaultDateValue),
-        defaultValue = _g[0],
-        setDefaultValue = _g[1];
+    var _j = React.useState(defaultDate || defaultDateValue),
+        defaultValue = _j[0],
+        setDefaultValue = _j[1];
 
     React.useEffect(function () {
       setValue(date || dateValue);
@@ -17086,15 +17362,15 @@
       setDefaultValue(defaultDate || defaultDateValue);
     }, [defaultDate, defaultDateValue]);
 
-    var _h = React.useReducer(pickerReducer, {
+    var _k = React.useReducer(pickerReducer, {
       selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value
     }),
-        selectedDate = _h[0].selectedDate,
-        dispatch = _h[1];
+        selectedDate = _k[0].selectedDate,
+        dispatch = _k[1];
 
-    var _j = React.useState(false),
-        openPicker = _j[0],
-        setOpenPicker = _j[1];
+    var _l = React.useState(false),
+        openPicker = _l[0],
+        setOpenPicker = _l[1];
 
     React.useEffect(function () {
       if (value) {
@@ -17112,24 +17388,54 @@
       }
     }
 
+    function handleRangeChange(type) {
+      if (selectedDate && !disabled && !readOnly && !isInvalid) {
+        var actionType = rangeControl === 'monthly' ? 'MONTH' : 'WEEK';
+
+        if (type === 'prev') {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate('PREV_' + actionType, selectedDate)
+          });
+        } else {
+          dispatch({
+            type: 'UPDATE',
+            payload: advancePickerDate('NEXT_' + actionType, selectedDate)
+          });
+        }
+      }
+    }
+
     var renderInputGroup = function renderInputGroup() {
-      return jsxRuntime.jsxs(InputGroup, __assign({
-        disabled: disabled,
-        readOnly: readOnly,
-        onClick: handleChange,
-        size: size,
-        isInvalid: isInvalid
-      }, {
-        children: [jsxRuntime.jsx(InputLeftElement, {
-          children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)
-        }, void 0), jsxRuntime.jsx(InputText, {
+      if (inputType === DEFAULT) {
+        return jsxRuntime.jsxs(InputGroup, __assign({
+          disabled: disabled,
+          readOnly: readOnly,
+          onClick: handleChange,
+          size: size,
+          isInvalid: isInvalid
+        }, {
+          children: [jsxRuntime.jsx(InputLeftElement, {
+            children: jsxRuntime.jsx(icons.CalendarOutline, {}, void 0)
+          }, void 0), jsxRuntime.jsx(InputText, {
+            placeholder: placeholder,
+            value: getInputPickerValue(type, selectedDate, showTimePicker),
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            onChange: function () {},
+            isPicker: true
+          }, void 0)]
+        }), void 0);
+      } else {
+        return jsxRuntime.jsx(InputDateRangePicker, {
+          value: getInputPickerValue(ADVANCE_PICKER, selectedDate, false),
           placeholder: placeholder,
-          value: getInputPickerValue(type, selectedDate, showTimePicker),
-          // eslint-disable-next-line @typescript-eslint/no-empty-function
-          onChange: function () {},
-          isPicker: true
-        }, void 0)]
-      }), void 0);
+          disabled: disabled,
+          readOnly: readOnly,
+          size: size,
+          isInvalid: isInvalid,
+          onClick: handleChange
+        }, void 0);
+      }
     };
 
     var renderDatePicker = function renderDatePicker() {
@@ -17140,19 +17446,19 @@
           optionHandler: function (value) {
             dispatch({
               type: 'UPDATE',
-              payload: advancePickerDate(value)
+              payload: advancePickerDate(value, undefined)
             });
-            if (onChange) onChange(advancePickerDate(value));
+            if (onChange) onChange(advancePickerDate(value, undefined));
             setOpenPicker(false);
           }
         }, void 0) : {
           advanceView: advanceView
         }),
-        type: type,
+        type: inputType === RANGE_CONTROL ? ADVANCE_PICKER : type,
         disabled: disabled,
         date: value ? value === null || value === void 0 ? void 0 : value[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
         selected: selectedDate,
-        isMultiDatePicker: type !== SINGLE_PICKER,
+        isMultiDatePicker: type !== SINGLE_PICKER || inputType === 'range_control',
         onChange: function (value) {
           dispatch({
             type: 'UPDATE',
@@ -17177,21 +17483,63 @@
       children: [disabled || readOnly ? jsxRuntime.jsx(Box, __assign({
         css: css
       }, {
-        children: renderInputGroup()
-      }), void 0) : jsxRuntime.jsx(PopoverTrigger, {
-        children: jsxRuntime.jsx(Box, __assign({
-          css: css
+        children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+          condition: inputType === 'range_control',
+          wrapper: function (children) {
+            return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
+              disabled: disabled,
+              readOnly: readOnly,
+              isInvalid: isInvalid,
+              onRangeChange: handleRangeChange
+            }, {
+              children: children
+            }), void 0);
+          }
         }, {
           children: renderInputGroup()
         }), void 0)
-      }, void 0), jsxRuntime.jsx(PopoverContent, {
+      }), void 0) : jsxRuntime.jsx(Box, __assign({
+        css: css
+      }, {
+        children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+          condition: inputType === 'range_control',
+          wrapper: function (children) {
+            return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
+              disabled: disabled,
+              readOnly: readOnly,
+              isInvalid: isInvalid,
+              onRangeChange: handleRangeChange
+            }, {
+              children: children
+            }), void 0);
+          }
+        }, {
+          children: jsxRuntime.jsx(PopoverTrigger, {
+            children: renderInputGroup()
+          }, void 0)
+        }), void 0)
+      }), void 0), jsxRuntime.jsx(PopoverContent, {
         children: renderDatePicker()
       }, void 0)]
     }), void 0) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [jsxRuntime.jsx(Box, __assign({
         css: css
       }, {
-        children: renderInputGroup()
+        children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+          condition: inputType === 'range_control',
+          wrapper: function (children) {
+            return jsxRuntime.jsx(ContainerDateRangePicker, __assign({
+              disabled: disabled,
+              readOnly: readOnly,
+              isInvalid: isInvalid,
+              onRangeChange: handleRangeChange
+            }, {
+              children: children
+            }), void 0);
+          }
+        }, {
+          children: renderInputGroup()
+        }), void 0)
       }), void 0), jsxRuntime.jsx(Drawer, __assign({
         open: openPicker,
         onOpenChange: handleChange,
@@ -17246,7 +17594,7 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
-    return /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       onClick: onClick,
       buttonType: !isActive ? 'ghost' : 'primary',
       css: {
@@ -18516,7 +18864,16 @@
     };
 
     var handleRowClick = function handleRowClick(row, i) {
-      onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i);
+      var _a, _b, _c, _d;
+
+      var clickable = false;
+
+      for (var i_1 = 0; i_1 < ((_a = row === null || row === void 0 ? void 0 : row.cells) === null || _a === void 0 ? void 0 : _a.length); i_1++) {
+        var isMenu = ((_d = (_c = (_b = row === null || row === void 0 ? void 0 : row.cells) === null || _b === void 0 ? void 0 : _b[i_1]) === null || _c === void 0 ? void 0 : _c.column) === null || _d === void 0 ? void 0 : _d.id) === 'menu';
+        clickable = !isMenu;
+      }
+
+      clickable && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i));
       setDataRow(row);
     };
 
@@ -18663,9 +19020,9 @@
                 var customStyle = {};
 
                 if (customRowsStyle && customRowsStyle(row.values).length) {
-                  for (var i_1 = 0; i_1 < customRowsStyle(row.values).length; i_1++) {
-                    if (customRowsStyle(row.values)[i_1].predicate) {
-                      customStyle = customRowsStyle(row.values)[i_1].css;
+                  for (var i_2 = 0; i_2 < customRowsStyle(row.values).length; i_2++) {
+                    if (customRowsStyle(row.values)[i_2].predicate) {
+                      customStyle = customRowsStyle(row.values)[i_2].css;
                     }
                   }
                 }
@@ -18681,20 +19038,24 @@
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
-                      var _a, _b;
+                      var _a;
 
+                      var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+                      var exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
                       return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                         css: __assign(__assign({
-                          padding: !isContextMenu || ['expander', 'selection', 'menu', 'eye'].includes((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) ? cell.column.accessor ? '20px 8px' : '20px 20px' : '',
+                          padding: !isContextMenu || exceptionId ? collId === 'expander' ? '20px 4px' : '20px 8px' : '',
                           verticalAlign: cell.column.accessor ? cellAlign : 'center',
                           cursor: onRowClick ? 'pointer' : 'unset'
                         }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)),
                         onClick: function () {
-                          return handleRowClick(row, i);
+                          if (!exceptionId) {
+                            handleRowClick(row, i);
+                          }
                         }
                       }, {
                         children: jsxRuntime.jsx(ConditionalWrapper, __assign({
-                          condition: isContextMenu && !['expander', 'selection', 'menu', 'eye'].includes((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id),
+                          condition: isContextMenu && !exceptionId,
                           wrapper: function (children) {
                             return jsxRuntime.jsx(ContextMenuTrigger, __assign({
                               id: "context-menu-table",
@@ -19589,7 +19950,13 @@
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
-        onClick: () => setOpenDrop(true),
+        onClick: () => {
+          var _document$getElements;
+
+          setOpenDrop(true);
+          const contextMenu = (_document$getElements = document.getElementsByClassName('react-contextmenu')) == null ? void 0 : _document$getElements[0];
+          contextMenu.style.opacity = 0;
+        },
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
@@ -19600,14 +19967,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 40,
-          columnNumber: 70
+          lineNumber: 47,
+          columnNumber: 26
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 43,
+          lineNumber: 51,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -19630,7 +19997,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 44,
+          lineNumber: 52,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -19638,7 +20005,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 64,
+          lineNumber: 72,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -19650,7 +20017,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 65,
+          lineNumber: 73,
           columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -19661,7 +20028,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 74,
+          lineNumber: 82,
           columnNumber: 19
         }
       })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -19672,7 +20039,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 80,
+          lineNumber: 88,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -19680,7 +20047,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 81,
+          lineNumber: 89,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19693,28 +20060,28 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 82,
+          lineNumber: 90,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 83,
+          lineNumber: 91,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 83,
+          lineNumber: 91,
           columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 86,
+          lineNumber: 94,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -19724,7 +20091,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 87,
+          lineNumber: 95,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19739,7 +20106,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 88,
+          lineNumber: 96,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -19747,7 +20114,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 90,
+          lineNumber: 98,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19763,7 +20130,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 91,
+          lineNumber: 99,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -19772,7 +20139,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 102,
+          lineNumber: 110,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19780,7 +20147,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 106,
+          lineNumber: 114,
           columnNumber: 19
         }
       })))))));
@@ -20382,7 +20749,7 @@
         lineNumber: 157,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       size: props.btnSize,
       onClick: buttonConfirm,
       buttonType: props.dialogType,
@@ -20402,7 +20769,7 @@
         lineNumber: 170,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       size: props.btnSize,
       onClick: buttonCancel,
       css: {
@@ -20426,7 +20793,7 @@
         lineNumber: 185,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       size: props.btnSize,
       onClick: buttonConfirm,
       buttonType: props.dialogType,
@@ -20587,7 +20954,7 @@
         lineNumber: 244,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       size: props.btnSize,
       onClick: props.onConfirm,
       buttonType: props.dialogType,
@@ -20610,7 +20977,7 @@
         lineNumber: 258,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       size: props.btnSize,
       onClick: props.onCancel,
       css: {
@@ -20634,7 +21001,7 @@
         lineNumber: 273,
         columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Button$3, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Button$4, _extends({
       size: props.btnSize,
       onClick: props.onConfirm,
       buttonType: props.dialogType,
@@ -23972,7 +24339,7 @@
           lineNumber: 781,
           columnNumber: 13
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
+      }, /*#__PURE__*/React__default["default"].createElement(Button$4, {
         buttonType: "secondary",
         onClick: toggleModal,
         __self: this,
@@ -23981,7 +24348,7 @@
           lineNumber: 782,
           columnNumber: 15
         }
-      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
+      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$4, {
         onClick: handleCrop,
         __self: this,
         __source: {
@@ -24253,6 +24620,7 @@
     fontWeight: 400,
     overflowWrap: 'break-word',
     wordWrap: 'break-word',
+    width: 'fit-content',
     variants: {
       variant: {
         sms: {
@@ -24458,7 +24826,7 @@
                     position: 'absolute',
                     right: '5%',
                     bottom: '12%',
-                    left: '10%'
+                    paddingLeft: 15
                   }
                 }, {
                   children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? jsxRuntime.jsx(CardMessage, __assign({
@@ -24516,8 +24884,8 @@
                     position: 'absolute',
                     right: '5%',
                     bottom: '12%',
-                    left: '10%',
-                    top: '10%',
+                    maxHeight: '75%',
+                    paddingLeft: 15,
                     overflow: 'auto',
                     '&::-webkit-scrollbar': {
                       width: 3
@@ -28248,7 +28616,7 @@
   const Title$1 = styled('a', {
     fontWeight: '600',
     fontSize: '$short-content-bold',
-    color: '$textDisable !important',
+    color: '$textSecondary !important',
     paddingRight: 2,
     transitionDuration: '0.1s',
     userSelect: 'none',
@@ -30209,7 +30577,7 @@
               isTruncated: true
             }, {
               children: inputValue
-            }), void 0), jsxRuntime.jsx(Button$3, __assign({
+            }), void 0), jsxRuntime.jsx(Button$4, __assign({
               type: "button",
               size: "sm",
               buttonType: "secondary",
@@ -30672,7 +31040,7 @@
           }
         }
       }, {
-        children: jsxRuntime.jsx(Button$3, __assign({
+        children: jsxRuntime.jsx(Button$4, __assign({
           buttonType: "ghost",
           css: {
             fontWeight: 600,
@@ -33608,7 +33976,7 @@
   exports.Breadcrumb = Breadcrumb;
   exports.BreadcrumbItem = BreadcrumbItem;
   exports.BreadcrumbLink = BreadcrumbLink;
-  exports.Button = Button$3;
+  exports.Button = Button$4;
   exports.ButtonDropdown = ButtonDropdown;
   exports.ButtonGroup = ButtonGroup$1;
   exports.ButtonGroupItem = ButtonGroupItem;
@@ -33625,6 +33993,7 @@
   exports.ContextMenuItem = ContextMenuItem;
   exports.ContextMenuSeparator = ContextMenuSeparator;
   exports.ContextMenuTrigger = ContextMenuTrigger;
+  exports.DEFAULT = DEFAULT;
   exports.DateColumn = DateColumn;
   exports.DatePicker = DatePicker;
   exports.DecimalColumn = DecimalColumn;
@@ -33706,6 +34075,7 @@
   exports.LineChart = LineChart;
   exports.Link = Link;
   exports.LoadingBar = LoadingBar;
+  exports.MONTHLY = MONTHLY;
   exports.MajooProvider = MajooProvider;
   exports.MapPicker = MapPicker;
   exports.MobileTable = MobileTable;
@@ -33714,9 +34084,13 @@
   exports.ModalDialogFooter = ModalDialogFooter;
   exports.ModalDialogTitle = ModalDialogTitle;
   exports.ModalDialogTrigger = ModalDialogTrigger;
+  exports.NEXT_MONTH = NEXT_MONTH;
+  exports.NEXT_WEEK = NEXT_WEEK;
   exports.NativeTimePicker = NativeTimePicker;
   exports.NotificationBadge = NotificationBadge;
   exports.OptionWrapper = OptionWrapper$2;
+  exports.PREV_MONTH = PREV_MONTH;
+  exports.PREV_WEEK = PREV_WEEK;
   exports.PageContainer = PageContainer;
   exports.PageDialog = PageDialog;
   exports.PageDialogContent = PageDialogContent;
@@ -33734,6 +34108,7 @@
   exports.PriceColumn = PriceColumn;
   exports.Progress = Progress$1;
   exports.ProgressIndicator = ProgressIndicator;
+  exports.RANGE_CONTROL = RANGE_CONTROL;
   exports.RANGE_PICKER = RANGE_PICKER;
   exports.ResendOTP = ResendOTP;
   exports.RightSlot = RightSlot;
@@ -33788,6 +34163,7 @@
   exports.Tooltip = Tooltip$1;
   exports.UPDATE_PICKER = UPDATE_PICKER;
   exports.Upload = Upload;
+  exports.WEEKLY = WEEKLY;
   exports.YESTERDAY = YESTERDAY;
   exports.addOnCellStyle = addOnCellStyle;
   exports.advancePickerDate = advancePickerDate;