@majoo-ui/react 1.26.0 → 1.27.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/helpers'), require('react-transition-group'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-switch'), require('downshift'), require('@radix-ui/react-popover'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/helpers', 'react-transition-group', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', '@radix-ui/react-switch', 'downshift', '@radix-ui/react-popover', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.helpers, global.reactTransitionGroup, global.MajooIcons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.Downshift, global.PopoverPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed));
-})(this, (function (exports, React, PropTypes, react, core, helpers, reactTransitionGroup, MajooIcons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, PopoverPrimitive, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/helpers'), require('react-transition-group'), require('@majoo-ui/icons'), require('react/jsx-runtime'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('@radix-ui/react-switch'), require('downshift'), require('@radix-ui/react-popover'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('react-dom'), require('react-table')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/helpers', 'react-transition-group', '@majoo-ui/icons', 'react/jsx-runtime', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', '@radix-ui/react-switch', 'downshift', '@radix-ui/react-popover', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'react-dom', 'react-table'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.helpers, global.reactTransitionGroup, global.MajooIcons, global.jsxRuntime, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.SwitchPrimitive, global.Downshift, global.PopoverPrimitive, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.ReactDOM, global.reactTable));
+})(this, (function (exports, React, PropTypes, react, core, helpers, reactTransitionGroup, MajooIcons, jsxRuntime, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, SwitchPrimitive, Downshift, PopoverPrimitive, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, reactDom, reactTable) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,7 +44,7 @@
   var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
   var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
-  var _jsxFileName$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,
@@ -54,7 +54,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$I,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -1159,7 +1159,7 @@
       bgDark: '#FFFFFF'
     }
   });
-  core.foundations.colors;
+  const colors = core.foundations.colors;
 
   const normalize = {
     '*,::before,::after': {
@@ -1884,13 +1884,13 @@
   handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
   const _excluded$s = ["className", "children", "color", "textColor", "padding"];
-  var _jsxFileName$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,
@@ -1910,19 +1910,19 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$H,
         lineNumber: 12,
         columnNumber: 3
       }
     }), children);
   };
-  Box$2.propTypes = {
+  Box$1.propTypes = {
     textColor: PropTypes__default["default"].string,
     className: PropTypes__default["default"].string,
     color: PropTypes__default["default"].string,
     padding: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
   };
-  Box$2.defaultProps = {
+  Box$1.defaultProps = {
     className: '',
     color: 'none',
     textColor: 'inherit'
@@ -2060,7 +2060,7 @@
 
   const _excluded$r = ["children"],
         _excluded2$3 = ["children"];
-  var _jsxFileName$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: {
@@ -2245,7 +2245,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$G,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2301,7 +2301,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$G,
         lineNumber: 230,
         columnNumber: 5
       }
@@ -2319,7 +2319,7 @@
   GridItem.displayName = 'Grid Item';
 
   const _excluded$q = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
-  var _jsxFileName$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',
@@ -2396,7 +2396,25 @@
       backgroundColor: '$gray50'
     }
   };
-  const StyledIcon$3 = styled('div', {
+  const ButtonTableMenu = {
+    backgroundColor: '$bgWhite',
+    color: '$textPrimary',
+    padding: '$spacing-04 $spacing-05',
+    width: '180px',
+    textAlign: 'left',
+    border: 'none',
+    borderRadius: 0,
+    '&:focus': {
+      outline: 'none'
+    },
+    '&:hover': {
+      backgroundColor: '$gray50'
+    },
+    '&:active': {
+      backgroundColor: '$gray100'
+    }
+  };
+  const StyledIcon$2 = styled('div', {
     verticalAlign: 'middle'
   });
   const StyledIconLeft$2 = styled('div', {
@@ -2451,7 +2469,8 @@
         ghost: Object.assign({}, GhostButton),
         negative: Object.assign({}, ButtonNegative),
         'negative-secondary': Object.assign({}, ButtonNegativeSecondary),
-        headerMenu: Object.assign({}, ButtonHeaderMenu)
+        headerMenu: Object.assign({}, ButtonHeaderMenu),
+        tableMenu: Object.assign({}, ButtonTableMenu)
       },
       size: {
         xs: {
@@ -2539,29 +2558,29 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
-        lineNumber: 220,
+        fileName: _jsxFileName$F,
+        lineNumber: 240,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["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["default"].createElement(StyledIcon$3, {
+    }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
-        lineNumber: 232,
+        fileName: _jsxFileName$F,
+        lineNumber: 252,
         columnNumber: 15
       }
     }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
-        lineNumber: 233,
+        fileName: _jsxFileName$F,
+        lineNumber: 253,
         columnNumber: 34
       }
     }, rightIcon) : null);
@@ -2587,7 +2606,7 @@
   };
 
   const _excluded$p = ["id", "message", "dismissAfter", "variant", "onAction", "actionText", "onRemove"];
-  var _jsxFileName$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;
@@ -2680,7 +2699,7 @@
       }
     }
   });
-  const Text$1 = styled('span', {
+  const Text$2 = styled('span', {
     display: 'block'
   });
 
@@ -2723,7 +2742,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -2733,7 +2752,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 144,
         columnNumber: 9
       }
@@ -2741,7 +2760,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 145,
         columnNumber: 11
       }
@@ -2752,14 +2771,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 146,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__namespace.createElement(Text$1, {
+    }, /*#__PURE__*/React__namespace.createElement(Text$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 152,
         columnNumber: 15
       }
@@ -2769,7 +2788,7 @@
       css: {},
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 155,
         columnNumber: 15
       }
@@ -2784,7 +2803,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$E,
         lineNumber: 157,
         columnNumber: 17
       }
@@ -2807,8 +2826,8 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.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,
@@ -2824,7 +2843,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$D,
         lineNumber: 19,
         columnNumber: 5
       }
@@ -2832,7 +2851,7 @@
       padding: 0,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$D,
         lineNumber: 20,
         columnNumber: 7
       }
@@ -2844,7 +2863,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$A,
+          fileName: _jsxFileName$D,
           lineNumber: 24,
           columnNumber: 13
         }
@@ -2853,7 +2872,7 @@
   };
 
   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 = ({
@@ -2890,7 +2909,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$C,
         lineNumber: 40,
         columnNumber: 5
       }
@@ -2898,14 +2917,14 @@
       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,
@@ -2918,14 +2937,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$B,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$B,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -2977,7 +2996,7 @@
       return t;
   }
 
-  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__*/React.createContext();
 
   const AlertProvider = ({
@@ -2994,14 +3013,14 @@
       },
       __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,
@@ -3129,26 +3148,28 @@
       variant: 'subtle'
     }
   });
-  const AlertTitle = styled('h3', {
-    fontWeight: 'bold',
-    fontSize: '$section-title'
-  });
-  const AlertDescription = styled('p', {
-    fontSize: '$section-sub-title'
-  });
+  const AlertTitle = styled(Heading$1);
+  AlertTitle.defaultProps = {
+    as: 'h3',
+    heading: 'pageTitle'
+  };
+  const AlertDescription = styled(Text$1);
+  AlertDescription.defaultProps = {
+    as: 'p'
+  };
   const AlertBase = props => {
     return /*#__PURE__*/React__default["default"].createElement(AlertProvider, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 158,
+        fileName: _jsxFileName$z,
+        lineNumber: 163,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(AlertContent, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 159,
+        fileName: _jsxFileName$z,
+        lineNumber: 164,
         columnNumber: 7
       }
     }), props.children));
@@ -3165,8 +3186,8 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 170,
+        fileName: _jsxFileName$z,
+        lineNumber: 175,
         columnNumber: 10
       }
     }));
@@ -3189,8 +3210,8 @@
             color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$w,
-              lineNumber: 179,
+              fileName: _jsxFileName$z,
+              lineNumber: 184,
               columnNumber: 16
             }
           });
