@majoo-ui/react 1.57.6 → 1.57.7

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, createContext, useContext, useEffect, useRef, useCallback, cloneElement, forwardRef, createElement as createElement$2, useLayoutEffect, useReducer, useMemo, memo } from 'react';
+import React__default, { useState, useEffect, createContext, useContext, useRef, useCallback, cloneElement, forwardRef, createElement as createElement$2, useLayoutEffect, useReducer, useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
@@ -2897,6 +2897,22 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => {
+      setMatches(media.matches);
+    };
+    media.addEventListener('change', listener);
+    return () => media.removeEventListener('change', listener);
+  }, [matches, query]);
+  return matches;
+}
+
 const _excluded$A = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
 var _jsxFileName$10 = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/toast/Toast.js";
 const TOAST_WIDTH = 576;
@@ -3032,7 +3048,8 @@ const DescriptionField = styled(Paragraph, {
   display: '-webkit-box',
   '-webkit-line-clamp': '3',
   '-webkit-box-orient': 'vertical',
-  overflow: 'hidden'
+  overflow: 'hidden',
+  whiteSpace: 'unset'
 });
 const CloseButton$2 = styled(Flex$1, {
   cursor: 'pointer',
@@ -3067,6 +3084,7 @@ const Toast = _ref => {
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   const [isOpen, setIsOpen] = React.useState(false);
+  const isMobile = useMediaQuery(`(max-width: 767px`);
   const close = React.useCallback(() => {
     setIsOpen(false);
   }, [setIsOpen]);
@@ -3094,19 +3112,22 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 212,
+      lineNumber: 216,
       columnNumber: 5
     }
   }, state => /*#__PURE__*/React.createElement(Root, _extends({
     id: id,
     state: state,
+    css: {
+      maxWidth: isMobile ? '80vw' : TOAST_WIDTH
+    },
     hPosition: position.includes('left') ? 'left' : 'right',
     vPosition: position.includes('top') ? 'top' : 'bottom'
   }, rest, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 223,
+      lineNumber: 227,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(StyledToast, {
@@ -3116,7 +3137,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 230,
+      lineNumber: 235,
       columnNumber: 11
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3124,7 +3145,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 231,
+      lineNumber: 236,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement(Flex$1, {
@@ -3132,7 +3153,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 232,
+      lineNumber: 237,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(LeftBar, {
@@ -3140,7 +3161,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 233,
+      lineNumber: 238,
       columnNumber: 17
     }
   }), /*#__PURE__*/React.createElement(Flex$1, {
@@ -3152,7 +3173,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 234,
+      lineNumber: 239,
       columnNumber: 17
     }
   }, title && /*#__PURE__*/React.createElement(Flex$1, {
@@ -3160,7 +3181,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 242,
+      lineNumber: 247,
       columnNumber: 21
     }
   }, /*#__PURE__*/React.createElement(Heading, {
@@ -3168,14 +3189,14 @@ const Toast = _ref => {
     css: {
       lineHeight: '$long-content-regular',
       flex: 1,
-      whiteSpace: 'nowrap',
+      whiteSpace: 'unset',
       overflow: 'hidden',
       textOverflow: 'ellipsis'
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 243,
+      lineNumber: 248,
       columnNumber: 23
     }
   }, title)), /*#__PURE__*/React.createElement(DescriptionField, {
@@ -3184,7 +3205,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 257,
+      lineNumber: 262,
       columnNumber: 19
     }
   }, description)), /*#__PURE__*/React.createElement(CloseButton$2, {
@@ -3199,7 +3220,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 261,
+      lineNumber: 266,
       columnNumber: 17
     }
   }, /*#__PURE__*/React.createElement(CloseOutline, {
@@ -3208,7 +3229,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 271,
+      lineNumber: 276,
       columnNumber: 19
     }
   }))), (hrefOfAction || isExternalOfAction || onClickOfAction) && /*#__PURE__*/React.createElement(Link, {
@@ -3223,7 +3244,7 @@ const Toast = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$10,
-      lineNumber: 275,
+      lineNumber: 280,
       columnNumber: 17
     }
   }, captionOfAction)))));
