@majoo-ui/react 1.46.8 → 1.47.0-rc.1

package/index.umd.js

@@ -55,7 +55,7 @@
   var ReactCrop__default = /*#__PURE__*/_interopDefaultLegacy(ReactCrop);
   var request__default = /*#__PURE__*/_interopDefaultLegacy(request);
 
-  var _jsxFileName$$ = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+  var _jsxFileName$_ = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
   function ThemeProvider({
     theme,
@@ -65,7 +65,7 @@
       className: theme,
       __self: this,
       __source: {
-        fileName: _jsxFileName$$,
+        fileName: _jsxFileName$_,
         lineNumber: 5,
         columnNumber: 10
       }
@@ -2346,9 +2346,9 @@
   };
   Flex$1.displayName = 'Flex';
 
-  const _excluded$z = ["children"],
+  const _excluded$y = ["children"],
         _excluded2$1 = ["children"];
-  var _jsxFileName$_ = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
+  var _jsxFileName$Z = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\grid\\Grid.js";
   const GridComponent = styled('div', {
     display: 'grid',
     variants: {
@@ -2522,7 +2522,7 @@
     let {
       children
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
@@ -2533,7 +2533,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$Z,
         lineNumber: 178,
         columnNumber: 5
       }
@@ -2589,7 +2589,7 @@
       }),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$_,
+        fileName: _jsxFileName$Z,
         lineNumber: 232,
         columnNumber: 5
       }
@@ -2606,8 +2606,8 @@
   };
   GridItem.displayName = 'Grid Item';
 
-  const _excluded$y = ["children", "isCollapse", "css", "contentHeader"];
-  var _jsxFileName$Z = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
+  const _excluded$x = ["children", "isCollapse", "css", "contentHeader"];
+  var _jsxFileName$Y = "C:\\Project\\majoo-ui\\packages\\react\\src\\layout\\pageContainer\\PageContainer.js";
   const StyledDiv$3 = styled(Flex$1, {
     justifyContent: 'center',
     marginLeft: 'auto',
@@ -2636,7 +2636,7 @@
       css,
       contentHeader
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv$3, _extends({
       id: "retina-container",
@@ -2646,7 +2646,7 @@
     }, props, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Z,
+        fileName: _jsxFileName$Y,
         lineNumber: 28,
         columnNumber: 5
       }
@@ -2924,8 +2924,8 @@
     }), void 0);
   });
 
-  const _excluded$x = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
-  var _jsxFileName$Y = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
+  const _excluded$w = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+  var _jsxFileName$X = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\Toast.js";
   const TOAST_WIDTH = 576;
   const ANIMATION_DURATION = 400;
   const TOP_RIGHT_POSITION = 'top-right';
@@ -3090,7 +3090,7 @@
       captionOfAction,
       hrefOfAction
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
 
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const close = React__namespace.useCallback(() => {
@@ -3119,7 +3119,7 @@
       onExited: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 205,
         columnNumber: 5
       }
@@ -3131,7 +3131,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 216,
         columnNumber: 9
       }
@@ -3141,7 +3141,7 @@
       onClick: onClick,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 223,
         columnNumber: 11
       }
@@ -3149,7 +3149,7 @@
       direction: "column",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 224,
         columnNumber: 13
       }
@@ -3157,7 +3157,7 @@
       direction: "row",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 225,
         columnNumber: 15
       }
@@ -3165,7 +3165,7 @@
       variant: variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 226,
         columnNumber: 17
       }
@@ -3177,7 +3177,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 227,
         columnNumber: 17
       }
@@ -3185,7 +3185,7 @@
       justify: "between",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 235,
         columnNumber: 21
       }
@@ -3200,7 +3200,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 236,
         columnNumber: 23
       }
@@ -3209,7 +3209,7 @@
       color: "secondary",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 250,
         columnNumber: 19
       }
@@ -3223,7 +3223,7 @@
       hasTitle: !!title,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 254,
         columnNumber: 17
       }
