@majoo-ui/react 1.42.3 → 1.43.0

package/index.umd.js

@@ -53,7 +53,7 @@
   var StepWizard__default = /*#__PURE__*/_interopDefaultLegacy(StepWizard$1);
   var ScrollSpy__default = /*#__PURE__*/_interopDefaultLegacy(ScrollSpy);
 
-  var _jsxFileName$18 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+  var _jsxFileName$19 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
   function ThemeProvider({
     theme,
@@ -63,7 +63,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$18,
+        fileName: _jsxFileName$19,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -1318,9 +1318,7 @@
         display: 'block',
         maxWidth: '100%'
       },
-      '.noscroll': {
-        overflow: 'hidden'
-      },
+      // '.noscroll': { overflow: 'hidden' },
       '.noselect': {
         userSelect: 'none'
       },
@@ -2248,7 +2246,7 @@
 
   const _excluded$D = ["children"],
         _excluded2$3 = ["children"];
-  var _jsxFileName$17 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+  var _jsxFileName$18 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
     variants: {
@@ -2433,7 +2431,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$17,
+        fileName: _jsxFileName$18,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2489,7 +2487,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$17,
+        fileName: _jsxFileName$18,
         lineNumber: 230,
         columnNumber: 5
       }
@@ -2507,7 +2505,7 @@
   GridItem.displayName = 'Grid Item';
 
   const _excluded$C = ["children", "isCollapse", "css", "contentHeader"];
-  var _jsxFileName$16 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+  var _jsxFileName$17 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
   const StyledDiv$3 = styled(Flex$1, {
     justifyContent: 'center',
     marginLeft: 'auto',
@@ -2546,7 +2544,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$16,
+        fileName: _jsxFileName$17,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -2790,7 +2788,7 @@
   Paragraph.displayName = 'Paragraph';
 
   const _excluded$B = ["className", "children", "type", "buttonType", "size", "disabled", "onClick", "block", "width", "leftIcon", "rightIcon", "icon"];
-  var _jsxFileName$15 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\button\\Button.js";
+  var _jsxFileName$16 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\button\\Button.js";
   const ButtonPrimary = {
     backgroundColor: '$btnPrimary',
     color: '$textWhite',
@@ -3031,28 +3029,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$15,
+        fileName: _jsxFileName$16,
         lineNumber: 241,
         columnNumber: 3
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$3, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$15,
+        fileName: _jsxFileName$16,
         lineNumber: 253,
         columnNumber: 31
       }
     }, leftIcon) : null, icon ? /*#__PURE__*/React__default["default"].createElement(StyledIcon$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$15,
+        fileName: _jsxFileName$16,
         lineNumber: 254,
         columnNumber: 13
       }
     }, children) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children), rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$15,
+        fileName: _jsxFileName$16,
         lineNumber: 255,
         columnNumber: 32
       }
@@ -3078,7 +3076,7 @@
     icon: false
   };
 
-  var _jsxFileName$14 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\button\\ButtonLink.js";
+  var _jsxFileName$15 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\button\\ButtonLink.js";
   const StyledLink = styled('a', {
     fontSize: '$short-content-regular',
     textDecoration: 'underline',
@@ -3110,7 +3108,7 @@
       css: props.css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$14,
+        fileName: _jsxFileName$15,
         lineNumber: 31,
         columnNumber: 5
       }
@@ -3132,7 +3130,7 @@
   };
 
   const _excluded$A = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-  var _jsxFileName$13 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+  var _jsxFileName$14 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
   const TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
   const TOP_RIGHT_POSITION = 'top-right';
@@ -3326,7 +3324,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 205,
         columnNumber: 5
       }
@@ -3338,7 +3336,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 216,
         columnNumber: 9
       }
@@ -3348,7 +3346,7 @@
       onClick: onClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 223,
         columnNumber: 11
       }
@@ -3356,7 +3354,7 @@
       direction: "column",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 224,
         columnNumber: 13
       }
@@ -3364,7 +3362,7 @@
       direction: "row",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 225,
         columnNumber: 15
       }
@@ -3372,7 +3370,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 226,
         columnNumber: 17
       }
@@ -3384,7 +3382,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 227,
         columnNumber: 17
       }
@@ -3392,7 +3390,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 235,
         columnNumber: 21
       }
@@ -3407,7 +3405,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 236,
         columnNumber: 23
       }
@@ -3416,7 +3414,7 @@
       color: "secondary",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 250,
         columnNumber: 19
       }
@@ -3430,7 +3428,7 @@
       hasTitle: !!title,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 254,
         columnNumber: 17
       }
@@ -3439,7 +3437,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 263,
         columnNumber: 19
       }
@@ -3455,7 +3453,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$13,
+        fileName: _jsxFileName$14,
         lineNumber: 267,
         columnNumber: 17
       }
@@ -3479,7 +3477,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.createContext({});
 
-  var _jsxFileName$12 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+  var _jsxFileName$13 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
     variants: {
@@ -3521,7 +3519,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$12,
+        fileName: _jsxFileName$13,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3529,7 +3527,7 @@
       position: position,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$12,
+        fileName: _jsxFileName$13,
         lineNumber: 44,
         columnNumber: 7
       }
@@ -3540,7 +3538,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$12,
+          fileName: _jsxFileName$13,
           lineNumber: 46,
           columnNumber: 18
         }
@@ -3549,7 +3547,7 @@
   };
 
   const _excluded$z = ["id"];
-  var _jsxFileName$11 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+  var _jsxFileName$12 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
   let toastCount = 0;
 
   const ToastProvider = ({
@@ -3587,7 +3585,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$11,
+        fileName: _jsxFileName$12,
         lineNumber: 41,
         columnNumber: 5
       }
@@ -3596,7 +3594,7 @@
       position: TOP_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$11,
+        fileName: _jsxFileName$12,
         lineNumber: 43,
         columnNumber: 7
       }
@@ -3605,7 +3603,7 @@
       position: TOP_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$11,
+        fileName: _jsxFileName$12,
         lineNumber: 47,
         columnNumber: 7
       }
@@ -3614,7 +3612,7 @@
       position: BOTTOM_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$11,
+        fileName: _jsxFileName$12,
         lineNumber: 51,
         columnNumber: 7
       }
@@ -3623,14 +3621,14 @@
       position: BOTTOM_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$11,
+        fileName: _jsxFileName$12,
         lineNumber: 55,
         columnNumber: 7
       }
     }));
   };
 
-  var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+  var _jsxFileName$11 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
 
   function MajooProvider({
     children,
@@ -3643,14 +3641,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$10,
+        fileName: _jsxFileName$11,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$10,
+        fileName: _jsxFileName$11,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -3665,7 +3663,7 @@
   };
 
   const _excluded$y = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
-  var _jsxFileName$$ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
+  var _jsxFileName$10 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
   const Context$2 = /*#__PURE__*/React__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
     maxWidth: '100%',
@@ -3747,7 +3745,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 91,
       columnNumber: 3
     }
@@ -3758,7 +3756,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 97,
       columnNumber: 3
     }
@@ -3770,7 +3768,7 @@
   }) => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 103,
       columnNumber: 3
     }
@@ -3783,7 +3781,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 105,
       columnNumber: 7
     }
@@ -3791,7 +3789,7 @@
   const BannerClose = () => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 116,
       columnNumber: 3
     }
@@ -3803,7 +3801,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 118,
       columnNumber: 7
     }
@@ -3812,7 +3810,7 @@
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$10,
       lineNumber: 125,
       columnNumber: 9
     }
@@ -3822,7 +3820,7 @@
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 133,
         columnNumber: 5
       }
@@ -3832,7 +3830,7 @@
       align: "end",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 134,
         columnNumber: 7
       }
