@majoo-ui/react 1.25.0 → 1.27.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('packages/react/src/layout'), 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')) :
-  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', 'packages/react/src/layout', '@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'], 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.layout, global.SwitchPrimitive, global.Downshift, global.PopoverPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed));
-})(this, (function (exports, React, PropTypes, react, core, helpers, reactTransitionGroup, MajooIcons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, layout, SwitchPrimitive, Downshift, PopoverPrimitive, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed) { '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')) :
+  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'], 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));
+})(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) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,7 +44,7 @@
   var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
-  var _jsxFileName$B = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+  var _jsxFileName$I = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 
   function ThemeProvider({
     theme,
@@ -54,7 +54,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$I,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -1159,7 +1159,7 @@
       bgDark: '#FFFFFF'
     }
   });
-  core.foundations.colors;
+  const colors = core.foundations.colors;
 
   const normalize = {
     '*,::before,::after': {
@@ -1884,13 +1884,13 @@
   handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
   const _excluded$s = ["className", "children", "color", "textColor", "padding"];
-  var _jsxFileName$A = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\box\\Box.js";
+  var _jsxFileName$H = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/box/Box.js";
   const BoxComponent = styled('div', {
     height: 'auto',
     background: 'none',
     backgroundImage: 'none'
   });
-  const Box$2 = _ref => {
+  const Box$1 = _ref => {
     let {
       className,
       children,
@@ -1910,19 +1910,19 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$H,
         lineNumber: 12,
         columnNumber: 3
       }
     }), children);
   };
-  Box$2.propTypes = {
+  Box$1.propTypes = {
     textColor: PropTypes__default["default"].string,
     className: PropTypes__default["default"].string,
     color: PropTypes__default["default"].string,
     padding: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
   };
-  Box$2.defaultProps = {
+  Box$1.defaultProps = {
     className: '',
     color: 'none',
     textColor: 'inherit'
@@ -2060,7 +2060,7 @@
 
   const _excluded$r = ["children"],
         _excluded2$3 = ["children"];
-  var _jsxFileName$z = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+  var _jsxFileName$G = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/grid/Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
     variants: {
@@ -2245,7 +2245,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$G,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2301,7 +2301,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$G,
         lineNumber: 230,
         columnNumber: 5
       }
@@ -2319,7 +2319,7 @@
   GridItem.displayName = 'Grid Item';
 
   const _excluded$q = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
-  var _jsxFileName$y = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\button\\Button.js";
+  var _jsxFileName$F = "/home/omegalord666/work/majoo-ui/packages/react/src/components/button/Button.js";
   const ButtonPrimary = {
     backgroundColor: '$btnPrimary',
     color: '$textWhite',
@@ -2396,7 +2396,25 @@
       backgroundColor: '$gray50'
     }
   };
-  const StyledIcon$3 = styled('div', {
+  const ButtonTableMenu = {
+    backgroundColor: '$bgWhite',
+    color: '$textPrimary',
+    padding: '$spacing-04 $spacing-05',
+    width: '180px',
+    textAlign: 'left',
+    border: 'none',
+    borderRadius: 0,
+    '&:focus': {
+      outline: 'none'
+    },
+    '&:hover': {
+      backgroundColor: '$gray50'
+    },
+    '&:active': {
+      backgroundColor: '$gray100'
+    }
+  };
+  const StyledIcon$2 = styled('div', {
     verticalAlign: 'middle'
   });
   const StyledIconLeft$2 = styled('div', {
@@ -2451,7 +2469,8 @@
         ghost: Object.assign({}, GhostButton),
         negative: Object.assign({}, ButtonNegative),
         'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
-        headerMenu: Object.assign({}, ButtonHeaderMenu)
+        headerMenu: Object.assign({}, ButtonHeaderMenu),
+        tableMenu: Object.assign({}, ButtonTableMenu)
       },
       size: {
         xs: {
@@ -2539,29 +2558,29 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
-        lineNumber: 220,
+        fileName: _jsxFileName$F,
+        lineNumber: 240,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
-        lineNumber: 231,
+        fileName: _jsxFileName$F,
+        lineNumber: 251,
         columnNumber: 33
       }
-    }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$3, {
+    }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
-        lineNumber: 232,
+        fileName: _jsxFileName$F,
+        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$y,
-        lineNumber: 233,
+        fileName: _jsxFileName$F,
+        lineNumber: 253,
         columnNumber: 34
       }
     }, rightIcon) : null);
@@ -2587,7 +2606,7 @@
   };
 
   const _excluded$p = ["id", "message", "dismissAfter", "variant", "onAction", "actionText", "onRemove"];
-  var _jsxFileName$x = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+  var _jsxFileName$E = "/home/omegalord666/work/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;
@@ -2680,7 +2699,7 @@
       }
     }
   });
-  const Text$1 = styled('span', {
+  const Text$2 = styled('span', {
     display: 'block'
   });
 
@@ -2723,7 +2742,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$E,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -2733,7 +2752,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$E,
         lineNumber: 144,
         columnNumber: 9
       }
@@ -2741,7 +2760,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$E,
         lineNumber: 145,
         columnNumber: 11
       }
@@ -2752,14 +2771,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$E,
         lineNumber: 146,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__namespace.createElement(Text$1, {
+    }, /*#__PURE__*/React__namespace.createElement(Text$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$E,
         lineNumber: 152,
         columnNumber: 15
       }
@@ -2769,7 +2788,7 @@
       css: {},
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$E,
         lineNumber: 155,
         columnNumber: 15
       }
@@ -2784,7 +2803,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$E,
         lineNumber: 157,
         columnNumber: 17
       }
@@ -2807,8 +2826,8 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.createContext({});
 
-  var _jsxFileName$w = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
-  const ToastBox = styled(Box$2, {
+  var _jsxFileName$D = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+  const ToastBox = styled(Box$1, {
     display: 'block',
     position: 'fixed',
     bottom: 0,
@@ -2824,7 +2843,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$D,
         lineNumber: 19,
         columnNumber: 5
       }
@@ -2832,7 +2851,7 @@
       padding: 0,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$D,
         lineNumber: 20,
         columnNumber: 7
       }
@@ -2844,7 +2863,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$w,
+          fileName: _jsxFileName$D,
           lineNumber: 24,
           columnNumber: 13
         }
@@ -2853,7 +2872,7 @@
   };
 
   const _excluded$o = ["id"];
-  var _jsxFileName$v = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+  var _jsxFileName$C = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
 
   const ToastProvider = ({
@@ -2890,7 +2909,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$C,
         lineNumber: 40,
         columnNumber: 5
       }
@@ -2898,14 +2917,14 @@
       toasts: toasts,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$C,
         lineNumber: 42,
         columnNumber: 7
       }
     }));
   };
 
-  var _jsxFileName$u = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+  var _jsxFileName$B = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
 
   function MajooProvider({
     children,
@@ -2918,14 +2937,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$B,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$B,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -2977,7 +2996,7 @@
       return t;
   }
 
-  var _jsxFileName$t = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\alert\\AlertProvider.js";
+  var _jsxFileName$A = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/AlertProvider.js";
   const StatusContext = /*#__PURE__*/React.createContext();
 
   const AlertProvider = ({
@@ -2994,14 +3013,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$A,
         lineNumber: 9,
         columnNumber: 5
       }
     }, children);
   };
 
-  var _jsxFileName$s = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\alert\\Alert.js";
+  var _jsxFileName$z = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/Alert.js";
   const AlertStyle = styled('div', {
     backgroundColor: 'white',
     borderWidth: 0,
@@ -3129,26 +3148,28 @@
       variant: 'subtle'
     }
   });
-  const AlertTitle = styled('h3', {
-    fontWeight: 'bold',
-    fontSize: '$section-title'
-  });
-  const AlertDescription = styled('p', {
-    fontSize: '$section-sub-title'
-  });
+  const AlertTitle = styled(Heading$1);
+  AlertTitle.defaultProps = {
+    as: 'h3',
+    heading: 'pageTitle'
+  };
+  const AlertDescription = styled(Text$1);
+  AlertDescription.defaultProps = {
+    as: 'p'
+  };
   const AlertBase = props => {
     return /*#__PURE__*/React__default["default"].createElement(AlertProvider, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 158,
+        fileName: _jsxFileName$z,
+        lineNumber: 163,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(AlertContent, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 159,
+        fileName: _jsxFileName$z,
+        lineNumber: 164,
         columnNumber: 7
       }
     }), props.children));
@@ -3165,8 +3186,8 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 170,
+        fileName: _jsxFileName$z,
+        lineNumber: 175,
         columnNumber: 10
       }
     }));
@@ -3189,8 +3210,8 @@
             color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
-              lineNumber: 179,
+              fileName: _jsxFileName$z,
+              lineNumber: 184,
               columnNumber: 16
             }
           });
@@ -3200,8 +3221,8 @@
             color: variantAlert === 'solid' ? 'white' : ' #DF2A36',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
-              lineNumber: 181,
+              fileName: _jsxFileName$z,
+              lineNumber: 186,
               columnNumber: 16
             }
           });
@@ -3211,8 +3232,8 @@
             color: variantAlert === 'solid' ? 'white' : '#0197F4',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
-              lineNumber: 183,
+              fileName: _jsxFileName$z,
+              lineNumber: 188,
               columnNumber: 16
             }
           });
@@ -3222,8 +3243,8 @@
             color: variantAlert === 'solid' ? 'white' : ' #FE7F2D',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
-              lineNumber: 185,
+              fileName: _jsxFileName$z,
+              lineNumber: 190,
               columnNumber: 16
             }
           });
@@ -3233,8 +3254,8 @@
             color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
-              lineNumber: 187,
+              fileName: _jsxFileName$z,
+              lineNumber: 192,
               columnNumber: 16
             }
           });
@@ -3244,8 +3265,8 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertIconStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
-        lineNumber: 190,
+        fileName: _jsxFileName$z,
+        lineNumber: 195,
         columnNumber: 10
       }
     }), Icon(statusAlert));
@@ -3269,7 +3290,7 @@
   AlertTitle.displayName = 'AlertTitle';
 
   const _excluded$n = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-  var _jsxFileName$r = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
+  var _jsxFileName$y = "/home/omegalord666/work/majoo-ui/packages/react/src/components/card/Card.js";
   const CardComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -3330,7 +3351,7 @@
     color: '$textSecondary',
     fontWeight: 600
   });
-  const StyledIcon$2 = styled('span', {
+  const StyledIcon$1 = styled('span', {
     background: '$bgGreen',
     borderRadius: '50%',
     width: '34px',
@@ -3417,7 +3438,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$y,
         lineNumber: 103,
         columnNumber: 5
       }
@@ -3425,30 +3446,30 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$y,
         lineNumber: 114,
         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$r,
+        fileName: _jsxFileName$y,
         lineNumber: 118,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
       background: color,
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$y,
         lineNumber: 119,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$y,
         lineNumber: 125,
         columnNumber: 13
       }
@@ -3475,6 +3496,8 @@
   };
 
   const Text = styled('p', {
+    margin: 0,
+    padding: 0,
     variants: {
       variant: {
         link: {
@@ -3569,10 +3592,11 @@
   Text.defaultProps = {
     as: 'p'
   };
+  var Text$1 = Text;
 
-  Text.displayName = 'Text';
+  Text$1.displayName = 'Text';
 
-  const Heading = styled(Text, {
+  const Heading = styled(Text$1, {
     variants: {
       heading: {
         h1: {
@@ -3642,10 +3666,11 @@
     heading: 'h1',
     as: 'h1'
   };
+  var Heading$1 = Heading;
 
-  Heading.displayName = "Heading";
+  Heading$1.displayName = "Heading";
 
-  const Paragraph = styled(Text, {
+  const Paragraph = styled(Text$1, {
     variants: {
       paragraph: {
         shortContentBold: {
@@ -3686,7 +3711,7 @@
   Paragraph.displayName = 'Paragraph';
 
   const _excluded$m = ["children"];
-  var _jsxFileName$q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+  var _jsxFileName$x = "/home/omegalord666/work/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -3707,7 +3732,7 @@
     display: 'inline-flex',
     alignItems: 'center'
   });
-  const BreadcrumbLinkStyle = styled(Text, {
+  const BreadcrumbLinkStyle = styled(Text$1, {
     '&:hover': {
       textDecoration: 'underline'
     },
@@ -3732,7 +3757,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$x,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -3749,14 +3774,14 @@
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$x,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$x,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -3776,7 +3801,7 @@
     return jsxRuntime.jsx(BreadcrumbLinkBase, __assign({}, props), void 0);
   };
 
-  const Badge = styled(Text, {
+  const Badge = styled(Text$1, {
     // Reset
     alignItems: 'center',
     appearance: 'none',
@@ -3961,7 +3986,7 @@
   Badge.displayName = 'Badge';
 
   const _excluded$l = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$p = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+  var _jsxFileName$w = "/home/omegalord666/work/majoo-ui/packages/react/src/components/avatar/Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -3992,7 +4017,7 @@
     lineHeight: 1,
     fontWeight: 600
   });
-  const StyledIcon$1 = styled('div', {
+  const StyledIcon = styled('div', {
     fontSize: '20px'
   });
   function Avatar(_ref) {
@@ -4014,7 +4039,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$w,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4024,7 +4049,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$w,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4032,21 +4057,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$w,
         lineNumber: 48,
         columnNumber: 7
       }
-    }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
+    }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$w,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$w,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4064,7 +4089,7 @@
   };
 
   const _excluded$k = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-  var _jsxFileName$o = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+  var _jsxFileName$v = "/home/omegalord666/work/majoo-ui/packages/react/src/components/image/Image.js";
   const StyledImage = styled('img', {
     display: 'inline-block',
     alignItems: 'center',
@@ -4102,7 +4127,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$v,
         lineNumber: 20,
         columnNumber: 9
       }
@@ -4123,7 +4148,7 @@
   };
 
   const _excluded$j = ["children", "label", "color", "contentCss", "withClick"];
-  var _jsxFileName$n = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+  var _jsxFileName$u = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
   const slideUpAndFade$1 = keyframes({
     '0%': {
       opacity: 0,
@@ -4235,7 +4260,7 @@
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$u,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4243,7 +4268,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$u,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4251,7 +4276,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$u,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4260,7 +4285,7 @@
       css: color === 'dark' ? dark : ligth,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$u,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -4268,7 +4293,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$u,
         lineNumber: 95,
         columnNumber: 9
       }
@@ -4285,7 +4310,7 @@
   };
 
   const _excluded$i = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-  var _jsxFileName$m = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+  var _jsxFileName$t = "/home/omegalord666/work/majoo-ui/packages/react/src/components/progress/Progress.js";
   const StyledProgress = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -4419,7 +4444,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$m,
+        fileName: _jsxFileName$t,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -4432,7 +4457,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$m,
+        fileName: _jsxFileName$t,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -4456,8 +4481,8 @@
   };
 
   const _excluded$h = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount"];
-  var _jsxFileName$l = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
-  const StyledLabel = styled(LabelPrimitive__namespace.Root, Text, {
+  var _jsxFileName$s = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+  const StyledLabel = styled(LabelPrimitive__namespace.Root, Text$1, {
     display: 'inline-block',
     fontSize: '$label',
     lineHeight: '$label',
@@ -4493,7 +4518,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$s,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -4503,7 +4528,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$s,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -4512,7 +4537,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$s,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -4527,7 +4552,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$s,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -4535,23 +4560,23 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$s,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$s,
         lineNumber: 57,
         columnNumber: 13
       }
-    }))), maxCount && /*#__PURE__*/React__default["default"].createElement(Text, {
+    }))), maxCount && /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "label",
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$s,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -4568,8 +4593,8 @@
   FormLabel.displayName = 'FormLabel';
 
   const _excluded$g = ["children", "error"];
-  var _jsxFileName$k = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
-  const StyledHelper = styled(Text, {
+  var _jsxFileName$r = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+  const StyledHelper = styled(Text$1, {
     display: 'inline-block',
     color: '$textSecondary',
     variants: {
@@ -4594,7 +4619,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$r,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -4606,9 +4631,9 @@
   };
   FormHelper.displayName = 'FormHelper';
 
-  var _jsxFileName$j = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+  var _jsxFileName$q = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
 
-  const CheckOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  const CheckOutline$1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: "1em",
@@ -4624,7 +4649,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$q,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4636,7 +4661,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$q,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4648,14 +4673,62 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$q,
+      lineNumber: 26,
+      columnNumber: 5
+    }
+  }));
+
+  var _jsxFileName$p = "/home/omegalord666/work/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",
+    xmlSpace: "preserve",
+    width: "1em",
+    height: "1em",
+    style: {
+      shapeRendering: 'geometricPrecision',
+      textRendering: 'geometricPrecision',
+      imageRendering: 'optimizeQuality',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd'
+    },
+    viewBox: "0 0 18.22 18.22"
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 4,
+      columnNumber: 3
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M15.61 0H2.6A2.595 2.595 0 0 0 0 2.6v13.01a2.595 2.595 0 0 0 2.6 2.6h13.01a2.595 2.595 0 0 0 2.6-2.6V2.6a2.595 2.595 0 0 0-2.6-2.6z",
+    style: {
+      fill: 'none',
+      fillRule: 'nonzero'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 19,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    },
+    d: "M14.31 10.41H3.9v-2.6h10.41z",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  const _excluded$f = ["id", "isChecked", "isIndeterminate", "isDisabled", "onCheckedChange", "label"];
-  var _jsxFileName$i = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
+  const _excluded$f = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label"];
+  var _jsxFileName$o = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
   const StyledIndicator$1 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -4704,89 +4777,107 @@
     }
   });
 
-  const InputCheckbox = _ref => {
+  const Checkbox = _ref => {
     let {
       id,
-      isChecked,
-      isIndeterminate,
-      isDisabled,
-      onCheckedChange,
-      label
+      checked,
+      indeterminate,
+      disabled,
+      onCheckedChange
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
-    return /*#__PURE__*/React__default["default"].createElement(Flex, {
-      align: "start",
-      gap: 4,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 57,
-        columnNumber: 5
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
-      disabled: isDisabled,
-      checked: isChecked,
+      disabled: disabled,
+      checked: checked || indeterminate,
       onCheckedChange: onCheckedChange
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 58,
-        columnNumber: 7
+        fileName: _jsxFileName$o,
+        lineNumber: 56,
+        columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 59,
-        columnNumber: 9
+        fileName: _jsxFileName$o,
+        lineNumber: 63,
+        columnNumber: 5
       }
-    }, isIndeterminate ? /*#__PURE__*/React__default["default"].createElement(MajooIcons.MinusOutline, {
+    }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 59,
-        columnNumber: 45
+        fileName: _jsxFileName$o,
+        lineNumber: 63,
+        columnNumber: 39
       }
-    }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
+    }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 59,
-        columnNumber: 64
+        fileName: _jsxFileName$o,
+        lineNumber: 63,
+        columnNumber: 58
       }
-    }))), /*#__PURE__*/React__default["default"].createElement(FormLabel, {
-      htmlFor: id,
+    })));
+  };
+
+  const InputCheckbox = _ref2 => {
+    let props = Object.assign({}, _ref2);
+    return props.label ? /*#__PURE__*/React__default["default"].createElement(Flex, {
+      align: "start",
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 69,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 70,
+        columnNumber: 7
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(FormLabel, {
+      htmlFor: props.id,
       css: {
         fontSize: '$long-content-regular',
         lineHeight: '$long-content-regular',
         letterSpacing: '$long-content-regular',
         fontWeight: '400',
-        color: isDisabled ? '$textDisable' : '$textPrimary',
+        color: props.disabled ? '$textDisable' : '$textPrimary',
         cursor: 'default'
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 61,
+        fileName: _jsxFileName$o,
+        lineNumber: 71,
         columnNumber: 7
       }
-    }, label));
+    }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 86,
+        columnNumber: 5
+      }
+    }));
   };
 
   InputCheckbox.propTypes = {
-    isChecked: PropTypes__default["default"].bool,
-    isIndeterminate: PropTypes__default["default"].bool,
-    isDisabled: PropTypes__default["default"].bool,
+    checked: PropTypes__default["default"].bool,
+    indeterminate: PropTypes__default["default"].bool,
+    disabled: PropTypes__default["default"].bool,
     onCheckedChange: PropTypes__default["default"].func,
     label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
   };
   InputCheckbox.displayName = 'InputCheckbox';
 
   const _excluded$e = ["children", "size"];
-  var _jsxFileName$h = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+  var _jsxFileName$n = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
     width: '100%',
@@ -4923,7 +5014,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$h,
+        fileName: _jsxFileName$n,
         lineNumber: 143,
         columnNumber: 10
       }
@@ -4950,7 +5041,7 @@
     disabled: PropTypes__default["default"].bool
   };
 
-  const InputAddon = styled(Text, {
+  const InputAddon = styled(Text$1, {
     backgroundColor: '$formDisable',
     flex: '0 0 auto',
     width: 'auto',
@@ -5016,7 +5107,7 @@
     as: 'div'
   };
 
-  const InputLetter = styled(Text, {
+  const InputLetter = styled(Text$1, {
     flex: '0 0 auto',
     width: 'auto',
     display: 'flex',
@@ -5226,7 +5317,7 @@
   InputRadioGroup.displayName = 'InputRadioGroup';
 
   const _excluded$d = ["id", "disabled"];
-  var _jsxFileName$g = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
+  var _jsxFileName$m = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
     display: 'flex',
@@ -5310,7 +5401,7 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$m,
         lineNumber: 82,
         columnNumber: 3
       }
@@ -5320,14 +5411,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$m,
         lineNumber: 83,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$m,
         lineNumber: 84,
         columnNumber: 7
       }
@@ -5344,7 +5435,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$m,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -5388,7 +5479,7 @@
   InputRightElement.name = 'InputRightElement';
 
   const _excluded$c = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
-  var _jsxFileName$f = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
+  var _jsxFileName$l = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tag/Tag.js";
   const TagComponent = styled('span', {
     boxSizing: 'border-box',
     color: '$white',
@@ -5476,21 +5567,21 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$f,
+        fileName: _jsxFileName$l,
         lineNumber: 54,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$f,
+        fileName: _jsxFileName$l,
         lineNumber: 63,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$f,
+        fileName: _jsxFileName$l,
         lineNumber: 65,
         columnNumber: 34
       }
@@ -5509,10 +5600,13 @@
     size: 'sm'
   };
 
-  const _excluded$b = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly"];
-  var _jsxFileName$e = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
+  const _excluded$b = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
+  var _jsxFileName$k = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
   const InputTagsComponent = styled('div', {
     display: 'flex',
+    position: 'relative',
+    flexWrap: 'wrap',
+    width: '100%',
     margin: '0',
     appearance: 'none',
     backgroundolor: 'none',
@@ -5521,7 +5615,6 @@
     borderRadius: '$lg',
     color: '$textPrimary',
     lineHeight: '$short-content-regular',
-    width: '100%',
     fontSize: '$short-content-regular',
     fontWeight: '400',
     '&:focus': {
@@ -5551,11 +5644,13 @@
       },
       size: {
         sm: {
-          height: 32,
+          height: 'auto',
+          minheight: 32,
           padding: '2px $spacing-05'
         },
         lg: {
-          height: 40,
+          height: 'auto',
+          minheight: 40,
           padding: '6px $spacing-05'
         }
       },
@@ -5572,8 +5667,18 @@
       }
     }
   });
+  const TagContainer = styled(Box$1, {
+    display: 'flex',
+    position: 'relative',
+    flexWrap: 'wrap',
+    maxWidth: '100%'
+  });
   const Input$2 = styled('input', {
     display: 'flex',
+    position: 'relative',
+    flex: 'auto',
+    flexWrap: 'wrap',
+    maxWidth: '100%',
     appearance: 'none',
     backgroundolor: 'none',
     border: 'none',
@@ -5582,11 +5687,10 @@
     cursor: 'text',
     outline: 'none',
     letterSpacing: '$short-content-regular',
-    width: '100%',
     '&:disabled': {
       backgroundColor: 'transparent',
       color: '$textDisable',
-      cursor: 'default',
+      cursor: 'not-allowed',
       '&::placeholder': {
         color: '$textDisable'
       }
@@ -5613,23 +5717,24 @@
       onChange,
       value,
       disabled,
-      readOnly
+      readOnly,
+      max
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
     const [tags, setTags] = React__default["default"].useState(value || []);
 
     const addTags = event => {
-      if (event.key === 'Enter' && event.target.value !== '' && readOnly === false) {
+      if (event.key === 'Enter' && event.target.value !== '' && readOnly === false && max !== tags.length) {
         setTags([...tags, event.target.value]);
         event.target.value = '';
       }
     };
 
-    const removeTags = index => {
+    const removeTags = (index, key) => {
       if (disabled || readOnly) {
         return tags;
-      } else {
+      } else if (key === 'removeTag' || key === 'Backspace') {
         setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
       }
     };
@@ -5645,27 +5750,26 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
-        lineNumber: 105,
+        fileName: _jsxFileName$k,
+        lineNumber: 129,
         columnNumber: 5
       }
-    }), /*#__PURE__*/React__default["default"].createElement(layout.Flex, {
-      gap: 3,
+    }), /*#__PURE__*/React__default["default"].createElement(TagContainer, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
-        lineNumber: 115,
+        fileName: _jsxFileName$k,
+        lineNumber: 139,
         columnNumber: 7
       }
     }, tags.map((tag, index) => /*#__PURE__*/React__default["default"].createElement(Tag, {
       key: index,
-      onClick: () => removeTags(index),
+      onClick: () => removeTags(index, 'removeTag'),
       rightIcon: /*#__PURE__*/React__default["default"].createElement(MajooIcons.CloseOutline, {
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$e,
-          lineNumber: 120,
+          fileName: _jsxFileName$k,
+          lineNumber: 144,
           columnNumber: 24
         }
       }),
@@ -5673,25 +5777,27 @@
         background: disabled ? '$btnDisable' : '$bgGray',
         border: 'none',
         color: '$textContent',
-        cursor: disabled ? 'not-allowed' : 'pointer'
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        margin: '0 5px 2px 0'
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
-        lineNumber: 117,
+        fileName: _jsxFileName$k,
+        lineNumber: 141,
         columnNumber: 11
       }
     }, tag))), /*#__PURE__*/React__default["default"].createElement(Input$2, {
       type: "text",
       onKeyUp: event => addTags(event),
+      onKeyDown: event => removeTags(tags.length - 1, event.key),
       placeholder: placeholder,
       onChange: onChange,
       disabled: disabled,
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
-        lineNumber: 132,
+        fileName: _jsxFileName$k,
+        lineNumber: 157,
         columnNumber: 7
       }
     }));
@@ -5704,7 +5810,8 @@
     value: PropTypes__default["default"].array,
     placeholder: PropTypes__default["default"].string,
     onChange: PropTypes__default["default"].func,
-    readOnly: PropTypes__default["default"].bool
+    readOnly: PropTypes__default["default"].bool,
+    max: PropTypes__default["default"].number
   };
   TagsInput.defaultProps = {
     size: 'lg',
@@ -5715,7 +5822,7 @@
   };
 
   const _excluded$a = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-  var _jsxFileName$d = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
+  var _jsxFileName$j = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -5798,14 +5905,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$j,
         lineNumber: 66,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledThumb$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$j,
         lineNumber: 74,
         columnNumber: 5
       }
@@ -5823,53 +5930,156 @@
   };
   InputSwitch.displayName = 'InputSwitch';
 
