@zeniai/web-components 3.17.12 → 3.17.13

package/dist/InvitePageListView-Bf7iFELZ.js

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