@@ -3845,21 +3843,21 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 135,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 143,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 144,
         columnNumber: 33
       }
@@ -3868,7 +3866,7 @@
       variant: props.variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 147,
         columnNumber: 11
       }
@@ -3881,7 +3879,7 @@
       closeCenter: !props.title && !props.link,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 152,
         columnNumber: 7
       }
@@ -3890,7 +3888,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 160,
         columnNumber: 9
       }
@@ -3919,7 +3917,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 168,
         columnNumber: 5
       }
@@ -3936,7 +3934,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 170,
         columnNumber: 9
       }
@@ -3947,7 +3945,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 177,
         columnNumber: 11
       }
@@ -3961,7 +3959,7 @@
       onRemove: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$10,
         lineNumber: 180,
         columnNumber: 9
       }
@@ -3986,7 +3984,7 @@
   };
 
   const _excluded$x = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-  var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
+  var _jsxFileName$$ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
   const CardComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -4136,7 +4134,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$$,
         lineNumber: 103,
         columnNumber: 5
       }
@@ -4144,14 +4142,14 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$$,
         lineNumber: 114,
         columnNumber: 7
       }
     }), title !== '' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$$,
         lineNumber: 118,
         columnNumber: 13
       }
@@ -4160,14 +4158,14 @@
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$$,
         lineNumber: 119,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$$,
         lineNumber: 125,
         columnNumber: 13
       }
@@ -4242,7 +4240,7 @@
   }
 
   const _excluded$w = ["children"];
-  var _jsxFileName$Z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+  var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -4288,7 +4286,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Z,
+        fileName: _jsxFileName$_,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -4305,14 +4303,14 @@
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Z,
+        fileName: _jsxFileName$_,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Z,
+        fileName: _jsxFileName$_,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -4516,7 +4514,7 @@
   Badge.displayName = 'Badge';
 
   const _excluded$v = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+  var _jsxFileName$Z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -4569,7 +4567,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$Z,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4579,7 +4577,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$Z,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4587,21 +4585,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$Z,
         lineNumber: 48,
         columnNumber: 7
       }
     }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$Z,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$Z,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4619,7 +4617,7 @@
   };
 
   const _excluded$u = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-  var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+  var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
   const StyledImage = styled('img', {
     display: 'inline-block',
     alignItems: 'center',
@@ -4657,7 +4655,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 20,
         columnNumber: 9
       }
@@ -4678,7 +4676,7 @@
   };
 
   const _excluded$t = ["children", "label", "color", "css", "withClick", "side", "align"];
-  var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+  var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
   const slideUpAndFade$1 = keyframes({
     '0%': {
       opacity: 0,
@@ -4793,7 +4791,7 @@
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4801,7 +4799,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4809,7 +4807,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4820,7 +4818,7 @@
       css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -4829,7 +4827,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 100,
         columnNumber: 9
       }
@@ -4851,7 +4849,7 @@
     children: /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 119,
         columnNumber: 13
       }
@@ -4859,8 +4857,8 @@
   };
 
   const _excluded$s = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-  var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
-  const StyledProgress = react.styled(ProgressPrimitive__namespace.Root, {
+  var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+  const StyledProgress$1 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
     background: '$chartLightGreen',
@@ -4914,7 +4912,7 @@
       }
     }
   });
-  const StyledIndicator$2 = react.styled(ProgressPrimitive__namespace.Indicator, {
+  const StyledIndicator$3 = react.styled(ProgressPrimitive__namespace.Indicator, {
     backgroundColor: '$chartGreen',
     height: '60%',
     transition: 'width 660ms cubic-bezier(0.65, 0, 0.35, 1)',
@@ -4966,7 +4964,7 @@
       }
     }
   });
-  function Progress(_ref) {
+  function Progress$1(_ref) {
     let {
       className,
       value,
@@ -4979,7 +4977,7 @@
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledProgress, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledProgress$1, _extends({
       className: className,
       value: value,
       max: max,
@@ -4993,11 +4991,11 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$W,
         lineNumber: 88,
         columnNumber: 5
       }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$2, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$3, {
       color: color,
       size: size,
       rounded: rounded,
@@ -5006,13 +5004,13 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$W,
         lineNumber: 89,
         columnNumber: 7
       }
     }));
   }
-  Progress.propTypes = {
+  Progress$1.propTypes = {
     className: PropTypes__default["default"].string,
     value: PropTypes__default["default"].number,
     max: PropTypes__default["default"].number,
@@ -5022,7 +5020,7 @@
     rounded: PropTypes__default["default"].bool,
     width: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
   };
-  Progress.defaultProps = {
+  Progress$1.defaultProps = {
     max: 100,
     color: 'green',
     size: 'm',
@@ -5030,7 +5028,7 @@
   };
 
   const _excluded$r = ["gap", "direction", "children"];
-  var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
+  var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
 
   const FormGroup = _ref => {
     let {
@@ -5046,7 +5044,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$V,
         lineNumber: 6,
         columnNumber: 3
       }
@@ -5064,7 +5062,7 @@
   };
 
   const _excluded$q = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
-  var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
+  var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
   const StyledLabel$1 = styled(LabelPrimitive__namespace.Root, Text$1, {
     display: 'inline-block',
     fontSize: '$label',
@@ -5102,7 +5100,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -5112,7 +5110,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -5122,7 +5120,7 @@
       css: labelCss,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -5137,7 +5135,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -5145,14 +5143,14 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 57,
         columnNumber: 13
       }
@@ -5161,7 +5159,7 @@
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -5178,7 +5176,7 @@
   FormLabel.displayName = 'FormLabel';
 
   const _excluded$p = ["children", "error"];
-  var _jsxFileName$S = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
+  var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
   const StyledHelper = styled(Text$1, {
     display: 'inline-block',
     color: '$textSecondary',
@@ -5204,7 +5202,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$T,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -5216,7 +5214,7 @@
   };
   FormHelper.displayName = 'FormHelper';
 
-  var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
+  var _jsxFileName$S = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
   const CheckboxContext = /*#__PURE__*/React.createContext();
 
   const CheckboxGroup = ({
@@ -5250,7 +5248,7 @@
       value: values,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$S,
         lineNumber: 25,
         columnNumber: 5
       }
@@ -5268,7 +5266,7 @@
   };
   CheckboxGroup.displayName = 'CheckboxGroup';
 
-  var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+  var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
 
   const CheckOutline$1 = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5286,7 +5284,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5298,7 +5296,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -5310,13 +5308,13 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
+  var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\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",
@@ -5334,7 +5332,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5346,7 +5344,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -5358,15 +5356,15 @@
     d: "M14.31 10.41H3.9v-2.6h10.41z",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
   const _excluded$o = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-  var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
-  const StyledIndicator$1 = styled(CheckboxPrimitive__namespace.Indicator, {
+  var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
+  const StyledIndicator$2 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
     height: '125%',
@@ -5447,28 +5445,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 64,
         columnNumber: 5
       }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 77,
         columnNumber: 7
       }
     }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 77,
         columnNumber: 41
       }
     }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 77,
         columnNumber: 60
       }
@@ -5482,14 +5480,14 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 84,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 85,
         columnNumber: 7
       }
@@ -5505,14 +5503,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 86,
         columnNumber: 7
       }
     }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 101,
         columnNumber: 5
       }
@@ -5531,7 +5529,7 @@
   InputCheckbox.displayName = 'InputCheckbox';
 
   const _excluded$n = ["children", "size"];
-  var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+  var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
     width: '100%',
@@ -5668,7 +5666,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 143,
         columnNumber: 10
       }
