@majoo-ui/react 1.46.3 → 1.46.5-rc.2

package/index.umd.js

@@ -55,7 +55,7 @@
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
 
-  var _jsxFileName$Z = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+  var _jsxFileName$$ = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
   function ThemeProvider({
     theme,
@@ -65,7 +65,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$Z,
+        fileName: _jsxFileName$$,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -2346,9 +2346,9 @@
   };
   Flex$1.displayName = 'Flex';
 
-  const _excluded$x = ["children"],
+  const _excluded$z = ["children"],
         _excluded2$2 = ["children"];
-  var _jsxFileName$Y = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+  var _jsxFileName$_ = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
     variants: {
@@ -2522,7 +2522,7 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -2533,7 +2533,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2589,7 +2589,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$_,
         lineNumber: 232,
         columnNumber: 5
       }
@@ -2606,8 +2606,8 @@
   };
   GridItem.displayName = 'Grid Item';
 
-  const _excluded$w = ["children", "isCollapse", "css", "contentHeader"];
-  var _jsxFileName$X = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+  const _excluded$y = ["children", "isCollapse", "css", "contentHeader"];
+  var _jsxFileName$Z = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
   const StyledDiv$3 = styled(Flex$1, {
     justifyContent: 'center',
     marginLeft: 'auto',
@@ -2636,7 +2636,7 @@
       css,
       contentHeader
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv$3, _extends({
       id: "retina-container",
@@ -2646,7 +2646,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Z,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -2924,8 +2924,8 @@
     }), void 0);
   });
 
-  const _excluded$v = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-  var _jsxFileName$W = "C:\\Project\\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:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
   const TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
   const TOP_RIGHT_POSITION = 'top-right';
@@ -3090,7 +3090,7 @@
       captionOfAction,
       hrefOfAction
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const close = React__namespace.useCallback(() => {
@@ -3119,7 +3119,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 205,
         columnNumber: 5
       }
@@ -3131,7 +3131,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 216,
         columnNumber: 9
       }
@@ -3141,7 +3141,7 @@
       onClick: onClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 223,
         columnNumber: 11
       }
@@ -3149,7 +3149,7 @@
       direction: "column",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 224,
         columnNumber: 13
       }
@@ -3157,7 +3157,7 @@
       direction: "row",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 225,
         columnNumber: 15
       }
@@ -3165,7 +3165,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 226,
         columnNumber: 17
       }
@@ -3177,7 +3177,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 227,
         columnNumber: 17
       }
@@ -3185,7 +3185,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 235,
         columnNumber: 21
       }
@@ -3200,7 +3200,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 236,
         columnNumber: 23
       }
@@ -3209,7 +3209,7 @@
       color: "secondary",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 250,
         columnNumber: 19
       }
@@ -3223,7 +3223,7 @@
       hasTitle: !!title,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 254,
         columnNumber: 17
       }
@@ -3232,7 +3232,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 263,
         columnNumber: 19
       }
@@ -3247,7 +3247,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$Y,
         lineNumber: 267,
         columnNumber: 17
       }
@@ -3271,7 +3271,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.createContext({});
 
-  var _jsxFileName$V = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+  var _jsxFileName$X = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
     variants: {
@@ -3313,7 +3313,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$X,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3321,7 +3321,7 @@
       position: position,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$X,
         lineNumber: 44,
         columnNumber: 7
       }
@@ -3332,7 +3332,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$V,
+          fileName: _jsxFileName$X,
           lineNumber: 46,
           columnNumber: 18
         }
@@ -3340,8 +3340,8 @@
     })));
   };
 
-  const _excluded$u = ["id"];
-  var _jsxFileName$U = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+  const _excluded$w = ["id"];
+  var _jsxFileName$W = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
   let toastCount = 0;
 
   const ToastProvider = ({
@@ -3353,7 +3353,7 @@
       const {
         id
       } = toast,
-            rest = _objectWithoutPropertiesLoose(toast, _excluded$u); // eslint-disable-next-line no-plusplus
+            rest = _objectWithoutPropertiesLoose(toast, _excluded$w); // eslint-disable-next-line no-plusplus
 
 
       const uniqueId = ++toastCount;
@@ -3383,7 +3383,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$W,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3392,7 +3392,7 @@
       position: TOP_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$W,
         lineNumber: 45,
         columnNumber: 7
       }
@@ -3401,7 +3401,7 @@
       position: TOP_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$W,
         lineNumber: 49,
         columnNumber: 7
       }
@@ -3410,7 +3410,7 @@
       position: BOTTOM_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$W,
         lineNumber: 53,
         columnNumber: 7
       }
@@ -3419,14 +3419,14 @@
       position: BOTTOM_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$W,
         lineNumber: 57,
         columnNumber: 7
       }
     }));
   };
 
-  var _jsxFileName$T = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+  var _jsxFileName$V = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
 
   function MajooProvider({
     children,
@@ -3439,14 +3439,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$V,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$V,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -3460,8 +3460,8 @@
     disableGlobalStyle: PropTypes__default["default"].bool
   };
 
-  const _excluded$t = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
-  var _jsxFileName$S = "C:\\Project\\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:\\Project\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
   const Context$2 = /*#__PURE__*/React__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
     maxWidth: '100%',
@@ -3543,7 +3543,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$U,
       lineNumber: 91,
       columnNumber: 3
     }
@@ -3565,7 +3565,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$U,
       lineNumber: 108,
       columnNumber: 3
     }
@@ -3588,7 +3588,7 @@
   }) => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$U,
       lineNumber: 125,
       columnNumber: 3
     }
@@ -3600,7 +3600,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$U,
       lineNumber: 127,
       columnNumber: 7
     }
@@ -3627,7 +3627,7 @@
   const BannerClose = () => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$U,
       lineNumber: 154,
       columnNumber: 3
     }
@@ -3639,7 +3639,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$U,
       lineNumber: 156,
       columnNumber: 7
     }
@@ -3648,7 +3648,7 @@
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$U,
       lineNumber: 163,
       columnNumber: 9
     }
@@ -3658,7 +3658,7 @@
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 171,
         columnNumber: 5
       }
@@ -3668,7 +3668,7 @@
       align: "end",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 172,
         columnNumber: 7
       }
@@ -3681,21 +3681,21 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 173,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 181,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 182,
         columnNumber: 33
       }
@@ -3704,7 +3704,7 @@
       variant: props.variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 185,
         columnNumber: 11
       }
@@ -3717,7 +3717,7 @@
       closeCenter: !props.title && !props.link,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 190,
         columnNumber: 7
       }
@@ -3726,7 +3726,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 198,
         columnNumber: 9
       }
@@ -3745,7 +3745,7 @@
       children,
       bannerBlock
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
     return /*#__PURE__*/React__namespace.createElement(StyledBanner, _extends({
       variant: variant,
@@ -3755,7 +3755,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 206,
         columnNumber: 5
       }
@@ -3772,7 +3772,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 208,
         columnNumber: 9
       }
@@ -3783,7 +3783,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 215,
         columnNumber: 11
       }
@@ -3797,7 +3797,7 @@
       onRemove: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$U,
         lineNumber: 218,
         columnNumber: 9
       }
@@ -4110,8 +4110,8 @@
     }), void 0);
   });
 
-  const _excluded$s = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-  var _jsxFileName$R = "C:\\Project\\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:\\Project\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
   const CardComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -4248,7 +4248,7 @@
       textColor,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(CardComponent, {
       className: className,
@@ -4261,7 +4261,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 103,
         columnNumber: 5
       }
@@ -4269,14 +4269,14 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         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$R,
+        fileName: _jsxFileName$T,
         lineNumber: 118,
         columnNumber: 13
       }
@@ -4285,14 +4285,14 @@
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 119,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$T,
         lineNumber: 125,
         columnNumber: 13
       }
@@ -4318,8 +4318,8 @@
     title: ''
   };
 
-  const _excluded$r = ["children"];
-  var _jsxFileName$Q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+  const _excluded$t = ["children"];
+  var _jsxFileName$S = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -4365,7 +4365,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$S,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -4376,20 +4376,20 @@
     let {
       children
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$S,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$S,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -4592,8 +4592,8 @@
   };
   Badge.displayName = 'Badge';
 
-  const _excluded$q = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$P = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+  const _excluded$s = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+  var _jsxFileName$R = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -4637,7 +4637,7 @@
       onClick,
       css
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
@@ -4646,7 +4646,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4656,7 +4656,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4664,21 +4664,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         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$P,
+        fileName: _jsxFileName$R,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$R,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4695,8 +4695,8 @@
     delayMs: 0
   };
 
