@majoo-ui/react 1.36.0 → 1.36.1

package/index.umd.js

@@ -1122,7 +1122,8 @@
       md: '(min-width: 767px)',
       lg: '(min-width: 1023px)',
       xl: '(min-width: 1199px)',
-      '2xl': '(min-width: 1399px)'
+      '2xl': '(min-width: 1399px)',
+      '3xl': '(min-width: 1600px)'
     },
     utils: {
       m: value => ({
@@ -2189,7 +2190,7 @@
   };
   Flex$1.displayName = 'Flex';
 
-  const _excluded$y = ["children"],
+  const _excluded$z = ["children"],
         _excluded2$3 = ["children"];
   var _jsxFileName$U = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/layout/grid/Grid.js";
   const GridComponent = styled('div', {
@@ -2365,7 +2366,7 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -2662,7 +2663,7 @@
 
   Paragraph.displayName = 'Paragraph';
 
-  const _excluded$x = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
+  const _excluded$y = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
   var _jsxFileName$T = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/button/Button.js";
   const ButtonPrimary = {
     backgroundColor: '$btnPrimary',
@@ -2886,7 +2887,7 @@
       rightIcon,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(ButtonComponent, _extends({
       className: className,
@@ -3004,7 +3005,7 @@
     onClick: () => {}
   };
 
-  const _excluded$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+  const _excluded$x = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
   var _jsxFileName$R = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/Toast.js";
   const TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
@@ -3170,7 +3171,7 @@
       captionOfAction,
       hrefOfAction
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const close = React__namespace.useCallback(() => {
@@ -3421,7 +3422,7 @@
     })));
   };
 
-  const _excluded$v = ["id"];
+  const _excluded$w = ["id"];
   var _jsxFileName$P = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
 
@@ -3434,7 +3435,7 @@
       const {
         id
       } = toast,
-            rest = _objectWithoutPropertiesLoose(toast, _excluded$v); // eslint-disable-next-line no-plusplus
+            rest = _objectWithoutPropertiesLoose(toast, _excluded$w); // eslint-disable-next-line no-plusplus
 
 
       const uniqueId = ++toastCount;
@@ -3598,7 +3599,7 @@
     onRemove: PropTypes__default["default"].func
   });
 
-  const _excluded$u = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
+  const _excluded$v = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
   var _jsxFileName$N = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/card/Card.js";
   const CardComponent = styled('div', {
     padding: '20px',
@@ -3736,7 +3737,7 @@
       textColor,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
     return /*#__PURE__*/React__default["default"].createElement(CardComponent, {
       className: className,
@@ -3844,7 +3845,7 @@
       return t;
   }
 
-  const _excluded$t = ["children"];
+  const _excluded$u = ["children"];
   var _jsxFileName$M = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
@@ -3902,7 +3903,7 @@
     let {
       children
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
@@ -4119,7 +4120,7 @@
 
   Badge.displayName = 'Badge';
 
-  const _excluded$s = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+  const _excluded$t = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
   var _jsxFileName$L = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/avatar/Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
@@ -4164,7 +4165,7 @@
       onClick,
       css
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
@@ -4222,7 +4223,7 @@
     delayMs: 0
   };
 
-  const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
+  const _excluded$s = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
   var _jsxFileName$K = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/image/Image.js";
   const StyledImage = styled('img', {
     display: 'inline-block',
@@ -4246,7 +4247,7 @@
       objectFit,
       fallback
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledImage, _extends({
       className: className,
@@ -4281,7 +4282,7 @@
     rounded: false
   };
 
-  const _excluded$q = ["children", "label", "color", "contentCss", "withClick"];
+  const _excluded$r = ["children", "label", "color", "contentCss", "withClick"];
   var _jsxFileName$J = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
   const slideUpAndFade$1 = keyframes({
     '0%': {
@@ -4387,7 +4388,7 @@
       color,
       withClick
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
     const [open, setOpen] = React.useState(false);
     return /*#__PURE__*/React__default["default"].createElement(TooltipBase, _extends({}, rest, {
@@ -4443,7 +4444,7 @@
     color: 'light'
   };
 
-  const _excluded$p = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+  const _excluded$q = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
   var _jsxFileName$I = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/progress/Progress.js";
   const StyledProgress = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
@@ -4562,7 +4563,7 @@
       rounded,
       width
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledProgress, _extends({
       className: className,
@@ -4614,7 +4615,7 @@
     rounded: true
   };
 
-  const _excluded$o = ["gap", "direction", "children"];
+  const _excluded$p = ["gap", "direction", "children"];
   var _jsxFileName$H = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormGroup/FormGroup.js";
 
   const FormGroup = _ref => {
@@ -4623,7 +4624,7 @@
       direction,
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
       direction: direction,
@@ -4648,7 +4649,7 @@
     direction: 'column'
   };
 
-  const _excluded$n = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
+  const _excluded$o = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
   var _jsxFileName$G = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
   const StyledLabel$1 = styled(LabelPrimitive__namespace.Root, Text, {
     display: 'inline-block',
@@ -4681,7 +4682,7 @@
       maxCount,
       labelCss
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "between",
@@ -4762,7 +4763,7 @@
   };
   FormLabel.displayName = 'FormLabel';
 
-  const _excluded$m = ["children", "error"];
+  const _excluded$n = ["children", "error"];
   var _jsxFileName$F = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
   const StyledHelper = styled(Text, {
     display: 'inline-block',
@@ -4781,7 +4782,7 @@
       children,
       error
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
       error: error,
@@ -4897,7 +4898,7 @@
     }
   }));
 
-  const _excluded$l = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label"];
+  const _excluded$m = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label"];
   var _jsxFileName$C = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
   const StyledIndicator$1 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
@@ -4955,7 +4956,7 @@
       disabled,
       onCheckedChange
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -5046,7 +5047,7 @@
   };
   InputCheckbox.displayName = 'InputCheckbox';
 
-  const _excluded$k = ["children", "size"];
+  const _excluded$l = ["children", "size"];
   var _jsxFileName$B = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
@@ -5160,7 +5161,7 @@
       children,
       size = 'lg'
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
     const isLetter = children.some(child => child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
     const isElement = children.some(child => child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
@@ -5497,7 +5498,7 @@
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$j = ["id", "disabled"];
+  const _excluded$k = ["id", "disabled"];
   var _jsxFileName$A = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
@@ -5575,7 +5576,7 @@
       id,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       align: "center",
@@ -5659,7 +5660,7 @@
   };
   InputRightElement.name = 'InputRightElement';
 
-  const _excluded$i = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
+  const _excluded$j = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
   var _jsxFileName$z = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/tag/Tag.js";
   const TagComponent = styled('span', {
     boxSizing: 'border-box',
@@ -5736,7 +5737,7 @@
       leftIcon,
       rightIcon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
     return /*#__PURE__*/React__default["default"].createElement(TagComponent, _extends({
       ref: ref,
@@ -5781,7 +5782,7 @@
     size: 'sm'
   };
 
-  const _excluded$h = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
+  const _excluded$i = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
   var _jsxFileName$y = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
   const InputTagsComponent = styled('div', {
     display: 'flex',
@@ -5901,7 +5902,7 @@
       readOnly,
       max
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
     const [tags, setTags] = React__default["default"].useState(value || []);
 
@@ -6002,7 +6003,7 @@
     readOnly: false
   };
 
-  const _excluded$g = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
+  const _excluded$h = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
   var _jsxFileName$x = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
@@ -6075,7 +6076,7 @@
       dataOffLabel,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSwitch, _extends({
       defaultChecked: defaultChecked,
@@ -6214,7 +6215,7 @@
     size: 24
   };
 
-  const _excluded$f = ["size", "onChange"];
+  const _excluded$g = ["size", "onChange"];
   var _jsxFileName$u = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
 
   const InputSearchbox = _ref => {
@@ -6222,7 +6223,7 @@
       size,
       onChange
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
     const [value, setValue] = React__default["default"].useState('');
     const handleChange = React__default["default"].useCallback(e => {
@@ -6651,7 +6652,7 @@
     ];
   });
 
-  const _excluded$e = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly"];
+  const _excluded$f = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly"];
   var _jsxFileName$t = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
   const Box = styled('div', {
     margin: 0,
@@ -6870,7 +6871,7 @@
       onSearch,
       readOnly
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
     const [item, setItem] = React__namespace.useState(option || []);
 
@@ -7661,6 +7662,7 @@
     disabled: false
   };
 
+  const _excluded$e = ["children"];
   var _jsxFileName$q = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/popover/Popover.js";
   const PopoverContext = /*#__PURE__*/React.createContext();
   const Popover = ({
@@ -7699,7 +7701,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 41,
+        lineNumber: 42,
         columnNumber: 10
       }
     }, children);
@@ -7741,7 +7743,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 59,
+        lineNumber: 60,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", _extends({}, getFloatingProps({
@@ -7756,26 +7758,32 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 60,
+        lineNumber: 61,
         columnNumber: 7
       }
     }), children)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
   };
-  const PopoverClose = ({
-    children
-  }) => {
+  const PopoverClose = _ref => {
+    let {
+      children
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+
     const {
       setOpenState
     } = React.useContext(PopoverContext);
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      onClick: () => setOpenState(false),
+    return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({}, props, {
+      onClick: () => {
+        props.onClick();
+        setOpenState(false);
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$q,
-        lineNumber: 82,
-        columnNumber: 10
+        lineNumber: 84,
+        columnNumber: 5
       }
-    }, children);
+    }), children);
   };
   Popover.propTypes = {
     open: PropTypes__default["default"].bool,
@@ -8670,11 +8678,11 @@
         secondary: {
           backgroundColor: 'transparent',
           '&:hover': {
-            backgroundColor: '$bgGray',
+            backgroundColor: '$primary50',
             color: '$textGreen'
           },
           '&:active': {
-            backgroundColor: '$gray100'
+            backgroundColor: '$primary100'
           }
         }
       }
@@ -11344,8 +11352,16 @@
   const _excluded$5 = ["isActive", "onClick"];
   var _jsxFileName$d = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/pagination/PaginationButton.js";
   const PrevNextButton = styled(Text, {
+    padding: '$spacing-01',
     cursor: 'pointer',
     userSelect: 'none',
+    borderRadius: '$md',
+    '&:hover': {
+      backgroundColor: '$primary50'
+    },
+    '&:active': {
+      backgroundColor: '$primary100'
+    },
     variants: {
       isDisabled: {
         true: {
@@ -11376,7 +11392,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 23,
+        lineNumber: 31,
         columnNumber: 5
       }
     }));
@@ -11449,7 +11465,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 91,
+        lineNumber: 99,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11458,10 +11474,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 92,
+        lineNumber: 100,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+    }, currentPage > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(IconButton, {
       buttonType: "secondary",
       disabled: currentPage === 1,
       onClick: () => handleSelectPage(1),
@@ -11474,16 +11490,16 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 93,
-        columnNumber: 9
+        lineNumber: 103,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowLeftOutline, {
       color: currentPage === 1 ? colors.iconDisable : colors.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 102,
-        columnNumber: 11
+        lineNumber: 112,
+        columnNumber: 15
       }
     })), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
@@ -11493,10 +11509,10 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 104,
-        columnNumber: 9
+        lineNumber: 114,
+        columnNumber: 13
       }
-    }, "Sebelumnya"), generatePages().map((page, index) => {
+    }, "Sebelumnya")), generatePages().map((page, index) => {
       return /*#__PURE__*/React__default["default"].createElement(PageButton, {
         key: index.toString(),
         isActive: page === currentPage,
@@ -11504,11 +11520,11 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 114,
+          lineNumber: 126,
           columnNumber: 13
         }
       }, page);
-    }), /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
+    }), currentPage < totalPages && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(PrevNextButton, {
       variant: "caption",
       isDisabled: currentPage === totalPages,
       color: currentPage === totalPages ? 'disable' : 'primary',
@@ -11516,8 +11532,8 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 123,
-        columnNumber: 9
+        lineNumber: 137,
+        columnNumber: 13
       }
     }, "Selanjutnya"), /*#__PURE__*/React__default["default"].createElement(IconButton, {
       buttonType: "secondary",
@@ -11532,18 +11548,18 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 131,
-        columnNumber: 9
+        lineNumber: 145,
+        columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.ArrowRightOutline, {
       color: currentPage === totalPages ? colors.iconDisable : colors.iconPrimary,
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 140,
-        columnNumber: 11
+        lineNumber: 154,
+        columnNumber: 15
       }
-    }))), /*#__PURE__*/React__default["default"].createElement(Separator, {
+    })))), /*#__PURE__*/React__default["default"].createElement(Separator, {
       orientation: "vertical",
       css: {
         height: '100%',
@@ -11552,7 +11568,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 144,
+        lineNumber: 160,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -11564,7 +11580,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 146,
+        lineNumber: 162,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -11572,7 +11588,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 147,
+        lineNumber: 163,
         columnNumber: 9
       }
     }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputText, {
@@ -11596,7 +11612,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 148,
+        lineNumber: 164,
         columnNumber: 9
       }
     })));
