@majoo-ui/react 1.28.0 → 1.29.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/helpers'), require('react-transition-group'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-switch'), require('downshift'), require('@radix-ui/react-popover'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-dom'), require('react-table'), require('moment')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/helpers', 'react-transition-group', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', '@radix-ui/react-switch', 'downshift', '@radix-ui/react-popover', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-dom', 'react-table', 'moment'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.helpers, global.reactTransitionGroup, global.MajooIcons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.Downshift, global.PopoverPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.ReactDOM, global.reactTable, global.moment));
-})(this, (function (exports, React, PropTypes, react, core, helpers, reactTransitionGroup, MajooIcons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, PopoverPrimitive, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactDom, reactTable, moment) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/helpers'), require('react-transition-group'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-switch'), require('downshift'), require('@radix-ui/react-popover'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-dom'), require('react-table'), require('moment'), require('lodash.debounce')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/helpers', 'react-transition-group', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', '@radix-ui/react-switch', 'downshift', '@radix-ui/react-popover', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-dom', 'react-table', 'moment', 'lodash.debounce'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.helpers, global.reactTransitionGroup, global.MajooIcons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.Downshift, global.PopoverPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.ReactDOM, global.reactTable, global.moment, global.debounce));
+})(this, (function (exports, React, PropTypes, react, core, helpers, reactTransitionGroup, MajooIcons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, PopoverPrimitive, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactDom, reactTable, moment, debounce) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,8 +44,9 @@
   var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
   var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+  var debounce__default = /*#__PURE__*/_interopDefaultLegacy(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,
@@ -55,7 +56,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$Q,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -1884,8 +1885,8 @@
 
   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',
@@ -1899,7 +1900,7 @@
       textColor,
       padding
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
     return /*#__PURE__*/React__default["default"].createElement(BoxComponent, _extends({
       className: className
@@ -1911,7 +1912,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$P,
         lineNumber: 12,
         columnNumber: 3
       }
@@ -2059,9 +2060,9 @@
   };
   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: {
@@ -2235,7 +2236,7 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -2246,7 +2247,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$O,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2302,7 +2303,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$O,
         lineNumber: 230,
         columnNumber: 5
       }
@@ -2319,8 +2320,8 @@
   };
   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',
@@ -2542,7 +2543,7 @@
       rightIcon,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
     return /*#__PURE__*/React__default["default"].createElement(ButtonComponent, _extends({
       className: className,
@@ -2559,28 +2560,28 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$N,
         lineNumber: 240,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$N,
         lineNumber: 251,
         columnNumber: 33
       }
     }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$N,
         lineNumber: 252,
         columnNumber: 15
       }
     }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$N,
         lineNumber: 253,
         columnNumber: 34
       }
@@ -2606,8 +2607,8 @@
     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;
@@ -2714,7 +2715,7 @@
       actionText,
       onRemove
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const close = React__namespace.useCallback(() => {
@@ -2743,7 +2744,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$M,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -2753,7 +2754,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$M,
         lineNumber: 144,
         columnNumber: 9
       }
@@ -2761,7 +2762,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$M,
         lineNumber: 145,
         columnNumber: 11
       }
@@ -2772,14 +2773,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$M,
         lineNumber: 146,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement(Text$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$M,
         lineNumber: 152,
         columnNumber: 15
       }
@@ -2789,7 +2790,7 @@
       css: {},
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$M,
         lineNumber: 155,
         columnNumber: 15
       }
@@ -2804,7 +2805,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$M,
         lineNumber: 157,
         columnNumber: 17
       }
@@ -2827,7 +2828,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.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',
@@ -2844,7 +2845,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$L,
         lineNumber: 19,
         columnNumber: 5
       }
@@ -2852,7 +2853,7 @@
       padding: 0,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
+        fileName: _jsxFileName$L,
         lineNumber: 20,
         columnNumber: 7
       }
@@ -2864,7 +2865,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$I,
+          fileName: _jsxFileName$L,
           lineNumber: 24,
           columnNumber: 13
         }
@@ -2872,8 +2873,8 @@
     })));
   };
 
-  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 = ({
@@ -2885,7 +2886,7 @@
       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;
@@ -2910,7 +2911,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$K,
         lineNumber: 40,
         columnNumber: 5
       }
@@ -2918,14 +2919,14 @@
       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,
@@ -2938,14 +2939,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$J,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$J,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -2997,7 +2998,7 @@
       return t;
   }
 
-  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__*/React.createContext();
 
   const AlertProvider = ({
@@ -3014,14 +3015,14 @@
       },
       __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,
@@ -3162,14 +3163,14 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertProvider, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$H,
         lineNumber: 163,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(AlertContent, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$H,
         lineNumber: 164,
         columnNumber: 7
       }
@@ -3187,7 +3188,7 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$H,
         lineNumber: 175,
         columnNumber: 10
       }
@@ -3211,7 +3212,7 @@
             color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$E,
+              fileName: _jsxFileName$H,
               lineNumber: 184,
               columnNumber: 16
             }
@@ -3222,7 +3223,7 @@
             color: variantAlert === 'solid' ? 'white' : ' #DF2A36',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$E,
+              fileName: _jsxFileName$H,
               lineNumber: 186,
               columnNumber: 16
             }
@@ -3233,7 +3234,7 @@
             color: variantAlert === 'solid' ? 'white' : '#0197F4',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$E,
+              fileName: _jsxFileName$H,
               lineNumber: 188,
               columnNumber: 16
             }
@@ -3244,7 +3245,7 @@
             color: variantAlert === 'solid' ? 'white' : ' #FE7F2D',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$E,
+              fileName: _jsxFileName$H,
               lineNumber: 190,
               columnNumber: 16
             }
@@ -3255,7 +3256,7 @@
             color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$E,
+              fileName: _jsxFileName$H,
               lineNumber: 192,
               columnNumber: 16
             }
@@ -3266,7 +3267,7 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertIconStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$H,
         lineNumber: 195,
         columnNumber: 10
       }
@@ -3290,8 +3291,8 @@
   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',
@@ -3429,7 +3430,7 @@
       textColor,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
     return /*#__PURE__*/React__default["default"].createElement(CardComponent, {
       className: className,
@@ -3442,7 +3443,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$G,
         lineNumber: 104,
         columnNumber: 5
       }
@@ -3450,14 +3451,14 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$G,
         lineNumber: 115,
         columnNumber: 7
       }
     }), title !== '' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledTitle$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$G,
         lineNumber: 119,
         columnNumber: 13
       }
