@majoo-ui/react 1.48.3 → 1.48.4

package/index.esm.js

@@ -42,7 +42,7 @@ import request from 'superagent';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import { useSticky } from 'react-table-sticky';
 
-var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+var _jsxFileName$$ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
 function ThemeProvider({
   theme,
@@ -52,7 +52,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$_,
+      fileName: _jsxFileName$$,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -2233,9 +2233,9 @@ Flex$1.defaultProps = {
 };
 Flex$1.displayName = 'Flex';
 
-const _excluded$y = ["children"],
+const _excluded$z = ["children"],
       _excluded2$1 = ["children"];
-var _jsxFileName$Z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+var _jsxFileName$_ = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
 const GridComponent = styled('div', {
   display: 'grid',
   variants: {
@@ -2409,7 +2409,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2420,7 +2420,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2476,7 +2476,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$_,
       lineNumber: 232,
       columnNumber: 5
     }
@@ -2493,8 +2493,8 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$x = ["children", "isCollapse", "css", "contentHeader"];
-var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+const _excluded$y = ["children", "isCollapse", "css", "contentHeader"];
+var _jsxFileName$Z = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
 const StyledDiv$3 = styled(Flex$1, {
   justifyContent: 'center',
   marginLeft: 'auto',
@@ -2523,7 +2523,7 @@ const PageContainer = _ref => {
     css,
     contentHeader
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return /*#__PURE__*/React__default.createElement(StyledDiv$3, _extends({
     id: "retina-container",
@@ -2533,7 +2533,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$Z,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -2846,8 +2846,8 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+const _excluded$x = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+var _jsxFileName$Y = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
 const TOAST_WIDTH = 576;
 const ANIMATION_DURATION = 400;
 const TOP_RIGHT_POSITION = 'top-right';
@@ -3012,7 +3012,7 @@ const Toast = _ref => {
     captionOfAction,
     hrefOfAction
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -3041,7 +3041,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 205,
       columnNumber: 5
     }
@@ -3053,7 +3053,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 216,
       columnNumber: 9
     }
@@ -3063,7 +3063,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 223,
       columnNumber: 11
     }
@@ -3071,7 +3071,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 224,
       columnNumber: 13
     }
@@ -3079,7 +3079,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 225,
       columnNumber: 15
     }
@@ -3087,7 +3087,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 226,
       columnNumber: 17
     }
@@ -3099,7 +3099,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 227,
       columnNumber: 17
     }
@@ -3107,7 +3107,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 235,
       columnNumber: 21
     }
@@ -3122,7 +3122,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 236,
       columnNumber: 23
     }
@@ -3131,7 +3131,7 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 250,
       columnNumber: 19
     }
@@ -3146,7 +3146,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 254,
       columnNumber: 17
     }
@@ -3155,7 +3155,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 264,
       columnNumber: 19
     }
@@ -3170,7 +3170,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$Y,
       lineNumber: 268,
       columnNumber: 17
     }
@@ -3194,7 +3194,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
-var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+var _jsxFileName$X = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
 const ToastBox = styled(Flex$1, {
   position: 'fixed',
   variants: {
@@ -3236,7 +3236,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3244,7 +3244,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$X,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -3255,7 +3255,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$X,
         lineNumber: 46,
         columnNumber: 18
       }
@@ -3263,8 +3263,8 @@ const ToastContainer = ({
   })));
 };
 
-const _excluded$v = ["id"];
-var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+const _excluded$w = ["id"];
+var _jsxFileName$W = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
 let toastCount = 0;
 
 const ToastProvider = ({
@@ -3276,7 +3276,7 @@ const ToastProvider = ({
     const {
       id
     } = toast,
-          rest = _objectWithoutPropertiesLoose(toast, _excluded$v); // eslint-disable-next-line no-plusplus
+          rest = _objectWithoutPropertiesLoose(toast, _excluded$w); // eslint-disable-next-line no-plusplus
 
 
     const uniqueId = ++toastCount;
@@ -3306,7 +3306,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3315,7 +3315,7 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 45,
       columnNumber: 7
     }
@@ -3324,7 +3324,7 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 49,
       columnNumber: 7
     }
@@ -3333,7 +3333,7 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 53,
       columnNumber: 7
     }
@@ -3342,14 +3342,14 @@ const ToastProvider = ({
     position: BOTTOM_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$W,
       lineNumber: 57,
       columnNumber: 7
     }
   }));
 };
 
-var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+var _jsxFileName$V = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
 
 function MajooProvider({
   children,
@@ -3362,14 +3362,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$V,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -3383,8 +3383,8 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.bool
 };
 
-const _excluded$u = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
-var _jsxFileName$T = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
+const _excluded$v = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
+var _jsxFileName$U = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
 const Context$2 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -3466,7 +3466,7 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 91,
     columnNumber: 3
   }
@@ -3488,7 +3488,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 108,
     columnNumber: 3
   }
@@ -3511,7 +3511,7 @@ const BannerLink = ({
 }) => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 125,
     columnNumber: 3
   }
@@ -3523,7 +3523,7 @@ const BannerLink = ({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 127,
     columnNumber: 7
   }
@@ -3550,7 +3550,7 @@ BannerLink.defaultProps = {
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 154,
     columnNumber: 3
   }
@@ -3558,11 +3558,11 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   onClick: e => {
     e.preventDefault();
     e.stopPropagation();
-    value === null || value === void 0 ? void 0 : value.onRemove();
+    value == null ? void 0 : value.onRemove();
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 156,
     columnNumber: 7
   }
@@ -3571,7 +3571,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   size: "16px",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$T,
+    fileName: _jsxFileName$U,
     lineNumber: 163,
     columnNumber: 9
   }
@@ -3581,7 +3581,7 @@ const SingleTagBanner = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 171,
       columnNumber: 5
     }
@@ -3591,7 +3591,7 @@ const SingleTagBanner = props => {
     align: "end",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 172,
       columnNumber: 7
     }
@@ -3604,21 +3604,21 @@ const SingleTagBanner = props => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 173,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 181,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 182,
       columnNumber: 33
     }
@@ -3627,7 +3627,7 @@ const SingleTagBanner = props => {
     variant: props.variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 185,
       columnNumber: 11
     }
@@ -3635,12 +3635,12 @@ const SingleTagBanner = props => {
     onClick: e => {
       e.preventDefault();
       e.stopPropagation();
-      props === null || props === void 0 ? void 0 : props.onRemove();
+      props == null ? void 0 : props.onRemove();
     },
     closeCenter: !props.title && !props.link,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 190,
       columnNumber: 7
     }
@@ -3649,7 +3649,7 @@ const SingleTagBanner = props => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 198,
       columnNumber: 9
     }
@@ -3668,7 +3668,7 @@ const Banner = _ref => {
     children,
     bannerBlock
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
 
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
@@ -3678,7 +3678,7 @@ const Banner = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 206,
       columnNumber: 5
     }
@@ -3695,7 +3695,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 208,
       columnNumber: 9
     }
@@ -3706,7 +3706,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 215,
       columnNumber: 11
     }
@@ -3720,7 +3720,7 @@ const Banner = _ref => {
     onRemove: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$U,
       lineNumber: 218,
       columnNumber: 9
     }
@@ -4030,8 +4030,8 @@ const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$t = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-var _jsxFileName$S = "C:\\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: '12px',
   height: 'auto',
@@ -4168,7 +4168,7 @@ const Card = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -4181,7 +4181,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 102,
       columnNumber: 5
     }
@@ -4189,14 +4189,14 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 113,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 117,
       columnNumber: 13
     }
@@ -4205,14 +4205,14 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 118,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$T,
       lineNumber: 124,
       columnNumber: 13
     }
@@ -4234,12 +4234,12 @@ Card.defaultProps = {
   color: 'green',
   shadow: false,
   radius: '$lg',
-  padding: '20px',
+  padding: '12px',
   title: ''
 };
 
-const _excluded$s = ["children"];
-var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+const _excluded$t = ["children"];
+var _jsxFileName$S = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
 const BreadcrumbStyle = styled('nav', {
   wordWrap: 'break-word',
   '& li+li:before': {
@@ -4285,7 +4285,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -4296,20 +4296,20 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$S,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -4514,8 +4514,8 @@ Badge.defaultProps = {
 };
 Badge.displayName = 'Badge';
 
-const _excluded$r = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+const _excluded$s = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+var _jsxFileName$R = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -4559,7 +4559,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4568,7 +4568,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4578,7 +4578,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4586,21 +4586,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 48,
       columnNumber: 7
     }
   }, children !== undefined ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children) : /*#__PURE__*/React__default.createElement(StyledIcon, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$Q,
+      fileName: _jsxFileName$R,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4617,8 +4617,8 @@ Avatar.defaultProps = {
   delayMs: 0
 };
 
-const _excluded$q = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
-var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
+var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
 const ContainerFallback = styled(Flex$1, {
   boxSizing: 'border-box',
   border: '2px dashed #C0C4C4',
@@ -4667,7 +4667,7 @@ function Image(_ref) {
     cssFallback,
     rounded
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   if (src || fallback) {
     return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
@@ -4684,7 +4684,7 @@ function Image(_ref) {
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 59,
         columnNumber: 7
       }
@@ -4700,14 +4700,14 @@ function Image(_ref) {
       }, cssFallback),
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 73,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TextFallback, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$Q,
         lineNumber: 74,
         columnNumber: 9
       }
@@ -4775,8 +4775,8 @@ Image.defaultProps = {
   fallbackTitle: 'Tidak ada foto'
 };
 
-const _excluded$p = ["children", "label", "color", "css", "withClick", "side", "align"];
-var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+const _excluded$q = ["children", "label", "color", "css", "withClick", "side", "align"];
+var _jsxFileName$P = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
 const slideUpAndFade$1 = keyframes({
   '0%': {
     opacity: 0,
@@ -4884,14 +4884,14 @@ const Tooltip = _ref => {
     side,
     align
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4899,7 +4899,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4907,7 +4907,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4918,7 +4918,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4927,7 +4927,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 100,
       columnNumber: 9
     }
@@ -4949,15 +4949,15 @@ Tooltip.defaultProps = {
   children: /*#__PURE__*/React__default.createElement("div", {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$P,
       lineNumber: 119,
       columnNumber: 13
     }
   })
 };
 
-const _excluded$o = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+const _excluded$p = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+var _jsxFileName$O = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
 const StyledProgress$1 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -5075,7 +5075,7 @@ function Progress$1(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
@@ -5091,7 +5091,7 @@ function Progress$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -5104,7 +5104,7 @@ function Progress$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$N,
+      fileName: _jsxFileName$O,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -5217,8 +5217,8 @@ const FormGroup = styled('div', {
 });
 FormGroup.displayName = 'FormGroup';
 
-const _excluded$n = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
-var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
+const _excluded$o = ["children", "htmlFor", "variant", "tooltipLabel", "count", "maxCount", "labelCss"];
+var _jsxFileName$N = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormLabel\\Label.js";
 const StyledLabel$1 = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -5250,14 +5250,14 @@ const FormLabel = _ref => {
     maxCount,
     labelCss
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     className: "form-label",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 36,
       columnNumber: 5
     }
@@ -5267,7 +5267,7 @@ const FormLabel = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 37,
       columnNumber: 7
     }
@@ -5277,7 +5277,7 @@ const FormLabel = _ref => {
     css: labelCss,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 38,
       columnNumber: 9
     }
@@ -5292,7 +5292,7 @@ const FormLabel = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 42,
       columnNumber: 11
     }
@@ -5300,14 +5300,14 @@ const FormLabel = _ref => {
     label: tooltipLabel,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 56,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(StyledHelpIcon, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 57,
       columnNumber: 13
     }
@@ -5316,7 +5316,7 @@ const FormLabel = _ref => {
     color: "disable",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$M,
+      fileName: _jsxFileName$N,
       lineNumber: 62,
       columnNumber: 9
     }
@@ -5332,8 +5332,8 @@ FormLabel.propTypes = {
 };
 FormLabel.displayName = 'FormLabel';
 
-const _excluded$m = ["children", "error"];
-var _jsxFileName$L = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
+const _excluded$n = ["children", "error"];
+var _jsxFileName$M = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormHelper\\Helper.js";
 const StyledHelper = styled(Text$1, {
   display: 'inline-block',
   color: '$textSecondary',
@@ -5351,7 +5351,7 @@ const FormHelper = _ref => {
     children,
     error
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
@@ -5360,7 +5360,7 @@ const FormHelper = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$L,
+      fileName: _jsxFileName$M,
       lineNumber: 19,
       columnNumber: 3
     }
@@ -5372,7 +5372,7 @@ FormHelper.propTypes = {
 };
 FormHelper.displayName = 'FormHelper';
 
-var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
+var _jsxFileName$L = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\CheckboxGroup.js";
 const CheckboxContext = /*#__PURE__*/createContext();
 
 const CheckboxGroup = ({
@@ -5417,7 +5417,7 @@ const CheckboxGroup = ({
     value: values,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$K,
+      fileName: _jsxFileName$L,
       lineNumber: 35,
       columnNumber: 5
     }
@@ -5435,7 +5435,7 @@ CheckboxGroup.defaultProps = {
 };
 CheckboxGroup.displayName = 'CheckboxGroup';
 
-var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
+var _jsxFileName$K = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\CheckOutline.js";
 
 const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5453,7 +5453,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$J,
+    fileName: _jsxFileName$K,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5465,7 +5465,7 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$J,
+    fileName: _jsxFileName$K,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5477,13 +5477,13 @@ const CheckOutline$1 = props => /*#__PURE__*/React.createElement("svg", _extends
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$J,
+    fileName: _jsxFileName$K,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
+var _jsxFileName$J = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\icon\\MinusOutline.js";
 
 const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extends({
   xmlns: "http://www.w3.org/2000/svg",
@@ -5501,7 +5501,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 4,
     columnNumber: 3
   }
@@ -5513,7 +5513,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 19,
     columnNumber: 5
   }
@@ -5525,14 +5525,14 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   d: "M14.31 10.41H3.9v-2.6h10.41z",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$I,
+    fileName: _jsxFileName$J,
     lineNumber: 26,
     columnNumber: 5
   }
 }));
 
-const _excluded$l = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
-var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
+const _excluded$m = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
+var _jsxFileName$I = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputCheckbox\\InputCheckbox.js";
 const StyledIndicator$2 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -5591,13 +5591,13 @@ const Checkbox = _ref => {
     index,
     value
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
 
   const context = useContext(CheckboxContext);
   const [isChecked, setChecked] = useState(false);
   useEffect(() => {
     const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
-    setChecked(checkValue !== null && checkValue !== void 0 ? checkValue : false);
+    setChecked(checkValue != null ? checkValue : false);
   }, [checked, indeterminate, context]);
   return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({
     id: id,
@@ -5614,28 +5614,28 @@ const Checkbox = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 64,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(StyledIndicator$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 77,
       columnNumber: 7
     }
   }, indeterminate ? /*#__PURE__*/React__default.createElement(SvgMinusOutline, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 77,
       columnNumber: 41
     }
   }) : /*#__PURE__*/React__default.createElement(CheckOutline$1, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 77,
       columnNumber: 60
     }
@@ -5649,14 +5649,14 @@ const InputCheckbox = _ref2 => {
     gap: 4,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 84,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 85,
       columnNumber: 7
     }
@@ -5672,14 +5672,14 @@ const InputCheckbox = _ref2 => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 86,
       columnNumber: 7
     }
   }, props.label)) : /*#__PURE__*/React__default.createElement(Checkbox, _extends({}, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$H,
+      fileName: _jsxFileName$I,
       lineNumber: 101,
       columnNumber: 5
     }
@@ -5697,8 +5697,8 @@ InputCheckbox.propTypes = {
 };
 InputCheckbox.displayName = 'InputCheckbox';
 
-const _excluded$k = ["children", "size"];
-var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
+const _excluded$l = ["children", "size"];
+var _jsxFileName$H = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputGroup\\InputGroup.js";
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -5814,7 +5814,7 @@ const InputGroup = _ref => {
     children,
     size = 'lg'
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$l);
 
   const isLetter = children.some(child => child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
   const isElement = children.some(child => child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement');
@@ -5838,7 +5838,7 @@ const InputGroup = _ref => {
     isElement: isElement,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$G,
+      fileName: _jsxFileName$H,
       lineNumber: 146,
       columnNumber: 10
     }
@@ -5984,8 +5984,8 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 
-const _excluded$j = ["disabled", "readOnly"];
-var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
+const _excluded$k = ["disabled", "readOnly"];
+var _jsxFileName$G = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputText\\InputText.js";
 const disabledStyle = {
   backgroundColor: '$formDisable',
   color: '$textDisable',
@@ -5997,7 +5997,7 @@ const disabledStyle = {
     border: '1px solid $colors$gray300'
   }
 };
-const StyledInput = styled('input', {
+const StyledInput$1 = styled('input', {
   // Reset
   appearance: 'none',
   boxSizing: 'border-box',
@@ -6127,9 +6127,9 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     disabled,
     readOnly
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
 
-  return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
+  return /*#__PURE__*/React__default.createElement(StyledInput$1, _extends({
     ref: ref,
     disabled: disabled,
     isDisabled: disabled,
@@ -6138,7 +6138,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$F,
+      fileName: _jsxFileName$G,
       lineNumber: 151,
       columnNumber: 3
     }
@@ -6146,9 +6146,9 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
 });
 InputText.displayName = 'InputText';
 
-const _excluded$i = ["disabled", "readOnly"];
-var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTextArea\\InputTextArea.js";
-const StyledTextArea = styled(StyledInput, {
+const _excluded$j = ["disabled", "readOnly"];
+var _jsxFileName$F = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputTextArea\\InputTextArea.js";
+const StyledTextArea = styled(StyledInput$1, {
   variants: {
     size: {
       sm: {
@@ -6168,7 +6168,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     disabled,
     readOnly
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
 
   return /*#__PURE__*/React__default.createElement(StyledTextArea, _extends({
     ref: ref,
@@ -6179,7 +6179,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$E,
+      fileName: _jsxFileName$F,
       lineNumber: 22,
       columnNumber: 3
     }
@@ -6192,25 +6192,25 @@ InputTextArea.defaultProps = {
 
 const InputRadioContext = /*#__PURE__*/React__default.createContext();
 
-var _jsxFileName$D = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
+var _jsxFileName$E = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadioGroup.js";
 const RadioGroup = styled(RadioGroupPrimitive.Root, Flex$1);
 function InputRadioGroup(props) {
-  return (props === null || props === void 0 ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
+  return (props == null ? void 0 : props.children) && /*#__PURE__*/React__default.createElement(InputRadioContext.Provider, {
     value: props,
     __self: this,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 13,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(RadioGroup, _extends({}, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$D,
+      fileName: _jsxFileName$E,
       lineNumber: 14,
       columnNumber: 9
     }
-  }), React__default.Children.map(props === null || props === void 0 ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
+  }), React__default.Children.map(props == null ? void 0 : props.children, child => /*#__PURE__*/React__default.cloneElement(child, {
     style: Object.assign({}, child.props.style, {
       opacity: 1
     })
@@ -6224,8 +6224,8 @@ InputRadioGroup.propTypes = {
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
-const _excluded$h = ["id", "disabled", "css", "inputType", "inputProps"];
-var _jsxFileName$C = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
+const _excluded$i = ["id", "disabled", "css", "inputType", "inputProps"];
+var _jsxFileName$D = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputRadio\\InputRadio.js";
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
@@ -6341,7 +6341,7 @@ const InputRadio = _ref => {
     inputType,
     inputProps
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
 
   function renderInputType(type, checked) {
     switch (type) {
@@ -6350,7 +6350,7 @@ const InputRadio = _ref => {
           disabled: disabled || checked !== props.value,
           __self: this,
           __source: {
-            fileName: _jsxFileName$C,
+            fileName: _jsxFileName$D,
             lineNumber: 124,
             columnNumber: 16
           }
@@ -6361,7 +6361,7 @@ const InputRadio = _ref => {
           disabled: disabled || checked !== props.value,
           __self: this,
           __source: {
-            fileName: _jsxFileName$C,
+            fileName: _jsxFileName$D,
             lineNumber: 127,
             columnNumber: 16
           }
@@ -6381,7 +6381,7 @@ const InputRadio = _ref => {
           },
           __self: this,
           __source: {
-            fileName: _jsxFileName$C,
+            fileName: _jsxFileName$D,
             lineNumber: 131,
             columnNumber: 11
           }
@@ -6392,7 +6392,7 @@ const InputRadio = _ref => {
   return /*#__PURE__*/React__default.createElement(InputRadioContext.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$C,
+      fileName: _jsxFileName$D,
       lineNumber: 150,
       columnNumber: 5
     }
@@ -6401,7 +6401,7 @@ const InputRadio = _ref => {
     value,
     outlined
   }) => {
-    const checked = value !== null && value !== void 0 ? value : defaultValue;
+    const checked = value != null ? value : defaultValue;
     return /*#__PURE__*/React__default.createElement(Container$6, {
       align: "center",
       gap: 4,
@@ -6411,7 +6411,7 @@ const InputRadio = _ref => {
       css: css,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 155,
         columnNumber: 11
       }
@@ -6421,14 +6421,14 @@ const InputRadio = _ref => {
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 163,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default.createElement(StyledIndicator$1, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$C,
+        fileName: _jsxFileName$D,
         lineNumber: 164,
         columnNumber: 15
       }
@@ -6475,7 +6475,9 @@ InputRightElement.propTypes = {
 };
 InputRightElement.name = 'InputRightElement';
 
-const InputNumber = styled(NumberFormat, {
+const _excluded$h = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled"];
+var _jsxFileName$C = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packages\\react\\src\\components\\form\\components\\InputNumber\\InputNumber.js";
+const StyledInput = styled(NumberFormat, {
   // Reset
   appearance: 'none',
   boxSizing: 'border-box',
@@ -6538,7 +6540,7 @@ const InputNumber = styled(NumberFormat, {
     }
   }],
   variants: {
-    readOnly: {
+    isReadOnly: {
       true: {
         backgroundColor: '$formDisable'
       }
@@ -6604,6 +6606,35 @@ const InputNumber = styled(NumberFormat, {
     size: 'lg'
   }
 });
+const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
+  let {
+    placeholder,
+    value,
+    size,
+    isInvalid,
+    readOnly,
+    disabled
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+
+  return /*#__PURE__*/React__default.createElement(StyledInput, _extends({
+    ref: ref,
+    placeholder: placeholder,
+    value: value,
+    size: size,
+    isInvalid: isInvalid,
+    readOnly: readOnly,
+    isReadOnly: readOnly,
+    disabled: disabled
+  }, props, {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName$C,
+      lineNumber: 147,
+      columnNumber: 3
+    }
+  }));
+});
 InputNumber.propTypes = {
   placeholder: PropTypes.string,
   value: PropTypes.string,
@@ -7409,7 +7440,7 @@ function TagsInput(_ref) {
         return;
       }
 
-      if (pattern && pattern !== null && pattern !== void 0 && pattern.regex) {
+      if (pattern && pattern != null && pattern.regex) {
         const regex = new RegExp(pattern.regex);
 
         if (!regex.test(event.target.value)) {
@@ -7475,7 +7506,7 @@ function TagsInput(_ref) {
       lineNumber: 173,
       columnNumber: 9
     }
-  })), regexError && pattern && (pattern !== null && pattern !== void 0 && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
+  })), regexError && pattern && (pattern != null && pattern.errorMessage ? /*#__PURE__*/React__default.createElement(FormHelper, {
     color: "red",
     __self: this,
     __source: {
@@ -10321,8 +10352,8 @@ const PopoverContent = ({
     ref: floating,
     style: Object.assign({
       position: strategy,
-      top: isMobile ? 0 : y !== null && y !== void 0 ? y : '',
-      left: isMobile ? 0 : x !== null && x !== void 0 ? x : '',
+      top: isMobile ? 0 : y != null ? y : '',
+      left: isMobile ? 0 : x != null ? x : '',
       zIndex: zIndices.popover
     }, style)
   }), {
@@ -11316,7 +11347,7 @@ const NotificationBadge = _ref => {
       props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
 
   const getValue = () => {
-    let value = props === null || props === void 0 ? void 0 : props.value;
+    let value = props == null ? void 0 : props.value;
 
     if (typeof value === 'number' || parseInt(value)) {
       if (Math.sign(value) === 1 || Math.sign(value) === 0) {
@@ -15834,6 +15865,11 @@ const PaginationButton = ({
     }
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "caption",
+    css: {
+      fontSize: 12,
+      fontWeight: 400,
+      color: '$textPrimary'
+    },
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
@@ -15864,7 +15900,7 @@ const PaginationButton = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$i,
-      lineNumber: 170,
+      lineNumber: 172,
       columnNumber: 9
     }
   })));
@@ -16167,6 +16203,7 @@ const MobileTable = /*#__PURE__*/React__default.forwardRef(({
                 unsortable: column.unsortable
               }, {
                 children: jsx(TableHeadCellContent, Object.assign({
+                  isMobile: true,
                   heading: "headerTable",
                   color: "secondary"
                 }, {
@@ -16327,7 +16364,7 @@ const TableHeadCell$2 = styled('th', {
 const TableHeaderCellContainer = styled(Flex$1, {
   flexDirection: 'row',
   alignItems: 'center',
-  justifyContent: 'space-between',
+  gap: '$spacing-03',
   userSelect: 'none',
   size: '100%',
   minWidth: 0,
@@ -16397,14 +16434,15 @@ const TableHeaderCellContainer = styled(Flex$1, {
     },
     isMobile: {
       true: {
-        padding: '0'
+        padding: '0',
+        justifyContent: 'space-between',
+        gap: 0
       }
     }
   }
 });
 const TableHeadCellContent = styled(Heading, {
   userSelect: 'none',
-  width: '100%',
   textAlign: 'start',
   position: 'relative',
   '& > *': {
@@ -16412,6 +16450,13 @@ const TableHeadCellContent = styled(Heading, {
   },
   '& > span:last-child': {
     paddingLeft: '$spacing-03'
+  },
+  variants: {
+    isMobile: {
+      true: {
+        width: '100%'
+      }
+    }
   }
 });
 const TableBody$2 = styled('tbody', {});
@@ -18309,7 +18354,7 @@ const TemplateAlertFunction = props => {
       if (!props.onOpenAutoFocus) {
         e.preventDefault();
       } else {
-        props === null || props === void 0 ? void 0 : props.onOpenAutoFocus();
+        props == null ? void 0 : props.onOpenAutoFocus();
       }
     },
     __self: undefined,
@@ -18432,8 +18477,8 @@ const TemplateAlertFunction = props => {
     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,
@@ -18456,8 +18501,8 @@ const TemplateAlertFunction = props => {
       flex: props.isMobile && 1
     },
     buttonType: "ghost",
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.cancelButtonProps, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
@@ -18479,8 +18524,8 @@ const TemplateAlertFunction = props => {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.actionButtonProps, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$b,
@@ -18642,8 +18687,8 @@ function AlertDialog(props) {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.actionButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
@@ -18666,8 +18711,8 @@ function AlertDialog(props) {
       flex: props.isMobile && 1
     },
     buttonType: "ghost",
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.cancelButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.cancelButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
@@ -18689,8 +18734,8 @@ function AlertDialog(props) {
     css: {
       flex: props.isMobile && 1
     },
-    disabled: props === null || props === void 0 ? void 0 : props.disabledButton
-  }, props === null || props === void 0 ? void 0 : props.actionButtonProps, {
+    disabled: props == null ? void 0 : props.disabledButton
+  }, props == null ? void 0 : props.actionButtonProps, {
     __self: this,
     __source: {
       fileName: _jsxFileName$b,
@@ -21167,7 +21212,7 @@ const Upload = ({
               file: fileProgress,
               indexReplace: indexReplace.current,
               isReplace: indexReplace.current !== null
-            })) === null || _onChange === void 0 ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) === null || _onChange$then === void 0 ? void 0 : _onChange$then.catch(error => setError(error.message));
+            })) == null ? void 0 : (_onChange$then = _onChange.then(() => setError(null))) == null ? void 0 : _onChange$then.catch(error => setError(error.message));
           }
         }).then(result => {
           var _onChange2, _onChange2$then;
@@ -21189,7 +21234,7 @@ const Upload = ({
             file: fileSuccess,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange2 === void 0 ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) === null || _onChange2$then === void 0 ? void 0 : _onChange2$then.catch(error => setError(error.message));
+          })) == null ? void 0 : (_onChange2$then = _onChange2.then(() => setError(null))) == null ? void 0 : _onChange2$then.catch(error => setError(error.message));
         }).catch(error => {
           var _onChange3, _onChange3$then;
 
@@ -21210,7 +21255,7 @@ const Upload = ({
             file: fileError,
             indexReplace: indexReplace.current,
             isReplace: indexReplace.current !== null
-          })) === null || _onChange3 === void 0 ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) === null || _onChange3$then === void 0 ? void 0 : _onChange3$then.catch(error => setError(error.message));
+          })) == null ? void 0 : (_onChange3$then = _onChange3.then(() => setError(null))) == null ? void 0 : _onChange3$then.catch(error => setError(error.message));
         });
       } else {
         var _onChange4, _onChange4$then;
@@ -21220,7 +21265,7 @@ const Upload = ({
           file: newFile,
           indexReplace: indexReplace.current,
           isReplace: indexReplace.current !== null
-        })) === null || _onChange4 === void 0 ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) === null || _onChange4$then === void 0 ? void 0 : _onChange4$then.catch(error => setError(error.message));
+        })) == null ? void 0 : (_onChange4$then = _onChange4.then(() => setError(null))) == null ? void 0 : _onChange4$then.catch(error => setError(error.message));
       }
 
       if (indexReplace.current !== null) {
@@ -21247,9 +21292,9 @@ const Upload = ({
   }
 
   function handleCrop() {
-    if (completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height && imgRef.current) {
+    if (completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height && imgRef.current) {
       imgPreview(imgRef.current, completedCrop).then(blob => {
-        const file = new File([blob], fileState === null || fileState === void 0 ? void 0 : fileState.name, {
+        const file = new File([blob], fileState == null ? void 0 : fileState.name, {
           type: blob.type
         });
         handleUpload([file]);
@@ -21317,22 +21362,22 @@ const Upload = ({
   function handleOpenFile(file) {
     var _String, _file$name;
 
-    let extension = (_String = String(file === null || file === void 0 ? void 0 : (_file$name = file.name) === null || _file$name === void 0 ? void 0 : _file$name.split('.').pop())) === null || _String === void 0 ? void 0 : _String.toLowerCase();
+    let extension = (_String = String(file == null ? void 0 : (_file$name = file.name) == null ? void 0 : _file$name.split('.').pop())) == null ? void 0 : _String.toLowerCase();
 
     if (extension === 'pdf') {
-      window.open(file === null || file === void 0 ? void 0 : file.url);
+      window.open(file == null ? void 0 : file.url);
     } else {
-      request.get(file === null || file === void 0 ? void 0 : file.url).end((err, res) => {
+      request.get(file == null ? void 0 : file.url).end((err, res) => {
         if (err) {
           console.error(err.message);
         }
 
-        if (res && res !== null && res !== void 0 && res.ok) {
-          const response = res === null || res === void 0 ? void 0 : res.text;
+        if (res && res != null && res.ok) {
+          const response = res == null ? void 0 : res.text;
           const url = window.URL.createObjectURL(new Blob([response]));
           const link = document.createElement('a');
           link.href = url;
-          link.setAttribute('download', file === null || file === void 0 ? void 0 : file.name);
+          link.setAttribute('download', file == null ? void 0 : file.name);
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
@@ -21402,12 +21447,12 @@ const Upload = ({
   }
 
   const renderPicture = () => {
-    return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
-      if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+    return fileList == null ? void 0 : fileList.map((item, index) => {
+      if ((item == null ? void 0 : item.status) === 'uploading') {
         return /*#__PURE__*/React__default.createElement(UploadProgress, {
           key: index,
-          progress: item === null || item === void 0 ? void 0 : item.percent,
-          loading: item === null || item === void 0 ? void 0 : item.loading,
+          progress: item == null ? void 0 : item.percent,
+          loading: item == null ? void 0 : item.loading,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
@@ -21482,14 +21527,14 @@ const Upload = ({
   };
 
   const renderFile = () => {
-    return fileList === null || fileList === void 0 ? void 0 : fileList.map((item, index) => {
+    return fileList == null ? void 0 : fileList.map((item, index) => {
       var _item$name;
 
-      if ((item === null || item === void 0 ? void 0 : item.status) === 'uploading') {
+      if ((item == null ? void 0 : item.status) === 'uploading') {
         return /*#__PURE__*/React__default.createElement(UploadProgress, {
           key: index,
-          progress: item === null || item === void 0 ? void 0 : item.percent,
-          loading: item === null || item === void 0 ? void 0 : item.loading,
+          progress: item == null ? void 0 : item.percent,
+          loading: item == null ? void 0 : item.loading,
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
@@ -21556,7 +21601,7 @@ const Upload = ({
           lineNumber: 610,
           columnNumber: 17
         }
-      }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip, {
+      }, ".", item == null ? void 0 : (_item$name = item.name) == null ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default.createElement(Tooltip, {
         label: item.name,
         __self: undefined,
         __source: {
@@ -21728,7 +21773,7 @@ const Upload = ({
         lineNumber: 685,
         columnNumber: 11
       }
-    }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    }, children != null ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
@@ -21909,12 +21954,12 @@ const Upload = ({
         lineNumber: 730,
         columnNumber: 15
       }
-    }, `${completedCrop !== null && completedCrop !== void 0 && completedCrop.width && completedCrop !== null && completedCrop !== void 0 && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
+    }, `${completedCrop != null && completedCrop.width && completedCrop != null && completedCrop.height ? 'Potong & Simpan' : 'Simpan'}`)))));
   }
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     direction: "row",
-    gap: (fileList === null || fileList === void 0 ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
+    gap: (fileList == null ? void 0 : fileList.length) <= 1 && max === 1 ? 0 : 3,
     wrap: "wrap",
     css: {
       userSelect: 'none'
@@ -22331,10 +22376,10 @@ function InputColorPicker(props) {
   const [isPopover, setIsPopover] = useState(false);
 
   function getColor() {
-    const color = props === null || props === void 0 ? void 0 : props.color;
+    const color = props == null ? void 0 : props.color;
 
     if (typeof color === 'string') {
-      return color === null || color === void 0 ? void 0 : color.toUpperCase();
+      return color == null ? void 0 : color.toUpperCase();
     }
 
     return `rgba(${color.r},${color.g},${color.b},${color.a})`;
@@ -25191,7 +25236,8 @@ const WrapperDiv = styled('div', {
         display: 'none'
       },
       '& .rsw_3G': {
-        display: 'block !important'
+        display: 'block !important',
+        zIndex: 'unset'
       }
     }
   }
@@ -25278,7 +25324,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 103,
+          lineNumber: 104,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Span, {
@@ -25288,7 +25334,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 117,
+          lineNumber: 118,
           columnNumber: 15
         }
       }), isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -25300,16 +25346,16 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 118,
+          lineNumber: 119,
           columnNumber: 30
         }
-      }), data[i - 1].title, ((_data = data[i - 1]) === null || _data === void 0 ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
+      }), data[i - 1].title, ((_data = data[i - 1]) == null ? void 0 : _data.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
         align: "center",
-        label: (_data2 = data[i - 1]) === null || _data2 === void 0 ? void 0 : _data2.tooltipsContents,
+        label: (_data2 = data[i - 1]) == null ? void 0 : _data2.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 121,
+          lineNumber: 122,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -25321,7 +25367,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 122,
+          lineNumber: 123,
           columnNumber: 19
         }
       })))) : stepItems.push( /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -25338,7 +25384,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 128,
+          lineNumber: 129,
           columnNumber: 13
         }
       }, isComplete && /*#__PURE__*/React__default.createElement(StyledCheckFiled, {
@@ -25347,7 +25393,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 140,
+          lineNumber: 141,
           columnNumber: 30
         }
       }), !isComplete && /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -25363,7 +25409,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 142,
+          lineNumber: 143,
           columnNumber: 17
         }
       }), /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -25373,17 +25419,17 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 154,
+          lineNumber: 155,
           columnNumber: 15
         }
-      }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) === null || _data3 === void 0 ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
+      }, isActive ? data[i - 1].title : ''), isActive && ((_data3 = data[i - 1]) == null ? void 0 : _data3.withTolltip) && /*#__PURE__*/React__default.createElement(Tooltip, {
         align: "center",
         withClick: true,
-        label: (_data4 = data[i - 1]) === null || _data4 === void 0 ? void 0 : _data4.tooltipsContents,
+        label: (_data4 = data[i - 1]) == null ? void 0 : _data4.tooltipsContents,
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 156,
+          lineNumber: 157,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(StyledCircleInfoOutline, {
@@ -25392,7 +25438,7 @@ const Navigation = props => {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$4,
-          lineNumber: 157,
+          lineNumber: 158,
           columnNumber: 19
         }
       }))));
@@ -25404,7 +25450,9 @@ const Navigation = props => {
       borderLeft: !isMobile ? '4px solid $bgBorder' : undefined,
       marginBottom: isMobile ? 65 : undefined,
       height: !isMobile ? height : undefined,
-      opacity: isHide ? 0 : undefined
+      opacity: isHide ? 0 : undefined,
+      position: !isMobile && 'sticky',
+      top: !isMobile ? 44 : 40
     }, cssNav, mobileHidden),
     gap: 5,
     justify: isMobile ? 'center' : undefined,
@@ -25412,7 +25460,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 165,
+      lineNumber: 166,
       columnNumber: 5
     }
   }, isMobile ? /*#__PURE__*/React__default.createElement(StyledDiv, {
@@ -25424,7 +25472,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 179,
+      lineNumber: 182,
       columnNumber: 9
     }
   }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -25437,7 +25485,7 @@ const Navigation = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 180,
+      lineNumber: 183,
       columnNumber: 11
     }
   }, stepItems)) : stepItems);
@@ -25462,13 +25510,13 @@ const Default = props => {
   const getIsComplete = currentStep => {
     var _state$isComplete;
 
-    return state === null || state === void 0 ? void 0 : (_state$isComplete = state.isComplete) === null || _state$isComplete === void 0 ? void 0 : _state$isComplete[currentStep - 1];
+    return state == null ? void 0 : (_state$isComplete = state.isComplete) == null ? void 0 : _state$isComplete[currentStep - 1];
   };
 
   const getTitleStep = currentStep => {
     var _props$navContents, _props$navContents2;
 
-    return props === null || props === void 0 ? void 0 : (_props$navContents = props.navContents) === null || _props$navContents === void 0 ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) === null || _props$navContents2 === void 0 ? void 0 : _props$navContents2.title;
+    return props == null ? void 0 : (_props$navContents = props.navContents) == null ? void 0 : (_props$navContents2 = _props$navContents[currentStep - 1]) == null ? void 0 : _props$navContents2.title;
   };
 
   const setState = value => {
@@ -25514,17 +25562,17 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 262,
+      lineNumber: 265,
       columnNumber: 5
     }
   }, /*#__PURE__*/React__default.createElement(StepWizardContext.Provider, {
     value: {
       toogleVisibility,
-      isHide: state === null || state === void 0 ? void 0 : state.hide,
+      isHide: state == null ? void 0 : state.hide,
       setComplete,
       setState,
       state,
-      SW: state === null || state === void 0 ? void 0 : state.SW,
+      SW: state == null ? void 0 : state.SW,
       forbidClickNav: props.forbidClickNav,
       titles: props.titles,
       isMobile: props.isMobile,
@@ -25536,7 +25584,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 263,
+      lineNumber: 266,
       columnNumber: 7
     }
   }, /*#__PURE__*/React__default.createElement(Stepper, _extends({}, props, {
@@ -25548,7 +25596,7 @@ const Default = props => {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$4,
-        lineNumber: 285,
+        lineNumber: 288,
         columnNumber: 16
       }
     }),
@@ -25558,7 +25606,7 @@ const Default = props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$4,
-      lineNumber: 280,
+      lineNumber: 283,
       columnNumber: 9
     }
   }), props.children)));
@@ -25702,10 +25750,10 @@ function Content({
   function getDatasets(content, activeId, isCollapse) {
     const datasets = [];
 
-    for (let i = 0; i < (content === null || content === void 0 ? void 0 : content.length); i++) {
+    for (let i = 0; i < (content == null ? void 0 : content.length); i++) {
       var _content$i;
 
-      if (((_content$i = content[i]) === null || _content$i === void 0 ? void 0 : _content$i.id) === activeId) {
+      if (((_content$i = content[i]) == null ? void 0 : _content$i.id) === activeId) {
         datasets.unshift(content[i]);
       } else {
         datasets.push(content[i]);
@@ -25745,7 +25793,7 @@ function Content({
       lineNumber: 101,
       columnNumber: 7
     }
-  }, (_getDatasets = getDatasets(content, activeId, isCollapse)) === null || _getDatasets === void 0 ? void 0 : _getDatasets.map((item, index) => {
+  }, (_getDatasets = getDatasets(content, activeId, isCollapse)) == null ? void 0 : _getDatasets.map((item, index) => {
     return /*#__PURE__*/React__default.createElement(List, {
       key: index,
       __self: this,
@@ -25766,7 +25814,7 @@ function Content({
         paddingLeft: '16px !important',
         minHeight: 25
       },
-      "data-to-scrollspy-id": item === null || item === void 0 ? void 0 : item.id,
+      "data-to-scrollspy-id": item == null ? void 0 : item.id,
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
@@ -25775,8 +25823,8 @@ function Content({
       }
     }, /*#__PURE__*/React__default.createElement(Title$1, {
       className: "link-title",
-      active: (item === null || item === void 0 ? void 0 : item.id) === activeId,
-      href: `#${item === null || item === void 0 ? void 0 : item.id}`,
+      active: (item == null ? void 0 : item.id) === activeId,
+      href: `#${item == null ? void 0 : item.id}`,
       onClick: e => {
         e.preventDefault();
         const target = window.document.getElementById(e.currentTarget.href.split('#')[1]);
@@ -25805,7 +25853,7 @@ function Content({
         lineNumber: 119,
         columnNumber: 17
       }
-    }, item === null || item === void 0 ? void 0 : item.title), item === null || item === void 0 ? void 0 : item.icon));
+    }, item == null ? void 0 : item.title), item == null ? void 0 : item.icon));
   })));
 }
 
@@ -28914,4 +28962,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$2 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, ColorPicker$1 as ColorPicker, Colors, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, DropdownMenuTriggerItem, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$2 as TableBody, TableColumn, TableContent$2 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$2 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };