@majoo-ui/react 1.46.3-rc.3 → 1.46.5-rc.1

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';
@@ -40,7 +40,7 @@ import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import request from 'superagent';
 import { useSticky } from 'react-table-sticky';
 
-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,
@@ -50,7 +50,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -2228,9 +2228,9 @@ Flex$1.defaultProps = {
 };
 Flex$1.displayName = 'Flex';
 
-const _excluded$x = ["children"],
+const _excluded$y = ["children"],
       _excluded2$2 = ["children"];
-var _jsxFileName$Y = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+var _jsxFileName$Z = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
 const GridComponent = styled('div', {
   display: 'grid',
   variants: {
@@ -2404,7 +2404,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2415,7 +2415,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$Z,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2471,7 +2471,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$Z,
       lineNumber: 232,
       columnNumber: 5
     }
@@ -2488,8 +2488,8 @@ GridItem.propTypes = {
 };
 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$x = ["children", "isCollapse", "css", "contentHeader"];
+var _jsxFileName$Y = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
 const StyledDiv$3 = styled(Flex$1, {
   justifyContent: 'center',
   marginLeft: 'auto',
@@ -2518,7 +2518,7 @@ const PageContainer = _ref => {
     css,
     contentHeader
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   return /*#__PURE__*/React__default.createElement(StyledDiv$3, _extends({
     id: "retina-container",
@@ -2528,7 +2528,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -2841,8 +2841,8 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), 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$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+var _jsxFileName$X = "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';
@@ -3007,7 +3007,7 @@ const Toast = _ref => {
     captionOfAction,
     hrefOfAction
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -3036,7 +3036,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 205,
       columnNumber: 5
     }
@@ -3048,7 +3048,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 216,
       columnNumber: 9
     }
@@ -3058,7 +3058,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 223,
       columnNumber: 11
     }
@@ -3066,7 +3066,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 224,
       columnNumber: 13
     }
@@ -3074,7 +3074,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 225,
       columnNumber: 15
     }
@@ -3082,7 +3082,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 226,
       columnNumber: 17
     }
@@ -3094,7 +3094,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 227,
       columnNumber: 17
     }
@@ -3102,7 +3102,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 235,
       columnNumber: 21
     }
@@ -3117,7 +3117,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 236,
       columnNumber: 23
     }
@@ -3126,7 +3126,7 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 250,
       columnNumber: 19
     }
@@ -3140,7 +3140,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 254,
       columnNumber: 17
     }
@@ -3149,7 +3149,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 263,
       columnNumber: 19
     }
@@ -3164,7 +3164,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 267,
       columnNumber: 17
     }
@@ -3188,7 +3188,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$V = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+var _jsxFileName$W = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
 const ToastBox = styled(Flex$1, {
   position: 'fixed',
   variants: {
@@ -3230,7 +3230,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3238,7 +3238,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -3249,7 +3249,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$W,
         lineNumber: 46,
         columnNumber: 18
       }
@@ -3257,8 +3257,8 @@ const ToastContainer = ({
   })));
 };
 
-const _excluded$u = ["id"];
-var _jsxFileName$U = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+const _excluded$v = ["id"];
+var _jsxFileName$V = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
 let toastCount = 0;
 
 const ToastProvider = ({
@@ -3270,7 +3270,7 @@ const ToastProvider = ({
     const {
       id
     } = toast,
-          rest = _objectWithoutPropertiesLoose(toast, _excluded$u); // eslint-disable-next-line no-plusplus
+          rest = _objectWithoutPropertiesLoose(toast, _excluded$v); // eslint-disable-next-line no-plusplus
 
 
     const uniqueId = ++toastCount;
@@ -3300,7 +3300,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3309,7 +3309,7 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 45,
       columnNumber: 7
     }
@@ -3318,7 +3318,7 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 49,
       columnNumber: 7
     }
@@ -3327,7 +3327,7 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 53,
       columnNumber: 7
     }
@@ -3336,14 +3336,14 @@ const ToastProvider = ({
     position: BOTTOM_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 57,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$T = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+var _jsxFileName$U = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
 
 function MajooProvider({
   children,
@@ -3356,14 +3356,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -3377,8 +3377,8 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.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$u = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
+var _jsxFileName$T = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
 const Context$2 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -3460,7 +3460,7 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$S,
+    fileName: _jsxFileName$T,
     lineNumber: 91,
     columnNumber: 3
   }
@@ -3482,7 +3482,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$S,
+    fileName: _jsxFileName$T,
     lineNumber: 108,
     columnNumber: 3
   }
@@ -3505,7 +3505,7 @@ const BannerLink = ({
 }) => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$S,
+    fileName: _jsxFileName$T,
     lineNumber: 125,
     columnNumber: 3
   }
@@ -3517,7 +3517,7 @@ const BannerLink = ({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$S,
+    fileName: _jsxFileName$T,
     lineNumber: 127,
     columnNumber: 7
   }
@@ -3544,7 +3544,7 @@ BannerLink.defaultProps = {
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$S,
+    fileName: _jsxFileName$T,
     lineNumber: 154,
     columnNumber: 3
   }
@@ -3556,7 +3556,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$S,
+    fileName: _jsxFileName$T,
     lineNumber: 156,
     columnNumber: 7
   }
@@ -3565,7 +3565,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   size: "16px",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$S,
+    fileName: _jsxFileName$T,
     lineNumber: 163,
     columnNumber: 9
   }
@@ -3575,7 +3575,7 @@ const SingleTagBanner = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 171,
       columnNumber: 5
     }