-  const _excluded$9 = ["size", "onChange"];
-  var _jsxFileName$c = "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);
-
-    const [value, setValue] = React__default["default"].useState('');
-    const handleChange = React__default["default"].useCallback(e => {
-      setValue(e.target.value);
-
-      if (onChange) {
-        onChange(e);
-      }
-    }, [onChange]);
-
-    const handleClearButtonClick = e => {
-      e.preventDefault();
-      setValue('');
-      onChange(e);
-    };
+  var _jsxFileName$i = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+
+  const SvgCloseFilled = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: props.size,
+    height: props.size,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 4,
+      columnNumber: 3
+    }
+  }), /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "path-1-inside-1_2883_7918",
+    fill: "white",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 5,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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$i,
+      lineNumber: 6,
+      columnNumber: 7
+    }
+  })), /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    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",
+    fill: props.color,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 12,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M9.95711 8.54289L8.54289 9.95711L8.54289 9.95711L9.95711 8.54289ZM8.54289 8.54289L9.95711 9.95711L9.95711 9.95711L8.54289 8.54289ZM12 10.5858L10.5858 12L12 13.4142L13.4142 12L12 10.5858ZM14.0429 8.54289L15.4571 9.95711L15.4571 9.95711L14.0429 8.54289ZM15.4571 8.54289L14.0429 9.95711L14.0429 9.95711L15.4571 8.54289ZM15.4571 9.95711L14.0429 8.54289L14.0429 8.54289L15.4571 9.95711ZM13.4142 12L12 10.5858L10.5858 12L12 13.4142L13.4142 12ZM15.4571 14.0429L16.8713 12.6287L16.8713 12.6287L15.4571 14.0429ZM15.4571 15.4571L16.8713 16.8713L16.8713 16.8713L15.4571 15.4571ZM14.0429 15.4571L12.6287 16.8713L12.6287 16.8713L14.0429 15.4571ZM12 13.4142L13.4142 12L12 10.5858L10.5858 12L12 13.4142ZM9.95711 15.4571L11.3713 16.8713L11.3713 16.8713L9.95711 15.4571ZM8.54289 15.4571L7.12868 16.8713L7.12868 16.8713L8.54289 15.4571ZM8.54289 14.0429L7.12868 12.6287L7.12868 12.6287L8.54289 14.0429ZM10.5858 12L12 13.4142L13.4142 12L12 10.5858L10.5858 12ZM8.54289 9.95711L9.95711 8.54289L9.95711 8.54289L8.54289 9.95711ZM19 12C19 15.866 15.866 19 12 19V23C18.0751 23 23 18.0751 23 12H19ZM12 5C15.866 5 19 8.13401 19 12H23C23 5.92487 18.0751 1 12 1V5ZM5 12C5 8.13401 8.13401 5 12 5V1C5.92487 1 1 5.92487 1 12H5ZM12 19C8.13401 19 5 15.866 5 12H1C1 18.0751 5.92487 23 12 23V19ZM11.3713 7.12868C10.1997 5.95711 8.30025 5.95711 7.12868 7.12868L9.95711 9.95711C9.56658 10.3476 8.93342 10.3476 8.54289 9.95711L11.3713 7.12868ZM13.4142 9.17157L11.3713 7.12868L8.54289 9.95711L10.5858 12L13.4142 9.17157ZM12.6287 7.12868L10.5858 9.17157L13.4142 12L15.4571 9.95711L12.6287 7.12868ZM16.8713 7.12868C15.6997 5.95711 13.8003 5.95711 12.6287 7.12868L15.4571 9.95711C15.0666 10.3476 14.4334 10.3476 14.0429 9.95711L16.8713 7.12868ZM16.8713 11.3713C18.0429 10.1997 18.0429 8.30025 16.8713 7.12868L14.0429 9.95711C13.6524 9.56658 13.6524 8.93342 14.0429 8.54289L16.8713 11.3713ZM14.8284 13.4142L16.8713 11.3713L14.0429 8.54289L12 10.5858L14.8284 13.4142ZM16.8713 12.6287L14.8284 10.5858L12 13.4142L14.0429 15.4571L16.8713 12.6287ZM16.8713 16.8713C18.0429 15.6997 18.0429 13.8003 16.8713 12.6287L14.0429 15.4571C13.6524 15.0666 13.6524 14.4334 14.0429 14.0429L16.8713 16.8713ZM12.6287 16.8713C13.8003 18.0429 15.6997 18.0429 16.8713 16.8713L14.0429 14.0429C14.4334 13.6524 15.0666 13.6524 15.4571 14.0429L12.6287 16.8713ZM10.5858 14.8284L12.6287 16.8713L15.4571 14.0429L13.4142 12L10.5858 14.8284ZM11.3713 16.8713L13.4142 14.8284L10.5858 12L8.54289 14.0429L11.3713 16.8713ZM7.12868 16.8713C8.30025 18.0429 10.1997 18.0429 11.3713 16.8713L8.54289 14.0429C8.93342 13.6524 9.56658 13.6524 9.95711 14.0429L7.12868 16.8713ZM7.12868 12.6287C5.95711 13.8003 5.95711 15.6997 7.12868 16.8713L9.95711 14.0429C10.3476 14.4334 10.3476 15.0666 9.95711 15.4571L7.12868 12.6287ZM9.17157 10.5858L7.12868 12.6287L9.95711 15.4571L12 13.4142L9.17157 10.5858ZM7.12868 11.3713L9.17157 13.4142L12 10.5858L9.95711 8.54289L7.12868 11.3713ZM7.12868 7.12868C5.95711 8.30025 5.95711 10.1997 7.12868 11.3713L9.95711 8.54289C10.3476 8.93342 10.3476 9.56658 9.95711 9.95711L7.12868 7.12868Z",
+    fill: props.color,
+    mask: "url(#path-1-inside-1_2883_7918)",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$i,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }));
+
+  SvgCloseFilled.defaultProps = {
+    color: '#404545',
+    size: 24
+  };
+
+  var _jsxFileName$h = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+
+  const SvgSearchOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    width: props.size,
+    height: props.size,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$h,
+      lineNumber: 4,
+      columnNumber: 3
+    }
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    cx: 11.3091,
+    cy: 11.3091,
+    r: 6.30911,
+    stroke: props.color,
+    strokeWidth: 2,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$h,
+      lineNumber: 5,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M16.5249 15.1049C16.1345 14.7142 15.5014 14.7139 15.1106 15.1042C14.7199 15.4945 14.7196 16.1277 15.1099 16.5184L16.5249 15.1049ZM19.2939 20.7067C19.6842 21.0974 20.3173 21.0977 20.7081 20.7074C21.0988 20.3171 21.0991 19.6839 20.7088 19.2932L19.2939 20.7067ZM15.1099 16.5184L19.2939 20.7067L20.7088 19.2932L16.5249 15.1049L15.1099 16.5184Z",
+    fill: props.color,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$h,
+      lineNumber: 6,
+      columnNumber: 5
+    }
+  }));
+
+  SvgSearchOutline.defaultProps = {
+    color: '#404545',
+    size: 24
+  };
+
+  const _excluded$9 = ["size", "onChange"];
+  var _jsxFileName$g = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+
+  const InputSearchbox = _ref => {
+    let {
+      size,
+      onChange
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+
+    const [value, setValue] = React__default["default"].useState('');
+    const handleChange = React__default["default"].useCallback(e => {
+      setValue(e.target.value);
+
+      if (onChange) {
+        onChange(e);
+      }
+    }, [onChange]);
+
+    const handleClearButtonClick = e => {
+      e.preventDefault();
+      setValue('');
+      onChange(e);
+    };
 
     return /*#__PURE__*/React__default["default"].createElement(InputGroup, {
       size: size,
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 27,
+        fileName: _jsxFileName$g,
+        lineNumber: 28,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
-      children: /*#__PURE__*/React__default["default"].createElement(MajooIcons.SearchOutline, {
+      children: /*#__PURE__*/React__default["default"].createElement(SvgSearchOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$c,
-          lineNumber: 28,
+          fileName: _jsxFileName$g,
+          lineNumber: 29,
           columnNumber: 35
         }
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 28,
+        fileName: _jsxFileName$g,
+        lineNumber: 29,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, _extends({
@@ -5878,27 +6088,34 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 29,
+        fileName: _jsxFileName$g,
+        lineNumber: 30,
         columnNumber: 7
       }
-    })), value.length ? /*#__PURE__*/React__default["default"].createElement(InputRightElement, {
-      children: /*#__PURE__*/React__default["default"].createElement(MajooIcons.ClearOutline, {
+    })), /*#__PURE__*/React__default["default"].createElement(InputRightElement, {
+      children: value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$g,
+          lineNumber: 31,
+          columnNumber: 55
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$c,
-          lineNumber: 30,
-          columnNumber: 52
+          fileName: _jsxFileName$g,
+          lineNumber: 31,
+          columnNumber: 73
         }
       }),
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 30,
-        columnNumber: 23
+        fileName: _jsxFileName$g,
+        lineNumber: 31,
+        columnNumber: 7
       }
-    }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null));
+    }));
   };
 
   InputSearchbox.propTypes = {
@@ -6378,8 +6595,8 @@
   });
 
   const _excluded$8 = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor"];
-  var _jsxFileName$b = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
-  const Box$1 = styled('div', {
+  var _jsxFileName$f = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
+  const Box = styled('div', {
     margin: 0,
     flexDirection: 'column',
     display: 'block',
@@ -6395,7 +6612,7 @@
     color: '$textPrimary',
     width: '100%'
   });
-  const BoxSelect$1 = styled('div', {
+  const BoxSelect = styled('div', {
     margin: 0,
     display: 'flex',
     position: 'relative',
@@ -6474,7 +6691,7 @@
       color: '$textDisable'
     }
   });
-  const IconContainer$1 = styled('div', {
+  const IconContainer = styled('div', {
     flex: ' 0 0 auto',
     width: 'auto',
     display: 'flex',
@@ -6482,7 +6699,7 @@
     paddingRight: '$spacing-05',
     cursor: 'pointer'
   });
-  const BoxItem$1 = styled('div', {
+  const BoxItem = styled('div', {
     display: 'none',
     overflow: 'auto',
     zIndex: 1,
@@ -6495,7 +6712,7 @@
     top: '100%',
     left: '0px'
   });
-  const SelectOption$1 = styled('div', {
+  const SelectOption = styled('div', {
     flexDirection: 'column',
     display: 'block',
     borderRadius: '$lg',
@@ -6503,7 +6720,7 @@
     overflowY: 'auto',
     height: '100%'
   });
-  const SelectItem$1 = styled('div', {
+  const SelectItem = styled('div', {
     overflow: 'hidden',
     borderBottom: '1px solid $bgBorder',
     padding: '$spacing-05 0',
@@ -6511,10 +6728,10 @@
     cursor: 'pointer',
     lineHeight: '20px'
   });
-  const StyledDiv$1 = styled('div', {
+  const StyledDiv = styled('div', {
     color: '$textDisable'
   });
-  function Select(_ref) {
+  function Select$1(_ref) {
     let {
       placeholder,
       option,
@@ -6544,7 +6761,7 @@
       initialSelectedItem: value !== undefined ? value : null,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 149,
         columnNumber: 5
       }
@@ -6559,21 +6776,21 @@
       highlightedIndex,
       initialSelectedItem,
       inputValue
-    }) => /*#__PURE__*/React__namespace.createElement(Box$1, {
+    }) => /*#__PURE__*/React__namespace.createElement(Box, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 167,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__namespace.createElement(BoxSelect$1, _extends({}, getRootProps({}, {
+    }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
       suppressRefError: true
     }), {
       size: size,
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 168,
         columnNumber: 11
       }
@@ -6583,7 +6800,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 170,
         columnNumber: 15
       }
@@ -6595,7 +6812,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 171,
         columnNumber: 17
       }
@@ -6604,7 +6821,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 178,
         columnNumber: 15
       }
@@ -6612,7 +6829,7 @@
       color: "primary",
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 180,
         columnNumber: 19
       }
@@ -6620,14 +6837,14 @@
       color: "primary",
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 182,
         columnNumber: 19
       }
-    }, placeholder)), /*#__PURE__*/React__namespace.createElement(IconContainer$1, _extends({}, getToggleButtonProps(), {
+    }, placeholder)), /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 186,
         columnNumber: 13
       }
@@ -6635,31 +6852,31 @@
       color: iconColor,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 187,
         columnNumber: 15
       }
-    }))), /*#__PURE__*/React__namespace.createElement(BoxItem$1, {
+    }))), /*#__PURE__*/React__namespace.createElement(BoxItem, {
       css: {
         display: isOpen ? 'block' : 'none'
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 190,
         columnNumber: 11
       }
-    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption$1, _extends({}, getMenuProps(), {
+    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 192,
         columnNumber: 15
       }
     }), item.map((item, index) => {
       var _item$value;
 
-      return /*#__PURE__*/React__namespace.createElement(SelectItem$1, _extends({}, getItemProps({
+      return /*#__PURE__*/React__namespace.createElement(SelectItem, _extends({}, getItemProps({
         item
       }), {
         key: (_item$value = item.value) != null ? _item$value : index,
@@ -6670,28 +6887,28 @@
         },
         __self: this,
         __source: {
-          fileName: _jsxFileName$b,
+          fileName: _jsxFileName$f,
           lineNumber: 194,
           columnNumber: 19
         }
       }), item.name);
-    })) : /*#__PURE__*/React__namespace.createElement(SelectOption$1, {
+    })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 208,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
+    }, /*#__PURE__*/React__namespace.createElement(StyledDiv, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 209,
         columnNumber: 17
       }
     }, "Item yang anda cari tidak ada")))));
   }
-  Select.propTypes = {
+  Select$1.propTypes = {
     placeholder: PropTypes__default["default"].string,
     option: PropTypes__default["default"].array.isRequired,
     onChange: PropTypes__default["default"].func,
@@ -6701,7 +6918,7 @@
     value: PropTypes__default["default"].object,
     iconColor: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object])
   };
-  Select.defaultProps = {
+  Select$1.defaultProps = {
     placeholder: 'Select Item',
     size: 'lg',
     disabled: false,
@@ -6730,8 +6947,56 @@
     }
   });
 
-  var _jsxFileName$a = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
-  const Box = styled('div', {
+  var _jsxFileName$e = "/home/omegalord666/work/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",
+    xmlSpace: "preserve",
+    width: "1em",
+    height: "1em",
+    style: {
+      shapeRendering: 'geometricPrecision',
+      textRendering: 'geometricPrecision',
+      imageRendering: 'optimizeQuality',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd'
+    },
+    viewBox: "0 0 13.06 13.06"
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 4,
+      columnNumber: 3
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 2.5A2.5 2.5 0 0 1 2.5 0h8.05a2.5 2.5 0 0 1 2.5 2.5v8.05a2.5 2.5 0 0 1-2.5 2.5H2.5c-.66 0-1.3-.26-1.77-.73S0 11.21 0 10.55V2.5z",
+    style: {
+      fill: props.color,
+      fillRule: 'nonzero'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 19,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M10.12 4.53a.47.47 0 0 0 .14-.33.47.47 0 0 0-.14-.33.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14L5.13 8.2 3.6 6.66a.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14.47.47 0 0 0-.14.33c0 .12.05.24.14.33l1.87 1.87c.04.04.09.08.15.1.06.02.12.04.18.04s.12-.01.18-.04c.06-.02.11-.06.15-.1l4.66-4.66z",
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 26,
+      columnNumber: 5
+    }
+  }));
+
+  var _jsxFileName$d = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+  const Wrapper = styled('div', {
     margin: 0,
     flexDirection: 'column',
     display: 'block',
@@ -6747,10 +7012,12 @@
     color: '$textPrimary',
     width: '100%'
   });
