@majoo-ui/react 1.46.9-rc.1 → 1.46.9

package/index.esm.js

@@ -40,7 +40,7 @@ import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import request from 'superagent';
 import { useSticky } from 'react-table-sticky';
 
-var _jsxFileName$$ = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
+var _jsxFileName$_ = "C:\\Project\\majoo-ui\\packages\\react\\src\\majoo-provider\\ThemeProvider.js";
 
 function ThemeProvider({
   theme,
@@ -50,7 +50,7 @@ function ThemeProvider({
     className: theme,
     __self: this,
     __source: {
-      fileName: _jsxFileName$$,
+      fileName: _jsxFileName$_,
       lineNumber: 5,
       columnNumber: 10
     }
@@ -2228,9 +2228,9 @@ Flex$1.defaultProps = {
 };
 Flex$1.displayName = 'Flex';
 
-const _excluded$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: {
@@ -2404,7 +2404,7 @@ const Grid = _ref => {
   let {
     children
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
 
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
@@ -2415,7 +2415,7 @@ const Grid = _ref => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$_,
+      fileName: _jsxFileName$Z,
       lineNumber: 178,
       columnNumber: 5
     }
@@ -2471,7 +2471,7 @@ const GridItem = _ref2 => {
     }),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$_,
+      fileName: _jsxFileName$Z,
       lineNumber: 232,
       columnNumber: 5
     }
@@ -2488,8 +2488,8 @@ GridItem.propTypes = {
 };
 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',
@@ -2518,7 +2518,7 @@ const PageContainer = _ref => {
     css,
     contentHeader
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
 
   return /*#__PURE__*/React__default.createElement(StyledDiv$3, _extends({
     id: "retina-container",
@@ -2528,7 +2528,7 @@ const PageContainer = _ref => {
   }, props, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Z,
+      fileName: _jsxFileName$Y,
       lineNumber: 28,
       columnNumber: 5
     }
@@ -2841,8 +2841,8 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), 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';
@@ -3007,7 +3007,7 @@ const Toast = _ref => {
     captionOfAction,
     hrefOfAction
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
 
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
@@ -3036,7 +3036,7 @@ const Toast = _ref => {
     onExited: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 205,
       columnNumber: 5
     }
@@ -3048,7 +3048,7 @@ const Toast = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 216,
       columnNumber: 9
     }
@@ -3058,7 +3058,7 @@ const Toast = _ref => {
     onClick: onClick,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 223,
       columnNumber: 11
     }
@@ -3066,7 +3066,7 @@ const Toast = _ref => {
     direction: "column",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 224,
       columnNumber: 13
     }
@@ -3074,7 +3074,7 @@ const Toast = _ref => {
     direction: "row",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 225,
       columnNumber: 15
     }
@@ -3082,7 +3082,7 @@ const Toast = _ref => {
     variant: variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 226,
       columnNumber: 17
     }
@@ -3094,7 +3094,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 227,
       columnNumber: 17
     }
@@ -3102,7 +3102,7 @@ const Toast = _ref => {
     justify: "between",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 235,
       columnNumber: 21
     }
@@ -3117,7 +3117,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 236,
       columnNumber: 23
     }
@@ -3126,7 +3126,7 @@ const Toast = _ref => {
     color: "secondary",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 250,
       columnNumber: 19
     }
@@ -3140,7 +3140,7 @@ const Toast = _ref => {
     hasTitle: !!title,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 254,
       columnNumber: 17
     }
@@ -3149,7 +3149,7 @@ const Toast = _ref => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 263,
       columnNumber: 19
     }
@@ -3164,7 +3164,7 @@ const Toast = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$Y,
+      fileName: _jsxFileName$X,
       lineNumber: 267,
       columnNumber: 17
     }
@@ -3188,7 +3188,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.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: {
@@ -3230,7 +3230,7 @@ const ToastContainer = ({
   return /*#__PURE__*/React.createElement(Portal, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$W,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3238,7 +3238,7 @@ const ToastContainer = ({
     position: position,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$X,
+      fileName: _jsxFileName$W,
       lineNumber: 44,
       columnNumber: 7
     }
@@ -3249,7 +3249,7 @@ const ToastContainer = ({
     }, toast, {
       __self: undefined,
       __source: {
-        fileName: _jsxFileName$X,
+        fileName: _jsxFileName$W,
         lineNumber: 46,
         columnNumber: 18
       }
@@ -3257,8 +3257,8 @@ const ToastContainer = ({
   })));
 };
 
-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 = ({
@@ -3270,7 +3270,7 @@ const ToastProvider = ({
     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;
@@ -3300,7 +3300,7 @@ const ToastProvider = ({
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$V,
       lineNumber: 43,
       columnNumber: 5
     }
@@ -3309,7 +3309,7 @@ const ToastProvider = ({
     position: TOP_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$V,
       lineNumber: 45,
       columnNumber: 7
     }
@@ -3318,7 +3318,7 @@ const ToastProvider = ({
     position: TOP_LEFT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$V,
       lineNumber: 49,
       columnNumber: 7
     }
@@ -3327,7 +3327,7 @@ const ToastProvider = ({
     position: BOTTOM_RIGHT_POSITION,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$W,
+      fileName: _jsxFileName$V,
       lineNumber: 53,
       columnNumber: 7
     }
@@ -3336,14 +3336,14 @@ const ToastProvider = ({
     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,
@@ -3356,14 +3356,14 @@ function MajooProvider({
     theme: theme$1,
     __self: this,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$U,
       lineNumber: 15,
       columnNumber: 10
     }
   }, /*#__PURE__*/React__default.createElement(ToastProvider, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$V,
+      fileName: _jsxFileName$U,
       lineNumber: 16,
       columnNumber: 5
     }
@@ -3377,8 +3377,8 @@ MajooProvider.propTypes = {
   disableGlobalStyle: PropTypes.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.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -3460,7 +3460,7 @@ const BannerTitle = props => /*#__PURE__*/React.createElement(Title$2, _extends(
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$U,
+    fileName: _jsxFileName$T,
     lineNumber: 91,
     columnNumber: 3
   }
@@ -3482,7 +3482,7 @@ const BannerDescription = props => /*#__PURE__*/React.createElement(Description,
 }, props, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$U,
+    fileName: _jsxFileName$T,
     lineNumber: 108,
     columnNumber: 3
   }
@@ -3505,7 +3505,7 @@ const BannerLink = ({
 }) => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$U,
+    fileName: _jsxFileName$T,
     lineNumber: 125,
     columnNumber: 3
   }
@@ -3517,7 +3517,7 @@ const BannerLink = ({
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$U,
+    fileName: _jsxFileName$T,
     lineNumber: 127,
     columnNumber: 7
   }
@@ -3544,7 +3544,7 @@ BannerLink.defaultProps = {
 const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$U,
+    fileName: _jsxFileName$T,
     lineNumber: 154,
     columnNumber: 3
   }
@@ -3556,7 +3556,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   },
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$U,
+    fileName: _jsxFileName$T,
     lineNumber: 156,
     columnNumber: 7
   }
@@ -3565,7 +3565,7 @@ const BannerClose = () => /*#__PURE__*/React.createElement(Context$2.Consumer, {
   size: "16px",
   __self: undefined,
   __source: {
-    fileName: _jsxFileName$U,
+    fileName: _jsxFileName$T,
     lineNumber: 163,
     columnNumber: 9
   }
@@ -3575,7 +3575,7 @@ const SingleTagBanner = props => {
   return /*#__PURE__*/React.createElement(React.Fragment, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 171,
       columnNumber: 5
     }
@@ -3585,7 +3585,7 @@ const SingleTagBanner = props => {
     align: "end",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 172,
       columnNumber: 7
     }
@@ -3598,21 +3598,21 @@ const SingleTagBanner = props => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 173,
       columnNumber: 9
     }
   }, props.title && /*#__PURE__*/React.createElement(BannerTitle, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 181,
       columnNumber: 27
     }
   }, props.title), props.description && /*#__PURE__*/React.createElement(BannerDescription, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 182,
       columnNumber: 33
     }
@@ -3621,7 +3621,7 @@ const SingleTagBanner = props => {
     variant: props.variant,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 185,
       columnNumber: 11
     }
@@ -3634,7 +3634,7 @@ const SingleTagBanner = props => {
     closeCenter: !props.title && !props.link,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 190,
       columnNumber: 7
     }
@@ -3643,7 +3643,7 @@ const SingleTagBanner = props => {
     size: "16px",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 198,
       columnNumber: 9
     }
@@ -3662,7 +3662,7 @@ const Banner = _ref => {
     children,
     bannerBlock
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
 
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
@@ -3672,7 +3672,7 @@ const Banner = _ref => {
   }, rest, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 206,
       columnNumber: 5
     }
@@ -3689,7 +3689,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 208,
       columnNumber: 9
     }
@@ -3700,7 +3700,7 @@ const Banner = _ref => {
     },
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 215,
       columnNumber: 11
     }
@@ -3714,7 +3714,7 @@ const Banner = _ref => {
     onRemove: onRemove,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$U,
+      fileName: _jsxFileName$T,
       lineNumber: 218,
       columnNumber: 9
     }
@@ -4024,8 +4024,8 @@ const Button$2 = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), 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',
@@ -4162,7 +4162,7 @@ const Card = _ref => {
     textColor,
     icon
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
 
   return /*#__PURE__*/React__default.createElement(CardComponent, {
     className: className,
@@ -4175,7 +4175,7 @@ const Card = _ref => {
     }, props.css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$S,
       lineNumber: 103,
       columnNumber: 5
     }
@@ -4183,14 +4183,14 @@ const Card = _ref => {
     color: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$S,
       lineNumber: 114,
       columnNumber: 7
     }
   }), title !== '' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined ? /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$S,
       lineNumber: 118,
       columnNumber: 13
     }
@@ -4199,14 +4199,14 @@ const Card = _ref => {
     iconColor: color,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$S,
       lineNumber: 119,
       columnNumber: 15
     }
   }, icon), title) : /*#__PURE__*/React__default.createElement(StyledTitle$2, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$T,
+      fileName: _jsxFileName$S,
       lineNumber: 125,
       columnNumber: 13
     }
@@ -4232,8 +4232,8 @@ Card.defaultProps = {
   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': {
@@ -4279,7 +4279,7 @@ const BreadcrumbLinkBase = props => {
   return /*#__PURE__*/React__default.createElement(BreadcrumbLinkStyle, _extends({}, props, aria, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$R,
       lineNumber: 42,
       columnNumber: 10
     }
@@ -4290,20 +4290,20 @@ const BreadcrumbBase = _ref => {
   let {
     children
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$s);
 
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb",
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$R,
       lineNumber: 47,
       columnNumber: 5
     }
   }), /*#__PURE__*/React__default.createElement(Ol, {
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$S,
+      fileName: _jsxFileName$R,
       lineNumber: 48,
       columnNumber: 7
     }
@@ -4508,8 +4508,8 @@ Badge.defaultProps = {
 };
 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.Root, {
   width: '32px',
   height: '32px',
@@ -4553,7 +4553,7 @@ function Avatar(_ref) {
     onClick,
     css
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$s);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
 
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
@@ -4562,7 +4562,7 @@ function Avatar(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$Q,
       lineNumber: 46,
       columnNumber: 5
     }
@@ -4572,7 +4572,7 @@ function Avatar(_ref) {
     onLoadingStatusChange: onLoadingStatusChange,
     __self: this,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$Q,
       lineNumber: 47,
       columnNumber: 21
     }
@@ -4580,21 +4580,21 @@ function Avatar(_ref) {
     delayMs: delayMs,
     __self: this,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$Q,
       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$R,
+      fileName: _jsxFileName$Q,
       lineNumber: 52,
       columnNumber: 11
     }
   }, /*#__PURE__*/React__default.createElement(UserFilled, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$R,
+      fileName: _jsxFileName$Q,
       lineNumber: 53,
       columnNumber: 13
     }
@@ -4611,8 +4611,8 @@ Avatar.defaultProps = {
   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',
@@ -4661,7 +4661,7 @@ function Image(_ref) {
     cssFallback,
     rounded
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
 
   if (src || fallback) {
     return /*#__PURE__*/React__default.createElement(StyledImage, _extends({
@@ -4678,7 +4678,7 @@ function Image(_ref) {
     }, props, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$P,
         lineNumber: 59,
         columnNumber: 7
       }
@@ -4694,14 +4694,14 @@ function Image(_ref) {
       }, cssFallback),
       __self: this,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$P,
         lineNumber: 73,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(TextFallback, {
       __self: this,
       __source: {
-        fileName: _jsxFileName$Q,
+        fileName: _jsxFileName$P,
         lineNumber: 74,
         columnNumber: 9
       }
@@ -4769,8 +4769,8 @@ Image.defaultProps = {
   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,
@@ -4878,14 +4878,14 @@ const Tooltip = _ref => {
     side,
     align
   } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$p);
 
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
     open: withClick ? open : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$O,
       lineNumber: 89,
       columnNumber: 5
     }
@@ -4893,7 +4893,7 @@ const Tooltip = _ref => {
     asChild: true,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$O,
       lineNumber: 90,
       columnNumber: 7
     }
@@ -4901,7 +4901,7 @@ const Tooltip = _ref => {
     onClick: () => withClick ? setOpen(!open) : undefined,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$O,
       lineNumber: 91,
       columnNumber: 9
     }
@@ -4912,7 +4912,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? Object.assign({}, dark, css) : Object.assign({}, ligth, css),
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$O,
       lineNumber: 93,
       columnNumber: 7
     }
@@ -4921,7 +4921,7 @@ const Tooltip = _ref => {
     css: color === 'dark' ? darkArrow : lightArrow,
     __self: undefined,
     __source: {
-      fileName: _jsxFileName$P,
+      fileName: _jsxFileName$O,
       lineNumber: 100,
       columnNumber: 9
     }
@@ -4943,15 +4943,15 @@ Tooltip.defaultProps = {
   children: /*#__PURE__*/React__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 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -5069,7 +5069,7 @@ function Progress$1(_ref) {
     rounded,
     width
   } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
 
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
@@ -5085,7 +5085,7 @@ function Progress$1(_ref) {
   }, props, {
     __self: this,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$N,
       lineNumber: 88,
       columnNumber: 5
     }
@@ -5098,7 +5098,7 @@ function Progress$1(_ref) {
     },
     __self: this,
     __source: {
-      fileName: _jsxFileName$O,
+      fileName: _jsxFileName$N,
       lineNumber: 89,
       columnNumber: 7
     }
@@ -5121,30 +5121,91 @@ Progress$1.defaultProps = {
   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.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.number,
@@ -5192,6 +5253,7 @@ const FormLabel = _ref => {
 
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
+    className: "form-label",
     __self: undefined,
     __source: {
       fileName: _jsxFileName$M,
@@ -5292,7 +5354,8 @@ const FormHelper = _ref => {
 
   return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
     error: error,
-    variant: "helper"
+    variant: "helper",
+    className: "retina-error"
   }, props, {
     __self: undefined,
     __source: {
@@ -11206,9 +11269,20 @@ const PaperComponent = styled('div', {
   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 {
@@ -11233,7 +11307,7 @@ const Paper = _ref => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$m,
-      lineNumber: 17,
+      lineNumber: 28,
       columnNumber: 5
     }
   }), children);