@zeniai/web-components 3.16.55 → 3.16.56

package/dist/InvitePageListView-D3vLBLdn.js

@@ -1,1764 +0,0 @@
-import { u as W, j as o, V as Be, C as Ee } from "./vendor-.pnpm-Q8NJHkXi.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-Dc_o2gSy.js";
-import { S as ze } from "./gift-box-Cmt9OgIZ.js";
-import { B as Ue } from "./BusyIndication-DIKTXe0r.js";
-import { c as Je } from "./calculateSize-Cez0Benx.js";
-import { StatusTypes as w, toReferralListViewSortKeyType as ie, AmountStatusTypes as I } from "@zeniai/client-epic-state";
-import { M as Xe } from "./MoreMenuButton-C2sbZeH8.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
-};