@majoo-ui/react 1.48.1 → 1.48.4

package/index.esm.js

@@ -42,7 +42,7 @@ import request from 'superagent';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import { useSticky } from 'react-table-sticky';
 
-var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+var _jsxFileName$$ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
 function ThemeProvider({
   theme,
@@ -52,7 +52,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$_,
+      fileName: _jsxFileName$$,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -2233,9 +2233,9 @@ Flex$1.defaultProps = {
 };
 Flex$1.displayName = 'Flex';
 
-const _excluded$y = ["children"],
+const _excluded$z = ["children"],
       _excluded2$1 = ["children"];
-var _jsxFileName$Z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
 const GridComponent = styled('div', {
   display: 'grid',
   variants: {
@@ -2409,7 +2409,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, {
@@ -2420,7 +2420,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2476,7 +2476,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 232,
       columnNumber: 5
     }
@@ -2493,8 +2493,8 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$x = ["children", "isCollapse", "css", "contentHeader"];
-var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+const _excluded$y = ["children", "isCollapse", "css", "contentHeader"];
+var _jsxFileName$Z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
 const StyledDiv$3 = styled(Flex$1, {
   justifyContent: 'center',
   marginLeft: 'auto',
@@ -2523,7 +2523,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",
@@ -2533,7 +2533,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$Z,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -2846,8 +2846,8 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+const _excluded$x = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
 const TOAST_WIDTH = 576;
 const ANIMATION_DURATION = 400;
 const TOP_RIGHT_POSITION = 'top-right';
@@ -3012,7 +3012,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(() => {
@@ -3041,7 +3041,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 205,
       columnNumber: 5
     }
@@ -3053,7 +3053,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 216,
       columnNumber: 9
     }
@@ -3063,7 +3063,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 223,
       columnNumber: 11
     }
@@ -3071,7 +3071,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 224,
       columnNumber: 13
     }
@@ -3079,7 +3079,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 225,
       columnNumber: 15
     }
@@ -3087,7 +3087,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 226,
       columnNumber: 17
     }
@@ -3099,7 +3099,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 227,
       columnNumber: 17
     }
@@ -3107,7 +3107,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 235,
       columnNumber: 21
     }
@@ -3122,7 +3122,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 236,
       columnNumber: 23
     }
@@ -3131,7 +3131,7 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 250,
       columnNumber: 19
     }
@@ -3146,7 +3146,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 254,
       columnNumber: 17
     }
@@ -3155,7 +3155,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 264,
       columnNumber: 19
     }
@@ -3170,7 +3170,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 268,
       columnNumber: 17
     }
@@ -3194,7 +3194,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
 const ToastBox = styled(Flex$1, {
   position: 'fixed',
   variants: {
@@ -3236,7 +3236,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3244,7 +3244,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -3255,7 +3255,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 46,
         columnNumber: 18
       }
@@ -3263,8 +3263,8 @@ const ToastContainer = ({
   })));
 };
 
-const _excluded$v = ["id"];
-var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+const _excluded$w = ["id"];
+var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
 let toastCount = 0;
 
 const ToastProvider = ({
@@ -3276,7 +3276,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;
@@ -3306,7 +3306,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3315,7 +3315,7 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 45,
       columnNumber: 7
     }
@@ -3324,7 +3324,7 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 49,
       columnNumber: 7
     }
@@ -3333,7 +3333,7 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 53,
       columnNumber: 7
     }
@@ -3342,14 +3342,14 @@ const ToastProvider = ({
     position: BOTTOM_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 57,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
 
 function MajooProvider({
   children,
@@ -3362,14 +3362,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
     }
@@ -3383,8 +3383,8 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-const _excluded$u = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
-var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
+const _excluded$v = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
+var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
 const Context$2 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -3466,7 +3466,7 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 91,
     columnNumber: 3
   }
@@ -3488,7 +3488,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 108,
     columnNumber: 3
   }
@@ -3511,7 +3511,7 @@ const BannerLink = ({
 }) => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 125,
     columnNumber: 3
   }
@@ -3523,7 +3523,7 @@ const BannerLink = ({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 127,
     columnNumber: 7
   }
@@ -3550,7 +3550,7 @@ BannerLink.defaultProps = {
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 154,
     columnNumber: 3
   }
@@ -3558,11 +3558,11 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   onClick: e => {
     e.preventDefault();
     e.stopPropagation();
-    value === null || value === void 0 ? void 0 : value.onRemove();
+    value == null ? void 0 : value.onRemove();
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 156,
     columnNumber: 7
   }
@@ -3571,7 +3571,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   size: "16px",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 163,
     columnNumber: 9
   }
@@ -3581,7 +3581,7 @@ const SingleTagBanner = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 171,
       columnNumber: 5
     }
@@ -3591,7 +3591,7 @@ const SingleTagBanner = props => {
     align: "end",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 172,
       columnNumber: 7
     }
@@ -3604,21 +3604,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
     }
@@ -3627,7 +3627,7 @@ const SingleTagBanner = props => {
     variant: props.variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 185,
       columnNumber: 11
     }
@@ -3635,12 +3635,12 @@ const SingleTagBanner = props => {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
-      props === null || props === void 0 ? void 0 : props.onRemove();
+      props == null ? void 0 : props.onRemove();
     },
     closeCenter: !props.title && !props.link,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 190,
       columnNumber: 7
     }
@@ -3649,7 +3649,7 @@ const SingleTagBanner = props => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 198,
       columnNumber: 9
     }
@@ -3668,7 +3668,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,
@@ -3678,7 +3678,7 @@ const Banner = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 206,
       columnNumber: 5
     }
@@ -3695,7 +3695,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 208,
       columnNumber: 9
     }
@@ -3706,7 +3706,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 215,
       columnNumber: 11
     }
@@ -3720,7 +3720,7 @@ const Banner = _ref => {
     onRemove: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 218,
       columnNumber: 9
     }
@@ -4030,10 +4030,10 @@ const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$t = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-var _jsxFileName$S = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
+const _excluded$u = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
+var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
 const CardComponent = styled('div', {
-  padding: '20px',
+  padding: '12px',
   height: 'auto',
   width: 'auto',
   borderRadius: '$lg',
@@ -4168,7 +4168,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,
@@ -4181,23 +4181,23 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
-      lineNumber: 103,
+      fileName: _jsxFileName$T,
+      lineNumber: 102,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(CardLineColor, {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
-      lineNumber: 114,
+      fileName: _jsxFileName$T,
+      lineNumber: 113,
       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,
-      lineNumber: 118,
+      fileName: _jsxFileName$T,
+      lineNumber: 117,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(StyledIcon$1, {
@@ -4205,15 +4205,15 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
-      lineNumber: 119,
+      fileName: _jsxFileName$T,
+      lineNumber: 118,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
-      lineNumber: 125,
+      fileName: _jsxFileName$T,
+      lineNumber: 124,
       columnNumber: 13
     }
   }, title)) : null, children);
@@ -4234,12 +4234,12 @@ Card.defaultProps = {
   color: 'green',
   shadow: false,
   radius: '$lg',
-  padding: '20px',
+  padding: '12px',
   title: ''
 };
 
-const _excluded$s = ["children"];
-var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+const _excluded$t = ["children"];
+var _jsxFileName$S = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
 const BreadcrumbStyle = styled('nav', {
   wordWrap: 'break-word',
   '& li+li:before': {
@@ -4285,7 +4285,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
     }
@@ -4296,20 +4296,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
     }
@@ -4514,8 +4514,8 @@ Badge.defaultProps = {
 };
 Badge.displayName = 'Badge';
 
-const _excluded$r = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+const _excluded$s = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -4559,7 +4559,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,
@@ -4568,7 +4568,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4578,7 +4578,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4586,21 +4586,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
     }
@@ -4617,8 +4617,8 @@ Avatar.defaultProps = {
   delayMs: 0
 };
 
-const _excluded$q = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
-var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
+var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
 const ContainerFallback = styled(Flex$1, {
   boxSizing: 'border-box',
   border: '2px dashed #C0C4C4',
@@ -4667,7 +4667,7 @@ function Image(_ref) {
     cssFallback,
     rounded
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   if (src || fallback) {
     return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
@@ -4684,7 +4684,7 @@ function Image(_ref) {
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 59,
         columnNumber: 7
       }
@@ -4700,14 +4700,14 @@ function Image(_ref) {
       }, cssFallback),
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 73,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TextFallback, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 74,
         columnNumber: 9
       }
@@ -4775,8 +4775,8 @@ Image.defaultProps = {
   fallbackTitle: 'Tidak ada foto'
 };
 
-const _excluded$p = ["children", "label", "color", "css", "withClick", "side", "align"];
-var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+const _excluded$q = ["children", "label", "color", "css", "withClick", "side", "align"];
+var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
 const slideUpAndFade$1 = keyframes({
   '0%': {
     opacity: 0,
@@ -4884,14 +4884,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
     }
@@ -4899,7 +4899,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4907,7 +4907,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4918,7 +4918,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
     }
@@ -4927,7 +4927,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 100,
       columnNumber: 9
     }
@@ -4949,15 +4949,15 @@ Tooltip.defaultProps = {
   children: /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 119,
       columnNumber: 13
     }
   })
 };
 
-const _excluded$o = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+const _excluded$p = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
 const StyledProgress$1 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -5075,7 +5075,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,
@@ -5091,7 +5091,7 @@ function Progress$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -5104,7 +5104,7 @@ function Progress$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -5128,7 +5128,7 @@ Progress$1.defaultProps = {
 };
 
 const formLabelStyle = {
-  '& .form-label': {
+  '& > .form-label': {
     alignItems: 'start !important',
     '& > div': {
       width: 175
@@ -5149,7 +5149,10 @@ const formLabelStyle = {
     }
   }
 };
-const FormGroup = styled(Flex$1, {
+const FormGroup = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: '1fr',
+  rowGap: '$spacing-03',
   variants: {
     responsive: {
       input: Object.assign({
@@ -5204,7 +5207,7 @@ const FormGroup = styled(Flex$1, {
           '& *:nth-child(3)': {
             gridColumn: 'unset'
           },
-          '& .retina-error': {
+          '& > *:nth-child(n+4)': {
             gridColumn: '2/3'
           }
         }
@@ -5213,17 +5216,9 @@ const FormGroup = styled(Flex$1, {
   }
 });
 FormGroup.displayName = 'FormGroup';
-FormGroup.propTypes = {
-  gap: PropTypes.number,
-  direction: PropTypes.string
-};
-FormGroup.defaultProps = {
-  gap: 3,
-  direction: 'column'
-};
 
-const _excluded$n = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
-var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
+const _excluded$o = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
+var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
 const StyledLabel$1 = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -5255,14 +5250,14 @@ const FormLabel = _ref => {
     maxCount,
     labelCss
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     className: "form-label",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -5272,7 +5267,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -5282,7 +5277,7 @@ const FormLabel = _ref => {
     css: labelCss,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -5297,7 +5292,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -5305,14 +5300,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -5321,7 +5316,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -5337,8 +5332,8 @@ FormLabel.propTypes = {
 };
 FormLabel.displayName = 'FormLabel';
 
-const _excluded$m = ["children", "error"];
-var _jsxFileName$L = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
+const _excluded$n = ["children", "error"];
+var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
 const StyledHelper = styled(Text$1, {
   display: 'inline-block',
   color: '$textSecondary',
@@ -5356,7 +5351,7 @@ const FormHelper = _ref => {
     children,
     error
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
@@ -5365,7 +5360,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -5377,7 +5372,7 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
+var _jsxFileName$L = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
 const CheckboxContext = /*#__PURE__*/createContext();
 
 const CheckboxGroup = ({
@@ -5422,7 +5417,7 @@ const CheckboxGroup = ({
     value: values,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 35,
       columnNumber: 5
     }
@@ -5440,7 +5435,7 @@ CheckboxGroup.defaultProps = {
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
-var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
 
 const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5458,7 +5453,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$J,
+    fileName: _jsxFileName$K,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5470,7 +5465,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$J,
+    fileName: _jsxFileName$K,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5482,13 +5477,13 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$J,
+    fileName: _jsxFileName$K,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
+var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
 
 const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5506,7 +5501,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5518,7 +5513,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5530,14 +5525,14 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   d: "M14.31 10.41H3.9v-2.6h10.41z",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-const _excluded$l = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
+const _excluded$m = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
+var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
 const StyledIndicator$2 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -5596,13 +5591,13 @@ const Checkbox = _ref => {
     index,
     value
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   const context = useContext(CheckboxContext);
   const [isChecked, setChecked] = useState(false);
   useEffect(() => {
     const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
-    setChecked(checkValue !== null && checkValue !== void 0 ? checkValue : false);
+    setChecked(checkValue != null ? checkValue : false);
   }, [checked, indeterminate, context]);
   return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({
     id: id,
@@ -5619,28 +5614,28 @@ const Checkbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 64,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 77,
       columnNumber: 7
     }
   }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 77,
       columnNumber: 41
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 77,
       columnNumber: 60
     }
@@ -5654,14 +5649,14 @@ const InputCheckbox = _ref2 => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 84,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 85,
       columnNumber: 7
     }
@@ -5677,14 +5672,14 @@ const InputCheckbox = _ref2 => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 86,
       columnNumber: 7
     }
   }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 101,
       columnNumber: 5
     }
@@ -5702,8 +5697,8 @@ InputCheckbox.propTypes = {
 };
 InputCheckbox.displayName = 'InputCheckbox';
 
-const _excluded$k = ["children", "size"];
-var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+const _excluded$l = ["children", "size"];
+var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -5819,7 +5814,7 @@ const InputGroup = _ref => {
     children,
     size = 'lg'
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
   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');
@@ -5843,7 +5838,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 146,
       columnNumber: 10
     }
@@ -5989,8 +5984,8 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 
-const _excluded$j = ["disabled", "readOnly"];
-var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
+const _excluded$k = ["disabled", "readOnly"];
+var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
 const disabledStyle = {
   backgroundColor: '$formDisable',
   color: '$textDisable',
@@ -6002,7 +5997,7 @@ const disabledStyle = {
     border: '1px solid $colors$gray300'
   }
 };
-const StyledInput = styled('input', {
+const StyledInput$1 = styled('input', {
   // Reset
   appearance: 'none',
   boxSizing: 'border-box',
@@ -6132,9 +6127,9 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     disabled,
     readOnly
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
-  return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
+  return /*#__PURE__*/React__default.createElement(StyledInput$1, _extends({
     ref: ref,
     disabled: disabled,
     isDisabled: disabled,
@@ -6143,7 +6138,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 151,
       columnNumber: 3
     }
@@ -6151,9 +6146,9 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 InputText.displayName = 'InputText';
 
-const _excluded$i = ["disabled", "readOnly"];
-var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTextArea\\InputTextArea.js";
-const StyledTextArea = styled(StyledInput, {
+const _excluded$j = ["disabled", "readOnly"];
+var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTextArea\\InputTextArea.js";
+const StyledTextArea = styled(StyledInput$1, {
   variants: {
     size: {
       sm: {
@@ -6173,7 +6168,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     disabled,
     readOnly
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   return /*#__PURE__*/React__default.createElement(StyledTextArea, _extends({
     ref: ref,
@@ -6184,7 +6179,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 22,
       columnNumber: 3
     }
@@ -6197,25 +6192,25 @@ InputTextArea.defaultProps = {
 
 const InputRadioContext = /*#__PURE__*/React__default.createContext();
 
-var _jsxFileName$D = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
+var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\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, {
+  return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
     value: props,
     __self: this,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 13,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(RadioGroup, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$D,
+      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, {
+  }), React__default.Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
     style: Object.assign({}, child.props.style, {
       opacity: 1
     })
@@ -6229,8 +6224,8 @@ InputRadioGroup.propTypes = {
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
-const _excluded$h = ["id", "disabled", "css", "inputType", "inputProps"];
-var _jsxFileName$C = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
+const _excluded$i = ["id", "disabled", "css", "inputType", "inputProps"];
+var _jsxFileName$D = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
@@ -6346,7 +6341,7 @@ const InputRadio = _ref => {
     inputType,
     inputProps
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
   function renderInputType(type, checked) {
     switch (type) {
@@ -6355,7 +6350,7 @@ const InputRadio = _ref => {
           disabled: disabled || checked !== props.value,
           __self: this,
           __source: {
-            fileName: _jsxFileName$C,
+            fileName: _jsxFileName$D,
             lineNumber: 124,
             columnNumber: 16
           }
@@ -6366,7 +6361,7 @@ const InputRadio = _ref => {
           disabled: disabled || checked !== props.value,
           __self: this,
           __source: {
-            fileName: _jsxFileName$C,
+            fileName: _jsxFileName$D,
             lineNumber: 127,
             columnNumber: 16
           }
@@ -6386,7 +6381,7 @@ const InputRadio = _ref => {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$C,
+            fileName: _jsxFileName$D,
             lineNumber: 131,
             columnNumber: 11
           }
@@ -6397,7 +6392,7 @@ const InputRadio = _ref => {
   return /*#__PURE__*/React__default.createElement(InputRadioContext.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$D,
       lineNumber: 150,
       columnNumber: 5
     }
@@ -6406,7 +6401,7 @@ const InputRadio = _ref => {
     value,
     outlined
   }) => {
-    const checked = value !== null && value !== void 0 ? value : defaultValue;
+    const checked = value != null ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$6, {
       align: "center",
       gap: 4,
@@ -6416,7 +6411,7 @@ const InputRadio = _ref => {
       css: css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 155,
         columnNumber: 11
       }
@@ -6426,14 +6421,14 @@ const InputRadio = _ref => {
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 163,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 164,
         columnNumber: 15
       }
@@ -6480,7 +6475,9 @@ InputRightElement.propTypes = {
 };
 InputRightElement.name = 'InputRightElement';
 
-const InputNumber = styled(NumberFormat, {
+const _excluded$h = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled"];
+var _jsxFileName$C = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputNumber\\InputNumber.js";
+const StyledInput = styled(NumberFormat, {
   // Reset
   appearance: 'none',
   boxSizing: 'border-box',
@@ -6543,7 +6540,7 @@ const InputNumber = styled(NumberFormat, {
     }
   }],
   variants: {
-    readOnly: {
+    isReadOnly: {
       true: {
         backgroundColor: '$formDisable'
       }
@@ -6609,6 +6606,35 @@ const InputNumber = styled(NumberFormat, {
     size: 'lg'
   }
 });
+const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    placeholder,
+    value,
+    size,
+    isInvalid,
+    readOnly,
+    disabled
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+
+  return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
+    ref: ref,
+    placeholder: placeholder,
+    value: value,
+    size: size,
+    isInvalid: isInvalid,
+    readOnly: readOnly,
+    isReadOnly: readOnly,
+    disabled: disabled
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$C,
+      lineNumber: 147,
+      columnNumber: 3
+    }
+  }));
+});
 InputNumber.propTypes = {
   placeholder: PropTypes.string,
   value: PropTypes.string,
@@ -7414,7 +7440,7 @@ function TagsInput(_ref) {
         return;
       }
 
-      if (pattern && pattern !== null && pattern !== void 0 && pattern.regex) {
+      if (pattern && pattern != null && pattern.regex) {
         const regex = new RegExp(pattern.regex);
 
         if (!regex.test(event.target.value)) {
@@ -7480,7 +7506,7 @@ function TagsInput(_ref) {
       lineNumber: 173,
       columnNumber: 9
     }
-  })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
+  })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
     color: "red",
     __self: this,
     __source: {
@@ -8218,11 +8244,13 @@ const SelectOption = styled('div', {
 });
 const SelectItem = styled('div', {
   overflow: 'hidden',
-  borderBottom: '1px solid $bgBorder',
   padding: '$spacing-05 0',
   backgroundColor: 'rgb(235, 245, 255)',
   cursor: 'pointer',
-  lineHeight: '20px'
+  lineHeight: '20px',
+  '&:not(:last-child)': {
+    borderBottom: '1px solid $bgBorder'
+  }
 });
 const StyledDiv$2 = styled('div', {
   color: '$textDisable',
@@ -10324,8 +10352,8 @@ const PopoverContent = ({
     ref: floating,
     style: Object.assign({
       position: strategy,
-      top: isMobile ? 0 : y !== null && y !== void 0 ? y : '',
-      left: isMobile ? 0 : x !== null && x !== void 0 ? x : '',
+      top: isMobile ? 0 : y != null ? y : '',
+      left: isMobile ? 0 : x != null ? x : '',
       zIndex: zIndices.popover
     }, style)
   }), {
@@ -11319,7 +11347,7 @@ const NotificationBadge = _ref => {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   const getValue = () => {
-    let value = props === null || props === void 0 ? void 0 : props.value;
+    let value = props == null ? void 0 : props.value;
 
     if (typeof value === 'number' || parseInt(value)) {
       if (Math.sign(value) === 1 || Math.sign(value) === 0) {
@@ -11430,7 +11458,7 @@ const IconButton = styled('button', {
   borderRadius: '$round',
   size: '24px',
   padding: '$spacing-01',
-  display: 'inline-flex',
+  display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   border: 'none',
@@ -12765,7 +12793,7 @@ const ModalDialog = props => {
           if (!onOpenAutoFocus) {
             e.preventDefault();
           } else {
-            onOpenAutoFocus();
+            onOpenAutoFocus(e);
           }
         }
       }, {
@@ -13269,27 +13297,6 @@ const AccordionTrigger = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
 const AccordionItem = StyledItem$1;
 const AccordionContent = AccordionPrimitive.Content;
 
-const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
-const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
-const yearRangesList = rangeStart => {
-  let start = rangeStart;
-  let end = start + 9;
-  return new Array(10).fill(undefined).map(_ => {
-    const yearRange = {
-      start,
-      end
-    };
-    start = end + 1;
-    end = end + 10;
-    return yearRange;
-  });
-};
-const getCalendarStartYear = year => year - year % 10 + 1;
-const getCalendarStartYearRange = year => year - year % 100 + 1;
-const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
-  dateStyle
-}).format(date);
-
 function useMediaQuery(query) {
   const [matches, setMatches] = useState(false);
   useEffect(() => {
@@ -13339,6 +13346,27 @@ const AdvancedOption = ({
   }), void 0);
 };
 
+const monthNamesFull = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
+const weekdayNamesShort = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];
+const yearRangesList = rangeStart => {
+  let start = rangeStart;
+  let end = start + 9;
+  return new Array(10).fill(undefined).map(_ => {
+    const yearRange = {
+      start,
+      end
+    };
+    start = end + 1;
+    end = end + 10;
+    return yearRange;
+  });
+};
+const getCalendarStartYear = year => year - year % 10 + 1;
+const getCalendarStartYearRange = year => year - year % 100 + 1;
+const toDateFormat = (date, dateStyle = 'long') => Intl.DateTimeFormat('id-ID', {
+  dateStyle
+}).format(date);
+
 const DateNumber = styled('div', {
   display: 'inline-flex',
   alignItems: 'center',
@@ -13481,7 +13509,7 @@ const WeekdayBox$1 = styled(Box, {
 });
 const CalendarsContainer$1 = styled(Box, {
   width: '100%',
-  padding: '$spacing-01',
+  padding: '$spacing-03',
   display: 'inline-flex',
   borderRadius: '$lg',
   boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.12)',
@@ -14135,6 +14163,7 @@ const FooterContainer = styled(Flex$1, {
 });
 const TitleButton = styled(Heading, {
   padding: '2px $spacing-04',
+  color: '$textPrimary',
   '&:hover': {
     backgroundColor: '$bgSuccess',
     color: '$textGreen'
@@ -14353,7 +14382,8 @@ const MobileCalendarBox = ({
         return jsx(DateNumber, Object.assign({
           size: "small"
         }, dateProps, {
-          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected)
+          variant: disabled ? 'disabled' : getVariant(dateObj, calendar.month, selected),
+          isSunday: date.getDay() === 0
         }, {
           children: date.getDate()
         }), key);
@@ -14466,7 +14496,10 @@ const MobileCalendarBox = ({
           onClick: () => setExpandAdvanceView(!expandAdvanceView)
         }, {
           children: [jsx(Text$1, Object.assign({
-            variant: "contentButton"
+            variant: "contentButton",
+            css: {
+              color: '$textPrimary'
+            }
           }, {
             children: "Pilih Rentang Waktu"
           }), void 0), expandAdvanceView ? jsx(ChevronDownOutline, {}, void 0) : jsx(ChevronUpOutline, {}, void 0)]
@@ -15445,6 +15478,8 @@ function advancePickerDate(type) {
   }
 }
 
+moment.locale('id');
+
 const getInputPickerValue = (type, date) => {
   if (!date) return '';
 
@@ -15453,7 +15488,7 @@ const getInputPickerValue = (type, date) => {
       dateStyle: 'long'
     }).format(date);
   } else {
-    return `${toDateFormat(date[0], 'medium')} - ${toDateFormat(date[1], 'medium')}`;
+    return `${moment(date[0]).format('ll')} - ${moment(date[1]).format('ll')}`;
   }
 };
 
@@ -15830,6 +15865,11 @@ const PaginationButton = ({
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "caption",
+    css: {
+      fontSize: 12,
+      fontWeight: 400,
+      color: '$textPrimary'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
@@ -15860,7 +15900,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 170,
+      lineNumber: 172,
       columnNumber: 9
     }
   })));
@@ -16020,7 +16060,7 @@ function Pagination(_ref) {
 
   const totalPages = Math.ceil(totalData / limit);
   const isMobile = useMediaQuery('(max-width: 700px)');
-  return /*#__PURE__*/React__default.createElement(Flex$1, _extends({
+  return !hideDataInfo || totalPages > 1 ? /*#__PURE__*/React__default.createElement(Flex$1, _extends({
     direction: isMobile ? 'columnReverse' : 'row',
     align: "center",
     justify: "between",
@@ -16061,7 +16101,14 @@ function Pagination(_ref) {
       lineNumber: 33,
       columnNumber: 26
     }
-  }));
+  })) : /*#__PURE__*/React__default.createElement(Box, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName$g,
+      lineNumber: 36,
+      columnNumber: 5
+    }
+  });
 }
 
 Pagination.propTypes = {
@@ -16122,7 +16169,8 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
   isLoading,
   rowGroup,
   hiddenColumns,
-  css
+  css,
+  customRowsStyle
 }, ref) => {
   const {
     getTableProps,
@@ -16155,6 +16203,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                 unsortable: column.unsortable
               }, {
                 children: jsx(TableHeadCellContent, Object.assign({
+                  isMobile: true,
                   heading: "headerTable",
                   color: "secondary"
                 }, {
@@ -16168,8 +16217,22 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
         children: page.map(row => {
           prepareRow(row);
           const actionCells = row.allCells.filter(cell => cell.column.id === 'menu' || cell.column.isAction);
+          let customStyle = {};
+
+          if (customRowsStyle && customRowsStyle(row.values).length) {
+            for (let i = 0; i < customRowsStyle(row.values).length; i++) {
+              console.log(customRowsStyle(row.values)[i]);
+
+              if (customRowsStyle(row.values)[i].predicate) {
+                customStyle = customRowsStyle(row.values)[i].css;
+              }
+            }
+          }
+
           return jsxs(React__default.Fragment, {
-            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({}, row.getRowProps(), {
+            children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$3, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               key: `${row.id}-group_header`
             }), jsx(TableCell$3, Object.assign({
               colSpan: 100
@@ -16179,7 +16242,9 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
               }, {
                 children: row.cells[0].render('Cell')
               }), void 0)
-            }), void 0)), jsx(TableRow$3, Object.assign({}, row.getRowProps(), {
+            }), void 0)), jsx(TableRow$3, Object.assign({
+              css: customStyle
+            }, row.getRowProps(), {
               children: row.cells.filter(cell => cell.column.isMobileHeader || cell.column.id === 'selection').map(cell => {
                 return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                   children: cell.column.accessor ? jsxs(Flex$1, Object.assign({
@@ -16224,7 +16289,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                         heading: "headerTable",
                         color: "secondary"
                       }, {
-                        children: (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase()
+                        children: typeof cell.column.Header === 'string' ? (_a = cell.column.Header) === null || _a === void 0 ? void 0 : _a.toUpperCase() : cell.render('Header')
                       }), void 0), cell.render('Cell')]
                     }), `${cell.column.id}-${row.id}`);
                   })
@@ -16299,7 +16364,7 @@ const TableHeadCell$2 = styled('th', {
 const TableHeaderCellContainer = styled(Flex$1, {
   flexDirection: 'row',
   alignItems: 'center',
-  justifyContent: 'space-between',
+  gap: '$spacing-03',
   userSelect: 'none',
   size: '100%',
   minWidth: 0,
@@ -16369,14 +16434,15 @@ const TableHeaderCellContainer = styled(Flex$1, {
     },
     isMobile: {
       true: {
-        padding: '0'
+        padding: '0',
+        justifyContent: 'space-between',
+        gap: 0
       }
     }
   }
 });
 const TableHeadCellContent = styled(Heading, {
   userSelect: 'none',
-  width: '100%',
   textAlign: 'start',
   position: 'relative',
   '& > *': {
@@ -16384,6 +16450,13 @@ const TableHeadCellContent = styled(Heading, {
   },
   '& > span:last-child': {
     paddingLeft: '$spacing-03'
+  },
+  variants: {
+    isMobile: {
+      true: {
+        width: '100%'
+      }
+    }
   }
 });
 const TableBody$2 = styled('tbody', {});
@@ -16510,7 +16583,8 @@ function Table({
   selectedIds,
   rowGroup,
   hiddenColumns,
-  columnOrder
+  columnOrder,
+  customRowsStyle
 }) {
   const [limit, setLimit] = useState(rowLimit);
 
@@ -16747,8 +16821,22 @@ function Table({
               const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
               const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
               const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
+              let customStyle = {};
+
+              if (customRowsStyle && customRowsStyle(row.values).length) {
+                for (let _i = 0; _i < customRowsStyle(row.values).length; _i++) {
+                  console.log(customRowsStyle(row.values)[_i]);
+
+                  if (customRowsStyle(row.values)[_i].predicate) {
+                    customStyle = customRowsStyle(row.values)[_i].css;
+                  }
+                }
+              }
+
               return jsxs(React.Fragment, {
-                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
+                children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/createElement$2(TableRow$2, Object.assign({
+                  css: customStyle
+                }, row.getRowProps(), {
                   key: `${row.id}-group_header`
                 }), jsx(TableCell$2, Object.assign({
                   colSpan: 100,
@@ -16762,7 +16850,9 @@ function Table({
                   }, {
                     children: row.cells[0].render('Cell')
                   }), void 0)
-                }), void 0)), jsx(TableRow$2, Object.assign({}, row.getRowProps(), {
+                }), void 0)), jsx(TableRow$2, Object.assign({
+                  css: customStyle
+                }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
                     return jsx(TableCell$2, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign({
@@ -16842,7 +16932,8 @@ function Table({
       isLoading: isLoading,
       rowGroup: rowGroup,
       hiddenColumns: hiddenColumns,
-      css: css
+      css: css,
+      customRowsStyle: customRowsStyle
     }, void 0)]
   }), void 0);
 } //Dummy component for mdx docs purpose only
@@ -17962,7 +18053,7 @@ const PageDialog = props => {
           if (!onOpenAutoFocus) {
             e.preventDefault();
           } else {
-            onOpenAutoFocus();
+            onOpenAutoFocus(e);
           }
         }
       }, {
@@ -18127,7 +18218,7 @@ const StyledContent$1 = styled(ADialog.Content, {
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: '90vw',
-  maxWidth: '500px',
+  maxWidth: '422px',
   maxHeight: '100vh',
   '@media (prefers-reduced-motion: no-preference)': {
     animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`
@@ -18169,7 +18260,7 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 75,
+      lineNumber: 74,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StyledOverlay, {
@@ -18179,14 +18270,14 @@ function Content$1(_ref) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 76,
+      lineNumber: 75,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledContent$1, _extends({}, props, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 77,
+      lineNumber: 76,
       columnNumber: 7
     }
   }), children));
@@ -18200,14 +18291,14 @@ function AlertDialogFunction(properties) {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 86,
+        lineNumber: 85,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TemplateAlertFunction, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 87,
+        lineNumber: 86,
         columnNumber: 9
       }
     }))), document.getElementById('a-dialog'));
@@ -18251,7 +18342,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 128,
+      lineNumber: 127,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18263,20 +18354,20 @@ const TemplateAlertFunction = props => {
       if (!props.onOpenAutoFocus) {
         e.preventDefault();
       } else {
-        props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+        props == null ? void 0 : props.onOpenAutoFocus();
       }
     },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 129,
+      lineNumber: 128,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 140,
+      lineNumber: 139,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18284,7 +18375,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 141,
+      lineNumber: 140,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18292,7 +18383,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 142,
+      lineNumber: 141,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18303,7 +18394,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 143,
+      lineNumber: 142,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18311,7 +18402,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 144,
+      lineNumber: 143,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18319,14 +18410,14 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 148,
+      lineNumber: 147,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 149,
+      lineNumber: 148,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18337,7 +18428,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 150,
+      lineNumber: 149,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18349,7 +18440,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 152,
+      lineNumber: 153,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18357,7 +18448,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 153,
+      lineNumber: 154,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18371,7 +18462,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 154,
+      lineNumber: 155,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18379,19 +18470,19 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 156,
+      lineNumber: 157,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
     size: "sm",
     onClick: buttonConfirm,
     buttonType: props.dialogType,
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.actionButtonProps, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 157,
+      lineNumber: 158,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18399,7 +18490,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 169,
+      lineNumber: 170,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18410,12 +18501,12 @@ const TemplateAlertFunction = props => {
       flex: props.isMobile && 1
     },
     buttonType: "ghost",
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.cancelButtonProps, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 170,
+      lineNumber: 171,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18423,7 +18514,7 @@ const TemplateAlertFunction = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 181,
+      lineNumber: 182,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18433,12 +18524,12 @@ const TemplateAlertFunction = props => {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.actionButtonProps, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 182,
+      lineNumber: 183,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -18463,7 +18554,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 213,
+      lineNumber: 214,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Content$1, _extends({}, props, {
@@ -18472,19 +18563,19 @@ function AlertDialog(props) {
       minHeight: 230
     }, isMobileCss, props.css),
     onOpenAutoFocus: e => {
-      if (!props.onOpenAutoFocus) e.preventDefault();
+      if (!props.onOpenAutoFocus) e.preventDefault();else props.onOpenAutoFocus(e);
     },
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 214,
+      lineNumber: 215,
       columnNumber: 7
     }
   }), /*#__PURE__*/React__default.createElement(StyledTitle, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 221,
+      lineNumber: 223,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Heading, {
@@ -18492,7 +18583,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 222,
+      lineNumber: 224,
       columnNumber: 11
     }
   }, props.title), /*#__PURE__*/React__default.createElement(AlertDialogCancel, {
@@ -18500,7 +18591,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 223,
+      lineNumber: 225,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18511,7 +18602,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 224,
+      lineNumber: 226,
       columnNumber: 13
     }
   }, /*#__PURE__*/React__default.createElement(CloseOutline, {
@@ -18519,7 +18610,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 225,
+      lineNumber: 227,
       columnNumber: 15
     }
   })))), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18527,14 +18618,14 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 229,
+      lineNumber: 231,
       columnNumber: 9
     }
   }), /*#__PURE__*/React__default.createElement(StyledDescription, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 230,
+      lineNumber: 232,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18544,7 +18635,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 231,
+      lineNumber: 233,
       columnNumber: 11
     }
   }, props.description)), /*#__PURE__*/React__default.createElement(Box, {
@@ -18556,7 +18647,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 233,
+      lineNumber: 235,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18564,7 +18655,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 234,
+      lineNumber: 236,
       columnNumber: 11
     }
   }), /*#__PURE__*/React__default.createElement(Flex, {
@@ -18578,7 +18669,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 235,
+      lineNumber: 237,
       columnNumber: 11
     }
   }, props.singleButton ? /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18586,7 +18677,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 237,
+      lineNumber: 239,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18596,12 +18687,12 @@ function AlertDialog(props) {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.actionButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 238,
+      lineNumber: 240,
       columnNumber: 17
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ADialog.Cancel, {
@@ -18609,7 +18700,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 251,
+      lineNumber: 253,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18620,12 +18711,12 @@ function AlertDialog(props) {
       flex: props.isMobile && 1
     },
     buttonType: "ghost",
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.cancelButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 252,
+      lineNumber: 254,
       columnNumber: 19
     }
   }), props.labelCancel ? props.labelCancel : 'Cancel')), /*#__PURE__*/React__default.createElement(ADialog.Action, {
@@ -18633,7 +18724,7 @@ function AlertDialog(props) {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 263,
+      lineNumber: 265,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(Button$2, _extends({
@@ -18643,12 +18734,12 @@ function AlertDialog(props) {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.actionButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
-      lineNumber: 264,
+      lineNumber: 266,
       columnNumber: 19
     }
   }), props.labelConfirm ? props.labelConfirm : 'Confirm')))))));
@@ -21036,13 +21127,27 @@ const Upload = ({
     borderRadius: 8,
     width: width,
     height: height - 36,
-    objectFit: 'cover'
+    objectFit: 'cover',
+    variants: {
+      disabled: {
+        true: {
+          height
+        }
+      }
+    }
   });
   const Blank = styled('div', {
     borderRadius: 8,
     width: width,
     height: height - 36,
-    background: '$gray50'
+    background: '$gray50',
+    variants: {
+      disabled: {
+        true: {
+          height
+        }
+      }
+    }
   });
 
   function handleClick() {
@@ -21107,7 +21212,7 @@ const Upload = ({
               file: fileProgress,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setError(error.message));
+            })) == null ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) == null ? void 0 : _onChange$then.catch(error => setError(error.message));
           }
         }).then(result => {
           var _onChange2, _onChange2$then;
@@ -21129,7 +21234,7 @@ const Upload = ({
             file: fileSuccess,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setError(error.message));
+          })) == null ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) == null ? void 0 : _onChange2$then.catch(error => setError(error.message));
         }).catch(error => {
           var _onChange3, _onChange3$then;
 
@@ -21150,7 +21255,7 @@ const Upload = ({
             file: fileError,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setError(error.message));
+          })) == null ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) == null ? void 0 : _onChange3$then.catch(error => setError(error.message));
         });
       } else {
         var _onChange4, _onChange4$then;
@@ -21160,7 +21265,7 @@ const Upload = ({
           file: newFile,
           indexReplace: indexReplace.current,
           isReplace: indexReplace.current !== null
-        })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setError(error.message));
+        })) == null ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) == null ? void 0 : _onChange4$then.catch(error => setError(error.message));
       }
 
       if (indexReplace.current !== null) {
@@ -21187,9 +21292,9 @@ const Upload = ({
   }
 
   function handleCrop() {
-    if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
+    if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
       imgPreview(imgRef.current, completedCrop).then(blob => {
-        const file = new File([blob], fileState === null || fileState === void 0 ? void 0 : fileState.name, {
+        const file = new File([blob], fileState == null ? void 0 : fileState.name, {
           type: blob.type
         });
         handleUpload([file]);
@@ -21257,22 +21362,22 @@ const Upload = ({
   function handleOpenFile(file) {
     var _String, _file$name;
 
-    let extension = (_String = String(file === null || file === void 0 ? void 0 : (_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.split('.').pop())) === null || _String === void 0 ? void 0 : _String.toLowerCase();
+    let extension = (_String = String(file == null ? void 0 : (_file$name = file.name) == null ? void 0 : _file$name.split('.').pop())) == null ? void 0 : _String.toLowerCase();
 
     if (extension === 'pdf') {
-      window.open(file === null || file === void 0 ? void 0 : file.url);
+      window.open(file == null ? void 0 : file.url);
     } else {
-      request.get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
+      request.get(file == null ? void 0 : file.url).end((err, res) => {
         if (err) {
           console.error(err.message);
         }
 
-        if (res && res !== null && res !== void 0 && res.ok) {
-          const response = res === null || res === void 0 ? void 0 : res.text;
+        if (res && res != null && res.ok) {
+          const response = res == null ? void 0 : res.text;
           const url = window.URL.createObjectURL(new Blob([response]));
           const link = document.createElement('a');
           link.href = url;
-          link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
+          link.setAttribute('download', file == null ? void 0 : file.name);
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
@@ -21325,7 +21430,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 543,
+        lineNumber: 557,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -21335,23 +21440,23 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 544,
+        lineNumber: 558,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah ${isFile ? 'Berkas' : 'Gambar'}`));
   }
 
   const renderPicture = () => {
-    return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
-      if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+    return fileList == null ? void 0 : fileList.map((item, index) => {
+      if ((item == null ? void 0 : item.status) === 'uploading') {
         return /*#__PURE__*/React__default.createElement(UploadProgress, {
           key: index,
-          progress: item === null || item === void 0 ? void 0 : item.percent,
-          loading: item === null || item === void 0 ? void 0 : item.loading,
+          progress: item == null ? void 0 : item.percent,
+          loading: item == null ? void 0 : item.loading,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 554,
+            lineNumber: 568,
             columnNumber: 16
           }
         });
@@ -21363,7 +21468,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 557,
+          lineNumber: 571,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21373,17 +21478,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 558,
+          lineNumber: 572,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+      }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 559,
-          columnNumber: 13
+          lineNumber: 573,
+          columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
@@ -21395,7 +21500,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 560,
+          lineNumber: 574,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21404,34 +21509,36 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 568,
+          lineNumber: 582,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
         src: item.url,
+        alt: "upload-content",
+        disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 570,
+          lineNumber: 584,
           columnNumber: 13
         }
-      })), renderButtonReplace(index));
+      })), !disabled && renderButtonReplace(index));
     });
   };
 
   const renderFile = () => {
-    return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
+    return fileList == null ? void 0 : fileList.map((item, index) => {
       var _item$name;
 
-      if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+      if ((item == null ? void 0 : item.status) === 'uploading') {
         return /*#__PURE__*/React__default.createElement(UploadProgress, {
           key: index,
-          progress: item === null || item === void 0 ? void 0 : item.percent,
-          loading: item === null || item === void 0 ? void 0 : item.loading,
+          progress: item == null ? void 0 : item.percent,
+          loading: item == null ? void 0 : item.loading,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 581,
+            lineNumber: 595,
             columnNumber: 16
           }
         });
@@ -21442,7 +21549,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 584,
+          lineNumber: 598,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -21452,17 +21559,17 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 585,
+          lineNumber: 599,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default.createElement(IconStateFull, {
+      }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
         type: "close",
         onClick: () => handleRemove(item),
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 586,
-          columnNumber: 13
+          lineNumber: 600,
+          columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
         css: {
@@ -21474,7 +21581,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 587,
+          lineNumber: 601,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21484,22 +21591,22 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 595,
+          lineNumber: 609,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default.createElement(FileExtension, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 596,
+          lineNumber: 610,
           columnNumber: 17
         }
-      }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip, {
+      }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip, {
         label: item.name,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 597,
+          lineNumber: 611,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -21514,7 +21621,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 598,
+          lineNumber: 612,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -21527,7 +21634,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 613,
+          lineNumber: 627,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -21536,17 +21643,18 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 621,
+          lineNumber: 635,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
+        disabled: disabled,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 623,
+          lineNumber: 637,
           columnNumber: 13
         }
-      })), renderButtonReplace(index));
+      })), !disabled && renderButtonReplace(index));
     });
   };
 
@@ -21559,7 +21667,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 634,
+        lineNumber: 648,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21573,7 +21681,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 635,
+        lineNumber: 649,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -21599,7 +21707,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 636,
+        lineNumber: 650,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -21607,14 +21715,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 649,
+        lineNumber: 663,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 650,
+        lineNumber: 664,
         columnNumber: 11
       }
     }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21627,7 +21735,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 658,
+        lineNumber: 672,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -21643,7 +21751,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 659,
+        lineNumber: 673,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -21655,21 +21763,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 670,
+        lineNumber: 684,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 671,
+        lineNumber: 685,
         columnNumber: 11
       }
-    }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 673,
+        lineNumber: 687,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -21678,7 +21786,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 674,
+        lineNumber: 688,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -21686,7 +21794,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 675,
+        lineNumber: 689,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -21696,14 +21804,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 677,
+        lineNumber: 691,
         columnNumber: 17
       }
     }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 684,
+        lineNumber: 698,
         columnNumber: 19
       }
     }, error));
@@ -21714,7 +21822,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 691,
+        lineNumber: 705,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -21722,7 +21830,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 692,
+        lineNumber: 706,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -21730,7 +21838,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 693,
+        lineNumber: 707,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -21743,7 +21851,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 709,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -21754,7 +21862,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 698,
+        lineNumber: 712,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -21765,7 +21873,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 699,
+        lineNumber: 713,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -21779,14 +21887,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 700,
+        lineNumber: 714,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 703,
+        lineNumber: 717,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21798,7 +21906,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 704,
+        lineNumber: 718,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -21806,7 +21914,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 705,
+        lineNumber: 719,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
@@ -21818,7 +21926,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 706,
+        lineNumber: 720,
         columnNumber: 15
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -21826,7 +21934,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 712,
+        lineNumber: 726,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21835,7 +21943,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 713,
+        lineNumber: 727,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$2, {
@@ -21843,15 +21951,15 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 716,
+        lineNumber: 730,
         columnNumber: 15
       }
-    }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
+    }, `${completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
   }
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
-    gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 ? 0 : 3,
+    gap: (fileList == null ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
     wrap: "wrap",
     css: {
       userSelect: 'none'
@@ -21859,7 +21967,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 727,
+      lineNumber: 741,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -21868,7 +21976,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 730,
+      lineNumber: 744,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -22268,10 +22376,10 @@ function InputColorPicker(props) {
   const [isPopover, setIsPopover] = useState(false);
 
   function getColor() {
-    const color = props === null || props === void 0 ? void 0 : props.color;
+    const color = props == null ? void 0 : props.color;
 
     if (typeof color === 'string') {
-      return color === null || color === void 0 ? void 0 : color.toUpperCase();
+      return color == null ? void 0 : color.toUpperCase();
     }
 
     return `rgba(${color.r},${color.g},${color.b},${color.a})`;
@@ -25128,7 +25236,8 @@ const WrapperDiv = styled('div', {
         display: 'none'
       },
       '& .rsw_3G': {
-        display: 'block !important'
+        display: 'block !important',
+        zIndex: 'unset'
       }
     }
   }
@@ -25215,7 +25324,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 103,
+          lineNumber: 104,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Span, {
@@ -25225,7 +25334,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 117,
+          lineNumber: 118,
           columnNumber: 15
         }
       }), isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -25237,16 +25346,16 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 118,
+          lineNumber: 119,
           columnNumber: 30
         }
-      }), data[i - 1].title, ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
+      }), data[i - 1].title, ((_data = data[i - 1]) == null ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
         align: "center",
-        label: (_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.tooltipsContents,
+        label: (_data2 = data[i - 1]) == null ? void 0 : _data2.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 121,
+          lineNumber: 122,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -25258,7 +25367,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 122,
+          lineNumber: 123,
           columnNumber: 19
         }
       })))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -25275,7 +25384,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 128,
+          lineNumber: 129,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -25284,7 +25393,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 140,
+          lineNumber: 141,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -25300,7 +25409,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 142,
+          lineNumber: 143,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -25310,17 +25419,17 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 154,
+          lineNumber: 155,
           columnNumber: 15
         }
-      }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
+      }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
         align: "center",
         withClick: true,
-        label: (_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.tooltipsContents,
+        label: (_data4 = data[i - 1]) == null ? void 0 : _data4.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 156,
+          lineNumber: 157,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -25329,7 +25438,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 157,
+          lineNumber: 158,
           columnNumber: 19
         }
       }))));
@@ -25341,7 +25450,9 @@ const Navigation = props => {
       borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
       marginBottom: isMobile ? 65 : undefined,
       height: !isMobile ? height : undefined,
-      opacity: isHide ? 0 : undefined
+      opacity: isHide ? 0 : undefined,
+      position: !isMobile && 'sticky',
+      top: !isMobile ? 44 : 40
     }, cssNav, mobileHidden),
     gap: 5,
     justify: isMobile ? 'center' : undefined,
@@ -25349,7 +25460,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 165,
+      lineNumber: 166,
       columnNumber: 5
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -25361,7 +25472,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 179,
+      lineNumber: 182,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -25374,7 +25485,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 180,
+      lineNumber: 183,
       columnNumber: 11
     }
   }, stepItems)) : stepItems);
@@ -25399,13 +25510,13 @@ const Default = props => {
   const getIsComplete = currentStep => {
     var _state$isComplete;
 
-    return state === null || state === void 0 ? void 0 : (_state$isComplete = state.isComplete) === null || _state$isComplete === void 0 ? void 0 : _state$isComplete[currentStep - 1];
+    return state == null ? void 0 : (_state$isComplete = state.isComplete) == null ? void 0 : _state$isComplete[currentStep - 1];
   };
 
   const getTitleStep = currentStep => {
     var _props$navContents, _props$navContents2;
 
-    return props === null || props === void 0 ? void 0 : (_props$navContents = props.navContents) === null || _props$navContents === void 0 ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) === null || _props$navContents2 === void 0 ? void 0 : _props$navContents2.title;
+    return props == null ? void 0 : (_props$navContents = props.navContents) == null ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) == null ? void 0 : _props$navContents2.title;
   };
 
   const setState = value => {
@@ -25451,17 +25562,17 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 262,
+      lineNumber: 265,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
     value: {
       toogleVisibility,
-      isHide: state === null || state === void 0 ? void 0 : state.hide,
+      isHide: state == null ? void 0 : state.hide,
       setComplete,
       setState,
       state,
-      SW: state === null || state === void 0 ? void 0 : state.SW,
+      SW: state == null ? void 0 : state.SW,
       forbidClickNav: props.forbidClickNav,
       titles: props.titles,
       isMobile: props.isMobile,
@@ -25473,7 +25584,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 263,
+      lineNumber: 266,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -25485,7 +25596,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 285,
+        lineNumber: 288,
         columnNumber: 16
       }
     }),
@@ -25495,7 +25606,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 280,
+      lineNumber: 283,
       columnNumber: 9
     }
   }), props.children)));
@@ -25639,10 +25750,10 @@ function Content({
   function getDatasets(content, activeId, isCollapse) {
     const datasets = [];
 
-    for (let i = 0; i < (content === null || content === void 0 ? void 0 : content.length); i++) {
+    for (let i = 0; i < (content == null ? void 0 : content.length); i++) {
       var _content$i;
 
-      if (((_content$i = content[i]) === null || _content$i === void 0 ? void 0 : _content$i.id) === activeId) {
+      if (((_content$i = content[i]) == null ? void 0 : _content$i.id) === activeId) {
         datasets.unshift(content[i]);
       } else {
         datasets.push(content[i]);
@@ -25682,7 +25793,7 @@ function Content({
       lineNumber: 101,
       columnNumber: 7
     }
-  }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
+  }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
     return /*#__PURE__*/React__default.createElement(List, {
       key: index,
       __self: this,
@@ -25703,7 +25814,7 @@ function Content({
         paddingLeft: '16px !important',
         minHeight: 25
       },
-      "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
+      "data-to-scrollspy-id": item == null ? void 0 : item.id,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
@@ -25712,8 +25823,8 @@ function Content({
       }
     }, /*#__PURE__*/React__default.createElement(Title$1, {
       className: "link-title",
-      active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
-      href: `#${item === null || item === void 0 ? void 0 : item.id}`,
+      active: (item == null ? void 0 : item.id) === activeId,
+      href: `#${item == null ? void 0 : item.id}`,
       onClick: e => {
         e.preventDefault();
         const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
@@ -25742,7 +25853,7 @@ function Content({
         lineNumber: 119,
         columnNumber: 17
       }
-    }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
+    }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
   })));
 }
 
@@ -27217,6 +27328,33 @@ function InputMapPicker(props) {
   } = props;
   const modalTrigger = React__default.useRef(null);
   const [inputValue, setInputValue] = useState(placeholder);
+  useEffect(() => {
+    const handleGeoCode = e => {
+      const defaultApiKey = 'AIzaSyCDItrnct4DxaJ3CvUiCTidwY3YcGiDsu0';
+      const {
+        lat,
+        lng
+      } = e;
+      request.get(`https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=${mapsApiKey !== null && mapsApiKey !== void 0 ? mapsApiKey : defaultApiKey}`).end((err, res) => {
+        var _a;
+
+        if (err) {
+          console.error(err.message);
+        }
+
+        if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
+          const {
+            results
+          } = JSON.parse(res === null || res === void 0 ? void 0 : res.text);
+          setInputValue((_a = results === null || results === void 0 ? void 0 : results[0]) === null || _a === void 0 ? void 0 : _a.formatted_address);
+        }
+      });
+    };
+
+    if (value && value.lat && value.lng) {
+      handleGeoCode(value);
+    }
+  }, [mapsApiKey, onChange, value]);
 
   function handleClick() {
     var _a;
@@ -27320,11 +27458,7 @@ function InputMapPicker(props) {
 InputMapPicker.defaultProps = {
   modalTitle: 'Tambah Lokasi di Map',
   buttonLabel: 'Ubah Lokasi',
-  placeholder: 'Tandai lokasi dalam peta',
-  value: {
-    lat: -6.175392,
-    lng: 106.827153
-  }
+  placeholder: 'Tandai lokasi dalam peta'
 };
 
 var _jsxFileName = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\colors\\Colors.js";
@@ -28828,4 +28962,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-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, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, 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, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, 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, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+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, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, 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, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as 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, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };