@majoo-ui/react 1.25.0 → 1.27.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, CloseOutline, CaretDownOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, CalendarOutline, SortingOutline } 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';
@@ -14,7 +14,6 @@ import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { Flex as Flex$1 } from 'packages/react/src/layout';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import Downshift, { useMultipleSelection, useCombobox } from 'downshift';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -26,8 +25,9 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
 import 'react-dom';
+import { useTable, useSortBy, useExpanded, useRowSelect } from 'react-table';
 
-var _jsxFileName$B = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+var _jsxFileName$I = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/ThemeProvider.js";
 
 function ThemeProvider({
   theme,
@@ -37,7 +37,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$I,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -1142,7 +1142,7 @@ createTheme({
     bgDark: '#FFFFFF'
   }
 });
-foundations.colors;
+const colors = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -1867,13 +1867,13 @@ for (var COLLECTION_NAME in DOMIterables) {
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
 const _excluded$s = ["className", "children", "color", "textColor", "padding"];
-var _jsxFileName$A = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\box\\Box.js";
+var _jsxFileName$H = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/box/Box.js";
 const BoxComponent = styled('div', {
   height: 'auto',
   background: 'none',
   backgroundImage: 'none'
 });
-const Box$2 = _ref => {
+const Box$1 = _ref => {
   let {
     className,
     children,
@@ -1893,19 +1893,19 @@ const Box$2 = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$A,
+      fileName: _jsxFileName$H,
       lineNumber: 12,
       columnNumber: 3
     }
   }), children);
 };
-Box$2.propTypes = {
+Box$1.propTypes = {
   textColor: PropTypes.string,
   className: PropTypes.string,
   color: PropTypes.string,
   padding: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-Box$2.defaultProps = {
+Box$1.defaultProps = {
   className: '',
   color: 'none',
   textColor: 'inherit'
@@ -2043,7 +2043,7 @@ Flex.displayName = 'Flex';
 
 const _excluded$r = ["children"],
       _excluded2$3 = ["children"];
-var _jsxFileName$z = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+var _jsxFileName$G = "/home/omegalord666/work/majoo-ui/packages/react/src/layout/grid/Grid.js";
 const GridComponent = styled('div', {
   display: 'grid',
   variants: {
@@ -2228,7 +2228,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$G,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2284,7 +2284,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$G,
       lineNumber: 230,
       columnNumber: 5
     }
@@ -2302,7 +2302,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 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\button\\Button.js";
+var _jsxFileName$F = "/home/omegalord666/work/majoo-ui/packages/react/src/components/button/Button.js";
 const ButtonPrimary = {
   backgroundColor: '$btnPrimary',
   color: '$textWhite',
@@ -2379,7 +2379,25 @@ const ButtonHeaderMenu = {
     backgroundColor: '$gray50'
   }
 };
-const StyledIcon$3 = styled('div', {
+const ButtonTableMenu = {
+  backgroundColor: '$bgWhite',
+  color: '$textPrimary',
+  padding: '$spacing-04 $spacing-05',
+  width: '180px',
+  textAlign: 'left',
+  border: 'none',
+  borderRadius: 0,
+  '&:focus': {
+    outline: 'none'
+  },
+  '&:hover': {
+    backgroundColor: '$gray50'
+  },
+  '&:active': {
+    backgroundColor: '$gray100'
+  }
+};
+const StyledIcon$2 = styled('div', {
   verticalAlign: 'middle'
 });
 const StyledIconLeft$2 = styled('div', {
@@ -2434,7 +2452,8 @@ const ButtonComponent = styled('button', {
       ghost: Object.assign({}, GhostButton),
       negative: Object.assign({}, ButtonNegative),
       'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
-      headerMenu: Object.assign({}, ButtonHeaderMenu)
+      headerMenu: Object.assign({}, ButtonHeaderMenu),
+      tableMenu: Object.assign({}, ButtonTableMenu)
     },
     size: {
       xs: {
@@ -2522,29 +2541,29 @@ function Button$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
-      lineNumber: 220,
+      fileName: _jsxFileName$F,
+      lineNumber: 240,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
-      lineNumber: 231,
+      fileName: _jsxFileName$F,
+      lineNumber: 251,
       columnNumber: 33
     }
-  }, leftIcon) : null, icon ? /*#__PURE__*/React__default.createElement(StyledIcon$3, {
+  }, leftIcon) : null, icon ? /*#__PURE__*/React__default.createElement(StyledIcon$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
-      lineNumber: 232,
+      fileName: _jsxFileName$F,
+      lineNumber: 252,
       columnNumber: 15
     }
   }, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
-      lineNumber: 233,
+      fileName: _jsxFileName$F,
+      lineNumber: 253,
       columnNumber: 34
     }
   }, rightIcon) : null);
@@ -2570,7 +2589,7 @@ Button$1.defaultProps = {
 };
 
 const _excluded$p = ["id", "message", "dismissAfter", "variant", "onAction", "actionText", "onRemove"];
-var _jsxFileName$x = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+var _jsxFileName$E = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/Toast.js";
 const TOAST_WIDTH = 360;
 const ANIMATION_DURATION = 400; // export interface ToastProps extends Omit<ToastSettings, 'status'>, BoxProps {
 //   variant?: ToastVariants;
@@ -2663,7 +2682,7 @@ const StyledToast = styled('div', {
     }
   }
 });
-const Text$1 = styled('span', {
+const Text$2 = styled('span', {
   display: 'block'
 });
 
@@ -2706,7 +2725,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$E,
       lineNumber: 133,
       columnNumber: 5
     }
@@ -2716,7 +2735,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$E,
       lineNumber: 144,
       columnNumber: 9
     }
@@ -2724,7 +2743,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$E,
       lineNumber: 145,
       columnNumber: 11
     }
@@ -2735,14 +2754,14 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$E,
       lineNumber: 146,
       columnNumber: 13
     }
-  }, /*#__PURE__*/React.createElement(Text$1, {
+  }, /*#__PURE__*/React.createElement(Text$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$E,
       lineNumber: 152,
       columnNumber: 15
     }
@@ -2752,7 +2771,7 @@ const Toast = _ref => {
     css: {},
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$E,
       lineNumber: 155,
       columnNumber: 15
     }
@@ -2767,7 +2786,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$E,
       lineNumber: 157,
       columnNumber: 17
     }
@@ -2790,8 +2809,8 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$w = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
-const ToastBox = styled(Box$2, {
+var _jsxFileName$D = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
+const ToastBox = styled(Box$1, {
   display: 'block',
   position: 'fixed',
   bottom: 0,
@@ -2807,7 +2826,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$D,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -2815,7 +2834,7 @@ const ToastContainer = ({
     padding: 0,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
+      fileName: _jsxFileName$D,
       lineNumber: 20,
       columnNumber: 7
     }
@@ -2827,7 +2846,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$D,
         lineNumber: 24,
         columnNumber: 13
       }
@@ -2836,7 +2855,7 @@ const ToastContainer = ({
 };
 
 const _excluded$o = ["id"];
-var _jsxFileName$v = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+var _jsxFileName$C = "/home/omegalord666/work/majoo-ui/packages/react/src/components/toast/context/ToastProvider.js";
 let toastCount = 0;
 
 const ToastProvider = ({
@@ -2873,7 +2892,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$C,
       lineNumber: 40,
       columnNumber: 5
     }
@@ -2881,14 +2900,14 @@ const ToastProvider = ({
     toasts: toasts,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$C,
       lineNumber: 42,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$u = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+var _jsxFileName$B = "/home/omegalord666/work/majoo-ui/packages/react/src/majoo-provider/MajooProvider.js";
 
 function MajooProvider({
   children,
@@ -2901,14 +2920,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$B,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$B,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -2922,7 +2941,7 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-var _jsxFileName$t = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\alert\\AlertProvider.js";
+var _jsxFileName$A = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/AlertProvider.js";
 const StatusContext = /*#__PURE__*/createContext();
 
 const AlertProvider = ({
@@ -2939,14 +2958,14 @@ const AlertProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$A,
       lineNumber: 9,
       columnNumber: 5
     }
   }, children);
 };
 
-var _jsxFileName$s = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\alert\\Alert.js";
+var _jsxFileName$z = "/home/omegalord666/work/majoo-ui/packages/react/src/components/alert/Alert.js";
 const AlertStyle = styled('div', {
   backgroundColor: 'white',
   borderWidth: 0,
@@ -3074,26 +3093,28 @@ const AlertStyle = styled('div', {
     variant: 'subtle'
   }
 });
-const AlertTitle = styled('h3', {
-  fontWeight: 'bold',
-  fontSize: '$section-title'
-});
-const AlertDescription = styled('p', {
-  fontSize: '$section-sub-title'
-});
+const AlertTitle = styled(Heading$1);
+AlertTitle.defaultProps = {
+  as: 'h3',
+  heading: 'pageTitle'
+};
+const AlertDescription = styled(Text$1);
+AlertDescription.defaultProps = {
+  as: 'p'
+};
 const AlertBase = props => {
   return /*#__PURE__*/React__default.createElement(AlertProvider, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 158,
+      fileName: _jsxFileName$z,
+      lineNumber: 163,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(AlertContent, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 159,
+      fileName: _jsxFileName$z,
+      lineNumber: 164,
       columnNumber: 7
     }
   }), props.children));
@@ -3110,8 +3131,8 @@ const AlertContent = props => {
   return /*#__PURE__*/React__default.createElement(AlertStyle, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 170,
+      fileName: _jsxFileName$z,
+      lineNumber: 175,
       columnNumber: 10
     }
   }));
@@ -3134,8 +3155,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
-            lineNumber: 179,
+            fileName: _jsxFileName$z,
+            lineNumber: 184,
             columnNumber: 16
           }
         });
@@ -3145,8 +3166,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : ' #DF2A36',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
-            lineNumber: 181,
+            fileName: _jsxFileName$z,
+            lineNumber: 186,
             columnNumber: 16
           }
         });
@@ -3156,8 +3177,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#0197F4',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
-            lineNumber: 183,
+            fileName: _jsxFileName$z,
+            lineNumber: 188,
             columnNumber: 16
           }
         });
@@ -3167,8 +3188,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : ' #FE7F2D',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
-            lineNumber: 185,
+            fileName: _jsxFileName$z,
+            lineNumber: 190,
             columnNumber: 16
           }
         });
@@ -3178,8 +3199,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$s,
-            lineNumber: 187,
+            fileName: _jsxFileName$z,
+            lineNumber: 192,
             columnNumber: 16
           }
         });
@@ -3189,8 +3210,8 @@ const AlertIconBase = props => {
   return /*#__PURE__*/React__default.createElement(AlertIconStyle, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$s,
-      lineNumber: 190,
+      fileName: _jsxFileName$z,
+      lineNumber: 195,
       columnNumber: 10
     }
   }), Icon(statusAlert));
@@ -3214,7 +3235,7 @@ AlertDescription.displayName = 'AlertDescription';
 AlertTitle.displayName = 'AlertTitle';
 
 const _excluded$n = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-var _jsxFileName$r = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
+var _jsxFileName$y = "/home/omegalord666/work/majoo-ui/packages/react/src/components/card/Card.js";
 const CardComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -3275,7 +3296,7 @@ const StyledTitle$1 = styled('div', {
   color: '$textSecondary',
   fontWeight: 600
 });
