@majoo-ui/react 1.25.1 → 1.26.0

package/index.umd.js

@@ -44,7 +44,7 @@
   var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
-  var _jsxFileName$B = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
+  var _jsxFileName$F = "/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$F,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -1884,7 +1884,7 @@
   handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
   const _excluded$s = ["className", "children", "color", "textColor", "padding"];
-  var _jsxFileName$A = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/box/Box.js";
+  var _jsxFileName$E = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/box/Box.js";
   const BoxComponent = styled('div', {
     height: 'auto',
     background: 'none',
@@ -1910,7 +1910,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$E,
         lineNumber: 12,
         columnNumber: 3
       }
@@ -2060,7 +2060,7 @@
 
   const _excluded$r = ["children"],
         _excluded2$3 = ["children"];
-  var _jsxFileName$z = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/grid/Grid.js";
+  var _jsxFileName$D = "/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$D,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2301,7 +2301,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$D,
         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 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/button/Button.js";
+  var _jsxFileName$C = "/home/omegalord666/work/majoo-ui/packages/react/src/components/button/Button.js";
   const ButtonPrimary = {
     backgroundColor: '$btnPrimary',
     color: '$textWhite',
@@ -2539,28 +2539,28 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$C,
         lineNumber: 220,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$C,
         lineNumber: 231,
         columnNumber: 33
       }
     }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$3, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$C,
         lineNumber: 232,
         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,
+        fileName: _jsxFileName$C,
         lineNumber: 233,
         columnNumber: 34
       }
@@ -2587,7 +2587,7 @@
   };
 
   const _excluded$p = ["id", "message", "dismissAfter", "variant", "onAction", "actionText", "onRemove"];
-  var _jsxFileName$x = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/Toast.js";
+  var _jsxFileName$B = "/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;
@@ -2723,7 +2723,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$B,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -2733,7 +2733,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$B,
         lineNumber: 144,
         columnNumber: 9
       }
@@ -2741,7 +2741,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$B,
         lineNumber: 145,
         columnNumber: 11
       }
@@ -2752,14 +2752,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$B,
         lineNumber: 146,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement(Text$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$B,
         lineNumber: 152,
         columnNumber: 15
       }
@@ -2769,7 +2769,7 @@
       css: {},
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$B,
         lineNumber: 155,
         columnNumber: 15
       }
@@ -2784,7 +2784,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$B,
         lineNumber: 157,
         columnNumber: 17
       }
@@ -2807,7 +2807,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.createContext({});
 
-  var _jsxFileName$w = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+  var _jsxFileName$A = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
   const ToastBox = styled(Box$2, {
     display: 'block',
     position: 'fixed',
@@ -2824,7 +2824,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$A,
         lineNumber: 19,
         columnNumber: 5
       }
@@ -2832,7 +2832,7 @@
       padding: 0,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$A,
         lineNumber: 20,
         columnNumber: 7
       }
@@ -2844,7 +2844,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$w,
+          fileName: _jsxFileName$A,
           lineNumber: 24,
           columnNumber: 13
         }
@@ -2853,7 +2853,7 @@
   };
 
   const _excluded$o = ["id"];
-  var _jsxFileName$v = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
+  var _jsxFileName$z = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
   let toastCount = 0;
 
   const ToastProvider = ({
@@ -2890,7 +2890,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$z,
         lineNumber: 40,
         columnNumber: 5
       }
@@ -2898,14 +2898,14 @@
       toasts: toasts,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$z,
         lineNumber: 42,
         columnNumber: 7
       }
     }));
   };
 
-  var _jsxFileName$u = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
+  var _jsxFileName$y = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
 
   function MajooProvider({
     children,
@@ -2918,14 +2918,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$y,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$y,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -2977,7 +2977,7 @@
       return t;
   }
 
-  var _jsxFileName$t = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/AlertProvider.js";
+  var _jsxFileName$x = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/AlertProvider.js";
   const StatusContext = /*#__PURE__*/React.createContext();
 
   const AlertProvider = ({
@@ -2994,14 +2994,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$x,
         lineNumber: 9,
         columnNumber: 5
       }
     }, children);
   };
 
-  var _jsxFileName$s = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/Alert.js";
+  var _jsxFileName$w = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/Alert.js";
   const AlertStyle = styled('div', {
     backgroundColor: 'white',
     borderWidth: 0,
@@ -3140,14 +3140,14 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertProvider, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$w,
         lineNumber: 158,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(AlertContent, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$w,
         lineNumber: 159,
         columnNumber: 7
       }
@@ -3165,7 +3165,7 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$w,
         lineNumber: 170,
         columnNumber: 10
       }
@@ -3189,7 +3189,7 @@
             color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
+              fileName: _jsxFileName$w,
               lineNumber: 179,
               columnNumber: 16
             }
