@majoo-ui/react 1.48.1 → 1.48.4

package/index.umd.js

@@ -56,7 +56,7 @@
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
 
-  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,
@@ -66,7 +66,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$$,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -2350,9 +2350,9 @@
   };
   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: {
@@ -2526,7 +2526,7 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -2537,7 +2537,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Z,
+        fileName: _jsxFileName$_,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2593,7 +2593,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Z,
+        fileName: _jsxFileName$_,
         lineNumber: 232,
         columnNumber: 5
       }
@@ -2610,8 +2610,8 @@
   };
   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',
@@ -2640,7 +2640,7 @@
       css,
       contentHeader
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv$3, _extends({
       id: "retina-container",
@@ -2650,7 +2650,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$Z,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -2928,8 +2928,8 @@
     }), 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';
@@ -3094,7 +3094,7 @@
       captionOfAction,
       hrefOfAction
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const close = React__namespace.useCallback(() => {
@@ -3123,7 +3123,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 205,
         columnNumber: 5
       }
@@ -3135,7 +3135,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 216,
         columnNumber: 9
       }
@@ -3145,7 +3145,7 @@
       onClick: onClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 223,
         columnNumber: 11
       }
@@ -3153,7 +3153,7 @@
       direction: "column",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 224,
         columnNumber: 13
       }
@@ -3161,7 +3161,7 @@
       direction: "row",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 225,
         columnNumber: 15
       }
@@ -3169,7 +3169,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 226,
         columnNumber: 17
       }
@@ -3181,7 +3181,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 227,
         columnNumber: 17
       }
@@ -3189,7 +3189,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 235,
         columnNumber: 21
       }
@@ -3204,7 +3204,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 236,
         columnNumber: 23
       }
@@ -3213,7 +3213,7 @@
       color: "secondary",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 250,
         columnNumber: 19
       }
@@ -3228,7 +3228,7 @@
       hasTitle: !!title,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 254,
         columnNumber: 17
       }
@@ -3237,7 +3237,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 264,
         columnNumber: 19
       }
@@ -3252,7 +3252,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$Y,
         lineNumber: 268,
         columnNumber: 17
       }
@@ -3276,7 +3276,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.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: {
@@ -3318,7 +3318,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3326,7 +3326,7 @@
       position: position,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 44,
         columnNumber: 7
       }
@@ -3337,7 +3337,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$W,
+          fileName: _jsxFileName$X,
           lineNumber: 46,
           columnNumber: 18
         }
@@ -3345,8 +3345,8 @@
     })));
   };
 
-  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 = ({
@@ -3358,7 +3358,7 @@
       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;
@@ -3388,7 +3388,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$W,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3397,7 +3397,7 @@
       position: TOP_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$W,
         lineNumber: 45,
         columnNumber: 7
       }
@@ -3406,7 +3406,7 @@
       position: TOP_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$W,
         lineNumber: 49,
         columnNumber: 7
       }
@@ -3415,7 +3415,7 @@
       position: BOTTOM_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$W,
         lineNumber: 53,
         columnNumber: 7
       }
@@ -3424,14 +3424,14 @@
       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,
@@ -3444,14 +3444,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$V,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$V,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -3465,8 +3465,8 @@
     disableGlobalStyle: PropTypes__default["default"].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__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
     maxWidth: '100%',
@@ -3548,7 +3548,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 91,
       columnNumber: 3
     }
@@ -3570,7 +3570,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 108,
       columnNumber: 3
     }
@@ -3593,7 +3593,7 @@
   }) => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 125,
       columnNumber: 3
     }
@@ -3605,7 +3605,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 127,
       columnNumber: 7
     }
@@ -3632,7 +3632,7 @@
   const BannerClose = () => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 154,
       columnNumber: 3
     }
@@ -3640,11 +3640,11 @@
     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
     }
@@ -3653,7 +3653,7 @@
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 163,
       columnNumber: 9
     }
@@ -3663,7 +3663,7 @@
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 171,
         columnNumber: 5
       }
@@ -3673,7 +3673,7 @@
       align: "end",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 172,
         columnNumber: 7
       }
@@ -3686,21 +3686,21 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 173,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 181,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 182,
         columnNumber: 33
       }
@@ -3709,7 +3709,7 @@
       variant: props.variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 185,
         columnNumber: 11
       }
@@ -3717,12 +3717,12 @@
       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
       }
@@ -3731,7 +3731,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 198,
         columnNumber: 9
       }
@@ -3750,7 +3750,7 @@
       children,
       bannerBlock
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
     return /*#__PURE__*/React__namespace.createElement(StyledBanner, _extends({
       variant: variant,
@@ -3760,7 +3760,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 206,
         columnNumber: 5
       }
@@ -3777,7 +3777,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 208,
         columnNumber: 9
       }
@@ -3788,7 +3788,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 215,
         columnNumber: 11
       }
@@ -3802,7 +3802,7 @@
       onRemove: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$U,
         lineNumber: 218,
         columnNumber: 9
       }
@@ -4115,10 +4115,10 @@
     }), 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',
@@ -4253,7 +4253,7 @@
       textColor,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
     return /*#__PURE__*/React__default["default"].createElement(CardComponent, {
       className: className,
@@ -4266,23 +4266,23 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 103,
+        fileName: _jsxFileName$T,
+        lineNumber: 102,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(CardLineColor, {
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 114,
+        fileName: _jsxFileName$T,
+        lineNumber: 113,
         columnNumber: 7
       }
     }), title !== '' ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon !== undefined ? /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 118,
+        fileName: _jsxFileName$T,
+        lineNumber: 117,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledIcon$1, {
@@ -4290,15 +4290,15 @@
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 119,
+        fileName: _jsxFileName$T,
+        lineNumber: 118,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
-        lineNumber: 125,
+        fileName: _jsxFileName$T,
+        lineNumber: 124,
         columnNumber: 13
       }
     }, title)) : null, children);
@@ -4319,12 +4319,12 @@
     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': {
@@ -4370,7 +4370,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$S,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -4381,20 +4381,20 @@
     let {
       children
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$S,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$S,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -4597,8 +4597,8 @@
   };
   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__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -4642,7 +4642,7 @@
       onClick,
       css
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
@@ -4651,7 +4651,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4661,7 +4661,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4669,21 +4669,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 48,
         columnNumber: 7
       }
     }, children !== undefined ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children) : /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$R,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4700,8 +4700,8 @@
     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',
@@ -4750,7 +4750,7 @@
       cssFallback,
       rounded
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
     if (src || fallback) {
       return /*#__PURE__*/React__default["default"].createElement(StyledImage, _extends({
@@ -4767,7 +4767,7 @@
       }, props, {
         __self: this,
         __source: {
-          fileName: _jsxFileName$P,
+          fileName: _jsxFileName$Q,
           lineNumber: 59,
           columnNumber: 7
         }
@@ -4783,14 +4783,14 @@
         }, cssFallback),
         __self: this,
         __source: {
-          fileName: _jsxFileName$P,
+          fileName: _jsxFileName$Q,
           lineNumber: 73,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(TextFallback, {
         __self: this,
         __source: {
-          fileName: _jsxFileName$P,
+          fileName: _jsxFileName$Q,
           lineNumber: 74,
           columnNumber: 9
         }
@@ -4858,8 +4858,8 @@
     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,
@@ -4967,14 +4967,14 @@
       side,
       align
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
     const [open, setOpen] = React.useState(false);
     return /*#__PURE__*/React__default["default"].createElement(TooltipBase, _extends({}, rest, {
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4982,7 +4982,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4990,7 +4990,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -5001,7 +5001,7 @@
       css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -5010,7 +5010,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$P,
         lineNumber: 100,
         columnNumber: 9
       }
@@ -5032,15 +5032,15 @@
     children: /*#__PURE__*/React__default["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 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -5158,7 +5158,7 @@
       rounded,
       width
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledProgress$1, _extends({
       className: className,
@@ -5174,7 +5174,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -5187,7 +5187,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$N,
+        fileName: _jsxFileName$O,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -5211,7 +5211,7 @@
   };
 
   const formLabelStyle = {
-    '& .form-label': {
+    '& > .form-label': {
       alignItems: 'start !important',
       '& > div': {
         width: 175
@@ -5232,7 +5232,10 @@
       }
     }
   };
-  const FormGroup = styled(Flex$1, {
+  const FormGroup = styled('div', {
+    display: 'grid',
+    gridTemplateColumns: '1fr',
+    rowGap: '$spacing-03',
     variants: {
       responsive: {
         input: Object.assign({
@@ -5287,7 +5290,7 @@
             '& *:nth-child(3)': {
               gridColumn: 'unset'
             },
-            '& .retina-error': {
+            '& > *:nth-child(n+4)': {
               gridColumn: '2/3'
             }
           }
@@ -5296,17 +5299,9 @@
     }
   });
   FormGroup.displayName = 'FormGroup';
-  FormGroup.propTypes = {
-    gap: PropTypes__default["default"].number,
-    direction: PropTypes__default["default"].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__namespace.Root, Text$1, {
     display: 'inline-block',
     fontSize: '$label',
@@ -5338,14 +5333,14 @@
       maxCount,
       labelCss
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "between",
       className: "form-label",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 36,
         columnNumber: 5
       }
@@ -5355,7 +5350,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 37,
         columnNumber: 7
       }
@@ -5365,7 +5360,7 @@
       css: labelCss,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 38,
         columnNumber: 9
       }
@@ -5380,7 +5375,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 42,
         columnNumber: 11
       }
@@ -5388,14 +5383,14 @@
       label: tooltipLabel,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 56,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledHelpIcon, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 57,
         columnNumber: 13
       }
@@ -5404,7 +5399,7 @@
       color: "disable",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$M,
+        fileName: _jsxFileName$N,
         lineNumber: 62,
         columnNumber: 9
       }
@@ -5420,8 +5415,8 @@
   };
   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',
@@ -5439,7 +5434,7 @@
       children,
       error
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
       error: error,
@@ -5448,7 +5443,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$L,
+        fileName: _jsxFileName$M,
         lineNumber: 19,
         columnNumber: 3
       }
@@ -5460,7 +5455,7 @@
   };
   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__*/React.createContext();
 
   const CheckboxGroup = ({
@@ -5505,7 +5500,7 @@
       value: values,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$K,
+        fileName: _jsxFileName$L,
         lineNumber: 35,
         columnNumber: 5
       }
@@ -5523,7 +5518,7 @@
   };
   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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5541,7 +5536,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$K,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5553,7 +5548,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$J,
+      fileName: _jsxFileName$K,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -5565,13 +5560,13 @@
     },
     __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__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -5589,7 +5584,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 4,
       columnNumber: 3
     }
@@ -5601,7 +5596,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$I,
+      fileName: _jsxFileName$J,
       lineNumber: 19,
       columnNumber: 5
     }
@@ -5613,14 +5608,14 @@
     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__namespace.Indicator, {
     alignItems: 'center',
     display: 'flex',
@@ -5679,13 +5674,13 @@
       index,
       value
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
     const context = React.useContext(CheckboxContext);
     const [isChecked, setChecked] = React.useState(false);
     React.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["default"].createElement(StyledCheckbox, _extends({
       id: id,
@@ -5702,28 +5697,28 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 64,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 77,
         columnNumber: 7
       }
     }, indeterminate ? /*#__PURE__*/React__default["default"].createElement(SvgMinusOutline, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 77,
         columnNumber: 41
       }
     }) : /*#__PURE__*/React__default["default"].createElement(CheckOutline$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 77,
         columnNumber: 60
       }
@@ -5737,14 +5732,14 @@
       gap: 4,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 84,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 85,
         columnNumber: 7
       }
@@ -5760,14 +5755,14 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 86,
         columnNumber: 7
       }
     }, props.label)) : /*#__PURE__*/React__default["default"].createElement(Checkbox, _extends({}, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$H,
+        fileName: _jsxFileName$I,
         lineNumber: 101,
         columnNumber: 5
       }
@@ -5785,8 +5780,8 @@
   };
   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%',
@@ -5902,7 +5897,7 @@
       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');
@@ -5926,7 +5921,7 @@
       isElement: isElement,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$G,
+        fileName: _jsxFileName$H,
         lineNumber: 146,
         columnNumber: 10
       }
@@ -6072,8 +6067,8 @@
     children: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].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',
@@ -6085,7 +6080,7 @@
       border: '1px solid $colors$gray300'
     }
   };
-  const StyledInput = styled('input', {
+  const StyledInput$1 = styled('input', {
     // Reset
     appearance: 'none',
     boxSizing: 'border-box',
@@ -6215,9 +6210,9 @@
       disabled,
       readOnly
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(StyledInput$1, _extends({
       ref: ref,
       disabled: disabled,
       isDisabled: disabled,
@@ -6226,7 +6221,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$F,
+        fileName: _jsxFileName$G,
         lineNumber: 151,
         columnNumber: 3
       }
@@ -6234,9 +6229,9 @@
   });
   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: {
@@ -6256,7 +6251,7 @@
       disabled,
       readOnly
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTextArea, _extends({
       ref: ref,
@@ -6267,7 +6262,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$E,
+        fileName: _jsxFileName$F,
         lineNumber: 22,
         columnNumber: 3
       }
@@ -6280,25 +6275,25 @@
 
   const InputRadioContext = /*#__PURE__*/React__default["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__namespace.Root, Flex$1);
   function InputRadioGroup(props) {
-    return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
+    return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Provider, {
       value: props,
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 13,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(RadioGroup, _extends({}, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$D,
+        fileName: _jsxFileName$E,
         lineNumber: 14,
         columnNumber: 9
       }
-    }), React__default["default"].Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
+    }), React__default["default"].Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default["default"].cloneElement(child, {
       style: Object.assign({}, child.props.style, {
         opacity: 1
       })
@@ -6312,8 +6307,8 @@
   };
   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',
@@ -6429,7 +6424,7 @@
       inputType,
       inputProps
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
     function renderInputType(type, checked) {
       switch (type) {
@@ -6438,7 +6433,7 @@
             disabled: disabled || checked !== props.value,
             __self: this,
             __source: {
-              fileName: _jsxFileName$C,
+              fileName: _jsxFileName$D,
               lineNumber: 124,
               columnNumber: 16
             }
@@ -6449,7 +6444,7 @@
             disabled: disabled || checked !== props.value,
             __self: this,
             __source: {
-              fileName: _jsxFileName$C,
+              fileName: _jsxFileName$D,
               lineNumber: 127,
               columnNumber: 16
             }
@@ -6469,7 +6464,7 @@
             },
             __self: this,
             __source: {
-              fileName: _jsxFileName$C,
+              fileName: _jsxFileName$D,
               lineNumber: 131,
               columnNumber: 11
             }
@@ -6480,7 +6475,7 @@
     return /*#__PURE__*/React__default["default"].createElement(InputRadioContext.Consumer, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 150,
         columnNumber: 5
       }
@@ -6489,7 +6484,7 @@
       value,
       outlined
     }) => {
-      const checked = value !== null && value !== void 0 ? value : defaultValue;
+      const checked = value != null ? value : defaultValue;
       return /*#__PURE__*/React__default["default"].createElement(Container$6, {
         align: "center",
         gap: 4,
@@ -6499,7 +6494,7 @@
         css: css,
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$C,
+          fileName: _jsxFileName$D,
           lineNumber: 155,
           columnNumber: 11
         }
@@ -6509,14 +6504,14 @@
       }, props, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$C,
+          fileName: _jsxFileName$D,
           lineNumber: 163,
           columnNumber: 13
         }
       }), /*#__PURE__*/React__default["default"].createElement(StyledIndicator$1, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$C,
+          fileName: _jsxFileName$D,
           lineNumber: 164,
           columnNumber: 15
         }
@@ -6563,7 +6558,9 @@
   };
   InputRightElement.name = 'InputRightElement';
 
-  const InputNumber = styled(NumberFormat__default["default"], {
+  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__default["default"], {
     // Reset
     appearance: 'none',
     boxSizing: 'border-box',
@@ -6626,7 +6623,7 @@
       }
     }],
     variants: {
-      readOnly: {
+      isReadOnly: {
         true: {
           backgroundColor: '$formDisable'
         }
@@ -6692,6 +6689,35 @@
       size: 'lg'
     }
   });
+  const InputNumber = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
+    let {
+      placeholder,
+      value,
+      size,
+      isInvalid,
+      readOnly,
+      disabled
+    } = _ref,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+
+    return /*#__PURE__*/React__default["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__default["default"].string,
     value: PropTypes__default["default"].string,
@@ -7497,7 +7523,7 @@
           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)) {
@@ -7563,7 +7589,7 @@
         lineNumber: 173,
         columnNumber: 9
       }
-    })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
+    })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default["default"].createElement(FormHelper, {
       color: "red",
       __self: this,
       __source: {
@@ -8301,11 +8327,13 @@
   });
   var 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'
+    }
   });
   var StyledDiv$2 = styled('div', {
     color: '$textDisable',
@@ -10494,8 +10522,8 @@
       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)
     }), {
@@ -11489,7 +11517,7 @@
         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) {
@@ -11600,7 +11628,7 @@
     borderRadius: '$round',
     size: '24px',
     padding: '$spacing-01',
-    display: 'inline-flex',
+    display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     border: 'none',
@@ -12931,7 +12959,7 @@
             if (!onOpenAutoFocus) {
               e.preventDefault();
             } else {
-              onOpenAutoFocus();
+              onOpenAutoFocus(e);
             }
           }
         }, {
@@ -13434,27 +13462,6 @@
   var AccordionItem = StyledItem$1;
   var AccordionContent = AccordionPrimitive__namespace.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] = React.useState(false);
     React.useEffect(() => {
@@ -13508,6 +13515,27 @@
     }), 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);
+
   var DateNumber = styled('div', {
     display: 'inline-flex',
     alignItems: 'center',
@@ -13649,7 +13677,7 @@
   });
   var 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)',
@@ -14345,6 +14373,7 @@
   });
   var TitleButton = styled(Heading, {
     padding: '2px $spacing-04',
+    color: '$textPrimary',
     '&:hover': {
       backgroundColor: '$bgSuccess',
       color: '$textGreen'
@@ -14578,7 +14607,8 @@
             return jsxRuntime.jsx(DateNumber, __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);
@@ -14710,7 +14740,10 @@
             }
           }, {
             children: [jsxRuntime.jsx(Text$1, __assign({
-              variant: "contentButton"
+              variant: "contentButton",
+              css: {
+                color: '$textPrimary'
+              }
             }, {
               children: "Pilih Rentang Waktu"
             }), void 0), expandAdvanceView ? jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0)]
@@ -15700,6 +15733,8 @@
     }
   }
 
+  moment__default["default"].locale('id');
+
   var getInputPickerValue = function getInputPickerValue(type, date) {
     if (!date) return '';
 
@@ -15708,7 +15743,7 @@
         dateStyle: 'long'
       }).format(date);
     } else {
-      return "".concat(toDateFormat(date[0], 'medium'), " - ").concat(toDateFormat(date[1], 'medium'));
+      return "".concat(moment__default["default"](date[0]).format('ll'), " - ").concat(moment__default["default"](date[1]).format('ll'));
     }
   };
 
@@ -16106,6 +16141,11 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(Text$1, {
       variant: "caption",
+      css: {
+        fontSize: 12,
+        fontWeight: 400,
+        color: '$textPrimary'
+      },
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
@@ -16136,7 +16176,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$i,
-        lineNumber: 170,
+        lineNumber: 172,
         columnNumber: 9
       }
     })));
@@ -16296,7 +16336,7 @@
 
     const totalPages = Math.ceil(totalData / limit);
     const isMobile = useMediaQuery('(max-width: 700px)');
-    return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
+    return !hideDataInfo || totalPages > 1 ? /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
       direction: isMobile ? 'columnReverse' : 'row',
       align: "center",
       justify: "between",
@@ -16337,7 +16377,14 @@
         lineNumber: 33,
         columnNumber: 26
       }
-    }));
+    })) : /*#__PURE__*/React__default["default"].createElement(Box, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$g,
+        lineNumber: 36,
+        columnNumber: 5
+      }
+    });
   }
 
   Pagination.propTypes = {
@@ -16398,7 +16445,8 @@
         isLoading = _a.isLoading,
         rowGroup = _a.rowGroup;
         _a.hiddenColumns;
-        var css = _a.css;
+        var css = _a.css,
+        customRowsStyle = _a.customRowsStyle;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -16429,6 +16477,7 @@
                     unsortable: column.unsortable
                   }, {
                     children: jsxRuntime.jsx(TableHeadCellContent, __assign({
+                      isMobile: true,
                       heading: "headerTable",
                       color: "secondary"
                     }, {
@@ -16445,8 +16494,22 @@
             var actionCells = row.allCells.filter(function (cell) {
               return cell.column.id === 'menu' || cell.column.isAction;
             });
+            var customStyle = {};
+
+            if (customRowsStyle && customRowsStyle(row.values).length) {
+              for (var 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 jsxRuntime.jsxs(React__default["default"].Fragment, {
-              children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$3, __assign({}, row.getRowProps(), {
+              children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$3, __assign({
+                css: customStyle
+              }, row.getRowProps(), {
                 key: "".concat(row.id, "-group_header")
               }), jsxRuntime.jsx(TableCell$3, __assign({
                 colSpan: 100
@@ -16456,7 +16519,9 @@
                 }, {
                   children: row.cells[0].render('Cell')
                 }), void 0)
-              }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({}, row.getRowProps(), {
+              }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({
+                css: customStyle
+              }, row.getRowProps(), {
                 children: row.cells.filter(function (cell) {
                   return cell.column.isMobileHeader || cell.column.id === 'selection';
                 }).map(function (cell) {
@@ -16505,7 +16570,7 @@
                           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')]
                       }), "".concat(cell.column.id, "-").concat(row.id));
                     })
@@ -16582,7 +16647,7 @@
   var TableHeaderCellContainer = styled(Flex$1, {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    gap: '$spacing-03',
     userSelect: 'none',
     size: '100%',
     minWidth: 0,
@@ -16652,14 +16717,15 @@
       },
       isMobile: {
         true: {
-          padding: '0'
+          padding: '0',
+          justifyContent: 'space-between',
+          gap: 0
         }
       }
     }
   });
   var TableHeadCellContent = styled(Heading, {
     userSelect: 'none',
-    width: '100%',
     textAlign: 'start',
     position: 'relative',
     '& > *': {
@@ -16667,6 +16733,13 @@
     },
     '& > span:last-child': {
       paddingLeft: '$spacing-03'
+    },
+    variants: {
+      isMobile: {
+        true: {
+          width: '100%'
+        }
+      }
     }
   });
   var TableBody$2 = styled('tbody', {});
@@ -16806,7 +16879,8 @@
         selectedIds = _a.selectedIds,
         rowGroup = _a.rowGroup,
         hiddenColumns = _a.hiddenColumns,
-        columnOrder = _a.columnOrder;
+        columnOrder = _a.columnOrder,
+        customRowsStyle = _a.customRowsStyle;
 
     var _o = React.useState(rowLimit),
         limit = _o[0],
@@ -17068,8 +17142,22 @@
                 var notNullHeaderColumns = visibleColumns.filter(function (column) {
                   return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
                 });
+                var customStyle = {};
+
+                if (customRowsStyle && customRowsStyle(row.values).length) {
+                  for (var i_1 = 0; i_1 < customRowsStyle(row.values).length; i_1++) {
+                    console.log(customRowsStyle(row.values)[i_1]);
+
+                    if (customRowsStyle(row.values)[i_1].predicate) {
+                      customStyle = customRowsStyle(row.values)[i_1].css;
+                    }
+                  }
+                }
+
                 return jsxRuntime.jsxs(React__namespace.Fragment, {
-                  children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$2, __assign({}, row.getRowProps(), {
+                  children: [sortBy.length <= 0 && row.original['isTopChild'] && /*#__PURE__*/React.createElement(TableRow$2, __assign({
+                    css: customStyle
+                  }, row.getRowProps(), {
                     key: "".concat(row.id, "-group_header")
                   }), jsxRuntime.jsx(TableCell$2, __assign({
                     colSpan: 100,
@@ -17083,7 +17171,9 @@
                     }, {
                       children: row.cells[0].render('Cell')
                     }), void 0)
-                  }), void 0)), jsxRuntime.jsx(TableRow$2, __assign({}, row.getRowProps(), {
+                  }), void 0)), jsxRuntime.jsx(TableRow$2, __assign({
+                    css: customStyle
+                  }, row.getRowProps(), {
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
@@ -17169,7 +17259,8 @@
         isLoading: isLoading,
         rowGroup: rowGroup,
         hiddenColumns: hiddenColumns,
-        css: css
+        css: css,
+        customRowsStyle: customRowsStyle
       }, void 0)]
     }), void 0);
   } //Dummy component for mdx docs purpose only
@@ -18294,7 +18385,7 @@
             if (!onOpenAutoFocus) {
               e.preventDefault();
             } else {
-              onOpenAutoFocus();
+              onOpenAutoFocus(e);
             }
           }
         }, {
@@ -18459,7 +18550,7 @@
     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`
@@ -18501,7 +18592,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 75,
+        lineNumber: 74,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledOverlay, {
@@ -18511,14 +18602,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 76,
+        lineNumber: 75,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledContent$1, _extends({}, props, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 77,
+        lineNumber: 76,
         columnNumber: 7
       }
     }), children));
@@ -18532,14 +18623,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 86,
+          lineNumber: 85,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(TemplateAlertFunction, _extends({}, props, {
         __self: this,
         __source: {
           fileName: _jsxFileName$b,
-          lineNumber: 87,
+          lineNumber: 86,
           columnNumber: 9
         }
       }))), document.getElementById('a-dialog'));
@@ -18583,7 +18674,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 128,
+        lineNumber: 127,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -18595,20 +18686,20 @@
         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["default"].createElement(StyledTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 140,
+        lineNumber: 139,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18616,7 +18707,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 141,
+        lineNumber: 140,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18624,7 +18715,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 142,
+        lineNumber: 141,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18635,7 +18726,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 143,
+        lineNumber: 142,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18643,7 +18734,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 144,
+        lineNumber: 143,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18651,14 +18742,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 148,
+        lineNumber: 147,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 149,
+        lineNumber: 148,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -18669,7 +18760,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 150,
+        lineNumber: 149,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18681,7 +18772,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 152,
+        lineNumber: 153,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18689,7 +18780,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 153,
+        lineNumber: 154,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18703,7 +18794,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 154,
+        lineNumber: 155,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18711,19 +18802,19 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 156,
+        lineNumber: 157,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18731,7 +18822,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 169,
+        lineNumber: 170,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18742,12 +18833,12 @@
         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["default"].createElement(ADialog__namespace.Action, {
@@ -18755,7 +18846,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 181,
+        lineNumber: 182,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18765,12 +18856,12 @@
       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')))))));
@@ -18795,7 +18886,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 213,
+        lineNumber: 214,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["default"].createElement(Content$1, _extends({}, props, {
@@ -18804,19 +18895,19 @@
         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["default"].createElement(StyledTitle, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 221,
+        lineNumber: 223,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Heading, {
@@ -18824,7 +18915,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 222,
+        lineNumber: 224,
         columnNumber: 11
       }
     }, props.title), /*#__PURE__*/React__default["default"].createElement(AlertDialogCancel, {
@@ -18832,7 +18923,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 223,
+        lineNumber: 225,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18843,7 +18934,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 224,
+        lineNumber: 226,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CloseOutline, {
@@ -18851,7 +18942,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 225,
+        lineNumber: 227,
         columnNumber: 15
       }
     })))), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18859,14 +18950,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 229,
+        lineNumber: 231,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 230,
+        lineNumber: 232,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -18876,7 +18967,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 231,
+        lineNumber: 233,
         columnNumber: 11
       }
     }, props.description)), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18888,7 +18979,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 233,
+        lineNumber: 235,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -18896,7 +18987,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 234,
+        lineNumber: 236,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default["default"].createElement(Flex, {
@@ -18910,7 +19001,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 235,
+        lineNumber: 237,
         columnNumber: 11
       }
     }, props.singleButton ? /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Action, {
@@ -18918,7 +19009,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 237,
+        lineNumber: 239,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18928,12 +19019,12 @@
       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["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(ADialog__namespace.Cancel, {
@@ -18941,7 +19032,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 251,
+        lineNumber: 253,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18952,12 +19043,12 @@
         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["default"].createElement(ADialog__namespace.Action, {
@@ -18965,7 +19056,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$b,
-        lineNumber: 263,
+        lineNumber: 265,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(Button$2, _extends({
@@ -18975,12 +19066,12 @@
       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')))))));
@@ -21402,13 +21493,27 @@
       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() {
@@ -21473,7 +21578,7 @@
                 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;
@@ -21495,7 +21600,7 @@
               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;
 
@@ -21516,7 +21621,7 @@
               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;
@@ -21526,7 +21631,7 @@
             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) {
@@ -21553,9 +21658,9 @@
     }
 
     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]);
@@ -21623,22 +21728,22 @@
     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__default["default"].get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
+        request__default["default"].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);
@@ -21691,7 +21796,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 543,
+          lineNumber: 557,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -21701,23 +21806,23 @@
         __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["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
             }
           });
@@ -21729,7 +21834,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 557,
+            lineNumber: 571,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21739,17 +21844,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 558,
+            lineNumber: 572,
             columnNumber: 11
           }
-        }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+        }, !disabled && /*#__PURE__*/React__default["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["default"].createElement(Box, {
           css: {
@@ -21761,7 +21866,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 560,
+            lineNumber: 574,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21770,34 +21875,36 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 568,
+            lineNumber: 582,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["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["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
             }
           });
@@ -21808,7 +21915,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 584,
+            lineNumber: 598,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21818,17 +21925,17 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 585,
+            lineNumber: 599,
             columnNumber: 11
           }
-        }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
+        }, !disabled && /*#__PURE__*/React__default["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["default"].createElement(Box, {
           css: {
@@ -21840,7 +21947,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 587,
+            lineNumber: 601,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21850,22 +21957,22 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 595,
+            lineNumber: 609,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["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["default"].createElement(Tooltip, {
+        }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip, {
           label: item.name,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 597,
+            lineNumber: 611,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21880,7 +21987,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 598,
+            lineNumber: 612,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -21893,7 +22000,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 613,
+            lineNumber: 627,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -21902,17 +22009,18 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 621,
+            lineNumber: 635,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
+          disabled: disabled,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 623,
+            lineNumber: 637,
             columnNumber: 13
           }
-        })), renderButtonReplace(index));
+        })), !disabled && renderButtonReplace(index));
       });
     };
 
@@ -21925,7 +22033,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 634,
+          lineNumber: 648,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -21939,7 +22047,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 635,
+          lineNumber: 649,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -21965,7 +22073,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 636,
+          lineNumber: 650,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -21973,14 +22081,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 649,
+          lineNumber: 663,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 650,
+          lineNumber: 664,
           columnNumber: 11
         }
       }, `${isFile ? 'Berkas' : 'Gambar'} sedang diunggah`)));
@@ -21993,7 +22101,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 658,
+          lineNumber: 672,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -22009,7 +22117,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 659,
+          lineNumber: 673,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -22021,21 +22129,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 670,
+          lineNumber: 684,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 671,
+          lineNumber: 685,
           columnNumber: 11
         }
-      }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
+      }, children != null ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 673,
+          lineNumber: 687,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -22044,7 +22152,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 674,
+          lineNumber: 688,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -22052,7 +22160,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 675,
+          lineNumber: 689,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22062,14 +22170,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 677,
+          lineNumber: 691,
           columnNumber: 17
         }
       }, `Pilih atau letakkan ${isFile ? 'berkas' : 'gambar'} di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 684,
+          lineNumber: 698,
           columnNumber: 19
         }
       }, error));
@@ -22080,7 +22188,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 691,
+          lineNumber: 705,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -22088,7 +22196,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 692,
+          lineNumber: 706,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -22096,7 +22204,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 693,
+          lineNumber: 707,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -22109,7 +22217,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 709,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -22120,7 +22228,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 698,
+          lineNumber: 712,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -22131,7 +22239,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 699,
+          lineNumber: 713,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22145,14 +22253,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 700,
+          lineNumber: 714,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 703,
+          lineNumber: 717,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22164,7 +22272,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 704,
+          lineNumber: 718,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Tooltip, {
@@ -22172,7 +22280,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 705,
+          lineNumber: 719,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
@@ -22184,7 +22292,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 706,
+          lineNumber: 720,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22192,7 +22300,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 712,
+          lineNumber: 726,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -22201,7 +22309,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 713,
+          lineNumber: 727,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$2, {
@@ -22209,15 +22317,15 @@
         __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["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'
@@ -22225,7 +22333,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 727,
+        lineNumber: 741,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -22234,7 +22342,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 730,
+        lineNumber: 744,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -22648,10 +22756,10 @@
     const [isPopover, setIsPopover] = React.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})`;
@@ -25508,7 +25616,8 @@
           display: 'none'
         },
         '& .rsw_3G': {
-          display: 'block !important'
+          display: 'block !important',
+          zIndex: 'unset'
         }
       }
     }
@@ -25595,7 +25704,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 103,
+            lineNumber: 104,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Span, {
@@ -25605,7 +25714,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 117,
+            lineNumber: 118,
             columnNumber: 15
           }
         }), isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -25617,16 +25726,16 @@
           __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["default"].createElement(Tooltip, {
+        }), data[i - 1].title, ((_data = data[i - 1]) == null ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default["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["default"].createElement(StyledCircleInfoOutline, {
@@ -25638,7 +25747,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 122,
+            lineNumber: 123,
             columnNumber: 19
           }
         })))) : stepItems.push( /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -25655,7 +25764,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 128,
+            lineNumber: 129,
             columnNumber: 13
           }
         }, isComplete && /*#__PURE__*/React__default["default"].createElement(StyledCheckFiled, {
@@ -25664,7 +25773,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 140,
+            lineNumber: 141,
             columnNumber: 30
           }
         }), !isComplete && /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -25680,7 +25789,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 142,
+            lineNumber: 143,
             columnNumber: 17
           }
         }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -25690,17 +25799,17 @@
           __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["default"].createElement(Tooltip, {
+        }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default["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["default"].createElement(StyledCircleInfoOutline, {
@@ -25709,7 +25818,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$4,
-            lineNumber: 157,
+            lineNumber: 158,
             columnNumber: 19
           }
         }))));
@@ -25721,7 +25830,9 @@
         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,
@@ -25729,7 +25840,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 165,
+        lineNumber: 166,
         columnNumber: 5
       }
     }, isMobile ? /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
@@ -25741,7 +25852,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 179,
+        lineNumber: 182,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -25754,7 +25865,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 180,
+        lineNumber: 183,
         columnNumber: 11
       }
     }, stepItems)) : stepItems);
@@ -25779,13 +25890,13 @@
     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 => {
@@ -25831,17 +25942,17 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 262,
+        lineNumber: 265,
         columnNumber: 5
       }
     }, /*#__PURE__*/React__default["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,
@@ -25853,7 +25964,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 263,
+        lineNumber: 266,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default["default"].createElement(Stepper, _extends({}, props, {
@@ -25865,7 +25976,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 285,
+          lineNumber: 288,
           columnNumber: 16
         }
       }),
@@ -25875,7 +25986,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 280,
+        lineNumber: 283,
         columnNumber: 9
       }
     }), props.children)));
@@ -26019,10 +26130,10 @@
     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]);
@@ -26062,7 +26173,7 @@
         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["default"].createElement(List, {
         key: index,
         __self: this,
@@ -26083,7 +26194,7 @@
           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,
@@ -26092,8 +26203,8 @@
         }
       }, /*#__PURE__*/React__default["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]);
@@ -26122,7 +26233,7 @@
           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));
     })));
   }
 
@@ -27626,6 +27737,30 @@
         inputValue = _a[0],
         setInputValue = _a[1];
 
+    React.useEffect(function () {
+      var handleGeoCode = function handleGeoCode(e) {
+        var defaultApiKey = 'AIzaSyCDItrnct4DxaJ3CvUiCTidwY3YcGiDsu0';
+        var lat = e.lat,
+            lng = e.lng;
+        request__default["default"].get("https://maps.googleapis.com/maps/api/geocode/json?latlng=".concat(lat, ",").concat(lng, "&key=").concat(mapsApiKey !== null && mapsApiKey !== void 0 ? mapsApiKey : defaultApiKey)).end(function (err, res) {
+          var _a;
+
+          if (err) {
+            console.error(err.message);
+          }
+
+          if (res && (res === null || res === void 0 ? void 0 : res.ok)) {
+            var results = JSON.parse(res === null || res === void 0 ? void 0 : res.text).results;
+            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;
 
@@ -27728,11 +27863,7 @@
   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";
@@ -29402,7 +29533,7 @@
   exports.StepWizardContext = StepWizardContext;
   exports.StyledBox = StyledBox;
   exports.StyledDropdown = StyledDropdown;
-  exports.StyledInput = StyledInput;
+  exports.StyledInput = StyledInput$1;
   exports.StyledSpan = StyledSpan;
   exports.StyledTitle = StyledTitle$2;
   exports.THIS_MONTH = THIS_MONTH;