@@ -3237,7 +3258,8 @@ Toast.propTypes = {
   dismissAfter: PropTypes.number,
   variant: PropTypes.string.isRequired,
   onClick: PropTypes.func,
-  onRemove: PropTypes.func
+  onRemove: PropTypes.func,
+  disabledOfflineIntercept: PropTypes.bool
 };
 Toast.defaultProps = {
   dismissAfter: 5000
@@ -3324,27 +3346,57 @@ const ToastContainer = ({
   })));
 };
 
-const _excluded$y = ["id"];
+const getOnLineStatus = () => typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean' ? navigator.onLine : true;
+const useNavigatorOnLine = () => {
+  const [status, setStatus] = React__default.useState(getOnLineStatus());
+  const setOnline = () => setStatus(true);
+  const setOffline = () => setStatus(false);
+  React__default.useEffect(() => {
+    window.addEventListener('online', setOnline);
+    window.addEventListener('offline', setOffline);
+    return () => {
+      window.removeEventListener('online', setOnline);
+      window.removeEventListener('offline', setOffline);
+    };
+  }, []);
+  return status;
+};
+
+const _excluded$y = ["id", "disabledOfflineIntercept"];
 var _jsxFileName$_ = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
 let toastCount = 0;
 const ToastProvider = ({
   children
 }) => {
+  const isOnline = useNavigatorOnLine();
   const [toasts, setToasts] = React.useState([]);
-  const createToastInstance = toast => {
+  const {
+    t
+  } = useTranslation(['MajooUI/toast', 'translation']);
+  const createToastInstance = React.useCallback(toast => {
     const {
-        id
+        id,
+        disabledOfflineIntercept
       } = toast,
       rest = _objectWithoutPropertiesLoose(toast, _excluded$y);
 
     // eslint-disable-next-line no-plusplus
     const uniqueId = ++toastCount;
     const toastId = toast.id || `${id || 'toast'}-${uniqueId}`;
+    const offlineInstance = {
+      id: 'offline-connection',
+      title: t('offlineTitle', 'Internet Bermasalah'),
+      variant: 'failed',
+      description: t('offlineDescription', 'Tidak ada koneksi internet, mohon periksa jaringan'),
+      hrefOfAction: false,
+      onClickOfAction: false,
+      isExternalOfAction: false
+    };
     return Object.assign({
       id: toastId,
       position: TOP_RIGHT_POSITION
-    }, rest);
-  };
+    }, rest, !isOnline && !disabledOfflineIntercept && offlineInstance);
+  }, [isOnline, t]);
   const addToast = React.useCallback(toast => {
     const toastInstance = createToastInstance(toast);
     setToasts(toastItems => {
@@ -3354,7 +3406,7 @@ const ToastProvider = ({
       return toastItems;
     });
     return toastInstance;
-  }, [toasts, setToasts]);
+  }, [createToastInstance]);
   const removeToast = React.useCallback(id => {
     setToasts(toastItems => toastItems.filter(t => t.id !== id));
   }, [setToasts]);
@@ -3366,7 +3418,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 47,
+      lineNumber: 65,
       columnNumber: 5
     }
   }, children, /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3375,7 +3427,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 49,
+      lineNumber: 67,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3384,7 +3436,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 53,
+      lineNumber: 71,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3393,7 +3445,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 57,
+      lineNumber: 75,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3402,7 +3454,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 61,
+      lineNumber: 79,
       columnNumber: 7
     }
   }));
