@majoo-ui/react 1.36.0 → 1.36.1

package/index.esm.js

@@ -1106,7 +1106,8 @@ const {
     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 => ({
@@ -2173,7 +2174,7 @@ Flex$1.defaultProps = {
 };
 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', {
@@ -2349,7 +2350,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2646,7 +2647,7 @@ Paragraph.defaultProps = {
 
 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',
@@ -2870,7 +2871,7 @@ const Button$1 = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     rightIcon,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return /*#__PURE__*/React__default.createElement(ButtonComponent, _extends({
     className: className,
@@ -2988,7 +2989,7 @@ Link.defaultProps = {
   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;
@@ -3154,7 +3155,7 @@ const Toast = _ref => {
     captionOfAction,
     hrefOfAction
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -3405,7 +3406,7 @@ const ToastContainer = ({
   })));
 };
 
-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;
 
@@ -3418,7 +3419,7 @@ const ToastProvider = ({
     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;
@@ -3582,7 +3583,7 @@ styled(Flex$1, {
   onRemove: PropTypes.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',
@@ -3720,7 +3721,7 @@ const Card = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -3817,7 +3818,7 @@ function __rest(s, e) {
     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',
@@ -3875,7 +3876,7 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
@@ -4094,7 +4095,7 @@ Badge.defaultProps = {
 
 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.Root, {
   width: '32px',
@@ -4139,7 +4140,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4197,7 +4198,7 @@ Avatar.defaultProps = {
   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',
@@ -4221,7 +4222,7 @@ function Image(_ref) {
     objectFit,
     fallback
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
     className: className,
@@ -4256,7 +4257,7 @@ Image.defaultProps = {
   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%': {
@@ -4362,7 +4363,7 @@ const Tooltip = _ref => {
     color,
     withClick
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
@@ -4418,7 +4419,7 @@ Tooltip.defaultProps = {
   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 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
@@ -4537,7 +4538,7 @@ function Progress(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress, _extends({
     className: className,
@@ -4589,7 +4590,7 @@ Progress.defaultProps = {
   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 => {
@@ -4598,7 +4599,7 @@ const FormGroup = _ref => {
     direction,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: direction,
@@ -4623,7 +4624,7 @@ FormGroup.defaultProps = {
   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.Root, Text, {
   display: 'inline-block',
@@ -4656,7 +4657,7 @@ const FormLabel = _ref => {
     maxCount,
     labelCss
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
@@ -4737,7 +4738,7 @@ FormLabel.propTypes = {
 };
 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',
@@ -4756,7 +4757,7 @@ const FormHelper = _ref => {
     children,
     error
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
@@ -4872,7 +4873,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   }
 }));
 
-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.Indicator, {
   alignItems: 'center',
@@ -4930,7 +4931,7 @@ const Checkbox = _ref => {
     disabled,
     onCheckedChange
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({
     id: id,
@@ -5021,7 +5022,7 @@ InputCheckbox.propTypes = {
 };
 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',
@@ -5135,7 +5136,7 @@ const InputGroup = _ref => {
     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');
@@ -5472,7 +5473,7 @@ InputRadioGroup.propTypes = {
 };
 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',
@@ -5550,7 +5551,7 @@ const InputRadio = _ref => {
     id,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     align: "center",
@@ -5634,7 +5635,7 @@ InputRightElement.propTypes = {
 };
 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',
@@ -5711,7 +5712,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     leftIcon,
     rightIcon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   return /*#__PURE__*/React__default.createElement(TagComponent, _extends({
     ref: ref,
@@ -5756,7 +5757,7 @@ Tag.defaultProps = {
   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',
@@ -5876,7 +5877,7 @@ function TagsInput(_ref) {
     readOnly,
     max
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
   const [tags, setTags] = React__default.useState(value || []);
 
@@ -5977,7 +5978,7 @@ TagsInput.defaultProps = {
   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.Thumb, {
   display: 'block',
@@ -6050,7 +6051,7 @@ const InputSwitch = _ref => {
     dataOffLabel,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
   return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({
     defaultChecked: defaultChecked,
@@ -6189,7 +6190,7 @@ SvgSearchOutline.defaultProps = {
   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 => {
@@ -6197,7 +6198,7 @@ const InputSearchbox = _ref => {
     size,
     onChange
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   const [value, setValue] = React__default.useState('');
   const handleChange = React__default.useCallback(e => {
@@ -6626,7 +6627,7 @@ fixRegExpWellKnownSymbolLogic$2('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-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,
@@ -6845,7 +6846,7 @@ function Select$1(_ref) {
     onSearch,
     readOnly
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   const [item, setItem] = React.useState(option || []);
 
@@ -7636,6 +7637,7 @@ SelectTag.defaultProps = {
   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__*/createContext();
 const Popover = ({
@@ -7674,7 +7676,7 @@ const Popover = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 41,
+      lineNumber: 42,
       columnNumber: 10
     }
   }, children);
@@ -7716,7 +7718,7 @@ const PopoverContent = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 59,
+      lineNumber: 60,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement("div", _extends({}, getFloatingProps({
@@ -7731,26 +7733,32 @@ const PopoverContent = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$q,
-      lineNumber: 60,
+      lineNumber: 61,
       columnNumber: 7
     }
   }), children)) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
-const PopoverClose = ({
-  children
-}) => {
+const PopoverClose = _ref => {
+  let {
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+
   const {
     setOpenState
   } = useContext(PopoverContext);
-  return /*#__PURE__*/React__default.createElement("div", {
-    onClick: () => setOpenState(false),
+  return /*#__PURE__*/React__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.bool,
@@ -8645,11 +8653,11 @@ const IconButton = styled('button', {
       secondary: {
         backgroundColor: 'transparent',
         '&:hover': {
-          backgroundColor: '$bgGray',
+          backgroundColor: '$primary50',
           color: '$textGreen'
         },
         '&:active': {
-          backgroundColor: '$gray100'
+          backgroundColor: '$primary100'
         }
       }
     }
@@ -11319,8 +11327,16 @@ if (NOT_GENERIC || INCORRECT_NAME) {
 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: {
@@ -11351,7 +11367,7 @@ const PageButton = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 23,
+      lineNumber: 31,
       columnNumber: 5
     }
   }));
@@ -11424,7 +11440,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 91,
+      lineNumber: 99,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11433,10 +11449,10 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 92,
+      lineNumber: 100,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React__default.createElement(IconButton, {
+  }, currentPage > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     buttonType: "secondary",
     disabled: currentPage === 1,
     onClick: () => handleSelectPage(1),
@@ -11449,16 +11465,16 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 93,
-      columnNumber: 9
+      lineNumber: 103,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(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.createElement(PrevNextButton, {
     variant: "caption",
@@ -11468,10 +11484,10 @@ const PaginationButton = ({
     __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.createElement(PageButton, {
       key: index.toString(),
       isActive: page === currentPage,
@@ -11479,11 +11495,11 @@ const PaginationButton = ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 114,
+        lineNumber: 126,
         columnNumber: 13
       }
     }, page);
-  }), /*#__PURE__*/React__default.createElement(PrevNextButton, {
+  }), currentPage < totalPages && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PrevNextButton, {
     variant: "caption",
     isDisabled: currentPage === totalPages,
     color: currentPage === totalPages ? 'disable' : 'primary',
@@ -11491,8 +11507,8 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 123,
-      columnNumber: 9
+      lineNumber: 137,
+      columnNumber: 13
     }
   }, "Selanjutnya"), /*#__PURE__*/React__default.createElement(IconButton, {
     buttonType: "secondary",
@@ -11507,18 +11523,18 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 131,
-      columnNumber: 9
+      lineNumber: 145,
+      columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(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.createElement(Separator, {
+  })))), /*#__PURE__*/React__default.createElement(Separator, {
     orientation: "vertical",
     css: {
       height: '100%',
@@ -11527,7 +11543,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 144,
+      lineNumber: 160,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(Box$1, {
@@ -11539,7 +11555,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 146,
+      lineNumber: 162,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Text, {
@@ -11547,7 +11563,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 147,
+      lineNumber: 163,
       columnNumber: 9
     }
   }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputText, {
@@ -11571,7 +11587,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$d,
-      lineNumber: 148,
+      lineNumber: 164,
       columnNumber: 9
     }
   })));
@@ -11579,6 +11595,23 @@ const PaginationButton = ({
 
 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 {
@@ -11596,7 +11629,7 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$c,
-      lineNumber: 10,
+      lineNumber: 28,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Text, {
@@ -11605,69 +11638,92 @@ function PaginationInfo(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$c,
-      lineNumber: 11,
+      lineNumber: 29,
       columnNumber: 7
     }
-  }, "Tampilkan:"), /*#__PURE__*/React__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.createElement(ChevronDownOutline, {
-      color: colors.iconSecondary,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 24,
-        columnNumber: 15
-      }
-    }),
+  }, "Tampilkan:"), /*#__PURE__*/React__default.createElement(Popover, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 32,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 33,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(LimitContainer, {
+    align: "center",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 34,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    variant: "status",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 35,
+      columnNumber: 13
+    }
+  }, selectedLimit.toString()), /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+    color: colors.gray400,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 36,
+      columnNumber: 13
+    }
+  }))), /*#__PURE__*/React__default.createElement(PopoverContent, {
     placement: "top",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 39,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__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.createElement(Text, {
+  }, limits.map(limit => /*#__PURE__*/React__default.createElement(PopoverClose, {
+    css: limitItemContainerStyle(selectedLimit === limit),
+    onClick: () => onChange(limit),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 49,
+      columnNumber: 15
+    }
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    variant: "status",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$c,
+      lineNumber: 50,
+      columnNumber: 17
+    }
+  }, limit.toString())))))), /*#__PURE__*/React__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`));
@@ -11697,7 +11753,7 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 13,
+      lineNumber: 12,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(PaginationInfo, {
@@ -11709,18 +11765,18 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 14,
+      lineNumber: 13,
       columnNumber: 7
     }
-  }), /*#__PURE__*/React__default.createElement(PaginationButton, {
+  }), totalPages > 1 && /*#__PURE__*/React__default.createElement(PaginationButton, {
     currentPage: currentPage,
     totalPages: totalPages,
     onSelect: onPageChange,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 21,
-      columnNumber: 7
+      lineNumber: 20,
+      columnNumber: 26
     }
   }));
 }
@@ -11799,28 +11855,28 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 74,
+      lineNumber: 71,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 75,
+      lineNumber: 72,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(TableHead, {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 76,
+      lineNumber: 73,
       columnNumber: 9
     }
   }, headerGroups.map(headerGroup => /*#__PURE__*/React__default.createElement(TableHeadRow$1, _extends({}, headerGroup.getHeaderGroupProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 78,
+      lineNumber: 75,
       columnNumber: 13
     }
   }), headerGroup.headers.map(column => {
@@ -11829,14 +11885,14 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 82,
+        lineNumber: 79,
         columnNumber: 19
       }
     }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 84,
+        lineNumber: 81,
         columnNumber: 23
       }
     }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
@@ -11845,7 +11901,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 86,
+        lineNumber: 83,
         columnNumber: 27
       }
     }, headerRender.toUpperCase()), /*#__PURE__*/React__default.createElement(SortingOutline, {
@@ -11853,7 +11909,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 89,
+        lineNumber: 86,
         columnNumber: 27
       }
     }))) : headerRender);
@@ -11861,7 +11917,7 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 101,
+      lineNumber: 98,
       columnNumber: 9
     }
   }), page.map(row => {
@@ -11871,14 +11927,14 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 105,
+        lineNumber: 102,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(TableRow$1, _extends({}, row.getRowProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 106,
+        lineNumber: 103,
         columnNumber: 17
       }
     }), row.cells.map(cell => {
@@ -11886,7 +11942,7 @@ function MobileTable({
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 109,
+          lineNumber: 106,
           columnNumber: 23
         }
       }), cell.column.accessor ? /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11905,21 +11961,21 @@ function MobileTable({
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 111,
+          lineNumber: 108,
           columnNumber: 27
         }
       }, cell.render('Cell'), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 125,
+          lineNumber: 122,
           columnNumber: 47
         }
       }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$a,
-          lineNumber: 125,
+          lineNumber: 122,
           columnNumber: 70
         }
       })) : cell.render('Cell'));
@@ -11927,7 +11983,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 135,
+        lineNumber: 132,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(TableCell$1, {
@@ -11935,7 +11991,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 136,
+        lineNumber: 133,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11943,7 +11999,7 @@ function MobileTable({
       __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.createElement(Flex$1, {
@@ -11958,7 +12014,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 144,
+        lineNumber: 141,
         columnNumber: 31
       }
     }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -11967,7 +12023,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 154,
+        lineNumber: 151,
         columnNumber: 33
       }
     }, cell.column.Header.toUpperCase()), cell.render('Cell')) : /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -11980,7 +12036,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 160,
+        lineNumber: 157,
         columnNumber: 31
       }
     }, cell.render('Cell')))))) : null);
@@ -11988,14 +12044,14 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 180,
+      lineNumber: 177,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(TableFootRow, {
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 181,
+      lineNumber: 178,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(TableFootCell, {
@@ -12003,7 +12059,7 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 182,
+      lineNumber: 179,
       columnNumber: 13
     }
   }, footer)))));
@@ -12052,14 +12108,18 @@ const TableHeaderCellContainer = styled(Flex$1, {
   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
+      }
     }
   }
 });
@@ -12237,7 +12297,7 @@ function Table({
       gotoPage(page - 1);
     },
     css: {
-      padding: '$spacing-04',
+      padding: '$spacing-04 0',
       '@md': {
         padding: '$spacing-06'
       }
@@ -12245,7 +12305,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 244,
+      lineNumber: 248,
       columnNumber: 5
     }
   });
@@ -12274,28 +12334,28 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 287,
+      lineNumber: 291,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 288,
+      lineNumber: 292,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(TableHead, {
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 289,
+      lineNumber: 293,
       columnNumber: 9
     }
   }, headerGroups.map(headerGroup => /*#__PURE__*/React__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 => {
@@ -12312,14 +12372,14 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 297,
+        lineNumber: 301,
         columnNumber: 21
       }
     }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 311,
+        lineNumber: 317,
         columnNumber: 25
       }
     }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
@@ -12327,7 +12387,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 313,
+        lineNumber: 319,
         columnNumber: 29
       }
     }, headerRender.toUpperCase()))) : headerRender);
@@ -12335,7 +12395,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 328,
+      lineNumber: 334,
       columnNumber: 9
     }
   }), page.map((row, i) => {
@@ -12349,21 +12409,21 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 334,
+        lineNumber: 340,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__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.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.createElement(TableRow, {
@@ -12372,7 +12432,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 346,
+        lineNumber: 352,
         columnNumber: 23
       }
     }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default.createElement("td", {
@@ -12380,7 +12440,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 348,
+        lineNumber: 354,
         columnNumber: 27
       }
     })), /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -12388,7 +12448,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 350,
+        lineNumber: 356,
         columnNumber: 25
       }
     }, /*#__PURE__*/React__default.createElement(TableCell, {
@@ -12397,7 +12457,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 351,
+        lineNumber: 357,
         columnNumber: 27
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -12405,7 +12465,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 352,
+        lineNumber: 358,
         columnNumber: 29
       }
     }, cell.column.Header)), /*#__PURE__*/React__default.createElement(TableCell, {
@@ -12414,7 +12474,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 354,
+        lineNumber: 360,
         columnNumber: 27
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -12422,7 +12482,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 355,
+        lineNumber: 361,
         columnNumber: 29
       }
     }, cell.render('Cell')))))) : null);
@@ -12430,14 +12490,14 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 365,
+      lineNumber: 371,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(TableFootRow, {
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 366,
+      lineNumber: 372,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(TableFootCell, {
@@ -12445,18 +12505,19 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 367,
+      lineNumber: 373,
       columnNumber: 13
     }
   }, totalData > 0 || isLoading ? renderFooter() : /*#__PURE__*/React__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.createElement(Paragraph, {
@@ -12465,7 +12526,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 377,
+      lineNumber: 384,
       columnNumber: 19
     }
   }, "Tidak ada data"))))))) : /*#__PURE__*/React__default.createElement(MobileTable, {
@@ -12475,7 +12536,7 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 388,
+      lineNumber: 395,
       columnNumber: 5
     }
   });
@@ -14069,7 +14130,7 @@ const StyledDiv = styled('div', {
     padding: '0',
     backgroundColor: '$bgGray'
   },
-  '@2xl': {
+  '@3xl': {
     maxWidth: '1206px !important'
   },
   variants: {