@majoo-ui/react 1.25.1 → 1.26.0

package/index.esm.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import React__default, { createContext, useState, useContext, useEffect } from 'react';
+import React__default, { createContext, useState, useContext, useEffect, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
 import { Portal } from '@majoo-ui/helpers';
 import { Transition } from 'react-transition-group';
 import * as MajooIcons from '@majoo-ui/icons';
-import { UserFilled, CircleQuestionOutline, MinusOutline, CloseOutline, SearchOutline, ClearOutline, CaretDownOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline } from '@majoo-ui/icons';
+import { UserFilled, CircleQuestionOutline, MinusOutline, CloseOutline, CaretDownOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, CalendarOutline } from '@majoo-ui/icons';
 import { jsx } from 'react/jsx-runtime';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -26,7 +26,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
 import 'react-dom';
 
-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,
@@ -36,7 +36,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$F,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -1866,7 +1866,7 @@ for (var COLLECTION_NAME in DOMIterables) {
 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',
@@ -1892,7 +1892,7 @@ const Box$2 = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$A,
+      fileName: _jsxFileName$E,
       lineNumber: 12,
       columnNumber: 3
     }
@@ -2042,7 +2042,7 @@ Flex.displayName = 'Flex';
 
 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: {
@@ -2227,7 +2227,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$D,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2283,7 +2283,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$D,
       lineNumber: 230,
       columnNumber: 5
     }
@@ -2301,7 +2301,7 @@ GridItem.propTypes = {
 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',
@@ -2521,28 +2521,28 @@ function Button$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$C,
       lineNumber: 220,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$C,
       lineNumber: 231,
       columnNumber: 33
     }
   }, leftIcon) : null, icon ? /*#__PURE__*/React__default.createElement(StyledIcon$3, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$C,
       lineNumber: 232,
       columnNumber: 15
     }
   }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$C,
       lineNumber: 233,
       columnNumber: 34
     }
@@ -2569,7 +2569,7 @@ Button$1.defaultProps = {
 };
 
 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;
@@ -2705,7 +2705,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$B,
       lineNumber: 133,
       columnNumber: 5
     }
@@ -2715,7 +2715,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$B,
       lineNumber: 144,
       columnNumber: 9
     }
@@ -2723,7 +2723,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$B,
       lineNumber: 145,
       columnNumber: 11
     }
@@ -2734,14 +2734,14 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$B,
       lineNumber: 146,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement(Text$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$B,
       lineNumber: 152,
       columnNumber: 15
     }
@@ -2751,7 +2751,7 @@ const Toast = _ref => {
     css: {},
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$B,
       lineNumber: 155,
       columnNumber: 15
     }
@@ -2766,7 +2766,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$B,
       lineNumber: 157,
       columnNumber: 17
     }
@@ -2789,7 +2789,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.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',
@@ -2806,7 +2806,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$A,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -2814,7 +2814,7 @@ const ToastContainer = ({
     padding: 0,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$A,
       lineNumber: 20,
       columnNumber: 7
     }
@@ -2826,7 +2826,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$A,
         lineNumber: 24,
         columnNumber: 13
       }