-  const BoxSelect = styled('div', {
+  const Select = styled('div', {
     margin: 0,
     display: 'flex',
     position: 'relative',
+    flexWrap: 'wrap',
+    width: '100%',
     appearance: 'none',
     background: 'none',
     boxSizing: 'border-box',
@@ -6766,11 +7033,13 @@
     variants: {
       size: {
         sm: {
-          height: 32,
+          height: 'auto',
+          minheight: 32,
           padding: '2px $spacing-05'
         },
         lg: {
-          height: 40,
+          height: 'auto',
+          minheight: 40,
           padding: '6px $spacing-05'
         }
       },
@@ -6789,10 +7058,20 @@
       }
     }
   });
-  const Input = styled('input', {
+  const TagWrapper = styled(Box$1, {
     display: 'flex',
-    width: '100%',
-    height: '100%',
+    position: 'relative',
+    flexWrap: 'wrap',
+    maxWidth: '100%'
+  });
+  const InputWrapper = styled('div', {
+    display: 'flex',
+    position: 'relative',
+    flex: 'auto',
+    flexWrap: 'wrap',
+    maxWidth: '100%'
+  });
+  const Input = styled('input', {
     background: 'none',
     outline: 'none',
     border: 'none',
@@ -6803,17 +7082,17 @@
       color: '$textDisable'
     }
   });
-  const IconContainer = styled('div', {
+  const IconWrapper = styled('div', {
     flex: ' 0 0 auto',
     width: 'auto',
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer'
   });
-  const StyledIcon = styled(MajooIcons.CaretDownOutline, {
+  const IconCaretDown = styled(MajooIcons.CaretDownOutline, {
     size: '24px'
   });
-  const BoxItem = styled('div', {
+  const OptionWrapper = styled('div', {
     display: 'none',
     overflow: 'hidden',
     zIndex: 1,
@@ -6828,7 +7107,7 @@
     left: '0px',
     padding: '0 8px'
   });
-  const SelectOption = styled('div', {
+  const Option = styled('div', {
     flexDirection: 'column',
     display: 'block',
     borderRadius: '$lg',
@@ -6836,16 +7115,22 @@
     overflowY: 'auto',
     height: '100%'
   });
-  const SelectItem = styled('div', {
+  const ItemWrapper = styled(Box$1, {
+    display: 'flex',
+    position: 'relative',
+    flex: 'auto',
+    flexWrap: 'wrap',
+    maxWidth: '100%',
+    cursor: 'pointer',
+    alignItems: 'center'
+  });
+  const Item$1 = styled('div', {
     overflow: 'hidden',
     borderBottom: '1px solid $bgBorder',
     padding: '8px 0',
     backgroundColor: 'rgb(235, 245, 255)',
-    cursor: 'pointer',
-    lineHeight: '20px'
-  });
-  const StyledDiv = styled('div', {
-    color: '$textDisable'
+    lineHeight: '20px',
+    marginLeft: '5px'
   });
   function SelectTag({
     placeholder,
@@ -6912,11 +7197,9 @@
 
             if (selectedItem) {
               if (selectedItems.includes(selectedItem)) {
-                setInputValue('');
                 removeSelectedItem(selectedItem);
                 selectItem(null);
               } else {
-                setInputValue('');
                 addSelectedItem(selectedItem);
                 selectItem(null);
               }
@@ -6925,74 +7208,75 @@
             break;
 
           case Downshift.useCombobox.stateChangeTypes.MenuMouseLeave:
-            closeMenu();
-            break;
         }
       }
     });
     const ref = /*#__PURE__*/React__namespace.createRef();
-    return /*#__PURE__*/React__namespace.createElement(Box, {
+    return /*#__PURE__*/React__namespace.createElement(Wrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 192,
+        fileName: _jsxFileName$d,
+        lineNumber: 209,
         columnNumber: 5
       }
-    }, /*#__PURE__*/React__namespace.createElement(BoxSelect, {
+    }, /*#__PURE__*/React__namespace.createElement(Select, {
       size: size,
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 193,
+        fileName: _jsxFileName$d,
+        lineNumber: 210,
         columnNumber: 7
       }
-    }, selectedItems.length !== 0 ? /*#__PURE__*/React__namespace.createElement(layout.Flex, {
-      gap: 3,
+    }, selectedItems.length !== 0 ? /*#__PURE__*/React__namespace.createElement(TagWrapper, {
+      disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 195,
+        fileName: _jsxFileName$d,
+        lineNumber: 212,
         columnNumber: 11
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag, _extends({
       ref: ref,
-      key: `selected-item-${index}`
+      key: `selected-item-${selectedItem.value}`
     }, getSelectedItemProps({
       selectedItem,
       index
     }), {
-      onClick: () => removeSelectedItem(selectedItem),
+      onClick: event => {
+        if (disabled === false) {
+          event.stopPropagation();
+          removeSelectedItem(selectedItem);
+        }
+      },
       rightIcon: /*#__PURE__*/React__namespace.createElement(MajooIcons.CloseOutline, {
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$a,
-          lineNumber: 202,
+          fileName: _jsxFileName$d,
+          lineNumber: 224,
           columnNumber: 28
         }
       }),
       css: {
         background: '$bgGray',
         border: 'none',
-        color: '$textContent'
+        color: '$textContent',
+        cursor: disabled ? 'not-allowed' : 'pointer'
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 197,
+        fileName: _jsxFileName$d,
+        lineNumber: 214,
         columnNumber: 15
       }
-    }), selectedItem.name))) : null, /*#__PURE__*/React__namespace.createElement("div", _extends({}, getComboboxProps(getToggleButtonProps({
+    }), selectedItem.name))) : null, /*#__PURE__*/React__namespace.createElement(InputWrapper, _extends({}, getComboboxProps(getToggleButtonProps({
       tabIndex: 0
     })), {
-      style: {
-        width: '100%'
-      },
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 210,
+        fileName: _jsxFileName$d,
+        lineNumber: 237,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(Input, _extends({
@@ -7003,73 +7287,99 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 211,
+        fileName: _jsxFileName$d,
+        lineNumber: 238,
         columnNumber: 11
       }
-    }))), /*#__PURE__*/React__namespace.createElement(IconContainer, {
+    }))), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 217,
+        fileName: _jsxFileName$d,
+        lineNumber: 244,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 218,
+        fileName: _jsxFileName$d,
+        lineNumber: 245,
         columnNumber: 11
       }
-    }))), /*#__PURE__*/React__namespace.createElement(BoxItem, {
+    }))), /*#__PURE__*/React__namespace.createElement(OptionWrapper, {
       css: {
-        display: isOpen ? 'block' : 'none'
+        display: isOpen && disabled === false ? 'block' : 'none'
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 221,
+        fileName: _jsxFileName$d,
+        lineNumber: 248,
         columnNumber: 7
       }
-    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
+    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 223,
+        fileName: _jsxFileName$d,
+        lineNumber: 250,
         columnNumber: 11
       }
-    }), isOpen && item.map((item, index) => {
-      var _item$value;
-
-      return /*#__PURE__*/React__namespace.createElement(SelectItem, _extends({
-        key: (_item$value = item.value) != null ? _item$value : index
-      }, getItemProps({
-        item,
-        index
-      }), {
-        css: {
-          backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-          fontWeight: selectedItems.includes(item) ? 'bold' : 'normal'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$a,
-          lineNumber: 226,
-          columnNumber: 17
-        }
-      }), item.name);
-    })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
+    }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper, _extends({
+      key: item.value
+    }, getItemProps({
+      item,
+      index: item.value - 1
+    }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 242,
-        columnNumber: 11
+        fileName: _jsxFileName$d,
+        lineNumber: 253,
+        columnNumber: 17
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledDiv, {
+    }), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
+      css: {
+        width: '16px',
+        height: '16px',
+        border: '1px solid $bgBorder'
+      },
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 243,
+        fileName: _jsxFileName$d,
+        lineNumber: 260,
+        columnNumber: 19
+      }
+    }, selectedItems.includes(item) ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
+      color: colors.iconGreen,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 261,
+        columnNumber: 53
+      }
+    }) : null), /*#__PURE__*/React__namespace.createElement(Item$1, {
+      css: {
+        backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+        fontWeight: selectedItems.includes(item) ? 'bold' : 'normal'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 263,
+        columnNumber: 19
+      }
+    }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 275,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__namespace.createElement(Box$1, {
+      css: {
+        color: '$textDisable'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 276,
         columnNumber: 13
       }
     }, "Item yang anda cari tidak ada"))));
@@ -7167,7 +7477,7 @@
   const PopoverAnchor = StyledAnchor;
 
   const _excluded$7 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-  var _jsxFileName$9 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
+  var _jsxFileName$c = "/home/omegalord666/work/majoo-ui/packages/react/src/components/slider/Slider.js";
   const StyledSlider = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
     display: 'flex',
@@ -7449,7 +7759,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 160,
         columnNumber: 5
       }
@@ -7458,7 +7768,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 181,
         columnNumber: 7
       }
@@ -7466,7 +7776,7 @@
       color: color,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 182,
         columnNumber: 9
       }
@@ -7475,7 +7785,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$c,
         lineNumber: 184,
         columnNumber: 7
       }
@@ -7575,7 +7885,7 @@
 
   const _excluded$6 = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size"],
         _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
-  var _jsxFileName$8 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\buttonGroup\\ButtonGroup.js";
+  var _jsxFileName$b = "/home/omegalord666/work/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
   const ButtonGroupComponent = styled(ToggleGroupPrimitive__namespace.Root, {
     display: 'inline-flex',
     borderRadius: '$md',
@@ -7717,7 +8027,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 111,
         columnNumber: 5
       }
@@ -7770,21 +8080,21 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 164,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 172,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$b,
         lineNumber: 174,
         columnNumber: 34
       }
@@ -7803,7 +8113,7 @@
   };
 
   const _excluded$5 = ["children", "value"];
-  var _jsxFileName$7 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\notificationBadge.js";
+  var _jsxFileName$a = "/home/omegalord666/work/majoo-ui/packages/react/src/components/notificationBadge/notificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
     position: 'relative',
     display: 'inline-flex',
@@ -7934,7 +8244,7 @@
     return /*#__PURE__*/React__default["default"].createElement(NotificationBadgeRootStyle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$a,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -7942,7 +8252,7 @@
       children: value,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$a,
         lineNumber: 135,
         columnNumber: 7
       }
@@ -7967,7 +8277,7 @@
   };
 
   const _excluded$4 = ["className", "children", "radius", "padding", "width", "height"];
-  var _jsxFileName$6 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\paper\\Paper.js";
+  var _jsxFileName$9 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/paper/Paper.js";
   const PaperComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -7999,7 +8309,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$9,
         lineNumber: 17,
         columnNumber: 5
       }
@@ -8060,7 +8370,7 @@
   });
 
   const _excluded$3 = ["children"];
-  var _jsxFileName$5 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\modalDialog\\ModalDialog.js";
+  var _jsxFileName$8 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/modalDialog/ModalDialog.js";
   const overlayShow = keyframes({
     '0%': {
       opacity: 0
@@ -8109,21 +8419,21 @@
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Portal, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$8,
         lineNumber: 38,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$8,
         lineNumber: 39,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$2, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$8,
         lineNumber: 40,
         columnNumber: 7
       }
@@ -8154,7 +8464,7 @@
   const DialogClose = DialogPrimitive__namespace.Close;
 
   const _excluded$2 = ["children"];
-  var _jsxFileName$4 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\drawer\\Drawer.js";
+  var _jsxFileName$7 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/drawer/Drawer.js";
   const fadeIn = keyframes({
     from: {
       opacity: '0'
@@ -8195,14 +8505,14 @@
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Root, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$4,
+        fileName: _jsxFileName$7,
         lineNumber: 36,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$4,
+        fileName: _jsxFileName$7,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -8259,9 +8569,14 @@
         bottom: {
           $$transformValue: 'translate3d(0,100%,0)',
           width: '100%',
-          height: 300,
+          height: 'fit-content',
+          maxWidth: 'unset',
           bottom: 0,
-          top: 'auto'
+          top: 'auto',
+          '@md': {
+            height: 300,
+            maxWidth: '80vh'
+          }
         },
         left: {
           $$transformValue: 'translate3d(-100%,0,0)',
@@ -8294,7 +8609,8 @@
   };
   const DrawerContent = StyledContent$1;
   DrawerContent.propTypes = {
-    side: PropTypes__default["default"].oneOf(['top', 'left', 'bottom', 'right'])
+    side: PropTypes__default["default"].oneOf(['top', 'left', 'bottom', 'right']),
+    isMobile: PropTypes__default["default"].bool
   };
   const DrawerTrigger = DialogPrimitive__namespace.Trigger;
   const DrawerClose = StyledClose;
@@ -8304,7 +8620,7 @@
   const _excluded$1 = ["children", "disabled"],
         _excluded2$1 = ["children", "hasContent", "arrowColor"],
         _excluded3$1 = ["children"];
-  var _jsxFileName$3 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\accordion\\Accordion.js";
+  var _jsxFileName$6 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/accordion/Accordion.js";
   //   from: { height: 0 },
   //   to: { height: 'var(--radix-accordion-content-height)' },
   // });
@@ -8327,7 +8643,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$6,
         lineNumber: 20,
         columnNumber: 3
       }
@@ -8390,14 +8706,14 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$6,
         lineNumber: 80,
         columnNumber: 3
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledTrigger, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$6,
         lineNumber: 81,
         columnNumber: 5
       }
@@ -8406,7 +8722,7 @@
       color: arrowColor,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$6,
         lineNumber: 83,
         columnNumber: 22
       }
@@ -8423,7 +8739,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledContent, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$6,
         lineNumber: 91,
         columnNumber: 61
       }
@@ -8457,6 +8773,69 @@
     dateStyle
   }).format(date);
 
+  function useMediaQuery(query) {
+    const [matches, setMatches] = React.useState(false);
+    React.useEffect(() => {
+      const media = window.matchMedia(query);
+
+      if (media.matches !== matches) {
+        setMatches(media.matches);
+      }
+
+      const listener = () => {
+        setMatches(media.matches);
+      };
+
+      media.addEventListener('change', listener);
+      return () => media.removeEventListener('change', listener);
+    }, [matches, query]);
+    return matches;
+  }
+
+  var _jsxFileName$5 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/AdvancedOption.js";
+  const ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {
+    width: '100%'
+  });
+  const Item = styled(ButtonGroupItem, {
+    fontSize: '$content-button',
+    lineHeight: '$content-button',
+    letterSpacing: '$content-button',
+    fontWeight: '600',
+    justifyContent: 'start',
+    mb: '$spacing-03',
+    height: '40px',
+    width: '100%',
+    minWidth: '140px'
+  });
+  const AdvancedOption = ({
+    options,
+    disabled,
+    optionHandler
+  }) => {
+    return /*#__PURE__*/React__default["default"].createElement(ButtonGroup, {
+      type: "single",
+      orientation: "vertical",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 25,
+        columnNumber: 5
+      }
+    }, options.map(option => /*#__PURE__*/React__default["default"].createElement(Item, {
+      isToggle: false,
+      key: option.value,
+      disabled: disabled,
+      value: option.value,
+      onClick: () => optionHandler(option.value),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$5,
+        lineNumber: 27,
+        columnNumber: 9
+      }
+    }, option.label)));
+  };
+
   const DateNumber = styled('div', {
     display: 'inline-flex',
     alignItems: 'center',
@@ -8507,10 +8886,18 @@
           size: '42px'
         },
         small: {
-          size: '32px'
+          height: '32px',
+          width: '45.5px'
         }
       }
     },
+    compoundVariants: [{
+      variant: 'selected',
+      size: 'small',
+      css: {
+        borderRadius: '80px'
+      }
+    }],
     defaultVariants: {
       variant: 'default',
       size: 'large'
@@ -8518,9 +8905,9 @@
   });
   DateNumber.displayName = 'DateNumber';
 
-  var _jsxFileName$2 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\components\\Calendar.js";
+  var _jsxFileName$4 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/Calendar.js";
 
-  const getVariant = ({
+  const getVariant$1 = ({
     selectable,
     selected,
     date
@@ -8552,7 +8939,7 @@
     return variant;
   };
 
-  const ArrowButton = styled('button', {
+  const ArrowButton$1 = styled('button', {
     all: 'unset',
     size: '32px',
     borderRadius: '$md',
@@ -8577,13 +8964,14 @@
       cursor: 'default'
     }
   });
-  const WeekdayBox = styled(Box$2, {
+  const WeekdayBox$1 = styled(Box$1, {
     display: 'inline-block',
     width: '42px',
     textAlign: 'center',
     marginBottom: '$spacing-05'
   });
-  const CalendarsContainer = styled(Box$2, {
+  const CalendarsContainer$1 = styled(Box$1, {
+    width: '100%',
     padding: '$spacing-04',
     display: 'inline-flex',
     borderRadius: '$lg',
@@ -8591,15 +8979,22 @@
     backgroundColor: '$white',
     // alignItems: 'center',
     justifyContent: 'center',
-    gap: '$spacing-04'
+    gap: '$spacing-04',
+    '@md': {
+      width: 'unset'
+    }
   });
-  const CalendarItemContainer = styled(Flex, {});
-  const DateContainer = styled(Box$2, {
-    maxWidth: '334px',
+  const CalendarItemContainer$1 = styled(Flex, {});
+  const DateContainer$1 = styled(Box$1, {
+    width: '100%',
     position: 'relative',
-    display: 'inline-block'
+    display: 'inline-block',
+    '@md': {
+      maxWidth: '334px',
+      width: 'unset'
+    }
   });
-  const TitleButton = styled(Heading, {
+  const TitleButton$1 = styled(Heading$1, {
     padding: '2px $spacing-04',
     '&:hover': {
       backgroundColor: '$bgSuccess',
@@ -8623,7 +9018,7 @@
       }
     }
   });
-  const MonthButton = styled(Text, {
+  const MonthButton$1 = styled(Text$1, {
     minWidth: '90px',
     textAlign: 'center',
     borderRadius: '$md',
@@ -8656,15 +9051,13 @@
       }
     }
   });
-  const DATE_PICKER = 0;
-  const MONTH_PICKER = 1;
-  const YEAR_PICKER = 2;
-  const YEAR_RANGE_PICKER = 3;
+  const DATE_PICKER$1 = 0;
+  const MONTH_PICKER$1 = 1;
+  const YEAR_PICKER$1 = 2;
+  const YEAR_RANGE_PICKER$1 = 3;
 
   const CalendarBox = ({
     calendars,
-    getBackProps,
-    getForwardProps,
     getDateProps,
     advanceView,
     onCalendarDateChange,
@@ -8677,7 +9070,7 @@
     disabled
   }) => {
     const [pickerState, setPickerState] = React.useState({
-      type: pickerType != null ? pickerType : DATE_PICKER,
+      type: pickerType != null ? pickerType : DATE_PICKER$1,
       selectedMonth: calendars[0].month,
       selectedYear: calendars[0].year,
       selectedYearRange: getCalendarStartYear(calendars[0].year),
@@ -8700,84 +9093,84 @@
     const multiDatePicker = calendars.length > 1;
 
     const renderTitleButton = index => {
-      return multiDatePicker ? /*#__PURE__*/React__default["default"].createElement(TitleButton, {
+      return multiDatePicker ? /*#__PURE__*/React__default["default"].createElement(TitleButton$1, {
         heading: "pageTitle",
         onClick: () => {
           onMultiDateChange(false);
           setPickerState(current => Object.assign({}, current, {
-            type: MONTH_PICKER
+            type: MONTH_PICKER$1
           }));
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 199,
+          fileName: _jsxFileName$4,
+          lineNumber: 205,
           columnNumber: 7
         }
-      }, monthNamesFull[calendars[index].month], " ", calendars[index].year) : /*#__PURE__*/React__default["default"].createElement(TitleButton, {
+      }, monthNamesFull[calendars[index].month], " ", calendars[index].year) : /*#__PURE__*/React__default["default"].createElement(TitleButton$1, {
         heading: "pageTitle",
         onClick: () => {
-          if (pickerState.type < YEAR_RANGE_PICKER) setPickerState(current => Object.assign({}, current, {
+          if (pickerState.type < YEAR_RANGE_PICKER$1) setPickerState(current => Object.assign({}, current, {
             type: current.type + 1
           }));
         },
-        disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
+        disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 212,
+          fileName: _jsxFileName$4,
+          lineNumber: 218,
           columnNumber: 7
         }
-      }, pickerState.type === DATE_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, monthNamesFull[calendars[0].month], " ", calendars[0].year), pickerState.type === MONTH_PICKER && pickerState.selectedYear, pickerState.type === YEAR_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9), pickerState.type === YEAR_RANGE_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99));
+      }, pickerState.type === DATE_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, monthNamesFull[calendars[0].month], " ", calendars[0].year), pickerState.type === MONTH_PICKER$1 && pickerState.selectedYear, pickerState.type === YEAR_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9), pickerState.type === YEAR_RANGE_PICKER$1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99));
     };
 
     const renderBackButton = () => {
-      return /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
+      return /*#__PURE__*/React__default["default"].createElement(ArrowButton$1, {
         disabled: disabled,
         onClick: () => setPickerState(current => Object.assign({}, current, {
-          selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth - 1 : current.selectedMonth,
-          selectedYear: pickerState.type === MONTH_PICKER ? current.selectedYear - 1 : current.selectedYear,
-          selectedYearRange: pickerState.type === YEAR_PICKER ? current.selectedYearRange - 10 : current.selectedYearRange,
-          selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
+          selectedMonth: pickerState.type === DATE_PICKER$1 ? current.selectedMonth - 1 : current.selectedMonth,
+          selectedYear: pickerState.type === MONTH_PICKER$1 ? current.selectedYear - 1 : current.selectedYear,
+          selectedYearRange: pickerState.type === YEAR_PICKER$1 ? current.selectedYearRange - 10 : current.selectedYearRange,
+          selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER$1 ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 244,
+          fileName: _jsxFileName$4,
+          lineNumber: 250,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronLeftOutline, {
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 260,
+          fileName: _jsxFileName$4,
+          lineNumber: 266,
           columnNumber: 9
         }
       }));
     };
 
     const renderForwardButton = () => {
-      return /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
+      return /*#__PURE__*/React__default["default"].createElement(ArrowButton$1, {
         disabled: disabled,
         onClick: () => setPickerState(current => Object.assign({}, current, {
-          selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth + 1 : current.selectedMonth,
-          selectedYear: pickerState.type === MONTH_PICKER && current.selectedYear < 2100 ? current.selectedYear + 1 : current.selectedYear,
-          selectedYearRange: pickerState.type === YEAR_PICKER && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
-          selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
+          selectedMonth: pickerState.type === DATE_PICKER$1 ? current.selectedMonth + 1 : current.selectedMonth,
+          selectedYear: pickerState.type === MONTH_PICKER$1 && current.selectedYear < 2100 ? current.selectedYear + 1 : current.selectedYear,
+          selectedYearRange: pickerState.type === YEAR_PICKER$1 && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
+          selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER$1 && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 266,
+          fileName: _jsxFileName$4,
+          lineNumber: 272,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronRightOutline, {
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 287,
+          fileName: _jsxFileName$4,
+          lineNumber: 293,
           columnNumber: 9
         }
       }));
@@ -8792,8 +9185,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 293,
+          fileName: _jsxFileName$4,
+          lineNumber: 299,
           columnNumber: 7
         }
       }, multiDatePicker ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -8805,18 +9198,18 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 296,
+          fileName: _jsxFileName$4,
+          lineNumber: 302,
           columnNumber: 13
         }
-      }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default["default"].createElement(Box$1, {
         css: {
           size: '32px'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 306,
+          fileName: _jsxFileName$4,
+          lineNumber: 312,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -8826,8 +9219,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 312,
+          fileName: _jsxFileName$4,
+          lineNumber: 318,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -8839,18 +9232,18 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 318,
+          fileName: _jsxFileName$4,
+          lineNumber: 324,
           columnNumber: 13
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
         css: {
           size: '32px'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 326,
+          fileName: _jsxFileName$4,
+          lineNumber: 332,
           columnNumber: 15
         }
       }), renderTitleButton(1), renderForwardButton())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderBackButton(), renderTitleButton(), renderForwardButton()));
@@ -8864,8 +9257,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 348,
+          fileName: _jsxFileName$4,
+          lineNumber: 354,
           columnNumber: 7
         }
       }, calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
@@ -8882,8 +9275,8 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$2,
-              lineNumber: 359,
+              fileName: _jsxFileName$4,
+              lineNumber: 365,
               columnNumber: 17
             }
           });
@@ -8901,11 +9294,11 @@
         return /*#__PURE__*/React__default["default"].createElement(DateNumber, _extends({
           key: key
         }, dateProps, {
-          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+          variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$2,
-            lineNumber: 376,
+            fileName: _jsxFileName$4,
+            lineNumber: 382,
             columnNumber: 15
           }
         }), date.getDate());
@@ -8921,22 +9314,22 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 392,
+          fileName: _jsxFileName$4,
+          lineNumber: 398,
           columnNumber: 7
         }
-      }, yearRangesList(pickerState.selectedYearRangeStart).map(range => /*#__PURE__*/React__default["default"].createElement(MonthButton, {
+      }, yearRangesList(pickerState.selectedYearRangeStart).map(range => /*#__PURE__*/React__default["default"].createElement(MonthButton$1, {
         key: range.start,
         paragraph: "shortContentRegular",
         isSelected: pickerState.selectedYearRange === range.start,
         onClick: () => setPickerState(current => Object.assign({}, current, {
           selectedYearRange: range.start,
-          type: YEAR_PICKER
+          type: YEAR_PICKER$1
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 400,
+          fileName: _jsxFileName$4,
+          lineNumber: 406,
           columnNumber: 11
         }
       }, range.start, "-", range.end)));
@@ -8953,22 +9346,22 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 423,
+          fileName: _jsxFileName$4,
+          lineNumber: 429,
           columnNumber: 7
         }
-      }, yearsArray.map((year, index) => /*#__PURE__*/React__default["default"].createElement(MonthButton, {
+      }, yearsArray.map((year, index) => /*#__PURE__*/React__default["default"].createElement(MonthButton$1, {
         key: year,
         paragraph: "shortContentRegular",
         isSelected: pickerState.selectedYear === year,
         onClick: () => setPickerState(current => Object.assign({}, current, {
           selectedYear: year,
-          type: MONTH_PICKER
+          type: MONTH_PICKER$1
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 431,
+          fileName: _jsxFileName$4,
+          lineNumber: 437,
           columnNumber: 11
         }
       }, year)));
@@ -8983,11 +9376,11 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 452,
+          fileName: _jsxFileName$4,
+          lineNumber: 458,
           columnNumber: 7
         }
-      }, monthNamesFull.map((monthName, index) => /*#__PURE__*/React__default["default"].createElement(MonthButton, {
+      }, monthNamesFull.map((monthName, index) => /*#__PURE__*/React__default["default"].createElement(MonthButton$1, {
         key: monthName,
         paragraph: "shortContentRegular",
         isSelected: pickerState.selectedMonth === index,
@@ -8995,25 +9388,25 @@
           if (onMultiDateChange) onMultiDateChange(true);
           setPickerState(current => Object.assign({}, current, {
             selectedMonth: index,
-            type: DATE_PICKER
+            type: DATE_PICKER$1
           }));
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 460,
+          fileName: _jsxFileName$4,
+          lineNumber: 466,
           columnNumber: 11
         }
       }, monthName)));
     };
 
     const renderWeekLabel = calendar => {
-      return weekdayNamesShort.map(weekday => /*#__PURE__*/React__default["default"].createElement(WeekdayBox, {
+      return weekdayNamesShort.map(weekday => /*#__PURE__*/React__default["default"].createElement(WeekdayBox$1, {
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 482,
+          fileName: _jsxFileName$4,
+          lineNumber: 488,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9023,19 +9416,19 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 483,
+          fileName: _jsxFileName$4,
+          lineNumber: 489,
           columnNumber: 9
         }
       }, weekday)));
     };
 
     const renderFooter = () => {
-      return /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 497,
+          fileName: _jsxFileName$4,
+          lineNumber: 503,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -9044,8 +9437,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 498,
+          fileName: _jsxFileName$4,
+          lineNumber: 504,
           columnNumber: 9
         }
       }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -9053,11 +9446,11 @@
         align: "center",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 499,
+          fileName: _jsxFileName$4,
+          lineNumber: 505,
           columnNumber: 9
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Heading, {
+      }, /*#__PURE__*/React__default["default"].createElement(Heading$1, {
         heading: "sectionTitle",
         color: selected.length > 1 ? 'primary' : 'disable',
         css: {
@@ -9065,16 +9458,16 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 500,
+          fileName: _jsxFileName$4,
+          lineNumber: 506,
           columnNumber: 11
         }
       }, selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : 'Tanggal belum dipilih'), /*#__PURE__*/React__default["default"].createElement(Flex, {
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 511,
+          fileName: _jsxFileName$4,
+          lineNumber: 517,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -9086,8 +9479,8 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 512,
+          fileName: _jsxFileName$4,
+          lineNumber: 518,
           columnNumber: 13
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -9098,51 +9491,51 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 522,
+          fileName: _jsxFileName$4,
+          lineNumber: 528,
           columnNumber: 13
         }
       }, "Proses"))));
     };
 
     if (calendars.length) {
-      return /*#__PURE__*/React__default["default"].createElement(CalendarsContainer, {
+      return /*#__PURE__*/React__default["default"].createElement(CalendarsContainer$1, {
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 539,
+          fileName: _jsxFileName$4,
+          lineNumber: 545,
           columnNumber: 7
         }
       }, advanceView, advanceView && /*#__PURE__*/React__default["default"].createElement(Separator, {
         orientation: "vertical",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 542,
+          fileName: _jsxFileName$4,
+          lineNumber: 548,
           columnNumber: 25
         }
-      }), /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 543,
+          fileName: _jsxFileName$4,
+          lineNumber: 549,
           columnNumber: 9
         }
-      }, renderHeader(), /*#__PURE__*/React__default["default"].createElement(CalendarItemContainer, {
+      }, renderHeader(), /*#__PURE__*/React__default["default"].createElement(CalendarItemContainer$1, {
         gap: 5,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 545,
+          fileName: _jsxFileName$4,
+          lineNumber: 551,
           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$2,
-          lineNumber: 547,
+          fileName: _jsxFileName$4,
+          lineNumber: 553,
           columnNumber: 15
         }
       }, index > 0 && /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -9152,15 +9545,15 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 549,
+          fileName: _jsxFileName$4,
+          lineNumber: 555,
           columnNumber: 19
         }
-      }), /*#__PURE__*/React__default["default"].createElement(DateContainer, {
+      }), /*#__PURE__*/React__default["default"].createElement(DateContainer$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 556,
+          fileName: _jsxFileName$4,
+          lineNumber: 562,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -9169,55 +9562,709 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 557,
+          fileName: _jsxFileName$4,
+          lineNumber: 563,
           columnNumber: 19
         }
-      }), pickerState.type === DATE_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderWeekLabel(calendar), renderDateNumber(calendar)), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList())))), multiDatePicker && renderFooter()));
+      }), 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()));
     }
 
     return null;
   };
 
-  const _excluded = ["multiDatePicker", "onChange", "onCancel", "advanceView", "selected", "disabled"],
-        _excluded2 = ["multiDatePicker", "onChange", "onCancel", "advanceView", "selected", "disabled"],
-        _excluded3 = ["type"];
-  var _jsxFileName$1 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\DatePicker.js";
-  const SINGLE_PICKER = 'single';
-  const RANGE_PICKER = 'range';
+  var _jsxFileName$3 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/MobileCalendar.js";
 
-  const CalendarPicker = _ref => {
-    let {
-      multiDatePicker,
-      onChange,
-      onCancel,
-      advanceView,
-      selected,
-      disabled
-    } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const getVariant = ({
+    selectable,
+    selected,
+    date
+  }, month, selectedDate) => {
+    let variant = 'default';
 
-    const [dateValue, setDateValue] = React.useState();
-    const [calendarDate, setCalendarDate] = React.useState(new Date());
+    if (selected) {
+      variant = 'selected';
+    }
 
-    const onDateSelected = selectedDate => {
-      setDateValue(selectedDate.date);
-    };
+    if (!selectable) {
+      variant = 'disabled';
+    }
 
-    const updateHandler = () => {
-      if (dateValue && onChange) {
-        onChange(dateValue);
+    if (date.getMonth() !== month) {
+      variant = 'neutral';
+    }
+
+    if (selectedDate && selectedDate.length === 2 && selectedDate[0].toDateString() !== selectedDate[1].toDateString()) {
+      if (selectedDate[0].toDateString() === date.toDateString()) {
+        variant = 'start';
+      } else if (selectedDate[1].toDateString() === date.toDateString()) {
+        variant = 'end';
+      } else if (selectedDate[0] < date && date < selectedDate[1]) {
+        variant = 'road';
       }
-    };
+    }
 
-    const dayzedData = dayzed.useDayzed(Object.assign({}, props, {
-      date: calendarDate,
-      selected: dateValue,
-      monthsToDisplay: multiDatePicker ? 2 : 1,
-      showOutsideDays: true,
-      onDateSelected
-    }));
-    React.useEffect(() => {
+    return variant;
+  };
+
+  const ArrowButton = styled('button', {
+    all: 'unset',
+    size: '32px',
+    borderRadius: '$md',
+    backgroundColor: 'transparent',
+    border: 'none',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: '$iconPrimary',
+    '&:hover': {
+      backgroundColor: '$bgSuccess',
+      color: '$textGreen'
+    },
+    '&:active': {
+      backgroundColor: '$bgGreen',
+      color: '$white'
+    },
+    cursor: 'pointer',
+    '&:disabled': {
+      backgroundColor: '$btnDisable',
+      color: '$iconDisable',
+      cursor: 'default'
+    }
+  });
+  const WeekdayBox = styled(Box$1, {
+    display: 'inline-block',
+    width: '45.5px',
+    textAlign: 'center',
+    marginBottom: '$spacing-04',
+    '@md': {
+      width: '32px'
+    }
+  });
+  const DatePickerContainer = styled(Box$1, {
+    width: '100%',
+    height: '100%',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+    backgroundColor: '$white',
+    '@md': {
+      width: 'unset'
+    }
+  });
+  const CalendarsContainer = styled(Box$1, {
+    width: '100%',
+    overflow: 'auto',
+    padding: '$spacing-02 20px $spacing-05',
+    display: 'inline-flex',
+    position: 'absolute',
+    bottom: 0,
+    borderRadius: '$lg',
+    backgroundColor: '$white',
+    // alignItems: 'center',
+    justifyContent: 'center',
+    gap: '$spacing-04',
+    maxHeight: '90vh',
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    '-ms-overflow-style': 'none',
+    scrollbarWidth: 'none',
+    '&::-webkit-scrollbar': {
+      display: 'none'
+    }
+  });
+  const CalendarItemContainer = styled(Flex, {
+    height: '100%',
+    paddingBottom: '160px'
+  });
+  const DateContainer = styled(Box$1, {
+    width: '100%',
+    position: 'relative',
+    display: 'inline-block',
+    '@md': {
+      maxWidth: '334px',
+      width: 'unset'
+    }
+  });
+  const FooterContainer = styled(Flex, {
+    position: 'relative',
+    backgroundColor: '$white',
+    boxShadow: '0px -1px 8px rgba(0, 0, 0, 0.12)',
+    padding: '$spacing-05 $spacing-04'
+  });
+  const TitleButton = styled(Heading$1, {
+    padding: '2px $spacing-04',
+    '&:hover': {
+      backgroundColor: '$bgSuccess',
+      color: '$textGreen'
+    },
+    '&:active': {
+      backgroundColor: '$bgGreen',
+      color: '$white'
+    },
+    cursor: 'pointer',
+    '&:disabled': {
+      backgroundColor: '$btnDisable',
+      color: '$iconDisable',
+      cursor: 'default'
+    },
+    variants: {
+      disabled: {
+        true: {
+          pointerEvents: 'none'
+        }
+      }
+    }
+  });
+  const MonthButton = styled(Text$1, {
+    minWidth: '90px',
+    textAlign: 'center',
+    borderRadius: '$md',
+    padding: '$spacing-05 0',
+    cursor: 'pointer',
+    fontSize: '$short-content-regular',
+    lineHeight: '$short-content-regular',
+    letterSpacing: '$short-content-regular',
+    fontWeight: '400',
+    color: '$textPrimary',
+    '&:hover': {
+      backgroundColor: '$bgSuccess',
+      color: '$textGreen'
+    },
+    '&:active': {
+      backgroundColor: '$bgGreen',
+      color: '$white'
+    },
+    '&:disabled': {
+      backgroundColor: '$btnDisable',
+      color: '$iconDisable',
+      cursor: 'default'
+    },
+    variants: {
+      isSelected: {
+        true: {
+          backgroundColor: '$bgGreen',
+          color: '$white'
+        }
+      }
+    }
+  });
+  const AdvanceViewToggleButton = styled(Flex, {
+    alignSelf: 'flex-end',
+    cursor: 'pointer'
+  });
+  const DATE_PICKER = 0;
+  const MONTH_PICKER = 1;
+  const YEAR_PICKER = 2;
+  const YEAR_RANGE_PICKER = 3;
+
+  const MobileCalendarBox = ({
+    calendars,
+    getDateProps,
+    advanceView,
+    onCalendarDateChange,
+    onMultiDateChange,
+    pickerType,
+    onUpdate,
+    onCancel,
+    selected,
+    containerStyle,
+    disabled
+  }) => {
+    const [pickerState, setPickerState] = React.useState({
+      type: pickerType != null ? pickerType : DATE_PICKER,
+      selectedMonth: calendars[0].month,
+      selectedYear: calendars[0].year,
+      selectedYearRange: getCalendarStartYear(calendars[0].year),
+      selectedYearRangeStart: getCalendarStartYearRange(calendars[0].year)
+    });
+    const [expandAdvanceView, setExpandAdvanceView] = React.useState(false);
+    React.useEffect(() => {
+      const selectedDate = new Date(pickerState.selectedYear, pickerState.selectedMonth, 1, 0);
+
+      if (pickerState.selectedMonth < 0) {
+        setPickerState(current => Object.assign({}, current, {
+          selectedMonth: selectedDate.getMonth(),
+          selectedYear: selectedDate.getFullYear(),
+          selectedYearRange: getCalendarStartYear(selectedDate.getFullYear()),
+          selectedYearRangeStart: getCalendarStartYearRange(selectedDate.getFullYear())
+        }));
+      } else {
+        onCalendarDateChange(selectedDate);
+      }
+    }, [pickerState.selectedMonth]);
+    const multiDatePicker = calendars.length > 1;
+
+    const renderTitleButton = index => {
+      return multiDatePicker ? /*#__PURE__*/React__default["default"].createElement(TitleButton, {
+        heading: "sectionTitle",
+        onClick: () => {
+          onMultiDateChange(false);
+          setPickerState(current => Object.assign({}, current, {
+            type: MONTH_PICKER
+          }));
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 241,
+          columnNumber: 7
+        }
+      }, monthNamesFull[calendars[index].month], " ", calendars[index].year) : /*#__PURE__*/React__default["default"].createElement(TitleButton, {
+        heading: "sectionTitle",
+        onClick: () => {
+          if (pickerState.type < YEAR_RANGE_PICKER) setPickerState(current => Object.assign({}, current, {
+            type: current.type + 1
+          }));
+        },
+        disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 254,
+          columnNumber: 7
+        }
+      }, pickerState.type === DATE_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, monthNamesFull[calendars[0].month], " ", calendars[0].year), pickerState.type === MONTH_PICKER && pickerState.selectedYear, pickerState.type === YEAR_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9), pickerState.type === YEAR_RANGE_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99));
+    };
+
+    const renderBackButton = () => {
+      return /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
+        disabled: disabled,
+        onClick: () => setPickerState(current => Object.assign({}, current, {
+          selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth - 1 : current.selectedMonth,
+          selectedYear: pickerState.type === MONTH_PICKER ? current.selectedYear - 1 : current.selectedYear,
+          selectedYearRange: pickerState.type === YEAR_PICKER ? current.selectedYearRange - 10 : current.selectedYearRange,
+          selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER ? current.selectedYearRangeStart - 100 : current.selectedYearRangeStart
+        })),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 286,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronLeftOutline, {
+        color: "currentColor",
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 302,
+          columnNumber: 9
+        }
+      }));
+    };
+
+    const renderForwardButton = () => {
+      return /*#__PURE__*/React__default["default"].createElement(ArrowButton, {
+        disabled: disabled,
+        onClick: () => setPickerState(current => Object.assign({}, current, {
+          selectedMonth: pickerState.type === DATE_PICKER ? current.selectedMonth + 1 : current.selectedMonth,
+          selectedYear: pickerState.type === MONTH_PICKER && current.selectedYear < 2100 ? current.selectedYear + 1 : current.selectedYear,
+          selectedYearRange: pickerState.type === YEAR_PICKER && current.selectedYearRange < 2091 ? current.selectedYearRange + 10 : current.selectedYearRange,
+          selectedYearRangeStart: pickerState.type === YEAR_RANGE_PICKER && current.selectedYearRangeStart < 2001 ? current.selectedYearRangeStart + 100 : current.selectedYearRangeStart
+        })),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 308,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronRightOutline, {
+        color: "currentColor",
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 329,
+          columnNumber: 9
+        }
+      }));
+    };
+
+    const renderHeader = index => {
+      return /*#__PURE__*/React__default["default"].createElement(Flex, {
+        justify: "between",
+        align: "center",
+        css: {
+          height: '44px'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 335,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderBackButton(), renderTitleButton(index), renderForwardButton()));
+    };
+
+    const renderDateNumber = calendar => {
+      return /*#__PURE__*/React__default["default"].createElement(Grid, {
+        columns: 7,
+        css: {
+          gridRowGap: '$spacing-04'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 347,
+          columnNumber: 7
+        }
+      }, calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
+        const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;
+
+        if (!dateObj) {
+          return /*#__PURE__*/React__default["default"].createElement("div", {
+            key: key,
+            style: {
+              display: 'inline-block',
+              width: '32px',
+              border: 'none',
+              background: 'transparent'
+            },
+            __self: undefined,
+            __source: {
+              fileName: _jsxFileName$3,
+              lineNumber: 358,
+              columnNumber: 17
+            }
+          });
+        }
+
+        const {
+          date
+        } = dateObj; // let background = today ? 'cornflowerblue' : '';
+        // background = selected ? 'purple' : background;
+        // background = !selectable ? 'teal' : background;
+
+        const dateProps = disabled ? {} : getDateProps({
+          dateObj
+        });
+        return /*#__PURE__*/React__default["default"].createElement(DateNumber, _extends({
+          key: key,
+          size: "small"
+        }, dateProps, {
+          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$3,
+            lineNumber: 375,
+            columnNumber: 15
+          }
+        }), date.getDate());
+      })));
+    };
+
+    const renderYearRangesList = () => {
+      return /*#__PURE__*/React__default["default"].createElement(Grid, {
+        columns: 3,
+        css: {
+          gridRowGap: '$spacing-06',
+          gridColumnGap: '20px'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 392,
+          columnNumber: 7
+        }
+      }, yearRangesList(pickerState.selectedYearRangeStart).map(range => /*#__PURE__*/React__default["default"].createElement(MonthButton, {
+        key: range.start,
+        paragraph: "shortContentRegular",
+        isSelected: pickerState.selectedYearRange === range.start,
+        onClick: () => setPickerState(current => Object.assign({}, current, {
+          selectedYearRange: range.start,
+          type: YEAR_PICKER
+        })),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 400,
+          columnNumber: 11
+        }
+      }, range.start, "-", range.end)));
+    };
+
+    const renderYearsList = () => {
+      const startYear = pickerState.selectedYearRange;
+      const yearsArray = Array.from(new Array(10), (val, index) => index + startYear);
+      return /*#__PURE__*/React__default["default"].createElement(Grid, {
+        columns: 3,
+        css: {
+          gridRowGap: '$spacing-06',
+          gridColumnGap: '20px'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 423,
+          columnNumber: 7
+        }
+      }, yearsArray.map((year, index) => /*#__PURE__*/React__default["default"].createElement(MonthButton, {
+        key: year,
+        paragraph: "shortContentRegular",
+        isSelected: pickerState.selectedYear === year,
+        onClick: () => setPickerState(current => Object.assign({}, current, {
+          selectedYear: year,
+          type: MONTH_PICKER
+        })),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 431,
+          columnNumber: 11
+        }
+      }, year)));
+    };
+
+    const renderMonthsList = () => {
+      return /*#__PURE__*/React__default["default"].createElement(Grid, {
+        columns: 3,
+        css: {
+          gridRowGap: '$spacing-06',
+          gridColumnGap: '20px'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 452,
+          columnNumber: 7
+        }
+      }, monthNamesFull.map((monthName, index) => /*#__PURE__*/React__default["default"].createElement(MonthButton, {
+        key: monthName,
+        paragraph: "shortContentRegular",
+        isSelected: pickerState.selectedMonth === index,
+        onClick: () => {
+          if (onMultiDateChange) onMultiDateChange(true);
+          setPickerState(current => Object.assign({}, current, {
+            selectedMonth: index,
+            type: DATE_PICKER
+          }));
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 460,
+          columnNumber: 11
+        }
+      }, monthName)));
+    };
+
+    const renderWeekLabel = calendar => {
+      return /*#__PURE__*/React__default["default"].createElement(Flex, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 482,
+          columnNumber: 7
+        }
+      }, weekdayNamesShort.map(weekday => /*#__PURE__*/React__default["default"].createElement(WeekdayBox, {
+        key: `${calendar.month}${calendar.year}${weekday}`,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 484,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+        paragraph: "shortContentBold",
+        css: {
+          color: '$textSecondary'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 485,
+          columnNumber: 13
+        }
+      }, weekday))));
+    };
+
+    const renderFooter = () => {
+      return /*#__PURE__*/React__default["default"].createElement(FooterContainer, {
+        direction: "column",
+        center: true,
+        gap: 4,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 501,
+          columnNumber: 7
+        }
+      }, advanceView && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AdvanceViewToggleButton, {
+        gap: 3,
+        align: "center",
+        onClick: () => setExpandAdvanceView(!expandAdvanceView),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 504,
+          columnNumber: 13
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        variant: "contentButton",
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 505,
+          columnNumber: 15
+        }
+      }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronDownOutline, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 506,
+          columnNumber: 36
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronUpOutline, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 506,
+          columnNumber: 61
+        }
+      })), expandAdvanceView && advanceView, /*#__PURE__*/React__default["default"].createElement(Separator, {
+        css: {
+          marginBottom: '$spacing-05'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 509,
+          columnNumber: 13
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(Text$1, {
+        variant: "status",
+        color: selected.length > 1 ? 'primary' : 'disable',
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 516,
+          columnNumber: 9
+        }
+      }, selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : 'Tanggal belum dipilih'), /*#__PURE__*/React__default["default"].createElement(Flex, {
+        gap: 3,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 521,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
+        buttonType: "ghost",
+        size: "lg",
+        css: {
+          width: '160px',
+          fontWeight: 600
+        },
+        onClick: onCancel,
+        disabled: disabled,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 522,
+          columnNumber: 11
+        }
+      }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
+        size: "lg",
+        css: {
+          width: '160px',
+          fontWeight: 600
+        },
+        onClick: onUpdate,
+        disabled: disabled,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 534,
+          columnNumber: 11
+        }
+      }, "Proses")));
+    };
+
+    if (calendars.length) {
+      return /*#__PURE__*/React__default["default"].createElement(DatePickerContainer, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 552,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(CalendarsContainer, {
+        css: containerStyle,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 553,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(CalendarItemContainer, {
+        direction: "column",
+        gap: 5,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 554,
+          columnNumber: 11
+        }
+      }, calendars.map((calendar, index) => /*#__PURE__*/React__default["default"].createElement(DateContainer, {
+        key: `${calendar.month}${calendar.year}`,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 556,
+          columnNumber: 15
+        }
+      }, renderHeader(index), /*#__PURE__*/React__default["default"].createElement(Separator, {
+        css: {
+          marginBottom: '$spacing-05'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 558,
+          columnNumber: 17
+        }
+      }), pickerState.type === DATE_PICKER && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderWeekLabel(calendar), renderDateNumber(calendar)), pickerState.type === MONTH_PICKER && renderMonthsList(), pickerState.type === YEAR_PICKER && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER && renderYearRangesList())))), multiDatePicker && renderFooter());
+    }
+
+    return null;
+  };
+
+  const _excluded = ["multiDatePicker", "onChange", "onCancel", "advanceView", "selected", "disabled"],
+        _excluded2 = ["multiDatePicker", "onChange", "onCancel", "advanceView", "selected", "disabled"],
+        _excluded3 = ["type"];
+  var _jsxFileName$2 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/DatePicker.js";
+  const SINGLE_PICKER = 'single';
+  const RANGE_PICKER = 'range';
+  const ADVANCE_PICKER = 'advance';
+
+  const CalendarPicker = _ref => {
+    let {
+      multiDatePicker,
+      onChange,
+      onCancel,
+      advanceView,
+      selected,
+      disabled
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+    const [dateValue, setDateValue] = React.useState();
+    const [calendarDate, setCalendarDate] = React.useState(selected != null ? selected : new Date());
+
+    const onDateSelected = selectedDate => {
+      setDateValue(selectedDate.date);
+    };
+
+    const updateHandler = () => {
+      if (dateValue && onChange) {
+        onChange(dateValue);
+      }
+    };
+
+    const dayzedData = dayzed.useDayzed(Object.assign({}, props, {
+      date: calendarDate,
+      selected: dateValue,
+      monthsToDisplay: multiDatePicker ? 2 : 1,
+      showOutsideDays: true,
+      onDateSelected
+    }));
+    React.useEffect(() => {
       if (selected) {
         setDateValue(selected);
       }
@@ -9226,165 +10273,782 @@
       if (dateValue && !multiDatePicker && onChange) {
         onChange(dateValue);
       }
-    }, [dateValue]);
-    return /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
-      onUpdate: multiDatePicker ? updateHandler : undefined,
-      onCancel: onCancel,
-      selected: dateValue ? [dateValue] : undefined,
-      advanceView: advanceView,
-      disabled: disabled,
-      onCalendarDateChange: date => setCalendarDate(date)
-    }, dayzedData, {
-      __self: undefined,
+    }, [dateValue]);
+    return /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
+      onUpdate: multiDatePicker ? updateHandler : undefined,
+      onCancel: onCancel,
+      selected: dateValue ? [dateValue] : undefined,
+      advanceView: advanceView,
+      disabled: disabled,
+      onCalendarDateChange: date => setCalendarDate(date)
+    }, dayzedData, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 41,
+        columnNumber: 5
+      }
+    }));
+  };
+
+  const CalendarRangePicker = _ref2 => {
+    let {
+      multiDatePicker,
+      onChange,
+      onCancel,
+      advanceView,
+      selected,
+      disabled
+    } = _ref2,
+        props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+    const today = new Date();
+    const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+    const [dateValue, setDateValue] = React.useState([]);
+    const [calendarDate, setCalendarDate] = React.useState(selected ? selected[0] : !advanceView ? today : prevMonth);
+    const [isMultiDate, setIsMultiDate] = React.useState(multiDatePicker);
+    const isMobile = useMediaQuery('(max-width: 767px)');
+    React.useEffect(() => {
+      if (selected) {
+        setDateValue(selected);
+      }
+    }, [selected]);
+
+    const onDateSelected = selectedDate => {
+      if (!dateValue.length || dateValue.length === 2) {
+        setDateValue([selectedDate.date]);
+      } else {
+        if (selectedDate.date.toDateString() === dateValue[0].toDateString()) {
+          return;
+        }
+
+        if (new Date(dateValue[0]) > selectedDate.date) {
+          setDateValue([selectedDate.date, dateValue[0]]);
+        } else {
+          setDateValue([dateValue[0], selectedDate.date]);
+        }
+      }
+    };
+
+    const dayzedData = dayzed.useDayzed(Object.assign({}, props, {
+      date: calendarDate,
+      selected: dateValue,
+      monthsToDisplay: isMultiDate ? 2 : 1,
+      onDateSelected
+    }));
+
+    const updateHandler = () => {
+      if (dateValue && onChange) {
+        if (dateValue.length === 1) {
+          onChange([dateValue[0], dateValue[0]]);
+        } else {
+          onChange(dateValue);
+        }
+      }
+    };
+
+    return isMobile ? /*#__PURE__*/React__default["default"].createElement(MobileCalendarBox, _extends({
+      onUpdate: multiDatePicker ? updateHandler : undefined,
+      onCancel: onCancel,
+      selected: dateValue,
+      advanceView: isMultiDate ? advanceView : undefined,
+      disabled: disabled,
+      onCalendarDateChange: date => setCalendarDate(date),
+      onMultiDateChange: isMultiDate => setIsMultiDate(isMultiDate)
+    }, dayzedData, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 100,
+        columnNumber: 5
+      }
+    })) : /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
+      onUpdate: multiDatePicker ? updateHandler : undefined,
+      onCancel: onCancel,
+      selected: dateValue,
+      advanceView: isMultiDate ? advanceView : undefined,
+      disabled: disabled,
+      onCalendarDateChange: date => setCalendarDate(date),
+      onMultiDateChange: isMultiDate => setIsMultiDate(isMultiDate)
+    }, dayzedData, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 111,
+        columnNumber: 5
+      }
+    }));
+  };
+
+  const DatePicker = props => {
+    const {
+      type
+    } = props,
+          otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
+
+    if (type !== SINGLE_PICKER) {
+      return /*#__PURE__*/React__default["default"].createElement(CalendarRangePicker, _extends({}, otherProps, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 127,
+          columnNumber: 12
+        }
+      }));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(CalendarPicker, _extends({}, otherProps, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 129,
+        columnNumber: 10
+      }
+    }));
+  };
+
+  var _jsxFileName$1 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/InputDatePicker.js";
+  const UPDATE = 'UPDATE';
+  const TODAY = 'TODAY';
+  const YESTERDAY = 'YESTERDAY';
+  const LAST_7_DAYS = 'LAST_7_DAYS';
+  const LAST_WEEK = 'LAST_WEEK';
+  const THIS_WEEK = 'THIS_WEEK';
+  const LAST_MONTH = 'LAST_MONTH';
+  const LAST_TWO_MONTHS = 'LAST_TWO_MONTH';
+  const THIS_MONTH = 'THIS_MONTH';
+  const options = [{
+    label: 'Hari Ini',
+    value: TODAY
+  }, {
+    label: 'Kemarin',
+    value: YESTERDAY
+  }, {
+    label: '7 Hari Terakhir',
+    value: LAST_7_DAYS
+  }, {
+    label: 'Minggu Lalu',
+    value: LAST_WEEK
+  }, {
+    label: 'Minggu Ini',
+    value: THIS_WEEK
+  }, {
+    label: 'Bulan Lalu',
+    value: LAST_MONTH
+  }, {
+    label: '2 Bulan Terakhir',
+    value: LAST_TWO_MONTHS
+  }, {
+    label: 'Bulan Ini',
+    value: THIS_MONTH
+  }];
+
+  function dateReducer(state, action) {
+    const today = new Date();
+
+    switch (action.type) {
+      case UPDATE:
+        {
+          return Object.assign({}, state, {
+            selectedDate: action.payload
+          });
+        }
+
+      case TODAY:
+        {
+          return Object.assign({}, state, {
+            selectedDate: [today, today]
+          });
+        }
+
+      case YESTERDAY:
+        {
+          const yesterday = new Date();
+          yesterday.setDate(today.getDate() - 1);
+          return Object.assign({}, state, {
+            selectedDate: [yesterday, yesterday]
+          });
+        }
+
+      case LAST_7_DAYS:
+        {
+          const last7Days = new Date();
+          last7Days.setDate(today.getDate() - 7);
+          return Object.assign({}, state, {
+            selectedDate: [last7Days, today]
+          });
+        }
+
+      case LAST_WEEK:
+        {
+          const startThisWeek = new Date();
+          startThisWeek.setDate(today.getDate() - today.getDay() - 7);
+          const endThisWeek = new Date();
+          endThisWeek.setDate(today.getDate() - today.getDay() - 1);
+          return Object.assign({}, state, {
+            selectedDate: [startThisWeek, endThisWeek]
+          });
+        }
+
+      case THIS_WEEK:
+        {
+          const startThisWeek = new Date();
+          startThisWeek.setDate(today.getDate() - today.getDay());
+          const endThisWeek = new Date();
+          endThisWeek.setDate(startThisWeek.getDate() + 6);
+          return Object.assign({}, state, {
+            selectedDate: [startThisWeek, endThisWeek]
+          });
+        }
+
+      case LAST_MONTH:
+        {
+          const startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+          const endThisMonth = new Date(today.getFullYear(), today.getMonth(), 0, 0);
+          return Object.assign({}, state, {
+            selectedDate: [startThisMonth, endThisMonth]
+          });
+        }
+
+      case LAST_TWO_MONTHS:
+        {
+          const last2Months = new Date();
+          last2Months.setDate(today.getDate() - 60);
+          return Object.assign({}, state, {
+            selectedDate: [last2Months, today]
+          });
+        }
+
+      case THIS_MONTH:
+        {
+          const startThisMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+          const endThisMonth = new Date(startThisMonth.getFullYear(), startThisMonth.getMonth() + 1, 0, 0);
+          return Object.assign({}, state, {
+            selectedDate: [startThisMonth, endThisMonth]
+          });
+        }
+
+      default:
+        {
+          throw new Error(`Unhandled action type: ${action.type}`);
+        }
+    }
+  }
+
+  const getInputPickerValue = (type, date) => {
+    if (!date) return '';
+
+    if (type === SINGLE_PICKER) {
+      return Intl.DateTimeFormat('id-ID', {
+        dateStyle: 'long'
+      }).format(date);
+    } else {
+      return `${toDateFormat(date[0], 'medium')} - ${toDateFormat(date[1], 'medium')}`;
+    }
+  };
+
+  function InputDatePicker({
+    type = SINGLE_PICKER,
+    placeholder = 'Pilih Tanggal',
+    size = 'sm',
+    disabled,
+    onChange,
+    date,
+    advanceView,
+    css
+  }) {
+    const [{
+      selectedDate
+    }, dispatch] = React.useReducer(dateReducer, {
+      selectedDate: undefined
+    });
+    const [openPicker, setOpenPicker] = React.useState(false);
+    const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
+
+    const renderInputGroup = () => /*#__PURE__*/React__default["default"].createElement(InputGroup, {
+      onClick: isMobile ? () => setOpenPicker(true) : undefined,
+      size: size,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 111,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
+      children: /*#__PURE__*/React__default["default"].createElement(MajooIcons.CalendarOutline, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$1,
+          lineNumber: 112,
+          columnNumber: 35
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 112,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(InputText, {
+      placeholder: placeholder,
+      value: getInputPickerValue(type, selectedDate),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 113,
+        columnNumber: 7
+      }
+    }));
+
+    const renderDatePicker = () => /*#__PURE__*/React__default["default"].createElement(DatePicker, {
+      advanceView: type === ADVANCE_PICKER && (!advanceView ? /*#__PURE__*/React__default["default"].createElement(AdvancedOption, {
+        options: options,
+        disabled: disabled,
+        optionHandler: value => dispatch({
+          type: value
+        }),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$1,
+          lineNumber: 121,
+          columnNumber: 11
+        }
+      }) : {
+        advanceView
+      }),
+      type: type,
+      disabled: disabled,
+      date: date ? date == null ? void 0 : date[1] : selectedDate == null ? 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),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 117,
+        columnNumber: 5
+      }
+    });
+
+    return !isMobile ? /*#__PURE__*/React__default["default"].createElement(Popover, {
+      open: openPicker,
+      onOpenChange: setOpenPicker,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 140,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 141,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      css: css,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 142,
+        columnNumber: 9
+      }
+    }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
+      sideOffset: 4,
+      placement: 'bottom',
+      align: 'end',
+      onOpenAutoFocus: e => e.preventDefault(),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 144,
+        columnNumber: 7
+      }
+    }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      css: css,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 150,
+        columnNumber: 7
+      }
+    }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
+      open: openPicker,
+      onOpenChange: setOpenPicker,
+      __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 38,
-        columnNumber: 5
+        lineNumber: 151,
+        columnNumber: 7
       }
-    }));
+    }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
+      side: "bottom",
+      css: {
+        position: 'fixed',
+        left: 0
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 152,
+        columnNumber: 9
+      }
+    }, renderDatePicker())));
+  }
+
+  InputDatePicker.propTypes = {
+    type: PropTypes__default["default"].oneOf([SINGLE_PICKER, RANGE_PICKER, ADVANCE_PICKER]),
+    placeholder: PropTypes__default["default"].string,
+    size: PropTypes__default["default"].oneOf(['lg', 'sm']),
+    disabled: PropTypes__default["default"].bool,
+    onChange: PropTypes__default["default"].func,
+    date: PropTypes__default["default"].array,
+    advanceView: PropTypes__default["default"].oneOfType([PropTypes__default["default"].element, PropTypes__default["default"].node]),
+    css: PropTypes__default["default"].object
   };
+  InputDatePicker.displayName = 'InputDatePicker';
 
-  const CalendarRangePicker = _ref2 => {
-    let {
-      multiDatePicker,
-      onChange,
-      onCancel,
-      advanceView,
-      selected,
-      disabled
-    } = _ref2,
-        props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+  function sliceIntoChunks(arr, chunkSize) {
+    const res = [];
 
-    const today = new Date();
-    const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
-    const [dateValue, setDateValue] = React.useState([]);
-    const [calendarDate, setCalendarDate] = React.useState(!advanceView ? today : prevMonth);
-    const [isMultiDate, setIsMultiDate] = React.useState(multiDatePicker);
-    React.useEffect(() => {
-      if (selected) {
-        setDateValue(selected);
-      }
-    }, [selected]);
+    for (let i = 0; i < arr.length; i += chunkSize) {
+      const chunk = arr.slice(i, i + chunkSize);
+      res.push(chunk);
+    }
 
-    const onDateSelected = selectedDate => {
-      if (!dateValue.length || dateValue.length === 2) {
-        setDateValue([selectedDate.date]);
-      } else {
-        if (selectedDate.date.toDateString() === dateValue[0].toDateString()) {
-          return;
-        }
+    return res;
+  }
 
-        if (new Date(dateValue[0]) > selectedDate.date) {
-          setDateValue([selectedDate.date, dateValue[0]]);
-        } else {
-          setDateValue([dateValue[0], selectedDate.date]);
+  var _jsxFileName = "/home/omegalord666/work/majoo-ui/packages/react/src/components/table/Table.js";
+  const TableContainer = styled(Flex, {
+    position: 'relative',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%'
+  });
+  const TableContent = styled('table', {
+    borderCollapse: 'collapse'
+  });
+  const TableHead = styled('thead', {
+    position: 'sticky',
+    top: 0,
+    zIndex: 2,
+    backgroundColor: '$bgWhite',
+    boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)'
+  });
+  const TableHeadRow = styled('tr', {
+    borderBottom: '1pt solid $bgBorder',
+    '& th': {
+      padding: '0 26px'
+    },
+    '& th:first-child': {
+      padding: '0 26px 0 36px'
+    },
+    '& th:last-child': {
+      padding: '0 36px 0 26px'
+    }
+  });
+  const TableHeadCell = styled('th', {
+    height: '64px'
+  });
+  const TableHeaderCellContainer = styled(Flex, {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    userSelect: 'none',
+    size: '100%',
+    minWidth: 0
+  });
+  const TableHeadCellContent = styled(Heading$1, {
+    userSelect: 'none',
+    width: '100%',
+    textAlign: 'start',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    position: 'relative',
+    '& > *': {
+      display: 'inline-flex'
+    },
+    '& > span:last-child': {
+      paddingLeft: '$spacing-03'
+    }
+  });
+  const TableBody = styled('tbody', {});
+  const TableRow = styled('tr', {
+    borderBottom: '1pt solid $bgBorder',
+    '& td': {
+      padding: '0 24px'
+    },
+    '& td:first-child': {
+      padding: '0 24px 0 32px'
+    },
+    '& td:last-child': {
+      padding: '0 32px 0 24px'
+    },
+    variants: {
+      subRow: {
+        true: {
+          border: 'none',
+          backgroundColor: '$bgGray',
+          '& td': {
+            padding: '4px 0 4px 24px'
+          }
         }
       }
-    };
-
-    const dayzedData = dayzed.useDayzed(Object.assign({}, props, {
-      date: calendarDate,
-      selected: dateValue,
-      monthsToDisplay: isMultiDate ? 2 : 1,
-      onDateSelected
-    }));
-
-    const updateHandler = () => {
-      if (dateValue && onChange) {
-        if (dateValue.length === 1) {
-          onChange([dateValue[0], dateValue[0]]);
-        } else {
-          onChange(dateValue);
+    }
+  });
+  const TableCell = styled('td', {
+    height: '68px',
+    fontSize: '$short-content-regular',
+    lineHeight: '$short-content-regular',
+    letterSpacing: '$short-content-regular',
+    fontWeight: '400',
+    color: '$textPrimary',
+    variants: {
+      subCell: {
+        true: {
+          height: 'unset'
+        }
+      },
+      headerSubCell: {
+        true: {
+          fontWeight: '600'
         }
       }
-    };
+    }
+  });
 
-    return /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
-      onUpdate: multiDatePicker ? updateHandler : undefined,
-      onCancel: onCancel,
-      selected: dateValue,
-      advanceView: isMultiDate ? advanceView : undefined,
-      disabled: disabled,
-      onCalendarDateChange: date => setCalendarDate(date),
-      onMultiDateChange: isMultiDate => setIsMultiDate(isMultiDate)
-    }, dayzedData, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 95,
-        columnNumber: 5
-      }
-    }));
-  };
+  const addOnCellStyle = id => {
+    switch (id) {
+      case 'expander':
+      case 'menu':
+        return {
+          style: {
+            width: '24px'
+          }
+        };
 
-  const DatePicker = props => {
-    const {
-      type
-    } = props,
-          otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
+      case 'selection':
+        return {
+          style: {
+            width: '16px'
+          }
+        };
 
-    if (type === RANGE_PICKER) {
-      return /*#__PURE__*/React__default["default"].createElement(CalendarRangePicker, _extends({}, otherProps, {
-        __self: undefined,
-        __source: {
-          fileName: _jsxFileName$1,
-          lineNumber: 111,
-          columnNumber: 12
-        }
-      }));
+      default:
+        return {};
     }
-
-    return /*#__PURE__*/React__default["default"].createElement(CalendarPicker, _extends({}, otherProps, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 113,
-        columnNumber: 10
-      }
-    }));
   };
 
-  var _jsxFileName = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\AdvancedOption.js";
-  const ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
-  const AdvancedOption = ({
-    options,
-    disabled,
-    optionHandler
-  }) => {
-    return /*#__PURE__*/React__default["default"].createElement(ButtonGroup, {
-      type: "single",
-      orientation: "vertical",
-      __self: undefined,
+  function Table({
+    columns,
+    data,
+    onSelectedChange
+  }) {
+    const {
+      getTableProps,
+      getTableBodyProps,
+      headerGroups,
+      visibleColumns,
+      rows,
+      prepareRow,
+      selectedFlatRows
+    } = reactTable.useTable({
+      columns,
+      data
+    }, reactTable.useSortBy, reactTable.useExpanded, reactTable.useRowSelect);
+    React.useEffect(() => {
+      if (onSelectedChange) onSelectedChange(selectedFlatRows.map(row => row.values));
+    }, [selectedFlatRows]);
+    return /*#__PURE__*/React__default["default"].createElement(TableContainer, {
+      __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 11,
+        lineNumber: 155,
         columnNumber: 5
       }
-    }, options.map(option => /*#__PURE__*/React__default["default"].createElement(ButtonGroupItem, {
-      isToggle: false,
-      key: option.value,
-      disabled: disabled,
-      value: option.value,
-      css: {
-        fontSize: '$content-button',
-        lineHeight: '$content-button',
-        letterSpacing: '$content-button',
-        fontWeight: '600',
-        justifyContent: 'start',
-        mb: '$spacing-03',
-        height: '40px',
-        minWidth: '140px'
-      },
-      onClick: () => optionHandler(option.value),
-      __self: undefined,
+    }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 156,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
+      __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 13,
+        lineNumber: 157,
         columnNumber: 9
       }
-    }, option.label)));
+    }, headerGroups.map(headerGroup => /*#__PURE__*/React__default["default"].createElement(TableHeadRow, _extends({}, headerGroup.getHeaderGroupProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 159,
+        columnNumber: 13
+      }
+    }), headerGroup.headers.filter(column => !column.isSubRow).map(column => {
+      const headerRender = column.render('Header');
+      return /*#__PURE__*/React__default["default"].createElement(TableHeadCell, _extends({}, column.getHeaderProps(column.getSortByToggleProps()), {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 165,
+          columnNumber: 21
+        }
+      }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 167,
+          columnNumber: 25
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
+        heading: "headerTable",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 169,
+          columnNumber: 29
+        }
+      }, headerRender.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(MajooIcons.SortingOutline, {
+        color: colors.iconSecondary,
+        size: "16px",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 172,
+          columnNumber: 29
+        }
+      }))) : headerRender);
+    })))), /*#__PURE__*/React__default["default"].createElement(TableBody, _extends({}, getTableBodyProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 184,
+        columnNumber: 9
+      }
+    }), rows.map((row, i) => {
+      var _row$cells$filter, _row$cells$filter2;
+
+      prepareRow(row);
+      const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
+      const cellArrays = sliceIntoChunks(subRowCells, 2);
+      const leftAddOnCells = (_row$cells$filter = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) != null ? _row$cells$filter : [];
+      const rightAddOnCells = (_row$cells$filter2 = row.cells.filter(cell => ['menu'].includes(cell.column.id))) != null ? _row$cells$filter2 : [];
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+        key: row.id,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 192,
+          columnNumber: 15
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(TableRow, _extends({}, row.getRowProps(), {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 193,
+          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,
+          lineNumber: 197,
+          columnNumber: 23
+        }
+      }), cell.render('Cell')))), row.isExpanded ? cellArrays.map((cells, index) => {
+        return /*#__PURE__*/React__default["default"].createElement(TableRow, {
+          key: index,
+          subRow: true,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 205,
+            columnNumber: 25
+          }
+        }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
+          key: index,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 207,
+            columnNumber: 29
+          }
+        })), cells.map((cell, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+          key: cell.id,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 210,
+            columnNumber: 29
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(TableCell, {
+          subCell: true,
+          headerSubCell: true,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 211,
+            columnNumber: 31
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+          paragraph: "shortContentBold",
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 212,
+            columnNumber: 33
+          }
+        }, cell.column.Header)), /*#__PURE__*/React__default["default"].createElement(TableCell, {
+          subCell: true,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 214,
+            columnNumber: 31
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+          paragraph: "shortContentRegular",
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 215,
+            columnNumber: 33
+          }
+        }, cell.render('Cell'))), index === 0 && cells.length > 1 && new Array(visibleColumns.length - subRowCells.length - leftAddOnCells.length - rightAddOnCells.length - 4).fill(null).map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
+          key: index,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 227,
+            columnNumber: 54
+          }
+        })))));
+      }) : null);
+    }))));
+  }
+
+  Table.propTypes = {
+    data: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
+    column: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
+    onSelectedChange: PropTypes__default["default"].func
   };
+  Table.displayName = 'Table';
 
+  exports.ADVANCE_PICKER = ADVANCE_PICKER;
   exports.Accordion = Accordion;
   exports.AccordionContent = AccordionContent;
   exports.AccordionItem = AccordionItem;
@@ -9396,7 +11060,7 @@
   exports.AlertTitle = AlertTitle;
   exports.Avatar = Avatar;
   exports.Badge = Badge;
-  exports.Box = Box$2;
+  exports.Box = Box$1;
   exports.BoxComponent = BoxComponent;
   exports.Breadcrumb = Breadcrumb;
   exports.BreadcrumbItem = BreadcrumbItem;
@@ -9425,10 +11089,11 @@
   exports.FormLabel = FormLabel;
   exports.Grid = Grid;
   exports.GridItem = GridItem;
-  exports.Heading = Heading;
+  exports.Heading = Heading$1;
   exports.IconButton = IconButton;
   exports.Image = Image;
   exports.InputCheckbox = InputCheckbox;
+  exports.InputDatePicker = InputDatePicker;
   exports.InputGroup = InputGroup;
   exports.InputLeftAddon = InputLeftAddon;
   exports.InputLeftElement = InputLeftElement;
@@ -9438,7 +11103,7 @@
   exports.InputRightAddon = InputRightAddon;
   exports.InputRightElement = InputRightElement;
   exports.InputSearchbox = InputSearchbox;
-  exports.InputSelect = Select;
+  exports.InputSelect = Select$1;
   exports.InputSelectTag = SelectTag;
   exports.InputSuffix = InputSuffix;
   exports.InputSwitch = InputSwitch;
@@ -9462,12 +11127,13 @@
   exports.Separator = Separator;
   exports.Slider = Slider;
   exports.StyledTitle = StyledTitle$1;
+  exports.Table = Table;
   exports.Tabs = Tabs;
   exports.TabsContent = TabsContent;
   exports.TabsList = TabsList;
   exports.TabsTrigger = TabsTrigger;
   exports.Tag = Tag;
-  exports.Text = Text;
+  exports.Text = Text$1;
   exports.ToastContext = ToastContext;
   exports.Tooltip = Tooltip;