@majoo-ui/react 1.28.0 → 1.29.2

package/index.esm.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import React__default, { createContext, useState, useContext, useEffect, useReducer } from 'react';
+import React__default, { createContext, useState, useContext, useEffect, useReducer, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
 import { Portal } from '@majoo-ui/helpers';
 import { Transition } from 'react-transition-group';
 import * as MajooIcons from '@majoo-ui/icons';
-import { UserFilled, CircleQuestionOutline, CloseOutline, CaretDownOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, CalendarOutline, SortingOutline, EllipsisHorizontalOutline } from '@majoo-ui/icons';
+import { UserFilled, CircleQuestionOutline, CloseOutline, CaretDownOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, CalendarOutline, DoubleChevronLeftOutline, DoubleChevronRightOutline, SortingOutline, EllipsisHorizontalOutline } from '@majoo-ui/icons';
 import { jsx } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -25,10 +25,11 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
 import 'react-dom';
-import { useTable, useSortBy, useExpanded, useRowSelect } from 'react-table';
+import { useTable, useSortBy, useExpanded, usePagination, useRowSelect } from 'react-table';
 import moment from 'moment';
+import debounce from 'lodash.debounce';
 
-var _jsxFileName$N = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
+var _jsxFileName$Q = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
 function ThemeProvider({
   theme,
@@ -38,7 +39,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$Q,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -1867,8 +1868,8 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-const _excluded$s = ["className", "children", "color", "textColor", "padding"];
-var _jsxFileName$M = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/box/Box.js";
+const _excluded$v = ["className", "children", "color", "textColor", "padding"];
+var _jsxFileName$P = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\box\\Box.js";
 const BoxComponent = styled('div', {
   height: 'auto',
   background: 'none',
@@ -1882,7 +1883,7 @@ const Box$1 = _ref => {
     textColor,
     padding
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
   return /*#__PURE__*/React__default.createElement(BoxComponent, _extends({
     className: className
@@ -1894,7 +1895,7 @@ const Box$1 = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$P,
       lineNumber: 12,
       columnNumber: 3
     }
@@ -2042,9 +2043,9 @@ Flex.defaultProps = {
 };
 Flex.displayName = 'Flex';
 
-const _excluded$r = ["children"],
+const _excluded$u = ["children"],
       _excluded2$3 = ["children"];
-var _jsxFileName$L = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/grid/Grid.js";
+var _jsxFileName$O = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
 const GridComponent = styled('div', {
   display: 'grid',
   variants: {
@@ -2218,7 +2219,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2229,7 +2230,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$O,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2285,7 +2286,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$O,
       lineNumber: 230,
       columnNumber: 5
     }
@@ -2302,8 +2303,8 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$q = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
-var _jsxFileName$K = "/home/omegalord666/work/majoo-ui/packages/react/src/components/button/Button.js";
+const _excluded$t = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
+var _jsxFileName$N = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\button\\Button.js";
 const ButtonPrimary = {
   backgroundColor: '$btnPrimary',
   color: '$textWhite',
@@ -2525,7 +2526,7 @@ function Button$1(_ref) {
     rightIcon,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(ButtonComponent, _extends({
     className: className,
@@ -2542,28 +2543,28 @@ function Button$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$N,
       lineNumber: 240,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$N,
       lineNumber: 251,
       columnNumber: 33
     }
   }, leftIcon) : null, icon ? /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$N,
       lineNumber: 252,
       columnNumber: 15
     }
   }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$N,
       lineNumber: 253,
       columnNumber: 34
     }
@@ -2589,8 +2590,8 @@ Button$1.defaultProps = {
   icon: false
 };
 
-const _excluded$p = ["id", "message", "dismissAfter", "variant", "onAction", "actionText", "onRemove"];
-var _jsxFileName$J = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/Toast.js";
+const _excluded$s = ["id", "message", "dismissAfter", "variant", "onAction", "actionText", "onRemove"];
+var _jsxFileName$M = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
 const TOAST_WIDTH = 360;
 const ANIMATION_DURATION = 400; // export interface ToastProps extends Omit<ToastSettings, 'status'>, BoxProps {
 //   variant?: ToastVariants;
@@ -2697,7 +2698,7 @@ const Toast = _ref => {
     actionText,
     onRemove
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -2726,7 +2727,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$M,
       lineNumber: 133,
       columnNumber: 5
     }
@@ -2736,7 +2737,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$M,
       lineNumber: 144,
       columnNumber: 9
     }
@@ -2744,7 +2745,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$M,
       lineNumber: 145,
       columnNumber: 11
     }
@@ -2755,14 +2756,14 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$M,
       lineNumber: 146,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement(Text$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$M,
       lineNumber: 152,
       columnNumber: 15
     }
@@ -2772,7 +2773,7 @@ const Toast = _ref => {
     css: {},
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$M,
       lineNumber: 155,
       columnNumber: 15
     }
@@ -2787,7 +2788,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$M,
       lineNumber: 157,
       columnNumber: 17
     }
@@ -2810,7 +2811,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$I = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+var _jsxFileName$L = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
 const ToastBox = styled(Box$1, {
   display: 'block',
   position: 'fixed',
@@ -2827,7 +2828,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$L,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -2835,7 +2836,7 @@ const ToastContainer = ({
     padding: 0,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$L,
       lineNumber: 20,
       columnNumber: 7
     }
@@ -2847,7 +2848,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$L,
         lineNumber: 24,
         columnNumber: 13
       }
@@ -2855,8 +2856,8 @@ const ToastContainer = ({
   })));
 };
 
-const _excluded$o = ["id"];
-var _jsxFileName$H = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
+const _excluded$r = ["id"];
+var _jsxFileName$K = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
 let toastCount = 0;
 
 const ToastProvider = ({
@@ -2868,7 +2869,7 @@ const ToastProvider = ({
     const {
       id
     } = toast,
-          rest = _objectWithoutPropertiesLoose(toast, _excluded$o); // eslint-disable-next-line no-plusplus
+          rest = _objectWithoutPropertiesLoose(toast, _excluded$r); // eslint-disable-next-line no-plusplus
 
 
     const uniqueId = ++toastCount;
@@ -2893,7 +2894,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$K,
       lineNumber: 40,
       columnNumber: 5
     }
@@ -2901,14 +2902,14 @@ const ToastProvider = ({
     toasts: toasts,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$K,
       lineNumber: 42,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$G = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
+var _jsxFileName$J = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
 
 function MajooProvider({
   children,
@@ -2921,14 +2922,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$J,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$J,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -2942,7 +2943,7 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-var _jsxFileName$F = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/AlertProvider.js";
+var _jsxFileName$I = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\alert\\AlertProvider.js";
 const StatusContext = /*#__PURE__*/createContext();
 
 const AlertProvider = ({
@@ -2959,14 +2960,14 @@ const AlertProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$I,
       lineNumber: 9,
       columnNumber: 5
     }
   }, children);
 };
 
-var _jsxFileName$E = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/Alert.js";
+var _jsxFileName$H = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\alert\\Alert.js";
 const AlertStyle = styled('div', {
   backgroundColor: 'white',
   borderWidth: 0,
@@ -3107,14 +3108,14 @@ const AlertBase = props => {
   return /*#__PURE__*/React__default.createElement(AlertProvider, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$H,
       lineNumber: 163,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(AlertContent, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$H,
       lineNumber: 164,
       columnNumber: 7
     }
@@ -3132,7 +3133,7 @@ const AlertContent = props => {
   return /*#__PURE__*/React__default.createElement(AlertStyle, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$H,
       lineNumber: 175,
       columnNumber: 10
     }
@@ -3156,7 +3157,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$E,
+            fileName: _jsxFileName$H,
             lineNumber: 184,
             columnNumber: 16
           }
@@ -3167,7 +3168,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : ' #DF2A36',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$E,
+            fileName: _jsxFileName$H,
             lineNumber: 186,
             columnNumber: 16
           }
@@ -3178,7 +3179,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#0197F4',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$E,
+            fileName: _jsxFileName$H,
             lineNumber: 188,
             columnNumber: 16
           }
@@ -3189,7 +3190,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : ' #FE7F2D',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$E,
+            fileName: _jsxFileName$H,
             lineNumber: 190,
             columnNumber: 16
           }
@@ -3200,7 +3201,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$E,
+            fileName: _jsxFileName$H,
             lineNumber: 192,
             columnNumber: 16
           }
@@ -3211,7 +3212,7 @@ const AlertIconBase = props => {
   return /*#__PURE__*/React__default.createElement(AlertIconStyle, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$H,
       lineNumber: 195,
       columnNumber: 10
     }
@@ -3235,8 +3236,8 @@ const Alert = props => {
 AlertDescription.displayName = 'AlertDescription';
 AlertTitle.displayName = 'AlertTitle';
 
-const _excluded$n = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-var _jsxFileName$D = "/home/omegalord666/work/majoo-ui/packages/react/src/components/card/Card.js";
+const _excluded$q = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
+var _jsxFileName$G = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
 const CardComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -3374,7 +3375,7 @@ const Card = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -3387,7 +3388,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$G,
       lineNumber: 104,
       columnNumber: 5
     }
@@ -3395,14 +3396,14 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$G,
       lineNumber: 115,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$G,
       lineNumber: 119,
       columnNumber: 13
     }
@@ -3411,14 +3412,14 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$G,
       lineNumber: 120,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$G,
       lineNumber: 126,
       columnNumber: 13
     }
@@ -3686,8 +3687,8 @@ function __rest(s, e) {
     return t;
 }
 
-const _excluded$m = ["children"];
-var _jsxFileName$C = "/home/omegalord666/work/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
+const _excluded$p = ["children"];
+var _jsxFileName$F = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
 const BreadcrumbStyle = styled('nav', {
   wordWrap: 'break-word',
   '& li+li:before': {
@@ -3733,7 +3734,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$F,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -3744,20 +3745,20 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$F,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$F,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -3963,8 +3964,8 @@ Badge.defaultProps = {
 
 Badge.displayName = 'Badge';
 
-const _excluded$l = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-var _jsxFileName$B = "/home/omegalord666/work/majoo-ui/packages/react/src/components/avatar/Avatar.js";
+const _excluded$o = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+var _jsxFileName$E = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -4008,7 +4009,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4017,7 +4018,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4027,7 +4028,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4035,21 +4036,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 48,
       columnNumber: 7
     }
   }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4066,8 +4067,8 @@ Avatar.defaultProps = {
   delayMs: 0
 };
 
-const _excluded$k = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-var _jsxFileName$A = "/home/omegalord666/work/majoo-ui/packages/react/src/components/image/Image.js";
+const _excluded$n = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
+var _jsxFileName$D = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
 const StyledImage = styled('img', {
   display: 'inline-block',
   alignItems: 'center',
@@ -4090,7 +4091,7 @@ function Image(_ref) {
     objectFit,
     fallback
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
     className: className,
@@ -4105,7 +4106,7 @@ function Image(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$A,
+      fileName: _jsxFileName$D,
       lineNumber: 20,
       columnNumber: 9
     }
@@ -4125,8 +4126,8 @@ Image.defaultProps = {
   rounded: false
 };
 
-const _excluded$j = ["children", "label", "color", "contentCss", "withClick"];
-var _jsxFileName$z = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
+const _excluded$m = ["children", "label", "color", "contentCss", "withClick"];
+var _jsxFileName$C = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
 const slideUpAndFade$1 = keyframes({
   '0%': {
     opacity: 0,
@@ -4231,14 +4232,14 @@ const Tooltip = _ref => {
     color,
     withClick
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$C,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4246,7 +4247,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$C,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4254,7 +4255,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$C,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4263,7 +4264,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? dark : ligth,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$C,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4271,7 +4272,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$C,
       lineNumber: 95,
       columnNumber: 9
     }
@@ -4287,8 +4288,8 @@ Tooltip.defaultProps = {
   color: 'light'
 };
 
-const _excluded$i = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$y = "/home/omegalord666/work/majoo-ui/packages/react/src/components/progress/Progress.js";
+const _excluded$l = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+var _jsxFileName$B = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
 const StyledProgress = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -4406,7 +4407,7 @@ function Progress(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress, _extends({
     className: className,
@@ -4422,7 +4423,7 @@ function Progress(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$B,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -4435,7 +4436,7 @@ function Progress(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$B,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -4458,8 +4459,8 @@ Progress.defaultProps = {
   rounded: true
 };
 
-const _excluded$h = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount"];
-var _jsxFileName$x = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+const _excluded$k = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount"];
+var _jsxFileName$A = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
 const StyledLabel = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -4490,13 +4491,13 @@ const FormLabel = _ref => {
     count,
     maxCount
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   return /*#__PURE__*/React__default.createElement(Flex, {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$A,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -4506,7 +4507,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$A,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -4515,7 +4516,7 @@ const FormLabel = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$A,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -4530,7 +4531,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$A,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -4538,14 +4539,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$A,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$A,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -4554,7 +4555,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$A,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -4570,8 +4571,8 @@ FormLabel.propTypes = {
 };
 FormLabel.displayName = 'FormLabel';
 
-const _excluded$g = ["children", "error"];
-var _jsxFileName$w = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+const _excluded$j = ["children", "error"];
+var _jsxFileName$z = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
 const StyledHelper = styled(Text$1, {
   display: 'inline-block',
   color: '$textSecondary',
@@ -4589,7 +4590,7 @@ const FormHelper = _ref => {
     children,
     error
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
@@ -4597,7 +4598,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$z,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -4609,7 +4610,7 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$v = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
+var _jsxFileName$y = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
 
 const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -4627,7 +4628,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$v,
+    fileName: _jsxFileName$y,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -4639,7 +4640,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$v,
+    fileName: _jsxFileName$y,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -4651,13 +4652,13 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$v,
+    fileName: _jsxFileName$y,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-var _jsxFileName$u = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
+var _jsxFileName$x = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
 
 const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -4675,7 +4676,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$u,
+    fileName: _jsxFileName$x,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -4687,7 +4688,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$u,
+    fileName: _jsxFileName$x,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -4699,14 +4700,14 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   d: "M14.31 10.41H3.9v-2.6h10.41z",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$u,
+    fileName: _jsxFileName$x,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-const _excluded$f = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label"];
-var _jsxFileName$t = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
+const _excluded$i = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label"];
+var _jsxFileName$w = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
 const StyledIndicator$1 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -4763,7 +4764,7 @@ const Checkbox = _ref => {
     disabled,
     onCheckedChange
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
   return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({
     id: id,
@@ -4773,28 +4774,28 @@ const Checkbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 56,
       columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 63,
       columnNumber: 5
     }
   }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 63,
       columnNumber: 39
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 63,
       columnNumber: 58
     }
@@ -4808,14 +4809,14 @@ const InputCheckbox = _ref2 => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 69,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 70,
       columnNumber: 7
     }
@@ -4831,14 +4832,14 @@ const InputCheckbox = _ref2 => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 71,
       columnNumber: 7
     }
   }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 86,
       columnNumber: 5
     }
@@ -4854,8 +4855,8 @@ InputCheckbox.propTypes = {
 };
 InputCheckbox.displayName = 'InputCheckbox';
 
-const _excluded$e = ["children", "size"];
-var _jsxFileName$s = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
+const _excluded$h = ["children", "size"];
+var _jsxFileName$v = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -4968,7 +4969,7 @@ const InputGroup = _ref => {
     children,
     size = 'lg'
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
   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');
@@ -4992,7 +4993,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$v,
       lineNumber: 143,
       columnNumber: 10
     }
@@ -5246,6 +5247,17 @@ const InputText = styled('input', {
           border: '1px solid $colors$red400'
         }
       }
+    },
+    isDatePicker: {
+      true: {
+        fontSize: '$placeholder',
+        letterSpacing: '$placeholder',
+        lineHeight: '$placeholder',
+        fontVariantNumeric: 'unset',
+        caretColor: 'transparent',
+        cursor: 'pointer',
+        padding: '0'
+      }
     }
   },
   defaultVariants: {
@@ -5294,8 +5306,8 @@ InputRadioGroup.propTypes = {
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
-const _excluded$d = ["id", "disabled"];
-var _jsxFileName$r = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
+const _excluded$g = ["id", "disabled"];
+var _jsxFileName$u = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
@@ -5372,14 +5384,14 @@ const InputRadio = _ref => {
     id,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   return /*#__PURE__*/React__default.createElement(Flex, {
     align: "start",
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 82,
       columnNumber: 3
     }
@@ -5389,14 +5401,14 @@ const InputRadio = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 83,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 84,
       columnNumber: 7
     }
@@ -5413,7 +5425,7 @@ const InputRadio = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 86,
       columnNumber: 5
     }
@@ -5456,8 +5468,8 @@ InputRightElement.propTypes = {
 };
 InputRightElement.name = 'InputRightElement';
 
-const _excluded$c = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
-var _jsxFileName$q = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tag/Tag.js";
+const _excluded$f = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
+var _jsxFileName$t = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
 const TagComponent = styled('span', {
   boxSizing: 'border-box',
   color: '$white',
@@ -5533,7 +5545,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     leftIcon,
     rightIcon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   return /*#__PURE__*/React__default.createElement(TagComponent, _extends({
     ref: ref,
@@ -5545,21 +5557,21 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$t,
       lineNumber: 54,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$t,
       lineNumber: 63,
       columnNumber: 33
     }
   }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$t,
       lineNumber: 65,
       columnNumber: 34
     }
@@ -5578,8 +5590,8 @@ Tag.defaultProps = {
   size: 'sm'
 };
 
-const _excluded$b = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
-var _jsxFileName$p = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
+const _excluded$e = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
+var _jsxFileName$s = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
 const InputTagsComponent = styled('div', {
   display: 'flex',
   position: 'relative',
@@ -5698,7 +5710,7 @@ function TagsInput(_ref) {
     readOnly,
     max
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   const [tags, setTags] = React__default.useState(value || []);
 
@@ -5728,14 +5740,14 @@ function TagsInput(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 129,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(TagContainer, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 139,
       columnNumber: 7
     }
@@ -5746,7 +5758,7 @@ function TagsInput(_ref) {
       size: 10,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 144,
         columnNumber: 24
       }
@@ -5760,7 +5772,7 @@ function TagsInput(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 141,
       columnNumber: 11
     }
@@ -5774,7 +5786,7 @@ function TagsInput(_ref) {
     readOnly: readOnly,
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 157,
       columnNumber: 7
     }
@@ -5799,8 +5811,8 @@ TagsInput.defaultProps = {
   readOnly: false
 };
 
-const _excluded$a = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-var _jsxFileName$o = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
+const _excluded$d = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
+var _jsxFileName$r = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
 const StyledThumb$1 = styled(SwitchPrimitive.Thumb, {
   display: 'block',
   width: '16px',
@@ -5872,7 +5884,7 @@ const InputSwitch = _ref => {
     dataOffLabel,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({
     defaultChecked: defaultChecked,
@@ -5883,14 +5895,14 @@ const InputSwitch = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$o,
+      fileName: _jsxFileName$r,
       lineNumber: 66,
       columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledThumb$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$o,
+      fileName: _jsxFileName$r,
       lineNumber: 74,
       columnNumber: 5
     }
@@ -5908,7 +5920,7 @@ InputSwitch.propTypes = {
 };
 InputSwitch.displayName = 'InputSwitch';
 
-var _jsxFileName$n = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+var _jsxFileName$q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\CloseFilled.js";
 
 const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends({
   width: props.size,
@@ -5918,7 +5930,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$n,
+    fileName: _jsxFileName$q,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5927,7 +5939,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   fill: "white",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$n,
+    fileName: _jsxFileName$q,
     lineNumber: 5,
     columnNumber: 5
   }
@@ -5937,7 +5949,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.54289 8.54289C8.93342 8.15237 9.56658 8.15237 9.95711 8.54289L12 10.5858L14.0429 8.54289C14.4334 8.15237 15.0666 8.15237 15.4571 8.54289C15.8476 8.93342 15.8476 9.56658 15.4571 9.95711L13.4142 12L15.4571 14.0429C15.8476 14.4334 15.8476 15.0666 15.4571 15.4571C15.0666 15.8476 14.4334 15.8476 14.0429 15.4571L12 13.4142L9.95711 15.4571C9.56658 15.8476 8.93342 15.8476 8.54289 15.4571C8.15237 15.0666 8.15237 14.4334 8.54289 14.0429L10.5858 12L8.54289 9.95711C8.15237 9.56658 8.15237 8.93342 8.54289 8.54289Z",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$n,
+    fileName: _jsxFileName$q,
     lineNumber: 6,
     columnNumber: 7
   }
@@ -5948,7 +5960,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   fill: props.color,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$n,
+    fileName: _jsxFileName$q,
     lineNumber: 12,
     columnNumber: 5
   }
@@ -5958,7 +5970,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   mask: "url(#path-1-inside-1_2883_7918)",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$n,
+    fileName: _jsxFileName$q,
     lineNumber: 18,
     columnNumber: 5
   }
@@ -5969,7 +5981,7 @@ SvgCloseFilled.defaultProps = {
   size: 24
 };
 
-var _jsxFileName$m = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+var _jsxFileName$p = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\SearchOutline.js";
 
 const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   width: props.size,
@@ -5979,7 +5991,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$m,
+    fileName: _jsxFileName$p,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5991,7 +6003,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
   strokeWidth: 2,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$m,
+    fileName: _jsxFileName$p,
     lineNumber: 5,
     columnNumber: 5
   }
@@ -6000,7 +6012,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
   fill: props.color,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$m,
+    fileName: _jsxFileName$p,
     lineNumber: 6,
     columnNumber: 5
   }
@@ -6011,15 +6023,15 @@ SvgSearchOutline.defaultProps = {
   size: 24
 };
 
-const _excluded$9 = ["size", "onChange"];
-var _jsxFileName$l = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+const _excluded$c = ["size", "onChange"];
+var _jsxFileName$o = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
 
 const InputSearchbox = _ref => {
   let {
     size,
     onChange
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
 
   const [value, setValue] = React__default.useState('');
   const handleChange = React__default.useCallback(e => {
@@ -6041,7 +6053,7 @@ const InputSearchbox = _ref => {
     css: props.css,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$o,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -6049,14 +6061,14 @@ const InputSearchbox = _ref => {
     children: /*#__PURE__*/React__default.createElement(SvgSearchOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$o,
         lineNumber: 29,
         columnNumber: 35
       }
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$o,
       lineNumber: 29,
       columnNumber: 7
     }
@@ -6066,7 +6078,7 @@ const InputSearchbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$o,
       lineNumber: 30,
       columnNumber: 7
     }
@@ -6074,14 +6086,14 @@ const InputSearchbox = _ref => {
     children: value.length > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$o,
         lineNumber: 31,
         columnNumber: 55
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$o,
         lineNumber: 31,
         columnNumber: 73
       }
@@ -6089,7 +6101,7 @@ const InputSearchbox = _ref => {
     onClick: handleClearButtonClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$o,
       lineNumber: 31,
       columnNumber: 7
     }
@@ -6572,8 +6584,29 @@ $$3({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_RE
   }
 });
 
-const _excluded$8 = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "css"];
-var _jsxFileName$k = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
+var $$2 = _export;
+var uncurryThis$a = functionUncurryThis;
+var notARegExp = notARegexp;
+var requireObjectCoercible$5 = requireObjectCoercible$a;
+var toString$6 = toString$a;
+var correctIsRegExpLogic = correctIsRegexpLogic;
+
+var stringIndexOf$1 = uncurryThis$a(''.indexOf);
+
+// `String.prototype.includes` method
+// https://tc39.es/ecma262/#sec-string.prototype.includes
+$$2({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {
+  includes: function includes(searchString /* , position = 0 */) {
+    return !!~stringIndexOf$1(
+      toString$6(requireObjectCoercible$5(this)),
+      toString$6(notARegExp(searchString)),
+      arguments.length > 1 ? arguments[1] : undefined
+    );
+  }
+});
+
+const _excluded$b = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css"];
+var _jsxFileName$n = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
 const Box = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -6688,7 +6721,24 @@ const BoxItem = styled('div', {
   position: 'absolute',
   float: 'left',
   top: '100%',
-  left: '0px'
+  left: '0',
+  variants: {
+    placement: {
+      bottom: {
+        top: '100%',
+        left: '0',
+        transform: 'none'
+      },
+      top: {
+        top: '0',
+        left: '0',
+        transform: 'translate(0, -100%)'
+      }
+    }
+  },
+  defaultVariants: {
+    placement: 'bottom'
+  }
 });
 const SelectOption = styled('div', {
   flexDirection: 'column',
@@ -6720,9 +6770,13 @@ function Select$1(_ref) {
     value,
     iconColor,
     icon,
+    placement,
+    valueSelector,
+    textSelector,
+    disabledOptions,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   const [item, setItem] = React.useState(option || []);
 
@@ -6735,14 +6789,38 @@ function Select$1(_ref) {
     }
   };
 
+  React.useEffect(() => {
+    if (valueSelector && textSelector) setItem(generateOptions(option, valueSelector, textSelector));
+  }, [option, valueSelector, textSelector]);
+
+  const generateOptions = (data, valueSelector = '', textSelector = '') => {
+    return data.map(option => {
+      if (typeof option === 'object') {
+        const name = textSelector ? option[textSelector] : Object.values(option)[1];
+        const value = valueSelector ? option[valueSelector] : Object.values(option)[0];
+        return {
+          name,
+          value,
+          isDisabled: disabledOptions.includes(value)
+        };
+      }
+
+      return {
+        name: option,
+        value: option,
+        isDisabled: disabledOptions.includes(option)
+      };
+    });
+  };
+
   return /*#__PURE__*/React.createElement(Downshift, _extends({}, props, {
     onChange: onChange,
     itemToString: item => item ? item.name : '',
     initialSelectedItem: value !== undefined ? value : null,
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 161,
+      fileName: _jsxFileName$n,
+      lineNumber: 207,
       columnNumber: 5
     }
   }), ({
@@ -6760,8 +6838,8 @@ function Select$1(_ref) {
     css: css,
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 179,
+      fileName: _jsxFileName$n,
+      lineNumber: 225,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -6771,8 +6849,8 @@ function Select$1(_ref) {
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 180,
+      fileName: _jsxFileName$n,
+      lineNumber: 226,
       columnNumber: 11
     }
   }), search ? /*#__PURE__*/React.createElement("div", _extends({}, getToggleButtonProps(), {
@@ -6781,8 +6859,8 @@ function Select$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 182,
+      fileName: _jsxFileName$n,
+      lineNumber: 228,
       columnNumber: 15
     }
   }), /*#__PURE__*/React.createElement(Input$1, _extends({
@@ -6793,8 +6871,8 @@ function Select$1(_ref) {
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 183,
+      fileName: _jsxFileName$n,
+      lineNumber: 229,
       columnNumber: 17
     }
   }))) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps(), {
@@ -6802,89 +6880,95 @@ function Select$1(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 190,
+      fileName: _jsxFileName$n,
+      lineNumber: 236,
       columnNumber: 15
     }
   }), selectedItem ? /*#__PURE__*/React.createElement(Paragraph, {
     color: "primary",
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 192,
+      fileName: _jsxFileName$n,
+      lineNumber: 238,
       columnNumber: 19
     }
   }, selectedItem.name) : /*#__PURE__*/React.createElement(Paragraph, {
     color: "primary",
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 194,
+      fileName: _jsxFileName$n,
+      lineNumber: 240,
       columnNumber: 19
     }
   }, placeholder)), /*#__PURE__*/React.createElement(IconContainer, _extends({}, getToggleButtonProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 198,
+      fileName: _jsxFileName$n,
+      lineNumber: 244,
       columnNumber: 13
     }
   }), icon ? icon : /*#__PURE__*/React.createElement(CaretDownOutline, {
     color: iconColor,
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 199,
+      fileName: _jsxFileName$n,
+      lineNumber: 245,
       columnNumber: 30
     }
   }))), /*#__PURE__*/React.createElement(BoxItem, {
     css: {
       display: isOpen ? 'block' : 'none'
     },
+    placement: placement,
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 202,
+      fileName: _jsxFileName$n,
+      lineNumber: 248,
       columnNumber: 11
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 204,
+      fileName: _jsxFileName$n,
+      lineNumber: 250,
       columnNumber: 15
     }
   }), item.map((item, index) => {
     var _item$value;
 
-    return /*#__PURE__*/React.createElement(SelectItem, _extends({}, getItemProps({
+    return /*#__PURE__*/React.createElement(SelectItem, _extends({}, !item.isDisabled ? Object.assign({}, getItemProps({
       item
-    }), {
+    })) : {}, {
       key: (_item$value = item.value) != null ? _item$value : index,
-      css: {
+      css: item.isDisabled ? {
+        backgroundColor: '$formDisable',
+        cursor: 'not-allowed',
+        fontWeight: selectedItem === item ? 'bold' : 'normal',
+        color: '$textPrimary'
+      } : {
         backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
         fontWeight: selectedItem === item ? 'bold' : 'normal',
         color: '$textPrimary'
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 206,
+        fileName: _jsxFileName$n,
+        lineNumber: 252,
         columnNumber: 19
       }
     }), item.name);
   })) : /*#__PURE__*/React.createElement(SelectOption, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 220,
+      fileName: _jsxFileName$n,
+      lineNumber: 275,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(StyledDiv, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$k,
-      lineNumber: 221,
+      fileName: _jsxFileName$n,
+      lineNumber: 276,
       columnNumber: 17
     }
   }, "Item yang anda cari tidak ada")))));
@@ -6898,7 +6982,11 @@ Select$1.propTypes = {
   search: PropTypes.bool,
   value: PropTypes.object,
   iconColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  icon: PropTypes.node
+  icon: PropTypes.node,
+  placement: PropTypes.oneOf(['top', 'bottom']),
+  textSelector: PropTypes.string,
+  valueSelector: PropTypes.string,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string)
 };
 Select$1.defaultProps = {
   placeholder: 'Select Item',
@@ -6906,31 +6994,12 @@ Select$1.defaultProps = {
   disabled: false,
   search: false,
   iconColor: 'currentColor',
-  icon: undefined
+  icon: undefined,
+  placement: 'bottom',
+  disabledOptions: []
 };
 
-var $$2 = _export;
-var uncurryThis$a = functionUncurryThis;
-var notARegExp = notARegexp;
-var requireObjectCoercible$5 = requireObjectCoercible$a;
-var toString$6 = toString$a;
-var correctIsRegExpLogic = correctIsRegexpLogic;
-
-var stringIndexOf$1 = uncurryThis$a(''.indexOf);
-
-// `String.prototype.includes` method
-// https://tc39.es/ecma262/#sec-string.prototype.includes
-$$2({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }, {
-  includes: function includes(searchString /* , position = 0 */) {
-    return !!~stringIndexOf$1(
-      toString$6(requireObjectCoercible$5(this)),
-      toString$6(notARegExp(searchString)),
-      arguments.length > 1 ? arguments[1] : undefined
-    );
-  }
-});
-
-var _jsxFileName$j = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelectTag/icon/CheckOutline.js";
+var _jsxFileName$m = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\icon\\CheckOutline.js";
 
 const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -6948,7 +7017,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$j,
+    fileName: _jsxFileName$m,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -6960,7 +7029,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$j,
+    fileName: _jsxFileName$m,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -6972,13 +7041,13 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$j,
+    fileName: _jsxFileName$m,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-var _jsxFileName$i = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+var _jsxFileName$l = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
 const Wrapper = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -7198,7 +7267,7 @@ function SelectTag({
   return /*#__PURE__*/React.createElement(Wrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 209,
       columnNumber: 5
     }
@@ -7207,7 +7276,7 @@ function SelectTag({
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 210,
       columnNumber: 7
     }
@@ -7215,7 +7284,7 @@ function SelectTag({
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 212,
       columnNumber: 11
     }
@@ -7236,7 +7305,7 @@ function SelectTag({
       size: 10,
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 224,
         columnNumber: 28
       }
@@ -7249,7 +7318,7 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 214,
       columnNumber: 15
     }
@@ -7258,7 +7327,7 @@ function SelectTag({
   })), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 237,
       columnNumber: 9
     }
@@ -7270,21 +7339,21 @@ function SelectTag({
   })), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 238,
       columnNumber: 11
     }
   }))), /*#__PURE__*/React.createElement(IconWrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 244,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(IconCaretDown, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 245,
       columnNumber: 11
     }
@@ -7294,14 +7363,14 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 248,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 250,
       columnNumber: 11
     }
@@ -7313,7 +7382,7 @@ function SelectTag({
   }), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 253,
       columnNumber: 17
     }
@@ -7325,7 +7394,7 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 260,
       columnNumber: 19
     }
@@ -7333,7 +7402,7 @@ function SelectTag({
     color: colors.iconGreen,
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 261,
       columnNumber: 53
     }
@@ -7344,14 +7413,14 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 263,
       columnNumber: 19
     }
   }, item.name)))) : /*#__PURE__*/React.createElement(Option, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 275,
       columnNumber: 11
     }
@@ -7361,7 +7430,7 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$l,
       lineNumber: 276,
       columnNumber: 13
     }
@@ -7459,8 +7528,8 @@ const PopoverClose = StyledClose$1;
 const StyledAnchor = styled(PopoverPrimitive.Anchor, {});
 const PopoverAnchor = StyledAnchor;
 
-const _excluded$7 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-var _jsxFileName$h = "/home/omegalord666/work/majoo-ui/packages/react/src/components/slider/Slider.js";
+const _excluded$a = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
+var _jsxFileName$k = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
 const StyledSlider = styled$1(SliderPrimitive.Root, {
   position: 'relative',
   display: 'flex',
@@ -7719,7 +7788,7 @@ function Slider(_ref) {
     width,
     height
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
   return /*#__PURE__*/React__default.createElement(StyledSlider, _extends({
     className: className,
@@ -7742,7 +7811,7 @@ function Slider(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$h,
+      fileName: _jsxFileName$k,
       lineNumber: 160,
       columnNumber: 5
     }
@@ -7751,7 +7820,7 @@ function Slider(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$h,
+      fileName: _jsxFileName$k,
       lineNumber: 181,
       columnNumber: 7
     }
@@ -7759,7 +7828,7 @@ function Slider(_ref) {
     color: color,
     __self: this,
     __source: {
-      fileName: _jsxFileName$h,
+      fileName: _jsxFileName$k,
       lineNumber: 182,
       columnNumber: 9
     }
@@ -7768,7 +7837,7 @@ function Slider(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$h,
+      fileName: _jsxFileName$k,
       lineNumber: 184,
       columnNumber: 7
     }
@@ -7866,9 +7935,9 @@ const StyledSeparator = styled(SeparatorPrimitive.Root, {
 });
 const Separator = StyledSeparator;
 
-const _excluded$6 = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size"],
+const _excluded$9 = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size"],
       _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
-var _jsxFileName$g = "/home/omegalord666/work/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
+var _jsxFileName$j = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\buttonGroup\\ButtonGroup.js";
 const ButtonGroupComponent = styled(ToggleGroupPrimitive.Root, {
   display: 'inline-flex',
   borderRadius: '$md',
@@ -7992,7 +8061,7 @@ function ButtonGroup$1(_ref) {
     loop,
     size
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
   return /*#__PURE__*/React__default.createElement(ButtonGroupComponent, _extends({
     className: className,
@@ -8010,7 +8079,7 @@ function ButtonGroup$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$j,
       lineNumber: 111,
       columnNumber: 5
     }
@@ -8063,21 +8132,21 @@ function ButtonGroupItem(_ref2) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$j,
       lineNumber: 164,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$j,
       lineNumber: 172,
       columnNumber: 33
     }
   }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$j,
       lineNumber: 174,
       columnNumber: 34
     }
@@ -8095,8 +8164,8 @@ ButtonGroupItem.defaultProps = {
   isToggle: true
 };
 
-const _excluded$5 = ["children", "value"];
-var _jsxFileName$f = "/home/omegalord666/work/majoo-ui/packages/react/src/components/notificationBadge/notificationBadge.js";
+const _excluded$8 = ["children", "value"];
+var _jsxFileName$i = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\notificationBadge.js";
 const NotificationBadgeRootStyle = styled('span', {
   position: 'relative',
   display: 'inline-flex',
@@ -8222,12 +8291,12 @@ const NotificationBadge = _ref => {
     children,
     value
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
   return /*#__PURE__*/React__default.createElement(NotificationBadgeRootStyle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$i,
       lineNumber: 133,
       columnNumber: 5
     }
@@ -8235,7 +8304,7 @@ const NotificationBadge = _ref => {
     children: value,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$i,
       lineNumber: 135,
       columnNumber: 7
     }
@@ -8259,8 +8328,8 @@ NotificationBadge.propTypes = {
   value: PropTypes.number
 };
 
-const _excluded$4 = ["className", "children", "radius", "padding", "width", "height"];
-var _jsxFileName$e = "/home/omegalord666/work/majoo-ui/packages/react/src/components/paper/Paper.js";
+const _excluded$7 = ["className", "children", "radius", "padding", "width", "height"];
+var _jsxFileName$h = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\paper\\Paper.js";
 const PaperComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -8279,7 +8348,7 @@ const Paper = _ref => {
     width,
     height
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   return /*#__PURE__*/React__default.createElement(PaperComponent, _extends({
     className: className,
@@ -8292,7 +8361,7 @@ const Paper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$h,
       lineNumber: 17,
       columnNumber: 5
     }
@@ -8312,7 +8381,6 @@ Paper.defaultProps = {
 };
 
 const IconButton = styled('button', {
-  all: 'unset',
   cursor: 'pointer',
   borderRadius: '$round',
   size: '24px',
@@ -8320,6 +8388,8 @@ const IconButton = styled('button', {
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
+  border: 'none',
+  appearance: 'none',
   // '&:focus': {
   //   outline: '2px solid #82C4E0',
   // },
@@ -8352,8 +8422,8 @@ const IconButton = styled('button', {
   }
 });
 
-const _excluded$3 = ["children"];
-var _jsxFileName$d = "/home/omegalord666/work/majoo-ui/packages/react/src/components/modalDialog/ModalDialog.js";
+const _excluded$6 = ["children"];
+var _jsxFileName$g = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\modalDialog\\ModalDialog.js";
 const overlayShow = keyframes({
   '0%': {
     opacity: 0
@@ -8397,26 +8467,26 @@ function Content(_ref) {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Portal, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$g,
       lineNumber: 38,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay$1, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$g,
       lineNumber: 39,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$2, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$g,
       lineNumber: 40,
       columnNumber: 7
     }
@@ -8446,8 +8516,8 @@ const DialogTitle = StyledTitle;
 const DialogDescription = StyledDescription;
 const DialogClose = DialogPrimitive.Close;
 
-const _excluded$2 = ["children"];
-var _jsxFileName$c = "/home/omegalord666/work/majoo-ui/packages/react/src/components/drawer/Drawer.js";
+const _excluded$5 = ["children"];
+var _jsxFileName$f = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\drawer\\Drawer.js";
 const fadeIn = keyframes({
   from: {
     opacity: '0'
@@ -8483,19 +8553,19 @@ function Drawer(_ref) {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Root, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$c,
+      fileName: _jsxFileName$f,
       lineNumber: 36,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledOverlay, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$c,
+      fileName: _jsxFileName$f,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -8600,10 +8670,10 @@ const DrawerClose = StyledClose;
 const DrawerTitle = DialogPrimitive.Title;
 const DrawerDescription = DialogPrimitive.Description;
 
-const _excluded$1 = ["children", "disabled"],
+const _excluded$4 = ["children", "disabled"],
       _excluded2$1 = ["children", "hasContent", "arrowColor"],
       _excluded3$1 = ["children"];
-var _jsxFileName$b = "/home/omegalord666/work/majoo-ui/packages/react/src/components/accordion/Accordion.js";
+var _jsxFileName$e = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\accordion\\Accordion.js";
 //   from: { height: 0 },
 //   to: { height: 'var(--radix-accordion-content-height)' },
 // });
@@ -8618,7 +8688,7 @@ const Accordion = _ref => {
     children,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
   return /*#__PURE__*/React__default.createElement(StyledAccordion, _extends({}, props, props.type === 'single' ? {
     collapsible: true
@@ -8626,7 +8696,7 @@ const Accordion = _ref => {
     disabled: disabled,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$e,
       lineNumber: 20,
       columnNumber: 3
     }
@@ -8689,14 +8759,14 @@ const AccordionTrigger = _ref2 => {
   return /*#__PURE__*/React__default.createElement(StyledHeader, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$e,
       lineNumber: 80,
       columnNumber: 3
     }
   }, /*#__PURE__*/React__default.createElement(StyledTrigger, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$e,
       lineNumber: 81,
       columnNumber: 5
     }
@@ -8705,7 +8775,7 @@ const AccordionTrigger = _ref2 => {
     color: arrowColor,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$e,
       lineNumber: 83,
       columnNumber: 22
     }
@@ -8722,7 +8792,7 @@ const AccordionContent = _ref3 => {
   return /*#__PURE__*/React__default.createElement(StyledContent, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$e,
       lineNumber: 91,
       columnNumber: 61
     }
@@ -8775,7 +8845,7 @@ function useMediaQuery(query) {
   return matches;
 }
 
-var _jsxFileName$a = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/AdvancedOption.js";
+var _jsxFileName$d = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\AdvancedOption.js";
 const ButtonGroup = styled(ToggleGroupPrimitive.Root, {
   width: '100%'
 });
@@ -8800,7 +8870,7 @@ const AdvancedOption = ({
     orientation: "vertical",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$d,
       lineNumber: 25,
       columnNumber: 5
     }
@@ -8812,7 +8882,7 @@ const AdvancedOption = ({
     onClick: () => optionHandler(option.value),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$d,
       lineNumber: 27,
       columnNumber: 9
     }
@@ -8888,7 +8958,7 @@ const DateNumber = styled('div', {
 });
 DateNumber.displayName = 'DateNumber';
 
-var _jsxFileName$9 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/Calendar.js";
+var _jsxFileName$c = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\components\\Calendar.js";
 
 const getVariant$1 = ({
   selectable,
@@ -9086,7 +9156,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 205,
         columnNumber: 7
       }
@@ -9100,7 +9170,7 @@ const CalendarBox = ({
       disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 218,
         columnNumber: 7
       }
@@ -9118,7 +9188,7 @@ const CalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 250,
         columnNumber: 7
       }
@@ -9126,7 +9196,7 @@ const CalendarBox = ({
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 266,
         columnNumber: 9
       }
@@ -9144,7 +9214,7 @@ const CalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 272,
         columnNumber: 7
       }
@@ -9152,7 +9222,7 @@ const CalendarBox = ({
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 293,
         columnNumber: 9
       }
@@ -9168,7 +9238,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 299,
         columnNumber: 7
       }
@@ -9181,7 +9251,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 302,
         columnNumber: 13
       }
@@ -9191,7 +9261,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 312,
         columnNumber: 15
       }
@@ -9202,7 +9272,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 318,
         columnNumber: 13
       }
@@ -9215,7 +9285,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 324,
         columnNumber: 13
       }
@@ -9225,7 +9295,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 332,
         columnNumber: 15
       }
@@ -9240,7 +9310,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 354,
         columnNumber: 7
       }
@@ -9258,7 +9328,7 @@ const CalendarBox = ({
           },
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$9,
+            fileName: _jsxFileName$c,
             lineNumber: 365,
             columnNumber: 17
           }
@@ -9280,7 +9350,7 @@ const CalendarBox = ({
         variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 382,
           columnNumber: 15
         }
@@ -9297,7 +9367,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 398,
         columnNumber: 7
       }
@@ -9311,7 +9381,7 @@ const CalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 406,
         columnNumber: 11
       }
@@ -9329,7 +9399,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 429,
         columnNumber: 7
       }
@@ -9343,7 +9413,7 @@ const CalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 437,
         columnNumber: 11
       }
@@ -9359,7 +9429,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 458,
         columnNumber: 7
       }
@@ -9376,7 +9446,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 466,
         columnNumber: 11
       }
@@ -9388,7 +9458,7 @@ const CalendarBox = ({
       key: `${calendar.month}${calendar.year}${weekday}`,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 488,
         columnNumber: 7
       }
@@ -9399,7 +9469,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 489,
         columnNumber: 9
       }
@@ -9410,7 +9480,7 @@ const CalendarBox = ({
     return /*#__PURE__*/React__default.createElement(Box$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 503,
         columnNumber: 7
       }
@@ -9420,7 +9490,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 504,
         columnNumber: 9
       }
@@ -9429,7 +9499,7 @@ const CalendarBox = ({
       align: "center",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 505,
         columnNumber: 9
       }
@@ -9441,16 +9511,16 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 506,
         columnNumber: 11
       }
-    }, selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : 'Tanggal belum dipilih'), /*#__PURE__*/React__default.createElement(Flex, {
+    }, selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : selected.length <= 0 ? 'Tanggal belum dipilih' : toDateFormat(selected[0])), /*#__PURE__*/React__default.createElement(Flex, {
       gap: 3,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 517,
+        fileName: _jsxFileName$c,
+        lineNumber: 519,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Button$1, {
@@ -9462,8 +9532,8 @@ const CalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 518,
+        fileName: _jsxFileName$c,
+        lineNumber: 520,
         columnNumber: 13
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$1, {
@@ -9474,8 +9544,8 @@ const CalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 528,
+        fileName: _jsxFileName$c,
+        lineNumber: 530,
         columnNumber: 13
       }
     }, "Proses"))));
@@ -9486,39 +9556,39 @@ const CalendarBox = ({
       css: containerStyle,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 545,
+        fileName: _jsxFileName$c,
+        lineNumber: 547,
         columnNumber: 7
       }
     }, advanceView, advanceView && /*#__PURE__*/React__default.createElement(Separator, {
       orientation: "vertical",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 548,
+        fileName: _jsxFileName$c,
+        lineNumber: 550,
         columnNumber: 25
       }
     }), /*#__PURE__*/React__default.createElement(Box$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 549,
+        fileName: _jsxFileName$c,
+        lineNumber: 551,
         columnNumber: 9
       }
     }, renderHeader(), /*#__PURE__*/React__default.createElement(CalendarItemContainer$1, {
       gap: 5,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 551,
+        fileName: _jsxFileName$c,
+        lineNumber: 553,
         columnNumber: 11
       }
     }, calendars.map((calendar, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: `${calendar.month}${calendar.year}`,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 553,
+        fileName: _jsxFileName$c,
+        lineNumber: 555,
         columnNumber: 15
       }
     }, index > 0 && /*#__PURE__*/React__default.createElement(Separator, {
@@ -9528,15 +9598,15 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 555,
+        fileName: _jsxFileName$c,
+        lineNumber: 557,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default.createElement(DateContainer$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 562,
+        fileName: _jsxFileName$c,
+        lineNumber: 564,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -9545,8 +9615,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 563,
+        fileName: _jsxFileName$c,
+        lineNumber: 565,
         columnNumber: 19
       }
     }), pickerState.type === DATE_PICKER$1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderWeekLabel(calendar), renderDateNumber(calendar)), pickerState.type === MONTH_PICKER$1 && renderMonthsList(), pickerState.type === YEAR_PICKER$1 && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER$1 && renderYearRangesList())))), multiDatePicker && renderFooter()));
@@ -9555,7 +9625,7 @@ const CalendarBox = ({
   return null;
 };
 
-var _jsxFileName$8 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/MobileCalendar.js";
+var _jsxFileName$b = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\components\\MobileCalendar.js";
 
 const getVariant = ({
   selectable,
@@ -9786,7 +9856,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 241,
         columnNumber: 7
       }
@@ -9800,7 +9870,7 @@ const MobileCalendarBox = ({
       disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 254,
         columnNumber: 7
       }
@@ -9818,7 +9888,7 @@ const MobileCalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 286,
         columnNumber: 7
       }
@@ -9826,7 +9896,7 @@ const MobileCalendarBox = ({
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 302,
         columnNumber: 9
       }
@@ -9844,7 +9914,7 @@ const MobileCalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 308,
         columnNumber: 7
       }
@@ -9852,7 +9922,7 @@ const MobileCalendarBox = ({
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 329,
         columnNumber: 9
       }
@@ -9868,7 +9938,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 335,
         columnNumber: 7
       }
@@ -9883,7 +9953,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 347,
         columnNumber: 7
       }
@@ -9901,7 +9971,7 @@ const MobileCalendarBox = ({
           },
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$8,
+            fileName: _jsxFileName$b,
             lineNumber: 358,
             columnNumber: 17
           }
@@ -9924,7 +9994,7 @@ const MobileCalendarBox = ({
         variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 375,
           columnNumber: 15
         }
@@ -9941,7 +10011,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 392,
         columnNumber: 7
       }
@@ -9955,7 +10025,7 @@ const MobileCalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 400,
         columnNumber: 11
       }
@@ -9973,7 +10043,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 423,
         columnNumber: 7
       }
@@ -9987,7 +10057,7 @@ const MobileCalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 431,
         columnNumber: 11
       }
@@ -10003,7 +10073,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 452,
         columnNumber: 7
       }
@@ -10020,7 +10090,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 460,
         columnNumber: 11
       }
@@ -10031,7 +10101,7 @@ const MobileCalendarBox = ({
     return /*#__PURE__*/React__default.createElement(Flex, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 482,
         columnNumber: 7
       }
@@ -10039,7 +10109,7 @@ const MobileCalendarBox = ({
       key: `${calendar.month}${calendar.year}${weekday}`,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 484,
         columnNumber: 11
       }
@@ -10050,7 +10120,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 485,
         columnNumber: 13
       }
@@ -10064,7 +10134,7 @@ const MobileCalendarBox = ({
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 501,
         columnNumber: 7
       }
@@ -10074,7 +10144,7 @@ const MobileCalendarBox = ({
       onClick: () => setExpandAdvanceView(!expandAdvanceView),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 504,
         columnNumber: 13
       }
@@ -10082,21 +10152,21 @@ const MobileCalendarBox = ({
       variant: "contentButton",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 505,
         columnNumber: 15
       }
     }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 506,
         columnNumber: 36
       }
     }) : /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 506,
         columnNumber: 61
       }
@@ -10106,7 +10176,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 509,
         columnNumber: 13
       }
@@ -10115,7 +10185,7 @@ const MobileCalendarBox = ({
       color: selected.length > 1 ? 'primary' : 'disable',
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 516,
         columnNumber: 9
       }
@@ -10123,7 +10193,7 @@ const MobileCalendarBox = ({
       gap: 3,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 521,
         columnNumber: 9
       }
@@ -10138,7 +10208,7 @@ const MobileCalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 522,
         columnNumber: 11
       }
@@ -10152,7 +10222,7 @@ const MobileCalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 534,
         columnNumber: 11
       }
@@ -10163,7 +10233,7 @@ const MobileCalendarBox = ({
     return /*#__PURE__*/React__default.createElement(DatePickerContainer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 552,
         columnNumber: 7
       }
@@ -10171,7 +10241,7 @@ const MobileCalendarBox = ({
       css: containerStyle,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 553,
         columnNumber: 9
       }
@@ -10180,7 +10250,7 @@ const MobileCalendarBox = ({
       gap: 5,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 554,
         columnNumber: 11
       }
@@ -10188,7 +10258,7 @@ const MobileCalendarBox = ({
       key: `${calendar.month}${calendar.year}`,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 556,
         columnNumber: 15
       }
@@ -10198,7 +10268,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 558,
         columnNumber: 17
       }
@@ -10208,10 +10278,10 @@ const MobileCalendarBox = ({
   return null;
 };
 
-const _excluded = ["multiDatePicker", "onChange", "onCancel", "advanceView", "selected", "disabled"],
-      _excluded2 = ["multiDatePicker", "onChange", "onCancel", "advanceView", "selected", "disabled"],
+const _excluded$3 = ["multiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled"],
+      _excluded2 = ["multiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled"],
       _excluded3 = ["type"];
-var _jsxFileName$7 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/DatePicker.js";
+var _jsxFileName$a = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\DatePicker.js";
 const SINGLE_PICKER = 'single';
 const RANGE_PICKER = 'range';
 const ADVANCE_PICKER = 'advance';
@@ -10220,18 +10290,19 @@ const CalendarPicker = _ref => {
   let {
     multiDatePicker,
     onChange,
-    onCancel,
+    onClose,
     advanceView,
     selected,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
   const [dateValue, setDateValue] = useState();
   const [calendarDate, setCalendarDate] = useState(selected != null ? selected : new Date());
 
   const onDateSelected = selectedDate => {
     setDateValue(selectedDate.date);
+    onClose();
   };
 
   const updateHandler = () => {
@@ -10259,7 +10330,7 @@ const CalendarPicker = _ref => {
   }, [dateValue]);
   return /*#__PURE__*/React__default.createElement(CalendarBox, _extends({
     onUpdate: multiDatePicker ? updateHandler : undefined,
-    onCancel: onCancel,
+    onCancel: onClose,
     selected: dateValue ? [dateValue] : undefined,
     advanceView: advanceView,
     disabled: disabled,
@@ -10267,8 +10338,8 @@ const CalendarPicker = _ref => {
   }, dayzedData, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$7,
-      lineNumber: 41,
+      fileName: _jsxFileName$a,
+      lineNumber: 42,
       columnNumber: 5
     }
   }));
@@ -10278,7 +10349,7 @@ const CalendarRangePicker = _ref2 => {
   let {
     multiDatePicker,
     onChange,
-    onCancel,
+    onClose,
     advanceView,
     selected,
     disabled
@@ -10328,11 +10399,13 @@ const CalendarRangePicker = _ref2 => {
         onChange(dateValue);
       }
     }
+
+    onClose();
   };
 
   return isMobile ? /*#__PURE__*/React__default.createElement(MobileCalendarBox, _extends({
     onUpdate: multiDatePicker ? updateHandler : undefined,
-    onCancel: onCancel,
+    onCancel: onClose,
     selected: dateValue,
     advanceView: isMultiDate ? advanceView : undefined,
     disabled: disabled,
@@ -10341,13 +10414,13 @@ const CalendarRangePicker = _ref2 => {
   }, dayzedData, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$7,
-      lineNumber: 100,
+      fileName: _jsxFileName$a,
+      lineNumber: 102,
       columnNumber: 5
     }
   })) : /*#__PURE__*/React__default.createElement(CalendarBox, _extends({
     onUpdate: multiDatePicker ? updateHandler : undefined,
-    onCancel: onCancel,
+    onCancel: onClose,
     selected: dateValue,
     advanceView: isMultiDate ? advanceView : undefined,
     disabled: disabled,
@@ -10356,8 +10429,8 @@ const CalendarRangePicker = _ref2 => {
   }, dayzedData, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$7,
-      lineNumber: 111,
+      fileName: _jsxFileName$a,
+      lineNumber: 113,
       columnNumber: 5
     }
   }));
@@ -10373,8 +10446,8 @@ const DatePicker = props => {
     return /*#__PURE__*/React__default.createElement(CalendarRangePicker, _extends({}, otherProps, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 127,
+        fileName: _jsxFileName$a,
+        lineNumber: 129,
         columnNumber: 12
       }
     }));
@@ -10383,14 +10456,14 @@ const DatePicker = props => {
   return /*#__PURE__*/React__default.createElement(CalendarPicker, _extends({}, otherProps, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$7,
-      lineNumber: 129,
+      fileName: _jsxFileName$a,
+      lineNumber: 131,
       columnNumber: 10
     }
   }));
 };
 
-var _jsxFileName$6 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/InputDatePicker.js";
+var _jsxFileName$9 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\InputDatePicker.js";
 const UPDATE = 'UPDATE';
 const TODAY = 'TODAY';
 const YESTERDAY = 'YESTERDAY';
@@ -10536,6 +10609,7 @@ function InputDatePicker({
   size = 'sm',
   disabled,
   onChange,
+  defaultDate,
   date,
   advanceView,
   css
@@ -10543,7 +10617,7 @@ function InputDatePicker({
   const [{
     selectedDate
   }, dispatch] = useReducer(dateReducer, {
-    selectedDate: undefined
+    selectedDate: defaultDate != null ? defaultDate : date
   });
   const [openPicker, setOpenPicker] = useState(false);
   const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
@@ -10553,32 +10627,33 @@ function InputDatePicker({
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
-      lineNumber: 111,
+      fileName: _jsxFileName$9,
+      lineNumber: 112,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
     children: /*#__PURE__*/React__default.createElement(CalendarOutline, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 112,
+        fileName: _jsxFileName$9,
+        lineNumber: 113,
         columnNumber: 35
       }
     }),
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
-      lineNumber: 112,
+      fileName: _jsxFileName$9,
+      lineNumber: 113,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, {
     placeholder: placeholder,
     value: getInputPickerValue(type, selectedDate),
+    isDatePicker: true,
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
-      lineNumber: 113,
+      fileName: _jsxFileName$9,
+      lineNumber: 114,
       columnNumber: 7
     }
   }));
@@ -10592,8 +10667,8 @@ function InputDatePicker({
       }),
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 121,
+        fileName: _jsxFileName$9,
+        lineNumber: 122,
         columnNumber: 11
       }
     }) : {
@@ -10601,22 +10676,21 @@ function InputDatePicker({
     }),
     type: type,
     disabled: disabled,
-    date: date ? date == null ? void 0 : date[1] : selectedDate == null ? void 0 : selectedDate[1],
-    selected: date != null ? date : selectedDate,
+    date: date ? date === null || date === void 0 ? void 0 : date[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
+    selected: selectedDate,
     multiDatePicker: type !== SINGLE_PICKER,
     onChange: date => {
-      setOpenPicker(false);
       dispatch({
         type: 'UPDATE',
         payload: date
       });
       if (onChange) onChange(date);
     },
-    onCancel: () => setOpenPicker(false),
+    onClose: () => setOpenPicker(false),
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
-      lineNumber: 117,
+      fileName: _jsxFileName$9,
+      lineNumber: 118,
       columnNumber: 5
     }
   });
@@ -10626,14 +10700,14 @@ function InputDatePicker({
     onOpenChange: setOpenPicker,
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$9,
       lineNumber: 140,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$9,
       lineNumber: 141,
       columnNumber: 7
     }
@@ -10641,7 +10715,7 @@ function InputDatePicker({
     css: css,
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$9,
       lineNumber: 142,
       columnNumber: 9
     }
@@ -10652,7 +10726,7 @@ function InputDatePicker({
     onOpenAutoFocus: e => e.preventDefault(),
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$9,
       lineNumber: 144,
       columnNumber: 7
     }
@@ -10660,7 +10734,7 @@ function InputDatePicker({
     css: css,
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$9,
       lineNumber: 150,
       columnNumber: 7
     }
@@ -10669,7 +10743,7 @@ function InputDatePicker({
     onOpenChange: setOpenPicker,
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$9,
       lineNumber: 151,
       columnNumber: 7
     }
@@ -10681,7 +10755,7 @@ function InputDatePicker({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$9,
       lineNumber: 152,
       columnNumber: 9
     }
@@ -10694,7 +10768,7 @@ InputDatePicker.propTypes = {
   size: PropTypes.oneOf(['lg', 'sm']),
   disabled: PropTypes.bool,
   onChange: PropTypes.func,
-  date: PropTypes.array,
+  date: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   advanceView: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
   css: PropTypes.object
 };
@@ -10711,88 +10785,533 @@ function sliceIntoChunks(arr, chunkSize) {
   return res;
 }
 
-var _jsxFileName$5 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/table/MobileTable.js";
-const TableContainer$1 = styled(Flex, {
-  position: 'fixed',
-  flexDirection: 'column',
-  width: '100%',
-  height: '100%',
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  padding: '0 $spacing-05',
-  '-ms-overflow-style': 'none',
-  scrollbarWidth: 'none',
-  '&::-webkit-scrollbar': {
-    display: 'none'
-  }
-});
-const TableHeadRow$1 = styled('tr', {
-  borderBottom: '1pt solid $bgBorder',
-  '& th': {
-    paddingLeft: '$spacing-05'
-  },
-  '& th:first-child': {
-    padding: 0
-  }
-});
-const TableHeadCell$1 = styled('th', {
-  height: '40px'
-});
-const TableRow$1 = styled('tr', {
-  borderBottom: '1pt solid $bgBorder',
-  '& td': {
-    paddingLeft: '$spacing-05'
-  },
-  '& td:first-child': {
-    padding: 0
-  }
-});
-const TableCell$1 = styled('td', {
-  height: '40px',
-  fontSize: '$short-content-regular',
-  lineHeight: '$short-content-regular',
-  letterSpacing: '$short-content-regular',
-  fontWeight: '400',
-  color: '$textPrimary'
-});
+const removeUndefinedFields = obj => {
+  let newObj = {};
+  Object.keys(obj).forEach(key => {
+    if (obj[key] === Object(obj[key])) newObj[key] = removeUndefinedFields(obj[key]);else if (obj[key] !== undefined) newObj[key] = obj[key];
+  });
+  return newObj;
+};
 
-function MobileTable({
-  instance
-}) {
-  const {
-    getTableProps,
-    getTableBodyProps,
-    headerGroups,
+var uncurryThis$9 = functionUncurryThis;
+var PROPER_FUNCTION_NAME = functionName.PROPER;
+var redefine = redefine$5.exports;
+var anObject$3 = anObject$c;
+var isPrototypeOf = objectIsPrototypeOf;
+var $toString = toString$a;
+var fails$5 = fails$k;
+var regExpFlags = regexpFlags$1;
+
+var TO_STRING = 'toString';
+var RegExpPrototype = RegExp.prototype;
+var n$ToString = RegExpPrototype[TO_STRING];
+var getFlags = uncurryThis$9(regExpFlags);
+
+var NOT_GENERIC = fails$5(function () { return n$ToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
+// FF44- RegExp#toString has a wrong name
+var INCORRECT_NAME = PROPER_FUNCTION_NAME && n$ToString.name != TO_STRING;
+
+// `RegExp.prototype.toString` method
+// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
+if (NOT_GENERIC || INCORRECT_NAME) {
+  redefine(RegExp.prototype, TO_STRING, function toString() {
+    var R = anObject$3(this);
+    var p = $toString(R.source);
+    var rf = R.flags;
+    var f = $toString(rf === undefined && isPrototypeOf(RegExpPrototype, R) && !('flags' in RegExpPrototype) ? getFlags(R) : rf);
+    return '/' + p + '/' + f;
+  }, { unsafe: true });
+}
+
+const _excluded$2 = ["isActive", "onClick"];
+var _jsxFileName$8 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\pagination\\PaginationButton.js";
+
+const PageButton = _ref => {
+  let {
+    isActive,
+    onClick
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+
+  return /*#__PURE__*/React__default.createElement(Button$1, _extends({
+    onClick: onClick,
+    buttonType: !isActive ? 'ghost' : 'primary',
+    css: {
+      minWidth: 'initial',
+      width: 28,
+      height: 28,
+      padding: 0,
+      color: !isActive && '$textSecondary'
+    }
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 15,
+      columnNumber: 5
+    }
+  }));
+};
+
+const PaginationButton = ({
+  currentPage,
+  totalPages,
+  onSelect
+}) => {
+  const isLg = useMediaQuery('(max-width: 800px)');
+
+  const handleSelectPage = page => {
+    if (onSelect && page > 0 && page <= totalPages) {
+      onSelect(page);
+    }
+  };
+
+  const inputPageRef = useRef();
+  useEffect(() => {
+    inputPageRef.current.value = '';
+  }, [currentPage]);
+  const debouncedGoToPage = useCallback(debounce(handleSelectPage, 1000), []);
+
+  const generatePages = () => {
+    const maxButtons = isLg ? 2 : 5;
+    const pageButtons = [];
+    let startPage;
+    let endPage;
+
+    if (maxButtons && maxButtons < totalPages) {
+      startPage = Math.max(Math.min(currentPage - Math.floor(maxButtons / 2), totalPages - maxButtons + 1), 1);
+      endPage = startPage + maxButtons - 1;
+    } else {
+      startPage = 1;
+      endPage = totalPages;
+    } // eslint-disable-next-line no-plusplus
+
+
+    for (let page = startPage; page <= endPage; ++page) {
+      pageButtons.push(page);
+    }
+
+    if (startPage > 1) {
+      if (startPage > 2) {
+        pageButtons.unshift('\u2026');
+      }
+
+      pageButtons.unshift(1);
+    }
+
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        pageButtons.push('\u2026');
+      }
+
+      pageButtons.push(totalPages);
+    }
+
+    return pageButtons;
+  };
+
+  return /*#__PURE__*/React__default.createElement(Flex, {
+    align: "center",
+    css: {
+      height: 28
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 81,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    align: "center",
+    gap: 2,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 82,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(IconButton, {
+    buttonType: "secondary",
+    disabled: currentPage === 1,
+    onClick: () => handleSelectPage(currentPage - (currentPage < 11 ? currentPage - 1 : 10)),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 83,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(DoubleChevronLeftOutline, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 88,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    buttonType: "secondary",
+    disabled: currentPage === 1,
+    onClick: () => handleSelectPage(currentPage - 1),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 90,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(ChevronLeftOutline, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 95,
+      columnNumber: 11
+    }
+  })), generatePages().map((page, index) => {
+    return /*#__PURE__*/React__default.createElement(PageButton, {
+      key: index.toString(),
+      isActive: page === currentPage,
+      onClick: () => typeof page === 'number' ? handleSelectPage(page) : null,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 99,
+        columnNumber: 13
+      }
+    }, page);
+  }), /*#__PURE__*/React__default.createElement(IconButton, {
+    buttonType: "secondary",
+    disabled: currentPage === totalPages,
+    onClick: () => handleSelectPage(currentPage + 1),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 108,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 113,
+      columnNumber: 11
+    }
+  })), /*#__PURE__*/React__default.createElement(IconButton, {
+    buttonType: "secondary",
+    disabled: currentPage === totalPages,
+    onClick: () => handleSelectPage(currentPage + (currentPage > totalPages - 10 ? totalPages - currentPage : 10)),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 115,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(DoubleChevronRightOutline, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 122,
+      columnNumber: 11
+    }
+  }))), /*#__PURE__*/React__default.createElement(Separator, {
+    orientation: "vertical",
+    css: {
+      height: '100%',
+      margin: '0 $spacing-03 0 $spacing-01'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 126,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(Box$1, {
+    css: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: 8
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 128,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "caption",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 129,
+      columnNumber: 9
+    }
+  }, "Ke Halaman"), /*#__PURE__*/React__default.createElement(InputText, {
+    ref: inputPageRef,
+    type: "number",
+    onChange: e => {
+      if (e.target.value) {
+        debouncedGoToPage(Number(e.target.value));
+      }
+    },
+    css: {
+      width: 28,
+      height: 28,
+      padding: 0,
+      textAlign: 'center',
+      '&::-webkit-inner-spin-button': {
+        '-webkit-appearance': 'none',
+        margin: 0
+      }
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$8,
+      lineNumber: 130,
+      columnNumber: 9
+    }
+  })));
+};
+
+const _excluded$1 = ["limits", "selectedLimit", "currentPage", "totalData", "onChange"];
+var _jsxFileName$7 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\pagination\\PaginationInfo.js";
+
+function PaginationInfo(_ref) {
+  let {
+    limits,
+    selectedLimit,
+    currentPage,
+    totalData,
+    onChange
+  } = _ref;
+      _objectWithoutPropertiesLoose(_ref, _excluded$1);
+
+  return /*#__PURE__*/React__default.createElement(Flex, {
+    align: "center",
+    gap: 3,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 10,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(Text$1, {
+    color: "secondary",
+    variant: "label",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 11,
+      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$7,
+        lineNumber: 24,
+        columnNumber: 15
+      }
+    }),
+    placement: "top",
+    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'
+      }
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 14,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(Text$1, {
+    color: "secondary",
+    variant: "label",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$7,
+      lineNumber: 54,
+      columnNumber: 7
+    }
+  }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1}-${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} Data`));
+}
+
+const _excluded = ["limit", "currentPage", "totalData", "onLimitChange", "onPageChange"];
+var _jsxFileName$6 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\pagination\\Pagination.js";
+
+function Pagination(_ref) {
+  let {
+    limit,
+    currentPage,
+    totalData,
+    onLimitChange,
+    onPageChange
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const totalPages = Math.ceil(totalData / limit);
+  const isMobile = useMediaQuery('(max-width: 700px)');
+  return /*#__PURE__*/React__default.createElement(Flex, _extends({
+    direction: isMobile ? 'columnReverse' : 'row',
+    align: "center",
+    justify: "between",
+    gap: 5
+  }, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 13,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React__default.createElement(PaginationInfo, {
+    limits: [10, 25, 50, 100],
+    selectedLimit: limit,
+    currentPage: currentPage,
+    totalData: totalData,
+    onChange: onLimitChange,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 14,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(PaginationButton, {
+    currentPage: currentPage,
+    totalPages: totalPages,
+    onSelect: onPageChange,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$6,
+      lineNumber: 21,
+      columnNumber: 7
+    }
+  }));
+}
+
+Pagination.propTypes = {
+  limit: PropTypes.number,
+  currentPage: PropTypes.number,
+  totalData: PropTypes.number,
+  onLimitChange: PropTypes.func,
+  onPageChange: PropTypes.func
+};
+Pagination.displayName = 'Pagination';
+
+var _jsxFileName$5 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\table\\MobileTable.js";
+const TableContainer$1 = styled(Flex, {
+  position: 'relative',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  padding: '0 $spacing-05',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  }
+});
+const TableHeadRow$1 = styled('tr', {
+  borderBottom: '1pt solid $bgBorder',
+  '& th': {
+    paddingLeft: '$spacing-05'
+  },
+  '& th:first-child': {
+    padding: 0
+  }
+});
+const TableHeadCell$1 = styled('th', {
+  height: '40px'
+});
+const TableRow$1 = styled('tr', {
+  borderBottom: '1pt solid $bgBorder',
+  '& td': {
+    paddingLeft: '$spacing-05'
+  },
+  '& td:first-child': {
+    padding: 0
+  }
+});
+const TableCell$1 = styled('td', {
+  height: '40px',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: '400',
+  color: '$textPrimary'
+});
+
+function MobileTable({
+  instance,
+  footer,
+  css
+}) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
     visibleColumns,
     rows,
+    page,
     prepareRow
   } = instance;
   return /*#__PURE__*/React__default.createElement(TableContainer$1, {
+    css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$5,
-      lineNumber: 69,
+      lineNumber: 73,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$5,
-      lineNumber: 70,
+      lineNumber: 74,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(TableHead, {
     __self: this,
     __source: {
       fileName: _jsxFileName$5,
-      lineNumber: 71,
+      lineNumber: 75,
       columnNumber: 9
     }
   }, headerGroups.map(headerGroup => /*#__PURE__*/React__default.createElement(TableHeadRow$1, _extends({}, headerGroup.getHeaderGroupProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$5,
-      lineNumber: 73,
+      lineNumber: 77,
       columnNumber: 13
     }
   }), headerGroup.headers.map(column => {
@@ -10801,14 +11320,14 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 77,
+        lineNumber: 81,
         columnNumber: 19
       }
     }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 79,
+        lineNumber: 83,
         columnNumber: 23
       }
     }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
@@ -10817,7 +11336,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 81,
+        lineNumber: 85,
         columnNumber: 27
       }
     }, headerRender.toUpperCase()), /*#__PURE__*/React__default.createElement(SortingOutline, {
@@ -10825,7 +11344,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 84,
+        lineNumber: 88,
         columnNumber: 27
       }
     }))) : headerRender);
@@ -10833,24 +11352,24 @@ function MobileTable({
     __self: this,
     __source: {
       fileName: _jsxFileName$5,
-      lineNumber: 96,
+      lineNumber: 100,
       columnNumber: 9
     }
-  }), rows.map(row => {
+  }), page.map(row => {
     prepareRow(row);
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: row.id,
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 100,
+        lineNumber: 104,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(TableRow$1, _extends({}, row.getRowProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 101,
+        lineNumber: 105,
         columnNumber: 17
       }
     }), row.cells.map(cell => {
@@ -10858,7 +11377,7 @@ function MobileTable({
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 104,
+          lineNumber: 108,
           columnNumber: 23
         }
       }), cell.column.accessor ? /*#__PURE__*/React__default.createElement(Flex, {
@@ -10871,21 +11390,21 @@ function MobileTable({
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 106,
+          lineNumber: 110,
           columnNumber: 27
         }
       }, cell.render('Cell'), row.isExpanded ? /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 115,
+          lineNumber: 119,
           columnNumber: 47
         }
       }) : /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 115,
+          lineNumber: 119,
           columnNumber: 70
         }
       })) : cell.render('Cell'));
@@ -10893,7 +11412,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 125,
+        lineNumber: 129,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(TableCell$1, {
@@ -10901,7 +11420,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 126,
+        lineNumber: 130,
         columnNumber: 21
       }
     }, /*#__PURE__*/React__default.createElement(Flex, {
@@ -10909,7 +11428,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 127,
+        lineNumber: 131,
         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, {
@@ -10924,7 +11443,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 134,
+        lineNumber: 138,
         columnNumber: 31
       }
     }, /*#__PURE__*/React__default.createElement(Heading$1, {
@@ -10933,7 +11452,7 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 144,
+        lineNumber: 148,
         columnNumber: 33
       }
     }, cell.column.Header.toUpperCase()), cell.render('Cell')) : /*#__PURE__*/React__default.createElement(Flex, {
@@ -10946,21 +11465,47 @@ function MobileTable({
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 150,
+        lineNumber: 154,
         columnNumber: 31
       }
     }, cell.render('Cell')))))) : null);
-  }))));
+  })), /*#__PURE__*/React__default.createElement(TableFoot, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 174,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(TableFootRow, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 175,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(TableFootCell, {
+    colSpan: "100%",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$5,
+      lineNumber: 176,
+      columnNumber: 13
+    }
+  }, footer)))));
 }
 
-var _jsxFileName$4 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/table/Table.js";
-const TableContainer = styled(Flex, {
-  position: 'relative',
+var _jsxFileName$4 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\table\\Table.js";
+const TableContainer = styled('div', {
+  display: 'block',
   flexDirection: 'column',
-  width: '100%',
-  height: '100%'
+  maxWidth: '100%',
+  position: 'relative',
+  height: '100%',
+  overflow: 'auto'
 });
 const TableContent = styled('table', {
+  width: '100%',
+  borderSpacing: 0,
   borderCollapse: 'collapse'
 });
 const TableHead = styled('thead', {
@@ -11052,6 +11597,14 @@ const TableCell = styled('td', {
     }
   }
 });
+const TableFoot = styled('tfoot', {
+  position: 'sticky',
+  bottom: 0,
+  zIndex: 2,
+  backgroundColor: '$bgWhite'
+});
+const TableFootRow = styled('tr');
+const TableFootCell = styled('td', {});
 const addOnCellStyle = id => {
   switch (id) {
     case 'expander':
@@ -11083,26 +11636,101 @@ const getExpandedColSpan = (index, cells, visibleColumns, subRowCells, leftAddOn
   }
 };
 
+const defaultFetchDataParams = {
+  pageIndex: 0,
+  pageSize: 10
+};
+
 function Table({
   columns,
   data,
+  pageIndex: controlledPageIndex,
+  totalData,
+  fetchData,
+  css,
   onSelectedChange
 }) {
+  const [limit, setLimit] = useState(10);
   const instance = useTable({
     columns,
-    data
-  }, useSortBy, useExpanded, useRowSelect);
+    data,
+    initialState: {
+      pageIndex: controlledPageIndex
+    },
+    manualPagination: !!fetchData,
+    manualSortBy: !!fetchData,
+    defaultCanSort: true,
+    pageCount: Math.ceil(totalData / limit),
+    autoResetSortBy: false,
+    autoResetExpanded: false,
+    autoResetPage: false,
+    autoResetSelectedRows: false
+  }, useSortBy, useExpanded, usePagination, useRowSelect);
   const {
     getTableProps,
     getTableBodyProps,
     headerGroups,
     allColumns,
     visibleColumns,
-    rows,
     prepareRow,
+    page,
+    gotoPage,
+    setPageSize,
+    state: {
+      pageIndex,
+      pageSize,
+      sortBy
+    },
     selectedFlatRows
   } = instance;
+
+  const doFetchData = (pageIndex, pageSize, sortAccessor = sortBy.length > 0 ? sortBy[0].id : undefined, sortDirection = sortBy.length > 0 ? sortBy[0].desc ? 'DESC' : 'ASC' : undefined) => {
+    const fetchParams = removeUndefinedFields({
+      pageIndex,
+      pageSize,
+      sortAccessor,
+      sortDirection
+    });
+    if (fetchData) fetchData(fetchParams);
+  };
+
+  useEffect(() => {
+    gotoPage(controlledPageIndex);
+  }, [controlledPageIndex]);
+  useEffect(() => {
+    if (data && data.length > 0) doFetchData(0, pageSize);
+  }, [sortBy]);
   const isMobile = useMediaQuery('(max-width: 1024px)');
+
+  const renderFooter = () => /*#__PURE__*/React__default.createElement(Pagination, {
+    limit: pageSize,
+    currentPage: pageIndex + 1,
+    totalData: totalData,
+    onLimitChange: selectedItem => {
+      if (selectedItem) {
+        doFetchData(pageIndex, selectedItem);
+        setPageSize(selectedItem);
+        setLimit(selectedItem);
+      }
+    },
+    onPageChange: page => {
+      doFetchData(page - 1, pageSize);
+      gotoPage(page - 1);
+    },
+    css: {
+      padding: '$spacing-04',
+      '@md': {
+        padding: '$spacing-06'
+      }
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 225,
+      columnNumber: 5
+    }
+  });
+
   useEffect(() => {
     if (isMobile) {
       allColumns.map(column => {
@@ -11123,31 +11751,32 @@ function Table({
     if (onSelectedChange) onSelectedChange(selectedFlatRows.map(row => row.values));
   }, [selectedFlatRows]);
   return !isMobile ? /*#__PURE__*/React__default.createElement(TableContainer, {
+    css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 194,
+      lineNumber: 268,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 195,
+      lineNumber: 269,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(TableHead, {
     __self: this,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 196,
+      lineNumber: 270,
       columnNumber: 9
     }
   }, headerGroups.map(headerGroup => /*#__PURE__*/React__default.createElement(TableHeadRow, _extends({}, headerGroup.getHeaderGroupProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 198,
+      lineNumber: 272,
       columnNumber: 13
     }
   }), headerGroup.headers.filter(column => !column.isSubRow).map(column => {
@@ -11156,14 +11785,14 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 204,
+        lineNumber: 278,
         columnNumber: 21
       }
     }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 206,
+        lineNumber: 280,
         columnNumber: 25
       }
     }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
@@ -11171,7 +11800,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 208,
+        lineNumber: 282,
         columnNumber: 29
       }
     }, headerRender.toUpperCase()), /*#__PURE__*/React__default.createElement(SortingOutline, {
@@ -11180,7 +11809,7 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 211,
+        lineNumber: 285,
         columnNumber: 29
       }
     }))) : headerRender);
@@ -11188,10 +11817,10 @@ function Table({
     __self: this,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 223,
+      lineNumber: 297,
       columnNumber: 9
     }
-  }), rows.map((row, i) => {
+  }), page.map((row, i) => {
     var _row$cells$filter, _row$cells$filter2;
 
     prepareRow(row);
@@ -11204,21 +11833,21 @@ function Table({
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 231,
+        lineNumber: 305,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, row.getRowProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 232,
+        lineNumber: 306,
         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$4,
-        lineNumber: 236,
+        lineNumber: 310,
         columnNumber: 23
       }
     }), cell.render('Cell')))), row.isExpanded ? cellArrays.map((cells, index) => {
@@ -11228,7 +11857,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 244,
+          lineNumber: 318,
           columnNumber: 25
         }
       }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default.createElement("td", {
@@ -11236,7 +11865,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 246,
+          lineNumber: 320,
           columnNumber: 29
         }
       })), cells.map((cell, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -11244,7 +11873,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 249,
+          lineNumber: 323,
           columnNumber: 29
         }
       }, /*#__PURE__*/React__default.createElement(TableCell, {
@@ -11253,7 +11882,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 250,
+          lineNumber: 324,
           columnNumber: 31
         }
       }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11261,7 +11890,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 251,
+          lineNumber: 325,
           columnNumber: 33
         }
       }, cell.column.Header)), /*#__PURE__*/React__default.createElement(TableCell, {
@@ -11270,7 +11899,7 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 253,
+          lineNumber: 327,
           columnNumber: 31
         }
       }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -11278,17 +11907,41 @@ function Table({
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 264,
+          lineNumber: 338,
           columnNumber: 33
         }
       }, cell.render('Cell'))))));
     }) : null);
-  })))) : /*#__PURE__*/React__default.createElement(MobileTable, {
+  })), /*#__PURE__*/React__default.createElement(TableFoot, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 350,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/React__default.createElement(TableFootRow, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 351,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React__default.createElement(TableFootCell, {
+    colSpan: "100%",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 352,
+      columnNumber: 13
+    }
+  }, renderFooter()))))) : /*#__PURE__*/React__default.createElement(MobileTable, {
     instance: instance,
+    footer: renderFooter(),
+    css: css,
     __self: this,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 279,
+      lineNumber: 358,
       columnNumber: 5
     }
   });
@@ -11297,11 +11950,14 @@ function Table({
 Table.propTypes = {
   data: PropTypes.arrayOf(PropTypes.object),
   column: PropTypes.arrayOf(PropTypes.object),
+  totalData: PropTypes.number,
+  fetchData: PropTypes.func,
+  css: PropTypes.object,
   onSelectedChange: PropTypes.func
 };
 Table.displayName = 'Table';
 
-var _jsxFileName$3 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/table/components/columns/DateColumn.js";
+var _jsxFileName$3 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\DateColumn.js";
 
 const DateColumn = ({
   value
@@ -11330,11 +11986,11 @@ DateColumn.defaultProps = {
   value: undefined
 };
 
-var uncurryThis$9 = functionUncurryThis;
+var uncurryThis$8 = functionUncurryThis;
 
 // `thisNumberValue` abstract operation
 // https://tc39.es/ecma262/#sec-thisnumbervalue
-var thisNumberValue$1 = uncurryThis$9(1.0.valueOf);
+var thisNumberValue$1 = uncurryThis$8(1.0.valueOf);
 
 var global$5 = global$A;
 var toIntegerOrInfinity$3 = toIntegerOrInfinity$6;
@@ -11356,18 +12012,18 @@ var stringRepeat = function repeat(count) {
 
 var $$1 = _export;
 var global$4 = global$A;
-var uncurryThis$8 = functionUncurryThis;
+var uncurryThis$7 = functionUncurryThis;
 var toIntegerOrInfinity$2 = toIntegerOrInfinity$6;
 var thisNumberValue = thisNumberValue$1;
 var $repeat = stringRepeat;
-var fails$5 = fails$k;
+var fails$4 = fails$k;
 
 var RangeError = global$4.RangeError;
 var String$1 = global$4.String;
 var floor$1 = Math.floor;
-var repeat = uncurryThis$8($repeat);
-var stringSlice$4 = uncurryThis$8(''.slice);
-var un$ToFixed = uncurryThis$8(1.0.toFixed);
+var repeat = uncurryThis$7($repeat);
+var stringSlice$4 = uncurryThis$7(''.slice);
+var un$ToFixed = uncurryThis$7(1.0.toFixed);
 
 var pow = function (x, n, acc) {
   return n === 0 ? acc : n % 2 === 1 ? pow(x, n - 1, acc * x) : pow(x * x, n / 2, acc);
@@ -11417,12 +12073,12 @@ var dataToString = function (data) {
   } return s;
 };
 
-var FORCED$1 = fails$5(function () {
+var FORCED$1 = fails$4(function () {
   return un$ToFixed(0.00008, 3) !== '0.000' ||
     un$ToFixed(0.9, 0) !== '1' ||
     un$ToFixed(1.255, 2) !== '1.25' ||
     un$ToFixed(1000000000000000128.0, 0) !== '1000000000000000128';
-}) || !fails$5(function () {
+}) || !fails$4(function () {
   // V8 ~ Android 4.3-
   un$ToFixed({});
 });
@@ -11490,12 +12146,12 @@ $$1({ target: 'Number', proto: true, forced: FORCED$1 }, {
 var whitespaces$2 = '\u0009\u000A\u000B\u000C\u000D\u0020\u00A0\u1680\u2000\u2001\u2002' +
   '\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028\u2029\uFEFF';
 
-var uncurryThis$7 = functionUncurryThis;
+var uncurryThis$6 = functionUncurryThis;
 var requireObjectCoercible$3 = requireObjectCoercible$a;
 var toString$4 = toString$a;
 var whitespaces$1 = whitespaces$2;
 
-var replace$1 = uncurryThis$7(''.replace);
+var replace$1 = uncurryThis$6(''.replace);
 var whitespace = '[' + whitespaces$1 + ']';
 var ltrim = RegExp('^' + whitespace + whitespace + '*');
 var rtrim = RegExp(whitespace + whitespace + '*$');
@@ -11523,19 +12179,19 @@ var stringTrim = {
 };
 
 var global$3 = global$A;
-var fails$4 = fails$k;
-var uncurryThis$6 = functionUncurryThis;
+var fails$3 = fails$k;
+var uncurryThis$5 = functionUncurryThis;
 var toString$3 = toString$a;
 var trim = stringTrim.trim;
 var whitespaces = whitespaces$2;
 
-var charAt$3 = uncurryThis$6(''.charAt);
+var charAt$3 = uncurryThis$5(''.charAt);
 var n$ParseFloat = global$3.parseFloat;
 var Symbol$1 = global$3.Symbol;
 var ITERATOR = Symbol$1 && Symbol$1.iterator;
 var FORCED = 1 / n$ParseFloat(whitespaces + '-0') !== -Infinity
   // MS Edge 18- broken with boxed symbols
-  || (ITERATOR && !fails$4(function () { n$ParseFloat(Object(ITERATOR)); }));
+  || (ITERATOR && !fails$3(function () { n$ParseFloat(Object(ITERATOR)); }));
 
 // `parseFloat` method
 // https://tc39.es/ecma262/#sec-parsefloat-string
@@ -11565,8 +12221,8 @@ var functionApply = typeof Reflect == 'object' && Reflect.apply || (NATIVE_BIND
   return call$2.apply(apply$2, arguments);
 });
 
-var uncurryThis$5 = functionUncurryThis;
-var fails$3 = fails$k;
+var uncurryThis$4 = functionUncurryThis;
+var fails$2 = fails$k;
 var isCallable$1 = isCallable$h;
 var classof = classof$4;
 var getBuiltIn = getBuiltIn$5;
@@ -11576,7 +12232,7 @@ var noop = function () { /* empty */ };
 var empty = [];
 var construct = getBuiltIn('Reflect', 'construct');
 var constructorRegExp = /^\s*(?:class|function)\b/;
-var exec$1 = uncurryThis$5(constructorRegExp.exec);
+var exec$1 = uncurryThis$4(constructorRegExp.exec);
 var INCORRECT_TO_STRING = !constructorRegExp.exec(noop);
 
 var isConstructorModern = function isConstructor(argument) {
@@ -11610,7 +12266,7 @@ isConstructorLegacy.sham = true;
 
 // `IsConstructor` abstract operation
 // https://tc39.es/ecma262/#sec-isconstructor
-var isConstructor$1 = !construct || fails$3(function () {
+var isConstructor$1 = !construct || fails$2(function () {
   var called;
   return isConstructorModern(isConstructorModern.call)
     || !isConstructorModern(Object)
@@ -11630,7 +12286,7 @@ var aConstructor$1 = function (argument) {
   throw TypeError$1(tryToString(argument) + ' is not a constructor');
 };
 
-var anObject$3 = anObject$c;
+var anObject$2 = anObject$c;
 var aConstructor = aConstructor$1;
 var wellKnownSymbol$1 = wellKnownSymbol$d;
 
@@ -11639,19 +12295,19 @@ var SPECIES = wellKnownSymbol$1('species');
 // `SpeciesConstructor` abstract operation
 // https://tc39.es/ecma262/#sec-speciesconstructor
 var speciesConstructor$1 = function (O, defaultConstructor) {
-  var C = anObject$3(O).constructor;
+  var C = anObject$2(O).constructor;
   var S;
-  return C === undefined || (S = anObject$3(C)[SPECIES]) == undefined ? defaultConstructor : aConstructor(S);
+  return C === undefined || (S = anObject$2(C)[SPECIES]) == undefined ? defaultConstructor : aConstructor(S);
 };
 
-var uncurryThis$4 = functionUncurryThis;
+var uncurryThis$3 = functionUncurryThis;
 var toIntegerOrInfinity$1 = toIntegerOrInfinity$6;
 var toString$2 = toString$a;
 var requireObjectCoercible$2 = requireObjectCoercible$a;
 
-var charAt$2 = uncurryThis$4(''.charAt);
-var charCodeAt = uncurryThis$4(''.charCodeAt);
-var stringSlice$3 = uncurryThis$4(''.slice);
+var charAt$2 = uncurryThis$3(''.charAt);
+var charCodeAt = uncurryThis$3(''.charCodeAt);
+var stringSlice$3 = uncurryThis$3(''.slice);
 
 var createMethod = function (CONVERT_TO_STRING) {
   return function ($this, pos) {
@@ -11719,10 +12375,10 @@ var arraySliceSimple = function (O, start, end) {
 
 var apply$1 = functionApply;
 var call$1 = functionCall;
-var uncurryThis$3 = functionUncurryThis;
+var uncurryThis$2 = functionUncurryThis;
 var fixRegExpWellKnownSymbolLogic$1 = fixRegexpWellKnownSymbolLogic;
 var isRegExp = isRegexp;
-var anObject$2 = anObject$c;
+var anObject$1 = anObject$c;
 var requireObjectCoercible$1 = requireObjectCoercible$a;
 var speciesConstructor = speciesConstructor$1;
 var advanceStringIndex$1 = advanceStringIndex$2;
@@ -11733,19 +12389,19 @@ var arraySlice = arraySliceSimple;
 var callRegExpExec = regexpExecAbstract;
 var regexpExec = regexpExec$3;
 var stickyHelpers = regexpStickyHelpers;
-var fails$2 = fails$k;
+var fails$1 = fails$k;
 
 var UNSUPPORTED_Y = stickyHelpers.UNSUPPORTED_Y;
 var MAX_UINT32 = 0xFFFFFFFF;
 var min$1 = Math.min;
 var $push = [].push;
-var exec = uncurryThis$3(/./.exec);
-var push$1 = uncurryThis$3($push);
-var stringSlice$2 = uncurryThis$3(''.slice);
+var exec = uncurryThis$2(/./.exec);
+var push$1 = uncurryThis$2($push);
+var stringSlice$2 = uncurryThis$2(''.slice);
 
 // Chrome 51 has a buggy "split" implementation when RegExp#exec !== nativeExec
 // Weex JS has frozen built-in prototypes, so use try / catch wrapper
-var SPLIT_WORKS_WITH_OVERWRITTEN_EXEC = !fails$2(function () {
+var SPLIT_WORKS_WITH_OVERWRITTEN_EXEC = !fails$1(function () {
   // eslint-disable-next-line regexp/no-empty-group -- required for testing
   var re = /(?:)/;
   var originalExec = re.exec;
@@ -11825,7 +12481,7 @@ fixRegExpWellKnownSymbolLogic$1('split', function (SPLIT, nativeSplit, maybeCall
     // NOTE: This cannot be properly polyfilled in engines that don't support
     // the 'y' flag.
     function (string, limit) {
-      var rx = anObject$2(this);
+      var rx = anObject$1(this);
       var S = toString$1(string);
       var res = maybeCallNative(internalSplit, rx, S, limit, internalSplit !== nativeSplit);
 
@@ -11873,13 +12529,13 @@ fixRegExpWellKnownSymbolLogic$1('split', function (SPLIT, nativeSplit, maybeCall
   ];
 }, !SPLIT_WORKS_WITH_OVERWRITTEN_EXEC, UNSUPPORTED_Y);
 
-var uncurryThis$2 = functionUncurryThis;
+var uncurryThis$1 = functionUncurryThis;
 var toObject = toObject$4;
 
 var floor = Math.floor;
-var charAt = uncurryThis$2(''.charAt);
-var replace = uncurryThis$2(''.replace);
-var stringSlice$1 = uncurryThis$2(''.slice);
+var charAt = uncurryThis$1(''.charAt);
+var replace = uncurryThis$1(''.replace);
+var stringSlice$1 = uncurryThis$1(''.slice);
 var SUBSTITUTION_SYMBOLS = /\$([$&'`]|\d{1,2}|<[^>]*>)/g;
 var SUBSTITUTION_SYMBOLS_NO_NAMED = /\$([$&'`]|\d{1,2})/g;
 
@@ -11920,10 +12576,10 @@ var getSubstitution$1 = function (matched, str, position, captures, namedCapture
 
 var apply = functionApply;
 var call = functionCall;
-var uncurryThis$1 = functionUncurryThis;
+var uncurryThis = functionUncurryThis;
 var fixRegExpWellKnownSymbolLogic = fixRegexpWellKnownSymbolLogic;
-var fails$1 = fails$k;
-var anObject$1 = anObject$c;
+var fails = fails$k;
+var anObject = anObject$c;
 var isCallable = isCallable$h;
 var toIntegerOrInfinity = toIntegerOrInfinity$6;
 var toLength = toLength$4;
@@ -11938,10 +12594,10 @@ var wellKnownSymbol = wellKnownSymbol$d;
 var REPLACE = wellKnownSymbol('replace');
 var max = Math.max;
 var min = Math.min;
-var concat = uncurryThis$1([].concat);
-var push = uncurryThis$1([].push);
-var stringIndexOf = uncurryThis$1(''.indexOf);
-var stringSlice = uncurryThis$1(''.slice);
+var concat = uncurryThis([].concat);
+var push = uncurryThis([].push);
+var stringIndexOf = uncurryThis(''.indexOf);
+var stringSlice = uncurryThis(''.slice);
 
 var maybeToString = function (it) {
   return it === undefined ? it : String(it);
@@ -11962,7 +12618,7 @@ var REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE = (function () {
   return false;
 })();
 
-var REPLACE_SUPPORTS_NAMED_GROUPS = !fails$1(function () {
+var REPLACE_SUPPORTS_NAMED_GROUPS = !fails(function () {
   var re = /./;
   re.exec = function () {
     var result = [];
@@ -11990,7 +12646,7 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
     // `RegExp.prototype[@@replace]` method
     // https://tc39.es/ecma262/#sec-regexp.prototype-@@replace
     function (string, replaceValue) {
-      var rx = anObject$1(this);
+      var rx = anObject(this);
       var S = toString(string);
 
       if (
@@ -12054,36 +12710,6 @@ fixRegExpWellKnownSymbolLogic('replace', function (_, nativeReplace, maybeCallNa
   ];
 }, !REPLACE_SUPPORTS_NAMED_GROUPS || !REPLACE_KEEPS_$0 || REGEXP_REPLACE_SUBSTITUTES_UNDEFINED_CAPTURE);
 
-var uncurryThis = functionUncurryThis;
-var PROPER_FUNCTION_NAME = functionName.PROPER;
-var redefine = redefine$5.exports;
-var anObject = anObject$c;
-var isPrototypeOf = objectIsPrototypeOf;
-var $toString = toString$a;
-var fails = fails$k;
-var regExpFlags = regexpFlags$1;
-
-var TO_STRING = 'toString';
-var RegExpPrototype = RegExp.prototype;
-var n$ToString = RegExpPrototype[TO_STRING];
-var getFlags = uncurryThis(regExpFlags);
-
-var NOT_GENERIC = fails(function () { return n$ToString.call({ source: 'a', flags: 'b' }) != '/a/b'; });
-// FF44- RegExp#toString has a wrong name
-var INCORRECT_NAME = PROPER_FUNCTION_NAME && n$ToString.name != TO_STRING;
-
-// `RegExp.prototype.toString` method
-// https://tc39.es/ecma262/#sec-regexp.prototype.tostring
-if (NOT_GENERIC || INCORRECT_NAME) {
-  redefine(RegExp.prototype, TO_STRING, function toString() {
-    var R = anObject(this);
-    var p = $toString(R.source);
-    var rf = R.flags;
-    var f = $toString(rf === undefined && isPrototypeOf(RegExpPrototype, R) && !('flags' in RegExpPrototype) ? getFlags(R) : rf);
-    return '/' + p + '/' + f;
-  }, { unsafe: true });
-}
-
 const numSeparator = num => {
   const toFixedNum = parseFloat(num).toFixed(2); // set two decimal places
 
@@ -12168,7 +12794,7 @@ const PriceColumn = props => {
   return addThousandSeparator(param);
 };
 
-var _jsxFileName$2 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/table/components/columns/RowExpanderColumn.js";
+var _jsxFileName$2 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowExpanderColumn.js";
 const rowExpanderColumn = {
   id: 'expander',
   Header: () => null,
@@ -12195,20 +12821,37 @@ const rowExpanderColumn = {
       lineNumber: 9,
       columnNumber: 50
     }
-  }))
+  })),
+  canSort: false
 };
 
-var _jsxFileName$1 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/table/components/columns/RowMenuColumn.js";
+var _jsxFileName$1 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowMenuColumn.js";
 const MenuContainer = styled(Flex, {
   boxShadow: '0px 0px 8px rgba(131, 131, 131, 0.16)',
   borderRadius: '$sm'
 });
-const MenuTriggerButton = styled(PopoverTrigger, IconButton);
+const MenuTriggerButton = styled(PopoverTrigger, {
+  cursor: 'pointer',
+  borderRadius: '$round',
+  size: '24px',
+  padding: '$spacing-01',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: 'white',
+  '&:hover': {
+    backgroundColor: '$bgGray',
+    color: '$textGreen'
+  },
+  '&:active': {
+    backgroundColor: '$gray100'
+  }
+});
 
 const rowMenuColumn = options => ({
   id: 'menu',
   Header: () => null,
-  Cell: () => {
+  Cell: props => {
     const [open, setOpen] = useState(false);
     return /*#__PURE__*/React__default.createElement(Popover, {
       open: open,
@@ -12216,29 +12859,28 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 22,
+        lineNumber: 37,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(MenuTriggerButton, {
-      buttonType: "secondary",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 23,
+        lineNumber: 38,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 24,
+        lineNumber: 39,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(PopoverContent, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 26,
+        lineNumber: 41,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(MenuContainer, {
@@ -12246,7 +12888,7 @@ const rowMenuColumn = options => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 27,
+        lineNumber: 42,
         columnNumber: 11
       }
     }, options.map(option => /*#__PURE__*/React__default.createElement(Button$1, {
@@ -12254,19 +12896,20 @@ const rowMenuColumn = options => ({
       buttonType: "tableMenu",
       onClick: () => {
         setOpen(false);
-        option.onClick();
+        option.onClick(props);
       },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 29,
+        lineNumber: 44,
         columnNumber: 15
       }
     }, option.title)))));
-  }
+  },
+  canSort: false
 });
 
-var _jsxFileName = "/home/omegalord666/work/majoo-ui/packages/react/src/components/table/components/columns/RowSelectionColumn.js";
+var _jsxFileName = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\table\\components\\columns\\RowSelectionColumn.js";
 const rowSelectionColumn = {
   id: 'selection',
   Header: ({
@@ -12293,7 +12936,8 @@ const rowSelectionColumn = {
       lineNumber: 13,
       columnNumber: 5
     }
-  }))
+  })),
+  canSort: false
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, Alert, AlertDescription, AlertIcon, AlertTitle, Avatar, Badge, Box$1 as Box, BoxComponent, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, Card, CardComponent, CardLineColor, DateColumn, DatePicker, DecimalColumn, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, Flex, FormHelper, FormLabel, Grid, GridItem, Heading$1 as Heading, IconButton, Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, MajooProvider, NotificationBadge, Paper, PaperComponent, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress, RANGE_PICKER, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator, Slider, StyledTitle$1 as StyledTitle, Table, TableBody, TableContent, TableHead, TableHeadCellContent, TableHeaderCellContainer, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text$1 as Text, ToastContext, Tooltip, addOnCellStyle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, Alert, AlertDescription, AlertIcon, AlertTitle, Avatar, Badge, Box$1 as Box, BoxComponent, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, Card, CardComponent, CardLineColor, DateColumn, DatePicker, DecimalColumn, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, Flex, FormHelper, FormLabel, Grid, GridItem, Heading$1 as Heading, IconButton, Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, MajooProvider, MobileTable, NotificationBadge, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress, RANGE_PICKER, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Separator, Slider, StyledTitle$1 as StyledTitle, Table, TableBody, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text$1 as Text, ToastContext, Tooltip, addOnCellStyle, defaultFetchDataParams };