@@ -5984,7 +5982,7 @@
   InputRadioGroup.displayName = 'InputRadioGroup';
 
   const _excluded$m = ["id", "disabled"];
-  var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
+  var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
     display: 'flex',
@@ -6003,7 +6001,7 @@
       backgroundColor: '$primary500'
     }
   };
-  const StyledIndicator = styled(RadioGroupPrimitive__namespace.Indicator, INDICATOR_BASE_STYLES);
+  const StyledIndicator$1 = styled(RadioGroupPrimitive__namespace.Indicator, INDICATOR_BASE_STYLES);
   const RADIO_BASE_STYLES = {
     all: 'unset',
     userSelect: 'none',
@@ -6033,7 +6031,7 @@
       cursor: 'pointer',
       // boxShadow: 'inset 0 0 0 2px $colors$primary600',
       border: '2px solid $primary600',
-      [`& ${StyledIndicator}`]: {
+      [`& ${StyledIndicator$1}`]: {
         '&::after': {
           backgroundColor: '$primary600'
         }
@@ -6049,7 +6047,7 @@
       '&::placeholder': {
         color: '$textDisable'
       },
-      [`& ${StyledIndicator}`]: {
+      [`& ${StyledIndicator$1}`]: {
         '&::after': {
           backgroundColor: '$gray200'
         }
@@ -6068,7 +6066,7 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 82,
         columnNumber: 3
       }
@@ -6078,14 +6076,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 83,
         columnNumber: 5
       }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator, {
+    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 84,
         columnNumber: 7
       }
@@ -6102,7 +6100,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -6291,7 +6289,7 @@
   InputNumber.displayName = 'InputNumber';
 
   const _excluded$l = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
-  var _jsxFileName$L = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
+  var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
   const TagWrapper$3 = styled('div', {
     boxSizing: 'border-box',
     listStyle: 'none',
@@ -6408,21 +6406,21 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 84,
         columnNumber: 7
       }
     }), icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 94,
         columnNumber: 31
       }
     }, icon) : null, /*#__PURE__*/React__default["default"].createElement(TagComponent$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 95,
         columnNumber: 9
       }
@@ -6432,7 +6430,7 @@
       readOnly: readOnly,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 97,
         columnNumber: 11
       }
@@ -6444,7 +6442,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 98,
         columnNumber: 13
       }
@@ -6468,7 +6466,7 @@
   };
 
   const _excluded$k = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar"];
-  var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
+  var _jsxFileName$L = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
   const Wrapper$2 = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -6618,7 +6616,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Wrapper$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 142,
         columnNumber: 5
       }
@@ -6631,7 +6629,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 143,
         columnNumber: 7
       }
@@ -6645,14 +6643,14 @@
       maxLength: maxChar,
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 151,
         columnNumber: 9
       }
     })), /*#__PURE__*/React__default["default"].createElement(TagWrapper$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 161,
         columnNumber: 7
       }
@@ -6665,7 +6663,7 @@
       onRemove: () => removeTags(index, 'removeTag'),
       __self: this,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 163,
         columnNumber: 11
       }
@@ -6692,7 +6690,7 @@
   };
 
   const _excluded$j = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-  var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
+  var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
     width: '16px',
@@ -6775,14 +6773,14 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 66,
         columnNumber: 3
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledThumb$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$K,
         lineNumber: 74,
         columnNumber: 5
       }
@@ -6800,7 +6798,7 @@
   };
   InputSwitch.displayName = 'InputSwitch';
 
-  var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\CloseFilled.js";
+  var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\CloseFilled.js";
 
   const SvgCloseFilled = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: props.size,
@@ -6810,7 +6808,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -6819,7 +6817,7 @@
     fill: "white",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -6829,7 +6827,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$I,
+      fileName: _jsxFileName$J,
       lineNumber: 6,
       columnNumber: 7
     }
@@ -6840,7 +6838,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 12,
       columnNumber: 5
     }
@@ -6850,7 +6848,7 @@
     mask: "url(#path-1-inside-1_2883_7918)",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 18,
       columnNumber: 5
     }
@@ -6861,7 +6859,7 @@
     size: 24
   };
 
-  var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\SearchOutline.js";
+  var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\SearchOutline.js";
 
   const SvgSearchOutline = props => /*#__PURE__*/React__namespace.createElement("svg", _extends({
     width: props.size,
@@ -6871,7 +6869,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -6883,7 +6881,7 @@
     strokeWidth: 2,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 5,
       columnNumber: 5
     }
@@ -6892,7 +6890,7 @@
     fill: props.color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 6,
       columnNumber: 5
     }
@@ -6904,7 +6902,7 @@
   };
 
   const _excluded$i = ["size", "onChange"];
-  var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
+  var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
 
   const InputSearchbox = _ref => {
     let {
@@ -6934,7 +6932,7 @@
       disabled: props.disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -6942,14 +6940,14 @@
       children: /*#__PURE__*/React__default["default"].createElement(SvgSearchOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$G,
+          fileName: _jsxFileName$H,
           lineNumber: 29,
           columnNumber: 35
         }
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 29,
         columnNumber: 7
       }
@@ -6959,7 +6957,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 30,
         columnNumber: 7
       }
@@ -6967,14 +6965,14 @@
       children: value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(SvgCloseFilled, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$G,
+          fileName: _jsxFileName$H,
           lineNumber: 31,
           columnNumber: 55
         }
       }) : /*#__PURE__*/React__default["default"].createElement("div", {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$G,
+          fileName: _jsxFileName$H,
           lineNumber: 31,
           columnNumber: 73
         }
@@ -6982,7 +6980,7 @@
       onClick: handleClearButtonClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 31,
         columnNumber: 7
       }
@@ -7342,7 +7340,7 @@
   });
 
   const _excluded$h = ["placeholder", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly", "isInvalid"];
-  var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
+  var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
   const Box = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -7624,7 +7622,7 @@
       onSelect: setSelectedValue,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 274,
         columnNumber: 5
       }
@@ -7643,7 +7641,7 @@
       css: css,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 293,
         columnNumber: 9
       }
@@ -7656,7 +7654,7 @@
       isInvalid: isInvalid,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 294,
         columnNumber: 11
       }
@@ -7666,7 +7664,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 302,
         columnNumber: 15
       }
@@ -7677,7 +7675,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 304,
         columnNumber: 19
       }
@@ -7685,14 +7683,14 @@
       children: /*#__PURE__*/React__namespace.createElement(icons.SearchOutline, {
         __self: this,
         __source: {
-          fileName: _jsxFileName$F,
+          fileName: _jsxFileName$G,
           lineNumber: 305,
           columnNumber: 49
         }
       }),
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 305,
         columnNumber: 21
       }
@@ -7706,7 +7704,7 @@
     }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 306,
         columnNumber: 21
       }
@@ -7720,7 +7718,7 @@
     }), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 314,
         columnNumber: 19
       }
@@ -7732,7 +7730,7 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 323,
         columnNumber: 15
       }
@@ -7741,7 +7739,7 @@
       css: StyledText$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 330,
         columnNumber: 19
       }
@@ -7750,7 +7748,7 @@
       css: StyledText$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 334,
         columnNumber: 19
       }
@@ -7761,7 +7759,7 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 341,
         columnNumber: 15
       }
@@ -7769,7 +7767,7 @@
       color: iconColor,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 346,
         columnNumber: 17
       }
@@ -7780,14 +7778,14 @@
       placement: placement,
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 350,
         columnNumber: 11
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(SelectOption, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 352,
         columnNumber: 15
       }
@@ -7810,7 +7808,7 @@
         },
         __self: this,
         __source: {
-          fileName: _jsxFileName$F,
+          fileName: _jsxFileName$G,
           lineNumber: 354,
           columnNumber: 19
         }
@@ -7818,14 +7816,14 @@
     })) : /*#__PURE__*/React__namespace.createElement(SelectOption, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 376,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(StyledDiv$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 377,
         columnNumber: 17
       }
@@ -7835,7 +7833,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 378,
         columnNumber: 19
       }
@@ -7847,7 +7845,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 379,
         columnNumber: 21
       }
@@ -8194,7 +8192,7 @@
     }
   });
 
-  var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\icon\\CheckOutline.js";
+  var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\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",
@@ -8212,7 +8210,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -8224,7 +8222,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -8236,13 +8234,13 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  var _jsxFileName$D = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
+  var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectTag\\InputSelectTag.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -8629,7 +8627,7 @@
     return /*#__PURE__*/React__namespace.createElement(Wrapper$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 380,
         columnNumber: 5
       }
@@ -8639,7 +8637,7 @@
       isInvalid: isInvalid,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 381,
         columnNumber: 7
       }
@@ -8650,7 +8648,7 @@
       disabled: disabled || readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 382,
         columnNumber: 9
       }
@@ -8661,7 +8659,7 @@
       disabled: disabled || readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 387,
         columnNumber: 13
       }
@@ -8672,7 +8670,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 393,
         columnNumber: 13
       }
@@ -8683,7 +8681,7 @@
       readOnly: readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 402,
         columnNumber: 9
       }
@@ -8691,7 +8689,7 @@
       color: disabled || readOnly ? colors.iconDisable : colors.iconPrimary,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 407,
         columnNumber: 11
       }
@@ -8699,7 +8697,7 @@
       disabled: disabled,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 411,
         columnNumber: 9
       }
@@ -8723,7 +8721,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 413,
         columnNumber: 13
       }
@@ -8735,14 +8733,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 434,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 439,
         columnNumber: 11
       }
@@ -8760,7 +8758,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 442,
         columnNumber: 17
       }
@@ -8773,7 +8771,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 455,
         columnNumber: 19
       }
@@ -8781,7 +8779,7 @@
       color: colors.iconDisable,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 464,
         columnNumber: 23
       }
@@ -8789,7 +8787,7 @@
       color: colors.iconGreen,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 468,
         columnNumber: 25
       }
@@ -8799,7 +8797,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 472,
         columnNumber: 19
       }
@@ -8810,14 +8808,14 @@
     }, getMenuProps(), {
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 477,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 478,
         columnNumber: 13
       }
@@ -8827,7 +8825,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 479,
         columnNumber: 15
       }
@@ -8839,7 +8837,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 480,
         columnNumber: 17
       }
@@ -8873,7 +8871,7 @@
     textEmptyItem: 'Item tidak ditemukan'
   };
 
-  var _jsxFileName$C = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
+  var _jsxFileName$D = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCreatable\\InputCreatable.js";
   const Wrapper = styled('div', {
     margin: 0,
     flexDirection: 'column',
@@ -9045,7 +9043,7 @@
     return /*#__PURE__*/React__default["default"].createElement(Wrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 167,
         columnNumber: 5
       }
@@ -9055,7 +9053,7 @@
       disabled: disabled || readOnly,
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 168,
         columnNumber: 7
       }
@@ -9069,7 +9067,7 @@
       onChange: event => handleInputValue(event.target.value),
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 169,
         columnNumber: 9
       }
@@ -9079,14 +9077,14 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 179,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(ItemWrapper, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 180,
         columnNumber: 9
       }
@@ -9094,7 +9092,7 @@
       color: colors.iconGreen,
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 181,
         columnNumber: 11
       }
@@ -9105,7 +9103,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 182,
         columnNumber: 11
       }
@@ -9334,7 +9332,7 @@
   }
 
   const _excluded$g = ["children"];
-  var _jsxFileName$B = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
+  var _jsxFileName$C = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\popover\\Popover.js";
   const {
     zIndices
   } = core.foundations;
@@ -9374,7 +9372,7 @@
       value: value,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 44,
         columnNumber: 10
       }
@@ -9416,7 +9414,7 @@
       returnFocus: false,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 62,
         columnNumber: 5
       }
@@ -9431,7 +9429,7 @@
     }), {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 63,
         columnNumber: 7
       }
@@ -9453,7 +9451,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$B,
+        fileName: _jsxFileName$C,
         lineNumber: 86,
         columnNumber: 5
       }
@@ -9468,7 +9466,7 @@
   Popover.displayName = 'Popover';
 
   const _excluded$f = ["className", "defaultValue", "value", "name", "disabled", "orientation", "dir", "min", "max", "step", "onValueChange", "minStepsBetweenThumbs", "color", "size", "width", "height"];
-  var _jsxFileName$A = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
+  var _jsxFileName$B = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\slider\\Slider.js";
   const StyledSlider = react.styled(SliderPrimitive__namespace.Root, {
     position: 'relative',
     display: 'flex',
@@ -9750,7 +9748,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 160,
         columnNumber: 5
       }
@@ -9759,7 +9757,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 181,
         columnNumber: 7
       }
@@ -9767,7 +9765,7 @@
       color: color,
       __self: this,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 182,
         columnNumber: 9
       }
@@ -9776,7 +9774,7 @@
       size: size,
       __self: this,
       __source: {
-        fileName: _jsxFileName$A,
+        fileName: _jsxFileName$B,
         lineNumber: 184,
         columnNumber: 7
       }
@@ -9813,7 +9811,7 @@
   };
 
   const _excluded$e = ["className", "children", "onClick", "type", "size"];
-  var _jsxFileName$z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tagStatus\\TagStatus.js";
+  var _jsxFileName$A = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tagStatus\\TagStatus.js";
   const TagWrapper = styled('div', {
     boxSizing: 'border-box',
     fontSize: '12px',
@@ -9925,7 +9923,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 63,
         columnNumber: 5
       }
@@ -9933,14 +9931,14 @@
       type: type,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 72,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(TagComponent, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$z,
+        fileName: _jsxFileName$A,
         lineNumber: 73,
         columnNumber: 7
       }
@@ -10022,7 +10020,7 @@
 
   const _excluded$d = ["className", "children", "type", "value", "defaultValue", "onValueChange", "disabled", "rovingFocus", "orientation", "dir", "loop", "size"],
         _excluded2$2 = ["className", "children", "leftIcon", "rightIcon", "disabled", "isToggle", "value"];
-  var _jsxFileName$y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\buttonGroup\\ButtonGroup.js";
+  var _jsxFileName$z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\buttonGroup\\ButtonGroup.js";
   const ButtonGroupComponent = styled(ToggleGroupPrimitive__namespace.Root, {
     display: 'inline-flex',
     borderRadius: '$md',
@@ -10164,7 +10162,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 111,
         columnNumber: 5
       }
@@ -10217,21 +10215,21 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 164,
         columnNumber: 5
       }
     }), leftIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconLeft, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 172,
         columnNumber: 33
       }
     }, leftIcon) : null, children, rightIcon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledIconRight, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$y,
+        fileName: _jsxFileName$z,
         lineNumber: 174,
         columnNumber: 34
       }
@@ -10318,7 +10316,7 @@
   });
 
   const _excluded$c = ["children"];
-  var _jsxFileName$x = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\NotificationBadge.js";
+  var _jsxFileName$y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\notificationBadge\\NotificationBadge.js";
   const NotificationBadgeRootStyle = styled('span', {
     position: 'relative',
     display: 'inline-flex',
@@ -10432,14 +10430,14 @@
     return /*#__PURE__*/React__default["default"].createElement(NotificationBadgeRootStyle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 106,
         columnNumber: 5
       }
     }, children, /*#__PURE__*/React__default["default"].createElement(NotificationBadgeStyle, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$x,
+        fileName: _jsxFileName$y,
         lineNumber: 108,
         columnNumber: 7
       }
@@ -10462,7 +10460,7 @@
   };
 
   const _excluded$b = ["className", "children", "radius", "padding", "width", "height"];
-  var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\paper\\Paper.js";
+  var _jsxFileName$x = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\paper\\Paper.js";
   const PaperComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -10494,7 +10492,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$w,
+        fileName: _jsxFileName$x,
         lineNumber: 17,
         columnNumber: 5
       }
@@ -10562,7 +10560,7 @@
   });
 
   const _excluded$a = ["children", "size", "css", "layer", "isMobile", "width"];
-  var _jsxFileName$v = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\modalDialog\\ModalDialog.js";
+  var _jsxFileName$w = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\modalDialog\\ModalDialog.js";
   const ModalDialogFooter = styled('div');
   ModalDialogFooter.displayName = 'ModalDialogFooter';
   const ModalDialogTitle = styled('div');
@@ -10587,10 +10585,14 @@
     const modalDialogContent = children.find(child => child.type.displayName === 'ModalDialogContent');
     const modalDialogTrigger = children.find(child => child.type.displayName === 'ModalDialogTrigger');
     const ref = React.useCallback(node => {
-      if (node !== null) {
-        document.body.classList.add('noscroll');
-      } else {
-        document.body.classList.remove('noscroll');
+      const appElement = document.getElementById("app");
+
+      if (appElement) {
+        if (node !== null) {
+          appElement.classList.add('noscroll');
+        } else {
+          appElement.classList.remove('noscroll');
+        }
       }
     }, []);
     const mobileCSS = isMobile && {
@@ -10608,22 +10610,22 @@
     return /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 57,
+        fileName: _jsxFileName$w,
+        lineNumber: 60,
         columnNumber: 5
       }
     }), modalDialogTrigger && /*#__PURE__*/React__default["default"].createElement(DialogTrigger, _extends({}, modalDialogTrigger.props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 58,
+        fileName: _jsxFileName$w,
+        lineNumber: 61,
         columnNumber: 30
       }
     })), /*#__PURE__*/React__default["default"].createElement(DialogPortal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 59,
+        fileName: _jsxFileName$w,
+        lineNumber: 62,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(DialogOverlay, {
@@ -10632,8 +10634,8 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 60,
+        fileName: _jsxFileName$w,
+        lineNumber: 63,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(DialogContent, {
@@ -10649,8 +10651,8 @@
       onOpenAutoFocus: props.onOpenAutoFocus,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 61,
+        fileName: _jsxFileName$w,
+        lineNumber: 64,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10662,8 +10664,8 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 74,
+        fileName: _jsxFileName$w,
+        lineNumber: 77,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10676,8 +10678,8 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 75,
+        fileName: _jsxFileName$w,
+        lineNumber: 78,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10690,8 +10692,8 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 84,
+        fileName: _jsxFileName$w,
+        lineNumber: 87,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(DialogTitle, {
@@ -10700,8 +10702,8 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 93,
+        fileName: _jsxFileName$w,
+        lineNumber: 96,
         columnNumber: 17
       }
     }, modalDialogTitle && /*#__PURE__*/React__default["default"].createElement(Heading, _extends({
@@ -10710,16 +10712,16 @@
     }, modalDialogTitle.props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 94,
+        fileName: _jsxFileName$w,
+        lineNumber: 97,
         columnNumber: 40
       }
     }))), /*#__PURE__*/React__default["default"].createElement(DialogClose, {
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 96,
+        fileName: _jsxFileName$w,
+        lineNumber: 99,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -10733,16 +10735,16 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 97,
+        fileName: _jsxFileName$w,
+        lineNumber: 100,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       size: "22",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 107,
+        fileName: _jsxFileName$w,
+        lineNumber: 110,
         columnNumber: 21
       }
     }))))), modalDialogContent && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, modalDialogContent.props, {
@@ -10753,8 +10755,8 @@
       }, modalDialogContent.props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 113,
+        fileName: _jsxFileName$w,
+        lineNumber: 116,
         columnNumber: 15
       }
     })), modalDialogFooter && /*#__PURE__*/React__default["default"].createElement(Box$1, _extends({}, modalDialogFooter.props, {
@@ -10766,8 +10768,8 @@
       }, modalDialogFooter.props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$v,
-        lineNumber: 124,
+        fileName: _jsxFileName$w,
+        lineNumber: 127,
         columnNumber: 15
       }
     }))))));
@@ -10777,7 +10779,7 @@
   };
 
   const _excluded$9 = ["children"];
-  var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\drawer\\Drawer.js";
+  var _jsxFileName$v = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\drawer\\Drawer.js";
   const Context$1 = /*#__PURE__*/React__default["default"].createContext();
   const {
     sizes
@@ -10822,14 +10824,14 @@
     return /*#__PURE__*/React__default["default"].createElement(DialogPrimitive__namespace.Root, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 40,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledOverlay$2, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 41,
         columnNumber: 7
       }
@@ -10837,7 +10839,7 @@
       value: Object.assign({}, props),
       __self: this,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 42,
         columnNumber: 7
       }
@@ -10996,14 +10998,14 @@
     return /*#__PURE__*/React__default["default"].createElement(Context$1.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 201,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(StyledContent$4, _extends({}, value, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 201,
         columnNumber: 38
       }
@@ -11013,14 +11015,14 @@
     return /*#__PURE__*/React__default["default"].createElement(Context$1.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 205,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(Header, _extends({}, value, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 205,
         columnNumber: 38
       }
@@ -11030,14 +11032,14 @@
     return /*#__PURE__*/React__default["default"].createElement(Context$1.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 209,
         columnNumber: 10
       }
     }, value => /*#__PURE__*/React__default["default"].createElement(Footer, _extends({}, value, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 209,
         columnNumber: 38
       }
@@ -11052,14 +11054,14 @@
     return /*#__PURE__*/React__default["default"].createElement(CloseButton, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 219,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$u,
+        fileName: _jsxFileName$v,
         lineNumber: 220,
         columnNumber: 7
       }
@@ -11091,7 +11093,7 @@
   const _excluded$8 = ["children", "disabled"],
         _excluded2$1 = ["children", "hasContent", "arrowColor"],
         _excluded3$1 = ["children"];
-  var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\accordion\\Accordion.js";
+  var _jsxFileName$u = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\accordion\\Accordion.js";
   //   from: { height: 0 },
   //   to: { height: 'var(--radix-accordion-content-height)' },
   // });
@@ -11114,7 +11116,7 @@
       disabled: disabled,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 20,
         columnNumber: 3
       }
@@ -11177,14 +11179,14 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledHeader, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 80,
         columnNumber: 3
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledTrigger, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 81,
         columnNumber: 5
       }
@@ -11193,7 +11195,7 @@
       color: arrowColor,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 83,
         columnNumber: 22
       }
@@ -11210,7 +11212,7 @@
     return /*#__PURE__*/React__default["default"].createElement(StyledContent$3, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$t,
+        fileName: _jsxFileName$u,
         lineNumber: 91,
         columnNumber: 61
       }
@@ -11263,7 +11265,7 @@
     return matches;
   }
 
-  var _jsxFileName$s = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\AdvancedOption.js";
+  var _jsxFileName$t = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\AdvancedOption.js";
   const ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
   const Item = styled(ButtonGroupItem, {
     fontSize: '$label',
@@ -11284,7 +11286,7 @@
       orientation: "vertical",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 20,
         columnNumber: 5
       }
@@ -11296,7 +11298,7 @@
       onClick: () => optionHandler(option.value),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$s,
+        fileName: _jsxFileName$t,
         lineNumber: 22,
         columnNumber: 9
       }
@@ -11375,7 +11377,7 @@
   });
   DateNumber.displayName = 'DateNumber';
 
-  var _jsxFileName$r = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\components\\Calendar.js";
+  var _jsxFileName$s = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\components\\Calendar.js";
 
   const getVariant$1 = ({
     selectable,
@@ -11608,7 +11610,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 241,
           columnNumber: 7
         }
@@ -11622,7 +11624,7 @@
         disabled: disabled || pickerState.type === YEAR_RANGE_PICKER$1,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 254,
           columnNumber: 7
         }
@@ -11640,7 +11642,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 286,
           columnNumber: 7
         }
@@ -11648,7 +11650,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 302,
           columnNumber: 9
         }
@@ -11666,7 +11668,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 308,
           columnNumber: 7
         }
@@ -11674,7 +11676,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 329,
           columnNumber: 9
         }
@@ -11690,7 +11692,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 335,
           columnNumber: 7
         }
@@ -11703,7 +11705,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 338,
           columnNumber: 13
         }
@@ -11713,7 +11715,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 348,
           columnNumber: 15
         }
@@ -11724,7 +11726,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 354,
           columnNumber: 13
         }
@@ -11737,7 +11739,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 360,
           columnNumber: 13
         }
@@ -11747,7 +11749,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 368,
           columnNumber: 15
         }
@@ -11762,7 +11764,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 390,
           columnNumber: 7
         }
@@ -11780,7 +11782,7 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$r,
+              fileName: _jsxFileName$s,
               lineNumber: 401,
               columnNumber: 17
             }
@@ -11802,7 +11804,7 @@
           variant: disabled ? 'disabled' : getVariant$1(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$r,
+            fileName: _jsxFileName$s,
             lineNumber: 418,
             columnNumber: 15
           }
@@ -11820,7 +11822,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 434,
           columnNumber: 7
         }
@@ -11834,7 +11836,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 443,
           columnNumber: 11
         }
@@ -11853,7 +11855,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 466,
           columnNumber: 7
         }
@@ -11867,7 +11869,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 475,
           columnNumber: 11
         }
@@ -11884,7 +11886,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 496,
           columnNumber: 7
         }
@@ -11901,7 +11903,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 505,
           columnNumber: 11
         }
@@ -11913,7 +11915,7 @@
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 527,
           columnNumber: 7
         }
@@ -11925,7 +11927,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 528,
           columnNumber: 9
         }
@@ -11936,7 +11938,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 543,
           columnNumber: 7
         }
@@ -11946,7 +11948,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 544,
           columnNumber: 9
         }
@@ -11958,7 +11960,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 545,
           columnNumber: 9
         }
@@ -11971,7 +11973,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 546,
           columnNumber: 11
         }
@@ -11979,7 +11981,7 @@
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 560,
           columnNumber: 11
         }
@@ -11993,7 +11995,7 @@
         size: "sm",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 561,
           columnNumber: 13
         }
@@ -12006,7 +12008,7 @@
         size: "sm",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 572,
           columnNumber: 13
         }
@@ -12020,7 +12022,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 590,
           columnNumber: 7
         }
@@ -12030,7 +12032,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 591,
           columnNumber: 9
         }
@@ -12041,7 +12043,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 592,
           columnNumber: 9
         }
@@ -12055,7 +12057,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 609,
           columnNumber: 7
         }
@@ -12065,7 +12067,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 610,
           columnNumber: 9
         }
@@ -12076,7 +12078,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 611,
           columnNumber: 9
         }
@@ -12088,7 +12090,7 @@
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 628,
           columnNumber: 7
         }
@@ -12096,14 +12098,14 @@
         orientation: "vertical",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 631,
           columnNumber: 25
         }
       }), /*#__PURE__*/React__default["default"].createElement(Box$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 632,
           columnNumber: 9
         }
@@ -12111,7 +12113,7 @@
         gap: 5,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 634,
           columnNumber: 11
         }
@@ -12119,7 +12121,7 @@
         key: `${calendar.month}${calendar.year}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 636,
           columnNumber: 15
         }
@@ -12130,14 +12132,14 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 638,
           columnNumber: 19
         }
       }), /*#__PURE__*/React__default["default"].createElement(DateContainer$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 645,
           columnNumber: 17
         }
@@ -12148,7 +12150,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$r,
+          fileName: _jsxFileName$s,
           lineNumber: 646,
           columnNumber: 19
         }
@@ -12158,7 +12160,7 @@
     return null;
   };
 
-  var _jsxFileName$q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\components\\MobileCalendar.js";
+  var _jsxFileName$r = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\components\\MobileCalendar.js";
 
   const getVariant = ({
     selectable,
@@ -12389,7 +12391,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 241,
           columnNumber: 7
         }
@@ -12403,7 +12405,7 @@
         disabled: disabled || pickerState.type === YEAR_RANGE_PICKER,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 254,
           columnNumber: 7
         }
@@ -12421,7 +12423,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 286,
           columnNumber: 7
         }
@@ -12429,7 +12431,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 302,
           columnNumber: 9
         }
@@ -12447,7 +12449,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 308,
           columnNumber: 7
         }
@@ -12455,7 +12457,7 @@
         color: "currentColor",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 329,
           columnNumber: 9
         }
@@ -12471,7 +12473,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 335,
           columnNumber: 7
         }
@@ -12486,7 +12488,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 347,
           columnNumber: 7
         }
@@ -12504,7 +12506,7 @@
             },
             __self: undefined,
             __source: {
-              fileName: _jsxFileName$q,
+              fileName: _jsxFileName$r,
               lineNumber: 358,
               columnNumber: 17
             }
@@ -12527,7 +12529,7 @@
           variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
           __self: undefined,
           __source: {
-            fileName: _jsxFileName$q,
+            fileName: _jsxFileName$r,
             lineNumber: 375,
             columnNumber: 15
           }
@@ -12544,7 +12546,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 392,
           columnNumber: 7
         }
@@ -12558,7 +12560,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 400,
           columnNumber: 11
         }
@@ -12576,7 +12578,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 423,
           columnNumber: 7
         }
@@ -12590,7 +12592,7 @@
         })),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 431,
           columnNumber: 11
         }
@@ -12606,7 +12608,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 452,
           columnNumber: 7
         }
@@ -12623,7 +12625,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 460,
           columnNumber: 11
         }
@@ -12634,7 +12636,7 @@
       return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 482,
           columnNumber: 7
         }
@@ -12642,7 +12644,7 @@
         key: `${calendar.month}${calendar.year}${weekday}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 484,
           columnNumber: 11
         }
@@ -12653,7 +12655,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 485,
           columnNumber: 13
         }
@@ -12667,7 +12669,7 @@
         gap: 4,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 501,
           columnNumber: 7
         }
@@ -12678,7 +12680,7 @@
         onClick: () => setExpandAdvanceView(!expandAdvanceView),
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 504,
           columnNumber: 13
         }
@@ -12686,21 +12688,21 @@
         variant: "contentButton",
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 510,
           columnNumber: 15
         }
       }, "Pilih Rentang Waktu"), expandAdvanceView ? /*#__PURE__*/React__default["default"].createElement(icons.ChevronDownOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 511,
           columnNumber: 36
         }
       }) : /*#__PURE__*/React__default["default"].createElement(icons.ChevronUpOutline, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 511,
           columnNumber: 61
         }
@@ -12710,7 +12712,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 514,
           columnNumber: 13
         }
@@ -12722,7 +12724,7 @@
         color: selected.length > 1 ? 'primary' : 'disable',
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 521,
           columnNumber: 9
         }
@@ -12730,7 +12732,7 @@
         gap: 3,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 526,
           columnNumber: 9
         }
@@ -12747,7 +12749,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 527,
           columnNumber: 11
         }
@@ -12763,7 +12765,7 @@
         disabled: disabled,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 541,
           columnNumber: 11
         }
@@ -12774,7 +12776,7 @@
       return /*#__PURE__*/React__default["default"].createElement(DatePickerContainer, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 561,
           columnNumber: 7
         }
@@ -12782,7 +12784,7 @@
         css: containerStyle,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 562,
           columnNumber: 9
         }
@@ -12791,7 +12793,7 @@
         gap: 5,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 563,
           columnNumber: 11
         }
@@ -12799,7 +12801,7 @@
         key: `${calendar.month}${calendar.year}`,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 565,
           columnNumber: 15
         }
@@ -12809,7 +12811,7 @@
         },
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$q,
+          fileName: _jsxFileName$r,
           lineNumber: 567,
           columnNumber: 17
         }
@@ -12819,7 +12821,7 @@
     return null;
   };
 
-  var _jsxFileName$p = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\TimePicker.js";
+  var _jsxFileName$q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\TimePicker.js";
   const Input$2 = styled('input', {
     display: 'none'
   });
@@ -12844,7 +12846,7 @@
       }
     }
   });
-  const Container$2 = styled(Flex$1, {
+  const Container$3 = styled(Flex$1, {
     borderRadius: 8,
     boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12);',
     width: 200,
@@ -12894,7 +12896,7 @@
       onMouseLeave: toggleHover,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 79,
         columnNumber: 5
       }
@@ -12904,7 +12906,7 @@
       onMouseLeave: toggleHover,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 81,
         columnNumber: 5
       }
@@ -12947,7 +12949,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 112,
         columnNumber: 5
       }
@@ -12956,7 +12958,7 @@
       gap: 6,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 113,
         columnNumber: 7
       }
@@ -12965,7 +12967,7 @@
       onClick: () => handleUp('hour'),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 114,
         columnNumber: 9
       }
@@ -12974,7 +12976,7 @@
       onClick: () => handleUp('minutes'),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 115,
         columnNumber: 9
       }
@@ -12985,7 +12987,7 @@
       onChange: handleChange,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 117,
         columnNumber: 7
       }
@@ -12993,7 +12995,7 @@
       size: size,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 118,
         columnNumber: 7
       }
@@ -13002,7 +13004,7 @@
       gap: 6,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 119,
         columnNumber: 7
       }
@@ -13011,7 +13013,7 @@
       onClick: () => handleDown('hour'),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 120,
         columnNumber: 9
       }
@@ -13020,7 +13022,7 @@
       onClick: () => handleDown('minutes'),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 121,
         columnNumber: 9
       }
@@ -13032,14 +13034,15 @@
     defaultValue,
     value
   }) => {
-    return /*#__PURE__*/React__default["default"].createElement(Container$2, {
+    return /*#__PURE__*/React__default["default"].createElement(Container$3, {
       size: size,
       direction: "column",
       gap: 3,
-      center: true,
+      justify: "center",
+      align: "center",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 129,
         columnNumber: 5
       }
@@ -13050,7 +13053,7 @@
       value: value,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$p,
+        fileName: _jsxFileName$q,
         lineNumber: 130,
         columnNumber: 7
       }
@@ -13064,6 +13067,155 @@
     value: PropTypes__default["default"].instanceOf(Date)
   };
 
+  var _jsxFileName$p = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\datePicker\\timePicker\\InputTimePicker.js";
+
+  const getInputPickerValue$1 = date => {
+    if (!date) return moment__default["default"]().format('HH:mm');
+    return moment__default["default"](date).format('HH:mm');
+  };
+
+  function InputTimePicker({
+    size,
+    onChange,
+    defaultValue,
+    value,
+    placeholder,
+    placement,
+    css
+  }) {
+    const [openPicker, setOpenPicker] = React.useState(false);
+    const isMobile = useMediaQuery(`(max-width: 480px'})`);
+
+    const renderInputGroup = () => /*#__PURE__*/React__default["default"].createElement(InputGroup, {
+      size: "sm",
+      onClick: isMobile ? () => setOpenPicker(true) : undefined,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 23,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(InputLeftElement, {
+      children: /*#__PURE__*/React__default["default"].createElement(icons.CalendarOutline, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$p,
+          lineNumber: 24,
+          columnNumber: 35
+        }
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 24,
+        columnNumber: 7
+      }
+    }), /*#__PURE__*/React__default["default"].createElement(InputText, {
+      placeholder: placeholder,
+      value: getInputPickerValue$1(value),
+      defaultValue: defaultValue,
+      isPicker: true,
+      tabIndex: "-1",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 25,
+        columnNumber: 7
+      }
+    }));
+
+    const renderDatePicker = () => /*#__PURE__*/React__default["default"].createElement(TimePicker, {
+      size: size,
+      defaultValue: defaultValue,
+      value: value,
+      onChange: onChange,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 36,
+        columnNumber: 5
+      }
+    });
+
+    return !isMobile ? /*#__PURE__*/React__default["default"].createElement(Popover, {
+      open: openPicker,
+      onOpenChange: setOpenPicker,
+      placement: placement,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 40,
+        columnNumber: 5
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(PopoverTrigger, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 41,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
+      css: css,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 42,
+        columnNumber: 9
+      }
+    }, renderInputGroup())), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 44,
+        columnNumber: 7
+      }
+    }, 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$p,
+        lineNumber: 48,
+        columnNumber: 7
+      }
+    }, renderInputGroup()), /*#__PURE__*/React__default["default"].createElement(Drawer, {
+      open: openPicker,
+      onOpenChange: setOpenPicker,
+      side: "bottom",
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 49,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(DrawerContent, {
+      css: {
+        position: 'fixed',
+        left: 0
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$p,
+        lineNumber: 50,
+        columnNumber: 9
+      }
+    }, renderDatePicker())));
+  }
+
+  InputTimePicker.defaultProps = {
+    placement: 'bottom-start',
+    placeholder: 'Select Time'
+  };
+  InputTimePicker.propTypes = {
+    size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
+    onChange: PropTypes__default["default"].func,
+    defaultValue: PropTypes__default["default"].instanceOf(Date),
+    value: PropTypes__default["default"].instanceOf(Date),
+    placeholder: PropTypes__default["default"].string,
+    placement: PropTypes__default["default"].string,
+    css: PropTypes__default["default"].object
+  };
+  InputTimePicker.displayName = 'InputTimePicker';
+
   const _excluded$7 = ["multiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled", "showTimePicker"],
         _excluded2 = ["multiDatePicker", "onChange", "onClose", "advanceView", "selected", "disabled"],
         _excluded3 = ["type"];
@@ -15928,7 +16080,8 @@
       const defaultConfig = {
         mobileTitle: 'Aksi',
         cssContent: {},
-        cssMenuItem: {}
+        cssMenuItem: {},
+        align: 'end'
       };
       const currentConfig = Object.assign({}, defaultConfig, config);
       const {
@@ -15939,13 +16092,13 @@
       const [openModal, setOpenModal] = React.useState(false);
       const [openDrop, setOpenDrop] = React.useState(false);
       return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(DropdownMenu, {
-        align: "start",
+        align: currentConfig.align,
         open: openDrop,
         onOpenchange: setOpenDrop,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 34,
+          lineNumber: 35,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -15953,7 +16106,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 35,
+          lineNumber: 36,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -15966,7 +16119,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 36,
+          lineNumber: 37,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -15974,14 +16127,14 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 37,
+          lineNumber: 38,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 37,
+          lineNumber: 38,
           columnNumber: 70
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -16003,7 +16156,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 40,
+          lineNumber: 41,
           columnNumber: 11
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -16011,7 +16164,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 59,
+          lineNumber: 60,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -16023,7 +16176,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 60,
+          lineNumber: 61,
           columnNumber: 17
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -16034,7 +16187,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 69,
+          lineNumber: 70,
           columnNumber: 17
         }
       }))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -16047,7 +16200,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 74,