@@ -10861,7 +10913,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
-const _excluded$c = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading"];
+const _excluded$c = ["placeholder", "option", "value", "defaultValue", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectAll", "showTagSelectAll", "selectAllLabel", "showSelectedTag", "unremovableTags", "helperText", "css", "showCounter", "labelCounter", "collapsible", "toggleInput", "fetchData", "onSearch", "isLoading"];
 var _jsxFileName$w = "/Users/ryanakbar20/Documents/project/majoo/majoo-ui/packages/react/src/components/form/components/InputSelectCheck/InputSelectCheck.js";
 const Wrapper$1 = styled('div', {
   margin: 0,
@@ -11111,6 +11163,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       isInvalid,
       sortBy,
       showSelectAll,
+      showTagSelectAll,
       selectAllLabel,
       showSelectedTag,
       unremovableTags,
@@ -11395,13 +11448,22 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     setSelectedValue(items.length > 0 && inputSelectValue.length === items.length - 1 ? ['!all', ...inputSelectValue] : inputSelectValue);
   }, [inputSelectValue, items]);
   const toggleCollapsible = () => setShowAllTags(!showAllTags);
+  const handleRemoveAllItem = () => {
+    onChange === null || onChange === void 0 ? void 0 : onChange([]);
+    setSelectedValue([]);
+    setInputSelectValue([]);
+    for (let i = 0; i < selectedValue.length; i++) {
+      removeSelectedItem(selectedValue[i]);
+    }
+  };
+  const isShowTagSelectAll = showTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > (option === null || option === void 0 ? void 0 : option.length);
   return /*#__PURE__*/React__default.createElement(Wrapper$1, _extends({
     css: css
   }, props, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 584,
+      lineNumber: 596,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Select, {
@@ -11411,7 +11473,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 585,
+      lineNumber: 597,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -11426,7 +11488,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 586,
+      lineNumber: 598,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Input$6, _extends({}, getInputProps({
@@ -11444,7 +11506,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 596,
+      lineNumber: 608,
       columnNumber: 13
     }
   })), /*#__PURE__*/React__default.createElement(Button$2, _extends({}, getToggleButtonProps({
@@ -11457,7 +11519,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 603,
+      lineNumber: 615,
       columnNumber: 13
     }
   }), placeholder != null ? placeholder : t('placeholder', 'Pilih Item'))), /*#__PURE__*/React__default.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -11468,7 +11530,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 613,
+      lineNumber: 625,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(IconCaretDown, {
@@ -11476,7 +11538,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 618,
+      lineNumber: 630,
       columnNumber: 13
     }
   }))), helperText && /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11489,7 +11551,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 622,
+      lineNumber: 634,
       columnNumber: 11
     }
   }, helperText), showSelectedTag && !showCounter && selectedItems.length !== 0 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TagWrapper$2, {
@@ -11497,10 +11559,30 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 628,
+      lineNumber: 640,
       columnNumber: 13
     }
-  }, selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
+  }, isShowTagSelectAll ? /*#__PURE__*/React__default.createElement(Tag, _extends({
+    disabled: disabled,
+    isRemovable: readOnly || disabled || unremovableTags.includes('!all') ? false : true,
+    size: "lg",
+    readOnly: readOnly,
+    key: `selected-item-!all`
+  }, getSelectedItemProps({
+    selectedItem: {
+      id: '!all',
+      name: selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')
+    },
+    index: 0
+  }), {
+    onRemove: handleRemoveAllItem,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$w,
+      lineNumber: 642,
+      columnNumber: 17
+    }
+  }), selectAllLabel != null ? selectAllLabel : t('selectAllLabelText', 'Pilih Semua')) : selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter === void 0 ? void 0 : (_selectedItems$filter2 = _selectedItems$filter.filter((_, idx) => {
     if (showAllTags || !collapsible) {
       return true;
     } else {
@@ -11527,16 +11609,16 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 639,
-      columnNumber: 19
+      lineNumber: 670,
+      columnNumber: 21
     }
-  }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
+  }), selectedItem.name))), collapsible && !isShowTagSelectAll && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "column",
     gap: 4,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 660,
+      lineNumber: 692,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11546,14 +11628,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 661,
+      lineNumber: 693,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 662,
+      lineNumber: 694,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11567,7 +11649,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 663,
+      lineNumber: 695,
       columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
@@ -11575,7 +11657,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 669,
+      lineNumber: 701,
       columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
@@ -11583,7 +11665,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 671,
+      lineNumber: 703,
       columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11595,14 +11677,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 673,
+      lineNumber: 705,
       columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 677,
+      lineNumber: 709,
       columnNumber: 19
     }
   })), /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11613,10 +11695,10 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 679,
+      lineNumber: 711,
       columnNumber: 17
     }