@@ -11604,6 +11620,23 @@
 
   const _excluded$4 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
   var _jsxFileName$c = "/home/majoo-thariq/Majoonians/majoo-ui/packages/react/src/components/pagination/PaginationInfo.js";
+  const LimitContainer = styled(Flex$1, {
+    cursor: 'pointer'
+  });
+
+  const limitItemContainerStyle = selected => ({
+    justifyContent: 'center',
+    width: '100%',
+    padding: '$spacing-02',
+    cursor: 'pointer',
+    backgroundColor: selected ? '$primary100' : 'transparent',
+    '&:hover': {
+      backgroundColor: '$primary50'
+    },
+    '&:active': {
+      backgroundColor: '$primary100'
+    }
+  });
 
   function PaginationInfo(_ref) {
     let {
@@ -11621,7 +11654,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$c,
-        lineNumber: 10,
+        lineNumber: 28,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -11630,69 +11663,92 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$c,
-        lineNumber: 11,
+        lineNumber: 29,
         columnNumber: 7
       }
-    }, "Tampilkan:"), /*#__PURE__*/React__default["default"].createElement(Select$1, {
-      option: limits.map(item => ({
-        name: item.toString(),
-        value: item
-      })),
-      onChange: selectedItem => onChange(selectedItem.value),
-      value: {
-        name: selectedLimit.toString(),
-        value: selectedLimit
-      },
-      icon: /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
-        color: colors.iconSecondary,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$c,
-          lineNumber: 24,
-          columnNumber: 15
-        }
-      }),
+    }, "Tampilkan:"), /*#__PURE__*/React__default["default"].createElement(Popover, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 32,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 33,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(LimitContainer, {
+      align: "center",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 34,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Text, {
+      variant: "status",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 35,
+        columnNumber: 13
+      }
+    }, selectedLimit.toString()), /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
+      color: colors.gray400,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 36,
+        columnNumber: 13
+      }
+    }))), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
       placement: "top",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 39,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