+          lineNumber: 75,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -16055,7 +16208,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 75,
+          lineNumber: 76,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16068,28 +16221,28 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 76,
+          lineNumber: 77,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 77,
+          lineNumber: 78,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 77,
+          lineNumber: 78,
           columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 80,
+          lineNumber: 81,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -16099,7 +16252,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 81,
+          lineNumber: 82,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16114,7 +16267,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 82,
+          lineNumber: 83,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -16122,7 +16275,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 84,
+          lineNumber: 85,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box$1, {
@@ -16135,7 +16288,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 85,
+          lineNumber: 86,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -16144,7 +16297,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 93,
+          lineNumber: 94,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -16152,7 +16305,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$f,
-          lineNumber: 97,
+          lineNumber: 98,
           columnNumber: 19
         }
       })))))));
@@ -16240,9 +16393,9 @@
     const pageDialogTrigger = children.find(child => child.type.displayName === 'PageDialogTrigger');
     const ref = React.useCallback(node => {
       if (node !== null) {
-        document.body.classList.add('noscroll');
+        document.body.style.overflow = 'hidden';
       } else {
-        document.body.classList.remove('noscroll');
+        document.body.style.overflow = 'auto';
       }
     }, []);
     return /*#__PURE__*/React__default["default"].createElement(Dialog, _extends({}, props, {
@@ -17254,14 +17407,26 @@
       side,
       align
     } = React__default["default"].useContext(Context);
+    const ref = React.useCallback(node => {
+      const appElement = document.getElementById("app");
+
+      if (appElement) {
+        if (node !== null) {
+          appElement.classList.add('noscroll');
+        } else {
+          appElement.classList.remove('noscroll');
+        }
+      }
+    }, []);
     return /*#__PURE__*/React__default["default"].createElement(StyledContent, _extends({
       side: side,
-      align: align
+      align: align,
+      ref: ref
     }, props, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$a,
-        lineNumber: 128,
+        lineNumber: 138,
         columnNumber: 5
       }
     }), props.children);
@@ -17288,7 +17453,7 @@
     __self: undefined,
     __source: {
       fileName: _jsxFileName$a,
-      lineNumber: 147,
+      lineNumber: 157,
       columnNumber: 3
     }
   }), props.children, props.rightIcon && props.rightIcon));
@@ -20112,7 +20277,7 @@
   var img = "data:image/gif;base64,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";
 
   var _jsxFileName$7 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\components\\ColorMap.js";
-  const Container$1 = styled('div', {
+  const Container$2 = styled('div', {
     userSelect: 'none',
     margin: 'auto',
     width: 236
@@ -20137,7 +20302,7 @@
       onMouseOut && onMouseOver(hex);
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(Container$1, {
+    return /*#__PURE__*/React__default["default"].createElement(Container$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$7,
@@ -22277,7 +22442,7 @@
   }
 
   var _jsxFileName$5 = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\colorPicker\\ColorPicker.js";
-  const Container = styled(Flex$1, {
+  const Container$1 = styled(Flex$1, {
     background: '$white',
     padding: 16,
     borderRadius: 8,
@@ -22467,7 +22632,7 @@
       onAddColor && onAddColor();
     }
 
-    return /*#__PURE__*/React__default["default"].createElement(Container, {
+    return /*#__PURE__*/React__default["default"].createElement(Container$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$5,
@@ -24105,6 +24270,85 @@
   EditableTable.Switch = Switch;
   EditableTable.Remove = Remove;
 
+  var Container = react.styled('div', {});
+  var ProgressText = react.styled('p', {
+    fontStyle: 'normal',
+    fontWeight: 400,
+    fontSize: 14,
+    color: '$textSecondary',
+    marginTop: 8,
+    textAlign: 'center'
+  });
+  var StyledProgress = react.styled(ProgressPrimitive__namespace.Root, {
+    position: 'relative',
+    overflow: 'hidden',
+    background: '$gray50',
+    borderRadius: '99999px',
+    width: '100%',
+    height: 8
+  });
+  var StyledIndicator = react.styled(ProgressPrimitive__namespace.Indicator, {
+    background: 'linear-gradient(90deg, rgba(1,174,136,1) 35%, rgba(4,201,158,1) 100%)',
+    width: '100%',
+    height: '100%',
+    transition: 'transform 660ms cubic-bezier(0.65, 0, 0.35, 1)'
+  });
+  var Progress = StyledProgress;
+  var ProgressIndicator = StyledIndicator;
+
+  function PrimitiveLoadingBar(_a) {
+    var progress = _a.progress,
+        description = _a.description,
+        showProgressOnly = _a.showProgressOnly,
+        css = _a.css;
+    return jsxRuntime.jsxs(Container, __assign({
+      css: css
+    }, {
+      children: [jsxRuntime.jsx(Progress, __assign({
+        value: 66
+      }, {
+        children: jsxRuntime.jsx(ProgressIndicator, {
+          style: {
+            transform: "translateX(-".concat(100 - progress, "%)")
+          }
+        }, void 0)
+      }), void 0), !showProgressOnly && jsxRuntime.jsx(ProgressText, {
+        children: "".concat(description !== null && description !== void 0 ? description : 'Loading...', " ").concat(progress, "%")
+      }, void 0)]
+    }), void 0);
+  }
+
+  var interval;
+  function LoadingBar(props) {
+    var show = props.show,
+        isAuto = props.isAuto;
+
+    var _a = React.useState(0),
+        progress = _a[0],
+        setProgress = _a[1];
+
+    React.useEffect(function () {
+      if (show) {
+        interval = setInterval(function () {
+          setProgress(function (prev) {
+            return prev + 2;
+          });
+        }, 500);
+      } else {
+        setProgress(100);
+        clearInterval(interval);
+      }
+    }, [show]);
+    React.useEffect(function () {
+      if (progress === 100) {
+        clearInterval(interval);
+      }
+    }, [progress]);
+    return isAuto ? jsxRuntime.jsx(PrimitiveLoadingBar, __assign({}, props, {
+      progress: progress
+    }), void 0) : jsxRuntime.jsx(PrimitiveLoadingBar, __assign({}, props), void 0);
+  }
+
   var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
   const StyledPaper = styled(Paper, {
     borderRadius: '10px 10px 0 0',
@@ -24320,7 +24564,9 @@
   exports.InputTags = TagsInput;
   exports.InputText = InputText;
   exports.InputTextArea = InputTextArea;
+  exports.InputTimePicker = InputTimePicker;
   exports.Link = Link;
+  exports.LoadingBar = LoadingBar;
   exports.MajooProvider = MajooProvider;
   exports.MobileTable = MobileTable;
   exports.ModalDialog = ModalDialog;
@@ -24345,7 +24591,7 @@
   exports.PopoverContent = PopoverContent;
   exports.PopoverTrigger = PopoverTrigger;
   exports.PriceColumn = PriceColumn;
-  exports.Progress = Progress;
+  exports.Progress = Progress$1;
   exports.RANGE_PICKER = RANGE_PICKER;
   exports.RightSlot = RightSlot;
   exports.RowExpanderColumn = rowExpanderColumn;