@zeniai/web-components 3.16.96 → 3.16.97

package/dist/InvitePageListView-CwKbcKlM.js

@@ -0,0 +1,1764 @@
+import { u as V, j as o, V as Be, C as Ee } from "./vendor-.pnpm-B2klaOGU.js";
+import { useEffect as P, useState as k, useRef as q } from "react";
+import r from "@emotion/styled";
+import { S as t, fU as F, u as b, a as y, B as U, t as E, R as h, af as Q, C as j, bc as Z, f_ as ee, D as s, a2 as S, aw as B, J as D, H as ye, ai as ve, w as De, fY as oe, E as A, ay as Ae, F as z, V as He, o as N, O as Oe, is as v, eX as We, fL as Ve, aa as Fe, kJ as be, A as Ce, fb as je, kK as Se, _ as ke, ks as Ne, z as Ke, P as Ge, aE as Ye } from "./index-C65jHl_B.js";
+import { S as ze } from "./gift-box-Cmt9OgIZ.js";
+import { B as Ue } from "./BusyIndication-DIixeGba.js";
+import { c as Je } from "./calculateSize-CjJdhSIv.js";
+import { StatusTypes as f, toReferralListViewSortKeyType as ne, AmountStatusTypes as I } from "@zeniai/client-epic-state";
+import { M as Xe } from "./MoreMenuButton-p0Mf3mX-.js";
+const Ie = (e, i) => {
+  P(() => {
+    const n = e.current;
+    if (window.IntersectionObserver == null)
+      return;
+    const d = new IntersectionObserver(
+      ([a]) => {
+        i && i(a.isIntersecting);
+      },
+      {
+        root: null,
+        rootMargin: t.sp0,
+        threshold: 0.1
+      }
+    );
+    return n && d.observe(n), () => {
+      n && d.unobserve(n);
+    };
+  });
+}, qe = {
+  pageTitleMarginLeft: new h(s[4], s[6])
+}, Qe = r.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${(e) => qe.pageTitleMarginLeft.valuePx(e.windowSize)};
+  margin-top: ${t.sp4};
+`, Ze = r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 154px;
+`, eo = r(Q)`
+  height: ${t.sp3};
+  width: ${t.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, oo = r(ee)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+`, to = r(Z)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${j.success};
+`;
+function Re({
+  referralLink: e,
+  onInviteClick: i,
+  onCopyReferral: n,
+  setShowNavButton: d
+}) {
+  const [, a] = F(), [l, c] = k(!1), p = b(), g = V(), x = () => {
+    n(), l || (a(e.toString()), c(!0));
+  };
+  P(() => {
+    l === !0 && setTimeout(() => {
+      c(!1);
+    }, 2e3);
+  }, [l]);
+  const u = q(null);
+  Ie(u, d);
+  const $ = y.getLocalizedStrings().rewardsPage.rewardsCard;
+  return /* @__PURE__ */ o.jsxs(Qe, { windowSize: p, children: [
+    /* @__PURE__ */ o.jsx(Ze, { ref: u, children: /* @__PURE__ */ o.jsx(
+      U,
+      {
+        variant: "secondary",
+        label: $.inviteViaEmail,
+        onClick: i,
+        prefixIcon: /* @__PURE__ */ o.jsx(eo, {}),
+        textStyle: {
+          ...E.smallRegular.cssObject,
+          color: `${g.colors.hero}`
+        },
+        style: {
+          borderRadius: `${t.sp1}`,
+          border: `1px solid ${g.colors.grey1}`,
+          backgroundColor: "transparent",
+          padding: `${t.sp2} 12px`,
+          minWidth: "154px",
+          flex: "1 1 auto",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ o.jsx(
+      U,
+      {
+        variant: "secondary",
+        label: l ? $.copied : $.copyReferralLink,
+        onClick: x,
+        prefixIcon: l ? /* @__PURE__ */ o.jsx(to, {}) : /* @__PURE__ */ o.jsx(oo, {}),
+        textStyle: {
+          ...E.smallRegular.cssObject,
+          color: `${g.colors.hero}`
+        },
+        style: {
+          borderRadius: `${t.sp1}`,
+          border: `1px solid ${g.colors.grey1}`,
+          backgroundColor: "transparent",
+          padding: `${t.sp2} ${l ? "47px" : "12px"}`,
+          // for making sure button doesn't go small
+          minWidth: "154px",
+          flex: "1 1 auto",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }
+      }
+    )
+  ] });
+}
+const J = {
+  logoWidth: new h(95, 135),
+  minWidth: new h(256, 360),
+  maxWidth: new h(270, 380)
+}, Te = {
+  title: new B("smallRegular", "largeRegular"),
+  cardDetail: new B("h5Regular", "h2Regular")
+};
+function Le({ planAmount: e }) {
+  const i = b(), {
+    rewardsPage: { rewardsCard: n }
+  } = y.getLocalizedStrings();
+  return /* @__PURE__ */ o.jsxs(ro, { windowSize: i, children: [
+    /* @__PURE__ */ o.jsxs(io, { children: [
+      /* @__PURE__ */ o.jsx(ao, { windowSize: i, children: n.bonus }),
+      /* @__PURE__ */ o.jsx(lo, { windowSize: i, children: S("0,0", e) })
+    ] }),
+    /* @__PURE__ */ o.jsx(no, { windowSize: i, children: /* @__PURE__ */ o.jsx(so, {}) })
+  ] });
+}
+const ro = r.div`
+  display: flex;
+  height: 100%;
+  min-width: ${(e) => J.minWidth.valuePx(e.windowSize)};
+  max-width: ${(e) => J.maxWidth.valuePx(e.windowSize)};
+  justify-content: space-between;
+  background: ${(e) => `linear-gradient(247.21deg, ${e.theme.colors.rewardsPromoColor1}
+     -2.39%, ${e.theme.colors.rewardsPromoColor2} 105.08%)`};
+  box-shadow: ${(e) => `0 ${t.sp3} 22px 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${(e) => e.windowSize === "small" ? t.sp2 : `${t.sp2} 0 0 ${t.sp2}`};
+  &:hover {
+    box-shadow: ${(e) => `0 2px ${t.sp1} ${e.theme.colors.dropShadowHover}`};
+  }
+`, io = r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: 28px;
+`, no = r.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 12px;
+  position: relative;
+  width: ${(e) => J.logoWidth.valuePx(e.windowSize)};
+`, so = r(ze)`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+`, ao = r(D)`
+  ${(e) => `${Te.title.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.graphColor17};
+`, lo = r(D)`
+  color: ${(e) => e.theme.colors.brandColorGold};
+  ${(e) => `${Te.cardDetail.style(e.windowSize)}`};
+`;
+function co({
+  rewardsPlan: e,
+  onInviteClick: i,
+  onHowItWorksClick: n,
+  onCopyReferral: d
+}) {
+  const a = b(), [, l] = F(), [c, p] = k(!1), g = () => {
+    d(), c || (l(e.referralLink.toString()), p(!0));
+  };
+  P(() => {
+    c === !0 && setTimeout(() => {
+      p(!1);
+    }, 2e3);
+  }, [c]);
+  const {
+    rewardsPage: {
+      referAndEarn: x,
+      rewardsCard: u,
+      statisticsCard: { knowMore: $ }
+    }
+  } = y.getLocalizedStrings();
+  return /* @__PURE__ */ o.jsxs(ho, { children: [
+    /* @__PURE__ */ o.jsxs(po, { children: [
+      /* @__PURE__ */ o.jsxs(yo, { children: [
+        /* @__PURE__ */ o.jsx(uo, { children: x }),
+        /* @__PURE__ */ o.jsx(xo, { children: u.rewardsSummary[e.planName].replace(
+          "__reward-amount__",
+          S("0,0", e.referrerAmount)
+        ) }),
+        /* @__PURE__ */ o.jsx($o, { onClick: n, children: $ })
+      ] }),
+      /* @__PURE__ */ o.jsxs(go, { children: [
+        /* @__PURE__ */ o.jsxs(wo, { onClick: i, children: [
+          /* @__PURE__ */ o.jsx(fo, {}),
+          u.inviteViaEmail
+        ] }),
+        /* @__PURE__ */ o.jsx(vo, { onClick: g, isCopied: c, children: c ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          /* @__PURE__ */ o.jsx(Co, {}),
+          u.copied
+        ] }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          /* @__PURE__ */ o.jsx(bo, {}),
+          u.copyReferralLink
+        ] }) })
+      ] })
+    ] }),
+    a === "medium-compact" || a === "medium-regular" ? null : /* @__PURE__ */ o.jsx(mo, { children: /* @__PURE__ */ o.jsx(Le, { planAmount: e.referrerAmount }) })
+  ] });
+}
+const ho = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  padding: ${t.sp6} 0;
+  margin: 0 ${t.sp7};
+  background-color: ${(e) => e.theme.colors.grey3};
+  background-image: ${(e) => `url(https://storage.googleapis.com/zeni-apis.appspot.com/images/rewards-background-${e.theme.mode === "light" ? "l" : "d"}.svg)`};
+  background-position: 110% 200%;
+  background-size: 60% 80%;
+  background-repeat: no-repeat;
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${t.sp1} solid ${(e) => e.theme.colors.grey5};
+  border-radius: ${t.sp2};
+`, po = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-left: ${t.sp6};
+  margin-right: ${t.sp2};
+`, go = r.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${t.sp3};
+  flex: 1 1 auto;
+`, mo = r.div`
+  display: flex;
+  height: 220px;
+`, uo = r(ye)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${t.sp3};
+`, xo = r(ve)`
+  color: ${(e) => e.theme.mode === "light" ? e.theme.colors.brandColorSapphire : e.theme.colors.brandColorJade};
+  margin-bottom: ${t.sp3};
+  max-width: 450px;
+`, $o = r(De)`
+  margin-bottom: ${t.sp5};
+  color: ${(e) => e.theme.colors.primary};
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.champion};
+  }
+`, wo = r(oe)`
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  border-radius: ${t.sp2};
+  background-color: ${(e) => e.theme.colors.primary};
+  color: ${(e) => e.theme.colors.grey5};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${t.sp2} ${t.sp3};
+  min-width: 187px;
+  &:hover {
+    background-color: ${(e) => e.theme.colors.champion};
+    border: 1px solid ${(e) => e.theme.colors.champion};
+  }
+`, fo = r(Q)`
+  height: ${t.sp3};
+  width: ${t.sp3};
+  margin-right: ${t.sp2};
+  color: ${(e) => e.theme.colors.grey5};
+`, yo = r.div`
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  align-items: flex-start;
+`, vo = r(oe)`
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  border-radius: ${t.sp2};
+  background-color: ${(e) => e.isCopied ? e.theme.colors.champion : e.theme.colors.primary};
+  color: ${(e) => e.theme.colors.grey5};
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: ${t.sp2} ${t.sp3};
+  min-width: 187px;
+  &:hover {
+    background-color: ${(e) => e.theme.colors.champion};
+    border: 1px solid ${(e) => e.theme.colors.champion};
+  }
+`, bo = r(ee)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  margin-right: ${t.sp2};
+`, Co = r(Z)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  color: ${j.success};
+  margin-right: ${t.sp1};
+`;
+function jo({
+  rewardsPlan: e,
+  onInviteClick: i,
+  onHowItWorksClick: n,
+  onCopyReferral: d
+}) {
+  const {
+    rewardsPage: {
+      referAndEarn: a,
+      rewardsCard: l,
+      statisticsCard: { knowMore: c }
+    }
+  } = y.getLocalizedStrings();
+  return /* @__PURE__ */ o.jsxs(So, { children: [
+    /* @__PURE__ */ o.jsxs(ko, { children: [
+      /* @__PURE__ */ o.jsx(Io, { children: a }),
+      /* @__PURE__ */ o.jsx(Ro, { children: l.rewardsSummary[e.planName].replace(
+        "__reward-amount__",
+        S("0,0", e.referrerAmount)
+      ) }),
+      /* @__PURE__ */ o.jsx(To, { onClick: n, children: c }),
+      /* @__PURE__ */ o.jsx(zo, { children: /* @__PURE__ */ o.jsx(Le, { planAmount: e.referrerAmount }) })
+    ] }),
+    /* @__PURE__ */ o.jsx(
+      Re,
+      {
+        referralLink: e.referralLink,
+        onCopyReferral: d,
+        onInviteClick: i
+      }
+    )
+  ] });
+}
+const So = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  margin: 0 ${t.sp3};
+`, ko = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  padding: ${t.sp4};
+  background-color: ${(e) => e.theme.colors.grey3};
+  background-image: ${(e) => `url(https://storage.googleapis.com/zeni-apis.appspot.com/images/rewards-background-${e.theme.mode === "light" ? "l" : "d"}.svg)`};
+  background-position: 110% 200%;
+  background-size: 100% 80%;
+  background-repeat: no-repeat;
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${t.sp1} solid ${(e) => e.theme.colors.grey5};
+  border-radius: ${t.sp2};
+`, zo = r.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 160px;
+  margin: 0 ${t.sp4} ${t.sp4} 0;
+`, Io = r(ve)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${t.sp2};
+`, Ro = r(A)`
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${t.sp3};
+`, To = r(Ae)`
+  margin-bottom: ${t.sp3};
+  color: ${(e) => e.theme.mode === "light" ? e.theme.colors.brandColorSapphire : e.theme.colors.brandColorJade};
+  cursor: pointer;
+`;
+function Lo({
+  rewardsPlan: e,
+  onHowItWorksClick: i,
+  onInviteClick: n,
+  onCopyReferral: d
+}) {
+  return b() === "small" ? /* @__PURE__ */ o.jsx(
+    jo,
+    {
+      rewardsPlan: e,
+      onInviteClick: n,
+      onHowItWorksClick: i,
+      onCopyReferral: d
+    }
+  ) : /* @__PURE__ */ o.jsx(
+    co,
+    {
+      rewardsPlan: e,
+      onHowItWorksClick: i,
+      onInviteClick: n,
+      onCopyReferral: d
+    }
+  );
+}
+function Po({
+  planAmount: e
+}) {
+  const {
+    rewardsPage: { rewardsCard: i }
+  } = y.getLocalizedStrings();
+  return /* @__PURE__ */ o.jsxs(_o, { children: [
+    /* @__PURE__ */ o.jsxs(Mo, { children: [
+      /* @__PURE__ */ o.jsx(Do, { children: i.bonus }),
+      /* @__PURE__ */ o.jsx(Ao, { children: S("0,0", e) })
+    ] }),
+    /* @__PURE__ */ o.jsx(Bo, { children: /* @__PURE__ */ o.jsx(Eo, {}) })
+  ] });
+}
+const _o = r.div`
+  display: flex;
+  justify-content: space-between;
+  height: 100%;
+  width: 100%;
+  background: ${(e) => `linear-gradient(247.21deg, ${e.theme.colors.rewardsPromoColor1}
+     -2.39%, ${e.theme.colors.rewardsPromoColor2} 105.08%)`};
+  box-shadow: ${(e) => `0 ${t.sp2} ${t.sp3} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.sp2} 0 0 ${t.sp2};
+  &:hover {
+    box-shadow: ${(e) => `0 2px ${t.sp1} ${e.theme.colors.dropShadowHover}`};
+  }
+`, Mo = r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: ${t.sp4};
+`, Bo = r.div`
+  margin-right: ${t.sp2};
+  position: relative;
+`, Eo = r(ze)`
+  width: 95px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+`, Do = r(z)`
+  color: ${(e) => e.theme.colors.graphColor17};
+  text-transform: uppercase;
+`, Ao = r(ye)`
+  color: ${(e) => e.theme.colors.brandColorGold};
+  margin-bottom: ${t.sp2};
+`, Ho = {
+  backgroundSize: new h(75, 100, 75)
+};
+function Oo({
+  rewardsPlan: e,
+  onInviteClick: i,
+  setShowNavButton: n,
+  onCopyReferral: d
+}) {
+  const a = V(), l = b(), [, c] = F(), [p, g] = k(!1), [x, u] = k(!1), $ = () => {
+    d(), p || (c(e.referralLink.toString()), g(!0));
+  }, C = () => {
+    u(!0);
+  }, m = () => {
+    u(!1);
+  };
+  P(() => {
+    p === !0 && setTimeout(() => {
+      g(!1);
+    }, 2e3);
+  }, [p]);
+  const { rewardsCard: w, referAndEarn: _ } = y.getLocalizedStrings().rewardsPage, R = q(null);
+  Ie(R, n);
+  const G = x ? /* @__PURE__ */ o.jsx(se, { showCopyText: x, isCopied: p, children: w.copyReferralLink }) : null;
+  return /* @__PURE__ */ o.jsxs(Wo, { windowSize: l, children: [
+    /* @__PURE__ */ o.jsxs(Vo, { children: [
+      /* @__PURE__ */ o.jsx(Ko, { children: _ }),
+      /* @__PURE__ */ o.jsx(Go, { children: w.rewardsSummary[e.planName].replace(
+        "__reward-amount__",
+        S("0,0", e.referrerAmount)
+      ) }),
+      /* @__PURE__ */ o.jsxs(Fo, { ref: R, children: [
+        /* @__PURE__ */ o.jsx(
+          U,
+          {
+            variant: "secondary",
+            label: w.inviteViaEmail,
+            onClick: i,
+            prefixIcon: /* @__PURE__ */ o.jsx(Yo, {}),
+            textStyle: {
+              ...E.standardRegular.cssObject
+            },
+            buttonColors: {
+              borderColor: {
+                default: a.colors.primary,
+                hover: a.colors.champion,
+                disabled: a.colors.primary
+              },
+              backgroundColor: {
+                default: a.colors.primary,
+                hover: a.colors.champion,
+                disabled: a.colors.primary
+              },
+              textColor: {
+                default: a.colors.grey5,
+                hover: a.colors.grey5,
+                disabled: a.colors.grey5
+              }
+            },
+            style: {
+              borderRadius: t.sp1,
+              padding: `${t.sp1} 12px`,
+              flex: "1 1 auto",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              marginRight: t.sp3
+            }
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          Uo,
+          {
+            onClick: $,
+            onMouseOver: C,
+            onMouseLeave: m,
+            showCopyText: x,
+            isCopied: p,
+            children: /* @__PURE__ */ o.jsx(
+              Xo,
+              {
+                showCopyText: x,
+                isCopied: p,
+                children: /* @__PURE__ */ o.jsx(Jo, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ o.jsx(Qo, { children: p ? /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          /* @__PURE__ */ o.jsx(qo, {}),
+          /* @__PURE__ */ o.jsx(se, { showCopyText: x, isCopied: p, children: w.copied })
+        ] }) : G })
+      ] })
+    ] }),
+    l === "medium-compact" || l === "medium-regular" ? null : /* @__PURE__ */ o.jsx(No, { children: /* @__PURE__ */ o.jsx(Po, { planAmount: e.referrerAmount }) })
+  ] });
+}
+const Wo = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  height: 280px;
+  background-color: ${(e) => e.theme.colors.grey3};
+  background-image: ${(e) => `url(https://storage.googleapis.com/zeni-apis.appspot.com/images/rewards-background-${e.theme.mode === "light" ? "l" : "d"}.svg)`};
+  background-position: 160% 110%;
+  background-repeat: no-repeat;
+
+  background-size: ${(e) => Ho.backgroundSize.valuePercentage(e.windowSize)};
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${t.sp1} solid ${(e) => e.theme.colors.grey5};
+  border-radius: ${t.sp2};
+`, Vo = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-left: ${t.sp6};
+  margin-right: ${t.sp4};
+`, Fo = r.div`
+  display: flex;
+  width: fit-content;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+`, No = r.div`
+  display: flex;
+  max-width: 254px;
+  min-width: 240px;
+  height: 160px;
+  flex: 1 1 auto;
+`, Ko = r(He)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${t.sp2};
+`, Go = r(z)`
+  color: ${(e) => e.theme.mode === "light" ? e.theme.colors.brandColorSapphire : e.theme.colors.brandColorJade};
+  max-width: 210px;
+  margin-bottom: ${t.sp5};
+`, Yo = r(Q)`
+  height: ${t.sp3};
+  width: ${t.sp3};
+  flex-shrink: 0;
+  color: ${(e) => e.theme.colors.grey5};
+`, Uo = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: ${t.sp5};
+  height: ${t.sp5};
+  cursor: pointer;
+  background-color: ${(e) => e.showCopyText || e.isCopied ? e.theme.colors.champion : "transparent"};
+  border: 1px solid ${(e) => e.theme.colors.primary};
+`, Jo = r(ee)`
+  width: ${t.sp3};
+  height: ${t.sp3};
+  cursor: pointer;
+`, Xo = r.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.showCopyText || e.isCopied ? e.theme.colors.grey3 : e.theme.colors.primary};
+`, qo = r(Z)`
+  width: ${t.sp4};
+  height: ${t.sp4};
+  color: ${j.success};
+  margin-right: ${t.sp1};
+`, Qo = r.div`
+  position: absolute;
+  bottom: -35px;
+  right: -55px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 150px;
+`, se = r(z)`
+  color: ${(e) => e.isCopied ? e.theme.colors.brandColorPearl : j.heroDark};
+  background-color: ${(e) => e.showCopyText || e.isCopied ? e.theme.colors.black : "transparent"};
+  padding: ${t.sp1} ${t.sp2};
+  border-radius: ${t.sp1};
+`, Zo = {
+  height: new h(200, 280)
+}, K = {
+  earningValue: new B("h6Regular", "h5Regular"),
+  cardTitle: new B("extraSmallRegular", "smallRegular"),
+  buttonText: new B("extraSmallRegular", "smallRegular")
+};
+function ae({
+  pendingBonus: e,
+  earnedBonus: i,
+  pendingReferrals: n,
+  onHowItWorksClick: d
+}) {
+  const {
+    rewardsPage: { statisticsCard: a },
+    common: { strings: l }
+  } = y.getLocalizedStrings(), c = b();
+  return /* @__PURE__ */ o.jsxs(et, { windowSize: c, children: [
+    /* @__PURE__ */ o.jsx(ot, { children: /* @__PURE__ */ o.jsx(tt, { windowSize: c, children: a.title }) }),
+    /* @__PURE__ */ o.jsxs(rt, { windowSize: c, children: [
+      /* @__PURE__ */ o.jsxs(le, { children: [
+        /* @__PURE__ */ o.jsx(ce, { children: a.earned }),
+        /* @__PURE__ */ o.jsx(de, { windowSize: c, type: "earned", children: S("0,0", i) })
+      ] }),
+      c === "medium-compact" ? /* @__PURE__ */ o.jsx(nt, {}) : /* @__PURE__ */ o.jsx(it, {}),
+      /* @__PURE__ */ o.jsxs(le, { children: [
+        /* @__PURE__ */ o.jsx(ce, { children: a.pending }),
+        /* @__PURE__ */ o.jsx(de, { windowSize: c, type: "pending", children: S("0,0", e) })
+      ] })
+    ] }),
+    /* @__PURE__ */ o.jsxs(st, { children: [
+      /* @__PURE__ */ o.jsxs(at, { windowSize: c, children: [
+        a.pendingReferrals,
+        " ",
+        l.colon,
+        " ",
+        n
+      ] }),
+      /* @__PURE__ */ o.jsxs(ct, { windowSize: c, onClick: d, children: [
+        a.knowMore,
+        " ",
+        /* @__PURE__ */ o.jsx(lt, {})
+      ] })
+    ] })
+  ] });
+}
+const et = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  height: ${(e) => Zo.height.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.grey5};
+  background-image: url(https://storage.googleapis.com/zeni-apis.appspot.com/images/confetti.svg);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  box-shadow: ${(e) => `${t.sp0} 2px ${t.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${t.sp1} solid ${(e) => e.theme.colors.grey5};
+  border-radius: ${t.sp2};
+`, ot = r.div`
+  display: flex;
+  flex: 0 1 auto;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding-top: ${t.sp4};
+`, tt = r(D)`
+  ${(e) => `${K.cardTitle.style(e.windowSize)}`};
+  color: ${(e) => e.theme.colors.champion};
+  margin-bottom: ${t.sp1};
+`, rt = r.div`
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "medium-compact" ? "column" : "row"};
+  flex: 0 1 auto;
+  align-items: ${(e) => e.windowSize === "medium-compact" ? "center" : "flex-end"};
+  justify-content: space-evenly;
+  width: 100%;
+`, le = r.div`
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+`, it = r.div`
+  padding-left: ${t.sp1};
+  margin-left: ${t.sp1};
+  height: 50%;
+  border-left: 1px solid ${j.neutralGrey1Light};
+`, nt = r.div`
+  margin: ${t.sp2} 0;
+  width: ${t.sp5};
+  border-top: 1px solid ${j.neutralGrey1Light};
+`, ce = r(N)`
+  color: ${(e) => e.theme.colors.primary};
+`, de = r(D)`
+  ${(e) => `${K.earningValue.style(e.windowSize)}`};
+  color: ${(e) => e.type === "pending" ? j.alert : j.success};
+`, st = r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom-right-radius: ${t.sp2};
+  border-bottom-left-radius: ${t.sp2};
+  padding: ${t.sp2} 0;
+  background-color: ${(e) => e.theme.colors.grey3};
+`, at = r(D)`
+  ${(e) => `${K.buttonText.style(e.windowSize)}`};
+  margin-left: 12px;
+  color: ${(e) => e.theme.colors.primary};
+`, lt = r(Oe)`
+  color: ${(e) => e.theme.colors.primary};
+  width: 10px;
+  height: 10px;
+  margin-left: ${t.sp1};
+`, ct = r.button`
+  border: none;
+  background-color: transparent;
+  border-bottom-right-radius: ${t.sp2};
+  cursor: pointer;
+  padding-right: 12px;
+  color: ${(e) => e.theme.colors.primary};
+  ${(e) => `${K.buttonText.style(e.windowSize)}`};
+`, dt = 90, X = 114, Pe = 160, ht = 1, pt = 58, gt = 45, he = (e, i) => i !== "small" ? dt : Je(e, {
+  ...E.standardRegular.cssPartialObject([
+    "fontSize",
+    "fontFamily",
+    "fontWeight"
+  ])
+}).width < Pe ? X : X + 24, {
+  rewardsPage: { header: te },
+  common: { strings: pe }
+} = y.getLocalizedStrings(), mt = {
+  key: "invitee_email",
+  value: te.invitee_email,
+  sortOrder: "ascending",
+  width: new h(s[7], s[8], s[8], s[9])
+}, ut = {
+  key: "amount",
+  value: te.amount,
+  sortOrder: "ascending",
+  width: new h(s[4], 20, 20, s[3])
+}, xt = {
+  key: "status",
+  value: te.status,
+  sortOrder: "ascending",
+  width: new h(s[3], s[4], s[4], 20)
+}, W = [
+  mt,
+  xt,
+  ut
+], $t = (e) => {
+  const i = e.toLowerCase().split(pe.space).join(pe.underscore);
+  switch (e) {
+    case f.invite_processing:
+      return {
+        value: e,
+        color: v.invite_processing.color,
+        borderColor: v.invite_processing.borderColor,
+        code: i
+      };
+    case f.invite_sent:
+      return {
+        value: e,
+        color: v.invite_sent.color,
+        borderColor: v.invite_sent.borderColor,
+        code: i
+      };
+    case f.onboarding:
+      return {
+        value: e,
+        color: v.onboarding.color,
+        borderColor: v.onboarding.borderColor,
+        code: i
+      };
+    case f.active:
+    case f.reward_sent:
+      return {
+        value: e,
+        color: v.active.color,
+        borderColor: v.active.borderColor,
+        code: i
+      };
+    case f.declined:
+      return {
+        value: e,
+        color: v.declined.color,
+        borderColor: v.declined.borderColor,
+        code: i
+      };
+    case f.resend_invite:
+      return {
+        value: e,
+        color: v.resend_invite.color,
+        borderColor: v.resend_invite.borderColor,
+        code: i
+      };
+    default:
+      return {
+        value: e,
+        color: v.in_progress.color,
+        borderColor: "",
+        code: i
+      };
+  }
+}, M = {
+  headerLastColumnTopPadding: new h(s[0], s[4]),
+  headerLastColumnRightPadding: new h(s[3], s[11]),
+  headerLastColumnBottomPadding: new h(s[0], s[4]),
+  headerLastColumnLeftPadding: new h(s[3], s[11]),
+  headerHeight: new h(gt, pt)
+};
+function wt({
+  companyNameSticky: e,
+  sortConfig: i,
+  onColumnSortConfigChanged: n
+}) {
+  const d = V(), a = b(), [l, c] = k(
+    W
+  );
+  P(() => {
+    const m = [...l];
+    for (const w of m)
+      w.key === i.sortKey ? w.sortOrder = i.sortOrder : w.sortOrder = "ascending";
+    c(m);
+  }, [i.sortKey, i.sortOrder]);
+  const p = (m, w) => {
+    let _ = w;
+    i.sortKey === m && (_ = w === "ascending" ? "descending" : "ascending"), n(m, _);
+  }, g = l.find((m) => m.key === i.sortKey) ?? l[0], x = (m) => l.find((w) => w.key === m)?.value ?? C.strings.empty, u = l.map((m) => m.key), {
+    rewardsPage: { inviteList: $ },
+    common: C
+  } = y.getLocalizedStrings();
+  return a === "small" ? /* @__PURE__ */ o.jsxs(ge, { windowSize: a, companyNameSticky: !1, children: [
+    /* @__PURE__ */ o.jsxs(yt, { children: [
+      /* @__PURE__ */ o.jsx(bt, { children: /* @__PURE__ */ o.jsx(vt, {}) }),
+      /* @__PURE__ */ o.jsx(
+        We,
+        {
+          title: $.sortBy,
+          placeholder: $.sortBy,
+          pickerValues: u,
+          valueToLabel: x,
+          selectedValue: i.sortKey,
+          onPickerSelectionChanged: (m) => {
+            m && p(
+              ne(m),
+              "ascending"
+            );
+          },
+          optionTextStyle: E.smallRegular,
+          selectedOptionColor: d.colors.hero,
+          optionBackgroundColor: d.colors.grey5,
+          downChevronVisible: !1,
+          backgroundColor: d.colors.grey4,
+          titleTextStyle: E.smallRegular,
+          titleColor: d.colors.hero
+        }
+      )
+    ] }),
+    /* @__PURE__ */ o.jsxs(
+      jt,
+      {
+        onClick: () => {
+          p(
+            g.key,
+            g.sortOrder
+          );
+        },
+        children: [
+          /* @__PURE__ */ o.jsx(z, { children: g.value }),
+          /* @__PURE__ */ o.jsx(
+            me,
+            {
+              sortDataValue: i.sortKey,
+              headerdata: g,
+              children: /* @__PURE__ */ o.jsx(ue, {})
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ o.jsx(
+    ge,
+    {
+      companyNameSticky: e,
+      windowSize: a,
+      children: l.map((m) => /* @__PURE__ */ o.jsx(
+        ft,
+        {
+          companyNameSticky: e && m.key === "invitee_email",
+          sortDataValue: i.sortKey,
+          actualDataValue: m.key,
+          wrapperWidth: m.width,
+          windowSize: a,
+          shouldRightAlign: m.value === "Amount",
+          children: /* @__PURE__ */ o.jsxs(
+            Ct,
+            {
+              onClick: () => {
+                p(
+                  ne(m.key),
+                  m.sortOrder
+                );
+              },
+              children: [
+                /* @__PURE__ */ o.jsx(z, { children: m.value }),
+                /* @__PURE__ */ o.jsx(
+                  me,
+                  {
+                    sortDataValue: i.sortKey,
+                    headerdata: m,
+                    children: /* @__PURE__ */ o.jsx(ue, {})
+                  }
+                )
+              ]
+            }
+          )
+        },
+        m.key
+      ))
+    }
+  );
+}
+const ge = r(z)`
+  top: ${t.sp0};
+  left: ${t.sp0};
+  min-height: ${(e) => M.headerHeight.valuePx(e.windowSize)};
+  max-height: ${(e) => M.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${(e) => `${M.headerLastColumnTopPadding.valuePx(
+  e.windowSize
+)} ${M.headerLastColumnRightPadding.valuePx(
+  e.windowSize
+)} ${M.headerLastColumnBottomPadding.valuePx(
+  e.windowSize
+)} ${M.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${(e) => e.theme.colors.grey4};
+  justify-content: space-between;
+`, ft = r.div`
+  color: ${(e) => e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.grey1};
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  display: flex;
+  align-items: center;
+  left: ${t.sp0};
+  justify-content: ${(e) => e.shouldRightAlign === !0 ? "flex-end" : "flex-start"};
+  box-sizing: border-box;
+`, me = r.div`
+  display: flex;
+  align-items: center;
+  transform: ${(e) => e.sortDataValue === e.headerdata.key && e.headerdata.sortOrder === "descending" ? "rotate(180deg)" : "rotate(0deg)"};
+  ${(e) => e.headerdata.sortOrder === "ascending" ? "padding-top: 2px" : "padding-bottom: 2px"}
+`, ue = r(Fe)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`, yt = r.div`
+  gap: ${t.sp1};
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+`, vt = r(Ve)`
+  width: 12px;
+  height: 12px;
+  color: ${(e) => e.theme.colors.grey1};
+`, bt = r.div`
+  margin-right: ${t.sp1};
+  display: flex;
+  align-items: center;
+`, Ct = r.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, jt = r.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  color: ${(e) => e.theme.colors.hero};
+`, T = {
+  containerPaddingLeft: new h(s[3], s[4]),
+  containerPaddingRight: new h(s[3], s[4]),
+  containerPaddingTop: new h(s[2], 12),
+  containerPaddingBottom: new h(s[2], 12),
+  containerMarginLeft: new h(s[4], s[8]),
+  containerMarginRight: new h(s[4], s[8]),
+  webkitLineClamp: new h(2, 1, 1, 1, 1)
+}, {
+  dateFormat: St,
+  rewardsPage: { inviteList: kt },
+  common: xe
+} = y.getLocalizedStrings(), zt = ({
+  email: e,
+  amount: i,
+  status: n,
+  resendInviteStatus: d,
+  inviteSendDate: a,
+  onResendInviteClick: l
+}) => {
+  const c = b();
+  let p = !1;
+  if (a) {
+    const u = new Date(
+      a.format(St.visual.YYYYDashMMDashDFormat)
+    );
+    p = be(72, u);
+  }
+  const g = n.value === f.reward_sent ? I.received : I.to_be_received, x = d.fetchState === "In-Progress" ? /* @__PURE__ */ o.jsx(Ce, { size: "Small", start: !0 }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(
+      At,
+      {
+        color: n.color,
+        onClick: () => {
+          l(e);
+        },
+        children: kt.status.resend_invite
+      }
+    ),
+    /* @__PURE__ */ o.jsx(Ot, { children: `${xe.sent} ${je(
+      a
+    )}` })
+  ] });
+  return /* @__PURE__ */ o.jsx(It, { windowSize: c, children: /* @__PURE__ */ o.jsx(Rt, { children: /* @__PURE__ */ o.jsxs(Tt, { children: [
+    /* @__PURE__ */ o.jsxs(
+      Lt,
+      {
+        windowSize: c,
+        responsiveWidth: W[0].width,
+        children: [
+          /* @__PURE__ */ o.jsx(Pt, { children: /* @__PURE__ */ o.jsx(Wt, {}) }),
+          /* @__PURE__ */ o.jsx(_t, { windowSize: c, children: e })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      Ht,
+      {
+        windowSize: c,
+        responsiveWidth: W[1].width,
+        children: n.value === f.invite_sent && p ? x : /* @__PURE__ */ o.jsx(Vt, { children: /* @__PURE__ */ o.jsx(
+          Dt,
+          {
+            color: n.color,
+            borderColor: n.borderColor,
+            children: n.value === f.reward_sent ? f.active : n.value
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      Mt,
+      {
+        windowSize: c,
+        responsiveWidth: W[2].width,
+        amountStatus: g,
+        children: n.value === f.declined ? /* @__PURE__ */ o.jsx(Bt, { children: xe.strings.hyphen }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          S("0,0.[00]", i),
+          /* @__PURE__ */ o.jsx(Et, { amountStatus: g, children: g })
+        ] })
+      }
+    )
+  ] }) }) });
+}, It = r.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${t.sp3};
+  margin-right: ${(e) => T.containerMarginRight.valuePx(e.windowSize)};
+  margin-left: ${(e) => T.containerMarginLeft.valuePx(e.windowSize)};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => T.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => T.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => T.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => T.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => `0 2px ${t.sp1} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.sp2};
+  box-sizing: border-box;
+  height: max-content;
+`, Rt = r.div`
+  display: block;
+  width: 100%;
+`, Tt = r.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  height: 42px;
+  flex: 1 1 auto;
+`, Lt = r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${t.sp1};
+  flex: 1 1 auto;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+`, Pt = r.div`
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+`, _t = r(N)`
+  flex: 1 1 auto;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: ${(e) => T.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: initial;
+`, Mt = r(N)`
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: end;
+  flex: 1 1 auto;
+  color: ${(e) => e.amountStatus === I.to_be_received ? e.theme.colors.grey2 : e.theme.colors.primary};
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+`, Bt = r(ke)`
+  color: ${(e) => e.theme.colors.hero};
+`, Et = r(z)`
+  color: ${(e) => e.amountStatus === I.to_be_received ? e.theme.colors.grey2 : j.success};
+`, Dt = r(A)`
+  display: flex;
+  color: ${(e) => e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${t.sp0} 6px;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border: ${(e) => `1px solid ${e.borderColor}`};
+  border-radius: ${t.sp1};
+`, At = r(oe)`
+  display: flex;
+  color: ${(e) => e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+`, Ht = r.div`
+  position: relative;
+  top: 2px;
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  min-width: ${t.sp12};
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`, Ot = r(A)`
+  position: relative;
+  top: 1px;
+  color: ${(e) => e.theme.colors.grey1};
+`, Wt = r(Se)`
+  height: ${t.sp6};
+  width: ${t.sp6};
+  flex-shrink: 0;
+  color: ${(e) => e.theme.colors.grey2};
+  margin-right: ${t.sp1};
+`, Vt = r.div`
+  display: flex;
+`, L = {
+  containerPaddingLeft: new h(s[3], s[4]),
+  containerPaddingRight: new h(s[3], s[4]),
+  containerPaddingTop: new h(s[3], s[3]),
+  containerPaddingBottom: new h(s[3], s[3]),
+  containerMarginLeft: new h(s[3], s[8]),
+  containerMarginRight: new h(s[3], s[8]),
+  webkitLineClamp: new h(2, 2, 1, 1, 1)
+}, {
+  dateFormat: Ft,
+  rewardsPage: { inviteList: Nt },
+  common: $e
+} = y.getLocalizedStrings(), Kt = ({
+  email: e,
+  amount: i,
+  status: n,
+  resendInviteStatus: d,
+  inviteSendDate: a,
+  onResendInviteClick: l
+}) => {
+  const c = b();
+  let p = !1;
+  if (a) {
+    const u = new Date(
+      a.format(Ft.visual.YYYYDashMMDashDFormat)
+    );
+    p = be(72, u);
+  }
+  const g = n.value === f.active ? I.received : I.to_be_received, x = d.fetchState === "In-Progress" ? /* @__PURE__ */ o.jsx(Ce, { size: "Small", start: !0 }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+    /* @__PURE__ */ o.jsx(
+      tr,
+      {
+        color: n.color,
+        onClick: () => {
+          l(e);
+        },
+        children: Nt.status.resend_invite
+      }
+    ),
+    /* @__PURE__ */ o.jsx(rr, { children: `${$e.sent} ${je(
+      a
+    )}` })
+  ] });
+  return /* @__PURE__ */ o.jsx(Gt, { windowSize: c, children: /* @__PURE__ */ o.jsxs(Yt, { children: [
+    /* @__PURE__ */ o.jsxs(nr, { children: [
+      /* @__PURE__ */ o.jsxs(Ut, { children: [
+        /* @__PURE__ */ o.jsx(Jt, { children: /* @__PURE__ */ o.jsx(ir, {}) }),
+        /* @__PURE__ */ o.jsx(Xt, { windowSize: c, children: e })
+      ] }),
+      /* @__PURE__ */ o.jsx(qt, { amountStatus: g, children: n.value === f.declined ? /* @__PURE__ */ o.jsx(Qt, { children: $e.strings.hyphen }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        S("0,0.[00]", i),
+        /* @__PURE__ */ o.jsx(Zt, { amountStatus: g, children: g })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ o.jsx(sr, { children: /* @__PURE__ */ o.jsx(or, { children: n.value === f.invite_sent && p ? x : /* @__PURE__ */ o.jsx(ar, { children: /* @__PURE__ */ o.jsx(
+      er,
+      {
+        color: n.color,
+        borderColor: n.borderColor,
+        children: n.value
+      }
+    ) }) }) })
+  ] }) });
+}, Gt = r.div`
+  display: flex;
+  margin-bottom: ${t.sp3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => L.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => L.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => L.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => L.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => `0 2px ${t.sp1} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${t.sp2};
+  cursor: pointer;
+  margin-right: ${(e) => L.containerMarginRight.valuePx(e.windowSize)};
+  margin-left: ${(e) => L.containerMarginLeft.valuePx(e.windowSize)};
+`, Yt = r.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`, Ut = r.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: ${(e) => e.theme.colors.hero};
+  width: 100%;
+`, Jt = r.div`
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+`, Xt = r(N)`
+  color: ${(e) => e.theme.colors.hero};
+  flex-grow: 1;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: ${(e) => L.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${Pe}px;
+`, qt = r(z)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  color: ${(e) => e.amountStatus === I.to_be_received ? e.theme.colors.grey2 : e.theme.colors.primary};
+  width: 100%;
+  margin-left: ${t.sp5};
+`, Qt = r(ke)`
+  color: ${(e) => e.theme.colors.hero};
+`, Zt = r(A)`
+  color: ${(e) => e.amountStatus === I.to_be_received ? e.theme.colors.grey2 : e.theme.colors.success};
+`, er = r(A)`
+  color: ${(e) => e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${t.sp0} 6px;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-flex;
+  border: ${(e) => `1px solid ${e.borderColor}`};
+  border-radius: ${t.sp1};
+`, or = r.div`
+  width: 100%;
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+`, tr = r(Ne)`
+  display: flex;
+  color: ${(e) => e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  cursor: pointer;
+`, rr = r(A)`
+  color: ${(e) => e.theme.colors.grey1};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`, ir = r(Se)`
+  height: ${t.sp4};
+  width: ${t.sp4};
+  flex-shrink: 0;
+  margin-right: ${t.sp1};
+  color: ${(e) => e.theme.colors.grey2};
+`, nr = r.div`
+  display: flex;
+  flex-direction: column;
+  width: 188px;
+`, sr = r.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  width: 108px;
+  padding-top: 2px;
+`, ar = r.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, H = {
+  pageTitleMarginLeft: new h(s[3], s[8]),
+  pageTitleMarginRight: new h(s[3], s[8]),
+  pageTitleMarginTop: new h(s[4], s[5]),
+  pageTitleMarginBottom: new h(s[3], s[3])
+}, lr = {
+  pageTitle: new B("standardSemiBold", "largeSemiBold")
+}, we = y.getLocalizedStrings(), cr = ({
+  index: e,
+  style: i,
+  inviteList: n,
+  onResendInviteClick: d
+}) => {
+  const a = b(), l = n[e], c = a === "small" ? Kt : zt;
+  return /* @__PURE__ */ o.jsx(
+    wr,
+    {
+      style: {
+        ...i,
+        width: "100%"
+      },
+      children: /* @__PURE__ */ o.jsx(
+        c,
+        {
+          email: l.refereeEmailId,
+          amount: l.amount,
+          status: $t(l.statusCode),
+          resendInviteStatus: l.resendInviteStatus,
+          onResendInviteClick: d,
+          inviteSendDate: l.lastInviteTimestamp
+        }
+      )
+    }
+  );
+}, dr = ({
+  inviteList: e,
+  uiState: i,
+  fetchState: n,
+  onResendInviteClick: d,
+  onReloadInvitees: a,
+  onColumnSortConfigChanged: l
+}) => {
+  const c = b(), p = ($) => {
+    const C = e[$].refereeEmailId;
+    return he(C, c);
+  }, g = e.reduce(($, C) => $ + he(C.refereeEmailId, c), 0), x = q(null);
+  P(() => {
+    x.current?.resetAfterIndex(0);
+  }, [c, x]);
+  let u = null;
+  switch (n) {
+    case "Not-Started":
+    case "In-Progress":
+      u = /* @__PURE__ */ o.jsx(Ue, { fetchState: n });
+      break;
+    case "Error":
+      u = /* @__PURE__ */ o.jsxs(pr, { children: [
+        /* @__PURE__ */ o.jsx(gr, { onClick: a, children: /* @__PURE__ */ o.jsx(mr, {}) }),
+        /* @__PURE__ */ o.jsx(ur, { children: we.peoplePage.reloadPage.label })
+      ] });
+      break;
+    case "Completed":
+      e.length !== 0 && (u = /* @__PURE__ */ o.jsxs($r, { windowSize: c, children: [
+        /* @__PURE__ */ o.jsx(xr, { windowSize: c, children: we.rewardsPage.inviteList.pageTitle }),
+        /* @__PURE__ */ o.jsx(
+          wt,
+          {
+            companyNameSticky: !1,
+            onColumnSortConfigChanged: l,
+            sortConfig: {
+              sortKey: i.sortKey,
+              sortOrder: i.sortOrder
+            }
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          Be,
+          {
+            ref: x,
+            height: g,
+            width: "100%",
+            itemCount: e.length,
+            itemSize: p,
+            estimatedItemSize: X,
+            itemKey: ($) => e[$].refereeEmailId,
+            overscanCount: ht,
+            initialScrollOffset: 0,
+            children: ($) => /* @__PURE__ */ o.jsx(
+              cr,
+              {
+                ...$,
+                inviteList: e,
+                onResendInviteClick: d
+              }
+            )
+          }
+        )
+      ] }));
+  }
+  return /* @__PURE__ */ o.jsx(hr, { children: u });
+}, hr = r.div`
+  display: block;
+  height: 100%;
+`, pr = r.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, gr = r.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`, mr = r(Ke)`
+  height: ${t.sp5};
+  width: ${t.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ur = r(Ge)`
+  margin-top: ${t.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, xr = r(D)`
+  ${(e) => `${lr.pageTitle.style(e.windowSize)}`};
+  margin-top: ${(e) => H.pageTitleMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => H.pageTitleMarginBottom.valuePx(e.windowSize)};
+  margin-left: ${(e) => H.pageTitleMarginLeft.valuePx(e.windowSize)};
+  margin-right: ${(e) => H.pageTitleMarginRight.valuePx(e.windowSize)};
+  color: ${(e) => e.theme.colors.primary};
+`, $r = r.div`
+  height: 100%;
+  width: 100%;
+`, wr = r.div`
+  top: ${t.sp0};
+  left: ${t.sp0};
+  padding-bottom: ${t.sp3};
+  box-sizing: border-box;
+  &:last-child {
+    padding-bottom: ${t.sp0};
+  }
+`, fr = {
+  referralButtonRightPosition: new h(-s[1], 28, 28, -s[1])
+}, {
+  rewardsPage: { referButton: Y },
+  common: { texts: O }
+} = y.getLocalizedStrings();
+function yr(e) {
+  const i = b(), [n, d] = k(!1), [, a] = F(), [l, c] = k(!1), p = () => {
+    e.onCopyReferralLink(), l || (a(e.referralLink.toString()), c(!0));
+  };
+  return P(() => {
+    l === !0 && setTimeout(() => {
+      c(!1), d(!1);
+    }, 2e3);
+  }, [l]), /* @__PURE__ */ o.jsx(vr, { windowSize: i, children: /* @__PURE__ */ o.jsx(
+    Ee,
+    {
+      onClickAway: () => {
+        d(!1);
+      },
+      children: /* @__PURE__ */ o.jsx(
+        br,
+        {
+          onClick: () => {
+            n || e.onClickRefer(), d(!0);
+          },
+          onTouchEnd: () => {
+            n || e.onClickRefer(), d(!0);
+          },
+          children: /* @__PURE__ */ o.jsx(
+            Xe,
+            {
+              entity: "rewards",
+              isMoreOption: !1,
+              closeMenuOnSelect: !1,
+              isMenuOpen: n,
+              title: O.refer,
+              options: [
+                {
+                  label: Y.inviteViaEmail,
+                  value: O.invite
+                },
+                {
+                  label: l ? Y.urlCopied : Y.copyReferralUrl,
+                  value: l ? O.copied : O.copy
+                }
+              ],
+              customStyleConfig: {
+                control: () => ({
+                  backgroundColor: "inherit",
+                  cursor: "pointer",
+                  border: "none",
+                  ":hover": {
+                    backgroundColor: "inherit"
+                  }
+                }),
+                container: () => ({
+                  marginLeft: s[0]
+                }),
+                valueContainer: () => ({
+                  display: "flex"
+                })
+              },
+              onOptionSelection: (g) => {
+                switch (g) {
+                  case "invite":
+                    e.onInviteClick();
+                    break;
+                  case "copy":
+                    p();
+                    break;
+                }
+              }
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+const vr = r.div`
+  position: absolute;
+  right: ${(e) => fr.referralButtonRightPosition.valuePx(e.windowSize)};
+`, br = r.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Cr = y.getLocalizedStrings().rewardsPage, Dr = (e) => {
+  const i = V(), n = b(), {
+    pendingBonus: d,
+    earnedBonus: a,
+    rewardsPlan: l,
+    pendingReferrals: c,
+    inviteList: p,
+    uiState: g,
+    fetchState: x,
+    onInviteClick: u,
+    onBackClick: $,
+    onHowItWorksClick: C,
+    onReloadInvitees: m,
+    onResendInviteClick: w,
+    onColumnSortConfigChanged: _,
+    onCopyReferralLink: R,
+    onClickRefer: G,
+    onClickMenuIcon: _e
+  } = e, [Me, re] = k(!0);
+  let ie = null;
+  return Me || (ie = /* @__PURE__ */ o.jsx(
+    yr,
+    {
+      referralLink: l.referralLink,
+      onInviteClick: u,
+      onClickRefer: G,
+      onCopyReferralLink: R
+    }
+  )), /* @__PURE__ */ o.jsxs(jr, { children: [
+    /* @__PURE__ */ o.jsx(
+      Ye,
+      {
+        source: "InvitePageListView",
+        title: Cr.pageTitle,
+        showBackButton: !0,
+        backgroundColor: i.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: $,
+        showMenuIcon: n === "medium-compact" || n === "small",
+        onClickMenuIcon: _e,
+        rightSideComponent: ie
+      }
+    ),
+    p.length === 0 ? /* @__PURE__ */ o.jsx(zr, { children: /* @__PURE__ */ o.jsx(
+      Lo,
+      {
+        rewardsPlan: l,
+        onHowItWorksClick: C,
+        onInviteClick: u,
+        onCopyReferral: R
+      }
+    ) }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      n === "small" ? /* @__PURE__ */ o.jsxs(kr, { children: [
+        /* @__PURE__ */ o.jsx(
+          ae,
+          {
+            pendingBonus: d,
+            earnedBonus: a,
+            pendingReferrals: c,
+            onHowItWorksClick: C
+          }
+        ),
+        /* @__PURE__ */ o.jsx(
+          Re,
+          {
+            referralLink: l.referralLink,
+            onInviteClick: u,
+            onCopyReferral: R,
+            setShowNavButton: re
+          }
+        )
+      ] }) : /* @__PURE__ */ o.jsxs(Sr, { children: [
+        /* @__PURE__ */ o.jsx(fe, { children: /* @__PURE__ */ o.jsx(
+          ae,
+          {
+            pendingBonus: d,
+            earnedBonus: a,
+            pendingReferrals: c,
+            onHowItWorksClick: C
+          }
+        ) }),
+        /* @__PURE__ */ o.jsx(fe, { children: /* @__PURE__ */ o.jsx(
+          Oo,
+          {
+            rewardsPlan: l,
+            onInviteClick: u,
+            setShowNavButton: re,
+            onCopyReferral: R
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ o.jsx(
+        dr,
+        {
+          inviteList: p,
+          fetchState: x,
+          onReloadInvitees: m,
+          onColumnSortConfigChanged: _,
+          uiState: g,
+          onResendInviteClick: w
+        }
+      )
+    ] })
+  ] });
+}, jr = r.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+  overflow-y: auto;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, Sr = r.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: ${t.sp0} ${t.sp8} ${t.sp4} ${t.sp8};
+  padding: ${t.sp1};
+  height: 280px;
+`, kr = r.div`
+  margin: ${t.sp3};
+`, zr = r.div`
+  height: 100%;
+`, fe = r.div`
+  width: 49%;
+`;
+export {
+  Dr as default
+};