+      direction: "column",
+      align: "center",
       css: {
-        display: 'flex',
-        justifyContent: 'center',
-        width: 'auto',
-        '& *': {
-          fontSize: '$label',
-          fontWeight: 600,
-          lineHeight: '$label'
-        },
-        '& [role=combobox], [type=button], [role=listbox], button': {
-          padding: 0,
-          height: 'auto',
-          width: 'auto',
-          margin: 0,
-          border: 'none'
-        },
-        '& [role=option]': {
-          padding: '4px 0px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        },
-        '& button': {
-          display: 'flex',
-          alignItems: 'center'
-        }
+        backgroundColor: '$white',
+        boxShadow: '$small'
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$c,
-        lineNumber: 14,
-        columnNumber: 7
+        lineNumber: 40,
+        columnNumber: 11
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Text, {
+    }, limits.map(limit => /*#__PURE__*/React__default["default"].createElement(PopoverClose, {
+      css: limitItemContainerStyle(selectedLimit === limit),
+      onClick: () => onChange(limit),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 49,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Text, {
+      variant: "status",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$c,
+        lineNumber: 50,
+        columnNumber: 17
+      }
+    }, limit.toString())))))), /*#__PURE__*/React__default["default"].createElement(Text, {
       color: "secondary",
       variant: "label",
       __self: this,
       __source: {
         fileName: _jsxFileName$c,
-        lineNumber: 54,
+        lineNumber: 56,
         columnNumber: 7
       }
     }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1}-${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
@@ -11722,7 +11778,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 13,
+        lineNumber: 12,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(PaginationInfo, {
@@ -11734,18 +11790,18 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 14,
+        lineNumber: 13,
         columnNumber: 7
       }
-    }), /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
+    }), totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
       currentPage: currentPage,
       totalPages: totalPages,
       onSelect: onPageChange,
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 21,
-        columnNumber: 7
+        lineNumber: 20,
+        columnNumber: 26
       }
     }));
   }