@@ -3585,7 +3585,7 @@ const SingleTagBanner = props => {
     align: "end",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 172,
       columnNumber: 7
     }
@@ -3598,21 +3598,21 @@ const SingleTagBanner = props => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 173,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 181,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 182,
       columnNumber: 33
     }
@@ -3621,7 +3621,7 @@ const SingleTagBanner = props => {
     variant: props.variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 185,
       columnNumber: 11
     }
@@ -3634,7 +3634,7 @@ const SingleTagBanner = props => {
     closeCenter: !props.title && !props.link,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 190,
       columnNumber: 7
     }
@@ -3643,7 +3643,7 @@ const SingleTagBanner = props => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 198,
       columnNumber: 9
     }
@@ -3662,7 +3662,7 @@ const Banner = _ref => {
     children,
     bannerBlock
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
@@ -3672,7 +3672,7 @@ const Banner = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 206,
       columnNumber: 5
     }
@@ -3689,7 +3689,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 208,
       columnNumber: 9
     }
@@ -3700,7 +3700,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 215,
       columnNumber: 11
     }
@@ -3714,7 +3714,7 @@ const Banner = _ref => {
     onRemove: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 218,
       columnNumber: 9
     }
@@ -4024,8 +4024,8 @@ const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), 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$t = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
+var _jsxFileName$S = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
 const CardComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -4162,7 +4162,7 @@ const Card = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -4175,7 +4175,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 103,
       columnNumber: 5
     }
@@ -4183,14 +4183,14 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       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$R,
+      fileName: _jsxFileName$S,
       lineNumber: 118,
       columnNumber: 13
     }
@@ -4199,14 +4199,14 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 119,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 125,
       columnNumber: 13
     }
@@ -4232,8 +4232,8 @@ Card.defaultProps = {
   title: ''
 };
 
-const _excluded$r = ["children"];
-var _jsxFileName$Q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+const _excluded$s = ["children"];
+var _jsxFileName$R = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
 const BreadcrumbStyle = styled('nav', {
   wordWrap: 'break-word',
   '& li+li:before': {
@@ -4279,7 +4279,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -4290,20 +4290,20 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -4508,8 +4508,8 @@ Badge.defaultProps = {
 };
 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$r = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+var _jsxFileName$Q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -4553,7 +4553,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4562,7 +4562,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4572,7 +4572,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4580,21 +4580,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       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$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4611,8 +4611,8 @@ Avatar.defaultProps = {
   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$q = ["className", "src", "alt", "width", "height", "objectFit", "fallback"];
+var _jsxFileName$P = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
 const StyledImage = styled('img', {
   display: 'inline-block',
   alignItems: 'center',
@@ -4635,7 +4635,7 @@ function Image(_ref) {
     objectFit,
     fallback
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
     className: className,
@@ -4650,7 +4650,7 @@ function Image(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 20,
       columnNumber: 9
     }
@@ -4670,8 +4670,8 @@ Image.defaultProps = {
   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$p = ["children", "label", "color", "css", "withClick", "side", "align"];
+var _jsxFileName$O = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
 const slideUpAndFade$1 = keyframes({
   '0%': {
     opacity: 0,
@@ -4779,14 +4779,14 @@ const Tooltip = _ref => {
     side,
     align
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4794,7 +4794,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4802,7 +4802,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4813,7 +4813,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4822,7 +4822,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 100,
       columnNumber: 9
     }
@@ -4844,15 +4844,15 @@ Tooltip.defaultProps = {
   children: /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       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$o = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+var _jsxFileName$N = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
 const StyledProgress$1 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -4970,7 +4970,7 @@ function Progress$1(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
@@ -4986,7 +4986,7 @@ function Progress$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -4999,7 +4999,7 @@ function Progress$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -5022,8 +5022,8 @@ Progress$1.defaultProps = {
   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$n = ["gap", "direction", "children"];
+var _jsxFileName$M = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
 
 const FormGroup = _ref => {
   let {
@@ -5031,7 +5031,7 @@ const FormGroup = _ref => {
     direction,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: direction,
@@ -5039,7 +5039,7 @@ const FormGroup = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 6,
       columnNumber: 3
     }
@@ -5056,8 +5056,8 @@ FormGroup.defaultProps = {
   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$m = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
+var _jsxFileName$L = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
 const StyledLabel$1 = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -5089,13 +5089,13 @@ const FormLabel = _ref => {
     maxCount,
     labelCss
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -5105,7 +5105,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -5115,7 +5115,7 @@ const FormLabel = _ref => {
     css: labelCss,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -5130,7 +5130,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -5138,14 +5138,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -5154,7 +5154,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -5170,8 +5170,8 @@ FormLabel.propTypes = {
 };
 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$l = ["children", "error"];
+var _jsxFileName$K = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
 const StyledHelper = styled(Text$1, {
   display: 'inline-block',
   color: '$textSecondary',
@@ -5189,7 +5189,7 @@ const FormHelper = _ref => {
     children,
     error
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
@@ -5197,7 +5197,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$K,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -5209,7 +5209,7 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$I = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
+var _jsxFileName$J = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
 const CheckboxContext = /*#__PURE__*/createContext();
 
 const CheckboxGroup = ({
@@ -5219,19 +5219,32 @@ const CheckboxGroup = ({
   defaultValue,
   disabled
 }) => {
-  const [selectedItems, setSelectedItems] = useState(defaultValue);
-  useEffect(() => {
-    if (onChange && !value) onChange(selectedItems);
-  }, [selectedItems, onChange]);
+  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 = {
@@ -5243,8 +5256,8 @@ const CheckboxGroup = ({
     value: values,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
-      lineNumber: 25,
+      fileName: _jsxFileName$J,
+      lineNumber: 39,
       columnNumber: 5
     }
   }, React__default.Children.map(children, child => /*#__PURE__*/React__default.cloneElement(child, {
@@ -5261,7 +5274,7 @@ CheckboxGroup.defaultProps = {
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
-var _jsxFileName$H = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+var _jsxFileName$I = "C:\\Project\\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",
@@ -5279,7 +5292,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5291,7 +5304,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5303,13 +5316,13 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-var _jsxFileName$G = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
+var _jsxFileName$H = "C:\\Project\\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",
@@ -5327,7 +5340,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$G,
+    fileName: _jsxFileName$H,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5339,7 +5352,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$G,
+    fileName: _jsxFileName$H,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5351,14 +5364,14 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   d: "M14.31 10.41H3.9v-2.6h10.41z",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$G,
+    fileName: _jsxFileName$H,
     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$k = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
+var _jsxFileName$G = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
 const StyledIndicator$2 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -5417,7 +5430,7 @@ const Checkbox = _ref => {
     index,
     value
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   const context = useContext(CheckboxContext);
   const [isChecked, setChecked] = useState(false);
@@ -5440,28 +5453,28 @@ const Checkbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 64,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 77,
       columnNumber: 7
     }
   }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 77,
       columnNumber: 41
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 77,
       columnNumber: 60
     }
@@ -5475,14 +5488,14 @@ const InputCheckbox = _ref2 => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 84,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 85,
       columnNumber: 7
     }
@@ -5498,14 +5511,14 @@ const InputCheckbox = _ref2 => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 86,
       columnNumber: 7
     }
   }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 101,
       columnNumber: 5
     }
@@ -5523,8 +5536,8 @@ InputCheckbox.propTypes = {
 };
 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$j = ["children", "size"];
+var _jsxFileName$F = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -5640,7 +5653,7 @@ const InputGroup = _ref => {
     children,
     size = 'lg'
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   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');
@@ -5664,7 +5677,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 146,
       columnNumber: 10
     }
@@ -5808,6 +5821,17 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 
+const disabledStyle = {
+  backgroundColor: '$formDisable',
+  color: '$textDisable',
+  cursor: 'not-allowed',
+  '&::placeholder': {
+    color: '$textDisable'
+  },
+  '&:hover': {
+    border: '1px solid $colors$gray300'
+  }
+};
 const InputText = styled('input', {
   // Reset
   appearance: 'none',
@@ -5843,16 +5867,9 @@ const InputText = styled('input', {
   '&: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'
@@ -5871,6 +5888,9 @@ const InputText = styled('input', {
     }
   }],
   variants: {
+    disabled: {
+      true: disabledStyle
+    },
     readOnly: {
       true: {
         backgroundColor: '$formDisable'
@@ -5959,15 +5979,41 @@ InputTextArea.defaultProps = {
   size: 'lg'
 };
 
-const InputRadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
+const InputRadioContext = /*#__PURE__*/React__default.createContext();
+
+var _jsxFileName$E = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
+const RadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
+function InputRadioGroup(props) {
+  return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
+    value: props,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$E,
+      lineNumber: 13,
+      columnNumber: 7
+    }
+  }, /*#__PURE__*/React__default.createElement(RadioGroup, _extends({}, props, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$E,
+      lineNumber: 14,
+      columnNumber: 9
+    }
+  }), React__default.Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
+    style: Object.assign({}, child.props.style, {
+      opacity: 1
+    })
+  }))));
+}
 InputRadioGroup.propTypes = {
   defaultValue: PropTypes.string,
   value: PropTypes.string,
-  onValueChange: PropTypes.func
+  onValueChange: PropTypes.func,
+  outlined: PropTypes.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',
@@ -6040,63 +6086,152 @@ const StyledRadio = styled(RadioGroupPrimitive.Item, RADIO_BASE_STYLES, {
     }
   }
 });
+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.createElement(InputNumber, _extends({}, inputProps, {
+          disabled: disabled || checked !== props.value,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName$D,
+            lineNumber: 124,
+            columnNumber: 16
+          }
+        }));
 
-  return /*#__PURE__*/React__default.createElement(Flex$1, {
-    align: "center",
-    gap: 4,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$D,
-      lineNumber: 82,
-      columnNumber: 3
-    }
-  }, /*#__PURE__*/React__default.createElement(StyledRadio, _extends({
-    id: id,
-    disabled: disabled
-  }, props, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$D,
-      lineNumber: 83,
-      columnNumber: 5
-    }
-  }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$D,
-      lineNumber: 84,
-      columnNumber: 7
+      case 'text':
+        return /*#__PURE__*/React__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.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.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.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.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.createElement(StyledRadio, _extends({
+      id: id,
+      disabled: disabled
+    }, props, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$D,
+        lineNumber: 163,
+        columnNumber: 13
+      }
+    }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$D,
+        lineNumber: 164,
+        columnNumber: 15
+      }
+    })), renderInputType(inputType, checked));
+  });
 };
 InputRadio.propTypes = {
   id: PropTypes.string,
   disabled: PropTypes.bool,
   value: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  css: PropTypes.object,
+  inputType: PropTypes.oneOf(['number', 'text', 'default']),
+  onChange: PropTypes.func
 };
 InputRadio.displayName = 'InputRadio';
 
@@ -6750,7 +6885,7 @@ if (NOT_GENERIC || INCORRECT_NAME) {
   }, { 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',
@@ -6855,7 +6990,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     onRemove,
     readOnly
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
 
   return /*#__PURE__*/React__default.createElement(TagWrapper$3, _extends({
     ref: ref,
@@ -6927,7 +7062,7 @@ Tag.defaultProps = {
   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,
@@ -7046,7 +7181,7 @@ function TagsInput(_ref) {
     maxChar,
     pattern
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
 
   const [tags, setTags] = React__default.useState(value);
   const [regexError, setRegexError] = React__default.useState(false);
@@ -7191,7 +7326,7 @@ TagsInput.defaultProps = {
   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.Thumb, {
   display: 'block',
@@ -7264,7 +7399,7 @@ const InputSwitch = _ref => {
     dataOffLabel,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
 
   return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({
     defaultChecked: defaultChecked,
@@ -7403,7 +7538,7 @@ SvgSearchOutline.defaultProps = {
   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 => {
@@ -7413,7 +7548,7 @@ const InputSearchbox = _ref => {
     css,
     disabled
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
 
   const [value, setValue] = React__default.useState('');
   const handleChange = React__default.useCallback(e => {
@@ -7652,7 +7787,7 @@ fixRegExpWellKnownSymbolLogic$2('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-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', {
@@ -7879,7 +8014,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) =>
     handleInputValue,
     noStyling
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
 
   const inputRef = React.useRef(null);
   return /*#__PURE__*/React.createElement(InputGroup, {
@@ -8241,7 +8376,7 @@ function Select$1(_ref2) {
         } : {
           backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
           fontWeight: 'normal',
-          color: selectedItem === item ? '$textGreen' : '$textPrimary'
+          color: selectedItem && selectedItem.value === item.value ? '$textGreen' : '$textPrimary'
         },
         __self: this,
         __source: {
@@ -8691,6 +8826,7 @@ const CheckOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   }
 }));
 
+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,
@@ -8728,13 +8864,13 @@ const Select = styled('div', {
   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'
       }
     },
@@ -8893,24 +9029,27 @@ const StyledDiv$1 = styled('div', {
   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.useState(option); //init filter selectedItems on useMultipleSelection
 
   const [item, setItem] = React.useState(option);
@@ -9098,21 +9237,23 @@ function InputSelectCheck({
       }
     }
   });
-  return /*#__PURE__*/React.createElement(Wrapper$1, {
+  return /*#__PURE__*/React.createElement(Wrapper$1, _extends({
+    css: css
+  }, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 400,
+      lineNumber: 401,
       columnNumber: 5
     }
-  }, /*#__PURE__*/React.createElement(Select, {
+  }), /*#__PURE__*/React.createElement(Select, {
     size: size,
     disabled: disabled || readOnly,
     isInvalid: isInvalid,
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 401,
+      lineNumber: 402,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(InputWrapper$1, _extends({}, getComboboxProps(getDropdownProps({
@@ -9123,7 +9264,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 402,
+      lineNumber: 403,
       columnNumber: 9
     }
   }), search ? /*#__PURE__*/React.createElement(Input$4, _extends({}, getInputProps({
@@ -9134,7 +9275,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 407,
+      lineNumber: 408,
       columnNumber: 13
     }
   })) : /*#__PURE__*/React.createElement(Button, _extends({}, getToggleButtonProps({
@@ -9145,7 +9286,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 413,
+      lineNumber: 414,
       columnNumber: 13
     }
   }), placeholder)), /*#__PURE__*/React.createElement(IconWrapper, _extends({}, getToggleButtonProps({
@@ -9156,7 +9297,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 422,
+      lineNumber: 423,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(IconCaretDown, {
@@ -9164,7 +9305,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 427,
+      lineNumber: 428,
       columnNumber: 11
     }
   }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React.createElement(TagWrapper$1, {
@@ -9172,7 +9313,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 431,
+      lineNumber: 432,
       columnNumber: 9
     }
   }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement(Tag, _extends({
@@ -9196,7 +9337,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 433,
+      lineNumber: 434,
       columnNumber: 13
     }
   }), selectedItem.name))), /*#__PURE__*/React.createElement(OptionWrapper$1, {
@@ -9208,14 +9349,14 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 454,
+      lineNumber: 455,
       columnNumber: 7
     }
   }, item.length !== 0 ? /*#__PURE__*/React.createElement(Option, _extends({}, getMenuProps(), {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 459,
+      lineNumber: 460,
       columnNumber: 11
     }
   }), isOpen && item.map((item, index) => /*#__PURE__*/React.createElement(ItemWrapper$1, _extends({
@@ -9233,7 +9374,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 462,
+      lineNumber: 463,
       columnNumber: 17
     }
   }), /*#__PURE__*/React.createElement(IconWrapper, {
@@ -9246,7 +9387,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 475,
+      lineNumber: 476,
       columnNumber: 19
     }
   }, item.isDisabled ? /*#__PURE__*/React.createElement(CheckOutline, {
@@ -9254,7 +9395,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 484,
+      lineNumber: 485,
       columnNumber: 23
     }
   }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React.createElement(CheckOutline, {
@@ -9262,7 +9403,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 488,
+      lineNumber: 489,
       columnNumber: 25
     }
   })), /*#__PURE__*/React.createElement(Item$2, {
@@ -9272,7 +9413,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 492,
+      lineNumber: 493,
       columnNumber: 19
     }
   }, item.name)))) : /*#__PURE__*/React.createElement(Option, _extends({
@@ -9283,14 +9424,14 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 497,
+      lineNumber: 498,
       columnNumber: 11
     }
   }), /*#__PURE__*/React.createElement(StyledDiv$1, {
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 498,
+      lineNumber: 499,
       columnNumber: 13
     }
   }, /*#__PURE__*/React.createElement("div", {
@@ -9300,7 +9441,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 499,
+      lineNumber: 500,
       columnNumber: 15
     }
   }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -9312,7 +9453,7 @@ function InputSelectCheck({
     __self: this,
     __source: {
       fileName: _jsxFileName$u,
-      lineNumber: 500,
+      lineNumber: 501,
       columnNumber: 17
     }
   })), textEmptyItem))));
@@ -9331,7 +9472,8 @@ InputSelectCheck.propTypes = {
   search: PropTypes.bool,
   placement: PropTypes.oneOf(['top', 'bottom']),
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  textEmptyItem: PropTypes.string
+  textEmptyItem: PropTypes.string,
+  css: PropTypes.object
 };
 InputSelectCheck.defaultProps = {
   placeholder: 'Select Item',
@@ -15549,7 +15691,7 @@ function PaginationInfo(_ref) {
   }, `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) {
@@ -15559,7 +15701,8 @@ function Pagination(_ref) {
     totalData,
     hideDataInfo,
     onLimitChange,
-    onPageChange
+    onPageChange,
+    rowsPerPageOptions
   } = _ref,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
@@ -15574,11 +15717,11 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$g,
-      lineNumber: 12,
+      lineNumber: 21,
       columnNumber: 5
     }
   }), !hideDataInfo ? /*#__PURE__*/React__default.createElement(PaginationInfo, {
-    limits: [10, 25, 50, 100],
+    limits: rowsPerPageOptions,
     selectedLimit: limit,
     currentPage: currentPage,
     totalData: totalData,
@@ -15586,14 +15729,14 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$g,
-      lineNumber: 14,
+      lineNumber: 23,
       columnNumber: 9
     }
   }) : /*#__PURE__*/React__default.createElement(Box, {
     __self: this,
     __source: {
       fileName: _jsxFileName$g,
-      lineNumber: 22,
+      lineNumber: 31,
       columnNumber: 9
     }
   }), totalPages > 1 && /*#__PURE__*/React__default.createElement(PaginationButton, {
@@ -15603,7 +15746,7 @@ function Pagination(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$g,
-      lineNumber: 24,
+      lineNumber: 33,
       columnNumber: 26
     }
   }));
@@ -16041,6 +16184,7 @@ function Table({
   totalData = 0,
   fetchData,
   hideDataInfo = false,
+  rowsPerPageOptions = [10, 25, 50, 100],
   emptyDataMessage = 'Tidak ada data',
   isLoading = false,
   css,
@@ -16135,6 +16279,7 @@ function Table({
       doFetchData(page - 1, pageSize);
       gotoPage(page - 1);
     },
+    rowsPerPageOptions: rowsPerPageOptions,
     css: {
       padding: '$spacing-04 0',
       '@md': {
@@ -26196,7 +26341,9 @@ const StyledFlex = styled(Flex$1, {
   width: '100%',
   padding: 5,
   userSelect: 'none',
-  cursor: 'pointer'
+  cursor: 'pointer',
+  alignItems: 'center',
+  justifyContent: 'center'
 });
 StyledFlex.displayName = 'Flex';
 const Colors = props => {
@@ -26217,14 +26364,14 @@ const Colors = props => {
     };
   }
 
-  if (props.items) return props.items.map(i => /*#__PURE__*/React__default.createElement(StyledFlex, {
+  if (props.items) return props.items.map((i, index) => /*#__PURE__*/React__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.createElement(StyledPaper, {
@@ -26235,7 +26382,7 @@ const Colors = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 69,
+      lineNumber: 73,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledFlex, {
@@ -26243,7 +26390,7 @@ const Colors = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 70,
+      lineNumber: 74,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(StyledParagraph, {
@@ -26251,7 +26398,7 @@ const Colors = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 71,
+      lineNumber: 75,
       columnNumber: 11
     }
   }, i.name), /*#__PURE__*/React__default.createElement(StyledParagraph, {
@@ -26262,7 +26409,7 @@ const Colors = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 72,
+      lineNumber: 76,
       columnNumber: 11
     }
   }, i.hex))));