-  const _excluded$p = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
-  var _jsxFileName$O = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+  const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
+  var _jsxFileName$Q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
   const StyledImage = styled('img', {
     display: 'inline-block',
     alignItems: 'center',
@@ -4719,7 +4719,7 @@
       objectFit,
       fallback
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledImage, _extends({
       className: className,
@@ -4734,7 +4734,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$Q,
         lineNumber: 20,
         columnNumber: 9
       }
@@ -4754,8 +4754,8 @@
     rounded: false
   };
 
-  const _excluded$o = ["children", "label", "color", "css", "withClick", "side", "align"];
-  var _jsxFileName$N = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+  const _excluded$q = ["children", "label", "color", "css", "withClick", "side", "align"];
+  var _jsxFileName$P = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
   const slideUpAndFade$1 = keyframes({
     '0%': {
       opacity: 0,
@@ -4863,14 +4863,14 @@
       side,
       align
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
     const [open, setOpen] = React.useState(false);
     return /*#__PURE__*/React__default["default"].createElement(TooltipBase, _extends({}, rest, {
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$P,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4878,7 +4878,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$P,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4886,7 +4886,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$P,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4897,7 +4897,7 @@
       css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$P,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -4906,7 +4906,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$P,
         lineNumber: 100,
         columnNumber: 9
       }
@@ -4928,15 +4928,15 @@
     children: /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$P,
         lineNumber: 119,
         columnNumber: 13
       }
     })
   };
 
-  const _excluded$n = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-  var _jsxFileName$M = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+  const _excluded$p = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+  var _jsxFileName$O = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
   const StyledProgress$1 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -5054,7 +5054,7 @@
       rounded,
       width
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledProgress$1, _extends({
       className: className,
@@ -5070,7 +5070,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$O,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -5083,7 +5083,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$O,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -5106,8 +5106,8 @@
     rounded: true
   };
 
-  const _excluded$m = ["gap", "direction", "children"];
-  var _jsxFileName$L = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
+  const _excluded$o = ["gap", "direction", "children"];
+  var _jsxFileName$N = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
 
   const FormGroup = _ref => {
     let {
@@ -5115,7 +5115,7 @@
       direction,
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
       direction: direction,
@@ -5123,7 +5123,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$N,
         lineNumber: 6,
         columnNumber: 3
       }
@@ -5140,8 +5140,8 @@
     direction: 'column'
   };
 
-  const _excluded$l = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
-  var _jsxFileName$K = "C:\\Project\\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:\\Project\\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',
@@ -5173,13 +5173,13 @@
       maxCount,
       labelCss
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$M,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -5189,7 +5189,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$M,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -5199,7 +5199,7 @@
       css: labelCss,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$M,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -5214,7 +5214,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$M,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -5222,14 +5222,14 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$M,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$M,
         lineNumber: 57,
         columnNumber: 13
       }
@@ -5238,7 +5238,7 @@
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$M,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -5254,8 +5254,8 @@
   };
   FormLabel.displayName = 'FormLabel';
 
-  const _excluded$k = ["children", "error"];
-  var _jsxFileName$J = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
+  const _excluded$m = ["children", "error"];
+  var _jsxFileName$L = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
   const StyledHelper = styled(Text$1, {
     display: 'inline-block',
     color: '$textSecondary',
@@ -5273,7 +5273,7 @@
       children,
       error
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
       error: error,
@@ -5281,7 +5281,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$J,
+        fileName: _jsxFileName$L,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -5293,7 +5293,7 @@
   };
   FormHelper.displayName = 'FormHelper';
 
-  var _jsxFileName$I = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
+  var _jsxFileName$K = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
   const CheckboxContext = /*#__PURE__*/React.createContext();
 
   const CheckboxGroup = ({
@@ -5304,18 +5304,29 @@
     disabled
   }) => {
     const [selectedItems, setSelectedItems] = React.useState(defaultValue);
-    React.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 = {
@@ -5327,8 +5338,8 @@
       value: values,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$I,
-        lineNumber: 25,
+        fileName: _jsxFileName$K,
+        lineNumber: 35,
         columnNumber: 5
       }
     }, React__default["default"].Children.map(children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
@@ -5345,7 +5356,7 @@
   };
   CheckboxGroup.displayName = 'CheckboxGroup';
 
-  var _jsxFileName$H = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+  var _jsxFileName$J = "C:\\Project\\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",
@@ -5363,7 +5374,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$J,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5375,7 +5386,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$J,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -5387,13 +5398,13 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$J,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  var _jsxFileName$G = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
+  var _jsxFileName$I = "C:\\Project\\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",
@@ -5411,7 +5422,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$I,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5423,7 +5434,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$I,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -5435,14 +5446,14 @@
     d: "M14.31 10.41H3.9v-2.6h10.41z",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$I,
       lineNumber: 26,
       columnNumber: 5
     }
   }));
 
-  const _excluded$j = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-  var _jsxFileName$F = "C:\\Project\\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:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
   const StyledIndicator$2 = styled(CheckboxPrimitive__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -5501,7 +5512,7 @@
       index,
       value
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
     const context = React.useContext(CheckboxContext);
     const [isChecked, setChecked] = React.useState(false);
@@ -5524,28 +5535,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$H,
         lineNumber: 64,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$H,
         lineNumber: 77,
         columnNumber: 7
       }
     }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$H,
         lineNumber: 77,
         columnNumber: 41
       }
     }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$H,
         lineNumber: 77,
         columnNumber: 60
       }
@@ -5559,14 +5570,14 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$H,
         lineNumber: 84,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$H,
         lineNumber: 85,
         columnNumber: 7
       }
@@ -5582,14 +5593,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$H,
         lineNumber: 86,
         columnNumber: 7
       }
     }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$H,
         lineNumber: 101,
         columnNumber: 5
       }
@@ -5607,8 +5618,8 @@
   };
   InputCheckbox.displayName = 'InputCheckbox';
 
-  const _excluded$i = ["children", "size"];
-  var _jsxFileName$E = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+  const _excluded$k = ["children", "size"];
+  var _jsxFileName$G = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
   const InputGroupStyle = styled('div', {
     display: 'flex',
     width: '100%',
@@ -5724,7 +5735,7 @@
       children,
       size = 'lg'
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+        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');
@@ -5748,7 +5759,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$G,
         lineNumber: 146,
         columnNumber: 10
       }
@@ -5862,6 +5873,7 @@
     }
   });
   const InputPrefix = styled(InputLetter, {
+    padding: '6px 0px 6px $spacing-05',
     defaultVariants: {
       variant: 'placeholder',
       color: 'secondary',
@@ -5877,6 +5889,7 @@
     children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
   };
   const InputSuffix = styled(InputLetter, {
+    padding: '6px $spacing-05 6px 0px',
     defaultVariants: {
       variant: 'placeholder',
       color: 'secondary',
@@ -5892,7 +5905,20 @@
     children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
   };
 
-  var InputText = styled('input', {
+  const _excluded$j = ["disabled"];
+  var _jsxFileName$F = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
+  const disabledStyle = {
+    backgroundColor: '$formDisable',
+    color: '$textDisable',
+    cursor: 'not-allowed',
+    '&::placeholder': {
+      color: '$textDisable'
+    },
+    '&:hover': {
+      border: '1px solid $colors$gray300'
+    }
+  };
+  const StyledInput = styled('input', {
     // Reset
     appearance: 'none',
     boxSizing: 'border-box',
@@ -5927,16 +5953,9 @@
     '&:hover': {
       border: '1px solid $colors$primary600'
     },
-    '&:disabled': {
-      backgroundColor: '$formDisable',
-      color: '$textDisable',
-      cursor: 'not-allowed',
-      '&::placeholder': {
-        color: '$textDisable'
-      },
-      '&:hover': {
-        border: '1px solid $colors$gray300'
-      }
+    '&:disabled': disabledStyle,
+    '&[data-state="readonly"]': {
+      backgroundColor: '$formDisable'
     },
     '&::placeholder': {
       color: '$textDisable'
@@ -5955,6 +5974,9 @@
       }
     }],
     variants: {
+      isDisabled: {
+        true: disabledStyle
+      },
       readOnly: {
         true: {
           backgroundColor: '$formDisable'
@@ -6021,6 +6043,26 @@
       size: 'lg'
     }
   });
+
+  function InputText(_ref) {
+    let {
+      disabled
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
+      disabled: disabled,
+      isDisabled: disabled
+    }, props, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$F,
+        lineNumber: 151,
+        columnNumber: 10
+      }
+    }));
+  }
+
   InputText.displayName = 'InputText';
 
   const InputTextArea = styled(InputText, {
@@ -6043,15 +6085,41 @@
     size: 'lg'
   };
 
-  const InputRadioGroup = styled(RadioGroupPrimitive__namespace.Root, Flex$1);
+  const InputRadioContext = /*#__PURE__*/React__default["default"].createContext();
+
+  var _jsxFileName$E = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
+  const RadioGroup = styled(RadioGroupPrimitive__namespace.Root, Flex$1);
+  function InputRadioGroup(props) {
+    return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
+      value: props,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 13,
+        columnNumber: 7
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(RadioGroup, _extends({}, props, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$E,
+        lineNumber: 14,
+        columnNumber: 9
+      }
+    }), React__default["default"].Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+      style: Object.assign({}, child.props.style, {
+        opacity: 1
+      })
+    }))));
+  }
   InputRadioGroup.propTypes = {
     defaultValue: PropTypes__default["default"].string,
     value: PropTypes__default["default"].string,
-    onValueChange: PropTypes__default["default"].func
+    onValueChange: PropTypes__default["default"].func,
+    outlined: PropTypes__default["default"].bool
   };
   InputRadioGroup.displayName = 'InputRadioGroup';
 
-  const _excluded$h = ["id", "disabled"];
+  const _excluded$i = ["id", "disabled", "css", "inputType", "inputProps"];
   var _jsxFileName$D = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
   const INDICATOR_BASE_STYLES = {
     alignItems: 'center',
@@ -6124,63 +6192,152 @@
       }
     }
   });
+  const Container$5 = styled(Flex$1, {
+    variants: {
+      outlined: {
+        true: {
+          border: '1px solid $gray300',
+          borderRadius: 8,
+          padding: 8,
+          '& > input': {
+            border: 'none !important',
+            padding: '0px !important',
+            height: '24px !important',
+            '&:disabled': {
+              backgroundColor: '$transparent !important'
+            }
+          }
+        }
+      },
+      active: {
+        true: {
+          border: '1px solid $primary400 !important'
+        },
+        false: {
+          '& > input': {
+            color: '$textPrimary !important'
+          }
+        }
+      },
+      disabled: {
+        true: {
+          '& > input': {
+            color: '$textSecondary !important'
+          }
+        }
+      }
+    }
+  });
   const InputRadio = _ref => {
     let {
       id,
-      disabled
+      disabled,
+      css,
+      inputType,
+      inputProps
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+
+    function renderInputType(type, checked) {
+      switch (type) {
+        case 'number':
+          return /*#__PURE__*/React__default["default"].createElement(InputNumber, _extends({}, inputProps, {
+            disabled: disabled || checked !== props.value,
+            __self: this,
+            __source: {
+              fileName: _jsxFileName$D,
+              lineNumber: 124,
+              columnNumber: 16
+            }
+          }));
 
-    return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
-      align: "center",
-      gap: 4,
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$D,
-        lineNumber: 82,
-        columnNumber: 3
-      }
-    }, /*#__PURE__*/React__default["default"].createElement(StyledRadio, _extends({
-      id: id,
-      disabled: disabled
-    }, props, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$D,
-        lineNumber: 83,
-        columnNumber: 5
-      }
-    }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$D,
-        lineNumber: 84,
-        columnNumber: 7
+        case 'text':
+          return /*#__PURE__*/React__default["default"].createElement(InputText, _extends({}, inputProps, {
+            disabled: disabled || checked !== props.value,
+            __self: this,
+            __source: {
+              fileName: _jsxFileName$D,
+              lineNumber: 127,
+              columnNumber: 16
+            }
+          }));
+
+        default:
+          return /*#__PURE__*/React__default["default"].createElement(FormLabel, {
+            htmlFor: id,
+            mb: 0,
+            labelCss: {
+              fontSize: '$long-content-regular',
+              lineHeight: '$long-content-regular',
+              letterSpacing: '$long-content-regular',
+              fontWeight: '400',
+              cursor: 'pointer',
+              color: disabled ? '$textDisable' : '$textPrimary'
+            },
+            __self: this,
+            __source: {
+              fileName: _jsxFileName$D,
+              lineNumber: 131,
+              columnNumber: 11
+            }
+          }, props.label);
       }
-    })), /*#__PURE__*/React__default["default"].createElement(FormLabel, {
-      htmlFor: id,
-      mb: 0,
-      labelCss: {
-        fontSize: '$long-content-regular',
-        lineHeight: '$long-content-regular',
-        letterSpacing: '$long-content-regular',
-        fontWeight: '400',
-        cursor: 'pointer',
-        color: disabled ? '$textDisable' : '$textPrimary'
-      },
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Consumer, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$D,
-        lineNumber: 86,
+        lineNumber: 150,
         columnNumber: 5
       }
-    }, props.label));
+    }, ({
+      defaultValue,
+      value,
+      outlined
+    }) => {
+      const checked = value != null ? value : defaultValue;
+      return /*#__PURE__*/React__default["default"].createElement(Container$5, {
+        align: "center",
+        gap: 4,
+        outlined: outlined,
+        disabled: disabled,
+        active: outlined && checked === props.value && !disabled,
+        css: css,
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$D,
+          lineNumber: 155,
+          columnNumber: 11
+        }
+      }, /*#__PURE__*/React__default["default"].createElement(StyledRadio, _extends({
+        id: id,
+        disabled: disabled
+      }, props, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$D,
+          lineNumber: 163,
+          columnNumber: 13
+        }
+      }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$D,
+          lineNumber: 164,
+          columnNumber: 15
+        }
+      })), renderInputType(inputType, checked));
+    });
   };
   InputRadio.propTypes = {
     id: PropTypes__default["default"].string,
     disabled: PropTypes__default["default"].bool,
     value: PropTypes__default["default"].string,
-    label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node])
+    label: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].node]),
+    css: PropTypes__default["default"].object,
+    inputType: PropTypes__default["default"].oneOf(['number', 'text', 'default']),
+    onChange: PropTypes__default["default"].func
   };
   InputRadio.displayName = 'InputRadio';
 
@@ -6834,7 +6991,7 @@
     }, { unsafe: true });
   }
 
-  const _excluded$g = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
+  const _excluded$h = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
   var _jsxFileName$C = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tag\\Tag.js";
   const TagWrapper$3 = styled('div', {
     boxSizing: 'border-box',
@@ -6939,7 +7096,7 @@
       onRemove,
       readOnly
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
     return /*#__PURE__*/React__default["default"].createElement(TagWrapper$3, _extends({
       ref: ref,
@@ -7011,7 +7168,7 @@
     readOnly: false
   };
 
-  const _excluded$f = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern"];
+  const _excluded$g = ["size", "isInvalid", "placeholder", "onChange", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern"];
   var _jsxFileName$B = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTags\\InputTags.js";
   const Wrapper$2 = styled('div', {
     margin: 0,
@@ -7130,7 +7287,7 @@
       maxChar,
       pattern
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
     const [tags, setTags] = React__default["default"].useState(value);
     const [regexError, setRegexError] = React__default["default"].useState(false);
@@ -7275,7 +7432,7 @@
     readOnly: false
   };
 
-  const _excluded$e = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
+  const _excluded$f = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
   var _jsxFileName$A = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSwitch\\InputSwitch.js";
   const StyledThumb$1 = styled(SwitchPrimitive__namespace.Thumb, {
     display: 'block',
@@ -7348,7 +7505,7 @@
       dataOffLabel,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledSwitch, _extends({
       defaultChecked: defaultChecked,
@@ -7487,7 +7644,7 @@
     size: 24
   };
 
-  const _excluded$d = ["size", "onChange", "css", "disabled"];
+  const _excluded$e = ["size", "onChange", "css", "disabled"];
   var _jsxFileName$x = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSearchbox\\InputSearchbox.js";
 
   const InputSearchbox = _ref => {
@@ -7497,7 +7654,7 @@
       css,
       disabled
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
     const [value, setValue] = React__default["default"].useState('');
     const handleChange = React__default["default"].useCallback(e => {
@@ -7736,7 +7893,7 @@
     ];
   });
 
-  const _excluded$c = ["showLeadingIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"],
+  const _excluded$d = ["showLeadingIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"],
         _excluded2$1 = ["placeholder", "searchPlaceholder", "embedSearch", "option", "onChange", "size", "disabled", "search", "value", "iconColor", "icon", "placement", "valueSelector", "textSelector", "disabledOptions", "css", "onSearch", "readOnly", "isInvalid", "noOptionIcon"];
   var _jsxFileName$w = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelect\\InputSelect.js";
   const SelectContainer = styled('div', {
@@ -7963,7 +8120,7 @@
       handleInputValue,
       noStyling
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
     const inputRef = React__namespace.useRef(null);
     return /*#__PURE__*/React__namespace.createElement(InputGroup, {
@@ -8217,6 +8374,8 @@
         inputProps: getInputProps({
           onChange: event => handleInputValue(event.target.value),
           disabled
+        }, {
+          suppressRefError: true
         }),
         __self: this,
         __source: {
@@ -8325,7 +8484,7 @@
           } : {
             backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
             fontWeight: 'normal',
-            color: selectedItem === item ? '$textGreen' : '$textPrimary'
+            color: selectedItem && selectedItem.value === item.value ? '$textGreen' : '$textPrimary'
           },
           __self: this,
           __source: {
@@ -8775,6 +8934,7 @@
     }
   }));
 
+  const _excluded$c = ["placeholder", "option", "value", "size", "disabled", "onChange", "search", "readOnly", "placement", "disabledOptions", "textEmptyItem", "onRemoveItem", "isInvalid", "sortBy", "showSelectedTag", "css"];
   var _jsxFileName$u = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputSelectCheck\\InputSelectCheck.js";
   const Wrapper$1 = styled('div', {
     margin: 0,
@@ -8812,13 +8972,13 @@
     variants: {
       size: {
         sm: {
-          height: 'auto',
-          minheight: 32,
+          height: 32,
+          maxHeight: 32,
           padding: '2px 16px'
         },
         lg: {
-          height: 'auto',
-          minheight: 40,
+          height: 40,
+          maxHeight: 40,
           padding: '8px 16px'
         }
       },
@@ -8977,24 +9137,27 @@
     color: '$textDisable',
     display: 'inline-flex'
   });
-  function InputSelectCheck({
-    placeholder,
-    option,
-    value,
-    size,
-    disabled,
-    onChange,
-    search,
-    readOnly,
-    placement,
-    disabledOptions,
-    textEmptyItem,
-    onRemoveItem,
-    isInvalid,
-    sortBy,
-    props,
-    showSelectedTag
-  }) {
+  function InputSelectCheck(_ref) {
+    let {
+      placeholder,
+      option,
+      value,
+      size,
+      disabled,
+      onChange,
+      search,
+      readOnly,
+      placement,
+      disabledOptions,
+      textEmptyItem,
+      onRemoveItem,
+      isInvalid,
+      sortBy,
+      showSelectedTag,
+      css
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+
     const [initItem, setInitItem] = React__namespace.useState(option); //init filter selectedItems on useMultipleSelection
 
     const [item, setItem] = React__namespace.useState(option);
@@ -9182,21 +9345,23 @@
         }
       }
     });
-    return /*#__PURE__*/React__namespace.createElement(Wrapper$1, {
+    return /*#__PURE__*/React__namespace.createElement(Wrapper$1, _extends({
+      css: css
+    }, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 400,
+        lineNumber: 401,
         columnNumber: 5
       }
-    }, /*#__PURE__*/React__namespace.createElement(Select, {
+    }), /*#__PURE__*/React__namespace.createElement(Select, {
       size: size,
       disabled: disabled || readOnly,
       isInvalid: isInvalid,
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 401,
+        lineNumber: 402,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__namespace.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9207,7 +9372,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 402,
+        lineNumber: 403,
         columnNumber: 9
       }
     }), search ? /*#__PURE__*/React__namespace.createElement(Input$4, _extends({}, getInputProps({
@@ -9218,7 +9383,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 407,
+        lineNumber: 408,
         columnNumber: 13
       }
     })) : /*#__PURE__*/React__namespace.createElement(Button, _extends({}, getToggleButtonProps({
@@ -9229,7 +9394,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 413,
+        lineNumber: 414,
         columnNumber: 13
       }
     }), placeholder)), /*#__PURE__*/React__namespace.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9240,7 +9405,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 422,
+        lineNumber: 423,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
@@ -9248,7 +9413,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 427,
+        lineNumber: 428,
         columnNumber: 11
       }
     }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
@@ -9256,7 +9421,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 431,
+        lineNumber: 432,
         columnNumber: 9
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag, _extends({
@@ -9280,7 +9445,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 433,
+        lineNumber: 434,
         columnNumber: 13
       }
     }), selectedItem.name))), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
@@ -9292,14 +9457,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 454,
+        lineNumber: 455,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 459,
+        lineNumber: 460,
         columnNumber: 11
       }
     }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper$1, _extends({
@@ -9317,7 +9482,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 462,
+        lineNumber: 463,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
@@ -9330,7 +9495,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 475,
+        lineNumber: 476,
         columnNumber: 19
       }
     }, item.isDisabled ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -9338,7 +9503,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 484,
+        lineNumber: 485,
         columnNumber: 23
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -9346,7 +9511,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 488,
+        lineNumber: 489,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__namespace.createElement(Item$2, {
@@ -9356,7 +9521,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 492,
+        lineNumber: 493,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, _extends({
@@ -9367,14 +9532,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 497,
+        lineNumber: 498,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 498,
+        lineNumber: 499,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -9384,7 +9549,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 499,
+        lineNumber: 500,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -9396,7 +9561,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 500,
+        lineNumber: 501,
         columnNumber: 17
       }
     })), textEmptyItem))));
@@ -9415,7 +9580,8 @@
     search: PropTypes__default["default"].bool,
     placement: PropTypes__default["default"].oneOf(['top', 'bottom']),
     disabledOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
-    textEmptyItem: PropTypes__default["default"].string
+    textEmptyItem: PropTypes__default["default"].string,
+    css: PropTypes__default["default"].object
   };
   InputSelectCheck.defaultProps = {
     placeholder: 'Select Item',
@@ -9987,7 +10153,9 @@
           showLeadingIcon: showLeadingIcon,
           disabled: disabled,
           placeholder: placeholder,
-          inputProps: getInputProps()
+          inputProps: getInputProps({}, {
+            suppressRefError: true
+          })
         }, props, {
           ref: forwardedRef
         }), void 0)
@@ -13710,7 +13878,7 @@
                 fontWeight: 600
               },
               onClick: onUpdate,
-              disabled: disabled,
+              disabled: disabled || !selected || selected.length <= 1,
               size: "sm"
             }, {
               children: "Proses"
@@ -15019,10 +15187,6 @@
       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 {
@@ -15041,12 +15205,8 @@
     }));
 
     var updateHandler = function 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();
@@ -15778,10 +15938,10 @@
         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"];
+  const _excluded$2 = ["limit", "currentPage", "totalData", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
   var _jsxFileName$g = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\pagination\\Pagination.js";
 
   function Pagination(_ref) {
@@ -15791,7 +15951,8 @@
       totalData,
       hideDataInfo,
       onLimitChange,
-      onPageChange
+      onPageChange,
+      rowsPerPageOptions
     } = _ref,
         props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
@@ -15806,11 +15967,11 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$g,
-        lineNumber: 12,
+        lineNumber: 21,
         columnNumber: 5
       }
     }), !hideDataInfo ? /*#__PURE__*/React__default["default"].createElement(PaginationInfo, {
-      limits: [10, 25, 50, 100],
+      limits: rowsPerPageOptions,
       selectedLimit: limit,
       currentPage: currentPage,
       totalData: totalData,
@@ -15818,14 +15979,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$g,
-        lineNumber: 14,
+        lineNumber: 23,
         columnNumber: 9
       }
     }) : /*#__PURE__*/React__default["default"].createElement(Box, {
       __self: this,
       __source: {
         fileName: _jsxFileName$g,
-        lineNumber: 22,
+        lineNumber: 31,
         columnNumber: 9
       }
     }), totalPages > 1 && /*#__PURE__*/React__default["default"].createElement(PaginationButton, {
@@ -15835,7 +15996,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$g,
-        lineNumber: 24,
+        lineNumber: 33,
         columnNumber: 26
       }
     }));
