@zeniai/web-components 3.17.21 → 3.17.23

package/dist/SignIn-B8qL3jmy.js

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