@majoo-ui/react 1.55.30 → 1.55.31

package/components/pageDialog/PageDialog.d.ts

@@ -92,7 +92,7 @@ export declare const PageDialogFooter: import("@stitches/react/types/styled-comp
         };
         height: {
             readonly [$$PropertyValue]: "width";
-        };
+        }; /** set PageDialog zIndex, default is set to 1400 */
     };
     subtleColor: (value: string) => {
         color: string;
@@ -188,7 +188,7 @@ export declare const PageDialogTitle: import("@stitches/react/types/styled-compo
         };
         height: {
             readonly [$$PropertyValue]: "width";
-        };
+        }; /** set PageDialog zIndex, default is set to 1400 */
     };
     subtleColor: (value: string) => {
         color: string;
@@ -284,7 +284,7 @@ export declare const PageDialogContent: import("@stitches/react/types/styled-com
         };
         height: {
             readonly [$$PropertyValue]: "width";
-        };
+        }; /** set PageDialog zIndex, default is set to 1400 */
     };
     subtleColor: (value: string) => {
         color: string;
@@ -380,7 +380,7 @@ export declare const PageDialogTrigger: import("@stitches/react/types/styled-com
         };
         height: {
             readonly [$$PropertyValue]: "width";
-        };
+        }; /** set PageDialog zIndex, default is set to 1400 */
     };
     subtleColor: (value: string) => {
         color: string;
@@ -494,7 +494,7 @@ export declare const PageDialog: {
             };
             height: {
                 readonly [$$PropertyValue]: "width";
-            };
+            }; /** set PageDialog zIndex, default is set to 1400 */
         };
         subtleColor: (value: string) => {
             color: string;
@@ -590,7 +590,7 @@ export declare const PageDialog: {
             };
             height: {
                 readonly [$$PropertyValue]: "width";
-            };
+            }; /** set PageDialog zIndex, default is set to 1400 */
         };
         subtleColor: (value: string) => {
             color: string;
@@ -686,7 +686,7 @@ export declare const PageDialog: {
             };
             height: {
                 readonly [$$PropertyValue]: "width";
-            };
+            }; /** set PageDialog zIndex, default is set to 1400 */
         };
         subtleColor: (value: string) => {
             color: string;
@@ -782,7 +782,7 @@ export declare const PageDialog: {
             };
             height: {
                 readonly [$$PropertyValue]: "width";
-            };
+            }; /** set PageDialog zIndex, default is set to 1400 */
         };
         subtleColor: (value: string) => {
             color: string;

package/index.esm.js

@@ -9939,7 +9939,7 @@ const IndeterminateFilled = styled('div', {
   alignItems: 'center'
 });
 const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
-  var _selectedItems$filter, _selectedItems$filter2;
+  var _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3, _selectedItems$filter4;
   let {
       placeholder,
       option,
@@ -10327,22 +10327,31 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       columnNumber: 19
     }
   }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default.createElement(Flex$1, {
-    align: "center",
-    justify: "center",
-    onClick: toggleCollapsible,
+    direction: "column",
+    gap: 4,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
       lineNumber: 600,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React__default.createElement(Separator$2, {
+  }, /*#__PURE__*/React__default.createElement(Flex$1, {
+    align: "center",
+    justify: "center",
+    onClick: toggleCollapsible,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
       lineNumber: 601,
       columnNumber: 17
     }
+  }, /*#__PURE__*/React__default.createElement(Separator$2, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$w,
+      lineNumber: 602,
+      columnNumber: 19
+    }
   }), /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
     justify: "center",
@@ -10354,24 +10363,24 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 602,
-      columnNumber: 17
+      lineNumber: 603,
+      columnNumber: 19
     }
   }, showAllTags ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
     color: colors$4.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 608,
-      columnNumber: 21
+      lineNumber: 609,
+      columnNumber: 23
     }
   }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
     color: colors$4.iconSecondary,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 610,
-      columnNumber: 21
+      lineNumber: 611,
+      columnNumber: 23
     }
   }), /*#__PURE__*/React__default.createElement(Paragraph, {
     css: {
@@ -10382,53 +10391,40 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 612,
-      columnNumber: 19
+      lineNumber: 613,
+      columnNumber: 21
     }
   }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default.createElement(Separator$2, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 616,
-      columnNumber: 17
+      lineNumber: 617,
+      columnNumber: 19
     }
-  }))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default.createElement(TagWrapper$1, {
-    disabled: disabled,
+  })), /*#__PURE__*/React__default.createElement(Paragraph, {
+    css: {
+      fontSize: '$label'
+    },
+    color: "green",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 622,
-      columnNumber: 11
+      lineNumber: 619,
+      columnNumber: 17
     }
-  }, /*#__PURE__*/React__default.createElement(Tag, {
+  }, `${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, {
     css: {
-      maxWidth: '150px !important'
-    },
-    disabled: disabled,
-    isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
-    size: "lg",
-    readOnly: readOnly
-    // {...getSelectedItemProps({ selectedItem, index })}
-    ,
-    onRemove: event => {
-      if (onRemoveItem) {
-        return onRemoveItem({
-          id: 'counter'
-        });
-      } else {
-        event.stopPropagation();
-        removeItem({
-          id: 'counter'
-        });
-      }
+      fontSize: '$label',
+      marginTop: '$spacing-01'
     },
+    color: "green",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 623,
-      columnNumber: 13
+      lineNumber: 629,
+      columnNumber: 11
     }
-  }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter != null ? labelCounter : t('labelCounterText', 'Item terpilih')}`)), /*#__PURE__*/React__default.createElement(OptionWrapper$1, {
+  }, `${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, {
     placement: placement,
     css: {
       display: isOpen && disabled === false ? 'block' : 'none',
@@ -10437,7 +10433,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 643,
+      lineNumber: 635,
       columnNumber: 9
     }
   }, items.length !== 0 ? /*#__PURE__*/React__default.createElement(Option, _extends({}, getMenuProps({}, {
@@ -10446,7 +10442,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 648,
+      lineNumber: 640,
       columnNumber: 13
     }
   }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
@@ -10464,7 +10460,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 651,
+      lineNumber: 643,
       columnNumber: 19
     }
   }), /*#__PURE__*/React__default.createElement(IconWrapper, {
@@ -10477,7 +10473,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 664,
+      lineNumber: 656,
       columnNumber: 21
     }
   }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -10485,7 +10481,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 673,
+      lineNumber: 665,
       columnNumber: 25
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
@@ -10493,21 +10489,21 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 677,
+      lineNumber: 669,
       columnNumber: 27
     }
   }), 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: 684,
+      lineNumber: 676,
       columnNumber: 25
     }
   }, "-") : /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 686,
+      lineNumber: 678,
       columnNumber: 25
     }
   })), /*#__PURE__*/React__default.createElement(Item$3, {
@@ -10517,7 +10513,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 689,
+      lineNumber: 681,
       columnNumber: 21
     }
   }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
@@ -10530,14 +10526,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 694,
+      lineNumber: 686,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 695,
+      lineNumber: 687,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10547,7 +10543,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 696,
+      lineNumber: 688,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -10559,7 +10555,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 697,
+      lineNumber: 689,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -14459,7 +14455,7 @@ ModalDialog.defaultProps = {
 };
 
 const _excluded$5 = ["children"],
-  _excluded2$1 = ["children"];
+  _excluded2$1 = ["children", "showOverlay"];
 var _jsxFileName$n = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/drawer/Drawer.js";
 const Context$1 = /*#__PURE__*/React__default.createContext();
 const {
@@ -14602,6 +14598,11 @@ const StyledContent$2 = styled(DialogPrimitive.Content, {
         $$transformValue: 'translate3d(-100%,0,0)',
         left: 0
       }
+    },
+    showOverlay: {
+      false: {
+        boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.08)'
+      }
     }
   },
   defaultVariants: {
@@ -14672,14 +14673,15 @@ const CloseButton = styled(DialogPrimitive.Close, {
 });
 const DrawerContent = _ref2 => {
   let {
-      children
+      children,
+      showOverlay
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
   return /*#__PURE__*/React__default.createElement(Context$1.Consumer, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 207,
+      lineNumber: 212,
       columnNumber: 5
     }
   }, value => /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
@@ -14688,28 +14690,29 @@ const DrawerContent = _ref2 => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 209,
+        lineNumber: 214,
         columnNumber: 75
       }
     }, child),
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 209,
+      lineNumber: 214,
       columnNumber: 9
     }
-  }, /*#__PURE__*/React__default.createElement(StyledOverlay$1, {
+  }, showOverlay && /*#__PURE__*/React__default.createElement(StyledOverlay$1, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 210,
-      columnNumber: 11
+      lineNumber: 215,
+      columnNumber: 27
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$2, _extends({}, value, props, {
+    showOverlay: showOverlay,
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 211,
+      lineNumber: 216,
       columnNumber: 11
     }
   }), children)));
@@ -14719,14 +14722,14 @@ const DrawerHeader = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 221,
+      lineNumber: 226,
       columnNumber: 10
     }
   }, value => /*#__PURE__*/React__default.createElement(Header, _extends({}, value, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 221,
+      lineNumber: 226,
       columnNumber: 38
     }
   }), props.children));
@@ -14736,14 +14739,14 @@ const DrawerFooter = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 225,
+      lineNumber: 230,
       columnNumber: 10
     }
   }, value => /*#__PURE__*/React__default.createElement(Footer, _extends({}, value, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 225,
+      lineNumber: 230,
       columnNumber: 38
     }
   }), props.children));
@@ -14758,14 +14761,14 @@ const DrawerCloseButton = () => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 235,
+      lineNumber: 240,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$n,
-      lineNumber: 236,
+      lineNumber: 241,
       columnNumber: 7
     }
   }));
@@ -14784,7 +14787,11 @@ Drawer.propTypes = {
 };
 DrawerContent.propTypes = {
   side: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
-  isMobile: PropTypes.bool
+  isMobile: PropTypes.bool,
+  showOverlay: PropTypes.bool
+};
+DrawerContent.defaultProps = {
+  showOverlay: true
 };
 Drawer.displayName = 'Drawer';
 DrawerTrigger.displayName = 'DrawerTrigger';
@@ -20112,6 +20119,7 @@ PageDialogContent.displayName = 'PageDialogContent';
 const PageDialogTrigger = styled('div');
 PageDialogTrigger.displayName = 'PageDialogTrigger';
 const ContentWrapper = styled(Box, {
+  animationName: 'unset !important',
   variants: {
     wrapperSize: {
       md: {
@@ -20345,7 +20353,11 @@ const PageDialog = props => {
           }, {
             children: jsx(ContentWrapper, Object.assign({}, !isMobile ? {
               wrapperSize: (_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize
-            } : {}, {
+            } : {
+              css: {
+                display: 'contents'
+              }
+            }, {
               children: (_b = pageDialogChildren.props) === null || _b === void 0 ? void 0 : _b.children
             }), void 0)
           }), void 0), footerChildren && jsx(Box, Object.assign({}, footerChildren.props, {

package/index.umd.js

@@ -10057,7 +10057,7 @@
     alignItems: 'center'
   });
   const InputSelectCheck = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-    var _selectedItems$filter, _selectedItems$filter2;
+    var _selectedItems$filter, _selectedItems$filter2, _selectedItems$filter3, _selectedItems$filter4;
     let {
         placeholder,
         option,
@@ -10445,22 +10445,31 @@
         columnNumber: 19
       }
     }), selectedItem.name))), collapsible && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 5 && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
-      align: "center",
-      justify: "center",
-      onClick: toggleCollapsible,
+      direction: "column",
+      gap: 4,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
         lineNumber: 600,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      align: "center",
+      justify: "center",
+      onClick: toggleCollapsible,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
         lineNumber: 601,
         columnNumber: 17
       }
+    }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 602,
+        columnNumber: 19
+      }
     }), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
       justify: "center",
@@ -10472,24 +10481,24 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 602,
-        columnNumber: 17
+        lineNumber: 603,
+        columnNumber: 19
       }
     }, showAllTags ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
       color: colors$4.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 608,
-        columnNumber: 21
+        lineNumber: 609,
+        columnNumber: 23
       }
     }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
       color: colors$4.iconSecondary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 610,
-        columnNumber: 21
+        lineNumber: 611,
+        columnNumber: 23
       }
     }), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
       css: {
@@ -10500,53 +10509,40 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 612,
-        columnNumber: 19
+        lineNumber: 613,
+        columnNumber: 21
       }
     }, showAllTags ? t('showSomeText', 'Tampilkan Sebagian') : t('showAllText', 'Tampilkan Semua'))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 616,
-        columnNumber: 17
+        lineNumber: 617,
+        columnNumber: 19
       }
-    }))), showSelectedTag && showCounter && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && /*#__PURE__*/React__default["default"].createElement(TagWrapper$1, {
-      disabled: disabled,
+    })), /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+      css: {
+        fontSize: '$label'
+      },
+      color: "green",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 622,
-        columnNumber: 11
+        lineNumber: 619,
+        columnNumber: 17
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Tag, {
+    }, `${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["default"].createElement(Paragraph, {
       css: {
-        maxWidth: '150px !important'
-      },
-      disabled: disabled,
-      isRemovable: readOnly || disabled || Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length),
-      size: "lg",
-      readOnly: readOnly
-      // {...getSelectedItemProps({ selectedItem, index })}
-      ,
-      onRemove: event => {
-        if (onRemoveItem) {
-          return onRemoveItem({
-            id: 'counter'
-          });
-        } else {
-          event.stopPropagation();
-          removeItem({
-            id: 'counter'
-          });
-        }
+        fontSize: '$label',
+        marginTop: '$spacing-01'
       },
+      color: "green",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 623,
-        columnNumber: 13
+        lineNumber: 629,
+        columnNumber: 11
       }
-    }, `${selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length} ${labelCounter != null ? labelCounter : t('labelCounterText', 'Item terpilih')}`)), /*#__PURE__*/React__default["default"].createElement(OptionWrapper$1, {
+    }, `${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["default"].createElement(OptionWrapper$1, {
       placement: placement,
       css: {
         display: isOpen && disabled === false ? 'block' : 'none',
@@ -10555,7 +10551,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 643,
+        lineNumber: 635,
         columnNumber: 9
       }
     }, items.length !== 0 ? /*#__PURE__*/React__default["default"].createElement(Option, _extends({}, getMenuProps({}, {
@@ -10564,7 +10560,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 648,
+        lineNumber: 640,
         columnNumber: 13
       }
     }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["default"].createElement(ItemWrapper$1, _extends({
@@ -10582,7 +10578,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 651,
+        lineNumber: 643,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default["default"].createElement(IconWrapper, {
@@ -10595,7 +10591,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 664,
+        lineNumber: 656,
         columnNumber: 21
       }
     }, item.isDisabled ? /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -10603,7 +10599,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 673,
+        lineNumber: 665,
         columnNumber: 25
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
@@ -10611,21 +10607,21 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 677,
+        lineNumber: 669,
         columnNumber: 27
       }
     }), 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["default"].createElement(IndeterminateFilled, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 684,
+        lineNumber: 676,
         columnNumber: 25
       }
     }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 686,
+        lineNumber: 678,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
@@ -10635,7 +10631,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 689,
+        lineNumber: 681,
         columnNumber: 21
       }
     }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
@@ -10648,14 +10644,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 694,
+        lineNumber: 686,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 695,
+        lineNumber: 687,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10665,7 +10661,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 696,
+        lineNumber: 688,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -10677,7 +10673,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 697,
+        lineNumber: 689,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -14608,7 +14604,7 @@
   };
 
   const _excluded$5 = ["children"],
-    _excluded2$1 = ["children"];
+    _excluded2$1 = ["children", "showOverlay"];
   var _jsxFileName$n = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/drawer/Drawer.js";
   const Context$1 = /*#__PURE__*/React__default["default"].createContext();
   const {
@@ -14751,6 +14747,11 @@
           $$transformValue: 'translate3d(-100%,0,0)',
           left: 0
         }
+      },
+      showOverlay: {
+        false: {
+          boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.08)'
+        }
       }
     },
     defaultVariants: {
@@ -14821,14 +14822,15 @@
   });
   const DrawerContent = _ref2 => {
     let {
-        children
+        children,
+        showOverlay
       } = _ref2,
       props = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
     return /*#__PURE__*/React__default["default"].createElement(Context$1.Consumer, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 207,
+        lineNumber: 212,
         columnNumber: 5
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(ConditionalWrapper, {
@@ -14837,28 +14839,29 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$n,
-          lineNumber: 209,
+          lineNumber: 214,
           columnNumber: 75
         }
       }, child),
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 209,
+        lineNumber: 214,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay$1, {
+    }, showOverlay && /*#__PURE__*/React__default["default"].createElement(StyledOverlay$1, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 210,
-        columnNumber: 11
+        lineNumber: 215,
+        columnNumber: 27
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$2, _extends({}, value, props, {
+      showOverlay: showOverlay,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 211,
+        lineNumber: 216,
         columnNumber: 11
       }
     }), children)));
@@ -14868,14 +14871,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 221,
+        lineNumber: 226,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(Header, _extends({}, value, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 221,
+        lineNumber: 226,
         columnNumber: 38
       }
     }), props.children));
@@ -14885,14 +14888,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 225,
+        lineNumber: 230,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(Footer, _extends({}, value, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 225,
+        lineNumber: 230,
         columnNumber: 38
       }
     }), props.children));
@@ -14907,14 +14910,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 235,
+        lineNumber: 240,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$n,
-        lineNumber: 236,
+        lineNumber: 241,
         columnNumber: 7
       }
     }));
@@ -14933,7 +14936,11 @@
   };
   DrawerContent.propTypes = {
     side: PropTypes__default["default"].oneOf(['top', 'left', 'bottom', 'right']),
-    isMobile: PropTypes__default["default"].bool
+    isMobile: PropTypes__default["default"].bool,
+    showOverlay: PropTypes__default["default"].bool
+  };
+  DrawerContent.defaultProps = {
+    showOverlay: true
   };
   Drawer.displayName = 'Drawer';
   DrawerTrigger.displayName = 'DrawerTrigger';
@@ -20438,6 +20445,7 @@
   var PageDialogTrigger = styled('div');
   PageDialogTrigger.displayName = 'PageDialogTrigger';
   var ContentWrapper = styled(Box, {
+    animationName: 'unset !important',
     variants: {
       wrapperSize: {
         md: {
@@ -20675,7 +20683,11 @@
             }, {
               children: jsxRuntime.jsx(ContentWrapper, __assign({}, !isMobile ? {
                 wrapperSize: (_a = pageDialogChildren.props) === null || _a === void 0 ? void 0 : _a.wrapperSize
-              } : {}, {
+              } : {
+                css: {
+                  display: 'contents'
+                }
+              }, {
                 children: (_b = pageDialogChildren.props) === null || _b === void 0 ? void 0 : _b.children
               }), void 0)
             }), void 0), footerChildren && jsxRuntime.jsx(Box, __assign({}, footerChildren.props, {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.55.30",
+  "version": "1.55.31",
   "dependencies": {
     "@majoo-ui/core": "^1.31.3",
     "@majoo-ui/helpers": "^1.30.5",
-    "@majoo-ui/icons": "^1.38.12",
+    "@majoo-ui/icons": "^1.38.13",
     "@stitches/react": "^1.2.8",
     "@radix-ui/react-alert-dialog": "^1.0.0",
     "@radix-ui/react-avatar": "^1.0.0",