@@ -16282,27 +16443,29 @@
         fetchData = _a.fetchData,
         _e = _a.hideDataInfo,
         hideDataInfo = _e === void 0 ? false : _e,
-        _f = _a.emptyDataMessage,
-        emptyDataMessage = _f === void 0 ? 'Tidak ada data' : _f,
-        _g = _a.isLoading,
-        isLoading = _g === void 0 ? false : _g,
+        _f = _a.rowsPerPageOptions,
+        rowsPerPageOptions = _f === void 0 ? [10, 25, 50, 100] : _f,
+        _g = _a.emptyDataMessage,
+        emptyDataMessage = _g === void 0 ? 'Tidak ada data' : _g,
+        _h = _a.isLoading,
+        isLoading = _h === void 0 ? false : _h,
         css = _a.css,
         headerCss = _a.headerCss,
         onSelectedChange = _a.onSelectedChange,
-        _h = _a.isInfiniteScroll,
-        isInfiniteScroll = _h === void 0 ? false : _h,
-        _j = _a.hasMoreItems,
-        hasMoreItems = _j === void 0 ? true : _j,
-        _k = _a.rowLimit,
-        rowLimit = _k === void 0 ? 10 : _k,
-        _l = _a.cellAlign,
-        cellAlign = _l === void 0 ? 'center' : _l,
+        _j = _a.isInfiniteScroll,
+        isInfiniteScroll = _j === void 0 ? false : _j,
+        _k = _a.hasMoreItems,
+        hasMoreItems = _k === void 0 ? true : _k,
+        _l = _a.rowLimit,
+        rowLimit = _l === void 0 ? 10 : _l,
+        _m = _a.cellAlign,
+        cellAlign = _m === void 0 ? 'center' : _m,
         selectedIds = _a.selectedIds,
         rowGroup = _a.rowGroup;
 
-    var _m = React.useState(rowLimit),
-        limit = _m[0],
-        setLimit = _m[1];
+    var _o = React.useState(rowLimit),
+        limit = _o[0],
+        setLimit = _o[1];
 
     var getInitialState = function getInitialState() {
       var initialState = {};
@@ -16348,11 +16511,11 @@
         gotoPage = instance.gotoPage,
         setPageSize = instance.setPageSize,
         toggleRowSelected = instance.toggleRowSelected,
-        _o = instance.state,
-        pageIndex = _o.pageIndex,
-        pageSize = _o.pageSize,
-        sortBy = _o.sortBy,
-        selectedRowIds = _o.selectedRowIds;
+        _p = instance.state,
+        pageIndex = _p.pageIndex,
+        pageSize = _p.pageSize,
+        sortBy = _p.sortBy,
+        selectedRowIds = _p.selectedRowIds;
 
     var doFetchData = function doFetchData(pageIndex, pageSize, sortAccessor, sortDirection) {
       if (sortAccessor === void 0) {
@@ -16392,6 +16555,7 @@
           doFetchData(page - 1, pageSize);
           gotoPage(page - 1);
         },
+        rowsPerPageOptions: rowsPerPageOptions,
         css: {
           padding: '$spacing-04 0',
           '@md': {
@@ -16446,7 +16610,7 @@
     React.useEffect(function () {
       if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
     }, [sortBy]);
-    React.useEffect(function () {
+    reactTable.useMountedLayoutEffect(function () {
       if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
     }, [selectedRowIds]);
     React.useEffect(function () {
@@ -25930,7 +26094,8 @@
   });
   var TableCellContent = styled('div', {
     height: '100%',
-    paddingTop: 15,
+    paddingTop: 10,
+    paddingBottom: 10,
     display: 'flex',
     variants: {
       align: {
@@ -26540,7 +26705,9 @@
     width: '100%',
     padding: 5,
     userSelect: 'none',
-    cursor: 'pointer'
+    cursor: 'pointer',
+    alignItems: 'center',
+    justifyContent: 'center'
   });
   StyledFlex.displayName = 'Flex';
   const Colors = props => {
@@ -26561,14 +26728,14 @@
       };
     }
 
-    if (props.items) return props.items.map(i => /*#__PURE__*/React__default["default"].createElement(StyledFlex, {
+    if (props.items) return props.items.map((i, index) => /*#__PURE__*/React__default["default"].createElement(StyledFlex, {
+      key: index,
       gap: 2,
-      center: true,
       direction: "column",
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 68,
+        lineNumber: 72,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledPaper, {
@@ -26579,7 +26746,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 69,
+        lineNumber: 73,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledFlex, {
@@ -26587,7 +26754,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 70,
+        lineNumber: 74,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledParagraph, {
@@ -26595,7 +26762,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 71,
+        lineNumber: 75,
         columnNumber: 11
       }
     }, i.name), /*#__PURE__*/React__default["default"].createElement(StyledParagraph, {
@@ -26606,7 +26773,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 72,
+        lineNumber: 76,
         columnNumber: 11
       }
     }, i.hex))));