@@ -11824,28 +11880,28 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 74,
+        lineNumber: 71,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 75,
+        lineNumber: 72,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 76,
+        lineNumber: 73,
         columnNumber: 9
       }
     }, headerGroups.map(headerGroup => /*#__PURE__*/React__default["default"].createElement(TableHeadRow$1, _extends({}, headerGroup.getHeaderGroupProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 78,
+        lineNumber: 75,
         columnNumber: 13
       }
     }), headerGroup.headers.map(column => {
@@ -11854,14 +11910,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 82,
+          lineNumber: 79,
           columnNumber: 19
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 84,
+          lineNumber: 81,
           columnNumber: 23
         }
       }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
@@ -11870,7 +11926,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 86,
+          lineNumber: 83,
           columnNumber: 27
         }
       }, headerRender.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(icons.SortingOutline, {
@@ -11878,7 +11934,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 89,
+          lineNumber: 86,
           columnNumber: 27
         }
       }))) : headerRender);
@@ -11886,7 +11942,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 101,
+        lineNumber: 98,
         columnNumber: 9
       }
     }), page.map(row => {
@@ -11896,14 +11952,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 105,
+          lineNumber: 102,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableRow$1, _extends({}, row.getRowProps(), {
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 106,
+          lineNumber: 103,
           columnNumber: 17
         }
       }), row.cells.map(cell => {
@@ -11911,7 +11967,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$a,
-            lineNumber: 109,
+            lineNumber: 106,
             columnNumber: 23
           }
         }), cell.column.accessor ? /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11930,21 +11986,21 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$a,
-            lineNumber: 111,
+            lineNumber: 108,
             columnNumber: 27
           }
         }, cell.render('Cell'), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
           __self: this,
           __source: {
             fileName: _jsxFileName$a,
-            lineNumber: 125,
+            lineNumber: 122,
             columnNumber: 47
           }
         }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
           __self: this,
           __source: {
             fileName: _jsxFileName$a,
-            lineNumber: 125,
+            lineNumber: 122,
             columnNumber: 70
           }
         })) : cell.render('Cell'));
@@ -11952,7 +12008,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 135,
+          lineNumber: 132,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableCell$1, {
@@ -11960,7 +12016,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 136,
+          lineNumber: 133,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11968,7 +12024,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 137,
+          lineNumber: 134,
           columnNumber: 23
         }
       }, row.allCells.filter(cell => !cell.column.isMobileHeader && (cell.column.accessor || cell.column.id === 'menu')).map(cell => cell.column.accessor ? /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -11983,7 +12039,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 144,
+          lineNumber: 141,
           columnNumber: 31
         }
       }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -11992,7 +12048,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 154,
+          lineNumber: 151,
           columnNumber: 33
         }
       }, cell.column.Header.toUpperCase()), cell.render('Cell')) : /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -12005,7 +12061,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 160,
+          lineNumber: 157,
           columnNumber: 31
         }
       }, cell.render('Cell')))))) : null);
@@ -12013,14 +12069,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 180,
+        lineNumber: 177,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 181,
+        lineNumber: 178,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootCell, {
@@ -12028,7 +12084,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 182,
+        lineNumber: 179,
         columnNumber: 13
       }
     }, footer)))));
