@majoo-ui/react 1.46.5-rc.1 → 1.46.6

package/index.esm.js

@@ -27,7 +27,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { useDayzed } from 'dayzed';
 import moment from 'moment';
-import { useTable, useSortBy, useExpanded, usePagination, useRowSelect } from 'react-table';
+import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useMountedLayoutEffect } from 'react-table';
 import ReactDOM, { createPortal } from 'react-dom';
 import * as ADialog from '@radix-ui/react-alert-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -40,7 +40,7 @@ import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import request from 'superagent';
 import { useSticky } from 'react-table-sticky';
 
-var _jsxFileName$_ = "C:\\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$_,
+      fileName: _jsxFileName$$,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -2228,9 +2228,9 @@ Flex$1.defaultProps = {
 };
 Flex$1.displayName = 'Flex';
 
-const _excluded$y = ["children"],
+const _excluded$z = ["children"],
       _excluded2$2 = ["children"];
-var _jsxFileName$Z = "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: {
@@ -2404,7 +2404,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2415,7 +2415,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2471,7 +2471,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 232,
       columnNumber: 5
     }
@@ -2488,8 +2488,8 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$x = ["children", "isCollapse", "css", "contentHeader"];
-var _jsxFileName$Y = "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',
@@ -2518,7 +2518,7 @@ const PageContainer = _ref => {
     css,
     contentHeader
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return /*#__PURE__*/React__default.createElement(StyledDiv$3, _extends({
     id: "retina-container",
@@ -2528,7 +2528,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$Z,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -2841,8 +2841,8 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-var _jsxFileName$X = "C:\\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';
@@ -3007,7 +3007,7 @@ const Toast = _ref => {
     captionOfAction,
     hrefOfAction
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -3036,7 +3036,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 205,
       columnNumber: 5
     }
@@ -3048,7 +3048,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 216,
       columnNumber: 9
     }
@@ -3058,7 +3058,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 223,
       columnNumber: 11
     }
@@ -3066,7 +3066,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 224,
       columnNumber: 13
     }
@@ -3074,7 +3074,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 225,
       columnNumber: 15
     }
@@ -3082,7 +3082,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 226,
       columnNumber: 17
     }
@@ -3094,7 +3094,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 227,
       columnNumber: 17
     }
@@ -3102,7 +3102,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 235,
       columnNumber: 21
     }
@@ -3117,7 +3117,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 236,
       columnNumber: 23
     }
@@ -3126,7 +3126,7 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 250,
       columnNumber: 19
     }
@@ -3140,7 +3140,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 254,
       columnNumber: 17
     }
@@ -3149,7 +3149,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 263,
       columnNumber: 19
     }
@@ -3164,7 +3164,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 267,
       columnNumber: 17
     }
@@ -3188,7 +3188,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$W = "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: {
@@ -3230,7 +3230,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3238,7 +3238,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -3249,7 +3249,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 46,
         columnNumber: 18
       }
@@ -3257,8 +3257,8 @@ const ToastContainer = ({
   })));
 };
 
-const _excluded$v = ["id"];
-var _jsxFileName$V = "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 = ({
@@ -3270,7 +3270,7 @@ const ToastProvider = ({
     const {
       id
     } = toast,
-          rest = _objectWithoutPropertiesLoose(toast, _excluded$v); // eslint-disable-next-line no-plusplus
+          rest = _objectWithoutPropertiesLoose(toast, _excluded$w); // eslint-disable-next-line no-plusplus
 
 
     const uniqueId = ++toastCount;
@@ -3300,7 +3300,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3309,7 +3309,7 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 45,
       columnNumber: 7
     }
@@ -3318,7 +3318,7 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 49,
       columnNumber: 7
     }
@@ -3327,7 +3327,7 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 53,
       columnNumber: 7
     }
@@ -3336,14 +3336,14 @@ const ToastProvider = ({
     position: BOTTOM_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 57,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$U = "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,
@@ -3356,14 +3356,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -3377,8 +3377,8 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-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 _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.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$T,
+    fileName: _jsxFileName$U,
     lineNumber: 91,
     columnNumber: 3
   }
@@ -3482,7 +3482,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 108,
     columnNumber: 3
   }
@@ -3505,7 +3505,7 @@ const BannerLink = ({
 }) => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 125,
     columnNumber: 3
   }
@@ -3517,7 +3517,7 @@ const BannerLink = ({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 127,
     columnNumber: 7
   }
@@ -3544,7 +3544,7 @@ BannerLink.defaultProps = {
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 154,
     columnNumber: 3
   }
@@ -3556,7 +3556,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 156,
     columnNumber: 7
   }
@@ -3565,7 +3565,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   size: "16px",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 163,
     columnNumber: 9
   }
@@ -3575,7 +3575,7 @@ const SingleTagBanner = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 171,
       columnNumber: 5
     }
@@ -3585,7 +3585,7 @@ const SingleTagBanner = props => {
     align: "end",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 172,
       columnNumber: 7
     }
@@ -3598,21 +3598,21 @@ const SingleTagBanner = props => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 173,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 181,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 182,
       columnNumber: 33
     }
@@ -3621,7 +3621,7 @@ const SingleTagBanner = props => {
     variant: props.variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 185,
       columnNumber: 11
     }
@@ -3634,7 +3634,7 @@ const SingleTagBanner = props => {
     closeCenter: !props.title && !props.link,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 190,
       columnNumber: 7
     }
@@ -3643,7 +3643,7 @@ const SingleTagBanner = props => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 198,
       columnNumber: 9
     }
@@ -3662,7 +3662,7 @@ const Banner = _ref => {
     children,
     bannerBlock
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
@@ -3672,7 +3672,7 @@ const Banner = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 206,
       columnNumber: 5
     }
@@ -3689,7 +3689,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 208,
       columnNumber: 9
     }
@@ -3700,7 +3700,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 215,
       columnNumber: 11
     }
@@ -3714,7 +3714,7 @@ const Banner = _ref => {
     onRemove: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 218,
       columnNumber: 9
     }
@@ -4024,8 +4024,8 @@ const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$t = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-var _jsxFileName$S = "C:\\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',
@@ -4162,7 +4162,7 @@ const Card = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -4175,7 +4175,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 103,
       columnNumber: 5
     }
@@ -4183,14 +4183,14 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 114,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 118,
       columnNumber: 13
     }
@@ -4199,14 +4199,14 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 119,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 125,
       columnNumber: 13
     }
@@ -4232,8 +4232,8 @@ Card.defaultProps = {
   title: ''
 };
 
-const _excluded$s = ["children"];
-var _jsxFileName$R = "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': {
@@ -4279,7 +4279,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -4290,20 +4290,20 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -4508,8 +4508,8 @@ Badge.defaultProps = {
 };
 Badge.displayName = 'Badge';
 
-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 _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.Root, {
   width: '32px',
   height: '32px',
@@ -4553,7 +4553,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4562,7 +4562,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4572,7 +4572,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4580,21 +4580,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 48,
       columnNumber: 7
     }
   }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4611,8 +4611,8 @@ Avatar.defaultProps = {
   delayMs: 0
 };
 
-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 _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',
@@ -4635,7 +4635,7 @@ function Image(_ref) {
     objectFit,
     fallback
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
     className: className,
@@ -4650,7 +4650,7 @@ function Image(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$Q,
       lineNumber: 20,
       columnNumber: 9
     }
@@ -4670,8 +4670,8 @@ Image.defaultProps = {
   rounded: false
 };
 
-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 _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,
@@ -4779,14 +4779,14 @@ const Tooltip = _ref => {
     side,
     align
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4794,7 +4794,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4802,7 +4802,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       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$O,
+      fileName: _jsxFileName$P,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4822,7 +4822,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 100,
       columnNumber: 9
     }
@@ -4844,15 +4844,15 @@ Tooltip.defaultProps = {
   children: /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 119,
       columnNumber: 13
     }
   })
 };
 
-const _excluded$o = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$N = "C:\\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 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -4970,7 +4970,7 @@ function Progress$1(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
@@ -4986,7 +4986,7 @@ function Progress$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -4999,7 +4999,7 @@ function Progress$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -5022,8 +5022,8 @@ Progress$1.defaultProps = {
   rounded: true
 };
 
-const _excluded$n = ["gap", "direction", "children"];
-var _jsxFileName$M = "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 {
@@ -5031,7 +5031,7 @@ const FormGroup = _ref => {
     direction,
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: direction,
@@ -5039,7 +5039,7 @@ const FormGroup = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 6,
       columnNumber: 3
     }
@@ -5056,8 +5056,8 @@ FormGroup.defaultProps = {
   direction: 'column'
 };
 
-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 _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.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -5089,13 +5089,13 @@ const FormLabel = _ref => {
     maxCount,
     labelCss
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -5105,7 +5105,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -5115,7 +5115,7 @@ const FormLabel = _ref => {
     css: labelCss,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -5130,7 +5130,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -5138,14 +5138,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -5154,7 +5154,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -5170,8 +5170,8 @@ FormLabel.propTypes = {
 };
 FormLabel.displayName = 'FormLabel';
 
-const _excluded$l = ["children", "error"];
-var _jsxFileName$K = "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',
@@ -5189,7 +5189,7 @@ const FormHelper = _ref => {
     children,
     error
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
@@ -5197,7 +5197,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -5209,7 +5209,7 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$J = "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__*/createContext();
 
 const CheckboxGroup = ({
@@ -5219,9 +5219,7 @@ const CheckboxGroup = ({
   defaultValue,
   disabled
 }) => {
-  const [selectedItems, setSelectedItems] = useState(defaultValue); // useEffect(() => {
-  //   if (onChange && !value) onChange(selectedItems);
-  // }, [selectedItems, onChange]);
+  const [selectedItems, setSelectedItems] = useState(defaultValue);
 
   const checkItem = (item, index) => {
     if (!value) {
@@ -5256,8 +5254,8 @@ const CheckboxGroup = ({
     value: values,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
-      lineNumber: 39,
+      fileName: _jsxFileName$K,
+      lineNumber: 35,
       columnNumber: 5
     }
   }, React__default.Children.map(children, child => /*#__PURE__*/React__default.cloneElement(child, {
@@ -5274,7 +5272,7 @@ CheckboxGroup.defaultProps = {
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
-var _jsxFileName$I = "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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5292,7 +5290,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5304,7 +5302,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5316,13 +5314,13 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-var _jsxFileName$H = "C:\\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.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5340,7 +5338,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5352,7 +5350,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5364,14 +5362,14 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   d: "M14.31 10.41H3.9v-2.6h10.41z",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$H,
+    fileName: _jsxFileName$I,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-const _excluded$k = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-var _jsxFileName$G = "C:\\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.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -5430,7 +5428,7 @@ const Checkbox = _ref => {
     index,
     value
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
   const context = useContext(CheckboxContext);
   const [isChecked, setChecked] = useState(false);
@@ -5453,28 +5451,28 @@ const Checkbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 64,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 77,
       columnNumber: 7
     }
   }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 77,
       columnNumber: 41
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 77,
       columnNumber: 60
     }
@@ -5488,14 +5486,14 @@ const InputCheckbox = _ref2 => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 84,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 85,
       columnNumber: 7
     }
@@ -5511,14 +5509,14 @@ const InputCheckbox = _ref2 => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 86,
       columnNumber: 7
     }
   }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 101,
       columnNumber: 5
     }
@@ -5536,8 +5534,8 @@ InputCheckbox.propTypes = {
 };
 InputCheckbox.displayName = 'InputCheckbox';
 
-const _excluded$j = ["children", "size"];
-var _jsxFileName$F = "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%',
@@ -5653,7 +5651,7 @@ const InputGroup = _ref => {
     children,
     size = 'lg'
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
   const isLetter = children.some(child => child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
   const isElement = children.some(child => child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
@@ -5677,7 +5675,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 146,
       columnNumber: 10
     }
@@ -5791,6 +5789,7 @@ const InputLetter = styled(Text$1, {
   }
 });
 const InputPrefix = styled(InputLetter, {
+  padding: '6px 0px 6px $spacing-05',
   defaultVariants: {
     variant: 'placeholder',
     color: 'secondary',
@@ -5806,6 +5805,7 @@ InputPrefix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 const InputSuffix = styled(InputLetter, {
+  padding: '6px $spacing-05 6px 0px',
   defaultVariants: {
     variant: 'placeholder',
     color: 'secondary',
@@ -5821,6 +5821,8 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 
+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',
@@ -5832,7 +5834,7 @@ const disabledStyle = {
     border: '1px solid $colors$gray300'
   }
 };
-const InputText = styled('input', {
+const StyledInput = styled('input', {
   // Reset
   appearance: 'none',
   boxSizing: 'border-box',
@@ -5888,7 +5890,7 @@ const InputText = styled('input', {
     }
   }],
   variants: {
-    disabled: {
+    isDisabled: {
       true: disabledStyle
     },
     readOnly: {
@@ -5957,9 +5959,28 @@ const InputText = styled('input', {
     size: 'lg'
   }
 });
+const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    disabled
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+
+  return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
+    ref: ref,
+    disabled: disabled,
+    isDisabled: disabled
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$F,
+      lineNumber: 151,
+      columnNumber: 3
+    }
+  }));
+});
 InputText.displayName = 'InputText';
 
-const InputTextArea = styled(InputText, {
+const InputTextArea = styled(StyledInput, {
   variants: {
     size: {
       sm: {
@@ -7806,9 +7827,8 @@ const SelectContainer = styled('div', {
   color: '$textPrimary',
   width: '100%'
 });
-const SelectBox = styled('div', {
+const SelectBox = styled(Flex$1, {
   margin: 0,
-  display: 'flex',
   position: 'relative',
   appearance: 'none',
   background: 'none',
@@ -7874,6 +7894,8 @@ const Button$1 = styled('button', {
   display: 'flex',
   width: '100%',
   height: '100%',
+  flex: 1,
+  minWidth: 0,
   background: 'none',
   outline: 'none',
   border: 'none',
@@ -8002,7 +8024,7 @@ const StyledDiv$2 = styled('div', {
 const StyledText$1 = {
   whiteSpace: 'nowrap',
   overflow: 'hidden',
-  textOverflow: 'clip'
+  textOverflow: 'ellipsis'
 };
 const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
   let {
@@ -8029,7 +8051,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) =>
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 225,
+      lineNumber: 236,
       columnNumber: 7
     }
   }, /*#__PURE__*/React.createElement(InputLeftElement, {
@@ -8037,7 +8059,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) =>
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 238,
+        lineNumber: 249,
         columnNumber: 40
       }
     }),
@@ -8048,7 +8070,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) =>
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 237,
+      lineNumber: 248,
       columnNumber: 9
     }
   }), /*#__PURE__*/React.createElement(Input$5, _extends({}, inputProps, props, {
@@ -8066,7 +8088,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) =>
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 246,
+      lineNumber: 257,
       columnNumber: 9
     }
   })), /*#__PURE__*/React.createElement(InputRightElement, {
@@ -8074,14 +8096,14 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) =>
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 262,
+        lineNumber: 273,
         columnNumber: 72
       }
     }) : /*#__PURE__*/React.createElement("div", {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 262,
+        lineNumber: 273,
         columnNumber: 90
       }
     }),
@@ -8099,7 +8121,7 @@ const SelectInputSearch = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) =>
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 261,
+      lineNumber: 272,
       columnNumber: 9
     }
   }));
@@ -8183,7 +8205,7 @@ function Select$1(_ref2) {
     __self: this,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 353,
+      lineNumber: 364,
       columnNumber: 5
     }
   }), ({
@@ -8215,7 +8237,7 @@ function Select$1(_ref2) {
         __self: this,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 382,
+          lineNumber: 393,
           columnNumber: 13
         }
       }), /*#__PURE__*/React.createElement(CaretDownOutline, {
@@ -8223,7 +8245,7 @@ function Select$1(_ref2) {
         __self: this,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 387,
+          lineNumber: 398,
           columnNumber: 15
         }
       }));
@@ -8234,7 +8256,7 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 393,
+        lineNumber: 404,
         columnNumber: 11
       }
     }, /*#__PURE__*/React.createElement(SelectBox, _extends({}, getRootProps({}, {
@@ -8247,17 +8269,18 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 394,
+        lineNumber: 405,
         columnNumber: 13
       }
     }), search ? /*#__PURE__*/React.createElement(Box, {
       style: {
-        width: '100%'
+        width: '100%',
+        flex: 1
       },
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 402,
+        lineNumber: 413,
         columnNumber: 17
       }
     }, icon ? /*#__PURE__*/React.createElement(SelectInputSearch, {
@@ -8268,11 +8291,13 @@ function Select$1(_ref2) {
       inputProps: getInputProps({
         onChange: event => handleInputValue(event.target.value),
         disabled
+      }, {
+        suppressRefError: true
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 404,
+        lineNumber: 418,
         columnNumber: 21
       }
     }) : /*#__PURE__*/React.createElement(Input$5, _extends({
@@ -8283,10 +8308,13 @@ function Select$1(_ref2) {
       onChange: event => handleInputValue(event.target.value),
       disabled
     }), {
+      css: {
+        width: 'calc(100% - $spacing-05)'
+      },
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 412,
+        lineNumber: 429,
         columnNumber: 21
       }
     }))) : /*#__PURE__*/React.createElement(Button$1, _extends({}, getToggleButtonProps({
@@ -8298,7 +8326,7 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 421,
+        lineNumber: 441,
         columnNumber: 17
       }
     }), selectedItem ? /*#__PURE__*/React.createElement(Text$1, {
@@ -8307,7 +8335,7 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 428,
+        lineNumber: 448,
         columnNumber: 21
       }
     }, selectedItem.render ? selectedItem.render() : selectedItem.name) : /*#__PURE__*/React.createElement(Text$1, {
@@ -8316,7 +8344,7 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 432,
+        lineNumber: 452,
         columnNumber: 21
       }
     }, placeholder)), handleDownOption()), /*#__PURE__*/React.createElement(OptionWrapper$2, _extends({}, getMenuProps(), {
@@ -8327,7 +8355,7 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 440,
+        lineNumber: 460,
         columnNumber: 13
       }
     }), !search && embedSearch && isOpen && /*#__PURE__*/React.createElement(SelectContainer, {
@@ -8341,7 +8369,7 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 442,
+        lineNumber: 462,
         columnNumber: 17
       }
     }, /*#__PURE__*/React.createElement(InputSearchbox, {
@@ -8351,14 +8379,14 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 451,
+        lineNumber: 471,
         columnNumber: 19
       }
     })), item.length !== 0 ? /*#__PURE__*/React.createElement(SelectOption, {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 455,
+        lineNumber: 475,
         columnNumber: 17
       }
     }, item.map((item, index) => {
@@ -8381,7 +8409,7 @@ function Select$1(_ref2) {
         __self: this,
         __source: {
           fileName: _jsxFileName$w,
-          lineNumber: 457,
+          lineNumber: 477,
           columnNumber: 21
         }
       }), item.render ? item.render() : item.name);
@@ -8389,14 +8417,14 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 479,
+        lineNumber: 499,
         columnNumber: 17
       }
     }, /*#__PURE__*/React.createElement(StyledDiv$2, {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 480,
+        lineNumber: 500,
         columnNumber: 19
       }
     }, /*#__PURE__*/React.createElement("div", {
@@ -8406,7 +8434,7 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 481,
+        lineNumber: 501,
         columnNumber: 21
       }
     }, /*#__PURE__*/React.createElement(CircleInfoOutline, {
@@ -8418,7 +8446,7 @@ function Select$1(_ref2) {
       __self: this,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 482,
+        lineNumber: 502,
         columnNumber: 23
       }
     })), "Item tidak ditemukan"))));
@@ -10007,7 +10035,9 @@ const InputCombobox = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
         showLeadingIcon: showLeadingIcon,
         disabled: disabled,
         placeholder: placeholder,
-        inputProps: getInputProps()
+        inputProps: getInputProps({}, {
+          suppressRefError: true
+        })
       }, props, {
         ref: forwardedRef
       }), void 0)
@@ -12555,7 +12585,7 @@ const ModalDialog = props => {
           }
         }, {
           children: [jsx(Box, Object.assign({
-            css: {
+            css: Object.assign({
               padding: '16px 24px',
               display: 'block',
               alignItems: 'center',
@@ -12564,7 +12594,7 @@ const ModalDialog = props => {
               '@md': {
                 padding: '24px 24px 19px 24px'
               }
-            }
+            }, modalDialogTitle.props.containerCss)
           }, {
             children: jsxs(Box, Object.assign({
               css: {
@@ -13697,7 +13727,7 @@ const CalendarBox = ({
               fontWeight: 600
             },
             onClick: onUpdate,
-            disabled: disabled,
+            disabled: disabled || !selected || selected.length <= 1,
             size: "sm"
           }, {
             children: "Proses"
@@ -14950,10 +14980,6 @@ const CalendarRangePicker = _a => {
     if (!dateValue.length || dateValue.length === 2) {
       setDateValue([selectedDate.date]);
     } else {
-      if (selectedDate.date.toDateString() === dateValue[0].toDateString()) {
-        return;
-      }
-
       if (new Date(dateValue[0]) > selectedDate.date) {
         setDateValue([selectedDate.date, dateValue[0]]);
       } else {
@@ -14972,12 +14998,8 @@ const CalendarRangePicker = _a => {
   }));
 
   const updateHandler = () => {
-    if (dateValue && onChange) {
-      if (dateValue.length === 1) {
-        onChange([dateValue[0], dateValue[0]]);
-      } else {
-        onChange(dateValue);
-      }
+    if (dateValue && onChange && dateValue.length > 1) {
+      onChange(dateValue);
     }
 
     onClose();
@@ -15688,7 +15710,7 @@ function PaginationInfo(_ref) {
       lineNumber: 60,
       columnNumber: 7
     }
-  }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1}-${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
+  }, `Ditampilkan ${(currentPage - 1) * selectedLimit + 1} - ${selectedLimit * currentPage < totalData ? selectedLimit * currentPage : totalData} dari ${totalData} data`));
 }
 
 const _excluded$2 = ["limit", "currentPage", "totalData", "hideDataInfo", "onLimitChange", "onPageChange", "rowsPerPageOptions"];
@@ -16329,7 +16351,7 @@ function Table({
   useEffect(() => {
     if (data && data.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
   }, [sortBy]);
-  useEffect(() => {
+  useMountedLayoutEffect(() => {
     if (data && data.length > 0 && selectedRowIds && onSelectedChange) onSelectedChange(selectedRowIds ? Object.keys(selectedRowIds) : []);
   }, [selectedRowIds]);
   useEffect(() => {
@@ -18122,10 +18144,13 @@ function AlertDialog(props) {
   };
   return /*#__PURE__*/React__default.createElement(ADialog.Root, {
     open: props.open,
+    onOpenChange: props.onOpenChange,
+    defaultOpen: props.defaultOpen,
+    id: props.id,
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 187,
+      lineNumber: 192,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18136,14 +18161,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 188,
+      lineNumber: 193,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 189,
+      lineNumber: 194,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18151,7 +18176,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 190,
+      lineNumber: 195,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
@@ -18159,18 +18184,18 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 191,
+      lineNumber: 196,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
-    onClick: props.onCancel,
+    onClick: props.onClose || props.onCancel,
     css: {
       cursor: 'pointer'
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 192,
+      lineNumber: 197,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18178,7 +18203,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 193,
+      lineNumber: 198,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18186,14 +18211,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 197,
+      lineNumber: 202,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 198,
+      lineNumber: 203,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18203,7 +18228,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 199,
+      lineNumber: 204,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18215,7 +18240,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 201,
+      lineNumber: 206,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18223,7 +18248,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 202,
+      lineNumber: 207,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18237,7 +18262,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 203,
+      lineNumber: 208,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18245,7 +18270,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 205,
+      lineNumber: 210,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -18258,7 +18283,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 206,
+      lineNumber: 211,
       columnNumber: 17
     }
   }, props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18266,7 +18291,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 212,
+      lineNumber: 222,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -18280,7 +18305,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 213,
+      lineNumber: 223,
       columnNumber: 19
     }
   }, props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18288,7 +18313,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 222,
+      lineNumber: 232,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -18301,7 +18326,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 223,
+      lineNumber: 233,
       columnNumber: 19
     }
   }, props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -20547,7 +20572,8 @@ const Upload = ({
   token,
   tokenKey,
   reqKey,
-  resKey
+  resKey,
+  ratio
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -20560,7 +20586,7 @@ const Upload = ({
   const [errorMessage, setErrorMessage] = useState(null);
   const [crop, setCrop] = useState(null);
   const [completedCrop, setCompletedCrop] = useState(null);
-  const [aspect, setAspect] = useState(16 / 9);
+  const [aspect, setAspect] = useState(ratio);
   const [isLoading, setIsLoading] = useState(false);
   useEffect(() => {
     if (loading) {
@@ -20571,6 +20597,7 @@ const Upload = ({
       setIsLoading(false);
     }
   }, [loading, progress]);
+  useEffect(() => {}, [ratio]);
   const ContainerUpload = styled('div', {
     border: '2px dashed $gray300',
     borderRadius: 8,
@@ -20811,8 +20838,8 @@ const Upload = ({
         width,
         height
       } = imgRef.current;
-      setAspect(16 / 9);
-      setCrop(centerAspectCrop(width, height, 16 / 9));
+      setAspect(ratio);
+      setCrop(centerAspectCrop(width, height, ratio));
     }
   }
 
@@ -20891,7 +20918,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 481,
+        lineNumber: 484,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -20901,7 +20928,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 482,
+        lineNumber: 485,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
@@ -20917,7 +20944,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 492,
+            lineNumber: 495,
             columnNumber: 16
           }
         });
@@ -20929,7 +20956,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 495,
+          lineNumber: 498,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -20939,7 +20966,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 496,
+          lineNumber: 499,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20948,7 +20975,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 497,
+          lineNumber: 500,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -20961,7 +20988,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 498,
+          lineNumber: 501,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -20970,7 +20997,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 506,
+          lineNumber: 509,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -20978,7 +21005,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 508,
+          lineNumber: 511,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -20995,7 +21022,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 519,
+            lineNumber: 522,
             columnNumber: 16
           }
         });
@@ -21006,7 +21033,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 522,
+          lineNumber: 525,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21016,7 +21043,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 523,
+          lineNumber: 526,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21025,7 +21052,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 524,
+          lineNumber: 527,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -21038,7 +21065,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 525,
+          lineNumber: 528,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21048,7 +21075,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 533,
+          lineNumber: 536,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(CheckIcon, {
@@ -21056,7 +21083,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 534,
+          lineNumber: 537,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21071,14 +21098,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 535,
+          lineNumber: 538,
           columnNumber: 17
         }
       }, item.name))), /*#__PURE__*/React__default.createElement(Blank, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 549,
+          lineNumber: 552,
           columnNumber: 13
         }
       })), renderButtonReplace(index));
@@ -21094,7 +21121,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 560,
+        lineNumber: 563,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21108,7 +21135,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 561,
+        lineNumber: 564,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21134,7 +21161,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 562,
+        lineNumber: 565,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21142,14 +21169,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 575,
+        lineNumber: 578,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 576,
+        lineNumber: 579,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21162,7 +21189,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 584,
+        lineNumber: 587,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -21177,7 +21204,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 585,
+        lineNumber: 588,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$1, {
@@ -21189,35 +21216,35 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 595,
+        lineNumber: 598,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 596,
+        lineNumber: 599,
         columnNumber: 11
       }
     }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 598,
+        lineNumber: 601,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 599,
+        lineNumber: 602,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 600,
+        lineNumber: 603,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -21227,14 +21254,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 602,
+        lineNumber: 605,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} anda disini`)))), errorMessage && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 609,
+        lineNumber: 612,
         columnNumber: 26
       }
     }, errorMessage));
@@ -21245,7 +21272,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 616,
+        lineNumber: 619,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21253,7 +21280,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 617,
+        lineNumber: 620,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21261,7 +21288,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 618,
+        lineNumber: 621,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21274,7 +21301,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 620,
+        lineNumber: 623,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21285,7 +21312,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 623,
+        lineNumber: 626,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21296,7 +21323,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 624,
+        lineNumber: 627,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21309,14 +21336,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 625,
+        lineNumber: 628,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 628,
+        lineNumber: 631,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21328,7 +21355,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 629,
+        lineNumber: 632,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21336,7 +21363,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 630,
+        lineNumber: 633,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21348,7 +21375,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 631,
+        lineNumber: 634,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21356,7 +21383,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 637,
+        lineNumber: 640,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21365,7 +21392,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 638,
+        lineNumber: 641,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21373,7 +21400,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 641,
+        lineNumber: 644,
         columnNumber: 15
       }
     }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
@@ -21389,7 +21416,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 652,
+      lineNumber: 655,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21398,7 +21425,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 655,
+      lineNumber: 658,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -21413,7 +21440,8 @@ Upload.defaultProps = {
   showCropper: true,
   tokenKey: 'Token',
   reqKey: 'file',
-  resKey: 'url'
+  resKey: 'url',
+  ratio: 16 / 9
 };
 Upload.propTypes = {
   /**
@@ -21501,6 +21529,11 @@ Upload.propTypes = {
    */
   showCropper: PropTypes.bool,
 
+  /**
+   The aspect ratio of the crop, e.g. 1 for a square or 16 / 9 for landscape. Omit/pass undefined for a free-form crop.
+   */
+  ratio: PropTypes.number,
+
   /**
    API upload url, allows components to automatically upload directly to API service.
    */
@@ -25740,7 +25773,8 @@ const TableCell = styled('td', {
 });
 const TableCellContent = styled('div', {
   height: '100%',
-  paddingTop: 15,
+  paddingTop: 10,
+  paddingBottom: 10,
   display: 'flex',
   variants: {
     align: {
@@ -27417,4 +27451,4 @@ var Symbol$1 = _Symbol;
 var symbolProto = Symbol$1 ? Symbol$1.prototype : undefined;
     symbolProto ? symbolProto.toString : undefined;
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Select$1 as Select, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerOptions, defaultFetchDataParams, pickerReducer };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputNumber, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, Select$1 as InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, Select$1 as Select, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerOptions, defaultFetchDataParams, pickerReducer };