@@ -3466,14 +3467,14 @@
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$G,
         lineNumber: 120,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$G,
         lineNumber: 126,
         columnNumber: 13
       }
@@ -3714,8 +3715,8 @@
 
   Paragraph.displayName = 'Paragraph';
 
-  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': {
@@ -3761,7 +3762,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$F,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -3772,20 +3773,20 @@
     let {
       children
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$F,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$F,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -3989,8 +3990,8 @@
 
   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__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -4034,7 +4035,7 @@
       onClick,
       css
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
@@ -4043,7 +4044,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4053,7 +4054,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4061,21 +4062,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 48,
         columnNumber: 7
       }
     }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4092,8 +4093,8 @@
     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',
@@ -4116,7 +4117,7 @@
       objectFit,
       fallback
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledImage, _extends({
       className: className,
@@ -4131,7 +4132,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$D,
         lineNumber: 20,
         columnNumber: 9
       }
@@ -4151,8 +4152,8 @@
     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,
@@ -4257,14 +4258,14 @@
       color,
       withClick
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
     const [open, setOpen] = React.useState(false);
     return /*#__PURE__*/React__default["default"].createElement(TooltipBase, _extends({}, rest, {
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$C,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4272,7 +4273,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$C,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4280,7 +4281,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$C,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4289,7 +4290,7 @@
       css: color === 'dark' ? dark : ligth,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$C,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -4297,7 +4298,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$C,
         lineNumber: 95,
         columnNumber: 9
       }
@@ -4313,8 +4314,8 @@
     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 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -4432,7 +4433,7 @@
       rounded,
       width
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledProgress, _extends({
       className: className,
@@ -4448,7 +4449,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$B,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -4461,7 +4462,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$B,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -4484,8 +4485,8 @@
     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__namespace.Root, Text$1, {
     display: 'inline-block',
     fontSize: '$label',
@@ -4516,13 +4517,13 @@
       count,
       maxCount
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex, {
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$A,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -4532,7 +4533,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$A,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -4541,7 +4542,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$A,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -4556,7 +4557,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$A,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -4564,14 +4565,14 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$A,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$A,
         lineNumber: 57,
         columnNumber: 13
       }
@@ -4580,7 +4581,7 @@
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$A,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -4596,8 +4597,8 @@
   };
   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',
@@ -4615,7 +4616,7 @@
       children,
       error
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
       error: error,
@@ -4623,7 +4624,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$z,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -4635,7 +4636,7 @@
   };
   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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -4653,7 +4654,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$y,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4665,7 +4666,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$y,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4677,13 +4678,13 @@
     },
     __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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -4701,7 +4702,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$x,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4713,7 +4714,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$x,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4725,14 +4726,14 @@
     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__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -4789,7 +4790,7 @@
       disabled,
       onCheckedChange
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -4799,28 +4800,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 56,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 63,
         columnNumber: 5
       }
     }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 63,
         columnNumber: 39
       }
     }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 63,
         columnNumber: 58
       }
@@ -4834,14 +4835,14 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 69,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 70,
         columnNumber: 7
       }
@@ -4857,14 +4858,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 71,
         columnNumber: 7
       }
     }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -4880,8 +4881,8 @@
   };
   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%',
@@ -4994,7 +4995,7 @@
       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');
@@ -5018,7 +5019,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$v,
         lineNumber: 143,
         columnNumber: 10
       }
@@ -5272,6 +5273,17 @@
             border: '1px solid $colors$red400'
           }
         }
+      },
+      isDatePicker: {
+        true: {
+          fontSize: '$placeholder',
+          letterSpacing: '$placeholder',
+          lineHeight: '$placeholder',
+          fontVariantNumeric: 'unset',
+          caretColor: 'transparent',
+          cursor: 'pointer',
+          padding: '0'
+        }
       }
     },
     defaultVariants: {
@@ -5320,8 +5332,8 @@
   };
   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',
@@ -5398,14 +5410,14 @@
       id,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex, {
       align: "start",
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 82,
         columnNumber: 3
       }
@@ -5415,14 +5427,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 83,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 84,
         columnNumber: 7
       }
@@ -5439,7 +5451,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -5482,8 +5494,8 @@
   };
   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',
@@ -5559,7 +5571,7 @@
       leftIcon,
       rightIcon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
     return /*#__PURE__*/React__default["default"].createElement(TagComponent, _extends({
       ref: ref,
@@ -5571,21 +5583,21 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$t,
         lineNumber: 54,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["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["default"].createElement(StyledIconRight$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$t,
         lineNumber: 65,
         columnNumber: 34
       }
@@ -5604,8 +5616,8 @@
     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',
@@ -5724,7 +5736,7 @@
       readOnly,
       max
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
     const [tags, setTags] = React__default["default"].useState(value || []);
 
@@ -5754,14 +5766,14 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 129,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(TagContainer, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 139,
         columnNumber: 7
       }
@@ -5772,7 +5784,7 @@
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$p,
+          fileName: _jsxFileName$s,
           lineNumber: 144,
           columnNumber: 24
         }
@@ -5786,7 +5798,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 141,
         columnNumber: 11
       }
@@ -5800,7 +5812,7 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 157,
         columnNumber: 7
       }
@@ -5825,8 +5837,8 @@
     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__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -5898,7 +5910,7 @@
       dataOffLabel,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSwitch, _extends({
       defaultChecked: defaultChecked,
@@ -5909,14 +5921,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$r,
         lineNumber: 66,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledThumb$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$r,
         lineNumber: 74,
         columnNumber: 5
       }
@@ -5934,7 +5946,7 @@
   };
   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__namespace.createElement("svg", _extends({
     width: props.size,
@@ -5944,7 +5956,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$q,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5953,7 +5965,7 @@
     fill: "white",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$q,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -5963,7 +5975,7 @@
     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
     }
@@ -5974,7 +5986,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$q,
       lineNumber: 12,
       columnNumber: 5
     }
@@ -5984,7 +5996,7 @@
     mask: "url(#path-1-inside-1_2883_7918)",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$q,
       lineNumber: 18,
       columnNumber: 5
     }