@@ -3200,7 +3200,7 @@
             color: variantAlert === 'solid' ? 'white' : ' #DF2A36',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
+              fileName: _jsxFileName$w,
               lineNumber: 181,
               columnNumber: 16
             }
@@ -3211,7 +3211,7 @@
             color: variantAlert === 'solid' ? 'white' : '#0197F4',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
+              fileName: _jsxFileName$w,
               lineNumber: 183,
               columnNumber: 16
             }
@@ -3222,7 +3222,7 @@
             color: variantAlert === 'solid' ? 'white' : ' #FE7F2D',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
+              fileName: _jsxFileName$w,
               lineNumber: 185,
               columnNumber: 16
             }
@@ -3233,7 +3233,7 @@
             color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$s,
+              fileName: _jsxFileName$w,
               lineNumber: 187,
               columnNumber: 16
             }
@@ -3244,7 +3244,7 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertIconStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$w,
         lineNumber: 190,
         columnNumber: 10
       }
@@ -3269,7 +3269,7 @@
   AlertTitle.displayName = 'AlertTitle';
 
   const _excluded$n = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-  var _jsxFileName$r = "/home/omegalord666/work/majoo-ui/packages/react/src/components/card/Card.js";
+  var _jsxFileName$v = "/home/omegalord666/work/majoo-ui/packages/react/src/components/card/Card.js";
   const CardComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -3417,7 +3417,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$v,
         lineNumber: 103,
         columnNumber: 5
       }
@@ -3425,14 +3425,14 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$v,
         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$v,
         lineNumber: 118,
         columnNumber: 13
       }
@@ -3441,14 +3441,14 @@
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$v,
         lineNumber: 119,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$v,
         lineNumber: 125,
         columnNumber: 13
       }
@@ -3686,7 +3686,7 @@
   Paragraph.displayName = 'Paragraph';
 
   const _excluded$m = ["children"];
-  var _jsxFileName$q = "/home/omegalord666/work/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
+  var _jsxFileName$u = "/home/omegalord666/work/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -3732,7 +3732,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$u,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -3749,14 +3749,14 @@
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$u,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$u,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -3961,7 +3961,7 @@
   Badge.displayName = 'Badge';
 
   const _excluded$l = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$p = "/home/omegalord666/work/majoo-ui/packages/react/src/components/avatar/Avatar.js";
+  var _jsxFileName$t = "/home/omegalord666/work/majoo-ui/packages/react/src/components/avatar/Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -4014,7 +4014,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$t,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4024,7 +4024,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$t,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4032,21 +4032,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$t,
         lineNumber: 48,
         columnNumber: 7
       }
     }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$t,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$t,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4064,7 +4064,7 @@
   };
 
   const _excluded$k = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-  var _jsxFileName$o = "/home/omegalord666/work/majoo-ui/packages/react/src/components/image/Image.js";
+  var _jsxFileName$s = "/home/omegalord666/work/majoo-ui/packages/react/src/components/image/Image.js";
   const StyledImage = styled('img', {
     display: 'inline-block',
     alignItems: 'center',
@@ -4102,7 +4102,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$s,
         lineNumber: 20,
         columnNumber: 9
       }
@@ -4123,7 +4123,7 @@
   };
 
   const _excluded$j = ["children", "label", "color", "contentCss", "withClick"];
-  var _jsxFileName$n = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
+  var _jsxFileName$r = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
   const slideUpAndFade$1 = keyframes({
     '0%': {
       opacity: 0,
@@ -4235,7 +4235,7 @@
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$r,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4243,7 +4243,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$r,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4251,7 +4251,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$r,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4260,7 +4260,7 @@
       css: color === 'dark' ? dark : ligth,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$r,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -4268,7 +4268,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$n,
+        fileName: _jsxFileName$r,
         lineNumber: 95,
         columnNumber: 9
       }
@@ -4285,7 +4285,7 @@
   };
 
   const _excluded$i = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-  var _jsxFileName$m = "/home/omegalord666/work/majoo-ui/packages/react/src/components/progress/Progress.js";
+  var _jsxFileName$q = "/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 +4419,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$m,
+        fileName: _jsxFileName$q,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -4432,7 +4432,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$m,
+        fileName: _jsxFileName$q,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -4456,7 +4456,7 @@
   };
 
   const _excluded$h = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount"];