@@ -2835,7 +2835,7 @@ const ToastContainer = ({
 };
 
 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 = ({
@@ -2872,7 +2872,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$z,
       lineNumber: 40,
       columnNumber: 5
     }
@@ -2880,14 +2880,14 @@ const ToastProvider = ({
     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,
@@ -2900,14 +2900,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$y,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$y,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -2921,7 +2921,7 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-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__*/createContext();
 
 const AlertProvider = ({
@@ -2938,14 +2938,14 @@ const AlertProvider = ({
     },
     __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,
@@ -3084,14 +3084,14 @@ const AlertBase = props => {
   return /*#__PURE__*/React__default.createElement(AlertProvider, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$w,
       lineNumber: 158,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(AlertContent, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$w,
       lineNumber: 159,
       columnNumber: 7
     }
@@ -3109,7 +3109,7 @@ const AlertContent = props => {
   return /*#__PURE__*/React__default.createElement(AlertStyle, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$w,
       lineNumber: 170,
       columnNumber: 10
     }
@@ -3133,7 +3133,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
+            fileName: _jsxFileName$w,
             lineNumber: 179,
             columnNumber: 16
           }
@@ -3144,7 +3144,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : ' #DF2A36',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
+            fileName: _jsxFileName$w,
             lineNumber: 181,
             columnNumber: 16
           }
@@ -3155,7 +3155,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#0197F4',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
+            fileName: _jsxFileName$w,
             lineNumber: 183,
             columnNumber: 16
           }
@@ -3166,7 +3166,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : ' #FE7F2D',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
+            fileName: _jsxFileName$w,
             lineNumber: 185,
             columnNumber: 16
           }
@@ -3177,7 +3177,7 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
+            fileName: _jsxFileName$w,
             lineNumber: 187,
             columnNumber: 16
           }
@@ -3188,7 +3188,7 @@ const AlertIconBase = props => {
   return /*#__PURE__*/React__default.createElement(AlertIconStyle, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$w,
       lineNumber: 190,
       columnNumber: 10
     }
@@ -3213,7 +3213,7 @@ AlertDescription.displayName = 'AlertDescription';
 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',
@@ -3361,7 +3361,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$v,
       lineNumber: 103,
       columnNumber: 5
     }
@@ -3369,14 +3369,14 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$v,
       lineNumber: 114,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$v,
       lineNumber: 118,
       columnNumber: 13
     }
@@ -3385,14 +3385,14 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$v,
       lineNumber: 119,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$v,
       lineNumber: 125,
       columnNumber: 13
     }
@@ -3657,7 +3657,7 @@ function __rest(s, e) {
 }
 
 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': {
@@ -3703,7 +3703,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$u,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -3720,14 +3720,14 @@ const BreadcrumbBase = _ref => {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$u,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$u,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -3934,7 +3934,7 @@ Badge.defaultProps = {
 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.Root, {
   width: '32px',
   height: '32px',
@@ -3987,7 +3987,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$t,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -3997,7 +3997,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$t,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4005,21 +4005,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$t,
       lineNumber: 48,
       columnNumber: 7
     }
   }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$t,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$t,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4037,7 +4037,7 @@ Avatar.defaultProps = {
 };
 
 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',
@@ -4075,7 +4075,7 @@ function Image(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$o,
+      fileName: _jsxFileName$s,
       lineNumber: 20,
       columnNumber: 9
     }
@@ -4096,7 +4096,7 @@ Image.defaultProps = {
 };
 
 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,
@@ -4208,7 +4208,7 @@ const Tooltip = _ref => {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$r,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4216,7 +4216,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$r,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4224,7 +4224,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$r,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4233,7 +4233,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? dark : ligth,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$r,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4241,7 +4241,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$r,
       lineNumber: 95,
       columnNumber: 9
     }
@@ -4258,7 +4258,7 @@ Tooltip.defaultProps = {
 };
 
 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 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -4392,7 +4392,7 @@ function Progress(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$m,
+      fileName: _jsxFileName$q,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -4405,7 +4405,7 @@ function Progress(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$m,
+      fileName: _jsxFileName$q,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -4429,7 +4429,7 @@ Progress.defaultProps = {
 };
 
 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.Root, Text, {
   display: 'inline-block',
   fontSize: '$label',
@@ -4466,7 +4466,7 @@ const FormLabel = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$p,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -4476,7 +4476,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$p,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -4485,7 +4485,7 @@ const FormLabel = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$p,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -4500,7 +4500,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$p,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -4508,14 +4508,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$p,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$p,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -4524,7 +4524,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$p,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -4541,7 +4541,7 @@ FormLabel.propTypes = {
 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',
@@ -4567,7 +4567,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$k,
+      fileName: _jsxFileName$o,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -4579,7 +4579,7 @@ FormHelper.propTypes = {
 };
 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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -4597,7 +4597,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$j,
+    fileName: _jsxFileName$n,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -4609,7 +4609,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$j,
+    fileName: _jsxFileName$n,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -4621,14 +4621,14 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __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.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -4693,7 +4693,7 @@ const InputCheckbox = _ref => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$m,
       lineNumber: 57,
       columnNumber: 5
     }
@@ -4705,28 +4705,28 @@ const InputCheckbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$m,
       lineNumber: 58,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$m,
       lineNumber: 59,
       columnNumber: 9
     }
   }, isIndeterminate ? /*#__PURE__*/React__default.createElement(MinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$m,
       lineNumber: 59,
       columnNumber: 45
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$m,
       lineNumber: 59,
       columnNumber: 64
     }
@@ -4742,7 +4742,7 @@ const InputCheckbox = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
+      fileName: _jsxFileName$m,
       lineNumber: 61,
       columnNumber: 7
     }
@@ -4759,7 +4759,7 @@ InputCheckbox.propTypes = {
 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%',
@@ -4896,7 +4896,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$h,
+      fileName: _jsxFileName$l,
       lineNumber: 143,
       columnNumber: 10
     }
@@ -5199,7 +5199,7 @@ InputRadioGroup.propTypes = {
 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',
@@ -5283,7 +5283,7 @@ const InputRadio = _ref => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$k,
       lineNumber: 82,
       columnNumber: 3
     }
@@ -5293,14 +5293,14 @@ const InputRadio = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$k,
       lineNumber: 83,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$k,
       lineNumber: 84,
       columnNumber: 7
     }
@@ -5317,7 +5317,7 @@ const InputRadio = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$k,
       lineNumber: 86,
       columnNumber: 5
     }
@@ -5361,7 +5361,7 @@ InputRightElement.propTypes = {
 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',
@@ -5449,21 +5449,21 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$j,
       lineNumber: 54,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__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.createElement(StyledIconRight$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$j,
       lineNumber: 65,
       columnNumber: 34
     }
@@ -5483,7 +5483,7 @@ Tag.defaultProps = {
 };
 
 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',
@@ -5618,7 +5618,7 @@ function TagsInput(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$i,
       lineNumber: 105,
       columnNumber: 5
     }
@@ -5626,7 +5626,7 @@ function TagsInput(_ref) {
     gap: 3,
     __self: this,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$i,
       lineNumber: 115,
       columnNumber: 7
     }
@@ -5637,7 +5637,7 @@ function TagsInput(_ref) {
       size: 10,
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$i,
         lineNumber: 120,
         columnNumber: 24
       }
@@ -5650,7 +5650,7 @@ function TagsInput(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$i,
       lineNumber: 117,
       columnNumber: 11
     }
@@ -5663,7 +5663,7 @@ function TagsInput(_ref) {
     readOnly: readOnly,
     __self: this,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$i,
       lineNumber: 132,
       columnNumber: 7
     }
@@ -5688,7 +5688,7 @@ TagsInput.defaultProps = {
 };
 
 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.Thumb, {
   display: 'block',
   width: '16px',
@@ -5771,14 +5771,14 @@ const InputSwitch = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$h,
       lineNumber: 66,
       columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledThumb$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$h,
       lineNumber: 74,
       columnNumber: 5
     }
@@ -5796,8 +5796,111 @@ InputSwitch.propTypes = {
 };
 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.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.createElement("mask", {
+  id: "path-1-inside-1_2883_7918",
+  fill: "white",
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$g,
+    lineNumber: 5,
+    columnNumber: 5
+  }
+}, /*#__PURE__*/React.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.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.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.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.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.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 {
@@ -5826,23 +5929,23 @@ const InputSearchbox = _ref => {
     css: props.css,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 27,
+      fileName: _jsxFileName$e,
+      lineNumber: 28,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
-    children: /*#__PURE__*/React__default.createElement(SearchOutline, {
+    children: /*#__PURE__*/React__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.createElement(InputText, _extends({
@@ -5851,27 +5954,34 @@ const InputSearchbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 29,
+      fileName: _jsxFileName$e,
+      lineNumber: 30,
       columnNumber: 7
     }
-  })), value.length ? /*#__PURE__*/React__default.createElement(InputRightElement, {
-    children: /*#__PURE__*/React__default.createElement(ClearOutline, {
+  })), /*#__PURE__*/React__default.createElement(InputRightElement, {
+    children: value.length > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 30,
-        columnNumber: 52
+        fileName: _jsxFileName$e,
+        lineNumber: 31,
+        columnNumber: 55
+      }
+    }) : /*#__PURE__*/React__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.createElement(React__default.Fragment, null));
+  }));
 };
 
 InputSearchbox.propTypes = {
@@ -6351,7 +6461,7 @@ $$1({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_RE
 });
 
 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',
@@ -6517,7 +6627,7 @@ function Select(_ref) {
     initialSelectedItem: value !== undefined ? value : null,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 149,
       columnNumber: 5
     }
@@ -6535,7 +6645,7 @@ function Select(_ref) {
   }) => /*#__PURE__*/React.createElement(Box$1, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 167,
       columnNumber: 9
     }
@@ -6546,7 +6656,7 @@ function Select(_ref) {
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 168,
       columnNumber: 11
     }
@@ -6556,7 +6666,7 @@ function Select(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 170,
       columnNumber: 15
     }
@@ -6568,7 +6678,7 @@ function Select(_ref) {
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 171,
       columnNumber: 17
     }
@@ -6577,7 +6687,7 @@ function Select(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 178,
       columnNumber: 15
     }
@@ -6585,7 +6695,7 @@ function Select(_ref) {
     color: "primary",
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 180,
       columnNumber: 19
     }
@@ -6593,14 +6703,14 @@ function Select(_ref) {
     color: "primary",
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 182,
       columnNumber: 19
     }
   }, placeholder)), /*#__PURE__*/React.createElement(IconContainer$1, _extends({}, getToggleButtonProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 186,
       columnNumber: 13
     }
@@ -6608,7 +6718,7 @@ function Select(_ref) {
     color: iconColor,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 187,
       columnNumber: 15
     }
@@ -6618,14 +6728,14 @@ function Select(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 190,
       columnNumber: 11
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption$1, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 192,
       columnNumber: 15
     }
@@ -6643,7 +6753,7 @@ function Select(_ref) {
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$d,
         lineNumber: 194,
         columnNumber: 19
       }
@@ -6651,14 +6761,14 @@ function Select(_ref) {
   })) : /*#__PURE__*/React.createElement(SelectOption$1, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 208,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(StyledDiv$1, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$d,
       lineNumber: 209,
       columnNumber: 17
     }
@@ -6703,7 +6813,7 @@ $({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') },
   }
 });
 