@@ -12077,14 +12133,18 @@
     size: '100%',
     minWidth: 0,
     '&::after': {
-      size: '16px',
-      content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`,
-      marginBottom: '2px',
-      opacity: 0
+      '@lg': {
+        size: '16px',
+        content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`,
+        marginBottom: '2px',
+        opacity: 0
+      }
     },
     '&:hover': {
       '&::after': {
-        opacity: 1
+        '@lg': {
+          opacity: 1
+        }
       }
     }
   });
@@ -12262,7 +12322,7 @@
         gotoPage(page - 1);
       },
       css: {
-        padding: '$spacing-04',
+        padding: '$spacing-04 0',
         '@md': {
           padding: '$spacing-06'
         }
@@ -12270,7 +12330,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 244,
+        lineNumber: 248,
         columnNumber: 5
       }
     });
@@ -12299,28 +12359,28 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 287,
+        lineNumber: 291,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 288,
+        lineNumber: 292,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 289,
+        lineNumber: 293,
         columnNumber: 9
       }
     }, headerGroups.map(headerGroup => /*#__PURE__*/React__default["default"].createElement(TableHeadRow, _extends({}, headerGroup.getHeaderGroupProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 291,
+        lineNumber: 295,
         columnNumber: 13
       }
     }), headerGroup.headers.filter(column => !column.isSubRow).map(column => {
@@ -12337,14 +12397,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 297,
+          lineNumber: 301,
           columnNumber: 21
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 311,
+          lineNumber: 317,
           columnNumber: 25
         }
       }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
@@ -12352,7 +12412,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 313,
+          lineNumber: 319,
           columnNumber: 29
         }
       }, headerRender.toUpperCase()))) : headerRender);
@@ -12360,7 +12420,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 328,
+        lineNumber: 334,
         columnNumber: 9
       }
     }), page.map((row, i) => {
@@ -12374,21 +12434,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 334,
+          lineNumber: 340,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableRow, _extends({}, row.getRowProps(), {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 335,
+          lineNumber: 341,
           columnNumber: 17
         }
       }), row.cells.filter(cell => !cell.column.isSubRow).map(cell => /*#__PURE__*/React__default["default"].createElement(TableCell, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 339,
+          lineNumber: 345,
           columnNumber: 23
         }
       }), cell.render('Cell')))), row.isExpanded ? subRowCells.map(cell => /*#__PURE__*/React__default["default"].createElement(TableRow, {
@@ -12397,7 +12457,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 346,
+          lineNumber: 352,
           columnNumber: 23
         }
       }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
@@ -12405,7 +12465,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 348,
+          lineNumber: 354,
           columnNumber: 27
         }
       })), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -12413,7 +12473,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 350,
+          lineNumber: 356,
           columnNumber: 25
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableCell, {
@@ -12422,7 +12482,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 351,
+          lineNumber: 357,
           columnNumber: 27
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -12430,7 +12490,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 352,
+          lineNumber: 358,
           columnNumber: 29
         }
       }, cell.column.Header)), /*#__PURE__*/React__default["default"].createElement(TableCell, {
@@ -12439,7 +12499,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 354,
+          lineNumber: 360,
           columnNumber: 27
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -12447,7 +12507,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 355,
+          lineNumber: 361,
           columnNumber: 29
         }
       }, cell.render('Cell')))))) : null);
@@ -12455,14 +12515,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 365,
+        lineNumber: 371,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 366,
+        lineNumber: 372,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableFootCell, {
@@ -12470,18 +12530,19 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 367,
+        lineNumber: 373,
         columnNumber: 13
       }
     }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       css: {
         padding: '$spacing-07'
       },
-      center: true,
+      align: "center",
+      justify: "center",
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 371,
+        lineNumber: 377,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -12490,7 +12551,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 377,
+        lineNumber: 384,
         columnNumber: 19
       }
     }, "Tidak ada data"))))))) : /*#__PURE__*/React__default["default"].createElement(MobileTable, {
@@ -12500,7 +12561,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 388,
+        lineNumber: 395,
         columnNumber: 5
       }
     });
@@ -14094,7 +14155,7 @@
       padding: '0',
       backgroundColor: '$bgGray'
     },
-    '@2xl': {
+    '@3xl': {
       maxWidth: '1206px !important'
     },
     variants: {