-  var _jsxFileName$l = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+  var _jsxFileName$p = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
   const StyledLabel = styled(LabelPrimitive__namespace.Root, Text, {
     display: 'inline-block',
     fontSize: '$label',
@@ -4493,7 +4493,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$p,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -4503,7 +4503,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$p,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -4512,7 +4512,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$p,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -4527,7 +4527,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$p,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -4535,14 +4535,14 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$p,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$p,
         lineNumber: 57,
         columnNumber: 13
       }
@@ -4551,7 +4551,7 @@
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$p,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -4568,7 +4568,7 @@
   FormLabel.displayName = 'FormLabel';
 
   const _excluded$g = ["children", "error"];
-  var _jsxFileName$k = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+  var _jsxFileName$o = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
   const StyledHelper = styled(Text, {
     display: 'inline-block',
     color: '$textSecondary',
@@ -4594,7 +4594,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$o,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -4606,7 +4606,7 @@
   };
   FormHelper.displayName = 'FormHelper';
 
-  var _jsxFileName$j = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
+  var _jsxFileName$n = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
 
   const CheckOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -4624,7 +4624,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$n,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4636,7 +4636,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$n,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4648,14 +4648,14 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$n,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
   const _excluded$f = ["id", "isChecked", "isIndeterminate", "isDisabled", "onCheckedChange", "label"];
-  var _jsxFileName$i = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
+  var _jsxFileName$m = "/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',
@@ -4720,7 +4720,7 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$m,
         lineNumber: 57,
         columnNumber: 5
       }
@@ -4732,28 +4732,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$m,
         lineNumber: 58,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$m,
         lineNumber: 59,
         columnNumber: 9
       }
     }, isIndeterminate ? /*#__PURE__*/React__default["default"].createElement(MajooIcons.MinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$m,
         lineNumber: 59,
         columnNumber: 45
       }
     }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$m,
         lineNumber: 59,
         columnNumber: 64
       }
@@ -4769,7 +4769,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$i,
+        fileName: _jsxFileName$m,
         lineNumber: 61,
         columnNumber: 7
       }
@@ -4786,7 +4786,7 @@
   InputCheckbox.displayName = 'InputCheckbox';
 
   const _excluded$e = ["children", "size"];
-  var _jsxFileName$h = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
+  var _jsxFileName$l = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
     width: '100%',
@@ -4923,7 +4923,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$h,
+        fileName: _jsxFileName$l,
         lineNumber: 143,
         columnNumber: 10
       }
@@ -5226,7 +5226,7 @@
   InputRadioGroup.displayName = 'InputRadioGroup';
 
   const _excluded$d = ["id", "disabled"];
-  var _jsxFileName$g = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
+  var _jsxFileName$k = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
     display: 'flex',
@@ -5310,7 +5310,7 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$k,
         lineNumber: 82,
         columnNumber: 3
       }
@@ -5320,14 +5320,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$k,
         lineNumber: 83,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$k,
         lineNumber: 84,
         columnNumber: 7
       }
@@ -5344,7 +5344,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$g,
+        fileName: _jsxFileName$k,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -5388,7 +5388,7 @@
   InputRightElement.name = 'InputRightElement';
 
   const _excluded$c = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
-  var _jsxFileName$f = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tag/Tag.js";
+  var _jsxFileName$j = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tag/Tag.js";
   const TagComponent = styled('span', {
     boxSizing: 'border-box',
     color: '$white',
@@ -5476,21 +5476,21 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$f,
+        fileName: _jsxFileName$j,
         lineNumber: 54,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$f,
+        fileName: _jsxFileName$j,
         lineNumber: 63,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$f,
+        fileName: _jsxFileName$j,
         lineNumber: 65,
         columnNumber: 34
       }
@@ -5510,7 +5510,7 @@
   };
 
   const _excluded$b = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly"];
-  var _jsxFileName$e = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
+  var _jsxFileName$i = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
   const InputTagsComponent = styled('div', {
     display: 'flex',
     margin: '0',
@@ -5645,7 +5645,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$i,
         lineNumber: 105,
         columnNumber: 5
       }
@@ -5653,7 +5653,7 @@
       gap: 3,
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$i,
         lineNumber: 115,
         columnNumber: 7
       }
@@ -5664,7 +5664,7 @@
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$e,
+          fileName: _jsxFileName$i,
           lineNumber: 120,
           columnNumber: 24
         }
@@ -5677,7 +5677,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$i,
         lineNumber: 117,
         columnNumber: 11
       }
@@ -5690,7 +5690,7 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$i,
         lineNumber: 132,
         columnNumber: 7
       }
@@ -5715,7 +5715,7 @@
   };
 
   const _excluded$a = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-  var _jsxFileName$d = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
+  var _jsxFileName$h = "/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 +5798,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$h,
         lineNumber: 66,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledThumb$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$h,
         lineNumber: 74,
         columnNumber: 5
       }
@@ -5823,8 +5823,111 @@
   };
   InputSwitch.displayName = 'InputSwitch';
 
+  var _jsxFileName$g = "/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$g,
+      lineNumber: 4,
+      columnNumber: 3
+    }
+  }), /*#__PURE__*/React__namespace.createElement("mask", {
+    id: "path-1-inside-1_2883_7918",
+    fill: "white",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$g,
+      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$g,
+      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$g,
+      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$g,
+      lineNumber: 18,
+      columnNumber: 5
+    }
+  }));
+
+  SvgCloseFilled.defaultProps = {
+    color: '#404545',
+    size: 24
+  };
+
+  var _jsxFileName$f = "/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$f,
+      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$f,
+      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$f,
+      lineNumber: 6,
+      columnNumber: 5
+    }
+  }));
+
+  SvgSearchOutline.defaultProps = {
+    color: '#404545',
+    size: 24
+  };
+
   const _excluded$9 = ["size", "onChange"];
-  var _jsxFileName$c = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+  var _jsxFileName$e = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
 
   const InputSearchbox = _ref => {
     let {
@@ -5853,23 +5956,23 @@
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 27,
+        fileName: _jsxFileName$e,
+        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$e,
+          lineNumber: 29,
           columnNumber: 35
         }
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 28,
+        fileName: _jsxFileName$e,
+        lineNumber: 29,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(InputText, _extends({
@@ -5878,27 +5981,34 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 29,
+        fileName: _jsxFileName$e,
+        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$c,
-          lineNumber: 30,
-          columnNumber: 52
+          fileName: _jsxFileName$e,
+          lineNumber: 31,
+          columnNumber: 55
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement("div", {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$e,
+          lineNumber: 31,
+          columnNumber: 73
         }
       }),
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 30,
-        columnNumber: 23
+        fileName: _jsxFileName$e,
+        lineNumber: 31,
+        columnNumber: 7
       }
-    }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null));
+    }));
   };
 
   InputSearchbox.propTypes = {
@@ -6378,7 +6488,7 @@
   });
 
   const _excluded$8 = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor"];
-  var _jsxFileName$b = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
+  var _jsxFileName$d = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
   const Box$1 = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -6544,7 +6654,7 @@
       initialSelectedItem: value !== undefined ? value : null,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 149,
         columnNumber: 5
       }
@@ -6562,7 +6672,7 @@
     }) => /*#__PURE__*/React__namespace.createElement(Box$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 167,
         columnNumber: 9
       }
@@ -6573,7 +6683,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 168,
         columnNumber: 11
       }
@@ -6583,7 +6693,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 170,
         columnNumber: 15
       }
@@ -6595,7 +6705,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 171,
         columnNumber: 17
       }
@@ -6604,7 +6714,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 178,
         columnNumber: 15
       }
@@ -6612,7 +6722,7 @@
       color: "primary",
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 180,
         columnNumber: 19
       }
@@ -6620,14 +6730,14 @@
       color: "primary",
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 182,
         columnNumber: 19
       }
     }, placeholder)), /*#__PURE__*/React__namespace.createElement(IconContainer$1, _extends({}, getToggleButtonProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 186,
         columnNumber: 13
       }
@@ -6635,7 +6745,7 @@
       color: iconColor,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 187,
         columnNumber: 15
       }
@@ -6645,14 +6755,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 190,
         columnNumber: 11
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption$1, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 192,
         columnNumber: 15
       }
@@ -6670,7 +6780,7 @@
         },
         __self: this,
         __source: {
-          fileName: _jsxFileName$b,
+          fileName: _jsxFileName$d,
           lineNumber: 194,
           columnNumber: 19
         }
@@ -6678,14 +6788,14 @@
     })) : /*#__PURE__*/React__namespace.createElement(SelectOption$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 208,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 209,
         columnNumber: 17
       }
@@ -6730,7 +6840,7 @@
     }
   });
 
-  var _jsxFileName$a = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+  var _jsxFileName$c = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
   const Box = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -6934,7 +7044,7 @@
     return /*#__PURE__*/React__namespace.createElement(Box, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 192,
         columnNumber: 5
       }
@@ -6943,7 +7053,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 193,
         columnNumber: 7
       }
@@ -6951,7 +7061,7 @@
       gap: 3,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 195,
         columnNumber: 11
       }
@@ -6967,7 +7077,7 @@
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$a,
+          fileName: _jsxFileName$c,
           lineNumber: 202,
           columnNumber: 28
         }
@@ -6979,7 +7089,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 197,
         columnNumber: 15
       }
@@ -6991,7 +7101,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 210,
         columnNumber: 9
       }
@@ -7003,21 +7113,21 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 211,
         columnNumber: 11
       }
     }))), /*#__PURE__*/React__namespace.createElement(IconContainer, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 217,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__namespace.createElement(StyledIcon, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 218,
         columnNumber: 11
       }
@@ -7027,14 +7137,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 221,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 223,
         columnNumber: 11
       }
@@ -7053,7 +7163,7 @@
         },
         __self: this,
         __source: {
-          fileName: _jsxFileName$a,
+          fileName: _jsxFileName$c,
           lineNumber: 226,
           columnNumber: 17
         }
@@ -7061,14 +7171,14 @@
     })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 242,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__namespace.createElement(StyledDiv, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 243,
         columnNumber: 13
       }
@@ -7167,7 +7277,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 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/slider/Slider.js";
+  var _jsxFileName$b = "/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 +7559,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$b,
         lineNumber: 160,
         columnNumber: 5
       }
@@ -7458,7 +7568,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$b,
         lineNumber: 181,
         columnNumber: 7
       }
@@ -7466,7 +7576,7 @@
       color: color,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$b,
         lineNumber: 182,
         columnNumber: 9
       }
@@ -7475,7 +7585,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$b,
         lineNumber: 184,
         columnNumber: 7
       }
@@ -7575,7 +7685,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 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
+  var _jsxFileName$a = "/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 +7827,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$a,
         lineNumber: 111,
         columnNumber: 5
       }
@@ -7770,21 +7880,21 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$a,
         lineNumber: 164,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$a,
         lineNumber: 172,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$a,
         lineNumber: 174,
         columnNumber: 34
       }
@@ -7803,7 +7913,7 @@
   };
 
   const _excluded$5 = ["children", "value"];
-  var _jsxFileName$7 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/notificationBadge/notificationBadge.js";
+  var _jsxFileName$9 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/notificationBadge/notificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
     position: 'relative',
     display: 'inline-flex',
@@ -7934,7 +8044,7 @@
     return /*#__PURE__*/React__default["default"].createElement(NotificationBadgeRootStyle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$9,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -7942,7 +8052,7 @@
       children: value,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$9,
         lineNumber: 135,
         columnNumber: 7
       }
@@ -7967,7 +8077,7 @@
   };
 
   const _excluded$4 = ["className", "children", "radius", "padding", "width", "height"];
-  var _jsxFileName$6 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/paper/Paper.js";
+  var _jsxFileName$8 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/paper/Paper.js";
   const PaperComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -7999,7 +8109,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$8,
         lineNumber: 17,
         columnNumber: 5
       }
@@ -8060,7 +8170,7 @@
   });
 
   const _excluded$3 = ["children"];
-  var _jsxFileName$5 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/modalDialog/ModalDialog.js";
+  var _jsxFileName$7 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/modalDialog/ModalDialog.js";
   const overlayShow = keyframes({
     '0%': {
       opacity: 0
@@ -8109,21 +8219,21 @@
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Portal, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$7,
         lineNumber: 38,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$7,
         lineNumber: 39,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$2, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$7,
         lineNumber: 40,
         columnNumber: 7
       }
@@ -8154,7 +8264,7 @@
   const DialogClose = DialogPrimitive__namespace.Close;
 
   const _excluded$2 = ["children"];
-  var _jsxFileName$4 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/drawer/Drawer.js";
+  var _jsxFileName$6 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/drawer/Drawer.js";
   const fadeIn = keyframes({
     from: {
       opacity: '0'
@@ -8195,14 +8305,14 @@
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Root, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$4,
+        fileName: _jsxFileName$6,
         lineNumber: 36,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$4,
+        fileName: _jsxFileName$6,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -8259,9 +8369,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 +8409,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 +8420,7 @@
   const _excluded$1 = ["children", "disabled"],
         _excluded2$1 = ["children", "hasContent", "arrowColor"],
         _excluded3$1 = ["children"];
-  var _jsxFileName$3 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/accordion/Accordion.js";
+  var _jsxFileName$5 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/accordion/Accordion.js";
   //   from: { height: 0 },
   //   to: { height: 'var(--radix-accordion-content-height)' },
   // });
@@ -8327,7 +8443,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$5,
         lineNumber: 20,
         columnNumber: 3
       }
@@ -8390,14 +8506,14 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$5,
         lineNumber: 80,
         columnNumber: 3
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledTrigger, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$5,
         lineNumber: 81,
         columnNumber: 5
       }
@@ -8406,7 +8522,7 @@
       color: arrowColor,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$5,
         lineNumber: 83,
         columnNumber: 22
       }
@@ -8423,7 +8539,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledContent, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$5,
         lineNumber: 91,
         columnNumber: 61
       }
@@ -8457,6 +8573,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$4 = "/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$4,
+        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$4,
+        lineNumber: 27,
+        columnNumber: 9
+      }
+    }, option.label)));
+  };
+
   const DateNumber = styled('div', {
     display: 'inline-flex',
     alignItems: 'center',
@@ -8507,10 +8686,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 +8705,9 @@
   });
   DateNumber.displayName = 'DateNumber';
 
