@zeniai/web-components 3.16.99 → 3.17.2

package/dist/SignIn-DWUlsHgR.cjs

@@ -0,0 +1,448 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./vendor-.pnpm-D0ILHvHB.cjs"),g=require("react"),n=require("@emotion/styled"),X=require("@zeniai/client-epic-state"),o=require("./index-gTpRqqAW.cjs"),Ve=require("./ZeniCopyright-DjQ0DUSW.cjs"),He=require("./ProductsCarousel-O6Qnz4y9.cjs"),Z=require("@emotion/react"),Ne=require("./handshake-DIiBbbRw.cjs");function We(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const p=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,p.get?p:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const j=We(g),Ge=(e=.68,r=1.3,s=1440,p=2560)=>{const[c,l]=g.useState(()=>typeof window<"u"?window.innerWidth:s);return g.useEffect(()=>{const m=()=>{l(window.innerWidth)};return window.addEventListener("resize",m),()=>window.removeEventListener("resize",m)},[]),qe(c,e,r,s,p)},qe=(e,r,s,p,c)=>{const l=Math.max(p,Math.min(c,e)),m=s-r,x=c-p,h=x>0?(l-p)/x:0;return r+m*h},ze=e=>j.createElement("svg",{viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},j.createElement("path",{d:"M5.49686 0.437846C3.50884 1.1044 1.81485 2.56223 0.871312 4.40709C0.542169 5.04355 0.305187 5.71871 0.160364 6.41967C-0.199498 8.15702 0.0506501 10.0105 0.866923 11.593C1.39794 12.6251 2.16155 13.5454 3.08315 14.2636C3.95647 14.943 4.97023 15.4505 6.04982 15.73C7.41028 16.0869 8.8585 16.0783 10.2277 15.773C11.4653 15.4935 12.6371 14.9129 13.5718 14.07C14.5592 13.1799 15.2658 12.0102 15.6388 10.7502C16.047 9.37833 16.0996 7.9119 15.8451 6.50138C13.2866 6.50138 10.7236 6.50138 8.16511 6.50138C8.16511 7.54207 8.16511 8.58276 8.16511 9.62345C9.64844 9.62345 11.1318 9.62345 12.6151 9.62345C12.444 10.6211 11.8383 11.5328 10.9826 12.0962C10.4428 12.4531 9.82399 12.681 9.18326 12.7928C8.54253 12.9003 7.87546 12.9132 7.23473 12.7885C6.58084 12.6595 5.96205 12.3929 5.41787 12.0188C4.54893 11.421 3.88626 10.548 3.54834 9.56325C3.20164 8.56126 3.19725 7.44746 3.54834 6.44977C3.7941 5.74451 4.19784 5.09515 4.73325 4.56191C5.39153 3.89965 6.24731 3.42661 7.17329 3.23309C7.96323 3.06968 8.79706 3.09978 9.56945 3.3277C10.2277 3.52122 10.8334 3.87815 11.3293 4.34259C11.8296 3.85235 12.3299 3.3621 12.8302 2.87186C13.0935 2.60954 13.3699 2.35581 13.6245 2.08489C12.8653 1.39683 11.97 0.842081 10.9957 0.48945C9.24031 -0.147006 7.26545 -0.159907 5.49686 0.437846Z",fill:"white"}),j.createElement("path",{d:"M5.49686 0.43784C7.26106 -0.159913 9.2403 -0.147012 10.9957 0.485144C11.97 0.837775 12.8609 1.38822 13.6245 2.08058C13.3699 2.35151 13.0935 2.60523 12.8302 2.86755C12.3299 3.3578 11.8296 3.84804 11.3293 4.33828C10.8334 3.87384 10.2277 3.52121 9.56945 3.32339C8.79706 3.09547 7.96323 3.06107 7.17329 3.22879C6.25169 3.4223 5.39592 3.89534 4.73325 4.5576C4.19784 5.08655 3.79409 5.74021 3.54833 6.44547C2.65745 5.76601 1.76657 5.09085 0.871307 4.41139C1.81485 2.56223 3.50884 1.1044 5.49686 0.43784Z",fill:"#EA4335"}),j.createElement("path",{d:"M0.164771 6.41539C0.309594 5.71873 0.546576 5.03927 0.875719 4.40282C1.7666 5.08228 2.65748 5.75744 3.55274 6.4369C3.20166 7.43888 3.20166 8.55268 3.55274 9.55037C2.66186 10.2298 1.77099 10.9093 0.880107 11.5844C0.0550569 10.0062 -0.195091 8.15275 0.164771 6.41539Z",fill:"#FBBC05"}),j.createElement("path",{d:"M8.16515 6.49707C10.7237 6.49707 13.2866 6.49707 15.8451 6.49707C16.0997 7.90329 16.0426 9.36972 15.6389 10.7458C15.2659 12.0059 14.5593 13.1756 13.5719 14.0657C12.7073 13.4078 11.8428 12.7498 10.9782 12.0919C11.834 11.5285 12.4396 10.6168 12.6108 9.61914C11.1274 9.61914 9.6441 9.61914 8.16077 9.61914C8.16516 8.57845 8.16515 7.53776 8.16515 6.49707Z",fill:"#4285F4"}),j.createElement("path",{d:"M0.871338 11.5887C1.76222 10.9135 2.6531 10.2341 3.54397 9.55461C3.88628 10.5394 4.54457 11.4124 5.4135 12.0101C5.95769 12.3843 6.58086 12.6509 7.23037 12.7799C7.8711 12.9089 8.53377 12.8917 9.17889 12.7842C9.81962 12.6724 10.4384 12.4445 10.9782 12.0875C11.8428 12.7455 12.7073 13.4034 13.5718 14.0614C12.6371 14.9086 11.4653 15.4848 10.2278 15.7644C8.85853 16.0697 7.4103 16.0783 6.04985 15.7214C4.97026 15.4418 3.9565 14.9387 3.08317 14.2549C2.16596 13.5411 1.40235 12.6208 0.871338 11.5887Z",fill:"#34A853"})),Me=e=>j.createElement("svg",{viewBox:"0 0 16 16",fill:"none",xmlns:"http://www.w3.org/2000/svg",...e},j.createElement("path",{d:"M0 0H7.58546V7.58546H0V0Z",fill:"#F25022"}),j.createElement("path",{d:"M8.37742 0H15.9629V7.58546H8.37742V0Z",fill:"#7FBA00"}),j.createElement("path",{d:"M0 8.37741H7.58546V15.9629H0V8.37741Z",fill:"#00A4EF"}),j.createElement("path",{d:"M8.41454 8.41454H16V16H8.41454V8.41454Z",fill:"#FFB900"})),Ue=o.appLocale.getLocalizedStrings(),Je=n.div`
+  margin-left: ${o.Space.sp3};
+  color: ${e=>e.theme.colors.primary};
+  font-family: ${o.fonts.Roboto};
+  ${e=>{const r=e.windowSize==="small"?o.textStyles.standardMedium:o.textStyles.largeMedium;return`
+      font-size: ${r.fontSize};
+      font-weight: ${r.fontWeight};
+      line-height: ${r.lineHeight};
+    `}}
+`,Ke=n.img`
+  height: ${o.Space.sp4};
+  width: ${o.Space.sp4};
+  border-radius: 50%;
+  justify-content: center;
+  color: ${e=>e.theme.colors.hero};
+`,Xe=n.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.Space.sp1};
+`,Qe=n(o.SvgArrowFilledBottom)`
+  height: 12px;
+  width: 12px;
+  color: ${e=>e.theme.colors.hero};
+`,Ye=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: ${e=>e.windowSize==="small"?"100%":"264px"};
+  ${e=>e.setWidth===!1?Z.css`
+          width: 100%;
+          min-width: 264px;
+        `:null};
+  min-height: ${e=>e.windowSize==="small"?o.Space.sp7:o.Space.sp8};
+  border: 1px solid;
+  box-sizing: border-box;
+  border-radius: ${o.Space.sp2};
+
+  opacity: ${e=>e.disabled?.32:1};
+  border-color: ${e=>e.disabled?e.theme.colors.hero:e.theme.colors.grey1};
+  color: ${e=>e.theme.colors.brandColorSapphireLight};
+  background-color: ${e=>e.theme.colors.grey5};
+  cursor: ${e=>e.disabled?"default":"pointer"};
+  &:hover {
+    border-color: ${e=>e.theme.colors.primary};
+  }
+`,eo=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`,oo=n(ze)`
+  height: ${o.Space.sp3};
+  width: ${o.Space.sp3};
+`,to=n(ze)`
+  height: ${o.Space.sp4};
+  width: ${o.Space.sp4};
+`,no=n(Me)`
+  height: ${o.Space.sp4};
+  width: ${o.Space.sp4};
+`,io=n(Me)`
+  height: ${o.Space.sp3};
+  width: ${o.Space.sp3};
+`,so=n(o.SmallMedium)`
+  color: ${e=>e.theme.colors.primary};
+`,ro=n(o.SmallRegular)`
+  color: ${e=>e.theme.colors.primary};
+`,lo=n.div`
+  padding: ${o.Space.sp2} 12px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  column-gap: ${o.Space.sp3};
+`,ao=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: ${o.Space.sp2};
+`,co=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`,po=({type:e,titleText:r})=>{const s=o.useWindowSizeContext();return t.jsxRuntimeExports.jsxs(eo,{children:[e==="Google"?t.jsxRuntimeExports.jsx(oo,{}):t.jsxRuntimeExports.jsx(io,{}),t.jsxRuntimeExports.jsx(Je,{windowSize:s,children:r})]})},xo=({type:e,email:r,firstName:s,photo:p})=>t.jsxRuntimeExports.jsxs(lo,{children:[t.jsxRuntimeExports.jsxs(ao,{children:[t.jsxRuntimeExports.jsx(Ke,{src:p?.href,alt:r,onError:({currentTarget:c})=>{c.onerror=null,c.src=o.AvatarSVG},loading:"lazy"}),t.jsxRuntimeExports.jsxs(co,{children:[t.jsxRuntimeExports.jsxs(so,{children:[Ue.signIn.continueAs," ",s??""]}),t.jsxRuntimeExports.jsxs(Xe,{children:[t.jsxRuntimeExports.jsx(ro,{children:r}),t.jsxRuntimeExports.jsx(Qe,{})]})]})]}),e==="Google"?t.jsxRuntimeExports.jsx(to,{}):t.jsxRuntimeExports.jsx(no,{})]});function Q({type:e,titleText:r,disabled:s,loadingIndication:p,email:c,firstName:l,photo:m,onClick:x}){const h=o.useWindowSizeContext();return t.jsxRuntimeExports.jsx(Ye,{setWidth:c==null,windowSize:h,disabled:s===!0,onClick:s===!0?void 0:x,children:p===!0?t.jsxRuntimeExports.jsx(o.ActivityIndicator,{size:"Standard",start:p===!0}):t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:c!=null?t.jsxRuntimeExports.jsx(xo,{type:e,email:c,firstName:l,photo:m}):t.jsxRuntimeExports.jsx(po,{type:e,titleText:r})})})}const fe=({inProgress:e,disabled:r,onSuccess:s,onSignedInCallback:p,getSignedInUser:c,onError:l,email:m,firstName:x,photo:h})=>{const{analytics:$}=o.useToolkitContext(),E=t.useGoogleLogin({onSuccess:s,flow:"auth-code",onError:l}),w=()=>{if(c()!=null){p();return}$.trackSignInClick("google"),E()};return t.jsxRuntimeExports.jsx(Q,{onClick:w,disabled:r,type:"Google",titleText:o.appLocale.getLocalizedStrings().signIn.signInGoogleButton,loadingIndication:e,email:m,firstName:x,photo:h})},Se=e=>{const{clientId:r,scopes:s,getSignedInUser:p,onSignedInCallback:c,render:l,onSuccess:m,onFailure:x,disabled:h}=e,{analytics:$}=o.useToolkitContext();let{responseType:E,responseMode:w,prompt:I,redirectUri:z}=e,d,C;const M="https://login.microsoftonline.com/common/oauth2/v2.0/authorize",V=["openid","profile"];E=E??"code",w=w??"fragment",I=I??"consent",g.useEffect(()=>{const f=X.toZeniUrl(window.location[w==="fragment"?"hash":"search"],!0).query;(window.location.search||window.location.hash)&&(f.code!=null||f.access_token!=null||f.error!=null)&&L()},[]);const k=()=>{const f=encodeURIComponent((s??V).join(" "));return z=z??window.location.origin+window.location.pathname,`${M}?client_id=${r}&response_type=${E}&redirect_uri=${encodeURIComponent(z)}&scope=${f}&prompt=${I}&response_mode=${w}`},L=()=>{window.opener?.authScope.authCompletedCB(X.toZeniUrl(window.location[w==="fragment"?"hash":"search"],!0).query),window.close()};return l({onClick:()=>{if(p()!=null){c();return}$.trackSignInClick("microsoft"),d=!1;const f=(u,P)=>{const B=window.screen.width/2-287.5,T=window.screen.height/2-600/2,y=window.open(u,P,`toolbar=0,status=0, width=575, height=600, top=${T}, left=${B}`);C=setInterval(()=>{y.closed&&!d&&(x({error:o.appLocale.getLocalizedStrings().signIn.signInError,errorDetail:{reason:"Signin popup window was closed"}}),clearInterval(C))},500)};window.authScope={authCompletedCB:u=>{d=!0,clearInterval(C),E==="code"&&u.code?m({code:u.code}):E==="token"&&u.access_token?m({accessToken:u.access_token,tokenType:u.token_type,scope:u.scope}):u.error==="access_denied"?x({error:o.appLocale.getLocalizedStrings().signIn.signInAuthError,errorDetail:u}):x({error:o.appLocale.getLocalizedStrings().signIn.signInError,errorDetail:u})}},f(k(),"Microsoft Sign In")},disabled:h})},O={width:new o.ResponsiveSized(343,572,572),containerTop:new o.ResponsiveSized(17,25,25)},{signIn:{emailNotFoundPopup:D},common:{gotIt:mo}}=o.appLocale.getLocalizedStrings();function uo({signInError:e,onClose:r}){const s=o.useWindowSizeContext(),[p,c]=g.useState(!1),l=e?.email;return t.jsxRuntimeExports.jsx(go,{windowSize:s,role:"presentation",style:{background:o.Colors.overlayDark},children:t.jsxRuntimeExports.jsx(t.ClickAwayListener,{onClickAway:()=>{c(!0),r()},children:t.jsxRuntimeExports.jsxs(So,{windowSize:s,className:p?"containerClass fade":"containerClass",fade:p,children:[t.jsxRuntimeExports.jsxs(jo,{children:[D.title,t.jsxRuntimeExports.jsx(Co,{children:l})]}),t.jsxRuntimeExports.jsxs(yo,{children:[t.jsxRuntimeExports.jsxs(K,{children:[t.jsxRuntimeExports.jsx(U,{children:t.jsxRuntimeExports.jsx(wo,{})}),t.jsxRuntimeExports.jsx(J,{windowSize:s,children:D.confirmEmail})]}),t.jsxRuntimeExports.jsxs(K,{children:[t.jsxRuntimeExports.jsx(U,{children:t.jsxRuntimeExports.jsx($o,{})}),t.jsxRuntimeExports.jsx(J,{windowSize:s,children:D.checkAccess})]}),t.jsxRuntimeExports.jsxs(K,{children:[t.jsxRuntimeExports.jsx(U,{children:t.jsxRuntimeExports.jsx(Eo,{})}),t.jsxRuntimeExports.jsx(J,{windowSize:s,children:D.contactZeni})]})]}),t.jsxRuntimeExports.jsx(o.Button,{label:mo,variant:"primary",onClick:()=>{c(!0),r()}})]})})})}const go=n.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${o.Colors.overlayDark};
+  .fade {
+    animation: ${e=>fo(e)} 0.25s linear;
+  }
+`,ho=({windowSize:e})=>Z.keyframes`
+  0% {
+    top: 100%;
+  }
+  100% {
+    top: ${O.containerTop.valuePercentage(e)};
+  }
+`,fo=({windowSize:e})=>Z.keyframes`
+  0% {
+    top: ${O.containerTop.valuePercentage(e)};
+  }
+  100% {
+    top: 100%;
+  }
+`,So=n.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  background: ${e=>e.theme.colors.grey5};
+  border-radius: ${o.Space.sp2};
+  position: relative;
+  top: ${e=>e.fade?"100%":O.containerTop.valuePercentage(e.windowSize)};
+  padding: ${o.Space.sp5} ${o.Space.sp0};
+  width: ${e=>O.width.valuePx(e.windowSize)};
+  animation: ${e=>ho(e)} 0.25s linear;
+  box-shadow: ${o.Colors.Elevation2Dark};
+  overflow: hidden;
+  z-index: 1;
+  ::before {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    background-image: ${e=>e.theme.mode==="dark"?"url(https://storage.googleapis.com/zeni-apis.appspot.com/images/infinite-pattern-dark-1.svg)":"url(https://storage.googleapis.com/zeni-apis.appspot.com/images/infinite-pattern-light-1.svg)"};
+    z-index: -1;
+    transform: rotate(-8.9deg);
+    background-size: contain;
+    background-repeat: no-repeat;
+    scale: ${e=>e.windowSize==="small"?"142%":"125%"};
+    background-position: ${e=>e.windowSize==="small"?"5px 100%":"42px 180%"};
+  }
+`,jo=n(o.H6Regular)`
+  margin-bottom: ${o.Space.sp6};
+  color: ${o.Colors.important};
+  padding: ${o.Space.sp0} ${o.Space.sp6};
+`,U=n.div`
+  margin-right: 12px;
+  height: ${o.Space.sp7};
+  width: ${o.Space.sp7};
+  background-color: ${e=>e.theme.mode==="dark"?o.Colors.brandColorJadeDark:o.Colors.brandColorJadeLight};
+  border-radius: ${o.Space.sp4};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`,J=n(o.StandardRegular)`
+  width: calc(100% - 120px);
+  color: ${e=>e.theme.colors.primary};
+  text-align: start;
+`,K=n.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${o.Space.sp5};
+`,Y=e=>Z.css`
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+  color: ${e.theme.colors.primary};
+`,wo=n(o.SvgEmail)`
+  ${Y};
+`,Eo=n(Ne.SvgHandshake)`
+  ${Y};
+`,$o=n(o.SvgDashboard)`
+  ${Y};
+`,Co=n(o.H6SemiBold)`
+  word-break: break-all;
+`,yo=n.div`
+  padding: ${o.Space.sp0} ${o.Space.sp6};
+`,a=o.appLocale.getLocalizedStrings(),Le={signInHeading:new o.ResponsiveSizedStyle("h5Regular","h2Regular"),signInMessage:new o.ResponsiveSizedStyle("standardRegular","h6Regular")},b={ZeniLogoContainerLeftMargin:new o.ResponsiveSized(o.sp[0],o.sp[5]),ZeniLogoContainerTopMargin:new o.ResponsiveSized(12,o.sp[3]),SignInHeadingMarginBottom:new o.ResponsiveSized(o.sp[2],o.sp[3]),headingContainerTopMargin:new o.ResponsiveSized(36,10),signInContainerPaddingTop:new o.ResponsiveSized(o.sp[12],o.sp[4]),emailInputFontSize:new o.ResponsiveSized(o.textStyles.standardRegular.fontSizeValue,o.textStyles.extraLargeRegular.fontSizeValue),emailInputVerticalPadding:new o.ResponsiveSized(o.sp[3],12)},Ro=n.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${e=>e.showEmailForm&&e.windowSize!=="small"?"354px":"100%"};
+  gap: ${o.Space.sp3};
+  max-width: 100%;
+`,je=n.div`
+  width: ${e=>e.windowSize==="small"?"118px":"247px"};
+  height: 1px;
+  background-color: ${e=>e.theme.colors.grey2};
+  flex-shrink: 0;
+`,vo=n(o.StandardRegular)`
+  text-transform: capitalize;
+  color: ${e=>e.theme.colors.hero};
+  flex-shrink: 0;
+`,bo=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${o.Space.sp2};
+  width: 100%;
+`,Io=n.button`
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  color: ${e=>e.theme.colors.hero};
+  text-decoration: none;
+  ${o.textStyles.smallMedium.css}
+  text-align: center;
+  &:before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    background: ${e=>e.theme.colors.grey2};
+    z-index: 0;
+    pointer-events: none;
+  }
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    height: 1px;
+    width: 0%;
+    background: ${e=>e.theme.colors.primary};
+    transition: width 0.3s ease;
+    z-index: 1;
+    pointer-events: none;
+  }
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+    &:after {
+      width: 100%;
+    }
+  }
+  &:focus {
+    outline: none;
+  }
+`,ko=n(o.ExtraSmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  text-align: center;
+  visibility: ${e=>e.isVisible?"visible":"hidden"};
+`,zo=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+`,Mo=n.div`
+  background-image: ${e=>`url(https://storage.googleapis.com/zeni-apis.appspot.com/images/signin-background-${e.windowSize==="small"?"m":"w"}-${e.theme.mode==="light"?"l":"d"}.svg)`};
+
+  background-color: ${e=>e.theme.colors.background};
+  background-size: cover;
+  height: 100vh;
+  max-height: -webkit-fill-available; // fallback for older browsers
+  height: 100dvh; // using new units from google I/O 2022 https://youtu.be/Xy9ZXRRgpLk?t=982
+  display: flex;
+  flex-direction: column;
+  background-position: 50px ${o.Space.sp0};
+  background-repeat: no-repeat;
+  overflow-x: hidden;
+`,Lo=n.div`
+  display: flex;
+  flex: 1 1 auto;
+  padding: ${o.Space.sp0} ${o.Space.sp4} ${o.Space.sp0} ${o.Space.sp4};
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: space-between;
+  background-color: ${e=>e.theme.colors.background};
+  background-color: transparent;
+  row-gap: ${e=>e.windowSize==="extra-large"?o.Space.sp3:o.Space.sp5};
+`,we=n(o.StyledText)`
+  ${e=>`${Le.signInHeading.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.primary};
+  text-align: center;
+`,Ee=n(o.StyledText)`
+  ${e=>`${Le.signInMessage.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.champion};
+  text-align: center;
+`,$e=n(o.ExtraSmallRegular)`
+  margin: ${o.Space.sp0} ${o.Space.sp0} ${o.Space.sp0} ${o.Space.sp0};
+  color: ${e=>e.theme.colors.grey1};
+`,Ce=n(o.ExtraSmallRegular)`
+  margin: ${o.Space.sp1} ${o.Space.sp0} ${o.Space.sp1} ${o.Space.sp0};
+  color: ${e=>e.theme.colors.hero};
+  text-decoration: none;
+`,To=n(o.ExtraSmallMedium)`
+  color: ${o.Colors.important};
+  text-align: center;
+  white-space: pre;
+`,Po=n.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.Space.sp2};
+  flex-shrink: 0;
+  position: relative;
+  width: ${e=>e.windowSize==="small"?"100%":"unset"};
+`,_o=n.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.grey5};
+  border: 1px solid
+    ${e=>e.hasError?o.Colors.important:e.theme.colors.grey1};
+  border-radius: ${o.Space.sp2};
+  padding-top: ${e=>b.emailInputVerticalPadding.valuePx(e.windowSize)};
+  padding-bottom: ${e=>b.emailInputVerticalPadding.valuePx(e.windowSize)};
+  padding-left: ${o.Space.sp4};
+  padding-right: ${o.Space.sp2};
+  width: ${e=>e.windowSize==="small"?"100%":"354px"};
+  max-width: 100%;
+  height: ${o.Space.sp8};
+  box-sizing: border-box;
+  &:focus-within,
+  &:hover {
+    border: 1px solid
+      ${e=>e.hasError?o.Colors.important:e.theme.colors.primary};
+  }
+`,Bo=n(t.TextField,{shouldForwardProp:e=>e!=="isValid"&&e!=="windowSize"})`
+  flex: 1;
+
+  & .MuiOutlinedInput-root {
+    border: none;
+    box-shadow: none;
+
+    &:hover .MuiOutlinedInput-notchedOutline {
+      border: none;
+    }
+
+    &.Mui-focused .MuiOutlinedInput-notchedOutline {
+      border: none;
+    }
+
+    .MuiOutlinedInput-notchedOutline {
+      border: none;
+    }
+  }
+
+  & .MuiInputBase-input {
+    padding: ${o.Space.sp0} ${o.Space.sp2} ${o.Space.sp0} ${o.Space.sp0};
+    font-size: ${e=>b.emailInputFontSize.valuePx(e.windowSize)};
+    color: ${e=>e.isValid?e.theme.colors.primary:o.Colors.important};
+    height: auto;
+
+    &::placeholder {
+      color: ${e=>e.theme.colors.grey1};
+      opacity: 1;
+    }
+  }
+`,Fo=n(o.SmallRegular)`
+  color: ${o.Colors.important};
+  text-align: center;
+  width: 100%;
+`,ye=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${o.Space.sp3};
+  width: 100%;
+`,Re=n.div`
+  display: flex;
+  align-items: center;
+  gap: ${o.Space.sp3};
+  background-color: ${e=>e.isDarkTheme?o.Colors.neutralGrey5Dark:o.Colors.brandColorJadeLight}80;
+  border-radius: 50px;
+  padding: 12px ${o.Space.sp4};
+  box-sizing: border-box;
+`,Ao=n(o.SvgEmail)`
+  width: ${o.Space.sp3};
+  height: ${o.Space.sp3};
+  color: ${e=>e.theme.colors.brandColorSapphire};
+  flex-shrink: 0;
+`,Do=n.div`
+  width: ${o.Space.sp4};
+  height: ${o.Space.sp4};
+  background-color: ${o.Colors.neutralGrey5Light};
+  border: 1px solid ${e=>e.theme.colors.brandColorJade};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`,ve=n(o.LargeRegular)`
+  color: ${e=>e.isDarkTheme?o.Colors.brandColorJadeLight:e.theme.colors.brandColorSapphire};
+  flex: 1;
+`,be=n(o.LargeSemiBoldSp)`
+  color: ${e=>e.theme.colors.primary};
+`,Ie=n(o.SmallRegular)`
+  color: ${e=>e.theme.colors.hero};
+  text-align: center;
+`,Oo=n.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: ${e=>e.windowSize==="small"?"100%":"unset"};
+  margin-top: ${e=>b.signInContainerPaddingTop.valuePx(e.windowSize)};
+`,Zo=n.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${e=>e.showEmailError&&e.showEmailForm?o.Space.sp1:o.Space.sp3};
+  max-width: 100%;
+`,Vo=n.div`
+  display: flex;
+  flex-direction: ${e=>e.windowSize==="small"?"column":"row"};
+  justify-content: center;
+  align-items: center;
+  gap: ${o.Space.sp4};
+  flex-wrap: ${e=>e.windowSize==="small"?"wrap":"nowrap"};
+  width: 100%;
+`,Ho=n.div`
+  width: 100%;
+`,ke=n.div`
+  margin-top: ${e=>b.headingContainerTopMargin.valuePx(e.windowSize)};
+  row-gap: ${e=>e.isMagicLinkSent?e.windowSize==="small"?"150px":o.Space.sp4:o.Space.sp2};
+  flex-direction: column;
+`,No=n.div`
+  display: flex;
+  flex-direction: column;
+  display: flex;
+  width: 100%;
+  margin-left: ${e=>b.ZeniLogoContainerLeftMargin.valuePx(e.windowSize)};
+  margin-top: ${e=>b.ZeniLogoContainerTopMargin.valuePx(e.windowSize)};
+  justify-content: ${e=>e.windowSize==="small"?"center":"start"};
+
+  .zeni-logo {
+    align-self: ${e=>e.windowSize==="small"?"center":"self-start"};
+  }
+`,Wo=n(o.SvgZeniLogoFull)`
+  color: ${e=>e.theme.colors.primary};
+  height: ${o.Space.sp4};
+`,Go=n.div`
+  width: 100%;
+`,qo=n.div`
+  width: 1167px;
+  height: 384px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+`,Uo=n(o.Button)`
+  padding: ${o.Space.sp2} ${o.Space.sp3};
+`;function Jo({googleClientId:e,microsoftClientId:r,fetchState:s,signInError:p={},showEmailLogin:c=!1,sendMagicLinkStatus:l,magicLinkExpired:m,magicLinkExpiredEmail:x,getSignedInUser:h,onSignedInCallback:$,clearSignInError:E,onOAuthSuccess:w,onOAuthError:I,sendMagicLink:z}){const d=o.useWindowSizeContext(),{dark:C}=o.useZeniThemeContext(),{analytics:M}=o.useToolkitContext(),V=Ge(.68,1.3,1440,2560),k=s==="In-Progress",L=s==="Error",[H,f]=g.useState(void 0),[u,P]=g.useState(""),[_,N]=g.useState(!1),[B,T]=g.useState(!1),[y,Te]=g.useState(void 0),[S,W]=g.useState(!1),ee=s==="In-Progress"&&u==="google",oe=s==="In-Progress"&&u==="microsoft",te=t.useForm({mode:"onSubmit",defaultValues:{email:""}}),{register:Pe,handleSubmit:_e,formState:{errors:ne},setValue:ie,watch:Be,clearErrors:Fe}=te,F=l.fetchState==="Error"&&l.error?.error?.type==="email_not_found",se=l.fetchState==="Error"&&l.error?.details?.application_error_code!=="LOGIN_VIA_EMAIL_LOCKED"&&!F,A=Be("email"),re=!!ne.email||B||se,le=!!ne.email;g.useEffect(()=>{c&&m===!0&&x!=null&&x.trim()!==""&&(ie("email",x),T(!0),W(!0))},[c,m,x,ie]),g.useEffect(()=>{c&&l.fetchState==="Error"&&l.error?.details?.application_error_code==="LOGIN_VIA_MAGIC_LINK_RESTRICTED"&&(W(!1),Te(()=>{const i=l.error?.details?.domain_type;if(i==="google"||i==="microsoft")return i}))},[l.error?.details,l.fetchState,c]);const Ae=i=>{T(!1),i.email.trim()&&(M.trackSignInClick("email"),z(i.email))},De=()=>{T(!1),Fe("email")},ae=L&&p.type==="email_not_found";g.useEffect(()=>{(ae||F)&&N(!0)},[F,ae]);const ce=i=>{console.log(JSON.stringify(i)),f(void 0),w(i.code,"google"),P("google")},de=i=>{const v="Error = "+i?.error+" Error Description = "+i?.error_description;f(v),I?.(JSON.stringify(i),"google")},pe=i=>{console.log(JSON.stringify(i)),f(void 0),w(i.code,"microsoft"),P("microsoft")},xe=i=>{console.log(JSON.stringify(i)),f(i.error??"Microsoft authorization failed."),I?.(JSON.stringify(i),"microsoft")},Oe=()=>{let i="";return(L||H!=null)&&_===!1&&(i=H??a.signIn.signInAuthError),i},me=l.fetchState==="Completed"?a.signIn.confirmationLinkSent:a.signIn.heading,ue=y!=null?a.signIn.signInSecurelyMessage:a.signIn.message,R=l.fetchState==="Completed",Ze=F&&l.error?.error?l.error.error:p,G=l.error?.details?.user,ge=G?.first_name??void 0,he=G?.photo?.original!=null?X.toZeniUrl(G.photo.original):void 0;return t.jsxRuntimeExports.jsxs(Mo,{windowSize:d,children:[t.jsxRuntimeExports.jsxs(Lo,{windowSize:d,children:[t.jsxRuntimeExports.jsxs(Go,{children:[t.jsxRuntimeExports.jsx(No,{windowSize:d,children:t.jsxRuntimeExports.jsx(Wo,{className:"zeni-logo"})}),t.jsxRuntimeExports.jsxs(ke,{isMagicLinkSent:R,windowSize:d,style:{display:d==="small"?"flex":"none"},children:[t.jsxRuntimeExports.jsx(we,{windowSize:d,children:me}),t.jsxRuntimeExports.jsx(o.ControlledComponent,{controller:!R,children:t.jsxRuntimeExports.jsx(Ee,{windowSize:d,children:ue})}),t.jsxRuntimeExports.jsx(o.ControlledComponent,{controller:R,children:t.jsxRuntimeExports.jsxs(ye,{children:[t.jsxRuntimeExports.jsx(Re,{isDarkTheme:C,children:t.jsxRuntimeExports.jsx(ve,{isDarkTheme:C,children:o.appLocale.getLocalizedStrings().signIn.magicLinkSent.primaryMessage.split("__email__").map((i,v,q)=>t.jsxRuntimeExports.jsxs("span",{children:[i,v<q.length-1&&t.jsxRuntimeExports.jsx(be,{children:A})]},v))})}),t.jsxRuntimeExports.jsx(Ie,{children:a.signIn.magicLinkSent.secondaryMessage})]})})]}),t.jsxRuntimeExports.jsxs(ke,{isMagicLinkSent:R,windowSize:d,style:{display:d==="small"?"none":"flex"},children:[t.jsxRuntimeExports.jsx(we,{windowSize:d,children:me}),t.jsxRuntimeExports.jsx(o.ControlledComponent,{controller:!R,children:t.jsxRuntimeExports.jsx(Ee,{windowSize:d,children:ue})}),t.jsxRuntimeExports.jsx(o.ControlledComponent,{controller:R,children:t.jsxRuntimeExports.jsxs(ye,{children:[t.jsxRuntimeExports.jsxs(Re,{isDarkTheme:C,children:[t.jsxRuntimeExports.jsx(Do,{children:t.jsxRuntimeExports.jsx(Ao,{})}),t.jsxRuntimeExports.jsx(ve,{isDarkTheme:C,children:o.appLocale.getLocalizedStrings().signIn.magicLinkSent.primaryMessage.split("__email__").map((i,v,q)=>t.jsxRuntimeExports.jsxs("span",{children:[i,v<q.length-1&&t.jsxRuntimeExports.jsx(be,{children:A})]},v))})]}),t.jsxRuntimeExports.jsx(Ie,{children:a.signIn.magicLinkSent.secondaryMessage})]})})]}),t.jsxRuntimeExports.jsx(o.ControlledComponent,{controller:!R,children:t.jsxRuntimeExports.jsxs(Oo,{windowSize:d,children:[t.jsxRuntimeExports.jsxs(Zo,{showEmailError:re,showEmailForm:S,children:[!S&&!y&&t.jsxRuntimeExports.jsxs(Vo,{windowSize:d,children:[t.jsxRuntimeExports.jsx(t.GoogleOAuthProvider,{clientId:e,children:t.jsxRuntimeExports.jsx(fe,{disabled:k,inProgress:ee,getSignedInUser:h,onSuccess:ce,onSignedInCallback:$,onError:de})}),t.jsxRuntimeExports.jsx(Se,{clientId:r,scopes:["openid","profile","email","offline_access","User.Read"],getSignedInUser:h,prompt:"select_account",responseType:"code",responseMode:"query",render:i=>t.jsxRuntimeExports.jsx(Q,{onClick:i.onClick,disabled:k||i.disabled,type:"Microsoft",titleText:a.signIn.signInMicrosoftButton,loadingIndication:oe}),onSignedInCallback:$,onSuccess:pe,onFailure:xe})]}),!S&&y==="google"&&t.jsxRuntimeExports.jsx(t.GoogleOAuthProvider,{clientId:e,children:t.jsxRuntimeExports.jsx(fe,{disabled:k,inProgress:ee,email:A,firstName:ge,photo:he,getSignedInUser:h,onSuccess:ce,onSignedInCallback:$,onError:de})}),!S&&y==="microsoft"&&t.jsxRuntimeExports.jsx(Se,{clientId:r,scopes:["openid","profile","email","offline_access","User.Read"],getSignedInUser:h,prompt:"select_account",responseType:"code",responseMode:"query",render:i=>t.jsxRuntimeExports.jsx(Q,{onClick:i.onClick,disabled:k||i.disabled,type:"Microsoft",titleText:a.signIn.signInMicrosoftButton,loadingIndication:oe,email:A,firstName:ge,photo:he}),onSignedInCallback:$,onSuccess:pe,onFailure:xe}),c&&S&&t.jsxRuntimeExports.jsx(t.FormProvider,{...te,children:t.jsxRuntimeExports.jsxs(Po,{windowSize:d,children:[t.jsxRuntimeExports.jsx("form",{onSubmit:_e(Ae),children:t.jsxRuntimeExports.jsxs(_o,{windowSize:d,hasError:le,children:[t.jsxRuntimeExports.jsx(Bo,{windowSize:d,type:"text",placeholder:a.signIn.workEmailExample,variant:"outlined",fullWidth:!0,isValid:!le,autoComplete:"off",...Pe("email",{required:a.signIn.invalidEmailMessage,pattern:{value:o.EMAIL_PATTERN,message:a.signIn.invalidEmailMessage},onChange:De})}),t.jsxRuntimeExports.jsx(Uo,{variant:"primary",type:"submit",label:a.signIn.signInButton,loading:l.fetchState==="In-Progress"})]})}),re&&t.jsxRuntimeExports.jsx(Fo,{children:B?a.signIn.magicLinkExpired:se?a.common.errorMessage.somethingWentWrongPleaseTryAgain:a.signIn.invalidEmailMessage})]})}),c&&!y&&t.jsxRuntimeExports.jsxs(bo,{children:[t.jsxRuntimeExports.jsxs(Ro,{showEmailForm:S,windowSize:d,children:[t.jsxRuntimeExports.jsx(je,{showEmailForm:S,windowSize:d}),t.jsxRuntimeExports.jsx(vo,{children:a.common.texts.or.toUpperCase()}),t.jsxRuntimeExports.jsx(je,{showEmailForm:S,windowSize:d})]}),t.jsxRuntimeExports.jsxs(zo,{children:[t.jsxRuntimeExports.jsx(Io,{onClick:()=>{S?M.trackSignInViaGoogleMicrosoft():M.trackSignInViaEmail(),W(!S)},children:S?a.signIn.googleOrMicrosoftLink:a.signIn.workEmailLink}),t.jsxRuntimeExports.jsx(ko,{isVisible:!S,children:a.signIn.workEmailSubText})]})]})]}),_===!1&&L&&t.jsxRuntimeExports.jsx(Ho,{children:t.jsxRuntimeExports.jsx(To,{children:Oe()})})]})})]}),t.jsxRuntimeExports.jsx(o.ControlledComponent,{controller:d!=="small",children:t.jsxRuntimeExports.jsx(qo,{children:t.jsxRuntimeExports.jsx(He.ProductsCarousel,{scale:V})})}),t.jsxRuntimeExports.jsx($e,{style:{maxWidth:"100%",textAlign:"center",marginBottom:d==="small"?o.Space.sp5:o.Space.sp1},children:t.jsxRuntimeExports.jsxs($e,{children:[t.jsxRuntimeExports.jsxs(Ce,{children:[a.signIn.termsPrivacyFinePrintPart,a.signIn.agreeWith,t.jsxRuntimeExports.jsx(o.ZeniLink,{href:a.signIn.termsUrl,target:"_Blank",rel:"noopener noreferrer",linkText:a.signIn.termsOfService})," ",a.signIn.and," ",t.jsxRuntimeExports.jsx(o.ZeniLink,{href:a.signIn.privacyPolicyUrl,target:"_Blank",rel:"noopener noreferrer",linkText:a.signIn.privacyPolicy}),"."]}),t.jsxRuntimeExports.jsx(Ce,{children:t.jsxRuntimeExports.jsx(Ve.ZeniCopyright,{})})]})})]}),_&&t.jsxRuntimeExports.jsx(uo,{signInError:Ze,onClose:()=>{E(),N(!1)}})]})}exports.default=Jo;