@@ -5995,7 +6007,7 @@
     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__namespace.createElement("svg", _extends({
     width: props.size,
@@ -6005,7 +6017,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$m,
+      fileName: _jsxFileName$p,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -6017,7 +6029,7 @@
     strokeWidth: 2,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$m,
+      fileName: _jsxFileName$p,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -6026,7 +6038,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$m,
+      fileName: _jsxFileName$p,
       lineNumber: 6,
       columnNumber: 5
     }
@@ -6037,15 +6049,15 @@
     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["default"].useState('');
     const handleChange = React__default["default"].useCallback(e => {
@@ -6067,7 +6079,7 @@
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$o,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -6075,14 +6087,14 @@
       children: /*#__PURE__*/React__default["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
       }
@@ -6092,7 +6104,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$o,
         lineNumber: 30,
         columnNumber: 7
       }
@@ -6100,14 +6112,14 @@
       children: value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$l,
+          fileName: _jsxFileName$o,
           lineNumber: 31,
           columnNumber: 55
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$l,
+          fileName: _jsxFileName$o,
           lineNumber: 31,
           columnNumber: 73
         }
@@ -6115,7 +6127,7 @@
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$o,
         lineNumber: 31,
         columnNumber: 7
       }
@@ -6598,8 +6610,8 @@
     }
   });
 
-  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";
+  const _excluded$b = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "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',
@@ -6714,7 +6726,24 @@
     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',
@@ -6746,9 +6775,10 @@
       value,
       iconColor,
       icon,
+      placement,
       css
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
     const [item, setItem] = React__namespace.useState(option || []);
 
@@ -6767,8 +6797,8 @@
       initialSelectedItem: value !== undefined ? value : null,
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 161,
+        fileName: _jsxFileName$n,
+        lineNumber: 181,
         columnNumber: 5
       }
     }), ({
@@ -6786,8 +6816,8 @@
       css: css,
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 179,
+        fileName: _jsxFileName$n,
+        lineNumber: 199,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
@@ -6797,8 +6827,8 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 180,
+        fileName: _jsxFileName$n,
+        lineNumber: 200,
         columnNumber: 11
       }
     }), search ? /*#__PURE__*/React__namespace.createElement("div", _extends({}, getToggleButtonProps(), {
@@ -6807,8 +6837,8 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 182,
+        fileName: _jsxFileName$n,
+        lineNumber: 202,
         columnNumber: 15
       }
     }), /*#__PURE__*/React__namespace.createElement(Input$1, _extends({
@@ -6819,8 +6849,8 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 183,
+        fileName: _jsxFileName$n,
+        lineNumber: 203,
         columnNumber: 17
       }
     }))) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps(), {
@@ -6828,56 +6858,57 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 190,
+        fileName: _jsxFileName$n,
+        lineNumber: 210,
         columnNumber: 15
       }
     }), selectedItem ? /*#__PURE__*/React__namespace.createElement(Paragraph, {
       color: "primary",
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 192,
+        fileName: _jsxFileName$n,
+        lineNumber: 212,
         columnNumber: 19
       }
     }, selectedItem.name) : /*#__PURE__*/React__namespace.createElement(Paragraph, {
       color: "primary",
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 194,
+        fileName: _jsxFileName$n,
+        lineNumber: 214,
         columnNumber: 19
       }
     }, placeholder)), /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 198,
+        fileName: _jsxFileName$n,
+        lineNumber: 218,
         columnNumber: 13
       }
     }), icon ? icon : /*#__PURE__*/React__namespace.createElement(MajooIcons.CaretDownOutline, {
       color: iconColor,
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 199,
+        fileName: _jsxFileName$n,
+        lineNumber: 219,
         columnNumber: 30
       }
     }))), /*#__PURE__*/React__namespace.createElement(BoxItem, {
       css: {
         display: isOpen ? 'block' : 'none'
       },
+      placement: placement,
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 202,
+        fileName: _jsxFileName$n,
+        lineNumber: 222,
         columnNumber: 11
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 204,
+        fileName: _jsxFileName$n,
+        lineNumber: 224,
         columnNumber: 15
       }
     }), item.map((item, index) => {
@@ -6894,23 +6925,23 @@
         },
         __self: this,
         __source: {
-          fileName: _jsxFileName$k,
-          lineNumber: 206,
+          fileName: _jsxFileName$n,
+          lineNumber: 226,
           columnNumber: 19
         }
       }), item.name);
     })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 220,
+        fileName: _jsxFileName$n,
+        lineNumber: 240,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(StyledDiv, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$k,
-        lineNumber: 221,
+        fileName: _jsxFileName$n,
+        lineNumber: 241,
         columnNumber: 17
       }
     }, "Item yang anda cari tidak ada")))));
@@ -6924,7 +6955,8 @@
     search: PropTypes__default["default"].bool,
     value: PropTypes__default["default"].object,
     iconColor: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object]),
-    icon: PropTypes__default["default"].node
+    icon: PropTypes__default["default"].node,
+    placement: PropTypes__default["default"].oneOf(['top', 'bottom'])
   };
   Select$1.defaultProps = {
     placeholder: 'Select Item',
@@ -6932,7 +6964,8 @@
     disabled: false,
     search: false,
     iconColor: 'currentColor',
-    icon: undefined
+    icon: undefined,
+    placement: 'bottom'
   };
 
   var $$2 = _export;
@@ -6956,7 +6989,7 @@
     }
   });
 
-  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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -6974,7 +7007,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$m,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -6986,7 +7019,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$m,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -6998,13 +7031,13 @@
     },
     __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',
@@ -7224,7 +7257,7 @@
     return /*#__PURE__*/React__namespace.createElement(Wrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 209,
         columnNumber: 5
       }
@@ -7233,7 +7266,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 210,
         columnNumber: 7
       }
@@ -7241,7 +7274,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 212,
         columnNumber: 11
       }
@@ -7262,7 +7295,7 @@
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$i,
+          fileName: _jsxFileName$l,
           lineNumber: 224,
           columnNumber: 28
         }
@@ -7275,7 +7308,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 214,
         columnNumber: 15
       }
@@ -7284,7 +7317,7 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 237,
         columnNumber: 9
       }
@@ -7296,21 +7329,21 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 238,
         columnNumber: 11
       }
     }))), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 244,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 245,
         columnNumber: 11
       }
@@ -7320,14 +7353,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 248,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 250,
         columnNumber: 11
       }
@@ -7339,7 +7372,7 @@
     }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 253,
         columnNumber: 17
       }
@@ -7351,7 +7384,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 260,
         columnNumber: 19
       }
@@ -7359,7 +7392,7 @@
       color: colors.iconGreen,
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 261,
         columnNumber: 53
       }
@@ -7370,14 +7403,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 263,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 275,
         columnNumber: 11
       }
@@ -7387,7 +7420,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$l,
         lineNumber: 276,
         columnNumber: 13
       }
