@majoo-ui/react 1.54.4 → 1.54.6

package/index.esm.js

@@ -3,7 +3,7 @@ import React__default, { useState, createContext, useContext, useEffect, useRef,
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
-import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
+import { CloseOutline, UserFilled, CircleQuestionOutline, SearchOutline, CloseFilled, CircleInfoOutline, CaretDownOutline, ChevronUpOutline, ChevronDownOutline, CirclePlusOutline, MinusOutline, PlusOutline, ChevronLgLeftOutline, ChevronLgRightOutline, ChevronLeftOutline, ChevronRightOutline, TimeOutline, CalendarOutline, ArrowLeftOutline, ArrowRightOutline, EllipsisHorizontalOutline, EyeOutline, UploadOutline, ImageOutline, ChevronUpDownOutline, CheckFilled, RemoveOutline, LocationOutline } from '@majoo-ui/icons';
 import { Transition } from 'react-transition-group';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Portal } from '@majoo-ui/helpers';
@@ -4051,7 +4051,7 @@ const ButtonPrimitive = styled('button', {
     }
   }
 });
-const Button$3 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+const Button$4 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   var {
     children,
     type,
@@ -6577,7 +6577,7 @@ const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
     }
   }
 });
-const Container$9 = styled(Flex$1, {
+const Container$a = styled(Flex$1, {
   variants: {
     outlined: {
       true: {
@@ -6704,7 +6704,7 @@ const InputRadio = _ref => {
     outlined
   }) => {
     const checked = value != null ? value : defaultValue;
-    return /*#__PURE__*/React__default.createElement(Container$9, {
+    return /*#__PURE__*/React__default.createElement(Container$a, {
       direction: "column",
       outlined: outlined,
       disabledOutlined: outlined && (readOnly || disabled),
@@ -8513,7 +8513,7 @@ const SelectBox = styled(Flex$1, {
     }
   }
 });
-const Button$2 = styled('button', {
+const Button$3 = styled('button', {
   display: 'flex',
   width: '100%',
   height: '100%',
@@ -8895,7 +8895,7 @@ function InputSelect(_a) {
                   disabled: disabled || readOnly
                 }).onClick : undefined
               }, void 0)
-            }), void 0) : jsx(Button$2, Object.assign({}, getToggleButtonProps({
+            }), void 0) : jsx(Button$3, Object.assign({}, getToggleButtonProps({
               disabled: disabled || readOnly
             }), {
               disabled: disabled,
@@ -9342,7 +9342,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-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,
@@ -9454,7 +9454,7 @@ const Input$6 = styled('input', {
     }
   }
 });
-const Button$1 = styled('button', {
+const Button$2 = styled('button', {
   background: 'none',
   outline: 'none',
   border: 'none',
@@ -9574,7 +9574,7 @@ const IndeterminateFilled = styled('div', {
   alignItems: 'center'
 });
 const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _selectedItems$filter;
+  var _selectedItems$filter, _selectedItems$filter2;
 
   let {
     placeholder,
@@ -9598,7 +9598,8 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     helperText,
     css,
     showCounter,
-    labelCounter
+    labelCounter,
+    collapsible
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
@@ -9607,6 +9608,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   const [items, setItems] = React__default.useState([]);
   const [selectedValue, setSelectedValue] = React__default.useState([]);
   const [inputValue, setInputValue] = React__default.useState('');
+  const [showAllTags, setShowAllTags] = React__default.useState(false);
   const sortItems = React__default.useCallback(() => {
     if (sortBy === 'id') {
       option.sort(function (a, b) {
@@ -9848,13 +9850,16 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
   useEffect(() => {
     setSelectedValue(items.length > 0 && value.length === items.length - 1 ? ['!all', ...value] : value);
   }, [value]);
+
+  const toggleCollapsible = () => setShowAllTags(!showAllTags);
+
   return /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
     css: css
   }, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 517,
+      lineNumber: 521,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -9864,7 +9869,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 518,
+      lineNumber: 522,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9879,7 +9884,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 519,
+      lineNumber: 523,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -9895,10 +9900,10 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 529,
+      lineNumber: 533,
       columnNumber: 13
     }
-  })), /*#__PURE__*/React__default.createElement(Button$1, _extends({}, getToggleButtonProps({
+  })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
     disabled: disabled || readOnly
   }), {
     disabled: disabled || readOnly,
@@ -9908,7 +9913,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 535,
+      lineNumber: 539,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9919,7 +9924,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 545,
+      lineNumber: 549,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -9927,7 +9932,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 550,
+      lineNumber: 554,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -9940,18 +9945,24 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 554,
+      lineNumber: 558,
       columnNumber: 11
     }
-  }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
+  }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__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$filter.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
+  }, 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;
+    }
+  })) == null ? void 0 : _selectedItems$filter2.map((selectedItem, index) => /*#__PURE__*/React__default.createElement(Tag, _extends({
     disabled: disabled,
     isRemovable: readOnly || disabled || unremovableTags.includes(selectedItem.id) ? false : true,
     size: size,
@@ -9972,15 +9983,81 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(Flex$1, {
+    align: "center",
+    justify: "center",
+    onClick: toggleCollapsible,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 596,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/React__default.createElement(Separator$2, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 597,
+      columnNumber: 17
+    }
+  }), /*#__PURE__*/React__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.createElement(ChevronUpOutline, {
+    color: colors$4.iconSecondary,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 604,
+      columnNumber: 21
+    }
+  }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    color: colors$4.iconSecondary,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$v,
+      lineNumber: 606,
+      columnNumber: 21
+    }
+  }), /*#__PURE__*/React__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.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.createElement(TagWrapper$1, {
+  }))), showSelectedTag && showCounter && Boolean(selectedItems == null ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
     disabled: disabled,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 585,
+      lineNumber: 618,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Tag, {
@@ -10007,7 +10084,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 586,
+      lineNumber: 619,
       columnNumber: 13
     }
   }, `${selectedItems == null ? void 0 : selectedItems.length} ${labelCounter}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -10019,7 +10096,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 606,
+      lineNumber: 639,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -10028,7 +10105,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 611,
+      lineNumber: 644,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -10046,7 +10123,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 614,
+      lineNumber: 647,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -10059,7 +10136,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 627,
+      lineNumber: 660,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -10067,7 +10144,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(CheckOutline, {
@@ -10075,21 +10152,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __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.createElement(IndeterminateFilled, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 647,
+      lineNumber: 680,
       columnNumber: 25
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 649,
+      lineNumber: 682,
       columnNumber: 25
     }
   })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -10099,7 +10176,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 652,
+      lineNumber: 685,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -10112,14 +10189,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 657,
+      lineNumber: 690,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 658,
+      lineNumber: 691,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10129,7 +10206,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 659,
+      lineNumber: 692,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -10141,7 +10218,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$v,
-      lineNumber: 660,
+      lineNumber: 693,
       columnNumber: 19
     }
   })), textEmptyItem))));
@@ -10168,7 +10245,8 @@ InputSelectCheck.propTypes = {
   css: PropTypes.object,
   helperText: PropTypes.string,
   showCounter: PropTypes.bool,
-  labelCounter: PropTypes.string
+  labelCounter: PropTypes.string,
+  collapsible: PropTypes.bool
 };
 InputSelectCheck.defaultProps = {
   placeholder: 'Select Item',
@@ -10186,7 +10264,8 @@ InputSelectCheck.defaultProps = {
   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";
@@ -10221,7 +10300,8 @@ InputSelectTag.propTypes = {
   textEmptyItem: PropTypes.string,
   helperText: PropTypes.string,
   showCounter: PropTypes.bool,
-  labelCounter: PropTypes.string
+  labelCounter: PropTypes.string,
+  collapsible: PropTypes.bool
 };
 InputSelectTag.defaultProps = {
   placeholder: 'Select Item',
@@ -10237,7 +10317,8 @@ InputSelectTag.defaultProps = {
   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";
@@ -11067,7 +11148,7 @@ const Input$4 = styled(InputNumber, {
     }
   }
 });
-const Button = styled(Button$3, {
+const Button$1 = styled(Button$4, {
   border: `1px solid $gray150 !important`,
   paddingRight: '16px !important',
   paddingLeft: '16px !important',
@@ -11186,7 +11267,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
     align: "center",
     css: css
   }, {
-    children: [jsx(Button, Object.assign({
+    children: [jsx(Button$1, Object.assign({
       type: "button",
       disabled: disabled || disabledDecrement,
       buttonType: "secondary",
@@ -11209,7 +11290,7 @@ const InputCounter = /*#__PURE__*/forwardRef((props, ref) => {
       prefix: prefix,
       suffix: suffix,
       size: size
-    }, void 0), jsx(Button, Object.assign({
+    }, void 0), jsx(Button$1, Object.assign({
       type: "button",
       disabled: disabled || disabledIncrement,
       buttonType: "secondary",
@@ -11976,7 +12057,7 @@ const StyledContent$5 = styled(TabsPrimitive.Content, {
   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)'
@@ -15167,7 +15248,7 @@ const CalendarBox = ({
         }), void 0), jsxs(Flex$1, Object.assign({
           gap: 3
         }, {
-          children: [jsx(Button$3, Object.assign({
+          children: [jsx(Button$4, Object.assign({
             buttonType: "ghost",
             css: {
               fontWeight: 600
@@ -15177,7 +15258,7 @@ const CalendarBox = ({
             size: "sm"
           }, {
             children: "Batal"
-          }), void 0), jsx(Button$3, Object.assign({
+          }), void 0), jsx(Button$4, Object.assign({
             css: {
               fontWeight: 600
             },
@@ -15742,7 +15823,7 @@ const MobileCalendarBox = ({
       }), void 0), jsxs(Flex$1, Object.assign({
         gap: 3
       }, {
-        children: [jsx(Button$3, Object.assign({
+        children: [jsx(Button$4, Object.assign({
           buttonType: "ghost",
           size: "sm",
           css: {
@@ -15755,7 +15836,7 @@ const MobileCalendarBox = ({
           disabled: disabled
         }, {
           children: "Batal"
-        }), void 0), jsx(Button$3, Object.assign({
+        }), void 0), jsx(Button$4, Object.assign({
           size: "sm",
           css: {
             width: '160px',
@@ -15821,7 +15902,7 @@ const Time = styled('p', {
     }
   }
 });
-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,
@@ -15882,7 +15963,7 @@ const IconDown = styled(ChevronDownOutline, {
   }
 });
 
-const IconStateFull$1 = props => {
+const IconStateFull$2 = props => {
   const [isHover, setIsHover] = useState(false);
 
   function toggleHover() {
@@ -15984,7 +16065,7 @@ const NativeTimePicker = ({
       lineNumber: 165,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
+  }, /*#__PURE__*/React__default.createElement(IconStateFull$2, {
     type: "up",
     disabled: disabled,
     onClick: () => handleUp('hour'),
@@ -15994,7 +16075,7 @@ const NativeTimePicker = ({
       lineNumber: 166,
       columnNumber: 9
     }
-  }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
+  }), /*#__PURE__*/React__default.createElement(IconStateFull$2, {
     type: "up",
     disabled: disabled,
     onClick: () => handleUp('minutes'),
@@ -16032,7 +16113,7 @@ const NativeTimePicker = ({
       lineNumber: 171,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React__default.createElement(IconStateFull$1, {
+  }, /*#__PURE__*/React__default.createElement(IconStateFull$2, {
     type: "down",
     disabled: disabled,
     onClick: () => handleDown('hour'),
@@ -16042,7 +16123,7 @@ const NativeTimePicker = ({
       lineNumber: 172,
       columnNumber: 9
     }
-  }), /*#__PURE__*/React__default.createElement(IconStateFull$1, {
+  }), /*#__PURE__*/React__default.createElement(IconStateFull$2, {
     type: "down",
     disabled: disabled,
     onClick: () => handleDown('minutes'),
@@ -16095,7 +16176,7 @@ const TimePicker = ({
   minDate,
   maxDate
 }) => {
-  return /*#__PURE__*/React__default.createElement(Container$8, {
+  return /*#__PURE__*/React__default.createElement(Container$9, {
     size: size,
     disabled: disabled,
     direction: "column",
@@ -16407,9 +16488,13 @@ InputTimePicker.propTypes = {
 };
 InputTimePicker.displayName = 'InputTimePicker';
 
+const DEFAULT = 'default';
 const SINGLE_PICKER = 'single';
 const RANGE_PICKER = 'range';
 const ADVANCE_PICKER = 'advance';
+const RANGE_CONTROL = 'range_control';
+const WEEKLY = 'weekly';
+const MONTHLY = 'monthly';
 
 const CalendarPicker = _a => {
   var {
@@ -16584,6 +16669,10 @@ const TODAY = 'TODAY';
 const YESTERDAY = 'YESTERDAY';
 const LAST_7_DAYS = 'LAST_7_DAYS';
 const LAST_WEEK = 'LAST_WEEK';
+const PREV_WEEK = 'PREV_WEEK';
+const NEXT_WEEK = 'NEXT_WEEK';
+const PREV_MONTH = 'PREV_MONTH';
+const NEXT_MONTH = 'NEXT_MONTH';
 const THIS_WEEK = 'THIS_WEEK';
 const LAST_MONTH = 'LAST_MONTH';
 const LAST_TWO_MONTHS = 'LAST_TWO_MONTH';
@@ -16705,7 +16794,7 @@ function pickerReducer(state, action) {
       }
   }
 }
-function advancePickerDate(type) {
+function advancePickerDate(type, date) {
   const tempDate = new Date();
   const today = new Date(tempDate.getFullYear(), tempDate.getMonth(), tempDate.getDate(), 0, 0, 0, 0);
 
@@ -16747,6 +16836,38 @@ function advancePickerDate(type) {
         return [startThisWeek, endThisWeek];
       }
 
+    case NEXT_WEEK:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
+        const startThisWeek = currentDate.startOf('week').toDate();
+        const endThisWeek = currentDate.endOf('week').toDate();
+        return [startThisWeek, endThisWeek];
+      }
+
+    case PREV_WEEK:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
+        const startThisWeek = currentDate.startOf('week').toDate();
+        const endThisWeek = currentDate.endOf('week').toDate();
+        return [startThisWeek, endThisWeek];
+      }
+
+    case NEXT_MONTH:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[1]).add(1, 'day');
+        const startThisMonth = currentDate.startOf('month').toDate();
+        const endThisMonth = currentDate.endOf('month').toDate();
+        return [startThisMonth, endThisMonth];
+      }
+
+    case PREV_MONTH:
+      {
+        const currentDate = moment(date === null || date === void 0 ? void 0 : date[0]).subtract(1, 'day');
+        const startThisMonth = currentDate.startOf('month').toDate();
+        const endThisMonth = currentDate.endOf('month').toDate();
+        return [startThisMonth, endThisMonth];
+      }
+
     case LAST_MONTH:
       {
         const startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
@@ -16775,6 +16896,155 @@ function advancePickerDate(type) {
   }
 }
 
+const 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'
+        }
+      }
+    }
+  }
+});
+const Button = styled(Flex$1, {
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+  userSelect: 'none',
+  margin: 4,
+  padding: '0px 4px'
+});
+
+const IconStateFull$1 = props => {
+  const [isHover, setIsHover] = useState(false);
+
+  function handleHover() {
+    setIsHover(true);
+  }
+
+  function handleUnHover() {
+    setIsHover(false);
+  }
+
+  return props.type === 'next' ? jsx(ChevronRightOutline, Object.assign({}, props, {
+    color: isHover && !props.disabled ? '#36D4B1' : '#404545',
+    onMouseEnter: handleHover,
+    onMouseLeave: handleUnHover
+  }), void 0) : jsx(ChevronLeftOutline, Object.assign({}, props, {
+    color: isHover && !props.disabled ? '#36D4B1' : '#404545',
+    onMouseEnter: handleHover,
+    onMouseLeave: handleUnHover
+  }), void 0);
+};
+
+function ContainerDateRangePicker(props) {
+  const {
+    css,
+    children,
+    disabled,
+    readOnly,
+    onRangeChange,
+    isInvalid
+  } = props;
+  return jsxs(Container$8, Object.assign({
+    css: css,
+    disabled: disabled,
+    readOnly: readOnly,
+    isInvalid: isInvalid
+  }, {
+    children: [jsx(Button, Object.assign({
+      css: {
+        borderRight: '1px solid $bgBorder'
+      },
+      onClick: () => onRangeChange('prev')
+    }, {
+      children: jsx(IconStateFull$1, {
+        type: "prev",
+        disabled: disabled || readOnly || isInvalid
+      }, void 0)
+    }), void 0), children, jsx(Button, Object.assign({
+      css: {
+        borderLeft: '1px solid $bgBorder'
+      },
+      onClick: () => onRangeChange('next')
+    }, {
+      children: jsx(IconStateFull$1, {
+        type: "next",
+        disabled: disabled || readOnly || isInvalid
+      }, void 0)
+    }), void 0)]
+  }), void 0);
+}
+function InputDateRangePicker(props) {
+  const {
+    value,
+    disabled,
+    readOnly,
+    onClick,
+    size,
+    isInvalid,
+    placeholder
+  } = props;
+  return jsxs(InputGroup, Object.assign({
+    css: {
+      border: 'none',
+      '&:hover': {
+        border: 'none'
+      }
+    },
+    disabled: disabled,
+    readOnly: readOnly,
+    isInvalid: isInvalid,
+    onClick: onClick,
+    size: size
+  }, {
+    children: [jsx(InputLeftElement, {
+      children: jsx(CalendarOutline, {}, void 0)
+    }, void 0), jsx(InputText, {
+      placeholder: placeholder,
+      value: value,
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onChange: () => {},
+      isPicker: true
+    }, void 0)]
+  }), void 0);
+}
+
 moment.locale('id');
 
 const getInputPickerValue = (type, date, isTimePicker) => {
@@ -16789,6 +17059,8 @@ const getInputPickerValue = (type, date, isTimePicker) => {
 
 function InputDatePicker({
   type = SINGLE_PICKER,
+  inputType = DEFAULT,
+  rangeControl = WEEKLY,
   placeholder = 'Pilih Tanggal',
   size = 'sm',
   disabled,
@@ -16836,23 +17108,55 @@ function InputDatePicker({
     }
   }
 
-  const renderInputGroup = () => jsxs(InputGroup, Object.assign({
-    disabled: disabled,
-    readOnly: readOnly,
-    onClick: handleChange,
-    size: size,
-    isInvalid: isInvalid
-  }, {
-    children: [jsx(InputLeftElement, {
-      children: jsx(CalendarOutline, {}, void 0)
-    }, void 0), jsx(InputText, {
-      placeholder: placeholder,
-      value: getInputPickerValue(type, selectedDate, showTimePicker),
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      onChange: () => {},
-      isPicker: true
-    }, void 0)]
-  }), void 0);
+  function handleRangeChange(type) {
+    if (selectedDate && !disabled && !readOnly && !isInvalid) {
+      const 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)
+        });
+      }
+    }
+  }
+
+  const renderInputGroup = () => {
+    if (inputType === DEFAULT) {
+      return jsxs(InputGroup, Object.assign({
+        disabled: disabled,
+        readOnly: readOnly,
+        onClick: handleChange,
+        size: size,
+        isInvalid: isInvalid
+      }, {
+        children: [jsx(InputLeftElement, {
+          children: jsx(CalendarOutline, {}, void 0)
+        }, void 0), jsx(InputText, {
+          placeholder: placeholder,
+          value: getInputPickerValue(type, selectedDate, showTimePicker),
+          // eslint-disable-next-line @typescript-eslint/no-empty-function
+          onChange: () => {},
+          isPicker: true
+        }, void 0)]
+      }), void 0);
+    } else {
+      return jsx(InputDateRangePicker, {
+        value: getInputPickerValue(ADVANCE_PICKER, selectedDate, false),
+        placeholder: placeholder,
+        disabled: disabled,
+        readOnly: readOnly,
+        size: size,
+        isInvalid: isInvalid,
+        onClick: handleChange
+      }, void 0);
+    }
+  };
 
   const renderDatePicker = () => jsx(DatePicker, {
     advanceView: type === ADVANCE_PICKER && (!advanceView ? jsx(AdvancedOption, {
@@ -16861,19 +17165,19 @@ function InputDatePicker({
       optionHandler: 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
     }),
-    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: value => {
       dispatch({
         type: 'UPDATE',
@@ -16895,21 +17199,57 @@ function InputDatePicker({
     children: [disabled || readOnly ? jsx(Box, Object.assign({
       css: css
     }, {
-      children: renderInputGroup()
-    }), void 0) : jsx(PopoverTrigger, {
-      children: jsx(Box, Object.assign({
-        css: css
+      children: jsx(ConditionalWrapper, Object.assign({
+        condition: inputType === 'range_control',
+        wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
+          disabled: disabled,
+          readOnly: readOnly,
+          isInvalid: isInvalid,
+          onRangeChange: handleRangeChange
+        }, {
+          children: children
+        }), void 0)
       }, {
         children: renderInputGroup()
       }), void 0)
-    }, void 0), jsx(PopoverContent, {
+    }), void 0) : jsx(Box, Object.assign({
+      css: css
+    }, {
+      children: jsx(ConditionalWrapper, Object.assign({
+        condition: inputType === 'range_control',
+        wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
+          disabled: disabled,
+          readOnly: readOnly,
+          isInvalid: isInvalid,
+          onRangeChange: handleRangeChange
+        }, {
+          children: children
+        }), void 0)
+      }, {
+        children: jsx(PopoverTrigger, {
+          children: renderInputGroup()
+        }, void 0)
+      }), void 0)
+    }), void 0), jsx(PopoverContent, {
       children: renderDatePicker()
     }, void 0)]
   }), void 0) : jsxs(Fragment, {
     children: [jsx(Box, Object.assign({
       css: css
     }, {
-      children: renderInputGroup()
+      children: jsx(ConditionalWrapper, Object.assign({
+        condition: inputType === 'range_control',
+        wrapper: children => jsx(ContainerDateRangePicker, Object.assign({
+          disabled: disabled,
+          readOnly: readOnly,
+          isInvalid: isInvalid,
+          onRangeChange: handleRangeChange
+        }, {
+          children: children
+        }), void 0)
+      }, {
+        children: renderInputGroup()
+      }), void 0)
     }), void 0), jsx(Drawer, Object.assign({
       open: openPicker,
       onOpenChange: handleChange,
@@ -16964,7 +17304,7 @@ const PageButton = _ref => {
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
-  return /*#__PURE__*/React__default.createElement(Button$3, _extends({
+  return /*#__PURE__*/React__default.createElement(Button$4, _extends({
     onClick: onClick,
     buttonType: !isActive ? 'ghost' : 'primary',
     css: {
@@ -18188,7 +18528,16 @@ function Table({
   };
 
   const handleRowClick = (row, i) => {
-    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i);
+    var _a, _b, _c, _d;
+
+    let clickable = false;
+
+    for (let _i = 0; _i < ((_a = row === null || row === void 0 ? void 0 : row.cells) === null || _a === void 0 ? void 0 : _a.length); _i++) {
+      const isMenu = ((_d = (_c = (_b = row === null || row === void 0 ? void 0 : row.cells) === null || _b === void 0 ? void 0 : _b[_i]) === 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);
   };
 
@@ -18325,9 +18674,9 @@ function Table({
               let customStyle = {};
 
               if (customRowsStyle && customRowsStyle(row.values).length) {
-                for (let _i = 0; _i < customRowsStyle(row.values).length; _i++) {
-                  if (customRowsStyle(row.values)[_i].predicate) {
-                    customStyle = customRowsStyle(row.values)[_i].css;
+                for (let _i2 = 0; _i2 < customRowsStyle(row.values).length; _i2++) {
+                  if (customRowsStyle(row.values)[_i2].predicate) {
+                    customStyle = customRowsStyle(row.values)[_i2].css;
                   }
                 }
               }
@@ -18341,18 +18690,24 @@ function Table({
                   css: customStyle
                 }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
-                    var _a, _b;
+                    var _a;
 
+                    const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+                    const exceptionId = ['expander', 'selection', 'menu', 'eye'].includes(collId);
                     return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign(Object.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: () => handleRowClick(row, i)
+                      onClick: () => {
+                        if (!exceptionId) {
+                          handleRowClick(row, i);
+                        }
+                      }
                     }, {
                       children: jsx(ConditionalWrapper, Object.assign({
-                        condition: isContextMenu && !['expander', 'selection', 'menu', 'eye'].includes((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id),
+                        condition: isContextMenu && !exceptionId,
                         wrapper: children => jsx(ContextMenuTrigger, Object.assign({
                           id: "context-menu-table",
                           triggerSide: "left"
@@ -19232,7 +19587,13 @@ const rowMenuColumn = (options, icon, config) => ({
         columnNumber: 13
       }
     }, /*#__PURE__*/React__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,
@@ -19243,14 +19604,14 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 40,
-        columnNumber: 70
+        lineNumber: 47,
+        columnNumber: 26
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 43,
+        lineNumber: 51,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
@@ -19273,7 +19634,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 44,
+        lineNumber: 52,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -19281,7 +19642,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 64,
+        lineNumber: 72,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -19293,7 +19654,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 65,
+        lineNumber: 73,
         columnNumber: 19
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
@@ -19304,7 +19665,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 74,
+        lineNumber: 82,
         columnNumber: 19
       }
     })))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
@@ -19315,7 +19676,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 80,
+        lineNumber: 88,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -19323,7 +19684,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 81,
+        lineNumber: 89,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19336,28 +19697,28 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 82,
+        lineNumber: 90,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 83,
+        lineNumber: 91,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 83,
+        lineNumber: 91,
         columnNumber: 36
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 86,
+        lineNumber: 94,
         columnNumber: 11
       }
     }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -19367,7 +19728,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 87,
+        lineNumber: 95,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19382,7 +19743,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 88,
+        lineNumber: 96,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -19390,7 +19751,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 90,
+        lineNumber: 98,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -19406,7 +19767,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 91,
+        lineNumber: 99,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -19415,7 +19776,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 102,
+        lineNumber: 110,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -19423,7 +19784,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 106,
+        lineNumber: 114,
         columnNumber: 19
       }
     })))))));
@@ -20023,7 +20384,7 @@ const TemplateAlertFunction = props => {
       lineNumber: 157,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
+  }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
     size: props.btnSize,
     onClick: buttonConfirm,
     buttonType: props.dialogType,
@@ -20043,7 +20404,7 @@ const TemplateAlertFunction = props => {
       lineNumber: 170,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
+  }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
     size: props.btnSize,
     onClick: buttonCancel,
     css: {
@@ -20067,7 +20428,7 @@ const TemplateAlertFunction = props => {
       lineNumber: 185,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
+  }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
     size: props.btnSize,
     onClick: buttonConfirm,
     buttonType: props.dialogType,
@@ -20228,7 +20589,7 @@ function AlertDialog(props) {
       lineNumber: 244,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
+  }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
     size: props.btnSize,
     onClick: props.onConfirm,
     buttonType: props.dialogType,
@@ -20251,7 +20612,7 @@ function AlertDialog(props) {
       lineNumber: 258,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
+  }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
     size: props.btnSize,
     onClick: props.onCancel,
     css: {
@@ -20275,7 +20636,7 @@ function AlertDialog(props) {
       lineNumber: 273,
       columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Button$3, _extends({
+  }, /*#__PURE__*/React__default.createElement(Button$4, _extends({
     size: props.btnSize,
     onClick: props.onConfirm,
     buttonType: props.dialogType,
@@ -23579,7 +23940,7 @@ const Upload = ({
         lineNumber: 781,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__default.createElement(Button$3, {
+    }, /*#__PURE__*/React__default.createElement(Button$4, {
       buttonType: "secondary",
       onClick: toggleModal,
       __self: this,
@@ -23588,7 +23949,7 @@ const Upload = ({
         lineNumber: 782,
         columnNumber: 15
       }
-    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
+    }, "Batal"), /*#__PURE__*/React__default.createElement(Button$4, {
       onClick: handleCrop,
       __self: this,
       __source: {
@@ -23860,6 +24221,7 @@ const CardMessage = styled('div', {
   fontWeight: 400,
   overflowWrap: 'break-word',
   wordWrap: 'break-word',
+  width: 'fit-content',
   variants: {
     variant: {
       sms: {
@@ -24052,7 +24414,7 @@ const Device = props => {
                   position: 'absolute',
                   right: '5%',
                   bottom: '12%',
-                  left: '10%'
+                  paddingLeft: 15
                 }
               }, {
                 children: typeof (content === null || content === void 0 ? void 0 : content.message) === 'string' ? jsx(CardMessage, Object.assign({
@@ -24110,8 +24472,8 @@ const Device = props => {
                   position: 'absolute',
                   right: '5%',
                   bottom: '12%',
-                  left: '10%',
-                  top: '10%',
+                  maxHeight: '75%',
+                  paddingLeft: 15,
                   overflow: 'auto',
                   '&::-webkit-scrollbar': {
                     width: 3
@@ -27842,7 +28204,7 @@ const List = styled('li', {
 const Title$1 = styled('a', {
   fontWeight: '600',
   fontSize: '$short-content-bold',
-  color: '$textDisable !important',
+  color: '$textSecondary !important',
   paddingRight: 2,
   transitionDuration: '0.1s',
   userSelect: 'none',
@@ -29770,7 +30132,7 @@ function InputMapPicker(props) {
             isTruncated: true
           }, {
             children: inputValue
-          }), void 0), jsx(Button$3, Object.assign({
+          }), void 0), jsx(Button$4, Object.assign({
             type: "button",
             size: "sm",
             buttonType: "secondary",
@@ -30215,7 +30577,7 @@ const ComparatorController = ({
         }
       }
     }, {
-      children: jsx(Button$3, Object.assign({
+      children: jsx(Button$4, Object.assign({
         buttonType: "ghost",
         css: {
           fontWeight: 600,
@@ -33037,4 +33399,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DEFAULT, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };