@zeniai/web-cockpit-ui 1.14.82-dev → 1.14.83-dev

package/dist/assets/InvitePageListView-DDi1bLaG-BIsQyZAc.js

@@ -0,0 +1,739 @@
+import{i as D,u as j,j as o,cf as Ie,a as y,ig as N,ak as Te,ij as _e,s,b as r,bn as S,B as K,t as _,dj as Me,R as h,d as T,e as M,ah as H,C,bz as Be,ag as G,g as J,ii as q,af as k,as as We,lf as Ae,cF as Oe,cz as Ee,bq as De,L as ue,ai as B,av as Ne,H as xe,bJ as He,lg as U,kh as Ve,di as Fe,lh as we,A as fe,d5 as $e,hP as b,kz as Ke,li as ye,d6 as ve,hr as Ye}from"./index-2CdI-B2B.js";import{a as w}from"./core-tlHkQPPu.js";import{n as i}from"./mui-kiGMfX4-.js";import{t as be}from"./gift-box-DZx81G9E-DbnUGiwi.js";import{g6 as ee,g7 as $,g8 as z}from"./zeni-epic-state-Bo1aGezX.js";import"./sentry-Dhk5jNhq.js";import"./liveblocks-BrzOBACZ.js";import"./utils-BLUF9kAp.js";import"./analytics-CeQu-r45.js";const je=(e,t)=>{w.useEffect(()=>{const n=e.current;if(window.IntersectionObserver==null)return;const c=new IntersectionObserver(([a])=>{t&&t(a.isIntersecting)},{root:null,rootMargin:r.sp0,threshold:.1});return n&&c.observe(n),()=>{n&&c.unobserve(n)}})},Ge={pageTitleMarginLeft:new h(s[4],s[6])},Je=i.div`
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${e=>Ge.pageTitleMarginLeft.valuePx(e.windowSize)};
+  margin-top: ${r.sp4};
+`,qe=i.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 154px;
+`,Ue=i(G)`
+  height: ${r.sp3};
+  width: ${r.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,Ze=i(q)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+`,Qe=i(J)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${C.success};
+`;function Se({referralLink:e,onInviteClick:t,onCopyReferral:n,setShowNavButton:c}){const[,a]=N(),[l,d]=w.useState(!1),g=j(),m=D();w.useEffect(()=>{l===!0&&setTimeout(()=>{d(!1)},2e3)},[l]);const u=w.useRef(null);je(u,c);const x=y.getLocalizedStrings().rewardsPage.rewardsCard;return o.jsxs(Je,{windowSize:g,children:[o.jsx(qe,{ref:u,children:o.jsx(K,{variant:"secondary",label:x.inviteViaEmail,onClick:t,prefixIcon:o.jsx(Ue,{}),textStyle:{..._.smallRegular.cssObject,color:`${m.colors.hero}`},style:{borderRadius:`${r.sp1}`,border:`1px solid ${m.colors.grey1}`,backgroundColor:"transparent",padding:`${r.sp2} 12px`,minWidth:"154px",flex:"1 1 auto",display:"flex",justifyContent:"center",alignItems:"center"}})}),o.jsx(K,{variant:"secondary",label:l?x.copied:x.copyReferralLink,onClick:()=>{n(),l||(a(e.toString()),d(!0))},prefixIcon:l?o.jsx(Qe,{}):o.jsx(Ze,{}),textStyle:{..._.smallRegular.cssObject,color:`${m.colors.hero}`},style:{borderRadius:`${r.sp1}`,border:`1px solid ${m.colors.grey1}`,backgroundColor:"transparent",padding:`${r.sp2} ${l?"47px":"12px"}`,minWidth:"154px",flex:"1 1 auto",display:"flex",justifyContent:"center",alignItems:"center"}})]})}const Y={logoWidth:new h(95,135),minWidth:new h(256,360),maxWidth:new h(270,380)},Ce={title:new T("smallRegular","largeRegular"),cardDetail:new T("h5Regular","h2Regular")};function ke({planAmount:e}){const t=j(),{rewardsPage:{rewardsCard:n}}=y.getLocalizedStrings();return o.jsxs(Xe,{windowSize:t,children:[o.jsxs(eo,{children:[o.jsx(io,{windowSize:t,children:n.bonus}),o.jsx(to,{windowSize:t,children:S("0,0",e)})]}),o.jsx(oo,{windowSize:t,children:o.jsx(ro,{})})]})}const Xe=i.div`
+  display: flex;
+  height: 100%;
+  min-width: ${e=>Y.minWidth.valuePx(e.windowSize)};
+  max-width: ${e=>Y.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 ${r.sp3} 22px 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${e=>e.windowSize==="small"?r.sp2:`${r.sp2} 0 0 ${r.sp2}`};
+  &:hover {
+    box-shadow: ${e=>`0 2px ${r.sp1} ${e.theme.colors.dropShadowHover}`};
+  }
+`,eo=i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: 28px;
+`,oo=i.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 12px;
+  position: relative;
+  width: ${e=>Y.logoWidth.valuePx(e.windowSize)};
+`,ro=i(be)`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+`,io=i(M)`
+  ${e=>`${Ce.title.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.graphColor17};
+`,to=i(M)`
+  color: ${e=>e.theme.colors.brandColorGold};
+  ${e=>`${Ce.cardDetail.style(e.windowSize)}`};
+`;function no({rewardsPlan:e,onInviteClick:t,onHowItWorksClick:n,onCopyReferral:c}){const a=j(),[,l]=N(),[d,g]=w.useState(!1);w.useEffect(()=>{d===!0&&setTimeout(()=>{g(!1)},2e3)},[d]);const{rewardsPage:{referAndEarn:m,rewardsCard:u,statisticsCard:{knowMore:x}}}=y.getLocalizedStrings();return o.jsxs(so,{children:[o.jsxs(ao,{children:[o.jsxs(xo,{children:[o.jsx(po,{children:m}),o.jsx(ho,{children:u.rewardsSummary[e.planName].replace("__reward-amount__",S("0,0",e.referrerAmount))}),o.jsx(go,{onClick:n,children:x})]}),o.jsxs(lo,{children:[o.jsxs(mo,{onClick:t,children:[o.jsx(uo,{}),u.inviteViaEmail]}),o.jsx(wo,{onClick:()=>{c(),d||(l(e.referralLink.toString()),g(!0))},isCopied:d,children:d?o.jsxs(o.Fragment,{children:[o.jsx($o,{}),u.copied]}):o.jsxs(o.Fragment,{children:[o.jsx(fo,{}),u.copyReferralLink]})})]})]}),a==="medium-compact"||a==="medium-regular"?null:o.jsx(co,{children:o.jsx(ke,{planAmount:e.referrerAmount})})]})}const so=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  padding: ${r.sp6} 0;
+  margin: 0 ${r.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=>`${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${r.sp1} solid ${e=>e.theme.colors.grey5};
+  border-radius: ${r.sp2};
+`,ao=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-left: ${r.sp6};
+  margin-right: ${r.sp2};
+`,lo=i.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${r.sp3};
+  flex: 1 1 auto;
+`,co=i.div`
+  display: flex;
+  height: 220px;
+`,po=i(xe)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${r.sp3};
+`,ho=i(ue)`
+  color: ${e=>e.theme.mode==="light"?e.theme.colors.brandColorSapphire:e.theme.colors.brandColorJade};
+  margin-bottom: ${r.sp3};
+  max-width: 450px;
+`,go=i(He)`
+  margin-bottom: ${r.sp5};
+  color: ${e=>e.theme.colors.primary};
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.champion};
+  }
+`,mo=i(U)`
+  border: 1px solid ${e=>e.theme.colors.primary};
+  border-radius: ${r.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: ${r.sp2} ${r.sp3};
+  min-width: 187px;
+  &:hover {
+    background-color: ${e=>e.theme.colors.champion};
+    border: 1px solid ${e=>e.theme.colors.champion};
+  }
+`,uo=i(G)`
+  height: ${r.sp3};
+  width: ${r.sp3};
+  margin-right: ${r.sp2};
+  color: ${e=>e.theme.colors.grey5};
+`,xo=i.div`
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  align-items: flex-start;
+`,wo=i(U)`
+  border: 1px solid ${e=>e.theme.colors.primary};
+  border-radius: ${r.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: ${r.sp2} ${r.sp3};
+  min-width: 187px;
+  &:hover {
+    background-color: ${e=>e.theme.colors.champion};
+    border: 1px solid ${e=>e.theme.colors.champion};
+  }
+`,fo=i(q)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  margin-right: ${r.sp2};
+`,$o=i(J)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${C.success};
+  margin-right: ${r.sp1};
+`;function yo({rewardsPlan:e,onInviteClick:t,onHowItWorksClick:n,onCopyReferral:c}){const{rewardsPage:{referAndEarn:a,rewardsCard:l,statisticsCard:{knowMore:d}}}=y.getLocalizedStrings();return o.jsxs(vo,{children:[o.jsxs(bo,{children:[o.jsx(So,{children:a}),o.jsx(Co,{children:l.rewardsSummary[e.planName].replace("__reward-amount__",S("0,0",e.referrerAmount))}),o.jsx(ko,{onClick:n,children:d}),o.jsx(jo,{children:o.jsx(ke,{planAmount:e.referrerAmount})})]}),o.jsx(Se,{referralLink:e.referralLink,onCopyReferral:c,onInviteClick:t})]})}const vo=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  margin: 0 ${r.sp3};
+`,bo=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  padding: ${r.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=>`${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${r.sp1} solid ${e=>e.theme.colors.grey5};
+  border-radius: ${r.sp2};
+`,jo=i.div`
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  height: 160px;
+  margin: 0 ${r.sp4} ${r.sp4} 0;
+`,So=i(ue)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${r.sp2};
+`,Co=i(B)`
+  color: ${e=>e.theme.colors.champion};
+  margin-bottom: ${r.sp3};
+`,ko=i(Ne)`
+  margin-bottom: ${r.sp3};
+  color: ${e=>e.theme.mode==="light"?e.theme.colors.brandColorSapphire:e.theme.colors.brandColorJade};
+  cursor: pointer;
+`;function zo({rewardsPlan:e,onHowItWorksClick:t,onInviteClick:n,onCopyReferral:c}){return j()==="small"?o.jsx(yo,{rewardsPlan:e,onInviteClick:n,onHowItWorksClick:t,onCopyReferral:c}):o.jsx(no,{rewardsPlan:e,onHowItWorksClick:t,onInviteClick:n,onCopyReferral:c})}function Po({planAmount:e}){const{rewardsPage:{rewardsCard:t}}=y.getLocalizedStrings();return o.jsxs(Ro,{children:[o.jsxs(Lo,{children:[o.jsx(_o,{children:t.bonus}),o.jsx(Mo,{children:S("0,0",e)})]}),o.jsx(Io,{children:o.jsx(To,{})})]})}const Ro=i.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 ${r.sp2} ${r.sp3} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2} 0 0 ${r.sp2};
+  &:hover {
+    box-shadow: ${e=>`0 2px ${r.sp1} ${e.theme.colors.dropShadowHover}`};
+  }
+`,Lo=i.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: ${r.sp4};
+`,Io=i.div`
+  margin-right: ${r.sp2};
+  position: relative;
+`,To=i(be)`
+  width: 95px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+`,_o=i(k)`
+  color: ${e=>e.theme.colors.graphColor17};
+  text-transform: uppercase;
+`,Mo=i(xe)`
+  color: ${e=>e.theme.colors.brandColorGold};
+  margin-bottom: ${r.sp2};
+`,Bo={backgroundSize:new h(75,100,75)};function Wo({rewardsPlan:e,onInviteClick:t,setShowNavButton:n,onCopyReferral:c}){const a=D(),l=j(),[,d]=N(),[g,m]=w.useState(!1),[u,x]=w.useState(!1);w.useEffect(()=>{g===!0&&setTimeout(()=>{m(!1)},2e3)},[g]);const{rewardsCard:f,referAndEarn:p}=y.getLocalizedStrings().rewardsPage,v=w.useRef(null);je(v,n);const L=u?o.jsx(oe,{showCopyText:u,isCopied:g,children:f.copyReferralLink}):null;return o.jsxs(Ao,{windowSize:l,children:[o.jsxs(Oo,{children:[o.jsx(No,{children:p}),o.jsx(Ho,{children:f.rewardsSummary[e.planName].replace("__reward-amount__",S("0,0",e.referrerAmount))}),o.jsxs(Eo,{ref:v,children:[o.jsx(K,{variant:"secondary",label:f.inviteViaEmail,onClick:t,prefixIcon:o.jsx(Vo,{}),textStyle:{..._.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:r.sp1,padding:`${r.sp1} 12px`,flex:"1 1 auto",display:"flex",justifyContent:"center",alignItems:"center",marginRight:r.sp3}}),o.jsx(Fo,{onClick:()=>{c(),g||(d(e.referralLink.toString()),m(!0))},onMouseOver:()=>{x(!0)},onMouseLeave:()=>{x(!1)},showCopyText:u,isCopied:g,children:o.jsx(Yo,{showCopyText:u,isCopied:g,children:o.jsx(Ko,{})})}),o.jsx(Jo,{children:g?o.jsxs(o.Fragment,{children:[o.jsx(Go,{}),o.jsx(oe,{showCopyText:u,isCopied:g,children:f.copied})]}):L})]})]}),l==="medium-compact"||l==="medium-regular"?null:o.jsx(Do,{children:o.jsx(Po,{planAmount:e.referrerAmount})})]})}const Ao=i.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=>Bo.backgroundSize.valuePercentage(e.windowSize)};
+  box-shadow: ${e=>`${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${r.sp1} solid ${e=>e.theme.colors.grey5};
+  border-radius: ${r.sp2};
+`,Oo=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-left: ${r.sp6};
+  margin-right: ${r.sp4};
+`,Eo=i.div`
+  display: flex;
+  width: fit-content;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+`,Do=i.div`
+  display: flex;
+  max-width: 254px;
+  min-width: 240px;
+  height: 160px;
+  flex: 1 1 auto;
+`,No=i(We)`
+  color: ${e=>e.theme.colors.primary};
+  margin-bottom: ${r.sp2};
+`,Ho=i(k)`
+  color: ${e=>e.theme.mode==="light"?e.theme.colors.brandColorSapphire:e.theme.colors.brandColorJade};
+  max-width: 210px;
+  margin-bottom: ${r.sp5};
+`,Vo=i(G)`
+  height: ${r.sp3};
+  width: ${r.sp3};
+  flex-shrink: 0;
+  color: ${e=>e.theme.colors.grey5};
+`,Fo=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: ${r.sp5};
+  height: ${r.sp5};
+  cursor: pointer;
+  background-color: ${e=>e.showCopyText||e.isCopied?e.theme.colors.champion:"transparent"};
+  border: 1px solid ${e=>e.theme.colors.primary};
+`,Ko=i(q)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  cursor: pointer;
+`,Yo=i.div`
+  display: flex;
+  align-items: center;
+  color: ${e=>e.showCopyText||e.isCopied?e.theme.colors.grey3:e.theme.colors.primary};
+`,Go=i(J)`
+  width: ${r.sp4};
+  height: ${r.sp4};
+  color: ${C.success};
+  margin-right: ${r.sp1};
+`,Jo=i.div`
+  position: absolute;
+  bottom: -35px;
+  right: -55px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 150px;
+`,oe=i(k)`
+  color: ${e=>e.isCopied?e.theme.colors.brandColorPearl:C.heroDark};
+  background-color: ${e=>e.showCopyText||e.isCopied?e.theme.colors.black:"transparent"};
+  padding: ${r.sp1} ${r.sp2};
+  border-radius: ${r.sp1};
+`,qo={height:new h(200,280)},V={earningValue:new T("h6Regular","h5Regular"),cardTitle:new T("extraSmallRegular","smallRegular"),buttonText:new T("extraSmallRegular","smallRegular")};function re({pendingBonus:e,earnedBonus:t,pendingReferrals:n,onHowItWorksClick:c}){const{rewardsPage:{statisticsCard:a},common:{strings:l}}=y.getLocalizedStrings(),d=j();return o.jsxs(Uo,{windowSize:d,children:[o.jsx(Zo,{children:o.jsx(Qo,{windowSize:d,children:a.title})}),o.jsxs(Xo,{windowSize:d,children:[o.jsxs(ie,{children:[o.jsx(te,{children:a.earned}),o.jsx(ne,{windowSize:d,type:"earned",children:S("0,0",t)})]}),d==="medium-compact"?o.jsx(or,{}):o.jsx(er,{}),o.jsxs(ie,{children:[o.jsx(te,{children:a.pending}),o.jsx(ne,{windowSize:d,type:"pending",children:S("0,0",e)})]})]}),o.jsxs(rr,{children:[o.jsxs(ir,{windowSize:d,children:[a.pendingReferrals," ",l.colon," ",n]}),o.jsxs(nr,{windowSize:d,onClick:c,children:[a.knowMore," ",o.jsx(tr,{})]})]})]})}const Uo=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1 1 auto;
+  height: ${e=>qo.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=>`${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border: ${r.sp1} solid ${e=>e.theme.colors.grey5};
+  border-radius: ${r.sp2};
+`,Zo=i.div`
+  display: flex;
+  flex: 0 1 auto;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding-top: ${r.sp4};
+`,Qo=i(M)`
+  ${e=>`${V.cardTitle.style(e.windowSize)}`};
+  color: ${e=>e.theme.colors.champion};
+  margin-bottom: ${r.sp1};
+`,Xo=i.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%;
+`,ie=i.div`
+  display: flex;
+  flex: 0 1 auto;
+  align-items: center;
+  justify-content: space-between;
+  flex-direction: column;
+`,er=i.div`
+  padding-left: ${r.sp1};
+  margin-left: ${r.sp1};
+  height: 50%;
+  border-left: 1px solid ${C.neutralGrey1Light};
+`,or=i.div`
+  margin: ${r.sp2} 0;
+  width: ${r.sp5};
+  border-top: 1px solid ${C.neutralGrey1Light};
+`,te=i(H)`
+  color: ${e=>e.theme.colors.primary};
+`,ne=i(M)`
+  ${e=>`${V.earningValue.style(e.windowSize)}`};
+  color: ${e=>e.type==="pending"?C.alert:C.success};
+`,rr=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom-right-radius: ${r.sp2};
+  border-bottom-left-radius: ${r.sp2};
+  padding: ${r.sp2} 0;
+  background-color: ${e=>e.theme.colors.grey3};
+`,ir=i(M)`
+  ${e=>`${V.buttonText.style(e.windowSize)}`};
+  margin-left: 12px;
+  color: ${e=>e.theme.colors.primary};
+`,tr=i(Be)`
+  color: ${e=>e.theme.colors.primary};
+  width: 10px;
+  height: 10px;
+  margin-left: ${r.sp1};
+`,nr=i.button`
+  border: none;
+  background-color: transparent;
+  border-bottom-right-radius: ${r.sp2};
+  cursor: pointer;
+  padding-right: 12px;
+  color: ${e=>e.theme.colors.primary};
+  ${e=>`${V.buttonText.style(e.windowSize)}`};
+`,se=(e,t)=>t!=="small"?90:Ae(e,{..._.standardRegular.cssPartialObject(["fontSize","fontFamily","fontWeight"])}).width<160?114:138,{rewardsPage:{header:Z},common:{strings:ae}}=y.getLocalizedStrings(),sr={key:"invitee_email",value:Z.invitee_email,sortOrder:"ascending",width:new h(s[7],s[8],s[8],s[9])},ar={key:"amount",value:Z.amount,sortOrder:"ascending",width:new h(s[4],20,20,s[3])},E=[sr,{key:"status",value:Z.status,sortOrder:"ascending",width:new h(s[3],s[4],s[4],20)},ar],lr=e=>{const t=e.toLowerCase().split(ae.space).join(ae.underscore);switch(e){case $.invite_processing:return{value:e,color:b.invite_processing.color,borderColor:b.invite_processing.borderColor,code:t};case $.invite_sent:return{value:e,color:b.invite_sent.color,borderColor:b.invite_sent.borderColor,code:t};case $.onboarding:return{value:e,color:b.onboarding.color,borderColor:b.onboarding.borderColor,code:t};case $.active:case $.reward_sent:return{value:e,color:b.active.color,borderColor:b.active.borderColor,code:t};case $.declined:return{value:e,color:b.declined.color,borderColor:b.declined.borderColor,code:t};case $.resend_invite:return{value:e,color:b.resend_invite.color,borderColor:b.resend_invite.borderColor,code:t};default:return{value:e,color:b.in_progress.color,borderColor:"",code:t}}},I={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(45,58)};function dr({companyNameSticky:e,sortConfig:t,onColumnSortConfigChanged:n}){const c=D(),a=j(),[l,d]=w.useState(E);w.useEffect(()=>{const p=[...l];for(const v of p)v.key===t.sortKey?v.sortOrder=t.sortOrder:v.sortOrder="ascending";d(p)},[t.sortKey,t.sortOrder]);const g=(p,v)=>{let L=v;t.sortKey===p&&(L=v==="ascending"?"descending":"ascending"),n(p,L)},m=l.find(p=>p.key===t.sortKey)??l[0],u=l.map(p=>p.key),{rewardsPage:{inviteList:x},common:f}=y.getLocalizedStrings();return a==="small"?o.jsxs(le,{windowSize:a,companyNameSticky:!1,children:[o.jsxs(pr,{children:[o.jsx(gr,{children:o.jsx(hr,{})}),o.jsx(Oe,{title:x.sortBy,placeholder:x.sortBy,pickerValues:u,valueToLabel:p=>l.find(v=>v.key===p)?.value??f.strings.empty,selectedValue:t.sortKey,onPickerSelectionChanged:p=>{p&&g(ee(p),"ascending")},optionTextStyle:_.smallRegular,selectedOptionColor:c.colors.hero,optionBackgroundColor:c.colors.grey5,downChevronVisible:!1,backgroundColor:c.colors.grey4,titleTextStyle:_.smallRegular,titleColor:c.colors.hero})]}),o.jsxs(ur,{onClick:()=>{g(m.key,m.sortOrder)},children:[o.jsx(k,{children:m.value}),o.jsx(de,{sortDataValue:t.sortKey,headerdata:m,children:o.jsx(ce,{})})]})]}):o.jsx(le,{companyNameSticky:e,windowSize:a,children:l.map(p=>o.jsx(cr,{companyNameSticky:e&&p.key==="invitee_email",sortDataValue:t.sortKey,actualDataValue:p.key,wrapperWidth:p.width,windowSize:a,shouldRightAlign:p.value==="Amount",children:o.jsxs(mr,{onClick:()=>{g(ee(p.key),p.sortOrder)},children:[o.jsx(k,{children:p.value}),o.jsx(de,{sortDataValue:t.sortKey,headerdata:p,children:o.jsx(ce,{})})]})},p.key))})}const le=i(k)`
+  top: ${r.sp0};
+  left: ${r.sp0};
+  min-height: ${e=>I.headerHeight.valuePx(e.windowSize)};
+  max-height: ${e=>I.headerHeight.valuePx(e.windowSize)};
+  width: auto;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${e=>`${I.headerLastColumnTopPadding.valuePx(e.windowSize)} ${I.headerLastColumnRightPadding.valuePx(e.windowSize)} ${I.headerLastColumnBottomPadding.valuePx(e.windowSize)} ${I.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+`,cr=i.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: ${r.sp0};
+  justify-content: ${e=>e.shouldRightAlign===!0?"flex-end":"flex-start"};
+  box-sizing: border-box;
+`,de=i.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"}
+`,ce=i(Fe)`
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  color: inherit;
+`,pr=i.div`
+  gap: ${r.sp1};
+  display: flex;
+  color: ${e=>e.theme.colors.hero};
+`,hr=i(Ve)`
+  width: 12px;
+  height: 12px;
+  color: ${e=>e.theme.colors.grey1};
+`,gr=i.div`
+  margin-right: ${r.sp1};
+  display: flex;
+  align-items: center;
+`,mr=i.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,ur=i.div`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  color: ${e=>e.theme.colors.hero};
+`,P={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:xr,rewardsPage:{inviteList:wr},common:pe}=y.getLocalizedStrings(),fr=({email:e,amount:t,status:n,resendInviteStatus:c,inviteSendDate:a,onResendInviteClick:l})=>{const d=j();let g=!1;if(a){const x=new Date(a.format(xr.visual.YYYYDashMMDashDFormat));g=we(72,x)}const m=n.value===$.reward_sent?z.received:z.to_be_received,u=c.fetchState==="In-Progress"?o.jsx(fe,{size:"Small",start:!0}):o.jsxs(o.Fragment,{children:[o.jsx(Rr,{color:n.color,onClick:()=>{l(e)},children:wr.status.resend_invite}),o.jsx(Ir,{children:`${pe.sent} ${$e(a)}`})]});return o.jsx($r,{windowSize:d,children:o.jsx(yr,{children:o.jsxs(vr,{children:[o.jsxs(br,{windowSize:d,responsiveWidth:E[0].width,children:[o.jsx(jr,{children:o.jsx(Tr,{})}),o.jsx(Sr,{windowSize:d,children:e})]}),o.jsx(Lr,{windowSize:d,responsiveWidth:E[1].width,children:n.value===$.invite_sent&&g?u:o.jsx(_r,{children:o.jsx(Pr,{color:n.color,borderColor:n.borderColor,children:n.value===$.reward_sent?$.active:n.value})})}),o.jsx(Cr,{windowSize:d,responsiveWidth:E[2].width,amountStatus:m,children:n.value===$.declined?o.jsx(kr,{children:pe.strings.hyphen}):o.jsxs(o.Fragment,{children:[S("0,0.[00]",t),o.jsx(zr,{amountStatus:m,children:m})]})})]})})})},$r=i.div`
+  display: flex;
+  align-items: center;
+  margin-bottom: ${r.sp3};
+  margin-right: ${e=>P.containerMarginRight.valuePx(e.windowSize)};
+  margin-left: ${e=>P.containerMarginLeft.valuePx(e.windowSize)};
+  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 ${r.sp1} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2};
+  box-sizing: border-box;
+  height: max-content;
+`,yr=i.div`
+  display: block;
+  width: 100%;
+`,vr=i.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  height: 42px;
+  flex: 1 1 auto;
+`,br=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${r.sp1};
+  flex: 1 1 auto;
+  color: ${e=>e.theme.colors.hero};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,jr=i.div`
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+`,Sr=i(H)`
+  flex: 1 1 auto;
+  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: initial;
+`,Cr=i(H)`
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: end;
+  flex: 1 1 auto;
+  color: ${e=>e.amountStatus===z.to_be_received?e.theme.colors.grey2:e.theme.colors.primary};
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+`,kr=i(ve)`
+  color: ${e=>e.theme.colors.hero};
+`,zr=i(k)`
+  color: ${e=>e.amountStatus===z.to_be_received?e.theme.colors.grey2:C.success};
+`,Pr=i(B)`
+  display: flex;
+  color: ${e=>e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${r.sp0} 6px;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  border: ${e=>`1px solid ${e.borderColor}`};
+  border-radius: ${r.sp1};
+`,Rr=i(U)`
+  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;
+`,Lr=i.div`
+  position: relative;
+  top: 2px;
+  width: ${e=>e.responsiveWidth.valuePercentage(e.windowSize)};
+  min-width: ${r.sp12};
+  color: ${e=>e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+`,Ir=i(B)`
+  position: relative;
+  top: 1px;
+  color: ${e=>e.theme.colors.grey1};
+`,Tr=i(ye)`
+  height: ${r.sp6};
+  width: ${r.sp6};
+  flex-shrink: 0;
+  color: ${e=>e.theme.colors.grey2};
+  margin-right: ${r.sp1};
+`,_r=i.div`
+  display: flex;
+`,R={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:Mr,rewardsPage:{inviteList:Br},common:he}=y.getLocalizedStrings(),Wr=({email:e,amount:t,status:n,resendInviteStatus:c,inviteSendDate:a,onResendInviteClick:l})=>{const d=j();let g=!1;if(a){const x=new Date(a.format(Mr.visual.YYYYDashMMDashDFormat));g=we(72,x)}const m=n.value===$.active?z.received:z.to_be_received,u=c.fetchState==="In-Progress"?o.jsx(fe,{size:"Small",start:!0}):o.jsxs(o.Fragment,{children:[o.jsx(Gr,{color:n.color,onClick:()=>{l(e)},children:Br.status.resend_invite}),o.jsx(Jr,{children:`${he.sent} ${$e(a)}`})]});return o.jsx(Ar,{windowSize:d,children:o.jsxs(Or,{children:[o.jsxs(Ur,{children:[o.jsxs(Er,{children:[o.jsx(Dr,{children:o.jsx(qr,{})}),o.jsx(Nr,{windowSize:d,children:e})]}),o.jsx(Hr,{amountStatus:m,children:n.value===$.declined?o.jsx(Vr,{children:he.strings.hyphen}):o.jsxs(o.Fragment,{children:[S("0,0.[00]",t),o.jsx(Fr,{amountStatus:m,children:m})]})})]}),o.jsx(Zr,{children:o.jsx(Yr,{children:n.value===$.invite_sent&&g?u:o.jsx(Qr,{children:o.jsx(Kr,{color:n.color,borderColor:n.borderColor,children:n.value})})})})]})})},Ar=i.div`
+  display: flex;
+  margin-bottom: ${r.sp3};
+  background-color: ${e=>e.theme.colors.grey5};
+  padding-left: ${e=>R.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${e=>R.containerPaddingRight.valuePx(e.windowSize)};
+  padding-top: ${e=>R.containerPaddingTop.valuePx(e.windowSize)};
+  padding-bottom: ${e=>R.containerPaddingBottom.valuePx(e.windowSize)};
+  border: ${e=>`1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${e=>`0 2px ${r.sp1} 0 ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2};
+  cursor: pointer;
+  margin-right: ${e=>R.containerMarginRight.valuePx(e.windowSize)};
+  margin-left: ${e=>R.containerMarginLeft.valuePx(e.windowSize)};
+`,Or=i.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+`,Er=i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: ${e=>e.theme.colors.hero};
+  width: 100%;
+`,Dr=i.div`
+  display: flex;
+  align-items: flex-start;
+  height: 100%;
+`,Nr=i(H)`
+  color: ${e=>e.theme.colors.hero};
+  flex-grow: 1;
+  word-break: break-word;
+  display: -webkit-box;
+  -webkit-line-clamp: ${e=>R.webkitLineClamp.value(e.windowSize)};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: ${160}px;
+`,Hr=i(k)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  color: ${e=>e.amountStatus===z.to_be_received?e.theme.colors.grey2:e.theme.colors.primary};
+  width: 100%;
+  margin-left: ${r.sp5};
+`,Vr=i(ve)`
+  color: ${e=>e.theme.colors.hero};
+`,Fr=i(B)`
+  color: ${e=>e.amountStatus===z.to_be_received?e.theme.colors.grey2:e.theme.colors.success};
+`,Kr=i(B)`
+  color: ${e=>e.color};
+  height: 20px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: ${r.sp0} 6px;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-flex;
+  border: ${e=>`1px solid ${e.borderColor}`};
+  border-radius: ${r.sp1};
+`,Yr=i.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;
+`,Gr=i(Ke)`
+  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;
+`,Jr=i(B)`
+  color: ${e=>e.theme.colors.grey1};
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+`,qr=i(ye)`
+  height: ${r.sp4};
+  width: ${r.sp4};
+  flex-shrink: 0;
+  margin-right: ${r.sp1};
+  color: ${e=>e.theme.colors.grey2};
+`,Ur=i.div`
+  display: flex;
+  flex-direction: column;
+  width: 188px;
+`,Zr=i.div`
+  display: flex;
+  flex-direction: column;
+  text-align: right;
+  width: 108px;
+  padding-top: 2px;
+`,Qr=i.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,A={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])},Xr={pageTitle:new T("standardSemiBold","largeSemiBold")},ge=y.getLocalizedStrings(),ei=({index:e,style:t,inviteList:n,onResendInviteClick:c})=>{const a=j(),l=n[e],d=a==="small"?Wr:fr;return o.jsx(di,{style:{...t,width:"100%"},children:o.jsx(d,{email:l.refereeEmailId,amount:l.amount,status:lr(l.statusCode),resendInviteStatus:l.resendInviteStatus,onResendInviteClick:c,inviteSendDate:l.lastInviteTimestamp})})},oi=({inviteList:e,uiState:t,fetchState:n,onResendInviteClick:c,onReloadInvitees:a,onColumnSortConfigChanged:l})=>{const d=j(),g=f=>{const p=e[f].refereeEmailId;return se(p,d)},m=e.reduce((f,p)=>f+se(p.refereeEmailId,d),0),u=w.useRef(null);w.useEffect(()=>{u.current?.resetAfterIndex(0)},[d,u]);let x=null;switch(n){case"Not-Started":case"In-Progress":x=o.jsx(Ye,{fetchState:n});break;case"Error":x=o.jsxs(ii,{children:[o.jsx(ti,{onClick:a,children:o.jsx(ni,{})}),o.jsx(si,{children:ge.peoplePage.reloadPage.label})]});break;case"Completed":e.length!==0&&(x=o.jsxs(li,{windowSize:d,children:[o.jsx(ai,{windowSize:d,children:ge.rewardsPage.inviteList.pageTitle}),o.jsx(dr,{companyNameSticky:!1,onColumnSortConfigChanged:l,sortConfig:{sortKey:t.sortKey,sortOrder:t.sortOrder}}),o.jsx(Me,{ref:u,height:m,width:"100%",itemCount:e.length,itemSize:g,estimatedItemSize:114,itemKey:f=>e[f].refereeEmailId,overscanCount:1,initialScrollOffset:0,children:f=>o.jsx(ei,{...f,inviteList:e,onResendInviteClick:c})})]}))}return o.jsx(ri,{children:x})},ri=i.div`
+  display: block;
+  height: 100%;
+`,ii=i.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,ti=i.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`,ni=i(Ee)`
+  height: ${r.sp5};
+  width: ${r.sp5};
+  color: ${e=>e.theme.colors.grey1};
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,si=i(De)`
+  margin-top: ${r.sp3};
+  color: ${e=>e.theme.colors.hero};
+`,ai=i(M)`
+  ${e=>`${Xr.pageTitle.style(e.windowSize)}`};
+  margin-top: ${e=>A.pageTitleMarginTop.valuePx(e.windowSize)};
+  margin-bottom: ${e=>A.pageTitleMarginBottom.valuePx(e.windowSize)};
+  margin-left: ${e=>A.pageTitleMarginLeft.valuePx(e.windowSize)};
+  margin-right: ${e=>A.pageTitleMarginRight.valuePx(e.windowSize)};
+  color: ${e=>e.theme.colors.primary};
+`,li=i.div`
+  height: 100%;
+  width: 100%;
+`,di=i.div`
+  top: ${r.sp0};
+  left: ${r.sp0};
+  padding-bottom: ${r.sp3};
+  box-sizing: border-box;
+  &:last-child {
+    padding-bottom: ${r.sp0};
+  }
+`,ci={referralButtonRightPosition:new h(-4,28,28,-4)},{rewardsPage:{referButton:F},common:{texts:O}}=y.getLocalizedStrings();function pi(e){const t=j(),[n,c]=w.useState(!1),[,a]=N(),[l,d]=w.useState(!1);return w.useEffect(()=>{l===!0&&setTimeout(()=>{d(!1),c(!1)},2e3)},[l]),o.jsx(hi,{windowSize:t,children:o.jsx(Te,{onClickAway:()=>{c(!1)},children:o.jsx(gi,{onClick:()=>{n||e.onClickRefer(),c(!0)},onTouchEnd:()=>{n||e.onClickRefer(),c(!0)},children:o.jsx(_e,{entity:"rewards",isMoreOption:!1,closeMenuOnSelect:!1,isMenuOpen:n,title:O.refer,options:[{label:F.inviteViaEmail,value:O.invite},{label:l?F.urlCopied:F.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":e.onCopyReferralLink(),l||(a(e.referralLink.toString()),d(!0))}}})})})})}const hi=i.div`
+  position: absolute;
+  right: ${e=>ci.referralButtonRightPosition.valuePx(e.windowSize)};
+`,gi=i.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,mi=y.getLocalizedStrings().rewardsPage,Pi=e=>{const t=D(),n=j(),{pendingBonus:c,earnedBonus:a,rewardsPlan:l,pendingReferrals:d,inviteList:g,uiState:m,fetchState:u,onInviteClick:x,onBackClick:f,onHowItWorksClick:p,onReloadInvitees:v,onResendInviteClick:L,onColumnSortConfigChanged:ze,onCopyReferralLink:W,onClickRefer:Pe,onClickMenuIcon:Re}=e,[Le,Q]=w.useState(!0);let X=null;return Le||(X=o.jsx(pi,{referralLink:l.referralLink,onInviteClick:x,onClickRefer:Pe,onCopyReferralLink:W})),o.jsxs(ui,{children:[o.jsx(Ie,{source:"InvitePageListView",title:mi.pageTitle,showBackButton:!0,backgroundColor:t.colors.grey4,style:{zIndex:3},onBackClick:f,showMenuIcon:n==="medium-compact"||n==="small",onClickMenuIcon:Re,rightSideComponent:X}),g.length===0?o.jsx(fi,{children:o.jsx(zo,{rewardsPlan:l,onHowItWorksClick:p,onInviteClick:x,onCopyReferral:W})}):o.jsxs(o.Fragment,{children:[n==="small"?o.jsxs(wi,{children:[o.jsx(re,{pendingBonus:c,earnedBonus:a,pendingReferrals:d,onHowItWorksClick:p}),o.jsx(Se,{referralLink:l.referralLink,onInviteClick:x,onCopyReferral:W,setShowNavButton:Q})]}):o.jsxs(xi,{children:[o.jsx(me,{children:o.jsx(re,{pendingBonus:c,earnedBonus:a,pendingReferrals:d,onHowItWorksClick:p})}),o.jsx(me,{children:o.jsx(Wo,{rewardsPlan:l,onInviteClick:x,setShowNavButton:Q,onCopyReferral:W})})]}),o.jsx(oi,{inviteList:g,fetchState:u,onReloadInvitees:v,onColumnSortConfigChanged:ze,uiState:m,onResendInviteClick:L})]})]})},ui=i.div`
+  display: flex;
+  width: 100%;
+  height: 100vh;
+  flex-direction: column;
+  overflow-y: auto;
+  background-color: ${e=>e.theme.colors.grey4};
+`,xi=i.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: ${r.sp0} ${r.sp8} ${r.sp4} ${r.sp8};
+  padding: ${r.sp1};
+  height: 280px;
+`,wi=i.div`
+  margin: ${r.sp3};
+`,fi=i.div`
+  height: 100%;
+`,me=i.div`
+  width: 49%;
+`;export{Pi as default};