@@ -3232,7 +3232,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 263,
         columnNumber: 19
       }
@@ -3247,7 +3247,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$Y,
+        fileName: _jsxFileName$X,
         lineNumber: 267,
         columnNumber: 17
       }
@@ -3271,7 +3271,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.createContext({});
 
-  var _jsxFileName$X = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
+  var _jsxFileName$W = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\ToastContainer.js";
   const ToastBox = styled(Flex$1, {
     position: 'fixed',
     variants: {
@@ -3313,7 +3313,7 @@
     return /*#__PURE__*/React__namespace.createElement(helpers.Portal, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$W,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3321,7 +3321,7 @@
       position: position,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$W,
         lineNumber: 44,
         columnNumber: 7
       }
@@ -3332,7 +3332,7 @@
       }, toast, {
         __self: undefined,
         __source: {
-          fileName: _jsxFileName$X,
+          fileName: _jsxFileName$W,
           lineNumber: 46,
           columnNumber: 18
         }
@@ -3340,8 +3340,8 @@
     })));
   };
 
-  const _excluded$w = ["id"];
-  var _jsxFileName$W = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
+  const _excluded$v = ["id"];
+  var _jsxFileName$V = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\toast\\context\\ToastProvider.js";
   let toastCount = 0;
 
   const ToastProvider = ({
@@ -3353,7 +3353,7 @@
       const {
         id
       } = toast,
-            rest = _objectWithoutPropertiesLoose(toast, _excluded$w); // eslint-disable-next-line no-plusplus
+            rest = _objectWithoutPropertiesLoose(toast, _excluded$v); // eslint-disable-next-line no-plusplus
 
 
       const uniqueId = ++toastCount;
@@ -3383,7 +3383,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$V,
         lineNumber: 43,
         columnNumber: 5
       }
@@ -3392,7 +3392,7 @@
       position: TOP_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$V,
         lineNumber: 45,
         columnNumber: 7
       }
@@ -3401,7 +3401,7 @@
       position: TOP_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$V,
         lineNumber: 49,
         columnNumber: 7
       }
@@ -3410,7 +3410,7 @@
       position: BOTTOM_RIGHT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$V,
         lineNumber: 53,
         columnNumber: 7
       }
@@ -3419,14 +3419,14 @@
       position: BOTTOM_LEFT_POSITION,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$W,
+        fileName: _jsxFileName$V,
         lineNumber: 57,
         columnNumber: 7
       }
     }));
   };
 
-  var _jsxFileName$V = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
+  var _jsxFileName$U = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\MajooProvider.js";
 
   function MajooProvider({
     children,
@@ -3439,14 +3439,14 @@
       theme: theme$1,
       __self: this,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$U,
         lineNumber: 15,
         columnNumber: 10
       }
     }, /*#__PURE__*/React__default["default"].createElement(ToastProvider, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$V,
+        fileName: _jsxFileName$U,
         lineNumber: 16,
         columnNumber: 5
       }
@@ -3460,8 +3460,8 @@
     disableGlobalStyle: PropTypes__default["default"].bool
   };
 
-  const _excluded$v = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
-  var _jsxFileName$U = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
+  const _excluded$u = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock"];
+  var _jsxFileName$T = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\banner\\Banner.js";
   const Context$2 = /*#__PURE__*/React__namespace.createContext();
   const StyledBanner = styled(Flex$1, {
     maxWidth: '100%',
@@ -3543,7 +3543,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 91,
       columnNumber: 3
     }
@@ -3565,7 +3565,7 @@
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 108,
       columnNumber: 3
     }
@@ -3588,7 +3588,7 @@
   }) => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 125,
       columnNumber: 3
     }
@@ -3600,7 +3600,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 127,
       columnNumber: 7
     }
@@ -3627,7 +3627,7 @@
   const BannerClose = () => /*#__PURE__*/React__namespace.createElement(Context$2.Consumer, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 154,
       columnNumber: 3
     }
