@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 1.57 kB
JavaScript
"use strict";var e=require("react/jsx-runtime"),r=require("@mui/icons-material"),i=require("@mui/material"),o=require("../../BrandCore/Icon/Icon.js"),n=require("../AuthContainerSurface/AuthContainerSurface.js"),a=require("../../WebCore/AuthFormHeader/AuthFormHeader.js"),t=require("../../WebCore/Button/Button.js"),s=require("../../WebCore/ColorBackgroundContainer/ColorBackgroundContainer.js"),u=require("../../WebCore/Link/Link.js"),l=require("../../WebCore/TextBarDivider/TextBarDivider.js"),c=require("../../WebCore/Typography/Typography.js");module.exports=()=>{const d=i.useTheme();return e.jsx(s,{sx:{display:"flex",justifyContent:"center",py:[2,5,5]},gradient:"tone4",children:e.jsxs(n,{variation:"overlay",children:[e.jsx(a,{headerText:"Create your account"}),e.jsxs(i.Stack,{gap:1,width:"100%",children:[e.jsx(t,{variation:"secondary",fullWidth:!0,startIcon:e.jsx(o.default,{name:"social-google-full-colour",size:20}),children:"Log in up using Google"}),e.jsx(t,{variation:"secondary",fullWidth:!0,startIcon:e.jsx(o.default,{name:"social-linkedin-full-colour",size:20}),children:"Log in using LinkedIn"})]}),e.jsx(l,{text:"or"}),e.jsx(i.Box,{mb:d.spacing(d.custom.margin.lg),width:"100%",children:e.jsx(t,{variation:"secondary",fullWidth:!0,startIcon:e.jsx(r.EmailOutlined,{}),children:"Sign up with email"})}),e.jsxs(c,{align:"center",variation:"sm",component:"p",children:["By confirming your email, you agree to our ",e.jsx(u,{children:"Terms of use"})," and that you have read and understood our ",e.jsx(u,{children:"Privacy & Cookies Policy"}),"."]})]})})};