@majoo-ui/react 1.26.0 → 1.27.0

package/index.esm.js

@@ -6,7 +6,7 @@ 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, CaretDownOutline, ChevronDownOutline, ChevronLeftOutline, ChevronRightOutline, ChevronUpOutline, CalendarOutline } 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';
@@ -25,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$F = "/home/omegalord666/work/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,
@@ -36,7 +37,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$I,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -1141,7 +1142,7 @@ createTheme({
     bgDark: '#FFFFFF'
   }
 });
-foundations.colors;
+const colors = foundations.colors;
 
 const normalize = {
   '*,::before,::after': {
@@ -1866,13 +1867,13 @@ for (var COLLECTION_NAME in DOMIterables) {
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
 const _excluded$s = ["className", "children", "color", "textColor", "padding"];
-var _jsxFileName$E = "/home/omegalord666/work/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,
@@ -1892,19 +1893,19 @@ const Box$2 = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      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'
@@ -2042,7 +2043,7 @@ Flex.displayName = 'Flex';
 
 const _excluded$r = ["children"],
       _excluded2$3 = ["children"];
-var _jsxFileName$D = "/home/omegalord666/work/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: {
@@ -2227,7 +2228,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$G,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2283,7 +2284,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$G,
       lineNumber: 230,
       columnNumber: 5
     }
@@ -2301,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$C = "/home/omegalord666/work/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',
@@ -2378,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', {
@@ -2433,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: {
@@ -2521,29 +2541,29 @@ function Button$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$C,
-      lineNumber: 220,
+      fileName: _jsxFileName$F,
+      lineNumber: 240,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$2, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$C,
-      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$C,
-      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$C,
-      lineNumber: 233,
+      fileName: _jsxFileName$F,
+      lineNumber: 253,
       columnNumber: 34
     }
   }, rightIcon) : null);
@@ -2569,7 +2589,7 @@ Button$1.defaultProps = {
 };
 
 const _excluded$p = ["id", "message", "dismissAfter", "variant", "onAction", "actionText", "onRemove"];
-var _jsxFileName$B = "/home/omegalord666/work/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;
@@ -2662,7 +2682,7 @@ const StyledToast = styled('div', {
     }
   }
 });
-const Text$1 = styled('span', {
+const Text$2 = styled('span', {
   display: 'block'
 });
 
@@ -2705,7 +2725,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 133,
       columnNumber: 5
     }
@@ -2715,7 +2735,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 144,
       columnNumber: 9
     }
@@ -2723,7 +2743,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 145,
       columnNumber: 11
     }
@@ -2734,14 +2754,14 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 146,
       columnNumber: 13
     }
-  }, /*#__PURE__*/React.createElement(Text$1, {
+  }, /*#__PURE__*/React.createElement(Text$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 152,
       columnNumber: 15
     }
@@ -2751,7 +2771,7 @@ const Toast = _ref => {
     css: {},
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 155,
       columnNumber: 15
     }
@@ -2766,7 +2786,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$B,
+      fileName: _jsxFileName$E,
       lineNumber: 157,
       columnNumber: 17
     }
@@ -2789,8 +2809,8 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$A = "/home/omegalord666/work/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,
@@ -2806,7 +2826,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$A,
+      fileName: _jsxFileName$D,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -2814,7 +2834,7 @@ const ToastContainer = ({
     padding: 0,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$A,
+      fileName: _jsxFileName$D,
       lineNumber: 20,
       columnNumber: 7
     }
@@ -2826,7 +2846,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$D,
         lineNumber: 24,
         columnNumber: 13
       }
@@ -2835,7 +2855,7 @@ const ToastContainer = ({
 };
 
 const _excluded$o = ["id"];
-var _jsxFileName$z = "/home/omegalord666/work/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 = ({
@@ -2872,7 +2892,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$C,
       lineNumber: 40,
       columnNumber: 5
     }
@@ -2880,14 +2900,14 @@ const ToastProvider = ({
     toasts: toasts,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$z,
+      fileName: _jsxFileName$C,
       lineNumber: 42,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$y = "/home/omegalord666/work/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,
@@ -2900,14 +2920,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$B,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$y,
+      fileName: _jsxFileName$B,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -2921,7 +2941,7 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-var _jsxFileName$x = "/home/omegalord666/work/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 = ({
@@ -2938,14 +2958,14 @@ const AlertProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$x,
+      fileName: _jsxFileName$A,
       lineNumber: 9,
       columnNumber: 5
     }
   }, children);
 };
 
-var _jsxFileName$w = "/home/omegalord666/work/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,
@@ -3073,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$w,
-      lineNumber: 158,
+      fileName: _jsxFileName$z,
+      lineNumber: 163,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(AlertContent, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 159,
+      fileName: _jsxFileName$z,
+      lineNumber: 164,
       columnNumber: 7
     }
   }), props.children));
@@ -3109,8 +3131,8 @@ const AlertContent = props => {
   return /*#__PURE__*/React__default.createElement(AlertStyle, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 170,
+      fileName: _jsxFileName$z,
+      lineNumber: 175,
       columnNumber: 10
     }
   }));
@@ -3133,8 +3155,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$w,
-            lineNumber: 179,
+            fileName: _jsxFileName$z,
+            lineNumber: 184,
             columnNumber: 16
           }
         });
@@ -3144,8 +3166,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : ' #DF2A36',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$w,
-            lineNumber: 181,
+            fileName: _jsxFileName$z,
+            lineNumber: 186,
             columnNumber: 16
           }
         });
@@ -3155,8 +3177,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#0197F4',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$w,
-            lineNumber: 183,
+            fileName: _jsxFileName$z,
+            lineNumber: 188,
             columnNumber: 16
           }
         });
@@ -3166,8 +3188,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : ' #FE7F2D',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$w,
-            lineNumber: 185,
+            fileName: _jsxFileName$z,
+            lineNumber: 190,
             columnNumber: 16
           }
         });