@@ -3639,7 +3639,7 @@
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 156,
       columnNumber: 7
     }
@@ -3648,7 +3648,7 @@
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 163,
       columnNumber: 9
     }
@@ -3658,7 +3658,7 @@
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 171,
         columnNumber: 5
       }
@@ -3668,7 +3668,7 @@
       align: "end",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 172,
         columnNumber: 7
       }
@@ -3681,21 +3681,21 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 173,
         columnNumber: 9
       }
     }, props.title && /*#__PURE__*/React__namespace.createElement(BannerTitle, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 181,
         columnNumber: 27
       }
     }, props.title), props.description && /*#__PURE__*/React__namespace.createElement(BannerDescription, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 182,
         columnNumber: 33
       }
@@ -3704,7 +3704,7 @@
       variant: props.variant,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 185,
         columnNumber: 11
       }
@@ -3717,7 +3717,7 @@
       closeCenter: !props.title && !props.link,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 190,
         columnNumber: 7
       }
@@ -3726,7 +3726,7 @@
       size: "16px",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 198,
         columnNumber: 9
       }
@@ -3745,7 +3745,7 @@
       children,
       bannerBlock
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
     return /*#__PURE__*/React__namespace.createElement(StyledBanner, _extends({
       variant: variant,
@@ -3755,7 +3755,7 @@
     }, rest, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 206,
         columnNumber: 5
       }
@@ -3772,7 +3772,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 208,
         columnNumber: 9
       }
@@ -3783,7 +3783,7 @@
       },
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 215,
         columnNumber: 11
       }
@@ -3797,7 +3797,7 @@
       onRemove: onRemove,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$U,
+        fileName: _jsxFileName$T,
         lineNumber: 218,
         columnNumber: 9
       }
@@ -4110,8 +4110,8 @@
     }), void 0);
   });
 
-  const _excluded$u = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
-  var _jsxFileName$T = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
+  const _excluded$t = ["className", "children", "color", "shadow", "radius", "padding", "title", "width", "textColor", "icon"];
+  var _jsxFileName$S = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\card\\Card.js";
   const CardComponent = styled('div', {
     padding: '20px',
     height: 'auto',
@@ -4248,7 +4248,7 @@
       textColor,
       icon
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
     return /*#__PURE__*/React__default["default"].createElement(CardComponent, {
       className: className,
@@ -4261,7 +4261,7 @@
       }, props.css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$S,
         lineNumber: 103,
         columnNumber: 5
       }
@@ -4269,14 +4269,14 @@
       color: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$S,
         lineNumber: 114,
         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$T,
+        fileName: _jsxFileName$S,
         lineNumber: 118,
         columnNumber: 13
       }
@@ -4285,14 +4285,14 @@
       iconColor: color,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$S,
         lineNumber: 119,
         columnNumber: 15
       }
     }, icon), title) : /*#__PURE__*/React__default["default"].createElement(StyledTitle$2, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$T,
+        fileName: _jsxFileName$S,
         lineNumber: 125,
         columnNumber: 13
       }
@@ -4318,8 +4318,8 @@
     title: ''
   };
 