-  }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter3 === void 0 ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
+  }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter3 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter3 === void 0 ? void 0 : _selectedItems$filter3.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`))), showCounter && !isShowTagSelectAll && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(Paragraph, {
     css: {
       fontSize: '$label',
       marginTop: '$spacing-01'
@@ -11625,7 +11707,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 689,
+      lineNumber: 721,
       columnNumber: 11
     }
   }, `${selectedItems === null || selectedItems === void 0 ? void 0 : (_selectedItems$filter4 = selectedItems.filter(item => (item === null || item === void 0 ? void 0 : item.id) !== '!all')) === null || _selectedItems$filter4 === void 0 ? void 0 : _selectedItems$filter4.length} ${labelCounter || t('labelCounterText', 'Item terpilih')}`), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
@@ -11637,7 +11719,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 696,
+      lineNumber: 728,
       columnNumber: 9
     }
   }, isLoading && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11658,7 +11740,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 702,
+      lineNumber: 734,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
@@ -11666,7 +11748,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 718,
+      lineNumber: 750,
       columnNumber: 15
     }
   }, "Loading....")), items.length > 0 || isLoading ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({
@@ -11677,7 +11759,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 724,
+      lineNumber: 756,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -11692,14 +11774,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 728,
+        lineNumber: 760,
         columnNumber: 19
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 725,
+      lineNumber: 757,
       columnNumber: 15
     }
   }, isOpen && items.map((item, index) => {
@@ -11719,7 +11801,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 740,
+        lineNumber: 772,
         columnNumber: 21
       }
     }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -11732,7 +11814,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 753,
+        lineNumber: 785,
         columnNumber: 23
       }
     }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -11740,7 +11822,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 762,
+        lineNumber: 794,
         columnNumber: 27
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -11748,21 +11830,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 766,
+        lineNumber: 798,
         columnNumber: 29
       }
     }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 773,
+        lineNumber: 805,
         columnNumber: 27
       }
     }, "-") : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 775,
+        lineNumber: 807,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -11773,7 +11855,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 778,
+        lineNumber: 810,
         columnNumber: 23
       }
     }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
@@ -11787,14 +11869,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 786,
+      lineNumber: 818,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 787,
+      lineNumber: 819,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -11804,7 +11886,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 788,
+      lineNumber: 820,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -11816,7 +11898,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 789,
+      lineNumber: 821,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -11849,7 +11931,8 @@ InputSelectCheck.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
   fetchData: PropTypes.func,
   onSearch: PropTypes.func,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  showTagSelectAll: PropTypes.bool
 };
 InputSelectCheck.defaultProps = {
   size: 'lg',
@@ -11907,7 +11990,8 @@ InputSelectTag.propTypes = {
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.number)]),
   fetchData: PropTypes.func,
   onSearch: PropTypes.func,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  showTagSelectAll: PropTypes.bool
 };
 InputSelectTag.defaultProps = {
   size: 'lg',
@@ -15148,22 +15232,6 @@ const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 const AccordionItem = StyledItem$1;
 const AccordionContent = AccordionPrimitive.Content;
 
-function useMediaQuery(query) {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    const media = window.matchMedia(query);
-    if (media.matches !== matches) {
-      setMatches(media.matches);
-    }
-    const listener = () => {
-      setMatches(media.matches);
-    };
-    media.addEventListener('change', listener);
-    return () => media.removeEventListener('change', listener);
-  }, [matches, query]);
-  return matches;
-}
-
 const ButtonGroup = styled(ToggleGroupPrimitive.Root, {});
 const Item$1 = styled(ButtonGroupItem, {
   fontSize: '$label',
@@ -15213,7 +15281,7 @@ const yearRangesList = rangeStart => {
 };
 const getCalendarStartYear = year => year - year % 10 + 1;
 const getCalendarStartYearRange = year => year - year % 100 + 1;
-const toDateFormat = (date, locale = 'id') => moment(date).locale(locale).format('D MMMM YYYY');
+const toDateFormat = (date, locale = 'id') => moment(date).locale(locale).format('DD MMMM YYYY');
 
 const DateNumber = styled('div', {
   display: 'inline-flex',