@@ -3177,8 +3199,8 @@ const AlertIconBase = props => {
           color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$w,
-            lineNumber: 187,
+            fileName: _jsxFileName$z,
+            lineNumber: 192,
             columnNumber: 16
           }
         });
@@ -3188,8 +3210,8 @@ const AlertIconBase = props => {
   return /*#__PURE__*/React__default.createElement(AlertIconStyle, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 190,
+      fileName: _jsxFileName$z,
+      lineNumber: 195,
       columnNumber: 10
     }
   }), Icon(statusAlert));
@@ -3213,7 +3235,7 @@ AlertDescription.displayName = 'AlertDescription';
 AlertTitle.displayName = 'AlertTitle';
 
 const _excluded$n = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-var _jsxFileName$v = "/home/omegalord666/work/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',
@@ -3274,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',
@@ -3361,7 +3383,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$y,
       lineNumber: 103,
       columnNumber: 5
     }
@@ -3369,30 +3391,30 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      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$v,
+      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$v,
+      fileName: _jsxFileName$y,
       lineNumber: 119,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$v,
+      fileName: _jsxFileName$y,
       lineNumber: 125,
       columnNumber: 13
     }
@@ -3419,6 +3441,8 @@ Card.defaultProps = {
 };
 
 const Text = styled('p', {
+  margin: 0,
+  padding: 0,
   variants: {
     variant: {
       link: {
@@ -3513,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: {
@@ -3586,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: {
@@ -3657,7 +3683,7 @@ function __rest(s, e) {
 }
 
 const _excluded$m = ["children"];
-var _jsxFileName$u = "/home/omegalord666/work/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': {
@@ -3678,7 +3704,7 @@ const BreadcrumbItem = styled('li', {
   display: 'inline-flex',
   alignItems: 'center'
 });
-const BreadcrumbLinkStyle = styled(Text, {
+const BreadcrumbLinkStyle = styled(Text$1, {
   '&:hover': {
     textDecoration: 'underline'
   },
@@ -3703,7 +3729,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$x,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -3720,14 +3746,14 @@ const BreadcrumbBase = _ref => {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$x,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$u,
+      fileName: _jsxFileName$x,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -3749,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',
@@ -3934,7 +3960,7 @@ Badge.defaultProps = {
 Badge.displayName = 'Badge';
 
 const _excluded$l = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-var _jsxFileName$t = "/home/omegalord666/work/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',
@@ -3965,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) {
@@ -3987,7 +4013,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -3997,7 +4023,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4005,21 +4031,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$t,
+      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$t,
+      fileName: _jsxFileName$w,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$t,
+      fileName: _jsxFileName$w,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4037,7 +4063,7 @@ Avatar.defaultProps = {
 };
 
 const _excluded$k = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-var _jsxFileName$s = "/home/omegalord666/work/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',
@@ -4075,7 +4101,7 @@ function Image(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$s,
+      fileName: _jsxFileName$v,
       lineNumber: 20,
       columnNumber: 9
     }
@@ -4096,7 +4122,7 @@ Image.defaultProps = {
 };
 
 const _excluded$j = ["children", "label", "color", "contentCss", "withClick"];
-var _jsxFileName$r = "/home/omegalord666/work/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,
@@ -4208,7 +4234,7 @@ const Tooltip = _ref => {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4216,7 +4242,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4224,7 +4250,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4233,7 +4259,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? dark : ligth,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4241,7 +4267,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$r,
+      fileName: _jsxFileName$u,
       lineNumber: 95,
       columnNumber: 9
     }
@@ -4258,7 +4284,7 @@ Tooltip.defaultProps = {
 };
 
 const _excluded$i = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$q = "/home/omegalord666/work/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',
@@ -4392,7 +4418,7 @@ function Progress(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$t,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -4405,7 +4431,7 @@ function Progress(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$q,
+      fileName: _jsxFileName$t,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -4429,8 +4455,8 @@ Progress.defaultProps = {
 };
 
 const _excluded$h = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount"];
-var _jsxFileName$p = "/home/omegalord666/work/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',
@@ -4466,7 +4492,7 @@ const FormLabel = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -4476,7 +4502,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -4485,7 +4511,7 @@ const FormLabel = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -4500,7 +4526,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -4508,23 +4534,23 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$p,
+      fileName: _jsxFileName$s,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$p,
+      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$p,
+      fileName: _jsxFileName$s,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -4541,8 +4567,8 @@ FormLabel.propTypes = {
 FormLabel.displayName = 'FormLabel';
 
 const _excluded$g = ["children", "error"];
-var _jsxFileName$o = "/home/omegalord666/work/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: {
@@ -4567,7 +4593,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$o,
+      fileName: _jsxFileName$r,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -4579,9 +4605,9 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$n = "/home/omegalord666/work/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",
@@ -4597,7 +4623,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$n,
+    fileName: _jsxFileName$q,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -4609,7 +4635,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$n,
+    fileName: _jsxFileName$q,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -4621,14 +4647,62 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$n,
+    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$m = "/home/omegalord666/work/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',
@@ -4677,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$m,
-      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$m,
-      lineNumber: 58,
-      columnNumber: 7
+      fileName: _jsxFileName$o,
+      lineNumber: 56,
+      columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$m,
-      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$m,
-      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$m,
-      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$m,
-      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$l = "/home/omegalord666/work/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%',
@@ -4896,7 +4988,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$l,
+      fileName: _jsxFileName$n,
       lineNumber: 143,
       columnNumber: 10
     }
@@ -4923,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',
@@ -4989,7 +5081,7 @@ InputRightAddon.defaultProps = {
   as: 'div'
 };
 
-const InputLetter = styled(Text, {
+const InputLetter = styled(Text$1, {
   flex: '0 0 auto',
   width: 'auto',
   display: 'flex',
@@ -5199,7 +5291,7 @@ InputRadioGroup.propTypes = {
 InputRadioGroup.displayName = 'InputRadioGroup';
 
 const _excluded$d = ["id", "disabled"];
-var _jsxFileName$k = "/home/omegalord666/work/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',
@@ -5283,7 +5375,7 @@ const InputRadio = _ref => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$k,
+      fileName: _jsxFileName$m,
       lineNumber: 82,
       columnNumber: 3
     }
@@ -5293,14 +5385,14 @@ const InputRadio = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$k,
+      fileName: _jsxFileName$m,
       lineNumber: 83,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$k,
+      fileName: _jsxFileName$m,
       lineNumber: 84,
       columnNumber: 7
     }
@@ -5317,7 +5409,7 @@ const InputRadio = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$k,
+      fileName: _jsxFileName$m,
       lineNumber: 86,
       columnNumber: 5
     }
@@ -5361,7 +5453,7 @@ InputRightElement.propTypes = {
 InputRightElement.name = 'InputRightElement';
 
 const _excluded$c = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
-var _jsxFileName$j = "/home/omegalord666/work/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',
@@ -5449,21 +5541,21 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$l,
       lineNumber: 54,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$l,
       lineNumber: 63,
       columnNumber: 33
     }
   }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$j,
+      fileName: _jsxFileName$l,
       lineNumber: 65,
       columnNumber: 34
     }
@@ -5482,10 +5574,13 @@ Tag.defaultProps = {
   size: 'sm'
 };
 
-const _excluded$b = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly"];
-var _jsxFileName$i = "/home/omegalord666/work/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',
@@ -5494,7 +5589,6 @@ const InputTagsComponent = styled('div', {
   borderRadius: '$lg',
   color: '$textPrimary',
   lineHeight: '$short-content-regular',
-  width: '100%',
   fontSize: '$short-content-regular',
   fontWeight: '400',
   '&:focus': {
@@ -5524,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'
       }
     },
@@ -5545,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',
@@ -5555,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'
     }
@@ -5586,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)]);
     }
   };
@@ -5618,27 +5724,26 @@ function TagsInput(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
-      lineNumber: 105,
+      fileName: _jsxFileName$k,
+      lineNumber: 129,
       columnNumber: 5
     }
-  }), /*#__PURE__*/React__default.createElement(Flex, {
-    gap: 3,
+  }), /*#__PURE__*/React__default.createElement(TagContainer, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$i,
-      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$i,
-        lineNumber: 120,
+        fileName: _jsxFileName$k,
+        lineNumber: 144,
         columnNumber: 24
       }
     }),
@@ -5646,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$i,
-      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$i,
-      lineNumber: 132,
+      fileName: _jsxFileName$k,
+      lineNumber: 157,
       columnNumber: 7
     }
   }));
@@ -5677,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',
@@ -5688,7 +5796,7 @@ TagsInput.defaultProps = {
 };
 
 const _excluded$a = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-var _jsxFileName$h = "/home/omegalord666/work/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',
@@ -5771,14 +5879,14 @@ const InputSwitch = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$h,
+      fileName: _jsxFileName$j,
       lineNumber: 66,
       columnNumber: 3
     }
   }), /*#__PURE__*/React__default.createElement(StyledThumb$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$h,
+      fileName: _jsxFileName$j,
       lineNumber: 74,
       columnNumber: 5
     }