-  const _excluded$t = ["children"];
-  var _jsxFileName$S = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
+  const _excluded$s = ["children"];
+  var _jsxFileName$R = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\breadcrumb\\Breadcrumb.js";
   const BreadcrumbStyle = styled('nav', {
     wordWrap: 'break-word',
     '& li+li:before': {
@@ -4365,7 +4365,7 @@
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$R,
         lineNumber: 42,
         columnNumber: 10
       }
@@ -4376,20 +4376,20 @@
     let {
       children
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
     return /*#__PURE__*/React__default["default"].createElement(BreadcrumbStyle, _extends({}, rest, {
       "aria-label": "breadcrumb",
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$R,
         lineNumber: 47,
         columnNumber: 5
       }
     }), /*#__PURE__*/React__default["default"].createElement(Ol, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$S,
+        fileName: _jsxFileName$R,
         lineNumber: 48,
         columnNumber: 7
       }
@@ -4592,8 +4592,8 @@
   };
   Badge.displayName = 'Badge';
 
-  const _excluded$s = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
-  var _jsxFileName$R = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
+  const _excluded$r = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+  var _jsxFileName$Q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\avatar\\Avatar.js";
   const StyledAvatar = styled(AvatarPrimitive__namespace.Root, {
     width: '32px',
     height: '32px',
@@ -4637,7 +4637,7 @@
       onClick,
       css
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
       className: className,
@@ -4646,7 +4646,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$Q,
         lineNumber: 46,
         columnNumber: 5
       }
@@ -4656,7 +4656,7 @@
       onLoadingStatusChange: onLoadingStatusChange,
       __self: this,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$Q,
         lineNumber: 47,
         columnNumber: 21
       }
@@ -4664,21 +4664,21 @@
       delayMs: delayMs,
       __self: this,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$Q,
         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$R,
+        fileName: _jsxFileName$Q,
         lineNumber: 52,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.UserFilled, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$R,
+        fileName: _jsxFileName$Q,
         lineNumber: 53,
         columnNumber: 13
       }
@@ -4695,8 +4695,8 @@
     delayMs: 0
   };
 