@@ -3200,8 +3221,8 @@
             color: variantAlert === 'solid' ? 'white' : ' #DF2A36',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$w,
-              lineNumber: 181,
+              fileName: _jsxFileName$z,
+              lineNumber: 186,
               columnNumber: 16
             }
           });
@@ -3211,8 +3232,8 @@
             color: variantAlert === 'solid' ? 'white' : '#0197F4',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$w,
-              lineNumber: 183,
+              fileName: _jsxFileName$z,
+              lineNumber: 188,
               columnNumber: 16
             }
           });
@@ -3222,8 +3243,8 @@
             color: variantAlert === 'solid' ? 'white' : ' #FE7F2D',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$w,
-              lineNumber: 185,
+              fileName: _jsxFileName$z,
+              lineNumber: 190,
               columnNumber: 16
             }
           });
@@ -3233,8 +3254,8 @@
             color: variantAlert === 'solid' ? 'white' : '#1F7A2B',
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$w,
-              lineNumber: 187,
+              fileName: _jsxFileName$z,
+              lineNumber: 192,
               columnNumber: 16
             }
           });
@@ -3244,8 +3265,8 @@
     return /*#__PURE__*/React__default["default"].createElement(AlertIconStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 190,
+        fileName: _jsxFileName$z,
+        lineNumber: 195,
         columnNumber: 10
       }
     }), Icon(statusAlert));
@@ -3269,7 +3290,7 @@
   AlertTitle.displayName = 'AlertTitle';
 
   const _excluded$n = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-  var _jsxFileName$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',
@@ -3330,7 +3351,7 @@
     color: '$textSecondary',
     fontWeight: 600
   });
-  const StyledIcon$2 = styled('span', {
+  const StyledIcon$1 = styled('span', {
     background: '$bgGreen',
     borderRadius: '50%',
     width: '34px',
@@ -3417,7 +3438,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$y,
         lineNumber: 103,
         columnNumber: 5
       }
@@ -3425,30 +3446,30 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$y,
         lineNumber: 114,
         columnNumber: 7
       }
     }), title !== '' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledTitle$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$y,
         lineNumber: 118,
         columnNumber: 13
       }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
       background: color,
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$y,
         lineNumber: 119,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
+        fileName: _jsxFileName$y,
         lineNumber: 125,
         columnNumber: 13
       }
@@ -3475,6 +3496,8 @@
   };
 
   const Text = styled('p', {
+    margin: 0,
+    padding: 0,
     variants: {
       variant: {
         link: {
@@ -3569,10 +3592,11 @@
   Text.defaultProps = {
     as: 'p'
   };
+  var Text$1 = Text;
 
-  Text.displayName = 'Text';
+  Text$1.displayName = 'Text';
 
-  const Heading = styled(Text, {
+  const Heading = styled(Text$1, {
     variants: {
       heading: {
         h1: {
@@ -3642,10 +3666,11 @@
     heading: 'h1',
     as: 'h1'
   };
+  var Heading$1 = Heading;
 
-  Heading.displayName = "Heading";
+  Heading$1.displayName = "Heading";
 
-  const Paragraph = styled(Text, {
+  const Paragraph = styled(Text$1, {
     variants: {
       paragraph: {
         shortContentBold: {
@@ -3686,7 +3711,7 @@
   Paragraph.displayName = 'Paragraph';
 
   const _excluded$m = ["children"];
-  var _jsxFileName$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': {
@@ -3707,7 +3732,7 @@
     display: 'inline-flex',
     alignItems: 'center'
   });
-  const BreadcrumbLinkStyle = styled(Text, {
+  const BreadcrumbLinkStyle = styled(Text$1, {
     '&:hover': {
       textDecoration: 'underline'
     },
@@ -3732,7 +3757,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$x,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -3749,14 +3774,14 @@
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$x,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$x,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -3776,7 +3801,7 @@
     return jsxRuntime.jsx(BreadcrumbLinkBase, __assign({}, props), void 0);
   };
 
-  const Badge = styled(Text, {
+  const Badge = styled(Text$1, {
     // Reset
     alignItems: 'center',
     appearance: 'none',
@@ -3961,7 +3986,7 @@
   Badge.displayName = 'Badge';
 
   const _excluded$l = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$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__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -3992,7 +4017,7 @@
     lineHeight: 1,
     fontWeight: 600
   });
-  const StyledIcon$1 = styled('div', {
+  const StyledIcon = styled('div', {
     fontSize: '20px'
   });
   function Avatar(_ref) {
@@ -4014,7 +4039,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4024,7 +4049,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4032,21 +4057,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 48,
         columnNumber: 7
       }
-    }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
+    }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(MajooIcons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$w,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4064,7 +4089,7 @@
   };
 
   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',
@@ -4102,7 +4127,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$v,
         lineNumber: 20,
         columnNumber: 9
       }
@@ -4123,7 +4148,7 @@
   };
 
   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,
@@ -4235,7 +4260,7 @@
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4243,7 +4268,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4251,7 +4276,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4260,7 +4285,7 @@
       css: color === 'dark' ? dark : ligth,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -4268,7 +4293,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$r,
+        fileName: _jsxFileName$u,
         lineNumber: 95,
         columnNumber: 9
       }
@@ -4285,7 +4310,7 @@
   };
 
   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 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -4419,7 +4444,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$t,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -4432,7 +4457,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$q,
+        fileName: _jsxFileName$t,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -4456,8 +4481,8 @@
   };
 
   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__namespace.Root, Text, {
+  var _jsxFileName$s = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/FormLabel/Label.js";
+  const StyledLabel = styled(LabelPrimitive__namespace.Root, Text$1, {
     display: 'inline-block',
     fontSize: '$label',
     lineHeight: '$label',
@@ -4493,7 +4518,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -4503,7 +4528,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -4512,7 +4537,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -4527,7 +4552,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -4535,23 +4560,23 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 57,
         columnNumber: 13
       }
-    }))), maxCount && /*#__PURE__*/React__default["default"].createElement(Text, {
+    }))), maxCount && /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "label",
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$s,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -4568,8 +4593,8 @@
   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: {
@@ -4594,7 +4619,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$o,
+        fileName: _jsxFileName$r,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -4606,9 +4631,9 @@
   };
   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__namespace.createElement("svg", _extends({
+  const CheckOutline$1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     xmlSpace: "preserve",
     width: "1em",
@@ -4624,7 +4649,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$q,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -4636,7 +4661,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$n,
+      fileName: _jsxFileName$q,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -4648,14 +4673,62 @@
     },
     __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__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: "1em",
+    height: "1em",
+    style: {
+      shapeRendering: 'geometricPrecision',
+      textRendering: 'geometricPrecision',
+      imageRendering: 'optimizeQuality',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd'
+    },
+    viewBox: "0 0 18.22 18.22"
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 4,
+      columnNumber: 3
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M15.61 0H2.6A2.595 2.595 0 0 0 0 2.6v13.01a2.595 2.595 0 0 0 2.6 2.6h13.01a2.595 2.595 0 0 0 2.6-2.6V2.6a2.595 2.595 0 0 0-2.6-2.6z",
+    style: {
+      fill: 'none',
+      fillRule: 'nonzero'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
+      lineNumber: 19,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    },
+    d: "M14.31 10.41H3.9v-2.6h10.41z",
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$p,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  const _excluded$f = ["id", "isChecked", "isIndeterminate", "isDisabled", "onCheckedChange", "label"];
-  var _jsxFileName$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__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -4704,89 +4777,107 @@
     }
   });
 
-  const InputCheckbox = _ref => {
+  const Checkbox = _ref => {
     let {
       id,
-      isChecked,
-      isIndeterminate,
-      isDisabled,
-      onCheckedChange,
-      label
+      checked,
+      indeterminate,
+      disabled,
+      onCheckedChange
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
-    return /*#__PURE__*/React__default["default"].createElement(Flex, {
-      align: "start",
-      gap: 4,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$m,
-        lineNumber: 57,
-        columnNumber: 5
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledCheckbox, _extends({
       id: id,
-      disabled: isDisabled,
-      checked: isChecked,
+      disabled: disabled,
+      checked: checked || indeterminate,
       onCheckedChange: onCheckedChange
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$m,
-        lineNumber: 58,
-        columnNumber: 7
+        fileName: _jsxFileName$o,
+        lineNumber: 56,
+        columnNumber: 3
       }
     }), /*#__PURE__*/React__default["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["default"].createElement(MajooIcons.MinusOutline, {
+    }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$m,
-        lineNumber: 59,
-        columnNumber: 45
+        fileName: _jsxFileName$o,
+        lineNumber: 63,
+        columnNumber: 39
       }
-    }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline, {
+    }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$m,
-        lineNumber: 59,
-        columnNumber: 64
+        fileName: _jsxFileName$o,
+        lineNumber: 63,
+        columnNumber: 58
       }
-    }))), /*#__PURE__*/React__default["default"].createElement(FormLabel, {
-      htmlFor: id,
+    })));
+  };
+
+  const InputCheckbox = _ref2 => {
+    let props = Object.assign({}, _ref2);
+    return props.label ? /*#__PURE__*/React__default["default"].createElement(Flex, {
+      align: "start",
+      gap: 4,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 69,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 70,
+        columnNumber: 7
+      }
+    })), /*#__PURE__*/React__default["default"].createElement(FormLabel, {
+      htmlFor: props.id,
       css: {
         fontSize: '$long-content-regular',
         lineHeight: '$long-content-regular',
         letterSpacing: '$long-content-regular',
         fontWeight: '400',
-        color: isDisabled ? '$textDisable' : '$textPrimary',
+        color: props.disabled ? '$textDisable' : '$textPrimary',
         cursor: 'default'
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$m,
-        lineNumber: 61,
+        fileName: _jsxFileName$o,
+        lineNumber: 71,
         columnNumber: 7
       }
-    }, label));
+    }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$o,
+        lineNumber: 86,
+        columnNumber: 5
+      }
+    }));
   };
 
   InputCheckbox.propTypes = {
-    isChecked: PropTypes__default["default"].bool,
-    isIndeterminate: PropTypes__default["default"].bool,
-    isDisabled: PropTypes__default["default"].bool,
+    checked: PropTypes__default["default"].bool,
+    indeterminate: PropTypes__default["default"].bool,
+    disabled: PropTypes__default["default"].bool,
     onCheckedChange: PropTypes__default["default"].func,
     label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
   };
   InputCheckbox.displayName = 'InputCheckbox';
 
   const _excluded$e = ["children", "size"];