@@ -5796,7 +5904,7 @@ InputSwitch.propTypes = {
 };
 InputSwitch.displayName = 'InputSwitch';
 
-var _jsxFileName$g = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/CloseFilled.js";
+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,
@@ -5806,7 +5914,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$g,
+    fileName: _jsxFileName$i,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5815,7 +5923,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   fill: "white",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$g,
+    fileName: _jsxFileName$i,
     lineNumber: 5,
     columnNumber: 5
   }
@@ -5825,7 +5933,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.54289 8.54289C8.93342 8.15237 9.56658 8.15237 9.95711 8.54289L12 10.5858L14.0429 8.54289C14.4334 8.15237 15.0666 8.15237 15.4571 8.54289C15.8476 8.93342 15.8476 9.56658 15.4571 9.95711L13.4142 12L15.4571 14.0429C15.8476 14.4334 15.8476 15.0666 15.4571 15.4571C15.0666 15.8476 14.4334 15.8476 14.0429 15.4571L12 13.4142L9.95711 15.4571C9.56658 15.8476 8.93342 15.8476 8.54289 15.4571C8.15237 15.0666 8.15237 14.4334 8.54289 14.0429L10.5858 12L8.54289 9.95711C8.15237 9.56658 8.15237 8.93342 8.54289 8.54289Z",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$g,
+    fileName: _jsxFileName$i,
     lineNumber: 6,
     columnNumber: 7
   }
@@ -5836,7 +5944,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   fill: props.color,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$g,
+    fileName: _jsxFileName$i,
     lineNumber: 12,
     columnNumber: 5
   }
@@ -5846,7 +5954,7 @@ const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends
   mask: "url(#path-1-inside-1_2883_7918)",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$g,
+    fileName: _jsxFileName$i,
     lineNumber: 18,
     columnNumber: 5
   }
@@ -5857,7 +5965,7 @@ SvgCloseFilled.defaultProps = {
   size: 24
 };
 
-var _jsxFileName$f = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/SearchOutline.js";
+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,
@@ -5867,7 +5975,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$f,
+    fileName: _jsxFileName$h,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5879,7 +5987,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
   strokeWidth: 2,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$f,
+    fileName: _jsxFileName$h,
     lineNumber: 5,
     columnNumber: 5
   }
@@ -5888,7 +5996,7 @@ const SvgSearchOutline = props => /*#__PURE__*/React.createElement("svg", _exten
   fill: props.color,
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$f,
+    fileName: _jsxFileName$h,
     lineNumber: 6,
     columnNumber: 5
   }
@@ -5900,7 +6008,7 @@ SvgSearchOutline.defaultProps = {
 };
 
 const _excluded$9 = ["size", "onChange"];
-var _jsxFileName$e = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
+var _jsxFileName$g = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSearchbox/InputSearchbox.js";
 
 const InputSearchbox = _ref => {
   let {
@@ -5929,7 +6037,7 @@ const InputSearchbox = _ref => {
     css: props.css,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$g,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -5937,14 +6045,14 @@ const InputSearchbox = _ref => {
     children: /*#__PURE__*/React__default.createElement(SvgSearchOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$g,
         lineNumber: 29,
         columnNumber: 35
       }
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$g,
       lineNumber: 29,
       columnNumber: 7
     }
@@ -5954,7 +6062,7 @@ const InputSearchbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$g,
       lineNumber: 30,
       columnNumber: 7
     }
@@ -5962,14 +6070,14 @@ const InputSearchbox = _ref => {
     children: value.length > 0 ? /*#__PURE__*/React__default.createElement(SvgCloseFilled, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$g,
         lineNumber: 31,
         columnNumber: 55
       }
     }) : /*#__PURE__*/React__default.createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$g,
         lineNumber: 31,
         columnNumber: 73
       }
@@ -5977,7 +6085,7 @@ const InputSearchbox = _ref => {
     onClick: handleClearButtonClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$e,
+      fileName: _jsxFileName$g,
       lineNumber: 31,
       columnNumber: 7
     }
@@ -6461,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$d = "/home/omegalord666/work/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',
@@ -6478,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',
@@ -6557,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',
@@ -6565,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,
@@ -6578,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',
@@ -6586,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',
@@ -6594,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,
@@ -6627,7 +6735,7 @@ function Select(_ref) {
     initialSelectedItem: value !== undefined ? value : null,
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$f,
       lineNumber: 149,
       columnNumber: 5
     }
@@ -6642,21 +6750,21 @@ function Select(_ref) {
     highlightedIndex,
     initialSelectedItem,
     inputValue
-  }) => /*#__PURE__*/React.createElement(Box$1, {
+  }) => /*#__PURE__*/React.createElement(Box, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      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$d,
+      fileName: _jsxFileName$f,
       lineNumber: 168,
       columnNumber: 11
     }
@@ -6666,7 +6774,7 @@ function Select(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$f,
       lineNumber: 170,
       columnNumber: 15
     }
@@ -6678,7 +6786,7 @@ function Select(_ref) {
     disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$f,
       lineNumber: 171,
       columnNumber: 17
     }
@@ -6687,7 +6795,7 @@ function Select(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$f,
       lineNumber: 178,
       columnNumber: 15
     }
@@ -6695,7 +6803,7 @@ function Select(_ref) {
     color: "primary",
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$f,
       lineNumber: 180,
       columnNumber: 19
     }
@@ -6703,14 +6811,14 @@ function Select(_ref) {
     color: "primary",
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      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$d,
+      fileName: _jsxFileName$f,
       lineNumber: 186,
       columnNumber: 13
     }
@@ -6718,31 +6826,31 @@ function Select(_ref) {
     color: iconColor,
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      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$d,
+      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$d,
+      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,
@@ -6753,28 +6861,28 @@ function Select(_ref) {
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 194,
         columnNumber: 19
       }
     }), item.name);
-  })) : /*#__PURE__*/React.createElement(SelectOption$1, {
+  })) : /*#__PURE__*/React.createElement(SelectOption, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      fileName: _jsxFileName$f,
       lineNumber: 208,
       columnNumber: 15
     }
-  }, /*#__PURE__*/React.createElement(StyledDiv$1, {
+  }, /*#__PURE__*/React.createElement(StyledDiv, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$d,
+      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,
@@ -6784,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,
@@ -6813,8 +6921,56 @@ $({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') },
   }
 });
 
-var _jsxFileName$c = "/home/omegalord666/work/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',
@@ -6830,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',
@@ -6849,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'
       }
     },
@@ -6872,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',
@@ -6886,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,
@@ -6911,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',
@@ -6919,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,
@@ -6995,11 +7171,9 @@ function SelectTag({
 
           if (selectedItem) {
             if (selectedItems.includes(selectedItem)) {
-              setInputValue('');
               removeSelectedItem(selectedItem);
               selectItem(null);
             } else {
-              setInputValue('');
               addSelectedItem(selectedItem);
               selectItem(null);
             }
@@ -7008,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$c,
-      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$c,
-      lineNumber: 193,
+      fileName: _jsxFileName$d,
+      lineNumber: 210,
       columnNumber: 7
     }
-  }, selectedItems.length !== 0 ? /*#__PURE__*/React.createElement(Flex, {
-    gap: 3,
+  }, selectedItems.length !== 0 ? /*#__PURE__*/React.createElement(TagWrapper, {
+    disabled: disabled,
     __self: this,
     __source: {
-      fileName: _jsxFileName$c,
-      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$c,
-        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$c,
-      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$c,
-      lineNumber: 210,
+      fileName: _jsxFileName$d,
+      lineNumber: 237,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(Input, _extends({
@@ -7086,73 +7261,99 @@ function SelectTag({
   })), {
     __self: this,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 211,
+      fileName: _jsxFileName$d,
+      lineNumber: 238,
       columnNumber: 11
     }
-  }))), /*#__PURE__*/React.createElement(IconContainer, {
+  }))), /*#__PURE__*/React.createElement(IconWrapper, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 217,
+      fileName: _jsxFileName$d,
+      lineNumber: 244,
       columnNumber: 9
     }
-  }, /*#__PURE__*/React.createElement(StyledIcon, {
+  }, /*#__PURE__*/React.createElement(IconCaretDown, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$c,
-      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$c,
-      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$c,
-      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$c,
-        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$c,
-      lineNumber: 242,
+      fileName: _jsxFileName$d,
+      lineNumber: 253,
+      columnNumber: 17
+    }
+  }), /*#__PURE__*/React.createElement(IconWrapper, {
+    css: {
+      width: '16px',
+      height: '16px',
+      border: '1px solid $bgBorder'
+    },
+    __self: this,
+    __source: {
+      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(StyledDiv, {
+  }, /*#__PURE__*/React.createElement(Box$1, {
+    css: {
+      color: '$textDisable'
+    },
     __self: this,
     __source: {
-      fileName: _jsxFileName$c,
-      lineNumber: 243,
+      fileName: _jsxFileName$d,
+      lineNumber: 276,
       columnNumber: 13
     }
   }, "Item yang anda cari tidak ada"))));
@@ -7250,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$b = "/home/omegalord666/work/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',
@@ -7532,7 +7733,7 @@ function Slider(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$c,
       lineNumber: 160,
       columnNumber: 5
     }
@@ -7541,7 +7742,7 @@ function Slider(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$c,
       lineNumber: 181,
       columnNumber: 7
     }
@@ -7549,7 +7750,7 @@ function Slider(_ref) {
     color: color,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$c,
       lineNumber: 182,
       columnNumber: 9
     }
@@ -7558,7 +7759,7 @@ function Slider(_ref) {
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName$b,
+      fileName: _jsxFileName$c,
       lineNumber: 184,
       columnNumber: 7
     }
@@ -7658,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$a = "/home/omegalord666/work/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',
@@ -7800,7 +8001,7 @@ function ButtonGroup$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$b,
       lineNumber: 111,
       columnNumber: 5
     }
@@ -7853,21 +8054,21 @@ function ButtonGroupItem(_ref2) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$b,
       lineNumber: 164,
       columnNumber: 5
     }
   }), leftIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconLeft, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$b,
       lineNumber: 172,
       columnNumber: 33
     }
   }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default.createElement(StyledIconRight, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$a,
+      fileName: _jsxFileName$b,
       lineNumber: 174,
       columnNumber: 34
     }
@@ -7886,7 +8087,7 @@ ButtonGroupItem.defaultProps = {
 };
 
 const _excluded$5 = ["children", "value"];
-var _jsxFileName$9 = "/home/omegalord666/work/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',
@@ -8017,7 +8218,7 @@ const NotificationBadge = _ref => {
   return /*#__PURE__*/React__default.createElement(NotificationBadgeRootStyle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$a,
       lineNumber: 133,
       columnNumber: 5
     }
@@ -8025,7 +8226,7 @@ const NotificationBadge = _ref => {
     children: value,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$9,
+      fileName: _jsxFileName$a,
       lineNumber: 135,
       columnNumber: 7
     }
@@ -8050,7 +8251,7 @@ NotificationBadge.propTypes = {
 };
 
 const _excluded$4 = ["className", "children", "radius", "padding", "width", "height"];
-var _jsxFileName$8 = "/home/omegalord666/work/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',
@@ -8082,7 +8283,7 @@ const Paper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$8,
+      fileName: _jsxFileName$9,
       lineNumber: 17,
       columnNumber: 5
     }
@@ -8143,7 +8344,7 @@ const IconButton = styled('button', {
 });
 
 const _excluded$3 = ["children"];
-var _jsxFileName$7 = "/home/omegalord666/work/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
@@ -8192,21 +8393,21 @@ function Content(_ref) {
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Portal, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$7,
+      fileName: _jsxFileName$8,
       lineNumber: 38,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay$1, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$7,
+      fileName: _jsxFileName$8,
       lineNumber: 39,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$2, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$7,
+      fileName: _jsxFileName$8,
       lineNumber: 40,
       columnNumber: 7
     }
@@ -8237,7 +8438,7 @@ const DialogDescription = StyledDescription;
 const DialogClose = DialogPrimitive.Close;
 
 const _excluded$2 = ["children"];
-var _jsxFileName$6 = "/home/omegalord666/work/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'
@@ -8278,14 +8479,14 @@ function Drawer(_ref) {
   return /*#__PURE__*/React__default.createElement(DialogPrimitive.Root, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$7,
       lineNumber: 36,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledOverlay, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$6,
+      fileName: _jsxFileName$7,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -8393,7 +8594,7 @@ const DrawerDescription = DialogPrimitive.Description;
 const _excluded$1 = ["children", "disabled"],
       _excluded2$1 = ["children", "hasContent", "arrowColor"],
       _excluded3$1 = ["children"];
-var _jsxFileName$5 = "/home/omegalord666/work/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)' },
 // });
@@ -8416,7 +8617,7 @@ const Accordion = _ref => {
     disabled: disabled,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$6,
       lineNumber: 20,
       columnNumber: 3
     }
@@ -8479,14 +8680,14 @@ const AccordionTrigger = _ref2 => {
   return /*#__PURE__*/React__default.createElement(StyledHeader, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$6,
       lineNumber: 80,
       columnNumber: 3
     }
   }, /*#__PURE__*/React__default.createElement(StyledTrigger, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$6,
       lineNumber: 81,
       columnNumber: 5
     }
@@ -8495,7 +8696,7 @@ const AccordionTrigger = _ref2 => {
     color: arrowColor,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$6,
       lineNumber: 83,
       columnNumber: 22
     }
@@ -8512,7 +8713,7 @@ const AccordionContent = _ref3 => {
   return /*#__PURE__*/React__default.createElement(StyledContent, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$5,
+      fileName: _jsxFileName$6,
       lineNumber: 91,
       columnNumber: 61
     }
@@ -8565,7 +8766,7 @@ function useMediaQuery(query) {
   return matches;
 }
 
-var _jsxFileName$4 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/AdvancedOption.js";
+var _jsxFileName$5 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/AdvancedOption.js";
 const ButtonGroup = styled(ToggleGroupPrimitive.Root, {
   width: '100%'
 });
@@ -8590,7 +8791,7 @@ const AdvancedOption = ({
     orientation: "vertical",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$4,
+      fileName: _jsxFileName$5,
       lineNumber: 25,
       columnNumber: 5
     }
@@ -8602,7 +8803,7 @@ const AdvancedOption = ({
     onClick: () => optionHandler(option.value),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$4,
+      fileName: _jsxFileName$5,
       lineNumber: 27,
       columnNumber: 9
     }
@@ -8678,7 +8879,7 @@ const DateNumber = styled('div', {
 });
 DateNumber.displayName = 'DateNumber';
 
-var _jsxFileName$3 = "/home/omegalord666/work/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$1 = ({
   selectable,
@@ -8737,13 +8938,13 @@ const ArrowButton$1 = styled('button', {
     cursor: 'default'
   }
 });
-const WeekdayBox$1 = styled(Box$2, {
+const WeekdayBox$1 = styled(Box$1, {
   display: 'inline-block',
   width: '42px',
   textAlign: 'center',
   marginBottom: '$spacing-05'
 });
-const CalendarsContainer$1 = styled(Box$2, {
+const CalendarsContainer$1 = styled(Box$1, {
   width: '100%',
   padding: '$spacing-04',
   display: 'inline-flex',
@@ -8758,7 +8959,7 @@ const CalendarsContainer$1 = styled(Box$2, {
   }
 });
 const CalendarItemContainer$1 = styled(Flex, {});
-const DateContainer$1 = styled(Box$2, {
+const DateContainer$1 = styled(Box$1, {
   width: '100%',
   position: 'relative',
   display: 'inline-block',
@@ -8767,7 +8968,7 @@ const DateContainer$1 = styled(Box$2, {
     width: 'unset'
   }
 });
-const TitleButton$1 = styled(Heading, {
+const TitleButton$1 = styled(Heading$1, {
   padding: '2px $spacing-04',
   '&:hover': {
     backgroundColor: '$bgSuccess',
@@ -8791,7 +8992,7 @@ const TitleButton$1 = styled(Heading, {
     }
   }
 });
-const MonthButton$1 = styled(Text, {
+const MonthButton$1 = styled(Text$1, {
   minWidth: '90px',
   textAlign: 'center',
   borderRadius: '$md',
@@ -8876,7 +9077,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 205,
         columnNumber: 7
       }
@@ -8890,7 +9091,7 @@ const CalendarBox = ({
       disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 218,
         columnNumber: 7
       }
@@ -8908,7 +9109,7 @@ const CalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 250,
         columnNumber: 7
       }
@@ -8916,7 +9117,7 @@ const CalendarBox = ({
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 266,
         columnNumber: 9
       }
@@ -8934,7 +9135,7 @@ const CalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 272,
         columnNumber: 7
       }
@@ -8942,7 +9143,7 @@ const CalendarBox = ({
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 293,
         columnNumber: 9
       }
@@ -8958,7 +9159,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 299,
         columnNumber: 7
       }
@@ -8971,17 +9172,17 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        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$3,
+        fileName: _jsxFileName$4,
         lineNumber: 312,
         columnNumber: 15
       }
@@ -8992,7 +9193,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 318,
         columnNumber: 13
       }
@@ -9005,17 +9206,17 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        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$3,
+        fileName: _jsxFileName$4,
         lineNumber: 332,
         columnNumber: 15
       }
@@ -9030,7 +9231,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 354,
         columnNumber: 7
       }
@@ -9048,7 +9249,7 @@ const CalendarBox = ({
           },
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$3,
+            fileName: _jsxFileName$4,
             lineNumber: 365,
             columnNumber: 17
           }
@@ -9070,7 +9271,7 @@ const CalendarBox = ({
         variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 382,
           columnNumber: 15
         }
@@ -9087,7 +9288,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 398,
         columnNumber: 7
       }
@@ -9101,7 +9302,7 @@ const CalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 406,
         columnNumber: 11
       }
@@ -9119,7 +9320,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 429,
         columnNumber: 7
       }
@@ -9133,7 +9334,7 @@ const CalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 437,
         columnNumber: 11
       }
@@ -9149,7 +9350,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 458,
         columnNumber: 7
       }
@@ -9166,7 +9367,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 466,
         columnNumber: 11
       }
@@ -9178,7 +9379,7 @@ const CalendarBox = ({
       key: `${calendar.month}${calendar.year}${weekday}`,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 488,
         columnNumber: 7
       }
@@ -9189,7 +9390,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 489,
         columnNumber: 9
       }
@@ -9197,10 +9398,10 @@ const CalendarBox = ({
   };
 
   const renderFooter = () => {
-    return /*#__PURE__*/React__default.createElement(Box$2, {
+    return /*#__PURE__*/React__default.createElement(Box$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 503,
         columnNumber: 7
       }
@@ -9210,7 +9411,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 504,
         columnNumber: 9
       }
@@ -9219,11 +9420,11 @@ const CalendarBox = ({
       align: "center",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        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: {
@@ -9231,7 +9432,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 506,
         columnNumber: 11
       }
@@ -9239,7 +9440,7 @@ const CalendarBox = ({
       gap: 3,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 517,
         columnNumber: 11
       }
@@ -9252,7 +9453,7 @@ const CalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 518,
         columnNumber: 13
       }
@@ -9264,7 +9465,7 @@ const CalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 528,
         columnNumber: 13
       }
@@ -9276,7 +9477,7 @@ const CalendarBox = ({
       css: containerStyle,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 545,
         columnNumber: 7
       }
@@ -9284,14 +9485,14 @@ const CalendarBox = ({
       orientation: "vertical",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 548,
         columnNumber: 25
       }
-    }), /*#__PURE__*/React__default.createElement(Box$2, {
+    }), /*#__PURE__*/React__default.createElement(Box$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 549,
         columnNumber: 9
       }
@@ -9299,7 +9500,7 @@ const CalendarBox = ({
       gap: 5,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 551,
         columnNumber: 11
       }
@@ -9307,7 +9508,7 @@ const CalendarBox = ({
       key: `${calendar.month}${calendar.year}`,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 553,
         columnNumber: 15
       }
@@ -9318,14 +9519,14 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 555,
         columnNumber: 19
       }
     }), /*#__PURE__*/React__default.createElement(DateContainer$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 562,
         columnNumber: 17
       }
@@ -9335,7 +9536,7 @@ const CalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$3,
+        fileName: _jsxFileName$4,
         lineNumber: 563,
         columnNumber: 19
       }
@@ -9345,7 +9546,7 @@ const CalendarBox = ({
   return null;
 };
 
-var _jsxFileName$2 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/MobileCalendar.js";
+var _jsxFileName$3 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/components/MobileCalendar.js";
 
 const getVariant = ({
   selectable,
@@ -9404,7 +9605,7 @@ const ArrowButton = styled('button', {
     cursor: 'default'
   }
 });
-const WeekdayBox = styled(Box$2, {
+const WeekdayBox = styled(Box$1, {
   display: 'inline-block',
   width: '45.5px',
   textAlign: 'center',
@@ -9413,7 +9614,7 @@ const WeekdayBox = styled(Box$2, {
     width: '32px'
   }
 });
-const DatePickerContainer = styled(Box$2, {
+const DatePickerContainer = styled(Box$1, {
   width: '100%',
   height: '100%',
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
@@ -9422,7 +9623,7 @@ const DatePickerContainer = styled(Box$2, {
     width: 'unset'
   }
 });
-const CalendarsContainer = styled(Box$2, {
+const CalendarsContainer = styled(Box$1, {
   width: '100%',
   overflow: 'auto',
   padding: '$spacing-02 20px $spacing-05',
@@ -9447,7 +9648,7 @@ const CalendarItemContainer = styled(Flex, {
   height: '100%',
   paddingBottom: '160px'
 });
-const DateContainer = styled(Box$2, {
+const DateContainer = styled(Box$1, {
   width: '100%',
   position: 'relative',
   display: 'inline-block',
@@ -9462,7 +9663,7 @@ const FooterContainer = styled(Flex, {
   boxShadow: '0px -1px 8px rgba(0, 0, 0, 0.12)',
   padding: '$spacing-05 $spacing-04'
 });
-const TitleButton = styled(Heading, {
+const TitleButton = styled(Heading$1, {
   padding: '2px $spacing-04',
   '&:hover': {
     backgroundColor: '$bgSuccess',
@@ -9486,7 +9687,7 @@ const TitleButton = styled(Heading, {
     }
   }
 });
-const MonthButton = styled(Text, {
+const MonthButton = styled(Text$1, {
   minWidth: '90px',
   textAlign: 'center',
   borderRadius: '$md',
@@ -9576,7 +9777,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 241,
         columnNumber: 7
       }
@@ -9590,7 +9791,7 @@ const MobileCalendarBox = ({
       disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 254,
         columnNumber: 7
       }
@@ -9608,7 +9809,7 @@ const MobileCalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 286,
         columnNumber: 7
       }
@@ -9616,7 +9817,7 @@ const MobileCalendarBox = ({
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 302,
         columnNumber: 9
       }
@@ -9634,7 +9835,7 @@ const MobileCalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 308,
         columnNumber: 7
       }
@@ -9642,7 +9843,7 @@ const MobileCalendarBox = ({
       color: "currentColor",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 329,
         columnNumber: 9
       }
@@ -9658,7 +9859,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 335,
         columnNumber: 7
       }
@@ -9673,7 +9874,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 347,
         columnNumber: 7
       }
@@ -9691,7 +9892,7 @@ const MobileCalendarBox = ({
           },
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$2,
+            fileName: _jsxFileName$3,
             lineNumber: 358,
             columnNumber: 17
           }
@@ -9714,7 +9915,7 @@ const MobileCalendarBox = ({
         variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 375,
           columnNumber: 15
         }
@@ -9731,7 +9932,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 392,
         columnNumber: 7
       }
@@ -9745,7 +9946,7 @@ const MobileCalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 400,
         columnNumber: 11
       }
@@ -9763,7 +9964,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 423,
         columnNumber: 7
       }
@@ -9777,7 +9978,7 @@ const MobileCalendarBox = ({
       })),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 431,
         columnNumber: 11
       }
@@ -9793,7 +9994,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 452,
         columnNumber: 7
       }
@@ -9810,7 +10011,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 460,
         columnNumber: 11
       }
@@ -9821,7 +10022,7 @@ const MobileCalendarBox = ({
     return /*#__PURE__*/React__default.createElement(Flex, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 482,
         columnNumber: 7
       }
@@ -9829,7 +10030,7 @@ const MobileCalendarBox = ({
       key: `${calendar.month}${calendar.year}${weekday}`,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 484,
         columnNumber: 11
       }
@@ -9840,7 +10041,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 485,
         columnNumber: 13
       }
@@ -9854,7 +10055,7 @@ const MobileCalendarBox = ({
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 501,
         columnNumber: 7
       }
@@ -9864,29 +10065,29 @@ const MobileCalendarBox = ({
       onClick: () => setExpandAdvanceView(!expandAdvanceView),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 504,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__default.createElement(Text, {
+    }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "contentButton",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 505,
         columnNumber: 15
       }
     }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default.createElement(ChevronDownOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 506,
         columnNumber: 36
       }
     }) : /*#__PURE__*/React__default.createElement(ChevronUpOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 506,
         columnNumber: 61
       }
@@ -9896,16 +10097,16 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 509,
         columnNumber: 13
       }
-    })), /*#__PURE__*/React__default.createElement(Text, {
+    })), /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "status",
       color: selected.length > 1 ? 'primary' : 'disable',
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 516,
         columnNumber: 9
       }
@@ -9913,7 +10114,7 @@ const MobileCalendarBox = ({
       gap: 3,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 521,
         columnNumber: 9
       }
@@ -9928,7 +10129,7 @@ const MobileCalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 522,
         columnNumber: 11
       }
@@ -9942,7 +10143,7 @@ const MobileCalendarBox = ({
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 534,
         columnNumber: 11
       }
@@ -9953,7 +10154,7 @@ const MobileCalendarBox = ({
     return /*#__PURE__*/React__default.createElement(DatePickerContainer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 552,
         columnNumber: 7
       }
@@ -9961,7 +10162,7 @@ const MobileCalendarBox = ({
       css: containerStyle,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 553,
         columnNumber: 9
       }
@@ -9970,7 +10171,7 @@ const MobileCalendarBox = ({
       gap: 5,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 554,
         columnNumber: 11
       }
@@ -9978,7 +10179,7 @@ const MobileCalendarBox = ({
       key: `${calendar.month}${calendar.year}`,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 556,
         columnNumber: 15
       }
@@ -9988,7 +10189,7 @@ const MobileCalendarBox = ({
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$2,
+        fileName: _jsxFileName$3,
         lineNumber: 558,
         columnNumber: 17
       }
@@ -10001,7 +10202,7 @@ const MobileCalendarBox = ({
 const _excluded = ["multiDatePicker", "onChange", "onCancel", "advanceView", "selected", "disabled"],
       _excluded2 = ["multiDatePicker", "onChange", "onCancel", "advanceView", "selected", "disabled"],
       _excluded3 = ["type"];
-var _jsxFileName$1 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/DatePicker.js";
+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';
@@ -10057,7 +10258,7 @@ const CalendarPicker = _ref => {
   }, dayzedData, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$1,
+      fileName: _jsxFileName$2,
       lineNumber: 41,
       columnNumber: 5
     }
@@ -10131,7 +10332,7 @@ const CalendarRangePicker = _ref2 => {
   }, dayzedData, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$1,
+      fileName: _jsxFileName$2,
       lineNumber: 100,
       columnNumber: 5
     }
@@ -10146,7 +10347,7 @@ const CalendarRangePicker = _ref2 => {
   }, dayzedData, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$1,
+      fileName: _jsxFileName$2,
       lineNumber: 111,
       columnNumber: 5
     }
@@ -10163,7 +10364,7 @@ const DatePicker = props => {
     return /*#__PURE__*/React__default.createElement(CalendarRangePicker, _extends({}, otherProps, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$1,
+        fileName: _jsxFileName$2,
         lineNumber: 127,
         columnNumber: 12
       }
@@ -10173,14 +10374,14 @@ const DatePicker = props => {
   return /*#__PURE__*/React__default.createElement(CalendarPicker, _extends({}, otherProps, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$1,
+      fileName: _jsxFileName$2,
       lineNumber: 129,
       columnNumber: 10
     }
   }));
 };
 
-var _jsxFileName = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/InputDatePicker.js";
+var _jsxFileName$1 = "/home/omegalord666/work/majoo-ui/packages/react/src/components/datePicker/InputDatePicker.js";
 const UPDATE = 'UPDATE';
 const TODAY = 'TODAY';
 const YESTERDAY = 'YESTERDAY';
@@ -10343,7 +10544,7 @@ function InputDatePicker({
     size: size,
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 111,
       columnNumber: 5
     }
@@ -10351,14 +10552,14 @@ function InputDatePicker({
     children: /*#__PURE__*/React__default.createElement(CalendarOutline, {
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 112,
         columnNumber: 35
       }
     }),
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 112,
       columnNumber: 7
     }
@@ -10367,7 +10568,7 @@ function InputDatePicker({
     value: getInputPickerValue(type, selectedDate),
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 113,
       columnNumber: 7
     }
@@ -10382,7 +10583,7 @@ function InputDatePicker({
       }),
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 121,
         columnNumber: 11
       }
@@ -10405,7 +10606,7 @@ function InputDatePicker({
     onCancel: () => setOpenPicker(false),
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 117,
       columnNumber: 5
     }
@@ -10416,22 +10617,22 @@ function InputDatePicker({
     onOpenChange: setOpenPicker,
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 140,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 141,
       columnNumber: 7
     }
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, /*#__PURE__*/React__default.createElement(Box$1, {
     css: css,
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 142,
       columnNumber: 9
     }
@@ -10442,15 +10643,15 @@ function InputDatePicker({
     onOpenAutoFocus: e => e.preventDefault(),
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 144,
       columnNumber: 7
     }
-  }, renderDatePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$2, {
+  }, renderDatePicker())) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Box$1, {
     css: css,
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 150,
       columnNumber: 7
     }
@@ -10459,7 +10660,7 @@ function InputDatePicker({
     onOpenChange: setOpenPicker,
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 151,
       columnNumber: 7
     }
@@ -10471,7 +10672,7 @@ function InputDatePicker({
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName,
+      fileName: _jsxFileName$1,
       lineNumber: 152,
       columnNumber: 9
     }
@@ -10490,4 +10691,335 @@ InputDatePicker.propTypes = {
 };
 InputDatePicker.displayName = 'InputDatePicker';
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, Alert, AlertDescription, AlertIcon, AlertTitle, Avatar, Badge, Box$2 as Box, BoxComponent, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$1 as Button, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, Card, CardComponent, CardLineColor, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle, DrawerTrigger, Flex, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, Image, InputCheckbox, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputPrefix, InputRadio, InputRadioGroup, InputRightAddon, InputRightElement, InputSearchbox, Select as InputSelect, SelectTag as InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, MajooProvider, NotificationBadge, Paper, PaperComponent, Paragraph, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverTrigger, Progress, RANGE_PICKER, SINGLE_PICKER, Separator, Slider, StyledTitle$1 as StyledTitle, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, ToastContext, Tooltip };
+function sliceIntoChunks(arr, chunkSize) {
+  const res = [];
+
+  for (let i = 0; i < arr.length; i += chunkSize) {
+    const chunk = arr.slice(i, i + chunkSize);
+    res.push(chunk);
+  }
+
+  return res;
+}
+
+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 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'
+      }
+    }
+  }
+});
+
+const addOnCellStyle = id => {
+  switch (id) {
+    case 'expander':
+    case 'menu':
+      return {
+        style: {
+          width: '24px'
+        }
+      };
+
+    case 'selection':
+      return {
+        style: {
+          width: '16px'
+        }
+      };
+
+    default:
+      return {};
+  }
+};
+
+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: 155,
+      columnNumber: 5
+    }
+  }, /*#__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: 157,
+      columnNumber: 9
+    }
+  }, 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 { 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 };