@zeniai/web-components 3.16.49 → 3.16.50

package/dist/SignIn-D_OoVO_v.js

@@ -0,0 +1,1075 @@
+import { j as o, aM as lo, C as ao, g as co, aN as ke, F as go, aO as po } from "./vendor-.pnpm-BZbZ6JJC.js";
+import * as $ from "react";
+import ho, { useState as k, useEffect as W } from "react";
+import i from "@emotion/styled";
+import { toZeniUrl as te } from "@zeniai/client-epic-state";
+import { u as J, A as mo, S as n, v as uo, a as j, ax as xo, G as se, aw as fo, em as wo, t as D, dB as le, C as h, B as Oe, R as S, V as $o, en as yo, ah as Ne, p as Ge, eo as Co, dv as So, aL as _, ep as jo, eq as Ee, d as vo, av as ze, K as We, aj as Io, er as bo, E as ae, aq as ko, D as b } from "./index-D4BzzXbc.js";
+import { Z as Eo } from "./ZeniCopyright-QGZgIoQP.js";
+import { P as zo } from "./ProductsCarousel-k_yn_DnI.js";
+import { css as Ue, keyframes as Je } from "@emotion/react";
+import { S as Mo } from "./handshake-BPg58FML.js";
+const Lo = (e = 0.68, a = 1.3, r = 1440, g = 2560) => {
+  const [c, s] = k(
+    () => typeof window < "u" ? window.innerWidth : r
+  );
+  return W(() => {
+    const m = () => {
+      s(window.innerWidth);
+    };
+    return window.addEventListener("resize", m), () => window.removeEventListener("resize", m);
+  }, []), To(c, e, a, r, g);
+}, To = (e, a, r, g, c) => {
+  const s = Math.max(g, Math.min(c, e)), m = r - a, p = c - g, x = p > 0 ? (s - g) / p : 0;
+  return a + m * x;
+}, qe = (e) => /* @__PURE__ */ $.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ $.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" }), /* @__PURE__ */ $.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" }), /* @__PURE__ */ $.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" }), /* @__PURE__ */ $.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" }), /* @__PURE__ */ $.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" })), Ke = (e) => /* @__PURE__ */ $.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ $.createElement("path", { d: "M0 0H7.58546V7.58546H0V0Z", fill: "#F25022" }), /* @__PURE__ */ $.createElement("path", { d: "M8.37742 0H15.9629V7.58546H8.37742V0Z", fill: "#7FBA00" }), /* @__PURE__ */ $.createElement("path", { d: "M0 8.37741H7.58546V15.9629H0V8.37741Z", fill: "#00A4EF" }), /* @__PURE__ */ $.createElement("path", { d: "M8.41454 8.41454H16V16H8.41454V8.41454Z", fill: "#FFB900" })), Po = j.getLocalizedStrings(), _o = i.div`
+  margin-left: ${n.sp3};
+  color: ${(e) => e.theme.colors.primary};
+  font-family: ${wo.Roboto};
+  ${(e) => {
+  const a = e.windowSize === "small" ? D.standardMedium : D.largeMedium;
+  return `
+      font-size: ${a.fontSize};
+      font-weight: ${a.fontWeight};
+      line-height: ${a.lineHeight};
+    `;
+}}
+`, Bo = i.img`
+  height: ${n.sp4};
+  width: ${n.sp4};
+  border-radius: 50%;
+  justify-content: center;
+  color: ${(e) => e.theme.colors.hero};
+`, Fo = i.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${n.sp1};
+`, Ro = i(fo)`
+  height: 12px;
+  width: 12px;
+  color: ${(e) => e.theme.colors.hero};
+`, Ao = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: ${(e) => e.windowSize === "small" ? "100%" : "264px"};
+  ${(e) => e.setWidth === !1 ? Ue`
+          width: 100%;
+          min-width: 264px;
+        ` : null};
+  min-height: ${(e) => e.windowSize === "small" ? n.sp7 : n.sp8};
+  border: 1px solid;
+  box-sizing: border-box;
+  border-radius: ${n.sp2};
+
+  opacity: ${(e) => e.disabled ? 0.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};
+  }
+`, Do = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`, Vo = i(qe)`
+  height: ${n.sp3};
+  width: ${n.sp3};
+`, Zo = i(qe)`
+  height: ${n.sp4};
+  width: ${n.sp4};
+`, Ho = i(Ke)`
+  height: ${n.sp4};
+  width: ${n.sp4};
+`, Oo = i(Ke)`
+  height: ${n.sp3};
+  width: ${n.sp3};
+`, No = i(xo)`
+  color: ${(e) => e.theme.colors.primary};
+`, Go = i(se)`
+  color: ${(e) => e.theme.colors.primary};
+`, Wo = i.div`
+  padding: ${n.sp2} 12px;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  justify-content: space-between;
+  column-gap: ${n.sp3};
+`, Uo = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: ${n.sp2};
+`, Jo = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`, qo = ({
+  type: e,
+  titleText: a
+}) => {
+  const r = J();
+  return /* @__PURE__ */ o.jsxs(Do, { children: [
+    e === "Google" ? /* @__PURE__ */ o.jsx(Vo, {}) : /* @__PURE__ */ o.jsx(Oo, {}),
+    /* @__PURE__ */ o.jsx(_o, { windowSize: r, children: a })
+  ] });
+}, Ko = ({
+  type: e,
+  email: a,
+  firstName: r,
+  photo: g
+}) => /* @__PURE__ */ o.jsxs(Wo, { children: [
+  /* @__PURE__ */ o.jsxs(Uo, { children: [
+    /* @__PURE__ */ o.jsx(
+      Bo,
+      {
+        src: g?.href,
+        alt: a,
+        onError: ({ currentTarget: c }) => {
+          c.onerror = null, c.src = uo;
+        },
+        loading: "lazy"
+      }
+    ),
+    /* @__PURE__ */ o.jsxs(Jo, { children: [
+      !!r && /* @__PURE__ */ o.jsxs(No, { children: [
+        Po.signIn.continueAs,
+        " ",
+        r
+      ] }),
+      /* @__PURE__ */ o.jsxs(Fo, { children: [
+        /* @__PURE__ */ o.jsx(Go, { children: a }),
+        /* @__PURE__ */ o.jsx(Ro, {})
+      ] })
+    ] })
+  ] }),
+  e === "Google" ? /* @__PURE__ */ o.jsx(Zo, {}) : /* @__PURE__ */ o.jsx(Ho, {})
+] });
+function re({
+  type: e,
+  titleText: a,
+  disabled: r,
+  loadingIndication: g,
+  email: c,
+  firstName: s,
+  photo: m,
+  onClick: p
+}) {
+  const x = J();
+  return /* @__PURE__ */ o.jsx(
+    Ao,
+    {
+      setWidth: c == null,
+      windowSize: x,
+      disabled: r === !0,
+      onClick: r === !0 ? void 0 : p,
+      children: g === !0 ? /* @__PURE__ */ o.jsx(mo, { size: "Standard", start: g === !0 }) : /* @__PURE__ */ o.jsx(o.Fragment, { children: c != null ? /* @__PURE__ */ o.jsx(
+        Ko,
+        {
+          type: e,
+          email: c,
+          firstName: s,
+          photo: m
+        }
+      ) : /* @__PURE__ */ o.jsx(qo, { type: e, titleText: a }) })
+    }
+  );
+}
+const Me = ({
+  inProgress: e,
+  disabled: a,
+  onSuccess: r,
+  onSignedInCallback: g,
+  getSignedInUser: c,
+  onError: s,
+  email: m,
+  firstName: p,
+  photo: x
+}) => {
+  const { analytics: v } = le(), C = lo({
+    onSuccess: r,
+    flow: "auth-code",
+    onError: s
+  }), y = () => {
+    if (c() != null) {
+      g();
+      return;
+    }
+    v.trackSignInClick("google"), C();
+  };
+  return /* @__PURE__ */ o.jsx(
+    re,
+    {
+      onClick: y,
+      disabled: a,
+      type: "Google",
+      titleText: j.getLocalizedStrings().signIn.signInGoogleButton,
+      loadingIndication: e,
+      email: m,
+      firstName: p,
+      photo: x
+    }
+  );
+}, Le = (e) => {
+  const {
+    clientId: a,
+    scopes: r,
+    getSignedInUser: g,
+    onSignedInCallback: c,
+    render: s,
+    onSuccess: m,
+    onFailure: p,
+    disabled: x
+  } = e, { analytics: v } = le();
+  let { responseType: C, responseMode: y, prompt: T, redirectUri: B } = e, d, I;
+  const F = "https://login.microsoftonline.com/common/oauth2/v2.0/authorize", q = ["openid", "profile"];
+  C = C ?? "code", y = y ?? "fragment", T = T ?? "consent", ho.useEffect(() => {
+    const f = te(
+      window.location[y === "fragment" ? "hash" : "search"],
+      !0
+    ).query;
+    (window.location.search || window.location.hash) && (f.code != null || f.access_token != null || f.error != null) && R();
+  }, []);
+  const P = () => {
+    const f = encodeURIComponent(
+      (r ?? q).join(" ")
+    );
+    return B = B ?? window.location.origin + window.location.pathname, `${F}?client_id=${a}&response_type=${C}&redirect_uri=${encodeURIComponent(B)}&scope=${f}&prompt=${T}&response_mode=${y}`;
+  }, R = () => {
+    window.opener?.authScope.authCompletedCB(
+      te(
+        window.location[y === "fragment" ? "hash" : "search"],
+        !0
+      ).query
+    ), window.close();
+  };
+  return s({ onClick: () => {
+    if (g() != null) {
+      c();
+      return;
+    }
+    v.trackSignInClick("microsoft"), d = !1;
+    const f = (u, V) => {
+      const H = window.screen.width / 2 - 287.5, A = window.screen.height / 2 - 600 / 2, E = window.open(
+        u,
+        V,
+        `toolbar=0,status=0, width=575, height=600, top=${A}, left=${H}`
+      );
+      I = setInterval(() => {
+        E.closed && !d && (p({
+          error: j.getLocalizedStrings().signIn.signInError,
+          errorDetail: { reason: "Signin popup window was closed" }
+        }), clearInterval(I));
+      }, 500);
+    };
+    window.authScope = {
+      authCompletedCB: (u) => {
+        d = !0, clearInterval(I), C === "code" && u.code ? m({ code: u.code }) : C === "token" && u.access_token ? m({
+          accessToken: u.access_token,
+          tokenType: u.token_type,
+          scope: u.scope
+        }) : u.error === "access_denied" ? p({
+          error: j.getLocalizedStrings().signIn.signInAuthError,
+          errorDetail: u
+        }) : p({
+          error: j.getLocalizedStrings().signIn.signInError,
+          errorDetail: u
+        });
+      }
+    }, f(P(), "Microsoft Sign In");
+  }, disabled: x });
+}, U = {
+  width: new S(343, 572, 572),
+  containerTop: new S(17, 25, 25)
+}, {
+  signIn: { emailNotFoundPopup: G },
+  common: { gotIt: Xo }
+} = j.getLocalizedStrings();
+function Qo({ signInError: e, onClose: a }) {
+  const r = J(), [g, c] = k(!1), s = e?.email;
+  return /* @__PURE__ */ o.jsx(
+    Yo,
+    {
+      windowSize: r,
+      role: "presentation",
+      style: { background: h.overlayDark },
+      children: /* @__PURE__ */ o.jsx(
+        ao,
+        {
+          onClickAway: () => {
+            c(!0), a();
+          },
+          children: /* @__PURE__ */ o.jsxs(
+            nn,
+            {
+              windowSize: r,
+              className: g ? "containerClass fade" : "containerClass",
+              fade: g,
+              children: [
+                /* @__PURE__ */ o.jsxs(tn, { children: [
+                  G.title,
+                  /* @__PURE__ */ o.jsx(an, { children: s })
+                ] }),
+                /* @__PURE__ */ o.jsxs(cn, { children: [
+                  /* @__PURE__ */ o.jsxs(ie, { children: [
+                    /* @__PURE__ */ o.jsx(oe, { children: /* @__PURE__ */ o.jsx(rn, {}) }),
+                    /* @__PURE__ */ o.jsx(ne, { windowSize: r, children: G.confirmEmail })
+                  ] }),
+                  /* @__PURE__ */ o.jsxs(ie, { children: [
+                    /* @__PURE__ */ o.jsx(oe, { children: /* @__PURE__ */ o.jsx(ln, {}) }),
+                    /* @__PURE__ */ o.jsx(ne, { windowSize: r, children: G.checkAccess })
+                  ] }),
+                  /* @__PURE__ */ o.jsxs(ie, { children: [
+                    /* @__PURE__ */ o.jsx(oe, { children: /* @__PURE__ */ o.jsx(sn, {}) }),
+                    /* @__PURE__ */ o.jsx(ne, { windowSize: r, children: G.contactZeni })
+                  ] })
+                ] }),
+                /* @__PURE__ */ o.jsx(
+                  Oe,
+                  {
+                    label: Xo,
+                    variant: "primary",
+                    onClick: () => {
+                      c(!0), a();
+                    }
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+const Yo = i.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${h.overlayDark};
+  .fade {
+    animation: ${(e) => on(e)} 0.25s linear;
+  }
+`, en = ({ windowSize: e }) => Je`
+  0% {
+    top: 100%;
+  }
+  100% {
+    top: ${U.containerTop.valuePercentage(e)};
+  }
+`, on = ({ windowSize: e }) => Je`
+  0% {
+    top: ${U.containerTop.valuePercentage(e)};
+  }
+  100% {
+    top: 100%;
+  }
+`, nn = i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  background: ${(e) => e.theme.colors.grey5};
+  border-radius: ${n.sp2};
+  position: relative;
+  top: ${(e) => e.fade ? "100%" : U.containerTop.valuePercentage(e.windowSize)};
+  padding: ${n.sp5} ${n.sp0};
+  width: ${(e) => U.width.valuePx(e.windowSize)};
+  animation: ${(e) => en(e)} 0.25s linear;
+  box-shadow: ${h.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%"};
+  }
+`, tn = i($o)`
+  margin-bottom: ${n.sp6};
+  color: ${h.important};
+  padding: ${n.sp0} ${n.sp6};
+`, oe = i.div`
+  margin-right: 12px;
+  height: ${n.sp7};
+  width: ${n.sp7};
+  background-color: ${(e) => e.theme.mode === "dark" ? h.brandColorJadeDark : h.brandColorJadeLight};
+  border-radius: ${n.sp4};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, ne = i(Ge)`
+  width: calc(100% - 120px);
+  color: ${(e) => e.theme.colors.primary};
+  text-align: start;
+`, ie = i.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${n.sp5};
+`, ce = (e) => Ue`
+  width: ${n.sp4};
+  height: ${n.sp4};
+  color: ${e.theme.colors.primary};
+`, rn = i(Ne)`
+  ${ce};
+`, sn = i(Mo)`
+  ${ce};
+`, ln = i(Co)`
+  ${ce};
+`, an = i(yo)`
+  word-break: break-all;
+`, cn = i.div`
+  padding: ${n.sp0} ${n.sp6};
+`, l = j.getLocalizedStrings(), Xe = {
+  signInHeading: new ze("h5Regular", "h2Regular"),
+  signInMessage: new ze("standardRegular", "h6Regular")
+}, L = {
+  ZeniLogoContainerLeftMargin: new S(b[0], b[5]),
+  ZeniLogoContainerTopMargin: new S(12, b[3]),
+  SignInHeadingMarginBottom: new S(b[2], b[3]),
+  headingContainerTopMargin: new S(36, 10),
+  signInContainerPaddingTop: new S(b[12], b[4]),
+  emailInputFontSize: new S(
+    D.standardRegular.fontSizeValue,
+    D.extraLargeRegular.fontSizeValue
+  ),
+  emailInputVerticalPadding: new S(b[3], 12)
+}, dn = i.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${(e) => e.showEmailForm && e.windowSize !== "small" ? "354px" : "100%"};
+  gap: ${n.sp3};
+  max-width: 100%;
+`, Te = i.div`
+  width: ${(e) => e.windowSize === "small" ? "118px" : "247px"};
+  height: 1px;
+  background-color: ${(e) => e.theme.colors.grey2};
+  flex-shrink: 0;
+`, gn = i(Ge)`
+  text-transform: capitalize;
+  color: ${(e) => e.theme.colors.hero};
+  flex-shrink: 0;
+`, pn = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${n.sp2};
+  width: 100%;
+`, hn = i.button`
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  color: ${(e) => e.theme.colors.hero};
+  text-decoration: none;
+  ${D.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;
+  }
+`, mn = i(ae)`
+  color: ${(e) => e.theme.colors.hero};
+  text-align: center;
+  visibility: ${(e) => e.isVisible ? "visible" : "hidden"};
+`, un = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+`, xn = i.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 ${n.sp0};
+  background-repeat: no-repeat;
+  overflow-x: hidden;
+`, fn = i.div`
+  display: flex;
+  flex: 1 1 auto;
+  padding: ${n.sp0} ${n.sp4} ${n.sp0} ${n.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" ? n.sp3 : n.sp5};
+`, Pe = i(We)`
+  ${(e) => `${Xe.signInHeading.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.primary};
+  text-align: center;
+`, _e = i(We)`
+  ${(e) => `${Xe.signInMessage.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.champion};
+  text-align: center;
+`, Be = i(ae)`
+  margin: ${n.sp0} ${n.sp0} ${n.sp0} ${n.sp0};
+  color: ${(e) => e.theme.colors.grey1};
+`, Fe = i(ae)`
+  margin: ${n.sp1} ${n.sp0} ${n.sp1} ${n.sp0};
+  color: ${(e) => e.theme.colors.hero};
+  text-decoration: none;
+`, wn = i(ko)`
+  color: ${h.important};
+  text-align: center;
+  white-space: pre;
+`, $n = i.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${n.sp2};
+  flex-shrink: 0;
+  position: relative;
+  width: ${(e) => e.windowSize === "small" ? "100%" : "unset"};
+`, yn = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid
+    ${(e) => e.hasError ? h.important : e.theme.colors.grey1};
+  border-radius: ${n.sp2};
+  padding-top: ${(e) => L.emailInputVerticalPadding.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => L.emailInputVerticalPadding.valuePx(e.windowSize)};
+  padding-left: ${n.sp4};
+  padding-right: ${n.sp2};
+  width: ${(e) => e.windowSize === "small" ? "100%" : "354px"};
+  max-width: 100%;
+  height: ${n.sp8};
+  box-sizing: border-box;
+  &:focus-within,
+  &:hover {
+    border: 1px solid
+      ${(e) => e.hasError ? h.important : e.theme.colors.primary};
+  }
+`, Cn = i(po, {
+  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: ${n.sp0} ${n.sp2} ${n.sp0} ${n.sp0};
+    font-size: ${(e) => L.emailInputFontSize.valuePx(e.windowSize)};
+    color: ${(e) => e.isValid ? e.theme.colors.primary : h.important};
+    height: auto;
+
+    &::placeholder {
+      color: ${(e) => e.theme.colors.grey1};
+      opacity: 1;
+    }
+  }
+`, Sn = i(se)`
+  color: ${h.important};
+  text-align: center;
+  width: 100%;
+`, Re = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${n.sp3};
+  width: 100%;
+`, Ae = i.div`
+  display: flex;
+  align-items: center;
+  gap: ${n.sp3};
+  background-color: ${(e) => e.isDarkTheme ? h.neutralGrey5Dark : h.brandColorJadeLight}80;
+  border-radius: 50px;
+  padding: 12px ${n.sp4};
+  box-sizing: border-box;
+`, jn = i(Ne)`
+  width: ${n.sp3};
+  height: ${n.sp3};
+  color: ${(e) => e.theme.colors.brandColorSapphire};
+  flex-shrink: 0;
+`, vn = i.div`
+  width: ${n.sp4};
+  height: ${n.sp4};
+  background-color: ${h.neutralGrey5Light};
+  border: 1px solid ${(e) => e.theme.colors.brandColorJade};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+`, De = i(Io)`
+  color: ${(e) => e.isDarkTheme ? h.brandColorJadeLight : e.theme.colors.brandColorSapphire};
+  flex: 1;
+`, Ve = i(bo)`
+  color: ${(e) => e.theme.colors.primary};
+`, Ze = i(se)`
+  color: ${(e) => e.theme.colors.hero};
+  text-align: center;
+`, In = i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: ${(e) => e.windowSize === "small" ? "100%" : "unset"};
+  margin-top: ${(e) => L.signInContainerPaddingTop.valuePx(e.windowSize)};
+`, bn = i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: ${(e) => e.showEmailError && e.showEmailForm ? n.sp1 : n.sp3};
+  max-width: 100%;
+`, kn = i.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  justify-content: center;
+  align-items: center;
+  gap: ${n.sp4};
+  flex-wrap: ${(e) => e.windowSize === "small" ? "wrap" : "nowrap"};
+  width: 100%;
+`, En = i.div`
+  width: 100%;
+`, He = i.div`
+  margin-top: ${(e) => L.headingContainerTopMargin.valuePx(e.windowSize)};
+  row-gap: ${(e) => e.isMagicLinkSent ? e.windowSize === "small" ? "150px" : n.sp4 : n.sp2};
+  flex-direction: column;
+`, zn = i.div`
+  display: flex;
+  flex-direction: column;
+  display: flex;
+  width: 100%;
+  margin-left: ${(e) => L.ZeniLogoContainerLeftMargin.valuePx(e.windowSize)};
+  margin-top: ${(e) => L.ZeniLogoContainerTopMargin.valuePx(e.windowSize)};
+  justify-content: ${(e) => e.windowSize === "small" ? "center" : "start"};
+
+  .zeni-logo {
+    align-self: ${(e) => e.windowSize === "small" ? "center" : "self-start"};
+  }
+`, Mn = i(vo)`
+  color: ${(e) => e.theme.colors.primary};
+  height: ${n.sp4};
+`, Ln = i.div`
+  width: 100%;
+`, Tn = i.div`
+  width: 1167px;
+  height: 384px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible;
+`, Pn = i(Oe)`
+  padding: ${n.sp2} ${n.sp3};
+`;
+function On({
+  googleClientId: e,
+  microsoftClientId: a,
+  fetchState: r,
+  signInError: g = {},
+  showEmailLogin: c = !1,
+  sendMagicLinkStatus: s,
+  magicLinkExpired: m,
+  magicLinkExpiredEmail: p,
+  getSignedInUser: x,
+  onSignedInCallback: v,
+  clearSignInError: C,
+  onOAuthSuccess: y,
+  onOAuthError: T,
+  sendMagicLink: B
+}) {
+  const d = J(), { dark: I } = So(), { analytics: F } = le(), q = Lo(0.68, 1.3, 1440, 2560), P = r === "In-Progress", R = r === "Error", [K, f] = k(void 0), [u, V] = k(""), [Z, X] = k(!1), [H, A] = k(!1), [E, Qe] = k(void 0), [w, Q] = k(!1), de = r === "In-Progress" && u === "google", ge = r === "In-Progress" && u === "microsoft", pe = co({
+    mode: "onSubmit",
+    defaultValues: {
+      email: ""
+    }
+  }), {
+    register: Ye,
+    handleSubmit: eo,
+    formState: { errors: he },
+    setValue: me,
+    watch: oo,
+    clearErrors: no
+  } = pe, O = s.fetchState === "Error" && s.error?.error?.type === "email_not_found", ue = s.fetchState === "Error" && s.error?.details?.application_error_code !== "LOGIN_VIA_EMAIL_LOCKED" && !O, N = oo("email"), xe = !!he.email || H || ue, fe = !!he.email;
+  W(() => {
+    c && m === !0 && p != null && p.trim() !== "" && (me("email", p), A(!0), Q(!0));
+  }, [c, m, p, me]), W(() => {
+    c && s.fetchState === "Error" && s.error?.details?.application_error_code === "LOGIN_VIA_MAGIC_LINK_RESTRICTED" && (Q(!1), Qe(() => {
+      const t = s.error?.details?.domain_type;
+      if (t === "google" || t === "microsoft")
+        return t;
+    }));
+  }, [
+    s.error?.details,
+    s.fetchState,
+    c
+  ]);
+  const io = (t) => {
+    A(!1), t.email.trim() && (F.trackSignInClick("email"), B(t.email));
+  }, to = () => {
+    A(!1), no("email");
+  }, we = R && g.type === "email_not_found";
+  W(() => {
+    (we || O) && X(!0);
+  }, [O, we]);
+  const $e = (t) => {
+    console.log(JSON.stringify(t)), f(void 0), y(t.code, "google"), V("google");
+  }, ye = (t) => {
+    const M = "Error = " + t?.error + " Error Description = " + t?.error_description;
+    f(M), T?.(JSON.stringify(t), "google");
+  }, Ce = (t) => {
+    console.log(JSON.stringify(t)), f(void 0), y(t.code, "microsoft"), V("microsoft");
+  }, Se = (t) => {
+    console.log(JSON.stringify(t)), f(t.error ?? "Microsoft authorization failed."), T?.(JSON.stringify(t), "microsoft");
+  }, ro = () => {
+    let t = "";
+    return (R || K != null) && Z === !1 && (t = K ?? l.signIn.signInAuthError), t;
+  }, je = s.fetchState === "Completed" ? l.signIn.confirmationLinkSent : l.signIn.heading, ve = E != null ? l.signIn.signInSecurelyMessage : l.signIn.message, z = s.fetchState === "Completed", so = O && s.error?.error ? s.error.error : g, Y = s.error?.details?.user, Ie = Y?.first_name ?? void 0, be = Y?.photo?.original != null ? te(Y.photo.original) : void 0;
+  return /* @__PURE__ */ o.jsxs(xn, { windowSize: d, children: [
+    /* @__PURE__ */ o.jsxs(fn, { windowSize: d, children: [
+      /* @__PURE__ */ o.jsxs(Ln, { children: [
+        /* @__PURE__ */ o.jsx(zn, { windowSize: d, children: /* @__PURE__ */ o.jsx(Mn, { className: "zeni-logo" }) }),
+        /* @__PURE__ */ o.jsxs(
+          He,
+          {
+            isMagicLinkSent: z,
+            windowSize: d,
+            style: { display: d === "small" ? "flex" : "none" },
+            children: [
+              /* @__PURE__ */ o.jsx(Pe, { windowSize: d, children: je }),
+              /* @__PURE__ */ o.jsx(_, { controller: !z, children: /* @__PURE__ */ o.jsx(_e, { windowSize: d, children: ve }) }),
+              /* @__PURE__ */ o.jsx(_, { controller: z, children: /* @__PURE__ */ o.jsxs(Re, { children: [
+                /* @__PURE__ */ o.jsx(Ae, { isDarkTheme: I, children: /* @__PURE__ */ o.jsx(De, { isDarkTheme: I, children: j.getLocalizedStrings().signIn.magicLinkSent.primaryMessage.split("__email__").map((t, M, ee) => /* @__PURE__ */ o.jsxs("span", { children: [
+                  t,
+                  M < ee.length - 1 && /* @__PURE__ */ o.jsx(Ve, { children: N })
+                ] }, M)) }) }),
+                /* @__PURE__ */ o.jsx(Ze, { children: l.signIn.magicLinkSent.secondaryMessage })
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o.jsxs(
+          He,
+          {
+            isMagicLinkSent: z,
+            windowSize: d,
+            style: {
+              display: d === "small" ? "none" : "flex"
+            },
+            children: [
+              /* @__PURE__ */ o.jsx(Pe, { windowSize: d, children: je }),
+              /* @__PURE__ */ o.jsx(_, { controller: !z, children: /* @__PURE__ */ o.jsx(_e, { windowSize: d, children: ve }) }),
+              /* @__PURE__ */ o.jsx(_, { controller: z, children: /* @__PURE__ */ o.jsxs(Re, { children: [
+                /* @__PURE__ */ o.jsxs(Ae, { isDarkTheme: I, children: [
+                  /* @__PURE__ */ o.jsx(vn, { children: /* @__PURE__ */ o.jsx(jn, {}) }),
+                  /* @__PURE__ */ o.jsx(De, { isDarkTheme: I, children: j.getLocalizedStrings().signIn.magicLinkSent.primaryMessage.split("__email__").map((t, M, ee) => /* @__PURE__ */ o.jsxs("span", { children: [
+                    t,
+                    M < ee.length - 1 && /* @__PURE__ */ o.jsx(Ve, { children: N })
+                  ] }, M)) })
+                ] }),
+                /* @__PURE__ */ o.jsx(Ze, { children: l.signIn.magicLinkSent.secondaryMessage })
+              ] }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ o.jsx(_, { controller: !z, children: /* @__PURE__ */ o.jsxs(In, { windowSize: d, children: [
+          /* @__PURE__ */ o.jsxs(
+            bn,
+            {
+              showEmailError: xe,
+              showEmailForm: w,
+              children: [
+                !w && !E && /* @__PURE__ */ o.jsxs(kn, { windowSize: d, children: [
+                  /* @__PURE__ */ o.jsx(ke, { clientId: e, children: /* @__PURE__ */ o.jsx(
+                    Me,
+                    {
+                      disabled: P,
+                      inProgress: de,
+                      getSignedInUser: x,
+                      onSuccess: $e,
+                      onSignedInCallback: v,
+                      onError: ye
+                    }
+                  ) }),
+                  /* @__PURE__ */ o.jsx(
+                    Le,
+                    {
+                      clientId: a,
+                      scopes: [
+                        "openid",
+                        "profile",
+                        "email",
+                        "offline_access",
+                        "User.Read"
+                      ],
+                      getSignedInUser: x,
+                      prompt: "select_account",
+                      responseType: "code",
+                      responseMode: "query",
+                      render: (t) => /* @__PURE__ */ o.jsx(
+                        re,
+                        {
+                          onClick: t.onClick,
+                          disabled: P || t.disabled,
+                          type: "Microsoft",
+                          titleText: l.signIn.signInMicrosoftButton,
+                          loadingIndication: ge
+                        }
+                      ),
+                      onSignedInCallback: v,
+                      onSuccess: Ce,
+                      onFailure: Se
+                    }
+                  )
+                ] }),
+                !w && E === "google" && /* @__PURE__ */ o.jsx(ke, { clientId: e, children: /* @__PURE__ */ o.jsx(
+                  Me,
+                  {
+                    disabled: P,
+                    inProgress: de,
+                    email: N,
+                    firstName: Ie,
+                    photo: be,
+                    getSignedInUser: x,
+                    onSuccess: $e,
+                    onSignedInCallback: v,
+                    onError: ye
+                  }
+                ) }),
+                !w && E === "microsoft" && /* @__PURE__ */ o.jsx(
+                  Le,
+                  {
+                    clientId: a,
+                    scopes: [
+                      "openid",
+                      "profile",
+                      "email",
+                      "offline_access",
+                      "User.Read"
+                    ],
+                    getSignedInUser: x,
+                    prompt: "select_account",
+                    responseType: "code",
+                    responseMode: "query",
+                    render: (t) => /* @__PURE__ */ o.jsx(
+                      re,
+                      {
+                        onClick: t.onClick,
+                        disabled: P || t.disabled,
+                        type: "Microsoft",
+                        titleText: l.signIn.signInMicrosoftButton,
+                        loadingIndication: ge,
+                        email: N,
+                        firstName: Ie,
+                        photo: be
+                      }
+                    ),
+                    onSignedInCallback: v,
+                    onSuccess: Ce,
+                    onFailure: Se
+                  }
+                ),
+                c && w && /* @__PURE__ */ o.jsx(go, { ...pe, children: /* @__PURE__ */ o.jsxs($n, { windowSize: d, children: [
+                  /* @__PURE__ */ o.jsx("form", { onSubmit: eo(io), children: /* @__PURE__ */ o.jsxs(
+                    yn,
+                    {
+                      windowSize: d,
+                      hasError: fe,
+                      children: [
+                        /* @__PURE__ */ o.jsx(
+                          Cn,
+                          {
+                            windowSize: d,
+                            type: "text",
+                            placeholder: l.signIn.workEmailExample,
+                            variant: "outlined",
+                            fullWidth: !0,
+                            isValid: !fe,
+                            autoComplete: "off",
+                            ...Ye("email", {
+                              required: l.signIn.invalidEmailMessage,
+                              pattern: {
+                                value: jo,
+                                message: l.signIn.invalidEmailMessage
+                              },
+                              onChange: to
+                            })
+                          }
+                        ),
+                        /* @__PURE__ */ o.jsx(
+                          Pn,
+                          {
+                            variant: "primary",
+                            type: "submit",
+                            label: l.signIn.signInButton,
+                            loading: s.fetchState === "In-Progress"
+                          }
+                        )
+                      ]
+                    }
+                  ) }),
+                  xe && /* @__PURE__ */ o.jsx(Sn, { children: H ? l.signIn.magicLinkExpired : ue ? l.common.errorMessage.somethingWentWrongPleaseTryAgain : l.signIn.invalidEmailMessage })
+                ] }) }),
+                c && !E && /* @__PURE__ */ o.jsxs(pn, { children: [
+                  /* @__PURE__ */ o.jsxs(
+                    dn,
+                    {
+                      showEmailForm: w,
+                      windowSize: d,
+                      children: [
+                        /* @__PURE__ */ o.jsx(
+                          Te,
+                          {
+                            showEmailForm: w,
+                            windowSize: d
+                          }
+                        ),
+                        /* @__PURE__ */ o.jsx(gn, { children: l.common.texts.or.toUpperCase() }),
+                        /* @__PURE__ */ o.jsx(
+                          Te,
+                          {
+                            showEmailForm: w,
+                            windowSize: d
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ o.jsxs(un, { children: [
+                    /* @__PURE__ */ o.jsx(
+                      hn,
+                      {
+                        onClick: () => {
+                          w ? F.trackSignInViaGoogleMicrosoft() : F.trackSignInViaEmail(), Q(!w);
+                        },
+                        children: w ? l.signIn.googleOrMicrosoftLink : l.signIn.workEmailLink
+                      }
+                    ),
+                    /* @__PURE__ */ o.jsx(mn, { isVisible: !w, children: l.signIn.workEmailSubText })
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          Z === !1 && R && /* @__PURE__ */ o.jsx(En, { children: /* @__PURE__ */ o.jsx(wn, { children: ro() }) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ o.jsx(_, { controller: d !== "small", children: /* @__PURE__ */ o.jsx(Tn, { children: /* @__PURE__ */ o.jsx(zo, { scale: q }) }) }),
+      /* @__PURE__ */ o.jsx(
+        Be,
+        {
+          style: {
+            maxWidth: "100%",
+            textAlign: "center",
+            marginBottom: d === "small" ? n.sp5 : n.sp1
+          },
+          children: /* @__PURE__ */ o.jsxs(Be, { children: [
+            /* @__PURE__ */ o.jsxs(Fe, { children: [
+              l.signIn.termsPrivacyFinePrintPart,
+              l.signIn.agreeWith,
+              /* @__PURE__ */ o.jsx(
+                Ee,
+                {
+                  href: l.signIn.termsUrl,
+                  target: "_Blank",
+                  rel: "noopener noreferrer",
+                  linkText: l.signIn.termsOfService
+                }
+              ),
+              " ",
+              l.signIn.and,
+              " ",
+              /* @__PURE__ */ o.jsx(
+                Ee,
+                {
+                  href: l.signIn.privacyPolicyUrl,
+                  target: "_Blank",
+                  rel: "noopener noreferrer",
+                  linkText: l.signIn.privacyPolicy
+                }
+              ),
+              "."
+            ] }),
+            /* @__PURE__ */ o.jsx(Fe, { children: /* @__PURE__ */ o.jsx(Eo, {}) })
+          ] })
+        }
+      )
+    ] }),
+    Z && /* @__PURE__ */ o.jsx(
+      Qo,
+      {
+        signInError: so,
+        onClose: () => {
+          C(), X(!1);
+        }
+      }
+    )
+  ] });
+}
+export {
+  On as default
+};