@majoo-ui/react 1.46.4 → 1.46.5

package/index.esm.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, createContext, useContext, useRef, createElement as createElement$2, cloneElement, useCallback, useReducer } from 'react';
+import React__default, { useState, createContext, useContext, useEffect, useRef, createElement as createElement$2, cloneElement, useCallback, useReducer } from 'react';
 import PropTypes, { string, func } from 'prop-types';
 import { createStitches, styled as styled$1 } from '@stitches/react';
 import { foundations } from '@majoo-ui/core';
@@ -27,7 +27,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
 import moment from 'moment';
-import { useTable, useSortBy, useExpanded, usePagination, useRowSelect } from 'react-table';
+import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useMountedLayoutEffect } from 'react-table';
 import ReactDOM, { createPortal } from 'react-dom';
 import * as ADialog from '@radix-ui/react-alert-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -40,7 +40,7 @@ import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import request from 'superagent';
 import { useSticky } from 'react-table-sticky';
 
-var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+var _jsxFileName$$ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
 function ThemeProvider({
   theme,
@@ -50,7 +50,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$_,
+      fileName: _jsxFileName$$,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -2231,9 +2231,9 @@ Flex$1.defaultProps = {
 };
 Flex$1.displayName = 'Flex';
 
-const _excluded$y = ["children"],
+const _excluded$z = ["children"],
       _excluded2$2 = ["children"];
-var _jsxFileName$Z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
 const GridComponent = styled('div', {
   display: 'grid',
   variants: {
@@ -2407,7 +2407,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2418,7 +2418,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2474,7 +2474,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 232,
       columnNumber: 5
     }
@@ -2491,8 +2491,8 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$x = ["children", "isCollapse", "css", "contentHeader"];
-var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+const _excluded$y = ["children", "isCollapse", "css", "contentHeader"];
+var _jsxFileName$Z = "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',
@@ -2521,7 +2521,7 @@ const PageContainer = _ref => {
     css,
     contentHeader
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return /*#__PURE__*/React__default.createElement(StyledDiv$3, _extends({
     id: "retina-container",
@@ -2531,7 +2531,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$Z,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -2844,8 +2844,8 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+const _excluded$x = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+var _jsxFileName$Y = "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';
@@ -3010,7 +3010,7 @@ const Toast = _ref => {
     captionOfAction,
     hrefOfAction
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -3039,7 +3039,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 205,
       columnNumber: 5
     }
@@ -3051,7 +3051,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 216,
       columnNumber: 9
     }
@@ -3061,7 +3061,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 223,
       columnNumber: 11
     }
@@ -3069,7 +3069,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 224,
       columnNumber: 13
     }
@@ -3077,7 +3077,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 225,
       columnNumber: 15
     }
@@ -3085,7 +3085,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 226,
       columnNumber: 17
     }
@@ -3097,7 +3097,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 227,
       columnNumber: 17
     }
@@ -3105,7 +3105,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 235,
       columnNumber: 21
     }
@@ -3120,7 +3120,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 236,
       columnNumber: 23
     }
@@ -3129,7 +3129,7 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 250,
       columnNumber: 19
     }
@@ -3143,7 +3143,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 254,
       columnNumber: 17
     }
@@ -3152,7 +3152,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 263,
       columnNumber: 19
     }
@@ -3167,7 +3167,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 267,
       columnNumber: 17
     }
@@ -3191,7 +3191,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
 const ToastBox = styled(Flex$1, {
   position: 'fixed',
   variants: {
@@ -3233,7 +3233,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3241,7 +3241,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -3252,7 +3252,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 46,
         columnNumber: 18
       }
@@ -3260,8 +3260,8 @@ const ToastContainer = ({
   })));
 };
 
-const _excluded$v = ["id"];
-var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+const _excluded$w = ["id"];
+var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
 let toastCount = 0;
 
 const ToastProvider = ({
@@ -3273,7 +3273,7 @@ const ToastProvider = ({
     const {
       id
     } = toast,
-          rest = _objectWithoutPropertiesLoose(toast, _excluded$v); // eslint-disable-next-line no-plusplus
+          rest = _objectWithoutPropertiesLoose(toast, _excluded$w); // eslint-disable-next-line no-plusplus
 
 
     const uniqueId = ++toastCount;
@@ -3303,7 +3303,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3312,7 +3312,7 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 45,
       columnNumber: 7
     }
@@ -3321,7 +3321,7 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 49,
       columnNumber: 7
     }
@@ -3330,7 +3330,7 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 53,
       columnNumber: 7
     }
@@ -3339,14 +3339,14 @@ const ToastProvider = ({
     position: BOTTOM_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 57,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
 
 function MajooProvider({
   children,
@@ -3359,14 +3359,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -3380,8 +3380,8 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-const _excluded$u = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
-var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
+const _excluded$v = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
+var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
 const Context$2 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -3463,7 +3463,7 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 91,
     columnNumber: 3
   }
@@ -3485,7 +3485,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 108,
     columnNumber: 3
   }
@@ -3508,7 +3508,7 @@ const BannerLink = ({
 }) => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 125,
     columnNumber: 3
   }
@@ -3520,7 +3520,7 @@ const BannerLink = ({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 127,
     columnNumber: 7
   }
@@ -3547,7 +3547,7 @@ BannerLink.defaultProps = {
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 154,
     columnNumber: 3
   }
@@ -3559,7 +3559,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 156,
     columnNumber: 7
   }
@@ -3568,7 +3568,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   size: "16px",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 163,
     columnNumber: 9
   }
@@ -3578,7 +3578,7 @@ const SingleTagBanner = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 171,
       columnNumber: 5
     }
@@ -3588,7 +3588,7 @@ const SingleTagBanner = props => {
     align: "end",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 172,
       columnNumber: 7
     }
@@ -3601,21 +3601,21 @@ const SingleTagBanner = props => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 173,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 181,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 182,
       columnNumber: 33
     }
@@ -3624,7 +3624,7 @@ const SingleTagBanner = props => {
     variant: props.variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 185,
       columnNumber: 11
     }
@@ -3637,7 +3637,7 @@ const SingleTagBanner = props => {
     closeCenter: !props.title && !props.link,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 190,
       columnNumber: 7
     }
@@ -3646,7 +3646,7 @@ const SingleTagBanner = props => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 198,
       columnNumber: 9
     }
@@ -3665,7 +3665,7 @@ const Banner = _ref => {
     children,
     bannerBlock
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
@@ -3675,7 +3675,7 @@ const Banner = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 206,
       columnNumber: 5
     }
@@ -3692,7 +3692,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 208,
       columnNumber: 9
     }
@@ -3703,7 +3703,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 215,
       columnNumber: 11
     }
@@ -3717,7 +3717,7 @@ const Banner = _ref => {
     onRemove: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 218,
       columnNumber: 9
     }
@@ -4027,8 +4027,8 @@ const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$t = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-var _jsxFileName$S = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
+const _excluded$u = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
+var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
 const CardComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -4165,7 +4165,7 @@ const Card = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -4178,7 +4178,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 103,
       columnNumber: 5
     }
@@ -4186,14 +4186,14 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 114,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 118,
       columnNumber: 13
     }
@@ -4202,14 +4202,14 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 119,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 125,
       columnNumber: 13
     }
@@ -4235,8 +4235,8 @@ Card.defaultProps = {
   title: ''
 };
 
-const _excluded$s = ["children"];
-var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+const _excluded$t = ["children"];
+var _jsxFileName$S = "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': {
@@ -4282,7 +4282,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -4293,20 +4293,20 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -4511,8 +4511,8 @@ Badge.defaultProps = {
 };
 Badge.displayName = 'Badge';
 
-const _excluded$r = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+const _excluded$s = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -4556,7 +4556,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4565,7 +4565,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4575,7 +4575,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4583,21 +4583,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 48,
       columnNumber: 7
     }
   }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4614,8 +4614,8 @@ Avatar.defaultProps = {
   delayMs: 0
 };
 
