@zeniai/web-components 3.16.42 → 3.16.43

package/dist/InvitePageListView-Dafwd6P9.js

@@ -0,0 +1,1764 @@
+import { u as W, j as o, V as Be, C as Ee } from "./vendor-.pnpm-BZbZ6JJC.js";
+import { useEffect as L, useState as k, useRef as q } from "react";
+import r from "@emotion/styled";
+import { S as t, fR as F, u as b, a as y, B as U, t as E, R as h, ah as Q, C as j, ba as Z, fX as ee, D as s, a5 as S, av as B, K as D, H as ye, aj as ve, y as De, fV as oe, E as A, ax as Ae, G as z, V as He, p as N, J as Oe, ij as v, eV as Ve, fI as We, ab as Fe, kn as be, A as Ce, f9 as je, ko as Se, _ as ke, k7 as Ne, x as Ge, P as Ke, aE as Ye } from "./index-oyJQP6ol.js";
+import { S as ze } from "./gift-box-Cmt9OgIZ.js";
+import { B as Ue } from "./BusyIndication-ozy3ruPL.js";
+import { c as Je } from "./calculateSize-BwCz5tdv.js";
+import { StatusTypes as w, toReferralListViewSortKeyType as ie, AmountStatusTypes as I } from "@zeniai/client-epic-state";
+import { M as Xe } from "./MoreMenuButton-C4b3VBO4.js";
+const Ie = (e, n) => {
+  L(() => {
+    const i = e.current;
+    if (window.IntersectionObserver == null)
+      return;
+    const d = new IntersectionObserver(
+      ([a]) => {
+        n && n(a.isIntersecting);
+      },
+      {
+        root: null,
+        rootMargin: t.sp0,
+        threshold: 0.1
+      }
+    );
+    return i && d.observe(i), () => {
+      i && d.unobserve(i);
+    };
+  });
+}, 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: n,
+  onCopyReferral: i,
+  setShowNavButton: d
+}) {
+  const [, a] = F(), [l, c] = k(!1), p = b(), g = W(), x = () => {
+    i(), l || (a(e.toString()), c(!0));
+  };
+  L(() => {
+    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: n,
+        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 Pe({ planAmount: e }) {
+  const n = b(), {
+    rewardsPage: { rewardsCard: i }
+  } = y.getLocalizedStrings();
+  return /* @__PURE__ */ o.jsxs(ro, { windowSize: n, children: [
+    /* @__PURE__ */ o.jsxs(no, { children: [
+      /* @__PURE__ */ o.jsx(ao, { windowSize: n, children: i.bonus }),
+      /* @__PURE__ */ o.jsx(lo, { windowSize: n, children: S("0,0", e) })
+    ] }),
+    /* @__PURE__ */ o.jsx(io, { windowSize: n, 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}`};
+  }
+`, no = r.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: 28px;
+`, io = 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: n,
+  onHowItWorksClick: i,
+  onCopyReferral: d
+}) {
+  const a = b(), [, l] = F(), [c, p] = k(!1), g = () => {
+    d(), c || (l(e.referralLink.toString()), p(!0));
+  };
+  L(() => {
+    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: i, children: $ })
+      ] }),
+      /* @__PURE__ */ o.jsxs(go, { children: [
+        /* @__PURE__ */ o.jsxs(fo, { onClick: n, children: [
+          /* @__PURE__ */ o.jsx(wo, {}),
+          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(Pe, { 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};
+  }
+`, fo = 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};
+  }
+`, wo = 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: n,
+  onHowItWorksClick: i,
+  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: i, children: c }),
+      /* @__PURE__ */ o.jsx(zo, { children: /* @__PURE__ */ o.jsx(Pe, { planAmount: e.referrerAmount }) })
+    ] }),
+    /* @__PURE__ */ o.jsx(
+      Re,
+      {
+        referralLink: e.referralLink,
+        onCopyReferral: d,
+        onInviteClick: n
+      }
+    )
+  ] });
+}
+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 Po({
+  rewardsPlan: e,
+  onHowItWorksClick: n,
+  onInviteClick: i,
+  onCopyReferral: d
+}) {
+  return b() === "small" ? /* @__PURE__ */ o.jsx(
+    jo,
+    {
+      rewardsPlan: e,
+      onInviteClick: i,
+      onHowItWorksClick: n,
+      onCopyReferral: d
+    }
+  ) : /* @__PURE__ */ o.jsx(
+    co,
+    {
+      rewardsPlan: e,
+      onHowItWorksClick: n,
+      onInviteClick: i,
+      onCopyReferral: d
+    }
+  );
+}
+function Lo({
+  planAmount: e
+}) {
+  const {
+    rewardsPage: { rewardsCard: n }
+  } = y.getLocalizedStrings();
+  return /* @__PURE__ */ o.jsxs(_o, { children: [
+    /* @__PURE__ */ o.jsxs(Mo, { children: [
+      /* @__PURE__ */ o.jsx(Do, { children: n.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: n,
+  setShowNavButton: i,
+  onCopyReferral: d
+}) {
+  const a = W(), 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);
+  };
+  L(() => {
+    p === !0 && setTimeout(() => {
+      g(!1);
+    }, 2e3);
+  }, [p]);
+  const { rewardsCard: f, referAndEarn: _ } = y.getLocalizedStrings().rewardsPage, R = q(null);
+  Ie(R, i);
+  const K = x ? /* @__PURE__ */ o.jsx(se, { showCopyText: x, isCopied: p, children: f.copyReferralLink }) : null;
+  return /* @__PURE__ */ o.jsxs(Vo, { windowSize: l, children: [
+    /* @__PURE__ */ o.jsxs(Wo, { children: [
+      /* @__PURE__ */ o.jsx(Go, { children: _ }),
+      /* @__PURE__ */ o.jsx(Ko, { children: f.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: f.inviteViaEmail,
+            onClick: n,
+            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: f.copied })
+        ] }) : K })
+      ] })
+    ] }),
+    l === "medium-compact" || l === "medium-regular" ? null : /* @__PURE__ */ o.jsx(No, { children: /* @__PURE__ */ o.jsx(Lo, { planAmount: e.referrerAmount }) })
+  ] });
+}
+const Vo = 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};
+`, Wo = 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;
+`, Go = r(He)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-bottom: ${t.sp2};
+`, Ko = 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)
+}, G = {
+  earningValue: new B("h6Regular", "h5Regular"),
+  cardTitle: new B("extraSmallRegular", "smallRegular"),
+  buttonText: new B("extraSmallRegular", "smallRegular")
+};
+function ae({
+  pendingBonus: e,
+  earnedBonus: n,
+  pendingReferrals: i,
+  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", n) })
+      ] }),
+      c === "medium-compact" ? /* @__PURE__ */ o.jsx(it, {}) : /* @__PURE__ */ o.jsx(nt, {}),
+      /* @__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,
+        " ",
+        i
+      ] }),
+      /* @__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) => `${G.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;
+`, nt = r.div`
+  padding-left: ${t.sp1};
+  margin-left: ${t.sp1};
+  height: 50%;
+  border-left: 1px solid ${j.neutralGrey1Light};
+`, it = 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) => `${G.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) => `${G.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) => `${G.buttonText.style(e.windowSize)}`};
+`, dt = 90, X = 114, Le = 160, ht = 1, pt = 58, gt = 45, he = (e, n) => n !== "small" ? dt : Je(e, {
+  ...E.standardRegular.cssPartialObject([
+    "fontSize",
+    "fontFamily",
+    "fontWeight"
+  ])
+}).width < Le ? 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)
+}, V = [
+  mt,
+  xt,
+  ut
+], $t = (e) => {
+  const n = e.toLowerCase().split(pe.space).join(pe.underscore);
+  switch (e) {
+    case w.invite_processing:
+      return {
+        value: e,
+        color: v.invite_processing.color,
+        borderColor: v.invite_processing.borderColor,
+        code: n
+      };
+    case w.invite_sent:
+      return {
+        value: e,
+        color: v.invite_sent.color,
+        borderColor: v.invite_sent.borderColor,
+        code: n
+      };
+    case w.onboarding:
+      return {
+        value: e,
+        color: v.onboarding.color,
+        borderColor: v.onboarding.borderColor,
+        code: n
+      };
+    case w.active:
+    case w.reward_sent:
+      return {
+        value: e,
+        color: v.active.color,
+        borderColor: v.active.borderColor,
+        code: n
+      };
+    case w.declined:
+      return {
+        value: e,
+        color: v.declined.color,
+        borderColor: v.declined.borderColor,
+        code: n
+      };
+    case w.resend_invite:
+      return {
+        value: e,
+        color: v.resend_invite.color,
+        borderColor: v.resend_invite.borderColor,
+        code: n
+      };
+    default:
+      return {
+        value: e,
+        color: v.in_progress.color,
+        borderColor: "",
+        code: n
+      };
+  }
+}, 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 ft({
+  companyNameSticky: e,
+  sortConfig: n,
+  onColumnSortConfigChanged: i
+}) {
+  const d = W(), a = b(), [l, c] = k(
+    V
+  );
+  L(() => {
+    const m = [...l];
+    for (const f of m)
+      f.key === n.sortKey ? f.sortOrder = n.sortOrder : f.sortOrder = "ascending";
+    c(m);
+  }, [n.sortKey, n.sortOrder]);
+  const p = (m, f) => {
+    let _ = f;
+    n.sortKey === m && (_ = f === "ascending" ? "descending" : "ascending"), i(m, _);
+  }, g = l.find((m) => m.key === n.sortKey) ?? l[0], x = (m) => l.find((f) => f.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(
+        Ve,
+        {
+          title: $.sortBy,
+          placeholder: $.sortBy,
+          pickerValues: u,
+          valueToLabel: x,
+          selectedValue: n.sortKey,
+          onPickerSelectionChanged: (m) => {
+            m && p(
+              ie(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: n.sortKey,
+              headerdata: g,
+              children: /* @__PURE__ */ o.jsx(ue, {})
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ o.jsx(
+    ge,
+    {
+      companyNameSticky: e,
+      windowSize: a,
+      children: l.map((m) => /* @__PURE__ */ o.jsx(
+        wt,
+        {
+          companyNameSticky: e && m.key === "invitee_email",
+          sortDataValue: n.sortKey,
+          actualDataValue: m.key,
+          wrapperWidth: m.width,
+          windowSize: a,
+          shouldRightAlign: m.value === "Amount",
+          children: /* @__PURE__ */ o.jsxs(
+            Ct,
+            {
+              onClick: () => {
+                p(
+                  ie(m.key),
+                  m.sortOrder
+                );
+              },
+              children: [
+                /* @__PURE__ */ o.jsx(z, { children: m.value }),
+                /* @__PURE__ */ o.jsx(
+                  me,
+                  {
+                    sortDataValue: n.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;
+`, wt = 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(We)`
+  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: n,
+  status: i,
+  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 = i.value === w.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: i.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(
+      Pt,
+      {
+        windowSize: c,
+        responsiveWidth: V[0].width,
+        children: [
+          /* @__PURE__ */ o.jsx(Lt, { children: /* @__PURE__ */ o.jsx(Vt, {}) }),
+          /* @__PURE__ */ o.jsx(_t, { windowSize: c, children: e })
+        ]
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      Ht,
+      {
+        windowSize: c,
+        responsiveWidth: V[1].width,
+        children: i.value === w.invite_sent && p ? x : /* @__PURE__ */ o.jsx(Wt, { children: /* @__PURE__ */ o.jsx(
+          Dt,
+          {
+            color: i.color,
+            borderColor: i.borderColor,
+            children: i.value === w.reward_sent ? w.active : i.value
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ o.jsx(
+      Mt,
+      {
+        windowSize: c,
+        responsiveWidth: V[2].width,
+        amountStatus: g,
+        children: i.value === w.declined ? /* @__PURE__ */ o.jsx(Bt, { children: xe.strings.hyphen }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+          S("0,0.[00]", n),
+          /* @__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;
+`, Pt = 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)};
+`, Lt = 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};
+`, Vt = r(Se)`
+  height: ${t.sp6};
+  width: ${t.sp6};
+  flex-shrink: 0;
+  color: ${(e) => e.theme.colors.grey2};
+  margin-right: ${t.sp1};
+`, Wt = r.div`
+  display: flex;
+`, P = {
+  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(), Gt = ({
+  email: e,
+  amount: n,
+  status: i,
+  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 = i.value === w.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: i.color,
+        onClick: () => {
+          l(e);
+        },
+        children: Nt.status.resend_invite
+      }
+    ),
+    /* @__PURE__ */ o.jsx(rr, { children: `${$e.sent} ${je(
+      a
+    )}` })
+  ] });
+  return /* @__PURE__ */ o.jsx(Kt, { windowSize: c, children: /* @__PURE__ */ o.jsxs(Yt, { children: [
+    /* @__PURE__ */ o.jsxs(ir, { children: [
+      /* @__PURE__ */ o.jsxs(Ut, { children: [
+        /* @__PURE__ */ o.jsx(Jt, { children: /* @__PURE__ */ o.jsx(nr, {}) }),
+        /* @__PURE__ */ o.jsx(Xt, { windowSize: c, children: e })
+      ] }),
+      /* @__PURE__ */ o.jsx(qt, { amountStatus: g, children: i.value === w.declined ? /* @__PURE__ */ o.jsx(Qt, { children: $e.strings.hyphen }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+        S("0,0.[00]", n),
+        /* @__PURE__ */ o.jsx(Zt, { amountStatus: g, children: g })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ o.jsx(sr, { children: /* @__PURE__ */ o.jsx(or, { children: i.value === w.invite_sent && p ? x : /* @__PURE__ */ o.jsx(ar, { children: /* @__PURE__ */ o.jsx(
+      er,
+      {
+        color: i.color,
+        borderColor: i.borderColor,
+        children: i.value
+      }
+    ) }) }) })
+  ] }) });
+}, Kt = r.div`
+  display: flex;
+  margin-bottom: ${t.sp3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-left: ${(e) => P.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => P.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => P.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => P.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) => P.containerMarginRight.valuePx(e.windowSize)};
+  margin-left: ${(e) => P.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) => P.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${Le}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;
+`, nr = r(Se)`
+  height: ${t.sp4};
+  width: ${t.sp4};
+  flex-shrink: 0;
+  margin-right: ${t.sp1};
+  color: ${(e) => e.theme.colors.grey2};
+`, ir = 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")
+}, fe = y.getLocalizedStrings(), cr = ({
+  index: e,
+  style: n,
+  inviteList: i,
+  onResendInviteClick: d
+}) => {
+  const a = b(), l = i[e], c = a === "small" ? Gt : zt;
+  return /* @__PURE__ */ o.jsx(
+    fr,
+    {
+      style: {
+        ...n,
+        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: n,
+  fetchState: i,
+  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);
+  L(() => {
+    x.current?.resetAfterIndex(0);
+  }, [c, x]);
+  let u = null;
+  switch (i) {
+    case "Not-Started":
+    case "In-Progress":
+      u = /* @__PURE__ */ o.jsx(Ue, { fetchState: i });
+      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: fe.peoplePage.reloadPage.label })
+      ] });
+      break;
+    case "Completed":
+      e.length !== 0 && (u = /* @__PURE__ */ o.jsxs($r, { windowSize: c, children: [
+        /* @__PURE__ */ o.jsx(xr, { windowSize: c, children: fe.rewardsPage.inviteList.pageTitle }),
+        /* @__PURE__ */ o.jsx(
+          ft,
+          {
+            companyNameSticky: !1,
+            onColumnSortConfigChanged: l,
+            sortConfig: {
+              sortKey: n.sortKey,
+              sortOrder: n.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(Ge)`
+  height: ${t.sp5};
+  width: ${t.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ur = r(Ke)`
+  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%;
+`, fr = r.div`
+  top: ${t.sp0};
+  left: ${t.sp0};
+  padding-bottom: ${t.sp3};
+  box-sizing: border-box;
+  &:last-child {
+    padding-bottom: ${t.sp0};
+  }
+`, wr = {
+  referralButtonRightPosition: new h(-s[1], 28, 28, -s[1])
+}, {
+  rewardsPage: { referButton: Y },
+  common: { texts: O }
+} = y.getLocalizedStrings();
+function yr(e) {
+  const n = b(), [i, d] = k(!1), [, a] = F(), [l, c] = k(!1), p = () => {
+    e.onCopyReferralLink(), l || (a(e.referralLink.toString()), c(!0));
+  };
+  return L(() => {
+    l === !0 && setTimeout(() => {
+      c(!1), d(!1);
+    }, 2e3);
+  }, [l]), /* @__PURE__ */ o.jsx(vr, { windowSize: n, children: /* @__PURE__ */ o.jsx(
+    Ee,
+    {
+      onClickAway: () => {
+        d(!1);
+      },
+      children: /* @__PURE__ */ o.jsx(
+        br,
+        {
+          onClick: () => {
+            i || e.onClickRefer(), d(!0);
+          },
+          onTouchEnd: () => {
+            i || e.onClickRefer(), d(!0);
+          },
+          children: /* @__PURE__ */ o.jsx(
+            Xe,
+            {
+              entity: "rewards",
+              isMoreOption: !1,
+              closeMenuOnSelect: !1,
+              isMenuOpen: i,
+              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) => wr.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 n = W(), i = b(), {
+    pendingBonus: d,
+    earnedBonus: a,
+    rewardsPlan: l,
+    pendingReferrals: c,
+    inviteList: p,
+    uiState: g,
+    fetchState: x,
+    onInviteClick: u,
+    onBackClick: $,
+    onHowItWorksClick: C,
+    onReloadInvitees: m,
+    onResendInviteClick: f,
+    onColumnSortConfigChanged: _,
+    onCopyReferralLink: R,
+    onClickRefer: K,
+    onClickMenuIcon: _e
+  } = e, [Me, re] = k(!0);
+  let ne = null;
+  return Me || (ne = /* @__PURE__ */ o.jsx(
+    yr,
+    {
+      referralLink: l.referralLink,
+      onInviteClick: u,
+      onClickRefer: K,
+      onCopyReferralLink: R
+    }
+  )), /* @__PURE__ */ o.jsxs(jr, { children: [
+    /* @__PURE__ */ o.jsx(
+      Ye,
+      {
+        source: "InvitePageListView",
+        title: Cr.pageTitle,
+        showBackButton: !0,
+        backgroundColor: n.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: $,
+        showMenuIcon: i === "medium-compact" || i === "small",
+        onClickMenuIcon: _e,
+        rightSideComponent: ne
+      }
+    ),
+    p.length === 0 ? /* @__PURE__ */ o.jsx(zr, { children: /* @__PURE__ */ o.jsx(
+      Po,
+      {
+        rewardsPlan: l,
+        onHowItWorksClick: C,
+        onInviteClick: u,
+        onCopyReferral: R
+      }
+    ) }) : /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+      i === "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(we, { children: /* @__PURE__ */ o.jsx(
+          ae,
+          {
+            pendingBonus: d,
+            earnedBonus: a,
+            pendingReferrals: c,
+            onHowItWorksClick: C
+          }
+        ) }),
+        /* @__PURE__ */ o.jsx(we, { 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: f
+        }
+      )
+    ] })
+  ] });
+}, 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%;
+`, we = r.div`
+  width: 49%;
+`;
+export {
+  Dr as default
+};