-  var _jsxFileName$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%',
@@ -4923,7 +5014,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$l,
+        fileName: _jsxFileName$n,
         lineNumber: 143,
         columnNumber: 10
       }
@@ -4950,7 +5041,7 @@
     disabled: PropTypes__default["default"].bool
   };
 
-  const InputAddon = styled(Text, {
+  const InputAddon = styled(Text$1, {
     backgroundColor: '$formDisable',
     flex: '0 0 auto',
     width: 'auto',
@@ -5016,7 +5107,7 @@
     as: 'div'
   };
 
-  const InputLetter = styled(Text, {
+  const InputLetter = styled(Text$1, {
     flex: '0 0 auto',
     width: 'auto',
     display: 'flex',
@@ -5226,7 +5317,7 @@
   InputRadioGroup.displayName = 'InputRadioGroup';
 
   const _excluded$d = ["id", "disabled"];
-  var _jsxFileName$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',
@@ -5310,7 +5401,7 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$m,
         lineNumber: 82,
         columnNumber: 3
       }
@@ -5320,14 +5411,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$m,
         lineNumber: 83,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$m,
         lineNumber: 84,
         columnNumber: 7
       }
@@ -5344,7 +5435,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$k,
+        fileName: _jsxFileName$m,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -5388,7 +5479,7 @@
   InputRightElement.name = 'InputRightElement';
 
   const _excluded$c = ["className", "children", "onClick", "color", "size", "leftIcon", "rightIcon"];
-  var _jsxFileName$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',
@@ -5476,21 +5567,21 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$j,
+        fileName: _jsxFileName$l,
         lineNumber: 54,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["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["default"].createElement(StyledIconRight$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$j,
+        fileName: _jsxFileName$l,
         lineNumber: 65,
         columnNumber: 34
       }
@@ -5509,10 +5600,13 @@
     size: 'sm'
   };
 
-  const _excluded$b = ["className", "size", "isInvalid", "placeholder", "onChange", "value", "disabled", "readOnly"];
-  var _jsxFileName$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',
@@ -5521,7 +5615,6 @@
     borderRadius: '$lg',
     color: '$textPrimary',
     lineHeight: '$short-content-regular',
-    width: '100%',
     fontSize: '$short-content-regular',
     fontWeight: '400',
     '&:focus': {
@@ -5551,11 +5644,13 @@
       },
       size: {
         sm: {
-          height: 32,
+          height: 'auto',
+          minheight: 32,
           padding: '2px $spacing-05'
         },
         lg: {
-          height: 40,
+          height: 'auto',
+          minheight: 40,
           padding: '6px $spacing-05'
         }
       },
@@ -5572,8 +5667,18 @@
       }
     }
   });
+  const TagContainer = styled(Box$1, {
+    display: 'flex',
+    position: 'relative',
+    flexWrap: 'wrap',
+    maxWidth: '100%'
+  });
   const Input$2 = styled('input', {
     display: 'flex',
+    position: 'relative',
+    flex: 'auto',
+    flexWrap: 'wrap',
+    maxWidth: '100%',
     appearance: 'none',
     backgroundolor: 'none',
     border: 'none',
@@ -5582,11 +5687,10 @@
     cursor: 'text',
     outline: 'none',
     letterSpacing: '$short-content-regular',
-    width: '100%',
     '&:disabled': {
       backgroundColor: 'transparent',
       color: '$textDisable',
-      cursor: 'default',
+      cursor: 'not-allowed',
       '&::placeholder': {
         color: '$textDisable'
       }
@@ -5613,23 +5717,24 @@
       onChange,
       value,
       disabled,
-      readOnly
+      readOnly,
+      max
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
 
     const [tags, setTags] = React__default["default"].useState(value || []);
 
     const addTags = event => {
-      if (event.key === 'Enter' && event.target.value !== '' && readOnly === false) {
+      if (event.key === 'Enter' && event.target.value !== '' && readOnly === false && max !== tags.length) {
         setTags([...tags, event.target.value]);
         event.target.value = '';
       }
     };
 
-    const removeTags = index => {
+    const removeTags = (index, key) => {
       if (disabled || readOnly) {
         return tags;
-      } else {
+      } else if (key === 'removeTag' || key === 'Backspace') {
         setTags([...tags.filter(tag => tags.indexOf(tag) !== index)]);
       }
     };
@@ -5645,27 +5750,26 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 105,
+        fileName: _jsxFileName$k,
+        lineNumber: 129,
         columnNumber: 5
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Flex, {
-      gap: 3,
+    }), /*#__PURE__*/React__default["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["default"].createElement(Tag, {
       key: index,
-      onClick: () => removeTags(index),
+      onClick: () => removeTags(index, 'removeTag'),
       rightIcon: /*#__PURE__*/React__default["default"].createElement(MajooIcons.CloseOutline, {
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$i,
-          lineNumber: 120,
+          fileName: _jsxFileName$k,
+          lineNumber: 144,
           columnNumber: 24
         }
       }),
@@ -5673,25 +5777,27 @@
         background: disabled ? '$btnDisable' : '$bgGray',
         border: 'none',
         color: '$textContent',
-        cursor: disabled ? 'not-allowed' : 'pointer'
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        margin: '0 5px 2px 0'
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 117,
+        fileName: _jsxFileName$k,
+        lineNumber: 141,
         columnNumber: 11
       }
     }, tag))), /*#__PURE__*/React__default["default"].createElement(Input$2, {
       type: "text",
       onKeyUp: event => addTags(event),
+      onKeyDown: event => removeTags(tags.length - 1, event.key),
       placeholder: placeholder,
       onChange: onChange,
       disabled: disabled,
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$i,
-        lineNumber: 132,
+        fileName: _jsxFileName$k,
+        lineNumber: 157,
         columnNumber: 7
       }
     }));