-  const _excluded$r = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
-  var _jsxFileName$Q = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
+  const _excluded$q = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
+  var _jsxFileName$P = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\image\\Image.js";
   const ContainerFallback = styled(Flex$1, {
     boxSizing: 'border-box',
     border: '2px dashed #C0C4C4',
@@ -4745,7 +4745,7 @@
       cssFallback,
       rounded
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
     if (src || fallback) {
       return /*#__PURE__*/React__default["default"].createElement(StyledImage, _extends({
@@ -4762,7 +4762,7 @@
       }, props, {
         __self: this,
         __source: {
-          fileName: _jsxFileName$Q,
+          fileName: _jsxFileName$P,
           lineNumber: 59,
           columnNumber: 7
         }
@@ -4778,14 +4778,14 @@
         }, cssFallback),
         __self: this,
         __source: {
-          fileName: _jsxFileName$Q,
+          fileName: _jsxFileName$P,
           lineNumber: 73,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(TextFallback, {
         __self: this,
         __source: {
-          fileName: _jsxFileName$Q,
+          fileName: _jsxFileName$P,
           lineNumber: 74,
           columnNumber: 9
         }
@@ -4853,8 +4853,8 @@
     fallbackTitle: 'Tidak ada foto'
   };
 
-  const _excluded$q = ["children", "label", "color", "css", "withClick", "side", "align"];
-  var _jsxFileName$P = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
+  const _excluded$p = ["children", "label", "color", "css", "withClick", "side", "align"];
+  var _jsxFileName$O = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\tooltip\\Tooltip.js";
   const slideUpAndFade$1 = keyframes({
     '0%': {
       opacity: 0,
@@ -4962,14 +4962,14 @@
       side,
       align
     } = _ref,
-        rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+        rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
     const [open, setOpen] = React.useState(false);
     return /*#__PURE__*/React__default["default"].createElement(TooltipBase, _extends({}, rest, {
       open: withClick ? open : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$O,
         lineNumber: 89,
         columnNumber: 5
       }
@@ -4977,7 +4977,7 @@
       asChild: true,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$O,
         lineNumber: 90,
         columnNumber: 7
       }
@@ -4985,7 +4985,7 @@
       onClick: () => withClick ? setOpen(!open) : undefined,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$O,
         lineNumber: 91,
         columnNumber: 9
       }
@@ -4996,7 +4996,7 @@
       css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$O,
         lineNumber: 93,
         columnNumber: 7
       }
@@ -5005,7 +5005,7 @@
       css: color === 'dark' ? darkArrow : lightArrow,
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$O,
         lineNumber: 100,
         columnNumber: 9
       }
@@ -5027,15 +5027,15 @@
     children: /*#__PURE__*/React__default["default"].createElement("div", {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$P,
+        fileName: _jsxFileName$O,
         lineNumber: 119,
         columnNumber: 13
       }
     })
   };
 
-  const _excluded$p = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
-  var _jsxFileName$O = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
+  const _excluded$o = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+  var _jsxFileName$N = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\progress\\Progress.js";
   const StyledProgress$1 = react.styled(ProgressPrimitive__namespace.Root, {
     position: 'relative',
     overflow: 'hidden',
@@ -5153,7 +5153,7 @@
       rounded,
       width
     } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledProgress$1, _extends({
       className: className,
@@ -5169,7 +5169,7 @@
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$N,
         lineNumber: 88,
         columnNumber: 5
       }
@@ -5182,7 +5182,7 @@
       },
       __self: this,
       __source: {
-        fileName: _jsxFileName$O,
+        fileName: _jsxFileName$N,
         lineNumber: 89,
         columnNumber: 7
       }
@@ -5205,30 +5205,91 @@
     rounded: true
   };
 
-  const _excluded$o = ["gap", "direction", "children"];
-  var _jsxFileName$N = "C:\\Project\\majoo-ui\\packages\\react\\src\\components\\form\\components\\FormGroup\\FormGroup.js";
-
-  const FormGroup = _ref => {
-    let {
-      gap,
-      direction,
-      children
-    } = _ref,
-        props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
-
-    return /*#__PURE__*/React__default["default"].createElement(Flex$1, _extends({
-      direction: direction,
-      gap: gap
-    }, props, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$N,
-        lineNumber: 6,
-        columnNumber: 3
+  const formLabelStyle = {
+    '& .form-label': {
+      alignItems: 'start !important',
+      '& > div': {
+        width: 175
+      },
+      '& > div > span[role="label"]': {
+        color: '$textPrimary',
+        fontSize: '$label',
+        fontWeight: 500,
+        lineHeight: '$label',
+        letterSpacings: '$label',
+        '@md': {
+          color: '$textPrimary',
+          fontSize: '$section-sub-title',
+          fontWeight: 600,
+          lineHeight: '$section-sub-title',
+          letterSpacings: '$section-sub-title'
+        }
       }
-    }), children);
+    }
   };
-
+  const FormGroup = styled(Flex$1, {
+    variants: {
+      responsive: {
+        input: Object.assign({
+          display: 'grid',
+          gridTemplateColumns: '1fr',
+          gap: '$spacing-03'
+        }, formLabelStyle, {
+          '@md': {
+            gridTemplateColumns: '175px 1fr',
+            columnGap: '$cozy',
+            rowGap: '$spacing-03',
+            '& > *:nth-child(n+3)': {
+              gridColumn: '2/3'
+            }
+          }
+        }),
+        button: Object.assign({
+          display: 'grid',
+          gridTemplateColumns: '1fr'
+        }, formLabelStyle, {
+          '@md': {
+            alignItems: 'center',
+            gridTemplateColumns: '175px 1fr',
+            columnGap: '$cozy',
+            rowGap: '$spacing-03',
+            '& > *:nth-child(n+3)': {
+              gridColumn: '2/3'
+            }
+          }
+        }),
+        switch: Object.assign({
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          '& *:nth-child(2)': {
+            justifySelf: 'flex-end'
+          },
+          '& *:nth-child(3)': {
+            gridColumn: '1/3'
+          },
+          '& *:nth-child(4)': {
+            gridColumn: '1/3'
+          }
+        }, formLabelStyle, {
+          '@md': {
+            alignItems: 'center',
+            gridTemplateColumns: '175px auto 1fr',
+            columnGap: '$cozy',
+            rowGap: '$spacing-03',
+            '& *:nth-child(2)': {
+              justifySelf: 'flex-start'
+            },
+            '& *:nth-child(3)': {
+              gridColumn: 'unset'
+            },
+            '& .retina-error': {
+              gridColumn: '2/3'
+            }
+          }
+        })
+      }
+    }
+  });
   FormGroup.displayName = 'FormGroup';
   FormGroup.propTypes = {
     gap: PropTypes__default["default"].number,
@@ -5276,6 +5337,7 @@
 
     return /*#__PURE__*/React__default["default"].createElement(Flex$1, {
       justify: "between",
+      className: "form-label",
       __self: undefined,
       __source: {
         fileName: _jsxFileName$M,
@@ -5376,7 +5438,8 @@
 
     return /*#__PURE__*/React__default["default"].createElement(StyledHelper, _extends({
       error: error,
-      variant: "helper"
+      variant: "helper",
+      className: "retina-error"
     }, props, {
       __self: undefined,
       __source: {
@@ -8212,6 +8275,7 @@
     borderRadius: '$lg',
     padding: '12px 16px',
     overflowY: 'auto',
+    minHeight: '40px',
     height: '100%'
   });
   var SelectItem = styled('div', {
@@ -8515,14 +8579,17 @@
                   },
                   disabled: disabled
                 }),
-                onClick: getToggleButtonProps().onClick
+                onClick: !isOpen ? getToggleButtonProps({
+                  disabled: disabled || readOnly
+                }).onClick : undefined
               }, void 0)
             }), void 0) : jsxRuntime.jsx(Button$1, __assign({}, getToggleButtonProps({
               disabled: disabled || readOnly
             }), {
               disabled: disabled,
               size: size,
-              readOnly: readOnly
+              readOnly: readOnly,
+              type: "button"
             }, {
               children: selectedItem ? selectedItem.render ? selectedItem.render(selectedItem) : jsxRuntime.jsx(Text$1, __assign({
                 color: "primary",
@@ -8536,14 +8603,36 @@
                 children: placeholder
               }), void 0)
             }), void 0), handleDownOption()]
-          }), void 0), jsxRuntime.jsxs(OptionWrapper$2, __assign({}, getMenuProps({}, {
+          }), void 0), isOpen && isLoading && jsxRuntime.jsx(Flex$1, __assign({
+            justify: "center",
+            align: "center",
+            css: {
+              position: 'absolute',
+              inset: 0,
+              zIndex: '$sticky',
+              top: placement === 'top' ? '-20px' : item.length > 0 ? size === 'lg' ? '40px' : '32px' : size === 'lg' ? '64px' : '56px',
+              // bottom: '80px',
+              width: '100%',
+              height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
+              backgroundColor: '$bgWhite',
+              opacity: 0.8,
+              transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+            }
+          }, {
+            children: jsxRuntime.jsx(Text$1, __assign({
+              variant: "caption"
+            }, {
+              children: "Loading...."
+            }), void 0)
+          }), void 0), jsxRuntime.jsxs(OptionWrapper$2, __assign({}, getMenuProps({
+            ref: scrollerRef
+          }, {
             suppressRefError: true
           }), {
             css: {
               display: isOpen ? 'block' : 'none'
             },
-            placement: placement,
-            ref: scrollerRef
+            placement: placement
           }, {
             children: [!search && embedSearch && isOpen && jsxRuntime.jsx(SelectContainer, __assign({
               css: {
@@ -8559,25 +8648,7 @@
                 onChange: handleInputValue,
                 placeholder: searchPlaceholder
               }, void 0)
-            }), void 0), isLoading && jsxRuntime.jsx(Flex$1, __assign({
-              justify: "center",
-              align: "center",
-              css: {
-                position: 'absolute',
-                inset: 0,
-                zIndex: '$sticky',
-                width: '100%',
-                height: '100%',
-                backgroundColor: '$bgWhite',
-                opacity: 0.8
-              }
-            }, {
-              children: jsxRuntime.jsx(Text$1, __assign({
-                variant: "caption"
-              }, {
-                children: "Loading .... "
-              }), void 0)
-            }), void 0), item.length > 0 ? jsxRuntime.jsx(ConditionalWrapper, __assign({
+            }), void 0), item.length > 0 || isLoading ? jsxRuntime.jsx(ConditionalWrapper, __assign({
               condition: !!fetchData && item.length > 0,
               wrapper: function (children) {
                 return jsxRuntime.jsx(InfiniteScroll__default["default"], __assign({
@@ -9458,6 +9529,7 @@
     }), {
       disabled: disabled || readOnly,
       size: size,
+      type: "button",
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
@@ -9472,7 +9544,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 423,
+        lineNumber: 424,
         columnNumber: 9
       }
     }), /*#__PURE__*/React__namespace.createElement(IconCaretDown, {
@@ -9480,7 +9552,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 428,
+        lineNumber: 429,
         columnNumber: 11
       }
     }))), showSelectedTag && selectedItems.length !== 0 && /*#__PURE__*/React__namespace.createElement(TagWrapper$1, {
@@ -9488,7 +9560,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 432,
+        lineNumber: 433,
         columnNumber: 9
       }
     }, selectedItems.map((selectedItem, index) => /*#__PURE__*/React__namespace.createElement(Tag, _extends({
@@ -9512,7 +9584,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 434,
+        lineNumber: 435,
         columnNumber: 13
       }
     }), selectedItem.name))), /*#__PURE__*/React__namespace.createElement(OptionWrapper$1, {
@@ -9524,14 +9596,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 455,
+        lineNumber: 456,
         columnNumber: 7
       }
     }, item.length !== 0 ? /*#__PURE__*/React__namespace.createElement(Option, _extends({}, getMenuProps(), {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 460,
+        lineNumber: 461,
         columnNumber: 11
       }
     }), isOpen && item.map((item, index) => /*#__PURE__*/React__namespace.createElement(ItemWrapper$1, _extends({
@@ -9549,7 +9621,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 463,
+        lineNumber: 464,
         columnNumber: 17
       }
     }), /*#__PURE__*/React__namespace.createElement(IconWrapper, {
@@ -9562,7 +9634,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 476,
+        lineNumber: 477,
         columnNumber: 19
       }
     }, item.isDisabled ? /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -9570,7 +9642,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 485,
+        lineNumber: 486,
         columnNumber: 23
       }
     }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__namespace.createElement(CheckOutline, {
@@ -9578,7 +9650,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 489,
+        lineNumber: 490,
         columnNumber: 25
       }
     })), /*#__PURE__*/React__namespace.createElement(Item$2, {
@@ -9588,7 +9660,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 493,
+        lineNumber: 494,
         columnNumber: 19
       }
     }, item.name)))) : /*#__PURE__*/React__namespace.createElement(Option, _extends({
@@ -9599,14 +9671,14 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 498,
+        lineNumber: 499,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__namespace.createElement(StyledDiv$1, {
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 499,
+        lineNumber: 500,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -9616,7 +9688,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 500,
+        lineNumber: 501,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__namespace.createElement(icons.CircleInfoOutline, {
@@ -9628,7 +9700,7 @@
       __self: this,
       __source: {
         fileName: _jsxFileName$u,
-        lineNumber: 501,
+        lineNumber: 502,
         columnNumber: 17
       }
     })), textEmptyItem))));
@@ -11376,9 +11448,20 @@
     height: 'auto',
     width: 'auto',
     borderRadius: '$lg',
-    // position: 'relative',
     backgroundColor: '$white',
-    boxShadow: '0px 2px 12px #00000014'
+    boxShadow: '0px 2px 12px #00000014',
+    variants: {
+      responsive: {
+        true: {
+          backgroundColor: 'transparent',
+          boxShadow: 'none',
+          '@md': {
+            backgroundColor: '$white',
+            boxShadow: '0px 2px 12px #00000014'
+          }
+        }
+      }
+    }
   });
   const Paper = _ref => {
     let {
@@ -11403,7 +11486,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$m,
-        lineNumber: 17,
+        lineNumber: 28,
         columnNumber: 5
       }
     }), children);
@@ -13616,7 +13699,7 @@
       } else {
         onCalendarDateChange(selectedDate);
       }
-    }, [pickerState.selectedMonth]);
+    }, ["".concat(pickerState.selectedMonth, "/").concat(pickerState.selectedYear)]);
     var multiDatePicker = calendars.length > 1;
 
     var renderTitleButton = function renderTitleButton(index) {
@@ -13669,7 +13752,8 @@
               });
             });
           }
-        }
+        },
+        type: "button"
       }, {
         children: jsxRuntime.jsx(icons.ChevronLeftOutline, {
           color: "currentColor"
@@ -13691,7 +13775,8 @@
               });
             });
           }