@@ -7485,8 +7518,8 @@
   const StyledAnchor = styled(PopoverPrimitive__namespace.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 = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
     display: 'flex',
@@ -7745,7 +7778,7 @@
       width,
       height
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSlider, _extends({
       className: className,
@@ -7768,7 +7801,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$h,
+        fileName: _jsxFileName$k,
         lineNumber: 160,
         columnNumber: 5
       }
@@ -7777,7 +7810,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$h,
+        fileName: _jsxFileName$k,
         lineNumber: 181,
         columnNumber: 7
       }
@@ -7785,7 +7818,7 @@
       color: color,
       __self: this,
       __source: {
-        fileName: _jsxFileName$h,
+        fileName: _jsxFileName$k,
         lineNumber: 182,
         columnNumber: 9
       }
@@ -7794,7 +7827,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$h,
+        fileName: _jsxFileName$k,
         lineNumber: 184,
         columnNumber: 7
       }
@@ -7892,9 +7925,9 @@
   });
   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__namespace.Root, {
     display: 'inline-flex',
     borderRadius: '$md',
@@ -8018,7 +8051,7 @@
       loop,
       size
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
 
     return /*#__PURE__*/React__default["default"].createElement(ButtonGroupComponent, _extends({
       className: className,
@@ -8036,7 +8069,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$j,
         lineNumber: 111,
         columnNumber: 5
       }
@@ -8089,21 +8122,21 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$j,
         lineNumber: 164,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$j,
         lineNumber: 172,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$j,
         lineNumber: 174,
         columnNumber: 34
       }
@@ -8121,8 +8154,8 @@
     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',
@@ -8248,12 +8281,12 @@
       children,
       value
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
 
     return /*#__PURE__*/React__default["default"].createElement(NotificationBadgeRootStyle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$f,
+        fileName: _jsxFileName$i,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -8261,7 +8294,7 @@
       children: value,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$f,
+        fileName: _jsxFileName$i,
         lineNumber: 135,
         columnNumber: 7
       }
@@ -8285,8 +8318,8 @@
     value: PropTypes__default["default"].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',
@@ -8305,7 +8338,7 @@
       width,
       height
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
     return /*#__PURE__*/React__default["default"].createElement(PaperComponent, _extends({
       className: className,
@@ -8318,7 +8351,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$h,
         lineNumber: 17,
         columnNumber: 5
       }
@@ -8378,8 +8411,8 @@
     }
   });
 
-  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
@@ -8423,26 +8456,26 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Portal, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$g,
         lineNumber: 38,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$g,
         lineNumber: 39,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$2, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$g,
         lineNumber: 40,
         columnNumber: 7
       }
@@ -8472,8 +8505,8 @@
   const DialogDescription = StyledDescription;
   const DialogClose = DialogPrimitive__namespace.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'
@@ -8509,19 +8542,19 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Root, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
+        fileName: _jsxFileName$f,
         lineNumber: 36,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
+        fileName: _jsxFileName$f,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -8626,10 +8659,10 @@
   const DrawerTitle = DialogPrimitive__namespace.Title;
   const DrawerDescription = DialogPrimitive__namespace.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)' },
   // });
@@ -8644,7 +8677,7 @@
       children,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAccordion, _extends({}, props, props.type === 'single' ? {
       collapsible: true
@@ -8652,7 +8685,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$e,
         lineNumber: 20,
         columnNumber: 3
       }
@@ -8715,14 +8748,14 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$e,
         lineNumber: 80,
         columnNumber: 3
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledTrigger, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$e,
         lineNumber: 81,
         columnNumber: 5
       }
@@ -8731,7 +8764,7 @@
       color: arrowColor,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$e,
         lineNumber: 83,
         columnNumber: 22
       }
@@ -8748,7 +8781,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledContent, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$e,
         lineNumber: 91,
         columnNumber: 61
       }
@@ -8801,7 +8834,7 @@
     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__namespace.Root, {
     width: '100%'
   });
@@ -8826,7 +8859,7 @@
       orientation: "vertical",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$d,
         lineNumber: 25,
         columnNumber: 5
       }
@@ -8838,7 +8871,7 @@
       onClick: () => optionHandler(option.value),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$d,
         lineNumber: 27,
         columnNumber: 9
       }
@@ -8914,7 +8947,7 @@
   });
   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,
@@ -9112,7 +9145,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 205,
           columnNumber: 7
         }
@@ -9126,7 +9159,7 @@
         disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 218,
           columnNumber: 7
         }
@@ -9144,7 +9177,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 250,
           columnNumber: 7
         }
@@ -9152,7 +9185,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 266,
           columnNumber: 9
         }
@@ -9170,7 +9203,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 272,
           columnNumber: 7
         }
@@ -9178,7 +9211,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 293,
           columnNumber: 9
         }
@@ -9194,7 +9227,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 299,
           columnNumber: 7
         }
@@ -9207,7 +9240,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 302,
           columnNumber: 13
         }
@@ -9217,7 +9250,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 312,
           columnNumber: 15
         }
@@ -9228,7 +9261,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 318,
           columnNumber: 13
         }
@@ -9241,7 +9274,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 324,
           columnNumber: 13
         }
@@ -9251,7 +9284,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 332,
           columnNumber: 15
         }
@@ -9266,7 +9299,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 354,
           columnNumber: 7
         }
@@ -9284,7 +9317,7 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$9,
+              fileName: _jsxFileName$c,
               lineNumber: 365,
               columnNumber: 17
             }
@@ -9306,7 +9339,7 @@
           variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$9,
+            fileName: _jsxFileName$c,
             lineNumber: 382,
             columnNumber: 15
           }
@@ -9323,7 +9356,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 398,
           columnNumber: 7
         }
@@ -9337,7 +9370,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 406,
           columnNumber: 11
         }
@@ -9355,7 +9388,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 429,
           columnNumber: 7
         }
@@ -9369,7 +9402,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 437,
           columnNumber: 11
         }
@@ -9385,7 +9418,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 458,
           columnNumber: 7
         }
@@ -9402,7 +9435,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 466,
           columnNumber: 11
         }
@@ -9414,7 +9447,7 @@
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 488,
           columnNumber: 7
         }
@@ -9425,7 +9458,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 489,
           columnNumber: 9
         }
@@ -9436,7 +9469,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 503,
           columnNumber: 7
         }
@@ -9446,7 +9479,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 504,
           columnNumber: 9
         }
@@ -9455,7 +9488,7 @@
         align: "center",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
+          fileName: _jsxFileName$c,
           lineNumber: 505,
           columnNumber: 9
         }
@@ -9467,16 +9500,16 @@
         },
         __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["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["default"].createElement(Flex, {
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 517,
+          fileName: _jsxFileName$c,
+          lineNumber: 519,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -9488,8 +9521,8 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 518,
+          fileName: _jsxFileName$c,
+          lineNumber: 520,
           columnNumber: 13
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -9500,8 +9533,8 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 528,
+          fileName: _jsxFileName$c,
+          lineNumber: 530,
           columnNumber: 13
         }
       }, "Proses"))));
@@ -9512,39 +9545,39 @@
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 545,
+          fileName: _jsxFileName$c,
+          lineNumber: 547,
           columnNumber: 7
         }
       }, advanceView, advanceView && /*#__PURE__*/React__default["default"].createElement(Separator, {
         orientation: "vertical",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 548,
+          fileName: _jsxFileName$c,
+          lineNumber: 550,
           columnNumber: 25
         }
       }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 549,
+          fileName: _jsxFileName$c,
+          lineNumber: 551,
           columnNumber: 9
         }
       }, renderHeader(), /*#__PURE__*/React__default["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["default"].createElement(React__default["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["default"].createElement(Separator, {
@@ -9554,15 +9587,15 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 555,
+          fileName: _jsxFileName$c,
+          lineNumber: 557,
           columnNumber: 19
         }
       }), /*#__PURE__*/React__default["default"].createElement(DateContainer$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 562,
+          fileName: _jsxFileName$c,
+          lineNumber: 564,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -9571,8 +9604,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$9,
-          lineNumber: 563,
+          fileName: _jsxFileName$c,
+          lineNumber: 565,
           columnNumber: 19
         }
       }), pickerState.type === DATE_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["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()));
@@ -9581,7 +9614,7 @@
     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,
@@ -9812,7 +9845,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 241,
           columnNumber: 7
         }
@@ -9826,7 +9859,7 @@
         disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 254,
           columnNumber: 7
         }
@@ -9844,7 +9877,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 286,
           columnNumber: 7
         }
@@ -9852,7 +9885,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 302,
           columnNumber: 9
         }
@@ -9870,7 +9903,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 308,
           columnNumber: 7
         }
@@ -9878,7 +9911,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 329,
           columnNumber: 9
         }
@@ -9894,7 +9927,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 335,
           columnNumber: 7
         }
@@ -9909,7 +9942,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 347,
           columnNumber: 7
         }
@@ -9927,7 +9960,7 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$8,
+              fileName: _jsxFileName$b,
               lineNumber: 358,
               columnNumber: 17
             }
@@ -9950,7 +9983,7 @@
           variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$8,
+            fileName: _jsxFileName$b,
             lineNumber: 375,
             columnNumber: 15
           }
@@ -9967,7 +10000,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 392,
           columnNumber: 7
         }
@@ -9981,7 +10014,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 400,
           columnNumber: 11
         }
@@ -9999,7 +10032,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 423,
           columnNumber: 7
         }
@@ -10013,7 +10046,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 431,
           columnNumber: 11
         }
@@ -10029,7 +10062,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 452,
           columnNumber: 7
         }
@@ -10046,7 +10079,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 460,
           columnNumber: 11
         }
@@ -10057,7 +10090,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Flex, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 482,
           columnNumber: 7
         }
@@ -10065,7 +10098,7 @@
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 484,
           columnNumber: 11
         }
@@ -10076,7 +10109,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 485,
           columnNumber: 13
         }
@@ -10090,7 +10123,7 @@
         gap: 4,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 501,
           columnNumber: 7
         }
@@ -10100,7 +10133,7 @@
         onClick: () => setExpandAdvanceView(!expandAdvanceView),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 504,
           columnNumber: 13
         }
@@ -10108,21 +10141,21 @@
         variant: "contentButton",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 505,
           columnNumber: 15
         }
       }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronDownOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 506,
           columnNumber: 36
         }
       }) : /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronUpOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 506,
           columnNumber: 61
         }
@@ -10132,7 +10165,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 509,
           columnNumber: 13
         }
@@ -10141,7 +10174,7 @@
         color: selected.length > 1 ? 'primary' : 'disable',
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 516,
           columnNumber: 9
         }
@@ -10149,7 +10182,7 @@
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 521,
           columnNumber: 9
         }
@@ -10164,7 +10197,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 522,
           columnNumber: 11
         }
@@ -10178,7 +10211,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 534,
           columnNumber: 11
         }
@@ -10189,7 +10222,7 @@
       return /*#__PURE__*/React__default["default"].createElement(DatePickerContainer, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 552,
           columnNumber: 7
         }
@@ -10197,7 +10230,7 @@
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 553,
           columnNumber: 9
         }
@@ -10206,7 +10239,7 @@
         gap: 5,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 554,
           columnNumber: 11
         }