-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',
@@ -6907,7 +7017,7 @@ function SelectTag({
   return /*#__PURE__*/React.createElement(Box, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 192,
       columnNumber: 5
     }
@@ -6916,7 +7026,7 @@ function SelectTag({
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 193,
       columnNumber: 7
     }
@@ -6924,7 +7034,7 @@ function SelectTag({
     gap: 3,
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 195,
       columnNumber: 11
     }
@@ -6940,7 +7050,7 @@ function SelectTag({
       size: 10,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 202,
         columnNumber: 28
       }
@@ -6952,7 +7062,7 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 197,
       columnNumber: 15
     }
@@ -6964,7 +7074,7 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 210,
       columnNumber: 9
     }
@@ -6976,21 +7086,21 @@ function SelectTag({
   })), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 211,
       columnNumber: 11
     }
   }))), /*#__PURE__*/React.createElement(IconContainer, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 217,
       columnNumber: 9
     }
   }, /*#__PURE__*/React.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 218,
       columnNumber: 11
     }
@@ -7000,14 +7110,14 @@ function SelectTag({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 221,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 223,
       columnNumber: 11
     }
@@ -7026,7 +7136,7 @@ function SelectTag({
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$c,
         lineNumber: 226,
         columnNumber: 17
       }
@@ -7034,14 +7144,14 @@ function SelectTag({
   })) : /*#__PURE__*/React.createElement(SelectOption, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 242,
       columnNumber: 11
     }
   }, /*#__PURE__*/React.createElement(StyledDiv, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$c,
       lineNumber: 243,
       columnNumber: 13
     }
