@zeniai/web-cockpit-ui 1.15.45-dev → 1.15.46-dev

package/dist/assets/PeoplePage-koDszqCP-CWui0d4h.js

@@ -0,0 +1,727 @@
+import{y as Ce,J as k,b as $,V as i,bE as ne,ac as d,bQ as Me,o as s,cn as Be,co as Ue,cp as ve,u as m,bR as C,aV as Y,cq as fe,a as Ee,w as ze,cr as Ke,aS as Fe,cs as He,ar as Ze,ct as Je,cu as qe,b5 as Ge,aG as U,cv as Qe,x as b,cw as Xe,cx as Te,cy as ee,cg as D,L as ie,cz as Pe,aa as Ye,ae as ei,cA as ii,cB as ti,aM as si,ak as O,cC as oi,an as _,ao as te,p as V,cD as ri,ck as Ne,bc as se,cE as De,bO as li,cF as ni}from"./index-CZZQCAd2.js";import{P as pe,a as f}from"./sentry-KKNtqb_g.js";import{n as t}from"./mui-1V4DDk1u.js";import{pD as Oe,bg as Q}from"./zeni-epic-state-BIDncbwZ.js";import{T as _e}from"./RoleWithToolTip-BIBVAADS-DMOgVdZw.js";import"./liveblocks-DYmELrdC.js";import"./core-BPh6D8v5.js";import"./recharts-W_ILlOEk.js";import"./lottie-BRpRA-Un.js";import"./analytics-CQziHS33.js";import"./lexical-CO_PvSmH.js";import"./utils-DuPmVt2f.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{},o=new e.Error().stack;o&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[o]="b92b1228-f44c-4c71-bfbb-f46d1b56c9e1",e._sentryDebugIdIdentifier="sentry-dbid-b92b1228-f44c-4c71-bfbb-f46d1b56c9e1")}catch{}})();const N=$.getLocalizedStrings().peoplePage.header,S=[{key:"name",value:N.name,sortOrder:"ascending",width:new b(32,26,26,30,32)},{key:"role",value:N.role,sortOrder:"ascending",width:new b(18,17,17,21,19)},{key:"manager",value:N.manager,sortOrder:"ascending",width:new b(20,20,20,19,20)},{key:"department",value:N.department,sortOrder:"ascending",width:new b(20,20,20,19,20)},{key:"lastSeen",value:N.lastSeen,sortOrder:"ascending",width:new b(10,17,17,11,9)}],E=[{key:"name",value:N.name,sortOrder:"ascending",width:new b(32,26,26,32,33)},{key:"role",value:N.role,sortOrder:"ascending",width:new b(58,57,57,57,58)},{key:"lastSeen",value:N.lastSeen,sortOrder:"ascending",width:new b(10,17,17,11,9)}],ai=58;function di({userNameSticky:e,sortConfig:o,onColumnSortConfigChanged:r,mode:n}){const u=k(),[p,g]=f.useState(si(n==="off"?S:E));f.useEffect(()=>{const a=[...p];for(const l of a)l.key===o.sortKey?l.sortOrder=o.sortOrder:l.sortOrder="ascending";g(a)},[o.sortKey,o.sortOrder]);const h=(a,l)=>{let x=l;o.sortKey===a&&(x=l==="ascending"?"descending":"ascending"),r?.(a,x)};return i.jsx(hi,{height:ai,"data-testid":d("people-list-header-row"),children:p.map(a=>i.jsxs(mi,{userNameSticky:!!e&&a.key==="name",sortDataValue:o.sortKey,actualDataValue:a.key,wrapperWidth:a.width,windowSize:u,children:[i.jsxs(gi,{"data-testid":d("people-list-header",a.key),onClick:()=>h(a.key,a.sortOrder),children:[i.jsx(O,{children:a.value}),i.jsx(pi,{sortDataValue:o.sortKey,headerdata:a,children:i.jsx(oi,{width:12,height:12})})]}),i.jsx(xi,{isVisible:o.sortKey===a.key&&a.key!=="name",children:i.jsx(ui,{"data-testid":d("people-list-header-sort-cancel",a.key),onClick:()=>h("name","ascending")})})]},a.key))})}const ci=pe.memo(di),pi=t.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"}
+`,hi=t(O)`
+  top: 0;
+  left: 0;
+  width: fit-content;
+  min-width: 100%;
+  position: sticky;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${s.sp5} ${s.sp11} ${s.sp3} ${s.sp11};
+  color: ${e=>e.theme.colors.grey1};
+  background-color: ${e=>e.theme.colors.grey4};
+`,mi=t.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)};
+  background-color: ${e=>e.theme.colors.grey4};
+  left: ${s.sp0};
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  box-sizing: border-box;
+  ${e=>e.userNameSticky?"position: sticky; z-index: 1;":"position: static; z-index: 0;"};
+  ${e=>e.actualDataValue==="name"||e.actualDataValue==="role"?`padding-left: ${s.sp0}; flex: 1 1 auto`:`padding-left: ${s.sp0};`}
+`,ui=t(ni)`
+  cursor: pointer;
+  color: inherit;
+  width: 12px;
+  height: 12px;
+`,xi=t.div`
+  visibility: ${e=>e.isVisible?"visible":"hidden"};
+  display: flex;
+  align-items: center;
+  padding-top: 2px;
+`,gi=t(O)`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,wi=58;function vi({sortConfig:e,onColumnSortConfigChanged:o,mode:r}){const n=$.getLocalizedStrings().peoplePage,u=Ye({mode:"all"}),p=f.useMemo(()=>r==="zeni_only"?E:S,[r]),g=f.useMemo(()=>p.map(l=>({label:l.value,value:l.key})),[p]),h=p.find(l=>l.key===e.sortKey);h!=null&&(h.sortOrder=e.sortOrder);const a=(l,x)=>{let v=x;e.sortKey===l&&(v=x==="ascending"?"descending":"ascending"),o?.(l,v)};return f.useEffect(()=>{const l=u.watch((x,{name:v})=>{if(v!=null&&x!=null){const{people_sort_by:y}=x;o?.(y.selectedOption.value,"ascending")}});return()=>{l.unsubscribe()}}),i.jsxs($i,{height:wi,"data-testid":d("people-list-header-row-small"),children:[i.jsx(bi,{children:i.jsx(ei,{...u,children:i.jsx("form",{children:i.jsx(ii,{defaultValue:{allOptions:g,selectedOption:g.find(l=>l.value===e.sortKey)},placeholder:`${n.sortBy}:`,style:{width:"200px"},isSearchable:!1,isOptionsSortable:!1,constantSelectedValue:`${n.sortBy}:`,name:"people_sort_by"})})})}),i.jsxs(ji,{"data-testid":d("people-list-header",e.sortKey),onClick:()=>a(e.sortKey,e.sortOrder),children:[i.jsx(Si,{children:h?.value}),i.jsx(yi,{sortDataValue:e.sortKey,headerdata:h,children:i.jsx(ti,{width:s.sp3,height:s.sp3})})]})]})}const fi=pe.memo(vi),yi=t.div`
+  display: flex;
+  align-items: center;
+  transform: ${e=>e.sortDataValue===e.headerdata.key&&e.headerdata.sortOrder==="descending"?"rotate(180deg)":"rotate(0deg)"};
+  color: ${e=>e.theme.colors.primary};
+
+  ${e=>e.headerdata.sortOrder==="ascending"?"padding-top: 2px":"padding-bottom: 2px"}
+`,$i=t(O)`
+  top: 0;
+  left: 0;
+  width: fit-content;
+  min-width: 100%;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${s.sp3};
+  position: sticky;
+  color: ${e=>e.theme.colors.grey1};
+  background-color: ${e=>e.theme.colors.grey4};
+  justify-content: space-between;
+
+  .select-control.single-select-field__control {
+    background-color: ${e=>e.theme.colors.grey4};
+    height: 17px;
+    &:hover {
+      background-color: ${e=>e.theme.colors.grey4};
+    }
+  }
+
+  .select-value-container.single-select-field__value-container {
+    margin: 0;
+    justify-content: flex-start;
+    .single-select-field__single-value {
+      color: ${e=>e.theme.colors.hero};
+      ${ze.smallRegular.css};
+    }
+  }
+
+  .single-select-field__menu {
+    left: -19px;
+    top: ${s.sp4};
+    border: 1px solid ${e=>e.theme.colors.grey3};
+    padding-left: 20px;
+  }
+`,bi=t.div`
+  display: flex;
+  gap: ${s.sp1};
+`,ji=t(O)`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Si=t(O)`
+  color: ${e=>e.theme.colors.hero};
+`,{peoplePage:P}=$.getLocalizedStrings(),ki=({peopleData:e,userNameSticky:o,allClasses:r,allManagers:n,onResendInvite:u,onDeleteUser:p,onRowClick:g})=>{const[h,a]=f.useState(!1),l=k(),x=Ii(e,n,r),v=e.userRole.userRoles.filter(w=>!Oe(w)),y=()=>{p?.(e)},j=()=>{g?.(e.userId)};return i.jsxs(Ri,{windowSize:l,isInviteAccepted:e.userRole.invitationStatus==="accepted",onClick:j,"data-testid":d("people-list-row",e.userId),children:[i.jsx(Ci,{wrapperWidth:S[0].width,windowSize:l,userNameSticky:o,children:i.jsxs(Ti,{children:[i.jsx(ee,{personBasic:e.user,styles:{height:s.sp6,width:s.sp6}}),i.jsxs(Pi,{children:[e.user?.firstName?i.jsxs(Ni,{className:"personNameTxt",isInviteAccepted:e.userRole.invitationStatus==="accepted",children:[e.user?.firstName??""," ",e.user?.lastName??""]}):null,i.jsx(Oi,{isInviteAccepted:e.userRole.invitationStatus==="accepted",className:"emailTxt",children:e.userRole.userEmail??""})]})]})}),i.jsx(Di,{wrapperWidth:S[1].width,windowSize:l,children:i.jsx(_e,{roles:v})}),i.jsxs(i.Fragment,{children:[Q(e.userRole.userRoles)?i.jsx(Z,{wrapperWidth:S[2].width,windowSize:l,children:i.jsx(A,{children:P.notApplicable})}):i.jsx(i.Fragment,{children:x.manager?i.jsx(ye,{wrapperWidth:S[2].width,windowSize:l,children:i.jsx(A,{children:x.manager})}):i.jsx(Z,{wrapperWidth:S[2].width,windowSize:l,children:i.jsx(A,{children:P.noManager})})}),Q(e.userRole.userRoles)?i.jsx(Z,{wrapperWidth:S[3].width,windowSize:l,children:i.jsx(A,{children:P.notApplicable})}):i.jsx(i.Fragment,{children:x.department?i.jsx(ye,{wrapperWidth:S[3].width,windowSize:l,children:i.jsx(A,{children:x.department})}):i.jsx(Z,{wrapperWidth:S[3].width,windowSize:l,children:i.jsx(A,{children:P.emptyDepartmentPlaceholderText})})})]}),i.jsxs(_i,{"data-testid":d("last-seen-container",e.userId),wrapperWidth:S[4].width,windowSize:l,children:[e.userRole.invitationStatus==="accepted"?i.jsx(zi,{children:x.lastSeen}):i.jsx(Ai,{children:e.update==="resendInvite"?i.jsx(ie,{size:"Small",start:!0}):i.jsxs(i.Fragment,{children:[i.jsx(Vi,{"data-testid":d("resend-invite-text",e.userId),onClick:w=>{w.stopPropagation(),u?.(e.userId)},children:P.resendInvite.label}),i.jsx(Wi,{children:i.jsx(Mi,{children:`${P.sentText} ${D(e?.userRole?.inviteUpdateTime?e.userRole.inviteUpdateTime:e.userRole.inviteCreateTime)}`})})]})}),i.jsx(Li,{isInviteAccepted:e.userRole.invitationStatus==="accepted",className:"menu-icon",children:i.jsx(Pe,{menuItems:i.jsxs(Bi,{"data-testid":d("menu-items-container",e.userId),children:[i.jsx($e,{"data-testid":d("edit-people-list-row"),onClick:()=>{a(!1),j()},children:P.invitePage.editTitle}),i.jsx($e,{"data-testid":d("delete-people-list-row",e.userId),isDelete:!0,onClick:w=>{w.stopPropagation(),a(!1),y()},children:P.deleteOverlay.title})]}),setIsMenuOpen:a,isMenuOpen:h})})]})]})};function Ii(e,o,r){const n=r.find(p=>e.userRole.accountingClassIDs[0]===p.classId),u=o.find(p=>p.userId===e.userRole.managerUserId);return{name:`${e.user?.firstName??""} ${e.user?.lastName??""}`,role:{selectedOptions:e.userRole.userRoles,allOptions:ri},manager:u?.user?`${u?.user?.firstName} ${u?.user?.lastName}`:void 0,department:n?n?.className:void 0,lastSeen:e?.userRole?.userLastCheckInTimeIntoTenant?D(e.userRole.userLastCheckInTimeIntoTenant):"-"}}const Ri=t.div`
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${s.sp2};
+  display: flex;
+  padding: 9px ${s.sp4} 9px ${s.sp4};
+  align-items: center;
+  width: fit-content;
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${e=>e.theme.colors.hero};
+  box-shadow: ${e=>`${s.sp0} 2px ${s.sp1} ${e.theme.colors.dropShadowNormal}`};
+  height: 100%;
+  .select-control .select-value-container {
+    .zeniRolesDropDown__single-value,
+    .single-select-field__single-value {
+      color: ${e=>e.isInviteAccepted?e.theme.colors.hero:e.theme.colors.grey1};
+    }
+  }
+  /* Temp fix TBD - this should shift to Custom Select Picker Style for ZeniRoleDropDown.
+  customSelectStyle?: StylesConfig<OptionType, true>; */
+  .zeniRolesDropDown__menu {
+    width: 230px;
+    z-index: 3;
+  }
+  .menu-icon {
+    visibility: hidden;
+  }
+  &:hover {
+    border-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+    .roles-count-wrapper {
+      border-color: inherit;
+    }
+    box-shadow: ${e=>`${s.sp0} 2px ${s.sp2} ${e.theme.colors.dropShadowHover}`};
+    .placeholder {
+      color: ${e=>e.theme.colors.primary};
+      fill: ${e=>e.theme.colors.primary};
+    }
+    .personNameTxt,
+    .emailTxt {
+      color: ${e=>e.theme.colors.primary};
+    }
+    .select-control .select-value-container {
+      .zeniRolesDropDown__single-value,
+      .single-select-field__single-value {
+        color: ${e=>e.theme.colors.primary};
+      }
+    }
+    .menu-icon {
+      visibility: visible;
+    }
+  }
+  background-color: ${e=>e.theme.colors.grey5};
+  cursor: pointer;
+`,Ci=t(Ne)`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.grey5};
+  left: 0;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  gap: ${s.sp3};
+  box-sizing: border-box;
+  z-index: 2;
+`,ye=t(_)`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`,zi=t(_)`
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+`,Z=t(_)`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  color: ${e=>e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`,A=t.div`
+  width: 96%;
+`,Ti=t.div`
+  display: flex;
+  align-items: center;
+`,Pi=t.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  align-items: flex-start;
+  margin-left: ${s.sp2};
+  word-break: break-word;
+`,Ni=t(se)`
+  padding-top: ${s.sp1};
+  color: ${e=>e.isInviteAccepted?e.theme.colors.hero:e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,Di=t(_)`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`,Oi=t(Y)`
+  color: ${e=>e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,_i=t.div`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  position: relative;
+`,Li=t.div`
+  position: absolute;
+  right: ${`-${s.sp2}`};
+  top: ${e=>e.isInviteAccepted?"6%":"30%"};
+`,Ai=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`,Vi=t(se)`
+  color: ${V.info};
+  cursor: pointer;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,Wi=t.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+`,Mi=t(Y)`
+  color: ${e=>e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,Bi=t.div`
+  margin: 5px ${s.sp0};
+`,$e=t(O)`
+  height: ${s.sp6};
+  display: flex;
+  align-items: center;
+  padding: ${s.sp0} ${s.sp3};
+  color: ${e=>e.isDelete===!0?V.important:e.theme.colors.hero};
+  cursor: pointer;
+  :hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Ui={width:new b(343,580,726)},{peoplePage:I}=$.getLocalizedStrings(),Ei=({peopleData:e,allClasses:o,allManagers:r,onRowClick:n,onResendInvite:u})=>{const p=k(),g=e.userRole.userRoles.filter(l=>!Oe(l)),h=ct(r,e.userRole.managerUserId),a=pt(o,e.userRole.accountingClassIDs);return i.jsxs(Ki,{windowSize:p,isInviteAccepted:e.userRole.invitationStatus==="accepted","data-testid":d("people-list-row-small",e.userId),onClick:()=>{n?.(e.userId)},children:[i.jsxs(Fi,{children:[i.jsx(ee,{personBasic:e.user,styles:{height:s.sp6,width:s.sp6}}),i.jsx(Zi,{children:i.jsxs(Ji,{children:[i.jsxs(qi,{className:"personNameTxt",isInviteAccepted:e.userRole.invitationStatus==="accepted",children:[e.user?.firstName??""," ",e.user?.lastName??""]}),i.jsx(Gi,{isInviteAccepted:e.userRole.invitationStatus==="accepted",className:"emailTxt",children:e.userRole.userEmail??""})]})}),e.userRole.invitationStatus==="accepted"?i.jsxs(Qi,{className:"lastSeen",children:[i.jsx(Xi,{className:"lastSeenDateTxt",children:e?.userRole?.userLastCheckInTimeIntoTenant?D(e.userRole.userLastCheckInTimeIntoTenant):"-"}),i.jsx(Yi,{children:I.header.lastSeen})]}):i.jsx(et,{"data-testid":d("resend-invite-wrapper",e.userId),children:e.update==="resendInvite"?i.jsx(ie,{size:"Small",start:!0}):i.jsxs(i.Fragment,{children:[i.jsx(it,{"data-testid":d("resend-invite-text",e.userId),onClick:l=>{l.stopPropagation(),u?.(e.userId)},children:I.resendInvite.label}),i.jsx(tt,{children:i.jsx(st,{children:`${I.sentText} ${D(e?.userRole?.inviteUpdateTime?e.userRole.inviteUpdateTime:e.userRole.inviteCreateTime)}`})})]})})]}),i.jsx(Hi,{children:i.jsxs(oe,{className:"personDetails",children:[i.jsxs(he,{children:[i.jsxs(me,{children:[I.header.role,":"]}),i.jsx(re,{children:i.jsx(_e,{roles:g})})]}),i.jsxs(ot,{children:[i.jsxs(lt,{children:[I.header.manager,":"]}),Q(e.userRole.userRoles)?i.jsx(J,{children:I.notApplicable}):i.jsx(i.Fragment,{children:h?i.jsx(at,{children:h}):i.jsx(J,{children:I.noManager})})]}),i.jsxs(rt,{children:[i.jsxs(nt,{children:[I.header.department,":"]}),Q(e.userRole.userRoles)?i.jsx(J,{children:I.notApplicable}):i.jsx(i.Fragment,{children:a?i.jsx(dt,{children:a}):i.jsx(J,{children:I.emptyDepartmentPlaceholderText})})]})]})})]})},Ki=t.div`
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${s.sp2};
+  display: flex;
+  padding: ${s.sp3};
+  width: ${e=>Ui.width.valuePx(e.windowSize)};
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${e=>e.theme.colors.hero};
+  box-shadow: ${e=>`${s.sp0} 2px ${s.sp1} ${e.theme.colors.dropShadowNormal}`};
+  height: 100%;
+  .zeniRolesDropDown__single-value,
+  .select-value-container .single-select-field__single-value {
+    color: ${e=>e.isInviteAccepted?e.theme.colors.hero:e.theme.colors.grey1};
+  }
+  &:hover {
+    border-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+    box-shadow: ${e=>`${s.sp0} 2px ${s.sp2} ${e.theme.colors.dropShadowHover}`};
+    .roles-count-wrapper {
+      border-color: inherit;
+    }
+    .placeholder {
+      color: ${e=>e.theme.colors.primary};
+      fill: ${e=>e.theme.colors.primary};
+    }
+    .personNameTxt,
+    .emailTxt,
+    .personDetails,
+    .lastSeen,
+    .lastSeenDateTxt,
+    .zeniRolesDropDown__single-value,
+    .single-select-field__single-value {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+  background-color: ${e=>e.theme.colors.grey5};
+  gap: ${s.sp1};
+  flex-direction: column;
+`,Fi=t.div`
+  display: flex;
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${e=>e.theme.colors.hero};
+  gap: ${s.sp2};
+`,Hi=t.div`
+  padding-left: ${s.sp7};
+`,Zi=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex: 1;
+`,Ji=t.div``,qi=t(_)`
+  color: ${e=>e.isInviteAccepted?e.theme.colors.hero:e.theme.colors.grey1};
+`,Gi=t(te)`
+  color: ${e=>e.theme.colors.grey1};
+`,oe=t(te)`
+  color: ${e=>e.theme.colors.grey1};
+`,Qi=t(oe)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,Xi=t.div`
+  color: ${e=>e.theme.colors.hero};
+`,Yi=t.div``,et=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,it=t(oe)`
+  color: ${V.info};
+  cursor: pointer;
+`,tt=t.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+`,st=t(oe)`
+  color: ${e=>e.theme.colors.grey1};
+`,he=t.div`
+  display: flex;
+`,ot=t(he)``,rt=t(he)``,me=t.div`
+  width: 30%;
+`,lt=t(me)``,nt=t(me)``,re=t.div`
+  width: 70%;
+`,at=t(re)``,dt=t(re)``,J=t(re)`
+  color: ${e=>e.theme.colors.grey1};
+`,ct=(e,o)=>{const r=e.find(n=>n.userId===o);return r?.user?`${r?.user?.firstName} ${r?.user?.lastName}`:void 0},pt=(e,o)=>{const r=e.find(n=>o[0]===n.classId);return r?r.className:void 0},ht=e=>k()==="small"?i.jsx(Ei,{...e}):i.jsx(ki,{...e}),q=$.getLocalizedStrings().peoplePage,mt=({peopleData:e,userNameSticky:o,onResendInvite:r,onDeleteUser:n,onRowClick:u})=>{const[p,g]=f.useState(!1),h=k(),a=ut(e),l=y=>{const j=[];return y.map(w=>{const z=De.roles.find(W=>W.value===w);return z!=null&&j.push(z?.label??""),j}),j.length>0?j.join(", "):"-"},x=()=>{n?.(e)},v=()=>{u?.(e.userId)};return i.jsxs(xt,{"data-testid":d("zeni-people-list-row-medium",e.userId),windowSize:h,isInviteAccepted:e.userRole.invitationStatus==="accepted",onClick:v,children:[i.jsx(gt,{wrapperWidth:E[0].width,windowSize:h,userNameSticky:o,children:i.jsxs(vt,{children:[i.jsx(ee,{personBasic:e.user,styles:{height:s.sp6,width:s.sp6}}),i.jsxs(ft,{children:[e.user?.firstName?i.jsxs(yt,{isInviteAccepted:e.userRole.invitationStatus==="accepted",className:"personNameTxt",children:[e.user?.firstName??""," ",e.user?.lastName??""]}):null,i.jsx(bt,{isInviteAccepted:e.userRole.invitationStatus==="accepted",className:"emailTxt",children:e.userRole.userEmail??""})]})]})}),i.jsx($t,{widthNumber:E[1].width,windowSize:h,children:i.jsx(wt,{wrapperWidth:new b(100,100),windowSize:h,children:l(e.userRole.userRoles)})}),i.jsxs(Rt,{"data-testid":d("people-list-row-medium-last-seen",e.userId),wrapperWidth:E[2].width,windowSize:h,children:[e.userRole.invitationStatus==="accepted"?i.jsx(Ct,{children:a.lastSeen}):i.jsx(jt,{"data-testid":d("people-list-row-medium-resend-invite",e.userId),children:e.update==="resendInvite"?i.jsx(ie,{size:"Small",start:!0}):i.jsxs(i.Fragment,{children:[i.jsx(St,{"data-testid":d("people-list-row-medium-resend-invite-text",e.userId),onClick:y=>{y.stopPropagation(),r?.(e.userId)},children:q.resendInvite.label}),i.jsx(kt,{children:i.jsx(It,{children:`${q.sentText} ${D(e?.userRole?.inviteUpdateTime?e.userRole.inviteUpdateTime:e.userRole.inviteCreateTime)}`})})]})}),i.jsx(zt,{"data-testid":d("people-list-row-medium-menu",e.userId),isInviteAccepted:e.userRole.invitationStatus==="accepted",className:"menu-icon",children:i.jsx(Pe,{menuItems:i.jsxs(Tt,{children:[i.jsx(be,{"data-testid":d("people-list-row-medium-menu-edit",e.userId),onClick:()=>{g(!1),v()},children:q.invitePage.editTitle}),i.jsx(be,{"data-testid":d("people-list-row-menu-delete",e.userId),isDelete:!0,onClick:y=>{y.stopPropagation(),g(!1),x()},children:q.deleteOverlay.title})]}),setIsMenuOpen:g,isMenuOpen:p})})]})]})};function ut(e){return{name:`${e.user?.firstName??""} ${e.user?.lastName??""}`,role:{selectedOptions:e.userRole.userRoles,allOptions:De.roles},lastSeen:e?.userRole?.userLastCheckInTimeIntoTenant?D(e.userRole.userLastCheckInTimeIntoTenant):"-"}}const xt=t.div`
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${s.sp2};
+  display: flex;
+  padding: 9px ${s.sp4} 9px ${s.sp4};
+  align-items: center;
+  width: fit-content;
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${e=>e.theme.colors.hero};
+  box-shadow: ${e=>`${s.sp0} 2px ${s.sp1} ${e.theme.colors.dropShadowNormal}`};
+  height: 100%;
+  .zeniRolesDropDown__multi-value,
+  .select-value-container {
+    .single-select-field__single-value {
+      color: ${e=>e.isInviteAccepted?e.theme.colors.hero:e.theme.colors.grey1};
+    }
+    .zeniRolesDropDown__input-container {
+      position: unset !important;
+    }
+  }
+  /* Temp fix TBD - this should shift to Custom Select Picker Style for ZeniRoleDropDown.
+  customSelectStyle?: StylesConfig<OptionType, true>; */
+  .zeniRolesDropDown__menu {
+    width: 230px;
+    z-index: 3;
+  }
+  .menu-icon {
+    visibility: hidden;
+  }
+  &:hover {
+    border-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+    box-shadow: ${e=>`${s.sp0} 2px ${s.sp2} ${e.theme.colors.dropShadowHover}`};
+    .placeholder {
+      color: ${e=>e.theme.colors.primary};
+      fill: ${e=>e.theme.colors.primary};
+    }
+    .zeniRolesDropDown__multi-value,
+    .personNameTxt,
+    .emailTxt,
+    .zeniRolesDropDown__single-value,
+    .single-select-field__single-value {
+      color: ${e=>e.theme.colors.primary};
+    }
+    .menu-icon {
+      visibility: visible;
+    }
+  }
+  background-color: ${e=>e.theme.colors.grey5};
+  cursor: pointer;
+`,gt=t(Ne)`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  max-width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  background-color: ${e=>e.theme.colors.grey5};
+  left: 0;
+  flex: 1 1 auto;
+  justify-content: space-between;
+  gap: ${s.sp3};
+  box-sizing: border-box;
+  z-index: 2;
+`,wt=t(_)`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,vt=t.div`
+  display: flex;
+  align-items: center;
+`,ft=t.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  align-items: flex-start;
+  margin-left: ${s.sp2};
+  word-break: break-word;
+`,yt=t(se)`
+  padding-top: ${s.sp1};
+  color: ${e=>e.isInviteAccepted?e.theme.colors.hero:e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,$t=t.div`
+  width: ${e=>e.widthNumber.valuePercentage(e.windowSize)};
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+`,bt=t(Y)`
+  color: ${e=>e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,jt=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`,St=t(se)`
+  color: ${V.info};
+  cursor: pointer;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,kt=t.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+`,It=t(li)`
+  color: ${e=>e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`,Rt=t.div`
+  width: ${e=>e.wrapperWidth.valuePercentage(e.windowSize)};
+  position: relative;
+`,Ct=t(_)`
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+`,zt=t.div`
+  position: absolute;
+  right: ${`-${s.sp2}`};
+  top: ${e=>e.isInviteAccepted?"6%":"30%"};
+`,Tt=t.div`
+  margin: 5px ${s.sp0};
+`,be=t(O)`
+  height: ${s.sp6};
+  display: flex;
+  align-items: center;
+  padding: ${s.sp0} ${s.sp3};
+  color: ${e=>e.isDelete===!0?V.important:e.theme.colors.hero};
+  cursor: pointer;
+  :hover {
+    color: ${e=>e.theme.colors.primary};
+  }
+`,Pt={width:new b(343,580,726)},G=$.getLocalizedStrings().peoplePage,Nt=({peopleData:e,onRowClick:o,onResendInvite:r})=>{const n=k();return i.jsxs(Dt,{windowSize:n,"data-testid":d("zeni-people-list-row-small",e.userId),isInviteAccepted:e.userRole.invitationStatus==="accepted",onClick:()=>{o?.(e.userId)},children:[i.jsxs(Ot,{children:[i.jsx(ee,{personBasic:e.user,styles:{height:s.sp6,width:s.sp6}}),i.jsx(Lt,{children:i.jsxs(At,{children:[i.jsxs(Vt,{className:"personNameTxt",isInviteAccepted:e.userRole.invitationStatus==="accepted",children:[e.user?.firstName??""," ",e.user?.lastName??""]}),i.jsx(Wt,{isInviteAccepted:e.userRole.invitationStatus==="accepted",className:"emailTxt",children:e.userRole.userEmail??""})]})}),e.userRole.invitationStatus==="accepted"?i.jsxs(Et,{className:"lastSeen","data-testid":d("people-list-row-small-last-seen",e.userId),children:[i.jsx(Kt,{className:"lastSeenDateTxt","data-testid":d("people-list-row-small-last-seen-content",e.userId),children:e?.userRole?.userLastCheckInTimeIntoTenant?D(e.userRole.userLastCheckInTimeIntoTenant):"-"}),i.jsx(Ft,{children:G.header.lastSeen})]}):i.jsx(Ht,{"data-testid":d("people-list-row-small-resend-invite",e.userId),children:e.update==="resendInvite"?i.jsx(ie,{size:"Small",start:!0}):i.jsxs(i.Fragment,{children:[i.jsx(Zt,{"data-testid":d("people-list-row-small-resend-invite-text",e.userId),onClick:u=>{u.stopPropagation(),r?.(e.userId)},children:G.resendInvite.label}),i.jsx(Jt,{children:i.jsx(qt,{children:`${G.sentText} ${D(e?.userRole?.inviteUpdateTime?e.userRole.inviteUpdateTime:e.userRole.inviteCreateTime)}`})})]})})]}),i.jsx(_t,{children:i.jsx(le,{className:"personDetails",children:i.jsxs(Mt,{style:{display:"flex"},children:[i.jsxs(Bt,{style:{},children:[G.header.role,":"]}),i.jsx(Ut,{children:Te(e.userRole.userRoles,"zeni_only")})]})})})]})},Dt=t.div`
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${s.sp2};
+  display: flex;
+  padding: ${s.sp3};
+  width: ${e=>Pt.width.valuePx(e.windowSize)};
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${e=>e.theme.colors.hero};
+  box-shadow: ${e=>`${s.sp0} 2px ${s.sp1} ${e.theme.colors.dropShadowNormal}`};
+  height: 100%;
+  .zeniRolesDropDown__single-value,
+  .select-value-container .single-select-field__single-value {
+    color: ${e=>e.isInviteAccepted?e.theme.colors.hero:e.theme.colors.grey1};
+  }
+  &:hover {
+    border-color: ${e=>e.theme.colors.primary};
+    color: ${e=>e.theme.colors.primary};
+    box-shadow: ${e=>`${s.sp0} 2px ${s.sp2} ${e.theme.colors.dropShadowHover}`};
+    .placeholder {
+      color: ${e=>e.theme.colors.primary};
+      fill: ${e=>e.theme.colors.primary};
+    }
+    .personNameTxt,
+    .emailTxt,
+    .personDetails,
+    .lastSeen,
+    .lastSeenDateTxt,
+    .zeniRolesDropDown__single-value,
+    .single-select-field__single-value {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+  background-color: ${e=>e.theme.colors.grey5};
+  gap: ${s.sp2};
+  flex-direction: column;
+`,Ot=t.div`
+  display: flex;
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${e=>e.theme.colors.hero};
+  gap: ${s.sp2};
+`,_t=t.div`
+  padding-left: ${s.sp7};
+`,Lt=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex: 1;
+`,At=t.div``,Vt=t(_)`
+  color: ${e=>e.isInviteAccepted?e.theme.colors.hero:e.theme.colors.grey1};
+`,Wt=t(te)`
+  color: ${e=>e.theme.colors.grey1};
+`,le=t(te)`
+  color: ${e=>e.theme.colors.grey1};
+`,Mt=t.div`
+  display: flex;
+  gap: 6px;
+`,Bt=t.div``,Ut=t.div``,Et=t(le)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,Kt=t.div`
+  color: ${e=>e.theme.colors.hero};
+`,Ft=t.div``,Ht=t.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`,Zt=t(le)`
+  color: ${V.info};
+  cursor: pointer;
+`,Jt=t.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+`,qt=t(le)`
+  color: ${e=>e.theme.colors.grey1};
+`,Gt=e=>k()==="small"?i.jsx(Nt,{...e}):i.jsx(mt,{...e}),M={overscanCount:1,rowNameLimit:55,listItemHeight:88},ae={peopleListItemHeight:138,zeniPeopleListItemHeight:106,zeniPeopleExtendedListItemHeight:130},X={listItemPaddingRight:new b(m[3],m[8]),listItemPaddingLeft:new b(m[3],m[8]),zeniLastRowHeight:new b(154,136),nonZeniLastRowHeight:new b(200,136)},B=$.getLocalizedStrings().peoplePage,Qt=({peopleView:e,allManagers:o,allClasses:r,analytics:n,onColumnSortConfigChanged:u,onDeleteClick:p,onResendInvite:g,onRowClick:h,isZeniTenant:a})=>{const l=k(),x=f.useRef(null),v=!(l==="small"||l==="medium-compact"),[y,j]=f.useState(!1),[w,z]=f.useState(),W=Ce(),T=e.people.findIndex(c=>c.userRole.invitationStatus==="invited"),ue=c=>{j(!0),z(c)},xe=f.memo(({index:c,style:R})=>i.jsx(i.Fragment,{children:i.jsxs(es,{"data-testid":d("people-list-item",e.people[c].user?.userId),style:{...R,width:"fit-content",minWidth:"100%"},windowSize:l,isFirstResendInviteUser:T===c,className:"people-list-item",children:[T===c?i.jsx(rs,{}):null,e.uiState.mode==="off"?i.jsx(ht,{allManagers:o,allClasses:r,userNameSticky:v,peopleData:e.people[c],onDeleteUser:ue,onResendInvite:g,onRowClick:h,isZeniTenant:a}):i.jsx(Gt,{userNameSticky:v,peopleData:e.people[c],onDeleteUser:ue,onResendInvite:g,onRowClick:h,isZeniTenant:a})]})}),Ke);xe.displayName="ListItem";const ge=f.forwardRef((c,R)=>{const{children:L,style:F,...H}=c;return i.jsxs("div",{ref:R,style:{...F,width:"auto"},...H,children:[l==="small"?i.jsx(fi,{userNameSticky:v,onColumnSortConfigChanged:u,sortConfig:{sortKey:e.uiState.sortKey,sortOrder:e.uiState.sortOrder},mode:e.uiState.mode}):i.jsx(ci,{userNameSticky:v,onColumnSortConfigChanged:u,sortConfig:{sortKey:e.uiState.sortKey,sortOrder:e.uiState.sortOrder},mode:e.uiState.mode}),i.jsx(is,{children:L})]})});ge.displayName="People list view inner element type";const Le=c=>{const R=`${e.people[c].user?.firstName} ${e.people[c].user?.lastName}`.length,L=T===c;return R>M.rowNameLimit?M.listItemHeight+m[5]+(L?m[3]:m[0]):M.listItemHeight+(L?m[3]:m[0])},Ae=c=>{const R=`${e.people[c].user?.firstName} ${e.people[c].user?.lastName}`.length,L=Te(e.people[c].userRole.userRoles,e.uiState.mode).length,F=T===c,H=e.uiState.mode==="zeni_only"?L>33?ae.zeniPeopleExtendedListItemHeight:ae.zeniPeopleListItemHeight:ae.peopleListItemHeight;return R>M.rowNameLimit?H+m[5]+(F?m[3]:m[0]):H+(F?m[3]:m[0])},Ve={onOkClick:()=>{const c=w;n?.trackRemoveUserAccess(c.userRole.userRoles,c.userRole.userEmail),p?.(c.userId,c.userRole.userRoleId)},onCancelClick:()=>{j(!1),z(void 0)}},we=Fe(e.people.find(c=>c.userId===w?.userId)?.update),K=e.people.find(c=>c.userId===w?.userId)?.update,We=w!=null?B.deleteOverlay.description.replace("‘_user-name_’",`"${Xt(w)}"`):B.deleteOverlay.description;return f.useEffect(()=>{x.current&&x.current.resetAfterIndex(0)},[e,l]),f.useEffect(()=>{K==null&&we==="removeUsers"&&(j(!1),z(void 0))},[K,we]),i.jsxs(Yt,{"data-testid":d("people-list-view-container"),windowSize:l,mode:e.uiState.mode,children:[y===!0?i.jsx(He,{titleComponent:i.jsx(qe,{children:B.deleteOverlay.title}),descriptionComponent:i.jsx(Je,{children:We}),primaryButtonText:B.deleteOverlay.remove,secondaryButtonText:B.deleteOverlay.cancel,action:Ve,proceedButtonVariant:"danger",isLoading:K==="removeUsers",isDisabled:K==="removeUsers",style:{background:W.colors.overlayColor},children:w?.user!=null?i.jsxs(i.Fragment,{children:[i.jsx(os,{}),i.jsx(ts,{children:i.jsx(ss,{src:w?.user.photo?.toString()??Ze,alt:w?.user.userId,loading:"lazy"})})]}):null}):null,i.jsx(Ge,{children:({height:c,width:R})=>i.jsx(ls,{height:c,innerElementType:ge,itemCount:e.people.length,itemSize:l==="small"?Ae:Le,width:R,ref:x,overscanCount:M.overscanCount,children:xe})})]})},Xt=e=>e.user?.firstName?`${e.user?.firstName} ${e.user?.lastName}`:e.user?.email??"",Yt=t.div`
+  /** Subtract top so list can occupy remaining available height */
+  min-height: ${`calc(100vh - ${s.sp9})`};
+  max-width: 99.9%;
+  .people-list-item:last-of-type {
+    height: ${e=>e.mode==="zeni_only"?X.zeniLastRowHeight.valuePx(e.windowSize):X.nonZeniLastRowHeight.valuePx(e.windowSize)} !important;
+    padding-bottom: ${s.sp9};
+  }
+`,es=t.div`
+  top: ${s.sp0};
+  left: ${s.sp0};
+  padding: ${e=>`${s.sp0} ${X.listItemPaddingRight.valuePx(e.windowSize)} ${e.isFirstResendInviteUser?s.sp5:s.sp3} ${X.listItemPaddingLeft.valuePx(e.windowSize)} `};
+  box-sizing: border-box;
+`,is=t.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`,ts=t.div`
+  position: absolute;
+  top: -26px;
+`,ss=t.img`
+  height: 60px;
+  width: 60px;
+  border-radius: 50%;
+  color: ${e=>e.theme.colors.hero};
+`,os=t.div`
+  position: absolute;
+  top: 1%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 62px;
+  width: ${s.sp9};
+  border-radius: 50% 50% 0 0;
+  background-color: ${e=>e.theme.colors.grey5};
+`,rs=t.div`
+  padding-top: ${s.sp3};
+  border-top: 1px solid ${e=>e.theme.colors.grey3};
+`,ls=t(Xe)``,ns=(e,o)=>{const{user:r,userId:n,userRole:u,update:p}=e,{user:g,userId:h,userRole:a,update:l}=o;return U(r,g)&&U(n,h)&&U(u,a)&&U(p,l)},as=(e,o)=>{if(e.peopleView.people.length!=o.peopleView.people.length||e.allManagers.length!=o.allManagers.length)return!1;let r=!0;for(let n=0;n<e.peopleView.people.length;++n){const u=e.peopleView.people[n],p=o.peopleView.people[n];if(r=ns(u,p),!r)break}return r=r&&U(e.peopleView.invitePeopleState,o.peopleView.invitePeopleState),r=r&&e.peopleView.uiState.sortKey===o.peopleView.uiState.sortKey&&e.peopleView.uiState.sortOrder===o.peopleView.uiState.sortOrder,r},ds=f.memo(Qt,as);function cs({peopleInviteSectionProps:e}){const o=k();return i.jsx(ps,{isSearchOpen:e.isSearchOpen&&o==="small",windowsize:o,children:o!=="small"?i.jsxs(i.Fragment,{children:[e.hideSearchBtn?null:i.jsx(fe,{style:{position:"absolute",left:"unset",right:"120px"},placeholder:e.searchPlaceHolder,searchText:e.searchText,onSearchTextChanged:r=>{e.onSearchTextChanged?.(r)},onSearchOpen:e.onSearchOpen}),i.jsx(Ee,{variant:"primary",size:"small","data-testid":d("invite-people-button"),style:{height:"29px",...ze.smallRegular.cssObject,whiteSpace:"nowrap",display:"flex",alignItems:"center"},label:e.invitePeopleLabel,onClick:e.onInvitePeopleClick})]}):i.jsxs(i.Fragment,{children:[e.hideInviteBtn?null:i.jsx(hs,{"data-testid":d("invite-people-button"),onClick:e.onInvitePeopleClick}),e.hideSearchBtn?null:i.jsx(fe,{style:{position:"absolute",left:"5px",right:o!=="small"?"120px":"unset",top:"44px",width:"98%"},placeholder:e.searchPlaceHolder,searchText:e.searchText,"data-testid":d("people-invite-search"),onSearchTextChanged:r=>{e.onSearchTextChanged?.(r)},onSearchOpen:e.onSearchOpen,keepSearchBoxOpen:!0})]})})}const ps=t.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: ${e=>e.windowsize==="small"?"unset":"center"};
+`,hs=t(Qe)`
+  height: 20px;
+  width: 20px;
+  color: ${e=>e.theme.colors.hero};
+`,je=8,Se=[{width:"30%",loaderWidth:50},{width:"18%",loaderWidth:30},{width:"20%",loaderWidth:60},{width:"20%",loaderWidth:70},{width:"12%",loaderWidth:55}],ke=120,Ie=160,ms=[80,100,100,60],us=[[40,80],[55,90],[70,100]],xs=()=>k()==="small"?i.jsx(Re,{children:Array.from({length:je}).map((e,o)=>i.jsxs(bs,{children:[i.jsxs(js,{children:[i.jsx(ve,{width:m[6],height:m[6]}),i.jsxs(Ss,{children:[i.jsx(C,{width:ke,height:m[3]}),i.jsx(C,{width:Ie,height:m[2]})]}),i.jsx(C,{width:50,height:m[2]})]}),i.jsx(ks,{children:us.map((r,n)=>i.jsxs(Is,{children:[i.jsx(C,{width:r[0],height:m[2]}),i.jsx(C,{width:r[1],height:m[2]})]},`sm-detail-row-${n}`))})]},`sm-row-${o}`))}):i.jsxs(Re,{children:[i.jsx(gs,{children:Se.map((e,o)=>i.jsx(ws,{style:{width:e.width},children:i.jsx(C,{width:e.loaderWidth,height:m[2]})},`hdr-${o}`))}),Array.from({length:je}).map((e,o)=>i.jsxs(vs,{children:[i.jsxs(fs,{children:[i.jsx(ve,{width:m[6],height:m[6]}),i.jsxs(ys,{children:[i.jsx(C,{width:ke,height:m[3]}),i.jsx(C,{width:Ie,height:m[2]})]})]}),Se.slice(1).map((r,n)=>i.jsx($s,{style:{width:r.width},children:i.jsx(C,{width:ms[n],height:m[3]})},`col-${n}`))]},`row-${o}`))]}),Re=t.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${s.sp0} ${s.sp11};
+  gap: ${s.sp2};
+`,gs=t.div`
+  display: flex;
+  align-items: center;
+  padding: ${s.sp5} ${s.sp0} ${s.sp3};
+`,ws=t.div`
+  display: flex;
+  align-items: center;
+`,vs=t.div`
+  display: flex;
+  align-items: center;
+  padding: 9px ${s.sp4};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${s.sp2};
+  background-color: ${e=>e.theme.colors.grey5};
+  box-shadow: ${e=>`${s.sp0} 2px ${s.sp1} ${e.theme.colors.dropShadowNormal}`};
+`,fs=t.div`
+  width: 30%;
+  display: flex;
+  align-items: center;
+  gap: ${s.sp2};
+  flex: 1 1 auto;
+`,ys=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${s.sp1};
+`,$s=t.div`
+  display: flex;
+  align-items: center;
+`,bs=t.div`
+  display: flex;
+  flex-direction: column;
+  padding: ${s.sp3};
+  border: 1px solid ${e=>e.theme.colors.grey3};
+  border-radius: ${s.sp2};
+  background-color: ${e=>e.theme.colors.grey5};
+  box-shadow: ${e=>`${s.sp0} 2px ${s.sp1} ${e.theme.colors.dropShadowNormal}`};
+  gap: ${s.sp2};
+`,js=t.div`
+  display: flex;
+  align-items: center;
+  gap: ${s.sp2};
+`,Ss=t.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: ${s.sp1};
+`,ks=t.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${s.sp1};
+  padding-left: ${s.sp7};
+`,Is=t.div`
+  display: flex;
+  align-items: center;
+  gap: ${s.sp3};
+`,de=t.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  background-color: ${e=>e.theme.colors.grey4};
+`,Rs=t.div`
+  min-height: ${`calc(100vh - ${s.sp9})`};
+`,Cs=t.div`
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`,zs=t.div`
+  height: 96px;
+  width: 96px;
+  background: ${e=>e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${s.sp5};
+    color: ${e=>e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${e=>e.theme.colors.primary};
+    }
+  }
+`,Ts=t(Y)`
+  margin-top: ${s.sp3};
+  color: ${e=>e.theme.colors.hero};
+`;function Ps(e){const o=Ce(),r=k(),{mode:n,searchText:u}=e.peopleView.uiState,{fetchState:p}=e.peopleView,{fetchState:g}=e.managersView,{fetchState:h}=e.classList,[a,l]=f.useState(!1),x={isSearchOpen:a,onSearchOpen:T=>{l(T)},onSearchTextChanged:e.personAction.onSearchTextChanged,searchPlaceHolder:$.getLocalizedStrings().peoplePage.searchPlaceHolder,searchText:u,invitePeopleLabel:$.getLocalizedStrings().peoplePage.invitePeopleText,onInvitePeopleClick:e.onInvitePeopleClick,onClickMenuIcon:e.onClickMenuIcon},v=e?.isZeniTenant!==!0&&e?.isZeniAdminUser===!0,y=()=>{const T=n==="off"?"zeni_only":"off";e.personAction.onModeChange?.(T)},j=p==="Completed"?`(${e.peopleView.people.length})`:"",w=`${n==="off"?$.getLocalizedStrings().peoplePage.peopleTitle:$.getLocalizedStrings().peoplePage.zeniPeopleTitle} ${j}`,z=f.useMemo(()=>p==="In-Progress"||p==="Not-Started"||g==="In-Progress"||g==="Not-Started"||e.shouldFetchClasses&&(h==="In-Progress"||h==="Not-Started"),[p,g,e.shouldFetchClasses,h]);function W(){return z?i.jsxs(de,{"data-testid":d("people-page-loading"),children:[i.jsx(ne,{title:w,onBackClick:e.personAction.onBackClick,rightSideComponent:i.jsx(ce,{...x}),showMenuIcon:r==="medium-compact"||r==="small",onClickMenuIcon:e.onClickMenuIcon,onZeniLogoClick:y,showZeniLogo:v,zeniLogoVisiblity:n==="zeni_only"?"visible":"hidden",isSearchOpen:a,backgroundColor:o.colors.grey4,source:"PeoplePage"}),i.jsx(xs,{})]}):p==="Error"||h==="Error"||g==="Error"?i.jsxs(de,{"data-testid":d("people-page-error"),children:[i.jsx(ne,{title:w,onBackClick:e.personAction.onBackClick,rightSideComponent:i.jsx(ce,{...x}),showMenuIcon:r==="medium-compact"||r==="small",onZeniLogoClick:y,showZeniLogo:v,onClickMenuIcon:e.onClickMenuIcon,backgroundColor:o.colors.grey4,source:"PeoplePage"}),i.jsxs(Cs,{children:[i.jsx(zs,{"data-testid":d("people-page-error-reload-icon"),onClick:e.personAction.onReloadPeople,children:i.jsx(Me,{width:s.sp6,height:s.sp6})}),i.jsx(Ts,{children:$.getLocalizedStrings().peoplePage.reloadPage.label})]})]}):i.jsxs(de,{"data-testid":d("people-page-content-container"),children:[i.jsx(ne,{title:w,onBackClick:e.personAction.onBackClick,rightSideComponent:i.jsx(ce,{...x}),showMenuIcon:r==="medium-compact"||r==="small",onZeniLogoClick:y,showZeniLogo:v,onClickMenuIcon:e.onClickMenuIcon,source:"PeoplePage",backgroundColor:o.colors.grey4}),i.jsx(Rs,{"data-testid":d("people-page-content"),windowSize:r,children:e.peopleView.people.length>0?i.jsx(ds,{peopleView:e.peopleView,allManagers:e.managersView.users,allClasses:e.classList.classes,onDeleteClick:e.personAction.onPersonDelete,analytics:e.analytics,onResendInvite:e.personAction.onResendInvite,onColumnSortConfigChanged:e.onColumnSortConfigChanged,onRowClick:e.onRowClick,isZeniTenant:e.isZeniTenant}):u!==""?i.jsx(Be,{emptySearchTextFirstLine:$.getLocalizedStrings().peoplePage.emptySearchTextFirstLine,emptySearchTextSecondLine:$.getLocalizedStrings().peoplePage.emptySearchTextSecondLine}):i.jsx(Ue,{message:$.getLocalizedStrings().peoplePage.emptyResultsMessage})})]})}return i.jsx("div",{children:W()})}const ce=e=>i.jsx(cs,{peopleInviteSectionProps:e}),Ks=pe.memo(Ps);export{Ks as MemoPeople,Ps as default};