-  var _jsxFileName$2 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/Calendar.js";
+  var _jsxFileName$3 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/Calendar.js";
 
-  const getVariant = ({
+  const getVariant$1 = ({
     selectable,
     selected,
     date
@@ -8552,7 +8739,7 @@
     return variant;
   };
 
-  const ArrowButton = styled('button', {
+  const ArrowButton$1 = styled('button', {
     all: 'unset',
     size: '32px',
     borderRadius: '$md',
@@ -8577,13 +8764,14 @@
       cursor: 'default'
     }
   });
-  const WeekdayBox = styled(Box$2, {
+  const WeekdayBox$1 = styled(Box$2, {
     display: 'inline-block',
     width: '42px',
     textAlign: 'center',
     marginBottom: '$spacing-05'
   });
-  const CalendarsContainer = styled(Box$2, {
+  const CalendarsContainer$1 = styled(Box$2, {
+    width: '100%',
     padding: '$spacing-04',
     display: 'inline-flex',
     borderRadius: '$lg',
@@ -8591,15 +8779,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$2, {
+    width: '100%',
     position: 'relative',
-    display: 'inline-block'
+    display: 'inline-block',
+    '@md': {
+      maxWidth: '334px',
+      width: 'unset'
+    }
   });
-  const TitleButton = styled(Heading, {
+  const TitleButton$1 = styled(Heading, {
     padding: '2px $spacing-04',
     '&:hover': {
       backgroundColor: '$bgSuccess',
@@ -8623,7 +8818,7 @@
       }
     }
   });
-  const MonthButton = styled(Text, {
+  const MonthButton$1 = styled(Text, {
     minWidth: '90px',
     textAlign: 'center',
     borderRadius: '$md',
@@ -8656,15 +8851,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 +8870,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 +8893,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$3,
+          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$3,
+          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$3,
+          lineNumber: 250,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronLeftOutline, {
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 260,
+          fileName: _jsxFileName$3,
+          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$3,
+          lineNumber: 272,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronRightOutline, {
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 287,
+          fileName: _jsxFileName$3,
+          lineNumber: 293,
           columnNumber: 9
         }
       }));
@@ -8792,8 +8985,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 293,
+          fileName: _jsxFileName$3,
+          lineNumber: 299,
           columnNumber: 7
         }
       }, multiDatePicker ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -8805,8 +8998,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 296,
+          fileName: _jsxFileName$3,
+          lineNumber: 302,
           columnNumber: 13
         }
       }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default["default"].createElement(Box$2, {
@@ -8815,8 +9008,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 306,
+          fileName: _jsxFileName$3,
+          lineNumber: 312,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -8826,8 +9019,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 312,
+          fileName: _jsxFileName$3,
+          lineNumber: 318,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -8839,8 +9032,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 318,
+          fileName: _jsxFileName$3,
+          lineNumber: 324,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$2, {
@@ -8849,8 +9042,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 326,
+          fileName: _jsxFileName$3,
+          lineNumber: 332,
           columnNumber: 15
         }
       }), renderTitleButton(1), renderForwardButton())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderBackButton(), renderTitleButton(), renderForwardButton()));
@@ -8864,8 +9057,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 348,
+          fileName: _jsxFileName$3,
+          lineNumber: 354,
           columnNumber: 7
         }
       }, calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
@@ -8882,8 +9075,8 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$2,
-              lineNumber: 359,
+              fileName: _jsxFileName$3,
+              lineNumber: 365,
               columnNumber: 17
             }
           });
@@ -8901,11 +9094,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$3,
+            lineNumber: 382,
             columnNumber: 15
           }
         }), date.getDate());
@@ -8921,22 +9114,22 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 392,
+          fileName: _jsxFileName$3,
+          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$3,
+          lineNumber: 406,
           columnNumber: 11
         }
       }, range.start, "-", range.end)));
@@ -8953,22 +9146,22 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 423,
+          fileName: _jsxFileName$3,
+          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$3,
+          lineNumber: 437,
           columnNumber: 11
         }
       }, year)));
@@ -8983,11 +9176,11 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 452,
+          fileName: _jsxFileName$3,
+          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 +9188,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$3,
+          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$3,
+          lineNumber: 488,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -9023,8 +9216,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 483,
+          fileName: _jsxFileName$3,
+          lineNumber: 489,
           columnNumber: 9
         }
       }, weekday)));
@@ -9034,8 +9227,8 @@
       return /*#__PURE__*/React__default["default"].createElement(Box$2, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 497,
+          fileName: _jsxFileName$3,
+          lineNumber: 503,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -9044,8 +9237,8 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 498,
+          fileName: _jsxFileName$3,
+          lineNumber: 504,
           columnNumber: 9
         }
       }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -9053,8 +9246,8 @@
         align: "center",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 499,
+          fileName: _jsxFileName$3,
+          lineNumber: 505,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -9065,16 +9258,16 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 500,
+          fileName: _jsxFileName$3,
+          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$3,
+          lineNumber: 517,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -9086,8 +9279,8 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 512,
+          fileName: _jsxFileName$3,
+          lineNumber: 518,
           columnNumber: 13
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
@@ -9098,51 +9291,51 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 522,
+          fileName: _jsxFileName$3,
+          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$3,
+          lineNumber: 545,
           columnNumber: 7
         }
       }, advanceView, advanceView && /*#__PURE__*/React__default["default"].createElement(Separator, {
         orientation: "vertical",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 542,
+          fileName: _jsxFileName$3,
+          lineNumber: 548,
           columnNumber: 25
         }
       }), /*#__PURE__*/React__default["default"].createElement(Box$2, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 543,
+          fileName: _jsxFileName$3,
+          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$3,
+          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$3,
+          lineNumber: 553,
           columnNumber: 15
         }
       }, index > 0 && /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -9152,15 +9345,15 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 549,
+          fileName: _jsxFileName$3,
+          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$3,
+          lineNumber: 562,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Separator, {
@@ -9169,76 +9362,730 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 557,
+          fileName: _jsxFileName$3,
+          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 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/DatePicker.js";
-  const SINGLE_PICKER = 'single';
-  const RANGE_PICKER = 'range';
+  var _jsxFileName$2 = "/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';
+    }
 
-    const dayzedData = dayzed.useDayzed(Object.assign({}, props, {
-      date: calendarDate,
-      selected: dateValue,
-      monthsToDisplay: multiDatePicker ? 2 : 1,
-      showOutsideDays: true,
-      onDateSelected
-    }));
-    React.useEffect(() => {
-      if (selected) {
-        setDateValue(selected);
-      }
-    }, [selected]);
-    React.useEffect(() => {
-      if (dateValue && !multiDatePicker && onChange) {
-        onChange(dateValue);
+    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';
       }
-    }, [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$1,
-        lineNumber: 38,
+    }
+
+    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$2, {
+    display: 'inline-block',
+    width: '45.5px',
+    textAlign: 'center',
+    marginBottom: '$spacing-04',
+    '@md': {
+      width: '32px'
+    }
+  });
+  const DatePickerContainer = styled(Box$2, {
+    width: '100%',
+    height: '100%',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+    backgroundColor: '$white',
+    '@md': {
+      width: 'unset'
+    }
+  });
+  const CalendarsContainer = styled(Box$2, {
+    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$2, {
+    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, {
+    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, {
+    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$2,
+          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$2,
+          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$2,
+          lineNumber: 286,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronLeftOutline, {
+        color: "currentColor",
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          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$2,
+          lineNumber: 308,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronRightOutline, {
+        color: "currentColor",
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          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$2,
+          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$2,
+          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$2,
+              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$2,
+            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$2,
+          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$2,
+          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$2,
+          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$2,
+          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$2,
+          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$2,
+          lineNumber: 460,
+          columnNumber: 11
+        }
+      }, monthName)));
+    };
+
+    const renderWeekLabel = calendar => {
+      return /*#__PURE__*/React__default["default"].createElement(Flex, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 482,
+          columnNumber: 7
+        }
+      }, weekdayNamesShort.map(weekday => /*#__PURE__*/React__default["default"].createElement(WeekdayBox, {
+        key: `${calendar.month}${calendar.year}${weekday}`,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 484,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+        paragraph: "shortContentBold",
+        css: {
+          color: '$textSecondary'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          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$2,
+          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$2,
+          lineNumber: 504,
+          columnNumber: 13
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(Text, {
+        variant: "contentButton",
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 505,
+          columnNumber: 15
+        }
+      }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronDownOutline, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 506,
+          columnNumber: 36
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronUpOutline, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 506,
+          columnNumber: 61
+        }
+      })), expandAdvanceView && advanceView, /*#__PURE__*/React__default["default"].createElement(Separator, {
+        css: {
+          marginBottom: '$spacing-05'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 509,
+          columnNumber: 13
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(Text, {
+        variant: "status",
+        color: selected.length > 1 ? 'primary' : 'disable',
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          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$2,
+          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$2,
+          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$2,
+          lineNumber: 534,
+          columnNumber: 11
+        }
+      }, "Proses")));
+    };
+
+    if (calendars.length) {
+      return /*#__PURE__*/React__default["default"].createElement(DatePickerContainer, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 552,
+          columnNumber: 7
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(CalendarsContainer, {
+        css: containerStyle,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 553,
+          columnNumber: 9
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(CalendarItemContainer, {
+        direction: "column",
+        gap: 5,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 554,
+          columnNumber: 11
+        }
+      }, calendars.map((calendar, index) => /*#__PURE__*/React__default["default"].createElement(DateContainer, {
+        key: `${calendar.month}${calendar.year}`,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          lineNumber: 556,
+          columnNumber: 15
+        }
+      }, renderHeader(index), /*#__PURE__*/React__default["default"].createElement(Separator, {
+        css: {
+          marginBottom: '$spacing-05'
+        },
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$2,
+          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$1 = "/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);
+      }
+    }, [selected]);
+    React.useEffect(() => {
+      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,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 41,
         columnNumber: 5
       }
     }));
@@ -9258,8 +10105,9 @@
     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 [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);
@@ -9299,7 +10147,7 @@
       }
     };
 
-    return /*#__PURE__*/React__default["default"].createElement(CalendarBox, _extends({
+    return isMobile ? /*#__PURE__*/React__default["default"].createElement(MobileCalendarBox, _extends({
       onUpdate: multiDatePicker ? updateHandler : undefined,
       onCancel: onCancel,
       selected: dateValue,
@@ -9311,7 +10159,22 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 95,
+        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$1,
+        lineNumber: 111,
         columnNumber: 5
       }
     }));
@@ -9323,12 +10186,12 @@
     } = props,
           otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
 
-    if (type === RANGE_PICKER) {
+    if (type !== SINGLE_PICKER) {
       return /*#__PURE__*/React__default["default"].createElement(CalendarRangePicker, _extends({}, otherProps, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 111,
+          lineNumber: 127,
           columnNumber: 12
         }
       }));
@@ -9338,53 +10201,323 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 113,
+        lineNumber: 129,
         columnNumber: 10
       }
     }));
   };
 
-  var _jsxFileName = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/AdvancedOption.js";
-  const ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
-  const AdvancedOption = ({
-    options,
+  var _jsxFileName = "/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,
-    optionHandler
-  }) => {
-    return /*#__PURE__*/React__default["default"].createElement(ButtonGroup, {
-      type: "single",
-      orientation: "vertical",
-      __self: undefined,
+    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,
-        lineNumber: 11,
+        lineNumber: 111,
         columnNumber: 5
       }
-    }, options.map(option => /*#__PURE__*/React__default["default"].createElement(ButtonGroupItem, {
-      isToggle: false,
-      key: option.value,
+    }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
+      children: /*#__PURE__*/React__default["default"].createElement(MajooIcons.CalendarOutline, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 112,
+          columnNumber: 35
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 112,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(InputText, {
+      placeholder: placeholder,
+      value: getInputPickerValue(type, selectedDate),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        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,
+          lineNumber: 121,
+          columnNumber: 11
+        }
+      }) : {
+        advanceView
+      }),
+      type: type,
       disabled: disabled,
-      value: option.value,
+      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,
+        lineNumber: 117,
+        columnNumber: 5
+      }
+    });
+
+    return !isMobile ? /*#__PURE__*/React__default["default"].createElement(Popover, {
+      open: openPicker,
+      onOpenChange: setOpenPicker,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 140,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 141,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      css: css,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        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,
+        lineNumber: 144,
+        columnNumber: 7
+      }
+    }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      css: css,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 150,
+        columnNumber: 7
+      }
+    }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
+      open: openPicker,
+      onOpenChange: setOpenPicker,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 151,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
+      side: "bottom",
       css: {
-        fontSize: '$content-button',
-        lineHeight: '$content-button',
-        letterSpacing: '$content-button',
-        fontWeight: '600',
-        justifyContent: 'start',
-        mb: '$spacing-03',
-        height: '40px',
-        minWidth: '140px'
+        position: 'fixed',
+        left: 0
       },
-      onClick: () => optionHandler(option.value),
-      __self: undefined,
+      __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 13,
+        lineNumber: 152,
         columnNumber: 9
       }
-    }, option.label)));
+    }, 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';
 
+  exports.ADVANCE_PICKER = ADVANCE_PICKER;
   exports.Accordion = Accordion;
   exports.AccordionContent = AccordionContent;
   exports.AccordionItem = AccordionItem;
@@ -9429,6 +10562,7 @@
   exports.IconButton = IconButton;
   exports.Image = Image;
   exports.InputCheckbox = InputCheckbox;
+  exports.InputDatePicker = InputDatePicker;
   exports.InputGroup = InputGroup;
   exports.InputLeftAddon = InputLeftAddon;
   exports.InputLeftElement = InputLeftElement;