@@ -5704,7 +5810,8 @@
     value: PropTypes__default["default"].array,
     placeholder: PropTypes__default["default"].string,
     onChange: PropTypes__default["default"].func,
-    readOnly: PropTypes__default["default"].bool
+    readOnly: PropTypes__default["default"].bool,
+    max: PropTypes__default["default"].number
   };
   TagsInput.defaultProps = {
     size: 'lg',
@@ -5715,7 +5822,7 @@
   };
 
   const _excluded$a = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-  var _jsxFileName$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__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -5798,14 +5905,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$h,
+        fileName: _jsxFileName$j,
         lineNumber: 66,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledThumb$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$h,
+        fileName: _jsxFileName$j,
         lineNumber: 74,
         columnNumber: 5
       }
@@ -5823,7 +5930,7 @@
   };
   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__namespace.createElement("svg", _extends({
     width: props.size,
@@ -5833,7 +5940,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$i,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5842,7 +5949,7 @@
     fill: "white",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$i,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -5852,7 +5959,7 @@
     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
     }
@@ -5863,7 +5970,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$i,
       lineNumber: 12,
       columnNumber: 5
     }
@@ -5873,7 +5980,7 @@
     mask: "url(#path-1-inside-1_2883_7918)",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$g,
+      fileName: _jsxFileName$i,
       lineNumber: 18,
       columnNumber: 5
     }
@@ -5884,7 +5991,7 @@
     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__namespace.createElement("svg", _extends({
     width: props.size,
@@ -5894,7 +6001,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$h,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5906,7 +6013,7 @@
     strokeWidth: 2,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$h,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -5915,7 +6022,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$f,
+      fileName: _jsxFileName$h,
       lineNumber: 6,
       columnNumber: 5
     }
@@ -5927,7 +6034,7 @@
   };
 
   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 {
@@ -5956,7 +6063,7 @@
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$g,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -5964,14 +6071,14 @@
       children: /*#__PURE__*/React__default["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
       }
@@ -5981,7 +6088,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$g,
         lineNumber: 30,
         columnNumber: 7
       }
@@ -5989,14 +6096,14 @@
       children: value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$e,
+          fileName: _jsxFileName$g,
           lineNumber: 31,
           columnNumber: 55
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$e,
+          fileName: _jsxFileName$g,
           lineNumber: 31,
           columnNumber: 73
         }
@@ -6004,7 +6111,7 @@
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$e,
+        fileName: _jsxFileName$g,
         lineNumber: 31,
         columnNumber: 7
       }
@@ -6488,8 +6595,8 @@
   });
 
   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',
@@ -6505,7 +6612,7 @@
     color: '$textPrimary',
     width: '100%'
   });
-  const BoxSelect$1 = styled('div', {
+  const BoxSelect = styled('div', {
     margin: 0,
     display: 'flex',
     position: 'relative',
@@ -6584,7 +6691,7 @@
       color: '$textDisable'
     }
   });
-  const IconContainer$1 = styled('div', {
+  const IconContainer = styled('div', {
     flex: ' 0 0 auto',
     width: 'auto',
     display: 'flex',
@@ -6592,7 +6699,7 @@
     paddingRight: '$spacing-05',
     cursor: 'pointer'
   });
-  const BoxItem$1 = styled('div', {
+  const BoxItem = styled('div', {
     display: 'none',
     overflow: 'auto',
     zIndex: 1,
@@ -6605,7 +6712,7 @@
     top: '100%',
     left: '0px'
   });
-  const SelectOption$1 = styled('div', {
+  const SelectOption = styled('div', {
     flexDirection: 'column',
     display: 'block',
     borderRadius: '$lg',
@@ -6613,7 +6720,7 @@
     overflowY: 'auto',
     height: '100%'
   });
-  const SelectItem$1 = styled('div', {
+  const SelectItem = styled('div', {
     overflow: 'hidden',
     borderBottom: '1px solid $bgBorder',
     padding: '$spacing-05 0',
@@ -6621,10 +6728,10 @@
     cursor: 'pointer',
     lineHeight: '20px'
   });
-  const StyledDiv$1 = styled('div', {
+  const StyledDiv = styled('div', {
     color: '$textDisable'
   });
-  function Select(_ref) {
+  function Select$1(_ref) {
     let {
       placeholder,
       option,
@@ -6654,7 +6761,7 @@
       initialSelectedItem: value !== undefined ? value : null,
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 149,
         columnNumber: 5
       }
@@ -6669,21 +6776,21 @@
       highlightedIndex,
       initialSelectedItem,
       inputValue
-    }) => /*#__PURE__*/React__namespace.createElement(Box$1, {
+    }) => /*#__PURE__*/React__namespace.createElement(Box, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 167,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__namespace.createElement(BoxSelect$1, _extends({}, getRootProps({}, {
+    }, /*#__PURE__*/React__namespace.createElement(BoxSelect, _extends({}, getRootProps({}, {
       suppressRefError: true
     }), {
       size: size,
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 168,
         columnNumber: 11
       }
@@ -6693,7 +6800,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 170,
         columnNumber: 15
       }
@@ -6705,7 +6812,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 171,
         columnNumber: 17
       }
@@ -6714,7 +6821,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 178,
         columnNumber: 15
       }
@@ -6722,7 +6829,7 @@
       color: "primary",
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 180,
         columnNumber: 19
       }
@@ -6730,14 +6837,14 @@
       color: "primary",
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 182,
         columnNumber: 19
       }
-    }, placeholder)), /*#__PURE__*/React__namespace.createElement(IconContainer$1, _extends({}, getToggleButtonProps(), {
+    }, placeholder)), /*#__PURE__*/React__namespace.createElement(IconContainer, _extends({}, getToggleButtonProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 186,
         columnNumber: 13
       }
@@ -6745,31 +6852,31 @@
       color: iconColor,
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 187,
         columnNumber: 15
       }
-    }))), /*#__PURE__*/React__namespace.createElement(BoxItem$1, {
+    }))), /*#__PURE__*/React__namespace.createElement(BoxItem, {
       css: {
         display: isOpen ? 'block' : 'none'
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 190,
         columnNumber: 11
       }
-    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption$1, _extends({}, getMenuProps(), {
+    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 192,
         columnNumber: 15
       }
     }), item.map((item, index) => {
       var _item$value;
 
-      return /*#__PURE__*/React__namespace.createElement(SelectItem$1, _extends({}, getItemProps({
+      return /*#__PURE__*/React__namespace.createElement(SelectItem, _extends({}, getItemProps({
         item
       }), {
         key: (_item$value = item.value) != null ? _item$value : index,
@@ -6780,28 +6887,28 @@
         },
         __self: this,
         __source: {
-          fileName: _jsxFileName$d,
+          fileName: _jsxFileName$f,
           lineNumber: 194,
           columnNumber: 19
         }
       }), item.name);
-    })) : /*#__PURE__*/React__namespace.createElement(SelectOption$1, {
+    })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$d,
+        fileName: _jsxFileName$f,
         lineNumber: 208,
         columnNumber: 15
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
+    }, /*#__PURE__*/React__namespace.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__default["default"].string,
     option: PropTypes__default["default"].array.isRequired,
     onChange: PropTypes__default["default"].func,
@@ -6811,7 +6918,7 @@
     value: PropTypes__default["default"].object,
     iconColor: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object])
   };
-  Select.defaultProps = {
+  Select$1.defaultProps = {
     placeholder: 'Select Item',
     size: 'lg',
     disabled: false,
@@ -6840,8 +6947,56 @@
     }
   });
 
-  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__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    xmlSpace: "preserve",
+    width: "1em",
+    height: "1em",
+    style: {
+      shapeRendering: 'geometricPrecision',
+      textRendering: 'geometricPrecision',
+      imageRendering: 'optimizeQuality',
+      fillRule: 'evenodd',
+      clipRule: 'evenodd'
+    },
+    viewBox: "0 0 13.06 13.06"
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 4,
+      columnNumber: 3
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M0 2.5A2.5 2.5 0 0 1 2.5 0h8.05a2.5 2.5 0 0 1 2.5 2.5v8.05a2.5 2.5 0 0 1-2.5 2.5H2.5c-.66 0-1.3-.26-1.77-.73S0 11.21 0 10.55V2.5z",
+    style: {
+      fill: props.color,
+      fillRule: 'nonzero'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 19,
+      columnNumber: 5
+    }
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M10.12 4.53a.47.47 0 0 0 .14-.33.47.47 0 0 0-.14-.33.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14L5.13 8.2 3.6 6.66a.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14.47.47 0 0 0-.14.33c0 .12.05.24.14.33l1.87 1.87c.04.04.09.08.15.1.06.02.12.04.18.04s.12-.01.18-.04c.06-.02.11-.06.15-.1l4.66-4.66z",
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$e,
+      lineNumber: 26,
+      columnNumber: 5
+    }
+  }));
+
+  var _jsxFileName$d = "/home/omegalord666/work/majoo-ui/packages/react/src/components/form/components/InputSelectTag/InputSelectTag.js";
+  const Wrapper = styled('div', {
     margin: 0,
     flexDirection: 'column',
     display: 'block',
@@ -6857,10 +7012,12 @@
     color: '$textPrimary',
     width: '100%'
   });