@@ -10214,7 +10247,7 @@
         key: `${calendar.month}${calendar.year}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 556,
           columnNumber: 15
         }
@@ -10224,7 +10257,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$8,
+          fileName: _jsxFileName$b,
           lineNumber: 558,
           columnNumber: 17
         }
@@ -10234,10 +10267,10 @@
     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';
@@ -10246,18 +10279,19 @@
     let {
       multiDatePicker,
       onChange,
-      onCancel,
+      onClose,
       advanceView,
       selected,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
     const [dateValue, setDateValue] = React.useState();
     const [calendarDate, setCalendarDate] = React.useState(selected != null ? selected : new Date());
 
     const onDateSelected = selectedDate => {
       setDateValue(selectedDate.date);
+      onClose();
     };
 
     const updateHandler = () => {
@@ -10285,7 +10319,7 @@
     }, [dateValue]);
     return /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
       onUpdate: multiDatePicker ? updateHandler : undefined,
-      onCancel: onCancel,
+      onCancel: onClose,
       selected: dateValue ? [dateValue] : undefined,
       advanceView: advanceView,
       disabled: disabled,
@@ -10293,8 +10327,8 @@
     }, dayzedData, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 41,
+        fileName: _jsxFileName$a,
+        lineNumber: 42,
         columnNumber: 5
       }
     }));
@@ -10304,7 +10338,7 @@
     let {
       multiDatePicker,
       onChange,
-      onCancel,
+      onClose,
       advanceView,
       selected,
       disabled
@@ -10354,11 +10388,13 @@
           onChange(dateValue);
         }
       }
+
+      onClose();
     };
 
     return isMobile ? /*#__PURE__*/React__default["default"].createElement(MobileCalendarBox, _extends({
       onUpdate: multiDatePicker ? updateHandler : undefined,
-      onCancel: onCancel,
+      onCancel: onClose,
       selected: dateValue,
       advanceView: isMultiDate ? advanceView : undefined,
       disabled: disabled,
@@ -10367,13 +10403,13 @@
     }, dayzedData, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 100,
+        fileName: _jsxFileName$a,
+        lineNumber: 102,
         columnNumber: 5
       }
     })) : /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
       onUpdate: multiDatePicker ? updateHandler : undefined,
-      onCancel: onCancel,
+      onCancel: onClose,
       selected: dateValue,
       advanceView: isMultiDate ? advanceView : undefined,
       disabled: disabled,
@@ -10382,8 +10418,8 @@
     }, dayzedData, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 111,
+        fileName: _jsxFileName$a,
+        lineNumber: 113,
         columnNumber: 5
       }
     }));
@@ -10399,8 +10435,8 @@
       return /*#__PURE__*/React__default["default"].createElement(CalendarRangePicker, _extends({}, otherProps, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$7,
-          lineNumber: 127,
+          fileName: _jsxFileName$a,
+          lineNumber: 129,
           columnNumber: 12
         }
       }));
@@ -10409,14 +10445,14 @@
     return /*#__PURE__*/React__default["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';
@@ -10562,6 +10598,7 @@
     size = 'sm',
     disabled,
     onChange,
+    defaultDate,
     date,
     advanceView,
     css
@@ -10569,7 +10606,7 @@
     const [{
       selectedDate
     }, dispatch] = React.useReducer(dateReducer, {
-      selectedDate: undefined
+      selectedDate: defaultDate != null ? defaultDate : date
     });
     const [openPicker, setOpenPicker] = React.useState(false);
     const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
@@ -10579,32 +10616,33 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 111,
+        fileName: _jsxFileName$9,
+        lineNumber: 112,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
       children: /*#__PURE__*/React__default["default"].createElement(MajooIcons.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["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
       }
     }));
@@ -10618,8 +10656,8 @@
         }),
         __self: this,
         __source: {
-          fileName: _jsxFileName$6,
-          lineNumber: 121,
+          fileName: _jsxFileName$9,
+          lineNumber: 122,
           columnNumber: 11
         }
       }) : {
@@ -10627,22 +10665,21 @@
       }),
       type: type,
       disabled: disabled,
-      date: date ? date == null ? void 0 : date[1] : selectedDate == null ? void 0 : selectedDate[1],
+      date: date ? date === null || date === void 0 ? void 0 : date[1] : selectedDate === null || selectedDate === void 0 ? void 0 : selectedDate[1],
       selected: date != null ? date : 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
       }
     });
@@ -10652,14 +10689,14 @@
       onOpenChange: setOpenPicker,
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$9,
         lineNumber: 140,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$9,
         lineNumber: 141,
         columnNumber: 7
       }
@@ -10667,7 +10704,7 @@
       css: css,
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$9,
         lineNumber: 142,
         columnNumber: 9
       }
@@ -10678,7 +10715,7 @@
       onOpenAutoFocus: e => e.preventDefault(),
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$9,
         lineNumber: 144,
         columnNumber: 7
       }
@@ -10686,7 +10723,7 @@
       css: css,
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$9,
         lineNumber: 150,
         columnNumber: 7
       }
@@ -10695,7 +10732,7 @@
       onOpenChange: setOpenPicker,
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$9,
         lineNumber: 151,
         columnNumber: 7
       }
@@ -10707,7 +10744,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$9,
         lineNumber: 152,
         columnNumber: 9
       }
@@ -10720,7 +10757,7 @@
     size: PropTypes__default["default"].oneOf(['lg', 'sm']),
     disabled: PropTypes__default["default"].bool,
     onChange: PropTypes__default["default"].func,
-    date: PropTypes__default["default"].array,
+    date: PropTypes__default["default"].oneOfType([PropTypes__default["default"].object, PropTypes__default["default"].array]),
     advanceView: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].node]),
     css: PropTypes__default["default"].object
   };
@@ -10737,88 +10774,520 @@
     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'
-  });
+  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;
 
-  function MobileTable({
-    instance
-  }) {
-    const {
-      getTableProps,
-      getTableBodyProps,
-      headerGroups,
-      visibleColumns,
-      rows,
-      prepareRow
-    } = instance;
-    return /*#__PURE__*/React__default["default"].createElement(TableContainer$1, {
-      __self: this,
+  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["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$5,
-        lineNumber: 69,
+        fileName: _jsxFileName$8,
+        lineNumber: 15,
         columnNumber: 5
       }
-    }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$5,
-        lineNumber: 70,
-        columnNumber: 7
+    }));
+  };
+
+  const PaginationButton = ({
+    currentPage,
+    totalPages,
+    onSelect
+  }) => {
+    const isLg = useMediaQuery('(max-width: 800px)');
+
+    const handleSelectPage = page => {
+      if (onSelect) {
+        onSelect(page);
       }
-    }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
-      __self: this,
-      __source: {
+    };
+
+    const debouncedGoToPage = React.useCallback(debounce__default["default"](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["default"].createElement(Flex, {
+      align: "center",
+      css: {
+        height: 28
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 75,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Flex, {
+      align: "center",
+      gap: 2,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 76,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      buttonType: "secondary",
+      disabled: currentPage === 1,
+      onClick: () => handleSelectPage(currentPage - (currentPage < 11 ? currentPage - 1 : 10)),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 77,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.DoubleChevronLeftOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 82,
+        columnNumber: 11
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      buttonType: "secondary",
+      disabled: currentPage === 1,
+      onClick: () => handleSelectPage(currentPage - 1),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 84,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronLeftOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 89,
+        columnNumber: 11
+      }
+    })), generatePages().map((page, index) => {
+      return /*#__PURE__*/React__default["default"].createElement(PageButton, {
+        key: index.toString(),
+        isActive: page === currentPage,
+        onClick: () => typeof page === 'number' ? handleSelectPage(page) : null,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$8,
+          lineNumber: 93,
+          columnNumber: 13
+        }
+      }, page);
+    }), /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      buttonType: "secondary",
+      disabled: currentPage === totalPages,
+      onClick: () => handleSelectPage(currentPage + 1),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 102,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronRightOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 107,
+        columnNumber: 11
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(IconButton, {
+      buttonType: "secondary",
+      disabled: currentPage === totalPages,
+      onClick: () => handleSelectPage(currentPage + (currentPage > totalPages - 10 ? totalPages - currentPage : 10)),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 109,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.DoubleChevronRightOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 116,
+        columnNumber: 11
+      }
+    }))), /*#__PURE__*/React__default["default"].createElement(Separator, {
+      orientation: "vertical",
+      css: {
+        height: '100%',
+        margin: '0 $spacing-03 0 $spacing-01'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 120,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      css: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 122,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      variant: "caption",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$8,
+        lineNumber: 123,
+        columnNumber: 9
+      }
+    }, "Ke Halaman"), /*#__PURE__*/React__default["default"].createElement(InputText, {
+      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: 124,
+        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["default"].createElement(Flex, {
+      align: "center",
+      gap: 3,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 10,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+      color: "secondary",
+      variant: "label",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$7,
+        lineNumber: 11,
+        columnNumber: 7
+      }
+    }, "Tampilkan:"), /*#__PURE__*/React__default["default"].createElement(Select$1, {
+      option: limits.map(item => ({
+        name: item.toString(),
+        value: item
+      })),
+      onChange: selectedItem => onChange(selectedItem.value),
+      value: {
+        name: selectedLimit.toString(),
+        value: selectedLimit
+      },
+      icon: /*#__PURE__*/React__default["default"].createElement(MajooIcons.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["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["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["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["default"].createElement(PaginationButton, {
+      currentPage: currentPage,
+      totalPages: totalPages,
+      onSelect: onPageChange,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$6,
+        lineNumber: 21,
+        columnNumber: 7
+      }
+    }));
+  }
+
+  Pagination.propTypes = {
+    limit: PropTypes__default["default"].number,
+    currentPage: PropTypes__default["default"].number,
+    totalData: PropTypes__default["default"].number,
+    onLimitChange: PropTypes__default["default"].func,
+    onPageChange: PropTypes__default["default"].func
+  };
+  Pagination.displayName = 'Pagination';
+
+  var _jsxFileName$5 = "C:\\Project\\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'
+  });
+
+  function MobileTable({
+    instance,
+    footer,
+    css
+  }) {
+    const {
+      getTableProps,
+      getTableBodyProps,
+      headerGroups,
+      visibleColumns,
+      rows,
+      page,
+      prepareRow
+    } = instance;
+    return /*#__PURE__*/React__default["default"].createElement(TableContainer$1, {
+      css: css,
+      __self: this,
+      __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 71,
+        lineNumber: 73,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 74,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 75,
         columnNumber: 9
       }
     }, headerGroups.map(headerGroup => /*#__PURE__*/React__default["default"].createElement(TableHeadRow$1, _extends({}, headerGroup.getHeaderGroupProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 73,
+        lineNumber: 77,
         columnNumber: 13
       }
     }), headerGroup.headers.map(column => {
@@ -10827,14 +11296,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 77,
+          lineNumber: 81,
           columnNumber: 19
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 79,
+          lineNumber: 83,
           columnNumber: 23
         }
       }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
@@ -10843,7 +11312,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 81,
+          lineNumber: 85,
           columnNumber: 27
         }
       }, headerRender.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(MajooIcons.SortingOutline, {
@@ -10851,7 +11320,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 84,
+          lineNumber: 88,
           columnNumber: 27
         }
       }))) : headerRender);
@@ -10859,24 +11328,24 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
-        lineNumber: 96,
+        lineNumber: 100,
         columnNumber: 9
       }
-    }), rows.map(row => {
+    }), page.map(row => {
       prepareRow(row);
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         key: row.id,
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 100,
+          lineNumber: 104,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableRow$1, _extends({}, row.getRowProps(), {
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 101,
+          lineNumber: 105,
           columnNumber: 17
         }
       }), row.cells.map(cell => {
@@ -10884,7 +11353,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$5,
-            lineNumber: 104,
+            lineNumber: 108,
             columnNumber: 23
           }
         }), cell.column.accessor ? /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -10897,21 +11366,21 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$5,
-            lineNumber: 106,
+            lineNumber: 110,
             columnNumber: 27
           }
         }, cell.render('Cell'), row.isExpanded ? /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronUpOutline, {
           __self: this,
           __source: {
             fileName: _jsxFileName$5,
-            lineNumber: 115,
+            lineNumber: 119,
             columnNumber: 47
           }
         }) : /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronDownOutline, {
           __self: this,
           __source: {
             fileName: _jsxFileName$5,
-            lineNumber: 115,
+            lineNumber: 119,
             columnNumber: 70
           }
         })) : cell.render('Cell'));
@@ -10919,7 +11388,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 125,
+          lineNumber: 129,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableCell$1, {
@@ -10927,7 +11396,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 126,
+          lineNumber: 130,
           columnNumber: 21
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -10935,7 +11404,7 @@
         __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["default"].createElement(Flex, {
@@ -10950,7 +11419,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 134,
+          lineNumber: 138,
           columnNumber: 31
         }
       }, /*#__PURE__*/React__default["default"].createElement(Heading$1, {
@@ -10959,7 +11428,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 144,
+          lineNumber: 148,
           columnNumber: 33
         }
       }, cell.column.Header.toUpperCase()), cell.render('Cell')) : /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -10972,21 +11441,47 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$5,
-          lineNumber: 150,
+          lineNumber: 154,
           columnNumber: 31
         }
       }, cell.render('Cell')))))) : null);
-    }))));
+    })), /*#__PURE__*/React__default["default"].createElement(TableFoot, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 174,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 175,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["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', {
@@ -11078,6 +11573,14 @@
       }
     }
   });
+  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':
@@ -11112,23 +11615,69 @@
   function Table({
     columns,
     data,
+    totalData,
+    fetchData,
+    css,
     onSelectedChange
   }) {
     const instance = reactTable.useTable({
       columns,
-      data
-    }, reactTable.useSortBy, reactTable.useExpanded, reactTable.useRowSelect);
+      data,
+      initialState: {
+        pageIndex: 0
+      },
+      manualPagination: !!fetchData
+    }, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect);
     const {
       getTableProps,
       getTableBodyProps,
       headerGroups,
       allColumns,
       visibleColumns,
-      rows,
       prepareRow,
+      page,
+      gotoPage,
+      setPageSize,
+      state: {
+        pageIndex,
+        pageSize
+      },
       selectedFlatRows
     } = instance;
+
+    const renderFooter = () => /*#__PURE__*/React__default["default"].createElement(Pagination, {
+      limit: pageSize,
+      currentPage: pageIndex + 1,
+      totalData: totalData,
+      onLimitChange: selectedItem => {
+        if (selectedItem) {
+          setPageSize(selectedItem);
+        }
+      },
+      onPageChange: page => {
+        gotoPage(page - 1);
+      },
+      css: {
+        padding: '$spacing-04',
+        '@md': {
+          padding: '$spacing-06'
+        }
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 194,
+        columnNumber: 5
+      }
+    });
+
     const isMobile = useMediaQuery('(max-width: 1024px)');
+    React.useEffect(() => {
+      if (fetchData) fetchData({
+        pageIndex,
+        pageSize
+      });
+    }, [fetchData, pageIndex, pageSize]);
     React.useEffect(() => {
       if (isMobile) {
         allColumns.map(column => {
@@ -11149,31 +11698,32 @@
       if (onSelectedChange) onSelectedChange(selectedFlatRows.map(row => row.values));
     }, [selectedFlatRows]);
     return !isMobile ? /*#__PURE__*/React__default["default"].createElement(TableContainer, {
+      css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 194,
+        lineNumber: 240,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 195,
+        lineNumber: 241,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 196,
+        lineNumber: 242,
         columnNumber: 9
       }
     }, headerGroups.map(headerGroup => /*#__PURE__*/React__default["default"].createElement(TableHeadRow, _extends({}, headerGroup.getHeaderGroupProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 198,
+        lineNumber: 244,
         columnNumber: 13
       }
     }), headerGroup.headers.filter(column => !column.isSubRow).map(column => {
@@ -11182,14 +11732,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 204,
+          lineNumber: 250,
           columnNumber: 21
         }
       }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 206,
+          lineNumber: 252,
           columnNumber: 25
         }
       }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
@@ -11197,7 +11747,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 208,
+          lineNumber: 254,
           columnNumber: 29
         }
       }, headerRender.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(MajooIcons.SortingOutline, {
@@ -11206,7 +11756,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 211,
+          lineNumber: 257,
           columnNumber: 29
         }
       }))) : headerRender);
@@ -11214,10 +11764,10 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 223,
+        lineNumber: 269,
         columnNumber: 9
       }
-    }), rows.map((row, i) => {
+    }), page.map((row, i) => {
       var _row$cells$filter, _row$cells$filter2;
 
       prepareRow(row);
@@ -11230,21 +11780,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 231,
+          lineNumber: 277,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(TableRow, _extends({}, row.getRowProps(), {
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 232,
+          lineNumber: 278,
           columnNumber: 17
         }
       }), row.cells.filter(cell => !cell.column.isSubRow).map(cell => /*#__PURE__*/React__default["default"].createElement(TableCell, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
         __self: this,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 236,
+          lineNumber: 282,
           columnNumber: 23
         }
       }), cell.render('Cell')))), row.isExpanded ? cellArrays.map((cells, index) => {
@@ -11254,7 +11804,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 244,
+            lineNumber: 290,
             columnNumber: 25
           }
         }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
@@ -11262,7 +11812,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 246,
+            lineNumber: 292,
             columnNumber: 29
           }
         })), cells.map((cell, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -11270,7 +11820,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 249,
+            lineNumber: 295,
             columnNumber: 29
           }
         }, /*#__PURE__*/React__default["default"].createElement(TableCell, {
@@ -11279,7 +11829,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 250,
+            lineNumber: 296,
             columnNumber: 31
           }
         }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11287,7 +11837,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 251,
+            lineNumber: 297,
             columnNumber: 33
           }
         }, cell.column.Header)), /*#__PURE__*/React__default["default"].createElement(TableCell, {
@@ -11296,7 +11846,7 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 253,
+            lineNumber: 299,
             columnNumber: 31
           }
         }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -11304,17 +11854,41 @@
           __self: this,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 264,
+            lineNumber: 310,
             columnNumber: 33
           }
         }, cell.render('Cell'))))));
       }) : null);
-    })))) : /*#__PURE__*/React__default["default"].createElement(MobileTable, {
+    })), /*#__PURE__*/React__default["default"].createElement(TableFoot, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 322,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TableFootRow, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 323,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TableFootCell, {
+      colSpan: "100%",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$4,
+        lineNumber: 324,
+        columnNumber: 13
+      }
+    }, renderFooter()))))) : /*#__PURE__*/React__default["default"].createElement(MobileTable, {
       instance: instance,
+      footer: renderFooter(),
+      css: css,
       __self: this,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 279,
+        lineNumber: 330,
         columnNumber: 5
       }
     });
@@ -11327,7 +11901,7 @@
   };
   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
@@ -11356,11 +11930,11 @@
     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;
@@ -11382,18 +11956,18 @@
 
   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);
@@ -11443,12 +12017,12 @@
     } 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({});
   });
@@ -11516,12 +12090,12 @@
   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 + '*$');
@@ -11549,19 +12123,19 @@
   };
 
   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
@@ -11591,8 +12165,8 @@
     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;
@@ -11602,7 +12176,7 @@
   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) {
@@ -11636,7 +12210,7 @@
 
   // `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)