-const _excluded$q = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
+var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
 const StyledImage = styled('img', {
   display: 'inline-block',
   alignItems: 'center',
@@ -4638,7 +4638,7 @@ function Image(_ref) {
     objectFit,
     fallback
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
     className: className,
@@ -4653,7 +4653,7 @@ function Image(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 20,
       columnNumber: 9
     }
@@ -4673,8 +4673,8 @@ Image.defaultProps = {
   rounded: false
 };
 
-const _excluded$p = ["children", "label", "color", "css", "withClick", "side", "align"];
-var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+const _excluded$q = ["children", "label", "color", "css", "withClick", "side", "align"];
+var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
 const slideUpAndFade$1 = keyframes({
   '0%': {
     opacity: 0,
@@ -4782,14 +4782,14 @@ const Tooltip = _ref => {
     side,
     align
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4797,7 +4797,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4805,7 +4805,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4816,7 +4816,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4825,7 +4825,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 100,
       columnNumber: 9
     }
@@ -4847,15 +4847,15 @@ Tooltip.defaultProps = {
   children: /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 119,
       columnNumber: 13
     }
   })
 };
 
-const _excluded$o = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+const _excluded$p = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
 const StyledProgress$1 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -4973,7 +4973,7 @@ function Progress$1(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
@@ -4989,7 +4989,7 @@ function Progress$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -5002,7 +5002,7 @@ function Progress$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -5025,8 +5025,8 @@ Progress$1.defaultProps = {
   rounded: true
 };
 
-const _excluded$n = ["gap", "direction", "children"];
-var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
+const _excluded$o = ["gap", "direction", "children"];
+var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
 
 const FormGroup = _ref => {
   let {
@@ -5034,7 +5034,7 @@ const FormGroup = _ref => {
     direction,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: direction,
@@ -5042,7 +5042,7 @@ const FormGroup = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 6,
       columnNumber: 3
     }
@@ -5059,8 +5059,8 @@ FormGroup.defaultProps = {
   direction: 'column'
 };
 
-const _excluded$m = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
-var _jsxFileName$L = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
+const _excluded$n = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
+var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
 const StyledLabel$1 = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -5092,13 +5092,13 @@ const FormLabel = _ref => {
     maxCount,
     labelCss
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -5108,7 +5108,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -5118,7 +5118,7 @@ const FormLabel = _ref => {
     css: labelCss,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -5133,7 +5133,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -5141,14 +5141,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -5157,7 +5157,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -5173,8 +5173,8 @@ FormLabel.propTypes = {
 };
 FormLabel.displayName = 'FormLabel';
 
-const _excluded$l = ["children", "error"];
-var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
+const _excluded$m = ["children", "error"];
+var _jsxFileName$L = "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',
@@ -5192,7 +5192,7 @@ const FormHelper = _ref => {
     children,
     error
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
@@ -5200,7 +5200,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -5212,7 +5212,7 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
+var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
 const CheckboxContext = /*#__PURE__*/createContext();
 
 const CheckboxGroup = ({
@@ -5223,18 +5223,29 @@ const CheckboxGroup = ({
   disabled
 }) => {
   const [selectedItems, setSelectedItems] = useState(defaultValue);
-  useEffect(() => {
-    if (onChange && !value) onChange(selectedItems);
-  }, [selectedItems, onChange]);
 
   const checkItem = (item, index) => {
-    if (!value) return setSelectedItems(current => [...current, item]);
-    return onChange([...value, item], index);
+    if (!value) {
+      setSelectedItems(current => {
+        const items = [...current, item];
+        if (onChange) onChange(items);
+        return items;
+      });
+    } else {
+      if (onChange) onChange([...value, item], index);
+    }
   };
 
   const uncheckItem = (item, index) => {
-    if (!value) return setSelectedItems(current => current.filter(currItem => currItem !== item));
-    return onChange(value.filter(currItem => currItem !== item), index);
+    if (!value) {
+      setSelectedItems(current => {
+        const items = current.filter(currItem => currItem !== item);
+        if (onChange) onChange(items);
+        return items;
+      });
+    } else {
+      if (onChange) onChange(value.filter(currItem => currItem !== item), index);
+    }
   };
 
   const values = {
@@ -5246,8 +5257,8 @@ const CheckboxGroup = ({
     value: values,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
-      lineNumber: 25,
+      fileName: _jsxFileName$K,
+      lineNumber: 35,
       columnNumber: 5
     }
   }, React__default.Children.map(children, child => /*#__PURE__*/React__default.cloneElement(child, {
@@ -5264,7 +5275,7 @@ CheckboxGroup.defaultProps = {
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
-var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
 
 const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5282,7 +5293,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5294,7 +5305,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5306,13 +5317,13 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
+var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
 
 const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5330,7 +5341,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5342,7 +5353,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5354,14 +5365,14 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   d: "M14.31 10.41H3.9v-2.6h10.41z",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-const _excluded$k = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
+const _excluded$l = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
+var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
 const StyledIndicator$2 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -5420,7 +5431,7 @@ const Checkbox = _ref => {
     index,
     value
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
   const context = useContext(CheckboxContext);
   const [isChecked, setChecked] = useState(false);
@@ -5443,28 +5454,28 @@ const Checkbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 64,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 77,
       columnNumber: 7
     }
   }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 77,
       columnNumber: 41
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 77,
       columnNumber: 60
     }
@@ -5478,14 +5489,14 @@ const InputCheckbox = _ref2 => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 84,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 85,
       columnNumber: 7
     }
@@ -5501,14 +5512,14 @@ const InputCheckbox = _ref2 => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 86,
       columnNumber: 7
     }
   }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 101,
       columnNumber: 5
     }
@@ -5526,8 +5537,8 @@ InputCheckbox.propTypes = {
 };
 InputCheckbox.displayName = 'InputCheckbox';
 
-const _excluded$j = ["children", "size"];
-var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+const _excluded$k = ["children", "size"];
+var _jsxFileName$G = "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%',
@@ -5643,7 +5654,7 @@ const InputGroup = _ref => {
     children,
     size = 'lg'
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   const isLetter = children.some(child => child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
   const isElement = children.some(child => child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
@@ -5667,7 +5678,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 146,
       columnNumber: 10
     }
@@ -5781,6 +5792,7 @@ const InputLetter = styled(Text$1, {
   }
 });
 const InputPrefix = styled(InputLetter, {
+  padding: '6px 0px 6px $spacing-05',
   defaultVariants: {
     variant: 'placeholder',
     color: 'secondary',
@@ -5796,6 +5808,7 @@ InputPrefix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 const InputSuffix = styled(InputLetter, {
+  padding: '6px $spacing-05 6px 0px',
   defaultVariants: {
     variant: 'placeholder',
     color: 'secondary',
@@ -5811,6 +5824,8 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 
+const _excluded$j = ["disabled"];
+var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
 const disabledStyle = {
   backgroundColor: '$formDisable',
   color: '$textDisable',
@@ -5822,7 +5837,7 @@ const disabledStyle = {
     border: '1px solid $colors$gray300'
   }
 };
-const InputText = styled('input', {
+const StyledInput = styled('input', {
   // Reset
   appearance: 'none',
   boxSizing: 'border-box',
@@ -5878,7 +5893,7 @@ const InputText = styled('input', {
     }
   }],
   variants: {
-    disabled: {
+    isDisabled: {
       true: disabledStyle
     },
     readOnly: {
@@ -5947,6 +5962,25 @@ const InputText = styled('input', {
     size: 'lg'
   }
 });
+const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    disabled
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+
+  return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
+    ref: ref,
+    disabled: disabled,
+    isDisabled: disabled
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$F,
+      lineNumber: 151,
+      columnNumber: 3
+    }
+  }));
+});
 InputText.displayName = 'InputText';
 
 const InputTextArea = styled(InputText, {
@@ -8258,6 +8292,8 @@ function Select$1(_ref2) {
       inputProps: getInputProps({
         onChange: event => handleInputValue(event.target.value),
         disabled
+      }, {
+        suppressRefError: true
       }),
       __self: this,
       __source: {
@@ -9990,7 +10026,9 @@ const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
         showLeadingIcon: showLeadingIcon,
         disabled: disabled,
         placeholder: placeholder,
-        inputProps: getInputProps()
+        inputProps: getInputProps({}, {
+          suppressRefError: true
+        })
       }, props, {
         ref: forwardedRef
       }), void 0)
@@ -13686,7 +13724,7 @@ const CalendarBox = ({
               fontWeight: 600
             },
             onClick: onUpdate,
-            disabled: disabled,
+            disabled: disabled || !selected || selected.length <= 1,
             size: "sm"
           }, {
             children: "Proses"
@@ -14939,10 +14977,6 @@ const CalendarRangePicker = _a => {
     if (!dateValue.length || dateValue.length === 2) {
       setDateValue([selectedDate.date]);
     } else {
-      if (selectedDate.date.toDateString() === dateValue[0].toDateString()) {
-        return;
-      }
-
       if (new Date(dateValue[0]) > selectedDate.date) {
         setDateValue([selectedDate.date, dateValue[0]]);
       } else {
@@ -14961,12 +14995,8 @@ const CalendarRangePicker = _a => {
   }));
 
   const updateHandler = () => {
-    if (dateValue && onChange) {
-      if (dateValue.length === 1) {
-        onChange([dateValue[0], dateValue[0]]);
-      } else {
-        onChange(dateValue);
-      }
+    if (dateValue && onChange && dateValue.length > 1) {
+      onChange(dateValue);
     }
 
     onClose();
@@ -15677,7 +15707,7 @@ function PaginationInfo(_ref) {
       lineNumber: 60,
       columnNumber: 7
     }
-  }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1}-${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
+  }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1} - ${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
 }
 
 const _excluded$2 = ["limit", "currentPage", "totalData", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
@@ -16318,7 +16348,7 @@ function Table({
   useEffect(() => {
     if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
   }, [sortBy]);
-  useEffect(() => {
+  useMountedLayoutEffect(() => {
     if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
   }, [selectedRowIds]);
   useEffect(() => {
@@ -25733,7 +25763,8 @@ const TableCell = styled('td', {
 });
 const TableCellContent = styled('div', {
   height: '100%',
-  paddingTop: 15,
+  paddingTop: 10,
+  paddingBottom: 10,
   display: 'flex',
   variants: {
     align: {