-  const BoxSelect = styled('div', {
+  const Select = styled('div', {
     margin: 0,
     display: 'flex',
     position: 'relative',
+    flexWrap: 'wrap',
+    width: '100%',
     appearance: 'none',
     background: 'none',
     boxSizing: 'border-box',
@@ -6876,11 +7033,13 @@
     variants: {
       size: {
         sm: {
-          height: 32,
+          height: 'auto',
+          minheight: 32,
           padding: '2px $spacing-05'
         },
         lg: {
-          height: 40,
+          height: 'auto',
+          minheight: 40,
           padding: '6px $spacing-05'
         }
       },
@@ -6899,10 +7058,20 @@
       }
     }
   });
-  const Input = styled('input', {
+  const TagWrapper = styled(Box$1, {
     display: 'flex',
-    width: '100%',
-    height: '100%',
+    position: 'relative',
+    flexWrap: 'wrap',
+    maxWidth: '100%'
+  });
+  const InputWrapper = styled('div', {
+    display: 'flex',
+    position: 'relative',
+    flex: 'auto',
+    flexWrap: 'wrap',
+    maxWidth: '100%'
+  });
+  const Input = styled('input', {
     background: 'none',
     outline: 'none',
     border: 'none',
@@ -6913,17 +7082,17 @@
       color: '$textDisable'
     }
   });
-  const IconContainer = styled('div', {
+  const IconWrapper = styled('div', {
     flex: ' 0 0 auto',
     width: 'auto',
     display: 'flex',
     alignItems: 'center',
     cursor: 'pointer'
   });
-  const StyledIcon = styled(MajooIcons.CaretDownOutline, {
+  const IconCaretDown = styled(MajooIcons.CaretDownOutline, {
     size: '24px'
   });
-  const BoxItem = styled('div', {
+  const OptionWrapper = styled('div', {
     display: 'none',
     overflow: 'hidden',
     zIndex: 1,
@@ -6938,7 +7107,7 @@
     left: '0px',
     padding: '0 8px'
   });
-  const SelectOption = styled('div', {
+  const Option = styled('div', {
     flexDirection: 'column',
     display: 'block',
     borderRadius: '$lg',
@@ -6946,16 +7115,22 @@
     overflowY: 'auto',
     height: '100%'
   });
-  const SelectItem = styled('div', {
+  const ItemWrapper = styled(Box$1, {
+    display: 'flex',
+    position: 'relative',
+    flex: 'auto',
+    flexWrap: 'wrap',
+    maxWidth: '100%',
+    cursor: 'pointer',
+    alignItems: 'center'
+  });
+  const Item$1 = styled('div', {
     overflow: 'hidden',
     borderBottom: '1px solid $bgBorder',
     padding: '8px 0',
     backgroundColor: 'rgb(235, 245, 255)',
-    cursor: 'pointer',
-    lineHeight: '20px'
-  });
-  const StyledDiv = styled('div', {
-    color: '$textDisable'
+    lineHeight: '20px',
+    marginLeft: '5px'
   });
   function SelectTag({
     placeholder,
@@ -7022,11 +7197,9 @@
 
             if (selectedItem) {
               if (selectedItems.includes(selectedItem)) {
-                setInputValue('');
                 removeSelectedItem(selectedItem);
                 selectItem(null);
               } else {
-                setInputValue('');
                 addSelectedItem(selectedItem);
                 selectItem(null);
               }
@@ -7035,74 +7208,75 @@
             break;
 
           case Downshift.useCombobox.stateChangeTypes.MenuMouseLeave:
-            closeMenu();
-            break;
         }
       }
     });
     const ref = /*#__PURE__*/React__namespace.createRef();
-    return /*#__PURE__*/React__namespace.createElement(Box, {
+    return /*#__PURE__*/React__namespace.createElement(Wrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 192,
+        fileName: _jsxFileName$d,
+        lineNumber: 209,
         columnNumber: 5
       }
-    }, /*#__PURE__*/React__namespace.createElement(BoxSelect, {
+    }, /*#__PURE__*/React__namespace.createElement(Select, {
       size: size,
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 193,
+        fileName: _jsxFileName$d,
+        lineNumber: 210,
         columnNumber: 7
       }
-    }, selectedItems.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Flex, {
-      gap: 3,
+    }, selectedItems.length !== 0 ? /*#__PURE__*/React__namespace.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__namespace.createElement(Tag, _extends({
       ref: ref,
-      key: `selected-item-${index}`
+      key: `selected-item-${selectedItem.value}`
     }, getSelectedItemProps({
       selectedItem,
       index
     }), {
-      onClick: () => removeSelectedItem(selectedItem),
+      onClick: event => {
+        if (disabled === false) {
+          event.stopPropagation();
+          removeSelectedItem(selectedItem);
+        }
+      },
       rightIcon: /*#__PURE__*/React__namespace.createElement(MajooIcons.CloseOutline, {
         size: 10,
         __self: this,
         __source: {
-          fileName: _jsxFileName$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__namespace.createElement("div", _extends({}, getComboboxProps(getToggleButtonProps({
+    }), selectedItem.name))) : null, /*#__PURE__*/React__namespace.createElement(InputWrapper, _extends({}, getComboboxProps(getToggleButtonProps({
       tabIndex: 0
     })), {
-      style: {
-        width: '100%'
-      },
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 210,
+        fileName: _jsxFileName$d,
+        lineNumber: 237,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(Input, _extends({
@@ -7113,73 +7287,99 @@
     })), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 211,
+        fileName: _jsxFileName$d,
+        lineNumber: 238,
         columnNumber: 11
       }
-    }))), /*#__PURE__*/React__namespace.createElement(IconContainer, {
+    }))), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 217,
+        fileName: _jsxFileName$d,
+        lineNumber: 244,
         columnNumber: 9
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledIcon, {
+    }, /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 218,
+        fileName: _jsxFileName$d,
+        lineNumber: 245,
         columnNumber: 11
       }
-    }))), /*#__PURE__*/React__namespace.createElement(BoxItem, {
+    }))), /*#__PURE__*/React__namespace.createElement(OptionWrapper, {
       css: {
-        display: isOpen ? 'block' : 'none'
+        display: isOpen && disabled === false ? 'block' : 'none'
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 221,
+        fileName: _jsxFileName$d,
+        lineNumber: 248,
         columnNumber: 7
       }
-    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
+    }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 223,
+        fileName: _jsxFileName$d,
+        lineNumber: 250,
         columnNumber: 11
       }
-    }), isOpen && item.map((item, index) => {
-      var _item$value;
-
-      return /*#__PURE__*/React__namespace.createElement(SelectItem, _extends({
-        key: (_item$value = item.value) != null ? _item$value : index
-      }, getItemProps({
-        item,
-        index
-      }), {
-        css: {
-          backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-          fontWeight: selectedItems.includes(item) ? 'bold' : 'normal'
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$c,
-          lineNumber: 226,
-          columnNumber: 17
-        }
-      }), item.name);
-    })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
+    }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper, _extends({
+      key: item.value
+    }, getItemProps({
+      item,
+      index: item.value - 1
+    }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 242,
+        fileName: _jsxFileName$d,
+        lineNumber: 253,
+        columnNumber: 17
+      }
+    }), /*#__PURE__*/React__namespace.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__namespace.createElement(CheckOutline, {
+      color: colors.iconGreen,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 261,
+        columnNumber: 53
+      }
+    }) : null), /*#__PURE__*/React__namespace.createElement(Item$1, {
+      css: {
+        backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+        fontWeight: selectedItems.includes(item) ? 'bold' : 'normal'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 263,
+        columnNumber: 19
+      }
+    }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$d,
+        lineNumber: 275,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__namespace.createElement(StyledDiv, {
+    }, /*#__PURE__*/React__namespace.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"))));
@@ -7277,7 +7477,7 @@
   const PopoverAnchor = StyledAnchor;
 
   const _excluded$7 = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-  var _jsxFileName$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 = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
     display: 'flex',
@@ -7559,7 +7759,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$c,
         lineNumber: 160,
         columnNumber: 5
       }
@@ -7568,7 +7768,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$c,
         lineNumber: 181,
         columnNumber: 7
       }
@@ -7576,7 +7776,7 @@
       color: color,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$c,
         lineNumber: 182,
         columnNumber: 9
       }
@@ -7585,7 +7785,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$b,
+        fileName: _jsxFileName$c,
         lineNumber: 184,
         columnNumber: 7
       }
@@ -7685,7 +7885,7 @@
 
   const _excluded$6 = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size"],
         _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
-  var _jsxFileName$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__namespace.Root, {
     display: 'inline-flex',
     borderRadius: '$md',
@@ -7827,7 +8027,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$b,
         lineNumber: 111,
         columnNumber: 5
       }
@@ -7880,21 +8080,21 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$b,
         lineNumber: 164,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$b,
         lineNumber: 172,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$a,
+        fileName: _jsxFileName$b,
         lineNumber: 174,
         columnNumber: 34
       }
@@ -7913,7 +8113,7 @@
   };
 
   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',
@@ -8044,7 +8244,7 @@
     return /*#__PURE__*/React__default["default"].createElement(NotificationBadgeRootStyle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$a,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -8052,7 +8252,7 @@
       children: value,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$9,
+        fileName: _jsxFileName$a,
         lineNumber: 135,
         columnNumber: 7
       }
@@ -8077,7 +8277,7 @@
   };
 
   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',
@@ -8109,7 +8309,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$8,
+        fileName: _jsxFileName$9,
         lineNumber: 17,
         columnNumber: 5
       }
@@ -8170,7 +8370,7 @@
   });
 
   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
@@ -8219,21 +8419,21 @@
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Portal, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$8,
         lineNumber: 38,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$8,
         lineNumber: 39,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$2, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$7,
+        fileName: _jsxFileName$8,
         lineNumber: 40,
         columnNumber: 7
       }
@@ -8264,7 +8464,7 @@
   const DialogClose = DialogPrimitive__namespace.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'
@@ -8305,14 +8505,14 @@
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Root, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$7,
         lineNumber: 36,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$6,
+        fileName: _jsxFileName$7,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -8420,7 +8620,7 @@
   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)' },
   // });
@@ -8443,7 +8643,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$6,
         lineNumber: 20,
         columnNumber: 3
       }
@@ -8506,14 +8706,14 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$6,
         lineNumber: 80,
         columnNumber: 3
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledTrigger, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$6,
         lineNumber: 81,
         columnNumber: 5
       }
@@ -8522,7 +8722,7 @@
       color: arrowColor,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$6,
         lineNumber: 83,
         columnNumber: 22
       }
@@ -8539,7 +8739,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledContent, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$5,
+        fileName: _jsxFileName$6,
         lineNumber: 91,
         columnNumber: 61
       }
@@ -8592,7 +8792,7 @@
     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__namespace.Root, {
     width: '100%'
   });
@@ -8617,7 +8817,7 @@
       orientation: "vertical",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$4,
+        fileName: _jsxFileName$5,
         lineNumber: 25,
         columnNumber: 5
       }
@@ -8629,7 +8829,7 @@
       onClick: () => optionHandler(option.value),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$4,
+        fileName: _jsxFileName$5,
         lineNumber: 27,
         columnNumber: 9
       }
@@ -8705,7 +8905,7 @@
   });
   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,
@@ -8764,13 +8964,13 @@
       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',
@@ -8785,7 +8985,7 @@
     }
   });
   const CalendarItemContainer$1 = styled(Flex, {});
-  const DateContainer$1 = styled(Box$2, {
+  const DateContainer$1 = styled(Box$1, {
     width: '100%',
     position: 'relative',
     display: 'inline-block',
@@ -8794,7 +8994,7 @@
       width: 'unset'
     }
   });
-  const TitleButton$1 = styled(Heading, {
+  const TitleButton$1 = styled(Heading$1, {
     padding: '2px $spacing-04',
     '&:hover': {
       backgroundColor: '$bgSuccess',
@@ -8818,7 +9018,7 @@
       }
     }
   });
-  const MonthButton$1 = styled(Text, {
+  const MonthButton$1 = styled(Text$1, {
     minWidth: '90px',
     textAlign: 'center',
     borderRadius: '$md',
@@ -8903,7 +9103,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 205,
           columnNumber: 7
         }
@@ -8917,7 +9117,7 @@
         disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 218,
           columnNumber: 7
         }
@@ -8935,7 +9135,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 250,
           columnNumber: 7
         }
@@ -8943,7 +9143,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 266,
           columnNumber: 9
         }
@@ -8961,7 +9161,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 272,
           columnNumber: 7
         }
@@ -8969,7 +9169,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 293,
           columnNumber: 9
         }
@@ -8985,7 +9185,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 299,
           columnNumber: 7
         }
@@ -8998,17 +9198,17 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 302,
           columnNumber: 13
         }
-      }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      }, renderBackButton(), renderTitleButton(0), /*#__PURE__*/React__default["default"].createElement(Box$1, {
         css: {
           size: '32px'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 312,
           columnNumber: 15
         }
@@ -9019,7 +9219,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 318,
           columnNumber: 13
         }
@@ -9032,17 +9232,17 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 324,
           columnNumber: 13
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
         css: {
           size: '32px'
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 332,
           columnNumber: 15
         }
@@ -9057,7 +9257,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 354,
           columnNumber: 7
         }
@@ -9075,7 +9275,7 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$3,
+              fileName: _jsxFileName$4,
               lineNumber: 365,
               columnNumber: 17
             }
@@ -9097,7 +9297,7 @@
           variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$3,
+            fileName: _jsxFileName$4,
             lineNumber: 382,
             columnNumber: 15
           }
@@ -9114,7 +9314,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 398,
           columnNumber: 7
         }
@@ -9128,7 +9328,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 406,
           columnNumber: 11
         }
@@ -9146,7 +9346,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 429,
           columnNumber: 7
         }
@@ -9160,7 +9360,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 437,
           columnNumber: 11
         }
@@ -9176,7 +9376,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 458,
           columnNumber: 7
         }
@@ -9193,7 +9393,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 466,
           columnNumber: 11
         }
@@ -9205,7 +9405,7 @@
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 488,
           columnNumber: 7
         }
@@ -9216,7 +9416,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 489,
           columnNumber: 9
         }
@@ -9224,10 +9424,10 @@
     };
 
     const renderFooter = () => {
-      return /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      return /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 503,
           columnNumber: 7
         }
@@ -9237,7 +9437,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 504,
           columnNumber: 9
         }
@@ -9246,11 +9446,11 @@
         align: "center",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 505,
           columnNumber: 9
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Heading, {
+      }, /*#__PURE__*/React__default["default"].createElement(Heading$1, {
         heading: "sectionTitle",
         color: selected.length > 1 ? 'primary' : 'disable',
         css: {
@@ -9258,7 +9458,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 506,
           columnNumber: 11
         }
@@ -9266,7 +9466,7 @@
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 517,
           columnNumber: 11
         }
@@ -9279,7 +9479,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 518,
           columnNumber: 13
         }
@@ -9291,7 +9491,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 528,
           columnNumber: 13
         }
@@ -9303,7 +9503,7 @@
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 545,
           columnNumber: 7
         }
@@ -9311,14 +9511,14 @@
         orientation: "vertical",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 548,
           columnNumber: 25
         }
-      }), /*#__PURE__*/React__default["default"].createElement(Box$2, {
+      }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 549,
           columnNumber: 9
         }
@@ -9326,7 +9526,7 @@
         gap: 5,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 551,
           columnNumber: 11
         }
@@ -9334,7 +9534,7 @@
         key: `${calendar.month}${calendar.year}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 553,
           columnNumber: 15
         }
@@ -9345,14 +9545,14 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 555,
           columnNumber: 19
         }
       }), /*#__PURE__*/React__default["default"].createElement(DateContainer$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 562,
           columnNumber: 17
         }
@@ -9362,7 +9562,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$3,
+          fileName: _jsxFileName$4,
           lineNumber: 563,
           columnNumber: 19
         }
@@ -9372,7 +9572,7 @@
     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,
@@ -9431,7 +9631,7 @@
       cursor: 'default'
     }
   });
-  const WeekdayBox = styled(Box$2, {
+  const WeekdayBox = styled(Box$1, {
     display: 'inline-block',
     width: '45.5px',
     textAlign: 'center',
@@ -9440,7 +9640,7 @@
       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)',
@@ -9449,7 +9649,7 @@
       width: 'unset'
     }
   });
-  const CalendarsContainer = styled(Box$2, {
+  const CalendarsContainer = styled(Box$1, {
     width: '100%',
     overflow: 'auto',
     padding: '$spacing-02 20px $spacing-05',
@@ -9474,7 +9674,7 @@
     height: '100%',
     paddingBottom: '160px'
   });
-  const DateContainer = styled(Box$2, {
+  const DateContainer = styled(Box$1, {
     width: '100%',
     position: 'relative',
     display: 'inline-block',
@@ -9489,7 +9689,7 @@
     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',
@@ -9513,7 +9713,7 @@
       }
     }
   });
-  const MonthButton = styled(Text, {
+  const MonthButton = styled(Text$1, {
     minWidth: '90px',
     textAlign: 'center',
     borderRadius: '$md',
@@ -9603,7 +9803,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 241,
           columnNumber: 7
         }
@@ -9617,7 +9817,7 @@
         disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 254,
           columnNumber: 7
         }
@@ -9635,7 +9835,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 286,
           columnNumber: 7
         }
@@ -9643,7 +9843,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 302,
           columnNumber: 9
         }
@@ -9661,7 +9861,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 308,
           columnNumber: 7
         }
@@ -9669,7 +9869,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 329,
           columnNumber: 9
         }
@@ -9685,7 +9885,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 335,
           columnNumber: 7
         }
@@ -9700,7 +9900,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 347,
           columnNumber: 7
         }
@@ -9718,7 +9918,7 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$2,
+              fileName: _jsxFileName$3,
               lineNumber: 358,
               columnNumber: 17
             }
@@ -9741,7 +9941,7 @@
           variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$2,
+            fileName: _jsxFileName$3,
             lineNumber: 375,
             columnNumber: 15
           }
@@ -9758,7 +9958,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 392,
           columnNumber: 7
         }
@@ -9772,7 +9972,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 400,
           columnNumber: 11
         }
@@ -9790,7 +9990,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 423,
           columnNumber: 7
         }
@@ -9804,7 +10004,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 431,
           columnNumber: 11
         }
@@ -9820,7 +10020,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 452,
           columnNumber: 7
         }
@@ -9837,7 +10037,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 460,
           columnNumber: 11
         }
@@ -9848,7 +10048,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Flex, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 482,
           columnNumber: 7
         }
@@ -9856,7 +10056,7 @@
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 484,
           columnNumber: 11
         }
@@ -9867,7 +10067,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 485,
           columnNumber: 13
         }
@@ -9881,7 +10081,7 @@
         gap: 4,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 501,
           columnNumber: 7
         }
@@ -9891,29 +10091,29 @@
         onClick: () => setExpandAdvanceView(!expandAdvanceView),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 504,
           columnNumber: 13
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Text, {
+      }, /*#__PURE__*/React__default["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["default"].createElement(MajooIcons.ChevronDownOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 506,
           columnNumber: 36
         }
       }) : /*#__PURE__*/React__default["default"].createElement(MajooIcons.ChevronUpOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 506,
           columnNumber: 61
         }
@@ -9923,16 +10123,16 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 509,
           columnNumber: 13
         }
-      })), /*#__PURE__*/React__default["default"].createElement(Text, {
+      })), /*#__PURE__*/React__default["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
         }
@@ -9940,7 +10140,7 @@
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 521,
           columnNumber: 9
         }
@@ -9955,7 +10155,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 522,
           columnNumber: 11
         }
@@ -9969,7 +10169,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 534,
           columnNumber: 11
         }
@@ -9980,7 +10180,7 @@
       return /*#__PURE__*/React__default["default"].createElement(DatePickerContainer, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 552,
           columnNumber: 7
         }
@@ -9988,7 +10188,7 @@
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 553,
           columnNumber: 9
         }
@@ -9997,7 +10197,7 @@
         gap: 5,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 554,
           columnNumber: 11
         }
@@ -10005,7 +10205,7 @@
         key: `${calendar.month}${calendar.year}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 556,
           columnNumber: 15
         }
@@ -10015,7 +10215,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$2,
+          fileName: _jsxFileName$3,
           lineNumber: 558,
           columnNumber: 17
         }
@@ -10028,7 +10228,7 @@
   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';
@@ -10084,7 +10284,7 @@
     }, dayzedData, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$1,
+        fileName: _jsxFileName$2,
         lineNumber: 41,
         columnNumber: 5
       }
@@ -10158,7 +10358,7 @@
     }, dayzedData, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$1,
+        fileName: _jsxFileName$2,
         lineNumber: 100,
         columnNumber: 5
       }
@@ -10173,7 +10373,7 @@
     }, dayzedData, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$1,
+        fileName: _jsxFileName$2,
         lineNumber: 111,
         columnNumber: 5
       }
@@ -10190,7 +10390,7 @@
       return /*#__PURE__*/React__default["default"].createElement(CalendarRangePicker, _extends({}, otherProps, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$1,
+          fileName: _jsxFileName$2,
           lineNumber: 127,
           columnNumber: 12
         }
@@ -10200,14 +10400,14 @@
     return /*#__PURE__*/React__default["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';
@@ -10370,7 +10570,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 111,
         columnNumber: 5
       }
@@ -10378,14 +10578,14 @@
       children: /*#__PURE__*/React__default["default"].createElement(MajooIcons.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
       }
@@ -10394,7 +10594,7 @@
       value: getInputPickerValue(type, selectedDate),
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 113,
         columnNumber: 7
       }
@@ -10409,7 +10609,7 @@
         }),
         __self: this,
         __source: {
-          fileName: _jsxFileName,
+          fileName: _jsxFileName$1,
           lineNumber: 121,
           columnNumber: 11
         }
@@ -10432,7 +10632,7 @@
       onCancel: () => setOpenPicker(false),
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 117,
         columnNumber: 5
       }
@@ -10443,22 +10643,22 @@
       onOpenChange: setOpenPicker,
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 140,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 141,
         columnNumber: 7
       }
-    }, /*#__PURE__*/React__default["default"].createElement(Box$2, {
+    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
       css: css,
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 142,
         columnNumber: 9
       }
@@ -10469,15 +10669,15 @@
       onOpenAutoFocus: e => e.preventDefault(),
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 144,
         columnNumber: 7
       }
-    }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$2, {
+    }, renderDatePicker())) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Box$1, {
       css: css,
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 150,
         columnNumber: 7
       }
@@ -10486,7 +10686,7 @@
       onOpenChange: setOpenPicker,
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 151,
         columnNumber: 7
       }
@@ -10498,7 +10698,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName,
+        fileName: _jsxFileName$1,
         lineNumber: 152,
         columnNumber: 9
       }
@@ -10517,6 +10717,337 @@
   };
   InputDatePicker.displayName = 'InputDatePicker';
 
+  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
+    } = reactTable.useTable({
+      columns,
+      data
+    }, reactTable.useSortBy, reactTable.useExpanded, reactTable.useRowSelect);
+    React.useEffect(() => {
+      if (onSelectedChange) onSelectedChange(selectedFlatRows.map(row => row.values));
+    }, [selectedFlatRows]);
+    return /*#__PURE__*/React__default["default"].createElement(TableContainer, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 155,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(TableContent, _extends({}, getTableProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 156,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(TableHead, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 157,
+        columnNumber: 9
+      }
+    }, headerGroups.map(headerGroup => /*#__PURE__*/React__default["default"].createElement(TableHeadRow, _extends({}, headerGroup.getHeaderGroupProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 159,
+        columnNumber: 13
+      }
+    }), headerGroup.headers.filter(column => !column.isSubRow).map(column => {
+      const headerRender = column.render('Header');
+      return /*#__PURE__*/React__default["default"].createElement(TableHeadCell, _extends({}, column.getHeaderProps(column.getSortByToggleProps()), {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 165,
+          columnNumber: 21
+        }
+      }), typeof headerRender === 'string' ? /*#__PURE__*/React__default["default"].createElement(TableHeaderCellContainer, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 167,
+          columnNumber: 25
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableHeadCellContent, {
+        heading: "headerTable",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 169,
+          columnNumber: 29
+        }
+      }, headerRender.toUpperCase()), /*#__PURE__*/React__default["default"].createElement(MajooIcons.SortingOutline, {
+        color: colors.iconSecondary,
+        size: "16px",
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 172,
+          columnNumber: 29
+        }
+      }))) : headerRender);
+    })))), /*#__PURE__*/React__default["default"].createElement(TableBody, _extends({}, getTableBodyProps(), {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 184,
+        columnNumber: 9
+      }
+    }), rows.map((row, i) => {
+      var _row$cells$filter, _row$cells$filter2;
+
+      prepareRow(row);
+      const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
+      const cellArrays = sliceIntoChunks(subRowCells, 2);
+      const leftAddOnCells = (_row$cells$filter = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) != null ? _row$cells$filter : [];
+      const rightAddOnCells = (_row$cells$filter2 = row.cells.filter(cell => ['menu'].includes(cell.column.id))) != null ? _row$cells$filter2 : [];
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+        key: row.id,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 192,
+          columnNumber: 15
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(TableRow, _extends({}, row.getRowProps(), {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 193,
+          columnNumber: 17
+        }
+      }), row.cells.filter(cell => !cell.column.isSubRow).map(cell => /*#__PURE__*/React__default["default"].createElement(TableCell, _extends({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 197,
+          columnNumber: 23
+        }
+      }), cell.render('Cell')))), row.isExpanded ? cellArrays.map((cells, index) => {
+        return /*#__PURE__*/React__default["default"].createElement(TableRow, {
+          key: index,
+          subRow: true,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 205,
+            columnNumber: 25
+          }
+        }, leftAddOnCells.map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
+          key: index,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 207,
+            columnNumber: 29
+          }
+        })), cells.map((cell, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+          key: cell.id,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 210,
+            columnNumber: 29
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(TableCell, {
+          subCell: true,
+          headerSubCell: true,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 211,
+            columnNumber: 31
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+          paragraph: "shortContentBold",
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 212,
+            columnNumber: 33
+          }
+        }, cell.column.Header)), /*#__PURE__*/React__default["default"].createElement(TableCell, {
+          subCell: true,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 214,
+            columnNumber: 31
+          }
+        }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
+          paragraph: "shortContentRegular",
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 215,
+            columnNumber: 33
+          }
+        }, cell.render('Cell'))), index === 0 && cells.length > 1 && new Array(visibleColumns.length - subRowCells.length - leftAddOnCells.length - rightAddOnCells.length - 4).fill(null).map((_, index) => /*#__PURE__*/React__default["default"].createElement("td", {
+          key: index,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 227,
+            columnNumber: 54
+          }
+        })))));
+      }) : null);
+    }))));
+  }
+
+  Table.propTypes = {
+    data: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
+    column: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
+    onSelectedChange: PropTypes__default["default"].func
+  };
+  Table.displayName = 'Table';
+
   exports.ADVANCE_PICKER = ADVANCE_PICKER;
   exports.Accordion = Accordion;
   exports.AccordionContent = AccordionContent;
@@ -10529,7 +11060,7 @@
   exports.AlertTitle = AlertTitle;
   exports.Avatar = Avatar;
   exports.Badge = Badge;
-  exports.Box = Box$2;
+  exports.Box = Box$1;
   exports.BoxComponent = BoxComponent;
   exports.Breadcrumb = Breadcrumb;
   exports.BreadcrumbItem = BreadcrumbItem;
@@ -10558,7 +11089,7 @@
   exports.FormLabel = FormLabel;
   exports.Grid = Grid;
   exports.GridItem = GridItem;
-  exports.Heading = Heading;
+  exports.Heading = Heading$1;
   exports.IconButton = IconButton;
   exports.Image = Image;
   exports.InputCheckbox = InputCheckbox;
@@ -10572,7 +11103,7 @@
   exports.InputRightAddon = InputRightAddon;
   exports.InputRightElement = InputRightElement;
   exports.InputSearchbox = InputSearchbox;
-  exports.InputSelect = Select;
+  exports.InputSelect = Select$1;
   exports.InputSelectTag = SelectTag;
   exports.InputSuffix = InputSuffix;
   exports.InputSwitch = InputSwitch;
@@ -10596,12 +11127,13 @@
   exports.Separator = Separator;
   exports.Slider = Slider;
   exports.StyledTitle = StyledTitle$1;
+  exports.Table = Table;
   exports.Tabs = Tabs;
   exports.TabsContent = TabsContent;
   exports.TabsList = TabsList;
   exports.TabsTrigger = TabsTrigger;
   exports.Tag = Tag;
-  exports.Text = Text;
+  exports.Text = Text$1;
   exports.ToastContext = ToastContext;
   exports.Tooltip = Tooltip;