@@ -11656,7 +12230,7 @@
     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;
 
@@ -11665,19 +12239,19 @@
   // `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) {
@@ -11745,10 +12319,10 @@
 
   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;
@@ -11759,19 +12333,19 @@
   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;
@@ -11851,7 +12425,7 @@
       // 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);
 
@@ -11899,13 +12473,13 @@
     ];
   }, !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;
 
@@ -11946,10 +12520,10 @@
 
   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;
@@ -11964,10 +12538,10 @@
   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);
@@ -11988,7 +12562,7 @@
     return false;
   })();
 
-  var REPLACE_SUPPORTS_NAMED_GROUPS = !fails$1(function () {
+  var REPLACE_SUPPORTS_NAMED_GROUPS = !fails(function () {
     var re = /./;
     re.exec = function () {
       var result = [];
@@ -12016,7 +12590,7 @@
       // `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 (
@@ -12080,36 +12654,6 @@
     ];
   }, !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
 
@@ -12194,7 +12738,7 @@
     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,
@@ -12224,7 +12768,7 @@
     }))
   };
 
-  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'
@@ -12292,7 +12836,7 @@
     }
   });
 
-  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: ({
@@ -12388,6 +12932,7 @@
   exports.InputTextArea = InputTextArea;
   exports.MajooProvider = MajooProvider;
   exports.NotificationBadge = NotificationBadge;
+  exports.Pagination = Pagination;
   exports.Paper = Paper;
   exports.PaperComponent = PaperComponent;
   exports.Paragraph = Paragraph;
@@ -12410,6 +12955,9 @@
   exports.Table = Table;
   exports.TableBody = TableBody;
   exports.TableContent = TableContent;
+  exports.TableFoot = TableFoot;
+  exports.TableFootCell = TableFootCell;
+  exports.TableFootRow = TableFootRow;
   exports.TableHead = TableHead;
   exports.TableHeadCellContent = TableHeadCellContent;
   exports.TableHeaderCellContainer = TableHeaderCellContainer;