-        }
+        },
+        type: "button"
       }, {
         children: jsxRuntime.jsx(icons.ChevronRightOutline, {
           color: "currentColor"
@@ -13963,7 +14048,8 @@
                 type: TIME_PICKER
               });
             });
-          }
+          },
+          type: "button"
         }, {
           children: selected && selected[0] ? moment__default["default"](selected[0]).format('HH:mm') : moment__default["default"]().format('HH:mm')
         }), void 0)]
@@ -13988,7 +14074,8 @@
                 type: DATE_PICKER
               });
             });
-          }
+          },
+          type: "button"
         }, {
           children: "Done"
         }), void 0)]
@@ -14251,7 +14338,7 @@
       } else {
         onCalendarDateChange(selectedDate);
       }
-    }, [pickerState.selectedMonth]);
+    }, ["".concat(pickerState.selectedMonth, "/").concat(pickerState.selectedYear)]);
     var multiDatePicker = calendars.length > 1;
 
     var renderTitleButton = function renderTitleButton(index) {
@@ -14302,7 +14389,8 @@
               });
             });
           }
-        }
+        },
+        type: "button"
       }, {
         children: jsxRuntime.jsx(icons.ChevronLeftOutline, {
           color: "currentColor"
@@ -14324,7 +14412,8 @@
               });
             });
           }
-        }
+        },
+        type: "button"
       }, {
         children: jsxRuntime.jsx(icons.ChevronRightOutline, {
           color: "currentColor"
@@ -15464,20 +15553,27 @@
         minDate = _a.minDate,
         maxDate = _a.maxDate;
 
-    var _f = React.useState(date || dateValue),
+    var _f = React.useState(),
         value = _f[0],
         setValue = _f[1];
 
-    var _g = React.useState(defaultDate || defaultDateValue),
-        defaultValue = _g[0],
-        setDefaultValue = _g[1];
+    var _g = React.useState(defaultDate && !(defaultDate instanceof Date) || defaultDateValue && !(defaultDateValue instanceof Date) ? undefined : defaultDate || defaultDateValue),
+        defaultValue = _g[0];
+        _g[1];
 
     React.useEffect(function () {
-      setValue(date || dateValue);
-    }, [date, dateValue]);
-    React.useEffect(function () {
-      setDefaultValue(defaultDate || defaultDateValue);
-    }, [defaultDate, defaultDateValue]);
+      if (dateValue && !(dateValue instanceof Date) || date && !(date instanceof Date)) {
+        setValue(undefined);
+      } else {
+        setValue(date || dateValue);
+      }
+    }, [date, dateValue]); // useEffect(() => {
+    //   if ((defaultDate && !(defaultDate instanceof Date)) || (defaultDateValue && !(defaultDateValue instanceof Date))) {
+    //     setDefaultValue(undefined);
+    //   } else {
+    //     setDefaultValue(defaultDate || defaultDateValue);
+    //   }
+    // }, [defaultDate, defaultDateValue]);
 
     var _h = React.useReducer(pickerReducer, {
       selectedDate: defaultValue !== null && defaultValue !== void 0 ? defaultValue : value