-const StyledIcon$2 = styled('span', {
+const StyledIcon$1 = styled('span', {
   background: '$bgGreen',
   borderRadius: '50%',
   width: '34px',
@@ -3362,7 +3383,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$y,
       lineNumber: 103,
       columnNumber: 5
     }
@@ -3370,30 +3391,30 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$y,
       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$y,
       lineNumber: 118,
       columnNumber: 13
     }
-  }, /*#__PURE__*/React__default.createElement(StyledIcon$2, {
+  }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
     background: color,
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$y,
       lineNumber: 119,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$y,
       lineNumber: 125,
       columnNumber: 13
     }
@@ -3420,6 +3441,8 @@ Card.defaultProps = {
 };
 
 const Text = styled('p', {
+  margin: 0,
+  padding: 0,
   variants: {
     variant: {
       link: {
@@ -3514,10 +3537,11 @@ Text.propTypes = {
 Text.defaultProps = {
   as: 'p'
 };
+var Text$1 = Text;
 
-Text.displayName = 'Text';
+Text$1.displayName = 'Text';
 
-const Heading = styled(Text, {
+const Heading = styled(Text$1, {
   variants: {
     heading: {
       h1: {
@@ -3587,10 +3611,11 @@ Heading.defaultProps = {
   heading: 'h1',
   as: 'h1'
 };
+var Heading$1 = Heading;
 
-Heading.displayName = "Heading";
+Heading$1.displayName = "Heading";
 
-const Paragraph = styled(Text, {
+const Paragraph = styled(Text$1, {
   variants: {
     paragraph: {
       shortContentBold: {
@@ -3658,7 +3683,7 @@ function __rest(s, e) {
 }
 
 const _excluded$m = ["children"];
-var _jsxFileName$q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+var _jsxFileName$x = "/home/omegalord666/work/majoo-ui/packages/react/src/components/breadcrumb/Breadcrumb.js";
 const BreadcrumbStyle = styled('nav', {
   wordWrap: 'break-word',
   '& li+li:before': {
@@ -3679,7 +3704,7 @@ const BreadcrumbItem = styled('li', {
   display: 'inline-flex',
   alignItems: 'center'
 });
-const BreadcrumbLinkStyle = styled(Text, {
+const BreadcrumbLinkStyle = styled(Text$1, {
   '&:hover': {
     textDecoration: 'underline'
   },
@@ -3704,7 +3729,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$x,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -3721,14 +3746,14 @@ const BreadcrumbBase = _ref => {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$x,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$x,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -3750,7 +3775,7 @@ const BreadcrumbLink = props => {
   return jsx(BreadcrumbLinkBase, Object.assign({}, props), void 0);
 };
 
-const Badge = styled(Text, {
+const Badge = styled(Text$1, {
   // Reset
   alignItems: 'center',
   appearance: 'none',
@@ -3935,7 +3960,7 @@ Badge.defaultProps = {
 Badge.displayName = 'Badge';
 
 const _excluded$l = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-var _jsxFileName$p = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+var _jsxFileName$w = "/home/omegalord666/work/majoo-ui/packages/react/src/components/avatar/Avatar.js";
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -3966,7 +3991,7 @@ const StyledFallback = styled(AvatarPrimitive.Fallback, {
   lineHeight: 1,
   fontWeight: 600
 });
-const StyledIcon$1 = styled('div', {
+const StyledIcon = styled('div', {
   fontSize: '20px'
 });
 function Avatar(_ref) {
@@ -3988,7 +4013,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$w,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -3998,7 +4023,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$w,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4006,21 +4031,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$w,
       lineNumber: 48,
       columnNumber: 7
     }
-  }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon$1, {
+  }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$w,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$w,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4038,7 +4063,7 @@ Avatar.defaultProps = {
 };
 
 const _excluded$k = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-var _jsxFileName$o = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+var _jsxFileName$v = "/home/omegalord666/work/majoo-ui/packages/react/src/components/image/Image.js";
 const StyledImage = styled('img', {
   display: 'inline-block',
   alignItems: 'center',
@@ -4076,7 +4101,7 @@ function Image(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$o,
+      fileName: _jsxFileName$v,
       lineNumber: 20,
       columnNumber: 9
     }
@@ -4097,7 +4122,7 @@ Image.defaultProps = {
 };
 
 const _excluded$j = ["children", "label", "color", "contentCss", "withClick"];
-var _jsxFileName$n = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+var _jsxFileName$u = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tooltip/Tooltip.js";
 const slideUpAndFade$1 = keyframes({
   '0%': {
     opacity: 0,
@@ -4209,7 +4234,7 @@ const Tooltip = _ref => {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$u,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4217,7 +4242,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$u,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4225,7 +4250,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$u,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4234,7 +4259,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? dark : ligth,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$u,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4242,7 +4267,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$u,
       lineNumber: 95,
       columnNumber: 9
     }
@@ -4259,7 +4284,7 @@ Tooltip.defaultProps = {
 };
 
 const _excluded$i = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$m = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+var _jsxFileName$t = "/home/omegalord666/work/majoo-ui/packages/react/src/components/progress/Progress.js";
 const StyledProgress = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -4393,7 +4418,7 @@ function Progress(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$m,
+      fileName: _jsxFileName$t,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -4406,7 +4431,7 @@ function Progress(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$m,
+      fileName: _jsxFileName$t,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -4430,8 +4455,8 @@ Progress.defaultProps = {
 };
 
 const _excluded$h = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount"];
-var _jsxFileName$l = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
-const StyledLabel = styled(LabelPrimitive.Root, Text, {
+var _jsxFileName$s = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+const StyledLabel = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
   lineHeight: '$label',
@@ -4467,7 +4492,7 @@ const FormLabel = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$s,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -4477,7 +4502,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$s,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -4486,7 +4511,7 @@ const FormLabel = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$s,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -4501,7 +4526,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$s,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -4509,23 +4534,23 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$s,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$s,
       lineNumber: 57,
       columnNumber: 13
     }
-  }))), maxCount && /*#__PURE__*/React__default.createElement(Text, {
+  }))), maxCount && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "label",
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$s,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -4542,8 +4567,8 @@ FormLabel.propTypes = {
 FormLabel.displayName = 'FormLabel';
 
 const _excluded$g = ["children", "error"];
-var _jsxFileName$k = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
-const StyledHelper = styled(Text, {
+var _jsxFileName$r = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormHelper/Helper.js";
+const StyledHelper = styled(Text$1, {
   display: 'inline-block',
   color: '$textSecondary',
   variants: {
@@ -4568,7 +4593,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$k,
+      fileName: _jsxFileName$r,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -4580,9 +4605,9 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$j = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+var _jsxFileName$q = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/CheckOutline.js";
 
-const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
+const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
   xmlSpace: "preserve",
   width: "1em",
@@ -4598,7 +4623,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$j,
+    fileName: _jsxFileName$q,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -4610,7 +4635,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$j,
+    fileName: _jsxFileName$q,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -4622,14 +4647,62 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$j,
+    fileName: _jsxFileName$q,
+    lineNumber: 26,
+    columnNumber: 5
+  }
+}));
+
+var _jsxFileName$p = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/icon/MinusOutline.js";
+
+const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlSpace: "preserve",
+  width: "1em",
+  height: "1em",
+  style: {
+    shapeRendering: 'geometricPrecision',
+    textRendering: 'geometricPrecision',
+    imageRendering: 'optimizeQuality',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd'
+  },
+  viewBox: "0 0 18.22 18.22"
+}, props, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$p,
+    lineNumber: 4,
+    columnNumber: 3
+  }
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M15.61 0H2.6A2.595 2.595 0 0 0 0 2.6v13.01a2.595 2.595 0 0 0 2.6 2.6h13.01a2.595 2.595 0 0 0 2.6-2.6V2.6a2.595 2.595 0 0 0-2.6-2.6z",
+  style: {
+    fill: 'none',
+    fillRule: 'nonzero'
+  },
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$p,
+    lineNumber: 19,
+    columnNumber: 5
+  }
+}), /*#__PURE__*/React.createElement("path", {
+  style: {
+    fill: '#fefefe',
+    fillRule: 'nonzero'
+  },
+  d: "M14.31 10.41H3.9v-2.6h10.41z",
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$p,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-const _excluded$f = ["id", "isChecked", "isIndeterminate", "isDisabled", "onCheckedChange", "label"];
-var _jsxFileName$i = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
+const _excluded$f = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label"];
+var _jsxFileName$o = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputCheckbox/InputCheckbox.js";
 const StyledIndicator$1 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -4678,89 +4751,107 @@ const StyledCheckbox = styled(CheckboxPrimitive.Root, {
   }
 });
 
-const InputCheckbox = _ref => {
+const Checkbox = _ref => {
   let {
     id,
-    isChecked,
-    isIndeterminate,
-    isDisabled,
-    onCheckedChange,
-    label
+    checked,
+    indeterminate,
+    disabled,
+    onCheckedChange
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
-  return /*#__PURE__*/React__default.createElement(Flex, {
-    align: "start",
-    gap: 4,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 57,
-      columnNumber: 5
-    }
-  }, /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({
+  return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({
     id: id,
-    disabled: isDisabled,
-    checked: isChecked,
+    disabled: disabled,
+    checked: checked || indeterminate,
     onCheckedChange: onCheckedChange
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 58,
-      columnNumber: 7
+      fileName: _jsxFileName$o,
+      lineNumber: 56,
+      columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 59,
-      columnNumber: 9
+      fileName: _jsxFileName$o,
+      lineNumber: 63,
+      columnNumber: 5
     }
-  }, isIndeterminate ? /*#__PURE__*/React__default.createElement(MinusOutline, {
+  }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 59,
-      columnNumber: 45
+      fileName: _jsxFileName$o,
+      lineNumber: 63,
+      columnNumber: 39
     }
-  }) : /*#__PURE__*/React__default.createElement(CheckOutline, {
+  }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 59,
-      columnNumber: 64
+      fileName: _jsxFileName$o,
+      lineNumber: 63,
+      columnNumber: 58
     }
-  }))), /*#__PURE__*/React__default.createElement(FormLabel, {
-    htmlFor: id,
+  })));
+};
+
+const InputCheckbox = _ref2 => {
+  let props = Object.assign({}, _ref2);
+  return props.label ? /*#__PURE__*/React__default.createElement(Flex, {
+    align: "start",
+    gap: 4,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$o,
+      lineNumber: 69,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$o,
+      lineNumber: 70,
+      columnNumber: 7
+    }
+  })), /*#__PURE__*/React__default.createElement(FormLabel, {
+    htmlFor: props.id,
     css: {
       fontSize: '$long-content-regular',
       lineHeight: '$long-content-regular',
       letterSpacing: '$long-content-regular',
       fontWeight: '400',
-      color: isDisabled ? '$textDisable' : '$textPrimary',
+      color: props.disabled ? '$textDisable' : '$textPrimary',
       cursor: 'default'
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 61,
+      fileName: _jsxFileName$o,
+      lineNumber: 71,
       columnNumber: 7
     }
-  }, label));
+  }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$o,
+      lineNumber: 86,
+      columnNumber: 5
+    }
+  }));
 };
 
 InputCheckbox.propTypes = {
-  isChecked: PropTypes.bool,
-  isIndeterminate: PropTypes.bool,
-  isDisabled: PropTypes.bool,
+  checked: PropTypes.bool,
+  indeterminate: PropTypes.bool,
+  disabled: PropTypes.bool,
   onCheckedChange: PropTypes.func,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 InputCheckbox.displayName = 'InputCheckbox';
 
 const _excluded$e = ["children", "size"];
-var _jsxFileName$h = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+var _jsxFileName$n = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputGroup/InputGroup.js";
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -4897,7 +4988,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$h,
+      fileName: _jsxFileName$n,
       lineNumber: 143,
       columnNumber: 10
     }
@@ -4924,7 +5015,7 @@ InputGroup.propTypes = {
   disabled: PropTypes.bool
 };
 
-const InputAddon = styled(Text, {
+const InputAddon = styled(Text$1, {
   backgroundColor: '$formDisable',
   flex: '0 0 auto',
   width: 'auto',
@@ -4990,7 +5081,7 @@ InputRightAddon.defaultProps = {
   as: 'div'
 };
 
-const InputLetter = styled(Text, {
+const InputLetter = styled(Text$1, {
   flex: '0 0 auto',
   width: 'auto',
   display: 'flex',
@@ -5200,7 +5291,7 @@ InputRadioGroup.propTypes = {
 InputRadioGroup.displayName = 'InputRadioGroup';
 
 const _excluded$d = ["id", "disabled"];
-var _jsxFileName$g = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
+var _jsxFileName$m = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputRadio/InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
@@ -5284,7 +5375,7 @@ const InputRadio = _ref => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$m,
       lineNumber: 82,
       columnNumber: 3
     }
@@ -5294,14 +5385,14 @@ const InputRadio = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$m,
       lineNumber: 83,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$m,
       lineNumber: 84,
       columnNumber: 7
     }
@@ -5318,7 +5409,7 @@ const InputRadio = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$m,
       lineNumber: 86,
       columnNumber: 5
     }
@@ -5362,7 +5453,7 @@ InputRightElement.propTypes = {
 InputRightElement.name = 'InputRightElement';
 
 const _excluded$c = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
-var _jsxFileName$f = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
+var _jsxFileName$l = "/home/omegalord666/work/majoo-ui/packages/react/src/components/tag/Tag.js";
 const TagComponent = styled('span', {
   boxSizing: 'border-box',
   color: '$white',
@@ -5450,21 +5541,21 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$l,
       lineNumber: 54,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$l,
       lineNumber: 63,
       columnNumber: 33
     }
   }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$l,
       lineNumber: 65,
       columnNumber: 34
     }
@@ -5483,10 +5574,13 @@ Tag.defaultProps = {
   size: 'sm'
 };
 
-const _excluded$b = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly"];
-var _jsxFileName$e = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
+const _excluded$b = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly", "max"];
+var _jsxFileName$k = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputTags/InputTags.js";
 const InputTagsComponent = styled('div', {
   display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  width: '100%',
   margin: '0',
   appearance: 'none',
   backgroundolor: 'none',
@@ -5495,7 +5589,6 @@ const InputTagsComponent = styled('div', {
   borderRadius: '$lg',
   color: '$textPrimary',
   lineHeight: '$short-content-regular',
-  width: '100%',
   fontSize: '$short-content-regular',
   fontWeight: '400',
   '&:focus': {
@@ -5525,11 +5618,13 @@ const InputTagsComponent = styled('div', {
     },
     size: {
       sm: {
-        height: 32,
+        height: 'auto',
+        minheight: 32,
         padding: '2px $spacing-05'
       },
       lg: {
-        height: 40,
+        height: 'auto',
+        minheight: 40,
         padding: '6px $spacing-05'
       }
     },
@@ -5546,8 +5641,18 @@ const InputTagsComponent = styled('div', {
     }
   }
 });
+const TagContainer = styled(Box$1, {
+  display: 'flex',
+  position: 'relative',
+  flexWrap: 'wrap',
+  maxWidth: '100%'
+});
 const Input$2 = styled('input', {
   display: 'flex',
+  position: 'relative',
+  flex: 'auto',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
   appearance: 'none',
   backgroundolor: 'none',
   border: 'none',
@@ -5556,11 +5661,10 @@ const Input$2 = styled('input', {
   cursor: 'text',
   outline: 'none',
   letterSpacing: '$short-content-regular',
-  width: '100%',
   '&:disabled': {
     backgroundColor: 'transparent',
     color: '$textDisable',
-    cursor: 'default',
+    cursor: 'not-allowed',
     '&::placeholder': {
       color: '$textDisable'
     }
@@ -5587,23 +5691,24 @@ function TagsInput(_ref) {
     onChange,
     value,
     disabled,
-    readOnly
+    readOnly,
+    max
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
   const [tags, setTags] = React__default.useState(value || []);
 
   const addTags = event => {
-    if (event.key === 'Enter' && event.target.value !== '' && readOnly === false) {
+    if (event.key === 'Enter' && event.target.value !== '' && readOnly === false && max !== tags.length) {
       setTags([...tags, event.target.value]);
       event.target.value = '';
     }
   };
 
-  const removeTags = index => {
+  const removeTags = (index, key) => {
     if (disabled || readOnly) {
       return tags;
-    } else {
+    } else if (key === 'removeTag' || key === 'Backspace') {
       setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
     }
   };
@@ -5619,27 +5724,26 @@ function TagsInput(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$e,
-      lineNumber: 105,
+      fileName: _jsxFileName$k,
+      lineNumber: 129,
       columnNumber: 5
     }
-  }), /*#__PURE__*/React__default.createElement(Flex$1, {
-    gap: 3,
+  }), /*#__PURE__*/React__default.createElement(TagContainer, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$e,
-      lineNumber: 115,
+      fileName: _jsxFileName$k,
+      lineNumber: 139,
       columnNumber: 7
     }
   }, tags.map((tag, index) => /*#__PURE__*/React__default.createElement(Tag, {
     key: index,
-    onClick: () => removeTags(index),
+    onClick: () => removeTags(index, 'removeTag'),
     rightIcon: /*#__PURE__*/React__default.createElement(CloseOutline, {
       size: 10,
       __self: this,
       __source: {
-        fileName: _jsxFileName$e,
-        lineNumber: 120,
+        fileName: _jsxFileName$k,
+        lineNumber: 144,
         columnNumber: 24
       }
     }),
@@ -5647,25 +5751,27 @@ function TagsInput(_ref) {
       background: disabled ? '$btnDisable' : '$bgGray',
       border: 'none',
       color: '$textContent',
-      cursor: disabled ? 'not-allowed' : 'pointer'
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      margin: '0 5px 2px 0'
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$e,
-      lineNumber: 117,
+      fileName: _jsxFileName$k,
+      lineNumber: 141,
       columnNumber: 11
     }
   }, tag))), /*#__PURE__*/React__default.createElement(Input$2, {
     type: "text",
     onKeyUp: event => addTags(event),
+    onKeyDown: event => removeTags(tags.length - 1, event.key),
     placeholder: placeholder,
     onChange: onChange,
     disabled: disabled,
     readOnly: readOnly,
     __self: this,
     __source: {
-      fileName: _jsxFileName$e,
-      lineNumber: 132,
+      fileName: _jsxFileName$k,
+      lineNumber: 157,
       columnNumber: 7
     }
   }));
@@ -5678,7 +5784,8 @@ TagsInput.propTypes = {
   value: PropTypes.array,
   placeholder: PropTypes.string,
   onChange: PropTypes.func,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  max: PropTypes.number
 };
 TagsInput.defaultProps = {
   size: 'lg',
@@ -5689,7 +5796,7 @@ TagsInput.defaultProps = {
 };
 
 const _excluded$a = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-var _jsxFileName$d = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
+var _jsxFileName$j = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSwitch/InputSwitch.js";
 const StyledThumb$1 = styled(SwitchPrimitive.Thumb, {
   display: 'block',
   width: '16px',
@@ -5772,14 +5879,14 @@ const InputSwitch = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$j,
       lineNumber: 66,
       columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledThumb$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$j,
       lineNumber: 74,
       columnNumber: 5
     }
@@ -5797,53 +5904,156 @@ InputSwitch.propTypes = {
 };
 InputSwitch.displayName = 'InputSwitch';
 
-const _excluded$9 = ["size", "onChange"];
-var _jsxFileName$c = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
-
-const InputSearchbox = _ref => {
-  let {
-    size,
-    onChange
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
-
-  const [value, setValue] = React__default.useState('');
-  const handleChange = React__default.useCallback(e => {
-    setValue(e.target.value);
-
-    if (onChange) {
-      onChange(e);
-    }
-  }, [onChange]);
-
-  const handleClearButtonClick = e => {
-    e.preventDefault();
-    setValue('');
-    onChange(e);
-  };
+var _jsxFileName$i = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+
+const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: props.size,
+  height: props.size,
+  viewBox: "0 0 24 24",
+  fill: "none"
+}, props, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$i,
+    lineNumber: 4,
+    columnNumber: 3
+  }
+}), /*#__PURE__*/React.createElement("mask", {
+  id: "path-1-inside-1_2883_7918",
+  fill: "white",
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$i,
+    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$i,
+    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$i,
+    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$i,
+    lineNumber: 18,
+    columnNumber: 5
+  }
+}));
+
+SvgCloseFilled.defaultProps = {
+  color: '#404545',
+  size: 24
+};
+
+var _jsxFileName$h = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+
+const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
+  width: props.size,
+  height: props.size,
+  viewBox: "0 0 24 24",
+  fill: "none"
+}, props, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$h,
+    lineNumber: 4,
+    columnNumber: 3
+  }
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: 11.3091,
+  cy: 11.3091,
+  r: 6.30911,
+  stroke: props.color,
+  strokeWidth: 2,
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$h,
+    lineNumber: 5,
+    columnNumber: 5
+  }
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M16.5249 15.1049C16.1345 14.7142 15.5014 14.7139 15.1106 15.1042C14.7199 15.4945 14.7196 16.1277 15.1099 16.5184L16.5249 15.1049ZM19.2939 20.7067C19.6842 21.0974 20.3173 21.0977 20.7081 20.7074C21.0988 20.3171 21.0991 19.6839 20.7088 19.2932L19.2939 20.7067ZM15.1099 16.5184L19.2939 20.7067L20.7088 19.2932L16.5249 15.1049L15.1099 16.5184Z",
+  fill: props.color,
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$h,
+    lineNumber: 6,
+    columnNumber: 5
+  }
+}));
+
+SvgSearchOutline.defaultProps = {
+  color: '#404545',
+  size: 24
+};
+
+const _excluded$9 = ["size", "onChange"];
+var _jsxFileName$g = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+
+const InputSearchbox = _ref => {
+  let {
+    size,
+    onChange
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+
+  const [value, setValue] = React__default.useState('');
+  const handleChange = React__default.useCallback(e => {
+    setValue(e.target.value);
+
+    if (onChange) {
+      onChange(e);
+    }
+  }, [onChange]);
+
+  const handleClearButtonClick = e => {
+    e.preventDefault();
+    setValue('');
+    onChange(e);
+  };
 
   return /*#__PURE__*/React__default.createElement(InputGroup, {
     size: size,
     css: props.css,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 27,
+      fileName: _jsxFileName$g,
+      lineNumber: 28,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
-    children: /*#__PURE__*/React__default.createElement(SearchOutline, {
+    children: /*#__PURE__*/React__default.createElement(SvgSearchOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 28,
+        fileName: _jsxFileName$g,
+        lineNumber: 29,
         columnNumber: 35
       }
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 28,
+      fileName: _jsxFileName$g,
+      lineNumber: 29,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(InputText, _extends({
@@ -5852,27 +6062,34 @@ const InputSearchbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 29,
+      fileName: _jsxFileName$g,
+      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$g,
+        lineNumber: 31,
+        columnNumber: 55
+      }
+    }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 30,
-        columnNumber: 52
+        fileName: _jsxFileName$g,
+        lineNumber: 31,
+        columnNumber: 73
       }
     }),
     onClick: handleClearButtonClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 30,
-      columnNumber: 23
+      fileName: _jsxFileName$g,
+      lineNumber: 31,
+      columnNumber: 7
     }
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null));
+  }));
 };
 
 InputSearchbox.propTypes = {
@@ -6352,8 +6569,8 @@ $$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 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
-const Box$1 = styled('div', {
+var _jsxFileName$f = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelect/InputSelect.js";
+const Box = styled('div', {
   margin: 0,
   flexDirection: 'column',
   display: 'block',
@@ -6369,7 +6586,7 @@ const Box$1 = styled('div', {
   color: '$textPrimary',
   width: '100%'
 });
-const BoxSelect$1 = styled('div', {
+const BoxSelect = styled('div', {
   margin: 0,
   display: 'flex',
   position: 'relative',
@@ -6448,7 +6665,7 @@ const Input$1 = styled('input', {
     color: '$textDisable'
   }
 });
-const IconContainer$1 = styled('div', {
+const IconContainer = styled('div', {
   flex: ' 0 0 auto',
   width: 'auto',
   display: 'flex',
@@ -6456,7 +6673,7 @@ const IconContainer$1 = styled('div', {
   paddingRight: '$spacing-05',
   cursor: 'pointer'
 });
-const BoxItem$1 = styled('div', {
+const BoxItem = styled('div', {
   display: 'none',
   overflow: 'auto',
   zIndex: 1,
@@ -6469,7 +6686,7 @@ const BoxItem$1 = styled('div', {
   top: '100%',
   left: '0px'
 });
-const SelectOption$1 = styled('div', {
+const SelectOption = styled('div', {
   flexDirection: 'column',
   display: 'block',
   borderRadius: '$lg',
@@ -6477,7 +6694,7 @@ const SelectOption$1 = styled('div', {
   overflowY: 'auto',
   height: '100%'
 });
-const SelectItem$1 = styled('div', {
+const SelectItem = styled('div', {
   overflow: 'hidden',
   borderBottom: '1px solid $bgBorder',
   padding: '$spacing-05 0',
@@ -6485,10 +6702,10 @@ const SelectItem$1 = styled('div', {
   cursor: 'pointer',
   lineHeight: '20px'
 });
-const StyledDiv$1 = styled('div', {
+const StyledDiv = styled('div', {
   color: '$textDisable'
 });
-function Select(_ref) {
+function Select$1(_ref) {
   let {
     placeholder,
     option,
@@ -6518,7 +6735,7 @@ function Select(_ref) {
     initialSelectedItem: value !== undefined ? value : null,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 149,
       columnNumber: 5
     }
@@ -6533,21 +6750,21 @@ function Select(_ref) {
     highlightedIndex,
     initialSelectedItem,
     inputValue
-  }) => /*#__PURE__*/React.createElement(Box$1, {
+  }) => /*#__PURE__*/React.createElement(Box, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 167,
       columnNumber: 9
     }
-  }, /*#__PURE__*/React.createElement(BoxSelect$1, _extends({}, getRootProps({}, {
+  }, /*#__PURE__*/React.createElement(BoxSelect, _extends({}, getRootProps({}, {
     suppressRefError: true
   }), {
     size: size,
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 168,
       columnNumber: 11
     }
@@ -6557,7 +6774,7 @@ function Select(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 170,
       columnNumber: 15
     }
@@ -6569,7 +6786,7 @@ function Select(_ref) {
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 171,
       columnNumber: 17
     }
@@ -6578,7 +6795,7 @@ function Select(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 178,
       columnNumber: 15
     }
@@ -6586,7 +6803,7 @@ function Select(_ref) {
     color: "primary",
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 180,
       columnNumber: 19
     }
@@ -6594,14 +6811,14 @@ function Select(_ref) {
     color: "primary",
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 182,
       columnNumber: 19
     }
-  }, placeholder)), /*#__PURE__*/React.createElement(IconContainer$1, _extends({}, getToggleButtonProps(), {
+  }, placeholder)), /*#__PURE__*/React.createElement(IconContainer, _extends({}, getToggleButtonProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 186,
       columnNumber: 13
     }
@@ -6609,31 +6826,31 @@ function Select(_ref) {
     color: iconColor,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 187,
       columnNumber: 15
     }
-  }))), /*#__PURE__*/React.createElement(BoxItem$1, {
+  }))), /*#__PURE__*/React.createElement(BoxItem, {
     css: {
       display: isOpen ? 'block' : 'none'
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 190,
       columnNumber: 11
     }
-  }, item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption$1, _extends({}, getMenuProps(), {
+  }, item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 192,
       columnNumber: 15
     }
   }), item.map((item, index) => {
     var _item$value;
 
-    return /*#__PURE__*/React.createElement(SelectItem$1, _extends({}, getItemProps({
+    return /*#__PURE__*/React.createElement(SelectItem, _extends({}, getItemProps({
       item
     }), {
       key: (_item$value = item.value) != null ? _item$value : index,
@@ -6644,28 +6861,28 @@ function Select(_ref) {
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$f,
         lineNumber: 194,
         columnNumber: 19
       }
     }), item.name);
-  })) : /*#__PURE__*/React.createElement(SelectOption$1, {
+  })) : /*#__PURE__*/React.createElement(SelectOption, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 208,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv$1, {
+  }, /*#__PURE__*/React.createElement(StyledDiv, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$f,
       lineNumber: 209,
       columnNumber: 17
     }
   }, "Item yang anda cari tidak ada")))));
 }
-Select.propTypes = {
+Select$1.propTypes = {
   placeholder: PropTypes.string,
   option: PropTypes.array.isRequired,
   onChange: PropTypes.func,
@@ -6675,7 +6892,7 @@ Select.propTypes = {
   value: PropTypes.object,
   iconColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
-Select.defaultProps = {
+Select$1.defaultProps = {
   placeholder: 'Select Item',
   size: 'lg',
   disabled: false,
@@ -6704,8 +6921,56 @@ $({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') },
   }
 });
 
-var _jsxFileName$a = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
-const Box = styled('div', {
+var _jsxFileName$e = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelectTag/icon/CheckOutline.js";
+
+const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlSpace: "preserve",
+  width: "1em",
+  height: "1em",
+  style: {
+    shapeRendering: 'geometricPrecision',
+    textRendering: 'geometricPrecision',
+    imageRendering: 'optimizeQuality',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd'
+  },
+  viewBox: "0 0 13.06 13.06"
+}, props, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$e,
+    lineNumber: 4,
+    columnNumber: 3
+  }
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M0 2.5A2.5 2.5 0 0 1 2.5 0h8.05a2.5 2.5 0 0 1 2.5 2.5v8.05a2.5 2.5 0 0 1-2.5 2.5H2.5c-.66 0-1.3-.26-1.77-.73S0 11.21 0 10.55V2.5z",
+  style: {
+    fill: props.color,
+    fillRule: 'nonzero'
+  },
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$e,
+    lineNumber: 19,
+    columnNumber: 5
+  }
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M10.12 4.53a.47.47 0 0 0 .14-.33.47.47 0 0 0-.14-.33.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14L5.13 8.2 3.6 6.66a.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14.47.47 0 0 0-.14.33c0 .12.05.24.14.33l1.87 1.87c.04.04.09.08.15.1.06.02.12.04.18.04s.12-.01.18-.04c.06-.02.11-.06.15-.1l4.66-4.66z",
+  style: {
+    fill: '#fefefe',
+    fillRule: 'nonzero'
+  },
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName$e,
+    lineNumber: 26,
+    columnNumber: 5
+  }
+}));
+
+var _jsxFileName$d = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+const Wrapper = styled('div', {
   margin: 0,
   flexDirection: 'column',
   display: 'block',
@@ -6721,10 +6986,12 @@ const Box = styled('div', {
   color: '$textPrimary',
   width: '100%'
 });
-const BoxSelect = styled('div', {
+const Select = styled('div', {
   margin: 0,
   display: 'flex',
   position: 'relative',
+  flexWrap: 'wrap',
+  width: '100%',
   appearance: 'none',
   background: 'none',
   boxSizing: 'border-box',
@@ -6740,11 +7007,13 @@ const BoxSelect = styled('div', {
   variants: {
     size: {
       sm: {
-        height: 32,
+        height: 'auto',
+        minheight: 32,
         padding: '2px $spacing-05'
       },
       lg: {
-        height: 40,
+        height: 'auto',
+        minheight: 40,
         padding: '6px $spacing-05'
       }
     },
@@ -6763,10 +7032,20 @@ const BoxSelect = styled('div', {
     }
   }
 });
-const Input = styled('input', {
+const TagWrapper = styled(Box$1, {
   display: 'flex',
-  width: '100%',
-  height: '100%',
+  position: 'relative',
+  flexWrap: 'wrap',
+  maxWidth: '100%'
+});
+const InputWrapper = styled('div', {
+  display: 'flex',
+  position: 'relative',
+  flex: 'auto',
+  flexWrap: 'wrap',
+  maxWidth: '100%'
+});
+const Input = styled('input', {
   background: 'none',
   outline: 'none',
   border: 'none',
@@ -6777,17 +7056,17 @@ const Input = styled('input', {
     color: '$textDisable'
   }
 });
-const IconContainer = styled('div', {
+const IconWrapper = styled('div', {
   flex: ' 0 0 auto',
   width: 'auto',
   display: 'flex',
   alignItems: 'center',
   cursor: 'pointer'
 });
-const StyledIcon = styled(CaretDownOutline, {
+const IconCaretDown = styled(CaretDownOutline, {
   size: '24px'
 });
-const BoxItem = styled('div', {
+const OptionWrapper = styled('div', {
   display: 'none',
   overflow: 'hidden',
   zIndex: 1,
@@ -6802,7 +7081,7 @@ const BoxItem = styled('div', {
   left: '0px',
   padding: '0 8px'
 });
-const SelectOption = styled('div', {
+const Option = styled('div', {
   flexDirection: 'column',
   display: 'block',
   borderRadius: '$lg',
@@ -6810,16 +7089,22 @@ const SelectOption = styled('div', {
   overflowY: 'auto',
   height: '100%'
 });
-const SelectItem = styled('div', {
+const ItemWrapper = styled(Box$1, {
+  display: 'flex',
+  position: 'relative',
+  flex: 'auto',
+  flexWrap: 'wrap',
+  maxWidth: '100%',
+  cursor: 'pointer',
+  alignItems: 'center'
+});
+const Item$1 = styled('div', {
   overflow: 'hidden',
   borderBottom: '1px solid $bgBorder',
   padding: '8px 0',
   backgroundColor: 'rgb(235, 245, 255)',
-  cursor: 'pointer',
-  lineHeight: '20px'
-});
-const StyledDiv = styled('div', {
-  color: '$textDisable'
+  lineHeight: '20px',
+  marginLeft: '5px'
 });
 function SelectTag({
   placeholder,
@@ -6886,11 +7171,9 @@ function SelectTag({
 
           if (selectedItem) {
             if (selectedItems.includes(selectedItem)) {
-              setInputValue('');
               removeSelectedItem(selectedItem);
               selectItem(null);
             } else {
-              setInputValue('');
               addSelectedItem(selectedItem);
               selectItem(null);
             }
@@ -6899,74 +7182,75 @@ function SelectTag({
           break;
 
         case useCombobox.stateChangeTypes.MenuMouseLeave:
-          closeMenu();
-          break;
       }
     }
   });
   const ref = /*#__PURE__*/React.createRef();
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Wrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 192,
+      fileName: _jsxFileName$d,
+      lineNumber: 209,
       columnNumber: 5
     }
-  }, /*#__PURE__*/React.createElement(BoxSelect, {
+  }, /*#__PURE__*/React.createElement(Select, {
     size: size,
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 193,
+      fileName: _jsxFileName$d,
+      lineNumber: 210,
       columnNumber: 7
     }
-  }, selectedItems.length !== 0 ? /*#__PURE__*/React.createElement(Flex$1, {
-    gap: 3,
+  }, selectedItems.length !== 0 ? /*#__PURE__*/React.createElement(TagWrapper, {
+    disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 195,
+      fileName: _jsxFileName$d,
+      lineNumber: 212,
       columnNumber: 11
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
     ref: ref,
-    key: `selected-item-${index}`
+    key: `selected-item-${selectedItem.value}`
   }, getSelectedItemProps({
     selectedItem,
     index
   }), {
-    onClick: () => removeSelectedItem(selectedItem),
+    onClick: event => {
+      if (disabled === false) {
+        event.stopPropagation();
+        removeSelectedItem(selectedItem);
+      }
+    },
     rightIcon: /*#__PURE__*/React.createElement(CloseOutline, {
       size: 10,
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 202,
+        fileName: _jsxFileName$d,
+        lineNumber: 224,
         columnNumber: 28
       }
     }),
     css: {
       background: '$bgGray',
       border: 'none',
-      color: '$textContent'
+      color: '$textContent',
+      cursor: disabled ? 'not-allowed' : 'pointer'
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 197,
+      fileName: _jsxFileName$d,
+      lineNumber: 214,
       columnNumber: 15
     }
-  }), selectedItem.name))) : null, /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(getToggleButtonProps({
+  }), selectedItem.name))) : null, /*#__PURE__*/React.createElement(InputWrapper, _extends({}, getComboboxProps(getToggleButtonProps({
     tabIndex: 0
   })), {
-    style: {
-      width: '100%'
-    },
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 210,
+      fileName: _jsxFileName$d,
+      lineNumber: 237,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(Input, _extends({
@@ -6977,73 +7261,99 @@ function SelectTag({
   })), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 211,
+      fileName: _jsxFileName$d,
+      lineNumber: 238,
       columnNumber: 11
     }
-  }))), /*#__PURE__*/React.createElement(IconContainer, {
+  }))), /*#__PURE__*/React.createElement(IconWrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 217,
+      fileName: _jsxFileName$d,
+      lineNumber: 244,
       columnNumber: 9
     }
-  }, /*#__PURE__*/React.createElement(StyledIcon, {
+  }, /*#__PURE__*/React.createElement(IconCaretDown, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 218,
+      fileName: _jsxFileName$d,
+      lineNumber: 245,
       columnNumber: 11
     }
-  }))), /*#__PURE__*/React.createElement(BoxItem, {
+  }))), /*#__PURE__*/React.createElement(OptionWrapper, {
     css: {
-      display: isOpen ? 'block' : 'none'
+      display: isOpen && disabled === false ? 'block' : 'none'
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 221,
+      fileName: _jsxFileName$d,
+      lineNumber: 248,
       columnNumber: 7
     }
-  }, item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, _extends({}, getMenuProps(), {
+  }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 223,
+      fileName: _jsxFileName$d,
+      lineNumber: 250,
       columnNumber: 11
     }
-  }), isOpen && item.map((item, index) => {
-    var _item$value;
-
-    return /*#__PURE__*/React.createElement(SelectItem, _extends({
-      key: (_item$value = item.value) != null ? _item$value : index
-    }, getItemProps({
-      item,
-      index
-    }), {
-      css: {
-        backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-        fontWeight: selectedItems.includes(item) ? 'bold' : 'normal'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$a,
-        lineNumber: 226,
-        columnNumber: 17
-      }
-    }), item.name);
-  })) : /*#__PURE__*/React.createElement(SelectOption, {
+  }), isOpen && item.map((item, index) => /*#__PURE__*/React.createElement(ItemWrapper, _extends({
+    key: item.value
+  }, getItemProps({
+    item,
+    index: item.value - 1
+  }), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 242,
-      columnNumber: 11
+      fileName: _jsxFileName$d,
+      lineNumber: 253,
+      columnNumber: 17
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv, {
+  }), /*#__PURE__*/React.createElement(IconWrapper, {
+    css: {
+      width: '16px',
+      height: '16px',
+      border: '1px solid $bgBorder'
+    },
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
-      lineNumber: 243,
+      fileName: _jsxFileName$d,
+      lineNumber: 260,
+      columnNumber: 19
+    }
+  }, selectedItems.includes(item) ? /*#__PURE__*/React.createElement(CheckOutline, {
+    color: colors.iconGreen,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$d,
+      lineNumber: 261,
+      columnNumber: 53
+    }
+  }) : null), /*#__PURE__*/React.createElement(Item$1, {
+    css: {
+      backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+      fontWeight: selectedItems.includes(item) ? 'bold' : 'normal'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$d,
+      lineNumber: 263,
+      columnNumber: 19
+    }
+  }, item.name)))) : /*#__PURE__*/React.createElement(Option, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$d,
+      lineNumber: 275,
+      columnNumber: 11
+    }
+  }, /*#__PURE__*/React.createElement(Box$1, {
+    css: {
+      color: '$textDisable'
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$d,
+      lineNumber: 276,
       columnNumber: 13
     }
   }, "Item yang anda cari tidak ada"))));
@@ -7141,7 +7451,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 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
+var _jsxFileName$c = "/home/omegalord666/work/majoo-ui/packages/react/src/components/slider/Slider.js";
 const StyledSlider = styled$1(SliderPrimitive.Root, {
   position: 'relative',
   display: 'flex',
@@ -7423,7 +7733,7 @@ function Slider(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$c,
       lineNumber: 160,
       columnNumber: 5
     }
@@ -7432,7 +7742,7 @@ function Slider(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$c,
       lineNumber: 181,
       columnNumber: 7
     }
@@ -7440,7 +7750,7 @@ function Slider(_ref) {
     color: color,
     __self: this,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$c,
       lineNumber: 182,
       columnNumber: 9
     }
@@ -7449,7 +7759,7 @@ function Slider(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$c,
       lineNumber: 184,
       columnNumber: 7
     }
@@ -7549,7 +7859,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 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\buttonGroup\\ButtonGroup.js";
+var _jsxFileName$b = "/home/omegalord666/work/majoo-ui/packages/react/src/components/buttonGroup/ButtonGroup.js";
 const ButtonGroupComponent = styled(ToggleGroupPrimitive.Root, {
   display: 'inline-flex',
   borderRadius: '$md',
@@ -7691,7 +8001,7 @@ function ButtonGroup$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$b,
       lineNumber: 111,
       columnNumber: 5
     }
@@ -7744,21 +8054,21 @@ function ButtonGroupItem(_ref2) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$b,
       lineNumber: 164,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$b,
       lineNumber: 172,
       columnNumber: 33
     }
   }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$b,
       lineNumber: 174,
       columnNumber: 34
     }
@@ -7777,7 +8087,7 @@ ButtonGroupItem.defaultProps = {
 };
 
 const _excluded$5 = ["children", "value"];
-var _jsxFileName$7 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\notificationBadge.js";
+var _jsxFileName$a = "/home/omegalord666/work/majoo-ui/packages/react/src/components/notificationBadge/notificationBadge.js";
 const NotificationBadgeRootStyle = styled('span', {
   position: 'relative',
   display: 'inline-flex',
@@ -7908,7 +8218,7 @@ const NotificationBadge = _ref => {
   return /*#__PURE__*/React__default.createElement(NotificationBadgeRootStyle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$7,
+      fileName: _jsxFileName$a,
       lineNumber: 133,
       columnNumber: 5
     }
@@ -7916,7 +8226,7 @@ const NotificationBadge = _ref => {
     children: value,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$7,
+      fileName: _jsxFileName$a,
       lineNumber: 135,
       columnNumber: 7
     }
@@ -7941,7 +8251,7 @@ NotificationBadge.propTypes = {
 };
 
 const _excluded$4 = ["className", "children", "radius", "padding", "width", "height"];
-var _jsxFileName$6 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\paper\\Paper.js";
+var _jsxFileName$9 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/paper/Paper.js";
 const PaperComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -7973,7 +8283,7 @@ const Paper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$9,
       lineNumber: 17,
       columnNumber: 5
     }
@@ -8034,7 +8344,7 @@ const IconButton = styled('button', {
 });
 
 const _excluded$3 = ["children"];
-var _jsxFileName$5 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\modalDialog\\ModalDialog.js";
+var _jsxFileName$8 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/modalDialog/ModalDialog.js";
 const overlayShow = keyframes({
   '0%': {
     opacity: 0
@@ -8083,21 +8393,21 @@ function Content(_ref) {
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Portal, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$8,
       lineNumber: 38,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay$1, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$8,
       lineNumber: 39,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$2, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$8,
       lineNumber: 40,
       columnNumber: 7
     }
@@ -8128,7 +8438,7 @@ const DialogDescription = StyledDescription;
 const DialogClose = DialogPrimitive.Close;
 
 const _excluded$2 = ["children"];
-var _jsxFileName$4 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\drawer\\Drawer.js";
+var _jsxFileName$7 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/drawer/Drawer.js";
 const fadeIn = keyframes({
   from: {
     opacity: '0'
@@ -8169,14 +8479,14 @@ function Drawer(_ref) {
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Root, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$4,
+      fileName: _jsxFileName$7,
       lineNumber: 36,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledOverlay, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$4,
+      fileName: _jsxFileName$7,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -8233,9 +8543,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)',
@@ -8268,7 +8583,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;
@@ -8278,7 +8594,7 @@ const DrawerDescription = DialogPrimitive.Description;
 const _excluded$1 = ["children", "disabled"],
       _excluded2$1 = ["children", "hasContent", "arrowColor"],
       _excluded3$1 = ["children"];
-var _jsxFileName$3 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\accordion\\Accordion.js";
+var _jsxFileName$6 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/accordion/Accordion.js";
 //   from: { height: 0 },
 //   to: { height: 'var(--radix-accordion-content-height)' },
 // });
@@ -8301,7 +8617,7 @@ const Accordion = _ref => {
     disabled: disabled,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$6,
       lineNumber: 20,
       columnNumber: 3
     }
@@ -8364,14 +8680,14 @@ const AccordionTrigger = _ref2 => {
   return /*#__PURE__*/React__default.createElement(StyledHeader, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$6,
       lineNumber: 80,
       columnNumber: 3
     }
   }, /*#__PURE__*/React__default.createElement(StyledTrigger, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$6,
       lineNumber: 81,
       columnNumber: 5
     }
@@ -8380,7 +8696,7 @@ const AccordionTrigger = _ref2 => {
     color: arrowColor,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$6,
       lineNumber: 83,
       columnNumber: 22
     }
@@ -8397,7 +8713,7 @@ const AccordionContent = _ref3 => {
   return /*#__PURE__*/React__default.createElement(StyledContent, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$3,
+      fileName: _jsxFileName$6,
       lineNumber: 91,
       columnNumber: 61
     }
@@ -8431,6 +8747,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$5 = "/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$5,
+      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$5,
+      lineNumber: 27,
+      columnNumber: 9
+    }
+  }, option.label)));
+};
+
 const DateNumber = styled('div', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -8481,10 +8860,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'
@@ -8492,9 +8879,9 @@ const DateNumber = styled('div', {
 });
 DateNumber.displayName = 'DateNumber';
 
-var _jsxFileName$2 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\components\\Calendar.js";
+var _jsxFileName$4 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/Calendar.js";
 
-const getVariant = ({
+const getVariant$1 = ({
   selectable,
   selected,
   date
@@ -8526,7 +8913,7 @@ const getVariant = ({
   return variant;
 };
 
-const ArrowButton = styled('button', {
+const ArrowButton$1 = styled('button', {
   all: 'unset',
   size: '32px',
   borderRadius: '$md',
@@ -8551,13 +8938,14 @@ const ArrowButton = styled('button', {
     cursor: 'default'
   }
 });
-const WeekdayBox = styled(Box$2, {
+const WeekdayBox$1 = styled(Box$1, {
   display: 'inline-block',
   width: '42px',
   textAlign: 'center',
   marginBottom: '$spacing-05'
 });
-const CalendarsContainer = styled(Box$2, {
+const CalendarsContainer$1 = styled(Box$1, {
+  width: '100%',
   padding: '$spacing-04',
   display: 'inline-flex',
   borderRadius: '$lg',
@@ -8565,15 +8953,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$1, {
+  width: '100%',
   position: 'relative',
-  display: 'inline-block'
+  display: 'inline-block',
+  '@md': {
+    maxWidth: '334px',
+    width: 'unset'
+  }
 });
-const TitleButton = styled(Heading, {
+const TitleButton$1 = styled(Heading$1, {
   padding: '2px $spacing-04',
   '&:hover': {
     backgroundColor: '$bgSuccess',
@@ -8597,7 +8992,7 @@ const TitleButton = styled(Heading, {
     }
   }
 });
-const MonthButton = styled(Text, {
+const MonthButton$1 = styled(Text$1, {
   minWidth: '90px',
   textAlign: 'center',
   borderRadius: '$md',
@@ -8630,15 +9025,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,
@@ -8651,7 +9044,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),
@@ -8674,84 +9067,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$4,
+        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$4,
+        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$4,
+        lineNumber: 250,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ChevronLeftOutline, {
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 260,
+        fileName: _jsxFileName$4,
+        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$4,
+        lineNumber: 272,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 287,
+        fileName: _jsxFileName$4,
+        lineNumber: 293,
         columnNumber: 9
       }
     }));
@@ -8766,8 +9159,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 293,
+        fileName: _jsxFileName$4,
+        lineNumber: 299,
         columnNumber: 7
       }
     }, multiDatePicker ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Flex, {
@@ -8779,18 +9172,18 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 296,
+        fileName: _jsxFileName$4,
+        lineNumber: 302,
         columnNumber: 13
       }
-    }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default.createElement(Box$2, {
+    }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default.createElement(Box$1, {
       css: {
         size: '32px'
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 306,
+        fileName: _jsxFileName$4,
+        lineNumber: 312,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Separator, {
@@ -8800,8 +9193,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 312,
+        fileName: _jsxFileName$4,
+        lineNumber: 318,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -8813,18 +9206,18 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 318,
+        fileName: _jsxFileName$4,
+        lineNumber: 324,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__default.createElement(Box$2, {
+    }, /*#__PURE__*/React__default.createElement(Box$1, {
       css: {
         size: '32px'
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 326,
+        fileName: _jsxFileName$4,
+        lineNumber: 332,
         columnNumber: 15
       }
     }), renderTitleButton(1), renderForwardButton())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderBackButton(), renderTitleButton(), renderForwardButton()));
@@ -8838,8 +9231,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 348,
+        fileName: _jsxFileName$4,
+        lineNumber: 354,
         columnNumber: 7
       }
     }, calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
@@ -8856,8 +9249,8 @@ const CalendarBox = ({
           },
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$2,
-            lineNumber: 359,
+            fileName: _jsxFileName$4,
+            lineNumber: 365,
             columnNumber: 17
           }
         });
@@ -8875,11 +9268,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$4,
+          lineNumber: 382,
           columnNumber: 15
         }
       }), date.getDate());
@@ -8895,22 +9288,22 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 392,
+        fileName: _jsxFileName$4,
+        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$4,
+        lineNumber: 406,
         columnNumber: 11
       }
     }, range.start, "-", range.end)));
@@ -8927,22 +9320,22 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 423,
+        fileName: _jsxFileName$4,
+        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$4,
+        lineNumber: 437,
         columnNumber: 11
       }
     }, year)));
@@ -8957,11 +9350,11 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 452,
+        fileName: _jsxFileName$4,
+        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,
@@ -8969,25 +9362,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$4,
+        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$4,
+        lineNumber: 488,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -8997,19 +9390,19 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 483,
+        fileName: _jsxFileName$4,
+        lineNumber: 489,
         columnNumber: 9
       }
     }, weekday)));
   };
 
   const renderFooter = () => {
-    return /*#__PURE__*/React__default.createElement(Box$2, {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 497,
+        fileName: _jsxFileName$4,
+        lineNumber: 503,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -9018,8 +9411,8 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 498,
+        fileName: _jsxFileName$4,
+        lineNumber: 504,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -9027,11 +9420,11 @@ const CalendarBox = ({
       align: "center",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 499,
+        fileName: _jsxFileName$4,
+        lineNumber: 505,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__default.createElement(Heading, {
+    }, /*#__PURE__*/React__default.createElement(Heading$1, {
       heading: "sectionTitle",
       color: selected.length > 1 ? 'primary' : 'disable',
       css: {
@@ -9039,16 +9432,16 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 500,
+        fileName: _jsxFileName$4,
+        lineNumber: 506,
         columnNumber: 11
       }
     }, selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : 'Tanggal belum dipilih'), /*#__PURE__*/React__default.createElement(Flex, {
       gap: 3,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 511,
+        fileName: _jsxFileName$4,
+        lineNumber: 517,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Button$1, {
@@ -9060,8 +9453,8 @@ const CalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 512,
+        fileName: _jsxFileName$4,
+        lineNumber: 518,
         columnNumber: 13
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$1, {
@@ -9072,51 +9465,51 @@ const CalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 522,
+        fileName: _jsxFileName$4,
+        lineNumber: 528,
         columnNumber: 13
       }
     }, "Proses"))));
   };
 
   if (calendars.length) {
-    return /*#__PURE__*/React__default.createElement(CalendarsContainer, {
+    return /*#__PURE__*/React__default.createElement(CalendarsContainer$1, {
       css: containerStyle,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 539,
+        fileName: _jsxFileName$4,
+        lineNumber: 545,
         columnNumber: 7
       }
     }, advanceView, advanceView && /*#__PURE__*/React__default.createElement(Separator, {
       orientation: "vertical",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 542,
+        fileName: _jsxFileName$4,
+        lineNumber: 548,
         columnNumber: 25
       }
-    }), /*#__PURE__*/React__default.createElement(Box$2, {
+    }), /*#__PURE__*/React__default.createElement(Box$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 543,
+        fileName: _jsxFileName$4,
+        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$4,
+        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$4,
+        lineNumber: 553,
         columnNumber: 15
       }
     }, index > 0 && /*#__PURE__*/React__default.createElement(Separator, {
@@ -9126,15 +9519,15 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 549,
+        fileName: _jsxFileName$4,
+        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$4,
+        lineNumber: 562,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Separator, {
@@ -9143,55 +9536,709 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 557,
+        fileName: _jsxFileName$4,
+        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 = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\DatePicker.js";
-const SINGLE_PICKER = 'single';
-const RANGE_PICKER = 'range';
+var _jsxFileName$3 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/MobileCalendar.js";
 
-const CalendarPicker = _ref => {
-  let {
-    multiDatePicker,
-    onChange,
-    onCancel,
-    advanceView,
-    selected,
-    disabled
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+const getVariant = ({
+  selectable,
+  selected,
+  date
+}, month, selectedDate) => {
+  let variant = 'default';
 
-  const [dateValue, setDateValue] = 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';
+  }
+
+  if (selectedDate && selectedDate.length === 2 && selectedDate[0].toDateString() !== selectedDate[1].toDateString()) {
+    if (selectedDate[0].toDateString() === date.toDateString()) {
+      variant = 'start';
+    } else if (selectedDate[1].toDateString() === date.toDateString()) {
+      variant = 'end';
+    } else if (selectedDate[0] < date && date < selectedDate[1]) {
+      variant = 'road';
     }
-  };
+  }
 
-  const dayzedData = useDayzed(Object.assign({}, props, {
-    date: calendarDate,
-    selected: dateValue,
-    monthsToDisplay: multiDatePicker ? 2 : 1,
-    showOutsideDays: true,
-    onDateSelected
-  }));
-  useEffect(() => {
+  return variant;
+};
+
+const ArrowButton = styled('button', {
+  all: 'unset',
+  size: '32px',
+  borderRadius: '$md',
+  backgroundColor: 'transparent',
+  border: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: '$iconPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSuccess',
+    color: '$textGreen'
+  },
+  '&:active': {
+    backgroundColor: '$bgGreen',
+    color: '$white'
+  },
+  cursor: 'pointer',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  }
+});
+const WeekdayBox = styled(Box$1, {
+  display: 'inline-block',
+  width: '45.5px',
+  textAlign: 'center',
+  marginBottom: '$spacing-04',
+  '@md': {
+    width: '32px'
+  }
+});
+const DatePickerContainer = styled(Box$1, {
+  width: '100%',
+  height: '100%',
+  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
+  backgroundColor: '$white',
+  '@md': {
+    width: 'unset'
+  }
+});
+const CalendarsContainer = styled(Box$1, {
+  width: '100%',
+  overflow: 'auto',
+  padding: '$spacing-02 20px $spacing-05',
+  display: 'inline-flex',
+  position: 'absolute',
+  bottom: 0,
+  borderRadius: '$lg',
+  backgroundColor: '$white',
+  // alignItems: 'center',
+  justifyContent: 'center',
+  gap: '$spacing-04',
+  maxHeight: '90vh',
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  '-ms-overflow-style': 'none',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  }
+});
+const CalendarItemContainer = styled(Flex, {
+  height: '100%',
+  paddingBottom: '160px'
+});
+const DateContainer = styled(Box$1, {
+  width: '100%',
+  position: 'relative',
+  display: 'inline-block',
+  '@md': {
+    maxWidth: '334px',
+    width: 'unset'
+  }
+});
+const FooterContainer = styled(Flex, {
+  position: 'relative',
+  backgroundColor: '$white',
+  boxShadow: '0px -1px 8px rgba(0, 0, 0, 0.12)',
+  padding: '$spacing-05 $spacing-04'
+});
+const TitleButton = styled(Heading$1, {
+  padding: '2px $spacing-04',
+  '&:hover': {
+    backgroundColor: '$bgSuccess',
+    color: '$textGreen'
+  },
+  '&:active': {
+    backgroundColor: '$bgGreen',
+    color: '$white'
+  },
+  cursor: 'pointer',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  },
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: 'none'
+      }
+    }
+  }
+});
+const MonthButton = styled(Text$1, {
+  minWidth: '90px',
+  textAlign: 'center',
+  borderRadius: '$md',
+  padding: '$spacing-05 0',
+  cursor: 'pointer',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: '400',
+  color: '$textPrimary',
+  '&:hover': {
+    backgroundColor: '$bgSuccess',
+    color: '$textGreen'
+  },
+  '&:active': {
+    backgroundColor: '$bgGreen',
+    color: '$white'
+  },
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    color: '$iconDisable',
+    cursor: 'default'
+  },
+  variants: {
+    isSelected: {
+      true: {
+        backgroundColor: '$bgGreen',
+        color: '$white'
+      }
+    }
+  }
+});
+const AdvanceViewToggleButton = styled(Flex, {
+  alignSelf: 'flex-end',
+  cursor: 'pointer'
+});
+const DATE_PICKER = 0;
+const MONTH_PICKER = 1;
+const YEAR_PICKER = 2;
+const YEAR_RANGE_PICKER = 3;
+
+const MobileCalendarBox = ({
+  calendars,
+  getDateProps,
+  advanceView,
+  onCalendarDateChange,
+  onMultiDateChange,
+  pickerType,
+  onUpdate,
+  onCancel,
+  selected,
+  containerStyle,
+  disabled
+}) => {
+  const [pickerState, setPickerState] = 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$3,
+        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$3,
+        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$3,
+        lineNumber: 286,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default.createElement(ChevronLeftOutline, {
+      color: "currentColor",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        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$3,
+        lineNumber: 308,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default.createElement(ChevronRightOutline, {
+      color: "currentColor",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        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$3,
+        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$3,
+        lineNumber: 347,
+        columnNumber: 7
+      }
+    }, calendar.weeks.map((week, weekIndex) => week.map((dateObj, index) => {
+      const key = `${calendar.month}${calendar.year}${weekIndex}${index}`;
+
+      if (!dateObj) {
+        return /*#__PURE__*/React__default.createElement("div", {
+          key: key,
+          style: {
+            display: 'inline-block',
+            width: '32px',
+            border: 'none',
+            background: 'transparent'
+          },
+          __self: undefined,
+          __source: {
+            fileName: _jsxFileName$3,
+            lineNumber: 358,
+            columnNumber: 17
+          }
+        });
+      }
+
+      const {
+        date
+      } = dateObj; // let background = today ? 'cornflowerblue' : '';
+      // background = selected ? 'purple' : background;
+      // background = !selectable ? 'teal' : background;
+
+      const dateProps = disabled ? {} : getDateProps({
+        dateObj
+      });
+      return /*#__PURE__*/React__default.createElement(DateNumber, _extends({
+        key: key,
+        size: "small"
+      }, dateProps, {
+        variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$3,
+          lineNumber: 375,
+          columnNumber: 15
+        }
+      }), date.getDate());
+    })));
+  };
+
+  const renderYearRangesList = () => {
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-06',
+        gridColumnGap: '20px'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 392,
+        columnNumber: 7
+      }
+    }, yearRangesList(pickerState.selectedYearRangeStart).map(range => /*#__PURE__*/React__default.createElement(MonthButton, {
+      key: range.start,
+      paragraph: "shortContentRegular",
+      isSelected: pickerState.selectedYearRange === range.start,
+      onClick: () => setPickerState(current => Object.assign({}, current, {
+        selectedYearRange: range.start,
+        type: YEAR_PICKER
+      })),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 400,
+        columnNumber: 11
+      }
+    }, range.start, "-", range.end)));
+  };
+
+  const renderYearsList = () => {
+    const startYear = pickerState.selectedYearRange;
+    const yearsArray = Array.from(new Array(10), (val, index) => index + startYear);
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-06',
+        gridColumnGap: '20px'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 423,
+        columnNumber: 7
+      }
+    }, yearsArray.map((year, index) => /*#__PURE__*/React__default.createElement(MonthButton, {
+      key: year,
+      paragraph: "shortContentRegular",
+      isSelected: pickerState.selectedYear === year,
+      onClick: () => setPickerState(current => Object.assign({}, current, {
+        selectedYear: year,
+        type: MONTH_PICKER
+      })),
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 431,
+        columnNumber: 11
+      }
+    }, year)));
+  };
+
+  const renderMonthsList = () => {
+    return /*#__PURE__*/React__default.createElement(Grid, {
+      columns: 3,
+      css: {
+        gridRowGap: '$spacing-06',
+        gridColumnGap: '20px'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 452,
+        columnNumber: 7
+      }
+    }, monthNamesFull.map((monthName, index) => /*#__PURE__*/React__default.createElement(MonthButton, {
+      key: monthName,
+      paragraph: "shortContentRegular",
+      isSelected: pickerState.selectedMonth === index,
+      onClick: () => {
+        if (onMultiDateChange) onMultiDateChange(true);
+        setPickerState(current => Object.assign({}, current, {
+          selectedMonth: index,
+          type: DATE_PICKER
+        }));
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 460,
+        columnNumber: 11
+      }
+    }, monthName)));
+  };
+
+  const renderWeekLabel = calendar => {
+    return /*#__PURE__*/React__default.createElement(Flex, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 482,
+        columnNumber: 7
+      }
+    }, weekdayNamesShort.map(weekday => /*#__PURE__*/React__default.createElement(WeekdayBox, {
+      key: `${calendar.month}${calendar.year}${weekday}`,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 484,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/React__default.createElement(Paragraph, {
+      paragraph: "shortContentBold",
+      css: {
+        color: '$textSecondary'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 485,
+        columnNumber: 13
+      }
+    }, weekday))));
+  };
+
+  const renderFooter = () => {
+    return /*#__PURE__*/React__default.createElement(FooterContainer, {
+      direction: "column",
+      center: true,
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        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$3,
+        lineNumber: 504,
+        columnNumber: 13
+      }
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "contentButton",
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 505,
+        columnNumber: 15
+      }
+    }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 506,
+        columnNumber: 36
+      }
+    }) : /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 506,
+        columnNumber: 61
+      }
+    })), expandAdvanceView && advanceView, /*#__PURE__*/React__default.createElement(Separator, {
+      css: {
+        marginBottom: '$spacing-05'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 509,
+        columnNumber: 13
+      }
+    })), /*#__PURE__*/React__default.createElement(Text$1, {
+      variant: "status",
+      color: selected.length > 1 ? 'primary' : 'disable',
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 516,
+        columnNumber: 9
+      }
+    }, selected.length > 1 && !disabled ? `${toDateFormat(selected[0])} - ${toDateFormat(selected[1])}` : 'Tanggal belum dipilih'), /*#__PURE__*/React__default.createElement(Flex, {
+      gap: 3,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        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$3,
+        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$3,
+        lineNumber: 534,
+        columnNumber: 11
+      }
+    }, "Proses")));
+  };
+
+  if (calendars.length) {
+    return /*#__PURE__*/React__default.createElement(DatePickerContainer, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 552,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default.createElement(CalendarsContainer, {
+      css: containerStyle,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 553,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/React__default.createElement(CalendarItemContainer, {
+      direction: "column",
+      gap: 5,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 554,
+        columnNumber: 11
+      }
+    }, calendars.map((calendar, index) => /*#__PURE__*/React__default.createElement(DateContainer, {
+      key: `${calendar.month}${calendar.year}`,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        lineNumber: 556,
+        columnNumber: 15
+      }
+    }, renderHeader(index), /*#__PURE__*/React__default.createElement(Separator, {
+      css: {
+        marginBottom: '$spacing-05'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$3,
+        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$2 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/DatePicker.js";
+const SINGLE_PICKER = 'single';
+const RANGE_PICKER = 'range';
+const ADVANCE_PICKER = 'advance';
+
+const CalendarPicker = _ref => {
+  let {
+    multiDatePicker,
+    onChange,
+    onCancel,
+    advanceView,
+    selected,
+    disabled
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const [dateValue, setDateValue] = 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);
     }
@@ -9200,163 +10247,779 @@ const CalendarPicker = _ref => {
     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,
+  }, [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$2,
+      lineNumber: 41,
+      columnNumber: 5
+    }
+  }));
+};
+
+const CalendarRangePicker = _ref2 => {
+  let {
+    multiDatePicker,
+    onChange,
+    onCancel,
+    advanceView,
+    selected,
+    disabled
+  } = _ref2,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  const today = new Date();
+  const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+  const [dateValue, setDateValue] = useState([]);
+  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);
+    }
+  }, [selected]);
+
+  const onDateSelected = selectedDate => {
+    if (!dateValue.length || dateValue.length === 2) {
+      setDateValue([selectedDate.date]);
+    } else {
+      if (selectedDate.date.toDateString() === dateValue[0].toDateString()) {
+        return;
+      }
+
+      if (new Date(dateValue[0]) > selectedDate.date) {
+        setDateValue([selectedDate.date, dateValue[0]]);
+      } else {
+        setDateValue([dateValue[0], selectedDate.date]);
+      }
+    }
+  };
+
+  const dayzedData = useDayzed(Object.assign({}, props, {
+    date: calendarDate,
+    selected: dateValue,
+    monthsToDisplay: isMultiDate ? 2 : 1,
+    onDateSelected
+  }));
+
+  const updateHandler = () => {
+    if (dateValue && onChange) {
+      if (dateValue.length === 1) {
+        onChange([dateValue[0], dateValue[0]]);
+      } else {
+        onChange(dateValue);
+      }
+    }
+  };
+
+  return isMobile ? /*#__PURE__*/React__default.createElement(MobileCalendarBox, _extends({
+    onUpdate: multiDatePicker ? updateHandler : undefined,
+    onCancel: onCancel,
+    selected: dateValue,
+    advanceView: isMultiDate ? advanceView : undefined,
+    disabled: disabled,
+    onCalendarDateChange: date => setCalendarDate(date),
+    onMultiDateChange: isMultiDate => setIsMultiDate(isMultiDate)
+  }, dayzedData, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 100,
+      columnNumber: 5
+    }
+  })) : /*#__PURE__*/React__default.createElement(CalendarBox, _extends({
+    onUpdate: multiDatePicker ? updateHandler : undefined,
+    onCancel: onCancel,
+    selected: dateValue,
+    advanceView: isMultiDate ? advanceView : undefined,
+    disabled: disabled,
+    onCalendarDateChange: date => setCalendarDate(date),
+    onMultiDateChange: isMultiDate => setIsMultiDate(isMultiDate)
+  }, dayzedData, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 111,
+      columnNumber: 5
+    }
+  }));
+};
+
+const DatePicker = props => {
+  const {
+    type
+  } = props,
+        otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
+
+  if (type !== SINGLE_PICKER) {
+    return /*#__PURE__*/React__default.createElement(CalendarRangePicker, _extends({}, otherProps, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$2,
+        lineNumber: 127,
+        columnNumber: 12
+      }
+    }));
+  }
+
+  return /*#__PURE__*/React__default.createElement(CalendarPicker, _extends({}, otherProps, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$2,
+      lineNumber: 129,
+      columnNumber: 10
+    }
+  }));
+};
+
+var _jsxFileName$1 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/InputDatePicker.js";
+const UPDATE = 'UPDATE';
+const TODAY = 'TODAY';
+const YESTERDAY = 'YESTERDAY';
+const LAST_7_DAYS = 'LAST_7_DAYS';
+const LAST_WEEK = 'LAST_WEEK';
+const THIS_WEEK = 'THIS_WEEK';
+const LAST_MONTH = 'LAST_MONTH';
+const LAST_TWO_MONTHS = 'LAST_TWO_MONTH';
+const THIS_MONTH = 'THIS_MONTH';
+const options = [{
+  label: 'Hari Ini',
+  value: TODAY
+}, {
+  label: 'Kemarin',
+  value: YESTERDAY
+}, {
+  label: '7 Hari Terakhir',
+  value: LAST_7_DAYS
+}, {
+  label: 'Minggu Lalu',
+  value: LAST_WEEK
+}, {
+  label: 'Minggu Ini',
+  value: THIS_WEEK
+}, {
+  label: 'Bulan Lalu',
+  value: LAST_MONTH
+}, {
+  label: '2 Bulan Terakhir',
+  value: LAST_TWO_MONTHS
+}, {
+  label: 'Bulan Ini',
+  value: THIS_MONTH
+}];
+
+function dateReducer(state, action) {
+  const today = new Date();
+
+  switch (action.type) {
+    case UPDATE:
+      {
+        return Object.assign({}, state, {
+          selectedDate: action.payload
+        });
+      }
+
+    case TODAY:
+      {
+        return Object.assign({}, state, {
+          selectedDate: [today, today]
+        });
+      }
+
+    case YESTERDAY:
+      {
+        const yesterday = new Date();
+        yesterday.setDate(today.getDate() - 1);
+        return Object.assign({}, state, {
+          selectedDate: [yesterday, yesterday]
+        });
+      }
+
+    case LAST_7_DAYS:
+      {
+        const last7Days = new Date();
+        last7Days.setDate(today.getDate() - 7);
+        return Object.assign({}, state, {
+          selectedDate: [last7Days, today]
+        });
+      }
+
+    case LAST_WEEK:
+      {
+        const startThisWeek = new Date();
+        startThisWeek.setDate(today.getDate() - today.getDay() - 7);
+        const endThisWeek = new Date();
+        endThisWeek.setDate(today.getDate() - today.getDay() - 1);
+        return Object.assign({}, state, {
+          selectedDate: [startThisWeek, endThisWeek]
+        });
+      }
+
+    case THIS_WEEK:
+      {
+        const startThisWeek = new Date();
+        startThisWeek.setDate(today.getDate() - today.getDay());
+        const endThisWeek = new Date();
+        endThisWeek.setDate(startThisWeek.getDate() + 6);
+        return Object.assign({}, state, {
+          selectedDate: [startThisWeek, endThisWeek]
+        });
+      }
+
+    case LAST_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
+        const endThisMonth = new Date(today.getFullYear(), today.getMonth(), 0, 0);
+        return Object.assign({}, state, {
+          selectedDate: [startThisMonth, endThisMonth]
+        });
+      }
+
+    case LAST_TWO_MONTHS:
+      {
+        const last2Months = new Date();
+        last2Months.setDate(today.getDate() - 60);
+        return Object.assign({}, state, {
+          selectedDate: [last2Months, today]
+        });
+      }
+
+    case THIS_MONTH:
+      {
+        const startThisMonth = new Date(today.getFullYear(), today.getMonth(), 1, 0);
+        const endThisMonth = new Date(startThisMonth.getFullYear(), startThisMonth.getMonth() + 1, 0, 0);
+        return Object.assign({}, state, {
+          selectedDate: [startThisMonth, endThisMonth]
+        });
+      }
+
+    default:
+      {
+        throw new Error(`Unhandled action type: ${action.type}`);
+      }
+  }
+}
+
+const getInputPickerValue = (type, date) => {
+  if (!date) return '';
+
+  if (type === SINGLE_PICKER) {
+    return Intl.DateTimeFormat('id-ID', {
+      dateStyle: 'long'
+    }).format(date);
+  } else {
+    return `${toDateFormat(date[0], 'medium')} - ${toDateFormat(date[1], 'medium')}`;
+  }
+};
+
+function InputDatePicker({
+  type = SINGLE_PICKER,
+  placeholder = 'Pilih Tanggal',
+  size = 'sm',
+  disabled,
+  onChange,
+  date,
+  advanceView,
+  css
+}) {
+  const [{
+    selectedDate
+  }, dispatch] = 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$1,
+      lineNumber: 111,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(InputLeftElement, {
+    children: /*#__PURE__*/React__default.createElement(CalendarOutline, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 112,
+        columnNumber: 35
+      }
+    }),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 112,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(InputText, {
+    placeholder: placeholder,
+    value: getInputPickerValue(type, selectedDate),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      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$1,
+        lineNumber: 121,
+        columnNumber: 11
+      }
+    }) : {
+      advanceView
+    }),
+    type: type,
+    disabled: disabled,
+    date: date ? date == null ? void 0 : date[1] : selectedDate == null ? void 0 : selectedDate[1],
+    selected: date != null ? date : selectedDate,
+    multiDatePicker: type !== SINGLE_PICKER,
+    onChange: date => {
+      setOpenPicker(false);
+      dispatch({
+        type: 'UPDATE',
+        payload: date
+      });
+      if (onChange) onChange(date);
+    },
+    onCancel: () => setOpenPicker(false),
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 117,
+      columnNumber: 5
+    }
+  });
+
+  return !isMobile ? /*#__PURE__*/React__default.createElement(Popover, {
+    open: openPicker,
+    onOpenChange: setOpenPicker,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 140,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 141,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
+    css: css,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      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$1,
+      lineNumber: 144,
+      columnNumber: 7
+    }
+  }, renderDatePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
+    css: css,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 150,
+      columnNumber: 7
+    }
+  }, renderInputGroup()), /*#__PURE__*/React__default.createElement(Drawer, {
+    open: openPicker,
+    onOpenChange: setOpenPicker,
+    __self: this,
     __source: {
       fileName: _jsxFileName$1,
-      lineNumber: 38,
-      columnNumber: 5
+      lineNumber: 151,
+      columnNumber: 7
     }
-  }));
+  }, /*#__PURE__*/React__default.createElement(DrawerContent, {
+    side: "bottom",
+    css: {
+      position: 'fixed',
+      left: 0
+    },
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$1,
+      lineNumber: 152,
+      columnNumber: 9
+    }
+  }, renderDatePicker())));
+}
+
+InputDatePicker.propTypes = {
+  type: PropTypes.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';
 
-const CalendarRangePicker = _ref2 => {
-  let {
-    multiDatePicker,
-    onChange,
-    onCancel,
-    advanceView,
-    selected,
-    disabled
-  } = _ref2,
-      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+function sliceIntoChunks(arr, chunkSize) {
+  const res = [];
 
-  const today = new Date();
-  const prevMonth = new Date(today.getFullYear(), today.getMonth() - 1, 1, 0);
-  const [dateValue, setDateValue] = useState([]);
-  const [calendarDate, setCalendarDate] = useState(!advanceView ? today : prevMonth);
-  const [isMultiDate, setIsMultiDate] = useState(multiDatePicker);
-  useEffect(() => {
-    if (selected) {
-      setDateValue(selected);
-    }
-  }, [selected]);
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    const chunk = arr.slice(i, i + chunkSize);
+    res.push(chunk);
+  }
 
-  const onDateSelected = selectedDate => {
-    if (!dateValue.length || dateValue.length === 2) {
-      setDateValue([selectedDate.date]);
-    } else {
-      if (selectedDate.date.toDateString() === dateValue[0].toDateString()) {
-        return;
-      }
+  return res;
+}
 
-      if (new Date(dateValue[0]) > selectedDate.date) {
-        setDateValue([selectedDate.date, dateValue[0]]);
-      } else {
-        setDateValue([dateValue[0], selectedDate.date]);
+var _jsxFileName = "/home/omegalord666/work/majoo-ui/packages/react/src/components/table/Table.js";
+const TableContainer = styled(Flex, {
+  position: 'relative',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%'
+});
+const TableContent = styled('table', {
+  borderCollapse: 'collapse'
+});
+const TableHead = styled('thead', {
+  position: 'sticky',
+  top: 0,
+  zIndex: 2,
+  backgroundColor: '$bgWhite',
+  boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)'
+});
+const TableHeadRow = styled('tr', {
+  borderBottom: '1pt solid $bgBorder',
+  '& th': {
+    padding: '0 26px'
+  },
+  '& th:first-child': {
+    padding: '0 26px 0 36px'
+  },
+  '& th:last-child': {
+    padding: '0 36px 0 26px'
+  }
+});
+const TableHeadCell = styled('th', {
+  height: '64px'
+});
+const TableHeaderCellContainer = styled(Flex, {
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  userSelect: 'none',
+  size: '100%',
+  minWidth: 0
+});
+const TableHeadCellContent = styled(Heading$1, {
+  userSelect: 'none',
+  width: '100%',
+  textAlign: 'start',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  position: 'relative',
+  '& > *': {
+    display: 'inline-flex'
+  },
+  '& > span:last-child': {
+    paddingLeft: '$spacing-03'
+  }
+});
+const TableBody = styled('tbody', {});
+const TableRow = styled('tr', {
+  borderBottom: '1pt solid $bgBorder',
+  '& td': {
+    padding: '0 24px'
+  },
+  '& td:first-child': {
+    padding: '0 24px 0 32px'
+  },
+  '& td:last-child': {
+    padding: '0 32px 0 24px'
+  },
+  variants: {
+    subRow: {
+      true: {
+        border: 'none',
+        backgroundColor: '$bgGray',
+        '& td': {
+          padding: '4px 0 4px 24px'
+        }
       }
     }
-  };
-
-  const dayzedData = useDayzed(Object.assign({}, props, {
-    date: calendarDate,
-    selected: dateValue,
-    monthsToDisplay: isMultiDate ? 2 : 1,
-    onDateSelected
-  }));
-
-  const updateHandler = () => {
-    if (dateValue && onChange) {
-      if (dateValue.length === 1) {
-        onChange([dateValue[0], dateValue[0]]);
-      } else {
-        onChange(dateValue);
+  }
+});
+const TableCell = styled('td', {
+  height: '68px',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: '400',
+  color: '$textPrimary',
+  variants: {
+    subCell: {
+      true: {
+        height: 'unset'
+      }
+    },
+    headerSubCell: {
+      true: {
+        fontWeight: '600'
       }
     }
-  };
+  }
+});
 
-  return /*#__PURE__*/React__default.createElement(CalendarBox, _extends({
-    onUpdate: multiDatePicker ? updateHandler : undefined,
-    onCancel: onCancel,
-    selected: dateValue,
-    advanceView: isMultiDate ? advanceView : undefined,
-    disabled: disabled,
-    onCalendarDateChange: date => setCalendarDate(date),
-    onMultiDateChange: isMultiDate => setIsMultiDate(isMultiDate)
-  }, dayzedData, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 95,
-      columnNumber: 5
-    }
-  }));
-};
+const addOnCellStyle = id => {
+  switch (id) {
+    case 'expander':
+    case 'menu':
+      return {
+        style: {
+          width: '24px'
+        }
+      };
 
-const DatePicker = props => {
-  const {
-    type
-  } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
+    case 'selection':
+      return {
+        style: {
+          width: '16px'
+        }
+      };
 
-  if (type === RANGE_PICKER) {
-    return /*#__PURE__*/React__default.createElement(CalendarRangePicker, _extends({}, otherProps, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 111,
-        columnNumber: 12
-      }
-    }));
+    default:
+      return {};
   }
-
-  return /*#__PURE__*/React__default.createElement(CalendarPicker, _extends({}, otherProps, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$1,
-      lineNumber: 113,
-      columnNumber: 10
-    }
-  }));
 };
 
-var _jsxFileName = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\datePicker\\AdvancedOption.js";
-const ButtonGroup = styled(ToggleGroupPrimitive.Root, {});
-const AdvancedOption = ({
-  options,
-  disabled,
-  optionHandler
-}) => {
-  return /*#__PURE__*/React__default.createElement(ButtonGroup, {
-    type: "single",
-    orientation: "vertical",
-    __self: undefined,
+function Table({
+  columns,
+  data,
+  onSelectedChange
+}) {
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    visibleColumns,
+    rows,
+    prepareRow,
+    selectedFlatRows
+  } = useTable({
+    columns,
+    data
+  }, useSortBy, useExpanded, useRowSelect);
+  useEffect(() => {
+    if (onSelectedChange) onSelectedChange(selectedFlatRows.map(row => row.values));
+  }, [selectedFlatRows]);
+  return /*#__PURE__*/React__default.createElement(TableContainer, {
+    __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 11,
+      lineNumber: 155,
       columnNumber: 5
     }
-  }, options.map(option => /*#__PURE__*/React__default.createElement(ButtonGroupItem, {
-    isToggle: false,
-    key: option.value,
-    disabled: disabled,
-    value: option.value,
-    css: {
-      fontSize: '$content-button',
-      lineHeight: '$content-button',
-      letterSpacing: '$content-button',
-      fontWeight: '600',
-      justifyContent: 'start',
-      mb: '$spacing-03',
-      height: '40px',
-      minWidth: '140px'
-    },
-    onClick: () => optionHandler(option.value),
-    __self: undefined,
+  }, /*#__PURE__*/React__default.createElement(TableContent, _extends({}, getTableProps(), {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 156,
+      columnNumber: 7
+    }
+  }), /*#__PURE__*/React__default.createElement(TableHead, {
+    __self: this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 13,
+      lineNumber: 157,
       columnNumber: 9
     }
-  }, option.label)));
+  }, headerGroups.map(headerGroup => /*#__PURE__*/React__default.createElement(TableHeadRow, _extends({}, headerGroup.getHeaderGroupProps(), {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 159,
+      columnNumber: 13
+    }
+  }), headerGroup.headers.filter(column => !column.isSubRow).map(column => {
+    const headerRender = column.render('Header');
+    return /*#__PURE__*/React__default.createElement(TableHeadCell, _extends({}, column.getHeaderProps(column.getSortByToggleProps()), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 165,
+        columnNumber: 21
+      }
+    }), typeof headerRender === 'string' ? /*#__PURE__*/React__default.createElement(TableHeaderCellContainer, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 167,
+        columnNumber: 25
+      }
+    }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TableHeadCellContent, {
+      heading: "headerTable",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 169,
+        columnNumber: 29
+      }
+    }, headerRender.toUpperCase()), /*#__PURE__*/React__default.createElement(SortingOutline, {
+      color: colors.iconSecondary,
+      size: "16px",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 172,
+        columnNumber: 29
+      }
+    }))) : headerRender);
+  })))), /*#__PURE__*/React__default.createElement(TableBody, _extends({}, getTableBodyProps(), {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 184,
+      columnNumber: 9
+    }
+  }), rows.map((row, i) => {
+    var _row$cells$filter, _row$cells$filter2;
+
+    prepareRow(row);
+    const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
+    const cellArrays = sliceIntoChunks(subRowCells, 2);
+    const leftAddOnCells = (_row$cells$filter = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) != null ? _row$cells$filter : [];
+    const rightAddOnCells = (_row$cells$filter2 = row.cells.filter(cell => ['menu'].includes(cell.column.id))) != null ? _row$cells$filter2 : [];
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+      key: row.id,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 192,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/React__default.createElement(TableRow, _extends({}, row.getRowProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 193,
+        columnNumber: 17
+      }
+    }), row.cells.filter(cell => !cell.column.isSubRow).map(cell => /*#__PURE__*/React__default.createElement(TableCell, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 197,
+        columnNumber: 23
+      }
+    }), cell.render('Cell')))), row.isExpanded ? cellArrays.map((cells, index) => {
+      return /*#__PURE__*/React__default.createElement(TableRow, {
+        key: index,
+        subRow: true,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 205,
+          columnNumber: 25
+        }
+      }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default.createElement("td", {
+        key: index,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 207,
+          columnNumber: 29
+        }
+      })), cells.map((cell, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+        key: cell.id,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 210,
+          columnNumber: 29
+        }
+      }, /*#__PURE__*/React__default.createElement(TableCell, {
+        subCell: true,
+        headerSubCell: true,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 211,
+          columnNumber: 31
+        }
+      }, /*#__PURE__*/React__default.createElement(Paragraph, {
+        paragraph: "shortContentBold",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 212,
+          columnNumber: 33
+        }
+      }, cell.column.Header)), /*#__PURE__*/React__default.createElement(TableCell, {
+        subCell: true,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 214,
+          columnNumber: 31
+        }
+      }, /*#__PURE__*/React__default.createElement(Paragraph, {
+        paragraph: "shortContentRegular",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 215,
+          columnNumber: 33
+        }
+      }, cell.render('Cell'))), index === 0 && cells.length > 1 && new Array(visibleColumns.length - subRowCells.length - leftAddOnCells.length - rightAddOnCells.length - 4).fill(null).map((_, index) => /*#__PURE__*/React__default.createElement("td", {
+        key: index,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 227,
+          columnNumber: 54
+        }
+      })))));
+    }) : null);
+  }))));
+}
+
+Table.propTypes = {
+  data: PropTypes.arrayOf(PropTypes.object),
+  column: PropTypes.arrayOf(PropTypes.object),
+  onSelectedChange: PropTypes.func
 };
+Table.displayName = 'Table';
 
-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$1 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$1 as Heading, IconButton, Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, MajooProvider, NotificationBadge, Paper, PaperComponent, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RANGE_PICKER, SINGLE_PICKER, Separator, Slider, StyledTitle$1 as StyledTitle, Table, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text$1 as Text, ToastContext, Tooltip };