@@ -7140,7 +7250,7 @@ const StyledAnchor = styled(PopoverPrimitive.Anchor, {});
 const PopoverAnchor = StyledAnchor;
 
 const _excluded$7 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-var _jsxFileName$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 = styled$1(SliderPrimitive.Root, {
   position: 'relative',
   display: 'flex',
@@ -7422,7 +7532,7 @@ function Slider(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$b,
       lineNumber: 160,
       columnNumber: 5
     }
@@ -7431,7 +7541,7 @@ function Slider(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$b,
       lineNumber: 181,
       columnNumber: 7
     }
@@ -7439,7 +7549,7 @@ function Slider(_ref) {
     color: color,
     __self: this,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$b,
       lineNumber: 182,
       columnNumber: 9
     }
@@ -7448,7 +7558,7 @@ function Slider(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$b,
       lineNumber: 184,
       columnNumber: 7
     }
@@ -7548,7 +7658,7 @@ const Separator = StyledSeparator;
 
 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.Root, {
   display: 'inline-flex',
   borderRadius: '$md',
@@ -7690,7 +7800,7 @@ function ButtonGroup$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$a,
       lineNumber: 111,
       columnNumber: 5
     }
@@ -7743,21 +7853,21 @@ function ButtonGroupItem(_ref2) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$a,
       lineNumber: 164,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$a,
       lineNumber: 172,
       columnNumber: 33
     }
   }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$a,
       lineNumber: 174,
       columnNumber: 34
     }
@@ -7776,7 +7886,7 @@ ButtonGroupItem.defaultProps = {
 };
 
 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',
@@ -7907,7 +8017,7 @@ const NotificationBadge = _ref => {
   return /*#__PURE__*/React__default.createElement(NotificationBadgeRootStyle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$7,
+      fileName: _jsxFileName$9,
       lineNumber: 133,
       columnNumber: 5
     }
@@ -7915,7 +8025,7 @@ const NotificationBadge = _ref => {
     children: value,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$7,
+      fileName: _jsxFileName$9,
       lineNumber: 135,
       columnNumber: 7
     }
@@ -7940,7 +8050,7 @@ NotificationBadge.propTypes = {
 };
 
 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',
@@ -7972,7 +8082,7 @@ const Paper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$8,
       lineNumber: 17,
       columnNumber: 5
     }
@@ -8033,7 +8143,7 @@ const IconButton = styled('button', {
 });
 
 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
@@ -8082,21 +8192,21 @@ function Content(_ref) {
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Portal, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$7,
       lineNumber: 38,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay$1, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$7,
       lineNumber: 39,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$2, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$7,
       lineNumber: 40,
       columnNumber: 7
     }
@@ -8127,7 +8237,7 @@ const DialogDescription = StyledDescription;
 const DialogClose = DialogPrimitive.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'
@@ -8168,14 +8278,14 @@ function Drawer(_ref) {
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Root, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$4,
+      fileName: _jsxFileName$6,
       lineNumber: 36,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledOverlay, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$4,
+      fileName: _jsxFileName$6,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -8232,9 +8342,14 @@ const StyledContent$1 = styled(DialogPrimitive.Content, {
       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)',
@@ -8267,7 +8382,8 @@ Drawer.propTypes = {
 };
 const DrawerContent = StyledContent$1;
 DrawerContent.propTypes = {
-  side: PropTypes.oneOf(['top', 'left', 'bottom', 'right'])
+  side: PropTypes.oneOf(['top', 'left', 'bottom', 'right']),
+  isMobile: PropTypes.bool
 };
 const DrawerTrigger = DialogPrimitive.Trigger;
 const DrawerClose = StyledClose;
@@ -8277,7 +8393,7 @@ const DrawerDescription = DialogPrimitive.Description;
 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)' },
 // });
@@ -8300,7 +8416,7 @@ const Accordion = _ref => {
     disabled: disabled,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$5,
       lineNumber: 20,
       columnNumber: 3
     }
@@ -8363,14 +8479,14 @@ const AccordionTrigger = _ref2 => {
   return /*#__PURE__*/React__default.createElement(StyledHeader, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$5,
       lineNumber: 80,
       columnNumber: 3
     }
   }, /*#__PURE__*/React__default.createElement(StyledTrigger, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$5,
       lineNumber: 81,
       columnNumber: 5
     }
@@ -8379,7 +8495,7 @@ const AccordionTrigger = _ref2 => {
     color: arrowColor,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$5,
       lineNumber: 83,
       columnNumber: 22
     }
@@ -8396,7 +8512,7 @@ const AccordionContent = _ref3 => {
   return /*#__PURE__*/React__default.createElement(StyledContent, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$5,
       lineNumber: 91,
       columnNumber: 61
     }
@@ -8430,6 +8546,69 @@ const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID',
   dateStyle
 }).format(date);
 
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  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.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.createElement(ButtonGroup, {
+    type: "single",
+    orientation: "vertical",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$4,
+      lineNumber: 25,
+      columnNumber: 5
+    }
+  }, options.map(option => /*#__PURE__*/React__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',
@@ -8480,10 +8659,18 @@ const DateNumber = styled('div', {
         size: '42px'
       },
       small: {
-        size: '32px'
+        height: '32px',
+        width: '45.5px'
       }
     }
   },
+  compoundVariants: [{
+    variant: 'selected',
+    size: 'small',
+    css: {
+      borderRadius: '80px'
+    }
+  }],
   defaultVariants: {
     variant: 'default',
     size: 'large'
@@ -8491,9 +8678,9 @@ const DateNumber = styled('div', {
 });
 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
@@ -8525,7 +8712,7 @@ const getVariant = ({
   return variant;
 };
 
-const ArrowButton = styled('button', {
+const ArrowButton$1 = styled('button', {
   all: 'unset',
   size: '32px',
   borderRadius: '$md',
@@ -8550,13 +8737,14 @@ const ArrowButton = styled('button', {
     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',
@@ -8564,15 +8752,22 @@ const CalendarsContainer = styled(Box$2, {
   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',
@@ -8596,7 +8791,7 @@ const TitleButton = styled(Heading, {
     }
   }
 });
-const MonthButton = styled(Text, {
+const MonthButton$1 = styled(Text, {
   minWidth: '90px',
   textAlign: 'center',
   borderRadius: '$md',
@@ -8629,15 +8824,13 @@ const MonthButton = styled(Text, {
     }
   }
 });
-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,
@@ -8650,7 +8843,7 @@ const CalendarBox = ({
   disabled
 }) => {
   const [pickerState, setPickerState] = 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),
@@ -8673,84 +8866,84 @@ const CalendarBox = ({
   const multiDatePicker = calendars.length > 1;
 
   const renderTitleButton = index => {
-    return multiDatePicker ? /*#__PURE__*/React__default.createElement(TitleButton, {
+    return multiDatePicker ? /*#__PURE__*/React__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.createElement(TitleButton, {
+    }, monthNamesFull[calendars[index].month], " ", calendars[index].year) : /*#__PURE__*/React__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.createElement(React__default.Fragment, null, monthNamesFull[calendars[0].month], " ", calendars[0].year), pickerState.type === MONTH_PICKER && pickerState.selectedYear, pickerState.type === YEAR_PICKER && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9), pickerState.type === YEAR_RANGE_PICKER && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99));
+    }, pickerState.type === DATE_PICKER$1 && /*#__PURE__*/React__default.createElement(React__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.createElement(React__default.Fragment, null, pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9), pickerState.type === YEAR_RANGE_PICKER$1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99));
   };
 
   const renderBackButton = () => {
-    return /*#__PURE__*/React__default.createElement(ArrowButton, {
+    return /*#__PURE__*/React__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.createElement(ChevronLeftOutline, {
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 260,
+        fileName: _jsxFileName$3,
+        lineNumber: 266,
         columnNumber: 9
       }
     }));
   };
 
   const renderForwardButton = () => {
-    return /*#__PURE__*/React__default.createElement(ArrowButton, {
+    return /*#__PURE__*/React__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.createElement(ChevronRightOutline, {
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 287,
+        fileName: _jsxFileName$3,
+        lineNumber: 293,
         columnNumber: 9
       }
     }));
@@ -8765,8 +8958,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 293,
+        fileName: _jsxFileName$3,
+        lineNumber: 299,
         columnNumber: 7
       }
     }, multiDatePicker ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Flex, {
@@ -8778,8 +8971,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 296,
+        fileName: _jsxFileName$3,
+        lineNumber: 302,
         columnNumber: 13
       }
     }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default.createElement(Box$2, {
@@ -8788,8 +8981,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 306,
+        fileName: _jsxFileName$3,
+        lineNumber: 312,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Separator, {
@@ -8799,8 +8992,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 312,
+        fileName: _jsxFileName$3,
+        lineNumber: 318,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -8812,8 +9005,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 318,
+        fileName: _jsxFileName$3,
+        lineNumber: 324,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Box$2, {
@@ -8822,8 +9015,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 326,
+        fileName: _jsxFileName$3,
+        lineNumber: 332,
         columnNumber: 15
       }
     }), renderTitleButton(1), renderForwardButton())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderBackButton(), renderTitleButton(), renderForwardButton()));
@@ -8837,8 +9030,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 348,
+        fileName: _jsxFileName$3,
+        lineNumber: 354,
         columnNumber: 7
       }
     }, calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
@@ -8855,8 +9048,8 @@ const CalendarBox = ({
           },
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$2,
-            lineNumber: 359,
+            fileName: _jsxFileName$3,
+            lineNumber: 365,
             columnNumber: 17
           }
         });
@@ -8874,11 +9067,11 @@ const CalendarBox = ({
       return /*#__PURE__*/React__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());
@@ -8894,22 +9087,22 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 392,
+        fileName: _jsxFileName$3,
+        lineNumber: 398,
         columnNumber: 7
       }
-    }, yearRangesList(pickerState.selectedYearRangeStart).map(range => /*#__PURE__*/React__default.createElement(MonthButton, {
+    }, yearRangesList(pickerState.selectedYearRangeStart).map(range => /*#__PURE__*/React__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)));
@@ -8926,22 +9119,22 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 423,
+        fileName: _jsxFileName$3,
+        lineNumber: 429,
         columnNumber: 7
       }
-    }, yearsArray.map((year, index) => /*#__PURE__*/React__default.createElement(MonthButton, {
+    }, yearsArray.map((year, index) => /*#__PURE__*/React__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)));
@@ -8956,11 +9149,11 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 452,
+        fileName: _jsxFileName$3,
+        lineNumber: 458,
         columnNumber: 7
       }
-    }, monthNamesFull.map((monthName, index) => /*#__PURE__*/React__default.createElement(MonthButton, {
+    }, monthNamesFull.map((monthName, index) => /*#__PURE__*/React__default.createElement(MonthButton$1, {
       key: monthName,
       paragraph: "shortContentRegular",
       isSelected: pickerState.selectedMonth === index,
@@ -8968,25 +9161,25 @@ const CalendarBox = ({
         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.createElement(WeekdayBox, {
+    return weekdayNamesShort.map(weekday => /*#__PURE__*/React__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.createElement(Paragraph, {
@@ -8996,8 +9189,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 483,
+        fileName: _jsxFileName$3,
+        lineNumber: 489,
         columnNumber: 9
       }
     }, weekday)));
@@ -9007,8 +9200,8 @@ const CalendarBox = ({
     return /*#__PURE__*/React__default.createElement(Box$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 497,
+        fileName: _jsxFileName$3,
+        lineNumber: 503,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -9017,8 +9210,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 498,
+        fileName: _jsxFileName$3,
+        lineNumber: 504,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -9026,8 +9219,8 @@ const CalendarBox = ({
       align: "center",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 499,
+        fileName: _jsxFileName$3,
+        lineNumber: 505,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -9038,16 +9231,16 @@ const CalendarBox = ({
       },
       __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.createElement(Flex, {
       gap: 3,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 511,
+        fileName: _jsxFileName$3,
+        lineNumber: 517,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Button$1, {
@@ -9059,8 +9252,8 @@ const CalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 512,
+        fileName: _jsxFileName$3,
+        lineNumber: 518,
         columnNumber: 13
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$1, {
@@ -9071,51 +9264,51 @@ const CalendarBox = ({
       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.createElement(CalendarsContainer, {
+    return /*#__PURE__*/React__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.createElement(Separator, {
       orientation: "vertical",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 542,
+        fileName: _jsxFileName$3,
+        lineNumber: 548,
         columnNumber: 25
       }
     }), /*#__PURE__*/React__default.createElement(Box$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 543,
+        fileName: _jsxFileName$3,
+        lineNumber: 549,
         columnNumber: 9
       }
-    }, renderHeader(), /*#__PURE__*/React__default.createElement(CalendarItemContainer, {
+    }, renderHeader(), /*#__PURE__*/React__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.createElement(React__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.createElement(Separator, {
@@ -9125,15 +9318,15 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 549,
+        fileName: _jsxFileName$3,
+        lineNumber: 555,
         columnNumber: 19
       }
-    }), /*#__PURE__*/React__default.createElement(DateContainer, {
+    }), /*#__PURE__*/React__default.createElement(DateContainer$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 556,
+        fileName: _jsxFileName$3,
+        lineNumber: 562,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -9142,76 +9335,730 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 557,
+        fileName: _jsxFileName$3,
+        lineNumber: 563,
         columnNumber: 19
       }
-    }), pickerState.type === DATE_PICKER && /*#__PURE__*/React__default.createElement(React__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.createElement(React__default.Fragment, null, renderWeekLabel(calendar), renderDateNumber(calendar)), pickerState.type === MONTH_PICKER$1 && renderMonthsList(), pickerState.type === YEAR_PICKER$1 && renderYearsList(), pickerState.type === YEAR_RANGE_PICKER$1 && renderYearRangesList())))), multiDatePicker && renderFooter()));
   }
 
   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] = useState();
-  const [calendarDate, setCalendarDate] = 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 = useDayzed(Object.assign({}, props, {
-    date: calendarDate,
-    selected: dateValue,
-    monthsToDisplay: multiDatePicker ? 2 : 1,
-    showOutsideDays: true,
-    onDateSelected
-  }));
-  useEffect(() => {
-    if (selected) {
-      setDateValue(selected);
-    }
-  }, [selected]);
-  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.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] = 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] = useState(false);
+  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.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.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.createElement(React__default.Fragment, null, monthNamesFull[calendars[0].month], " ", calendars[0].year), pickerState.type === MONTH_PICKER && pickerState.selectedYear, pickerState.type === YEAR_PICKER && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, pickerState.selectedYearRange, " - ", pickerState.selectedYearRange + 9), pickerState.type === YEAR_RANGE_PICKER && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, pickerState.selectedYearRangeStart, " - ", pickerState.selectedYearRangeStart + 99));
+  };
+
+  const renderBackButton = () => {
+    return /*#__PURE__*/React__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.createElement(ChevronLeftOutline, {
+      color: "currentColor",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 302,
+        columnNumber: 9
+      }
+    }));
+  };
+
+  const renderForwardButton = () => {
+    return /*#__PURE__*/React__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.createElement(ChevronRightOutline, {
+      color: "currentColor",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 329,
+        columnNumber: 9
+      }
+    }));
+  };
+
+  const renderHeader = index => {
+    return /*#__PURE__*/React__default.createElement(Flex, {
+      justify: "between",
+      align: "center",
+      css: {
+        height: '44px'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 335,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderBackButton(), renderTitleButton(index), renderForwardButton()));
+  };
+
+  const renderDateNumber = calendar => {
+    return /*#__PURE__*/React__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.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.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.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.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.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.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.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.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.createElement(Flex, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 482,
+        columnNumber: 7
+      }
+    }, weekdayNamesShort.map(weekday => /*#__PURE__*/React__default.createElement(WeekdayBox, {
+      key: `${calendar.month}${calendar.year}${weekday}`,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 484,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__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.createElement(FooterContainer, {
+      direction: "column",
+      center: true,
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 501,
+        columnNumber: 7
+      }
+    }, advanceView && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(AdvanceViewToggleButton, {
+      gap: 3,
+      align: "center",
+      onClick: () => setExpandAdvanceView(!expandAdvanceView),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 504,
+        columnNumber: 13
+      }
+    }, /*#__PURE__*/React__default.createElement(Text, {
+      variant: "contentButton",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 505,
+        columnNumber: 15
+      }
+    }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 506,
+        columnNumber: 36
+      }
+    }) : /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 506,
+        columnNumber: 61
+      }
+    })), expandAdvanceView && advanceView, /*#__PURE__*/React__default.createElement(Separator, {
+      css: {
+        marginBottom: '$spacing-05'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 509,
+        columnNumber: 13
+      }
+    })), /*#__PURE__*/React__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.createElement(Flex, {
+      gap: 3,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 521,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__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.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.createElement(DatePickerContainer, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 552,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default.createElement(CalendarsContainer, {
+      css: containerStyle,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 553,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default.createElement(CalendarItemContainer, {
+      direction: "column",
+      gap: 5,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 554,
+        columnNumber: 11
+      }
+    }, calendars.map((calendar, index) => /*#__PURE__*/React__default.createElement(DateContainer, {
+      key: `${calendar.month}${calendar.year}`,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 556,
+        columnNumber: 15
+      }
+    }, renderHeader(index), /*#__PURE__*/React__default.createElement(Separator, {
+      css: {
+        marginBottom: '$spacing-05'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 558,
+        columnNumber: 17
+      }
+    }), pickerState.type === DATE_PICKER && /*#__PURE__*/React__default.createElement(React__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] = useState();
+  const [calendarDate, setCalendarDate] = useState(selected != null ? selected : new Date());
+
+  const onDateSelected = selectedDate => {
+    setDateValue(selectedDate.date);
+  };
+
+  const updateHandler = () => {
+    if (dateValue && onChange) {
+      onChange(dateValue);
+    }
+  };
+
+  const dayzedData = useDayzed(Object.assign({}, props, {
+    date: calendarDate,
+    selected: dateValue,
+    monthsToDisplay: multiDatePicker ? 2 : 1,
+    showOutsideDays: true,
+    onDateSelected
+  }));
+  useEffect(() => {
+    if (selected) {
+      setDateValue(selected);
+    }
+  }, [selected]);
+  useEffect(() => {
+    if (dateValue && !multiDatePicker && onChange) {
+      onChange(dateValue);
+    }
+  }, [dateValue]);
+  return /*#__PURE__*/React__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
     }
   }));
@@ -9231,8 +10078,9 @@ const CalendarRangePicker = _ref2 => {
   const today = new Date();
   const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
   const [dateValue, setDateValue] = useState([]);
-  const [calendarDate, setCalendarDate] = useState(!advanceView ? today : prevMonth);
+  const [calendarDate, setCalendarDate] = useState(selected ? selected[0] : !advanceView ? today : prevMonth);
   const [isMultiDate, setIsMultiDate] = useState(multiDatePicker);
+  const isMobile = useMediaQuery('(max-width: 767px)');
   useEffect(() => {
     if (selected) {
       setDateValue(selected);
@@ -9272,7 +10120,7 @@ const CalendarRangePicker = _ref2 => {
     }
   };
 
-  return /*#__PURE__*/React__default.createElement(CalendarBox, _extends({
+  return isMobile ? /*#__PURE__*/React__default.createElement(MobileCalendarBox, _extends({
     onUpdate: multiDatePicker ? updateHandler : undefined,
     onCancel: onCancel,
     selected: dateValue,
@@ -9284,7 +10132,22 @@ const CalendarRangePicker = _ref2 => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 95,
+      lineNumber: 100,
+      columnNumber: 5
+    }
+  })) : /*#__PURE__*/React__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
     }
   }));
@@ -9296,12 +10159,12 @@ const DatePicker = props => {
   } = props,
         otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
 
-  if (type === RANGE_PICKER) {
+  if (type !== SINGLE_PICKER) {
     return /*#__PURE__*/React__default.createElement(CalendarRangePicker, _extends({}, otherProps, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 111,
+        lineNumber: 127,
         columnNumber: 12
       }
     }));
@@ -9311,51 +10174,320 @@ const DatePicker = props => {
     __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.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.createElement(ButtonGroup, {
-    type: "single",
-    orientation: "vertical",
-    __self: undefined,
+  onChange,
+  date,
+  advanceView,
+  css
+}) {
+  const [{
+    selectedDate
+  }, dispatch] = useReducer(dateReducer, {
+    selectedDate: undefined
+  });
+  const [openPicker, setOpenPicker] = useState(false);
+  const isMobile = useMediaQuery(`(max-width: ${type === SINGLE_PICKER ? '480px' : '767px'})`);
+
+  const renderInputGroup = () => /*#__PURE__*/React__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.createElement(ButtonGroupItem, {
-    isToggle: false,
-    key: option.value,
+  }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
+    children: /*#__PURE__*/React__default.createElement(CalendarOutline, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 112,
+        columnNumber: 35
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 112,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(InputText, {
+    placeholder: placeholder,
+    value: getInputPickerValue(type, selectedDate),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 113,
+      columnNumber: 7
+    }
+  }));
+
+  const renderDatePicker = () => /*#__PURE__*/React__default.createElement(DatePicker, {
+    advanceView: type === ADVANCE_PICKER && (!advanceView ? /*#__PURE__*/React__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.createElement(Popover, {
+    open: openPicker,
+    onOpenChange: setOpenPicker,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 140,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 141,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$2, {
+    css: css,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 142,
+      columnNumber: 9
+    }
+  }, renderInputGroup())), /*#__PURE__*/React__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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$2, {
+    css: css,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 150,
+      columnNumber: 7
+    }
+  }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
+    open: openPicker,
+    onOpenChange: setOpenPicker,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 151,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__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.oneOf([SINGLE_PICKER, RANGE_PICKER, ADVANCE_PICKER]),
+  placeholder: PropTypes.string,
+  size: PropTypes.oneOf(['lg', 'sm']),
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  date: PropTypes.array,
+  advanceView: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
+  css: PropTypes.object
 };
+InputDatePicker.displayName = 'InputDatePicker';
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, Alert, AlertDescription, AlertIcon, AlertTitle, Avatar, Badge, Box$2 as Box, BoxComponent, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, Card, CardComponent, CardLineColor, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, Flex, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, InputCheckbox, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, MajooProvider, NotificationBadge, Paper, PaperComponent, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RANGE_PICKER, SINGLE_PICKER, Separator, Slider, StyledTitle$1 as StyledTitle, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, ToastContext, Tooltip };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, Alert, AlertDescription, AlertIcon, AlertTitle, Avatar, Badge, Box$2 as Box, BoxComponent, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, Card, CardComponent, CardLineColor, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, Flex, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, MajooProvider, NotificationBadge, Paper, PaperComponent, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RANGE_PICKER, SINGLE_PICKER, Separator, Slider, StyledTitle$1 as StyledTitle, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, ToastContext, Tooltip };