@zeniai/web-components 3.16.33 → 3.16.34

package/dist/PeoplePage-CgbpQTzF.js

@@ -0,0 +1,1994 @@
+import { i as _e, j as t, g as Ae, F as Be, u as Se, b3 as He, A as Me, k as F, V as Ue } from "./vendor-.pnpm-DxbX2tX4.js";
+import ue, { useState as A, useEffect as Y, useMemo as me, memo as je, useRef as Fe, forwardRef as Ee } from "react";
+import s from "@emotion/styled";
+import { R as f, a as b, u as k, j as a, G as z, ab as Ve, S as i, aa as Ze, aT as Ke, fa as qe, t as Ie, A as V, f9 as T, fb as Ge, _ as ke, o as te, P as se, p as L, C as B, E as ie, fc as Re, Q as Qe, fd as Ce, aD as Je, aN as Xe, v as Ye, aO as De, aP as et, D as v, fe, B as tt, aE as ae, x as st, ff as it } from "./index-rO5GHlOg.js";
+import { E as ot } from "./EmptySearchResults-BEF1fPhr.js";
+import { hasZeniRoleOrCompanyOfficerAccess as Pe, hasInvestorBankerLevelAccess as D } from "@zeniai/client-epic-state";
+import { M as Te } from "./Menu-EG5GC1HM.js";
+import { Z as oe } from "./ZeniAvatar-B8vUwPS7.js";
+import { R as ze } from "./RoleWithToolTip-SDWCAZAR.js";
+import { S as nt } from "./add-C0nqJFLa.js";
+const P = b.getLocalizedStrings().peoplePage.header, S = [
+  {
+    key: "name",
+    value: P.name,
+    sortOrder: "ascending",
+    width: new f(32, 26, 26, 30, 32)
+  },
+  {
+    key: "role",
+    value: P.role,
+    sortOrder: "ascending",
+    width: new f(18, 17, 17, 21, 19)
+  },
+  {
+    key: "manager",
+    value: P.manager,
+    sortOrder: "ascending",
+    width: new f(20, 20, 20, 19, 20)
+  },
+  {
+    key: "department",
+    value: P.department,
+    sortOrder: "ascending",
+    width: new f(20, 20, 20, 19, 20)
+  },
+  {
+    key: "lastSeen",
+    value: P.lastSeen,
+    sortOrder: "ascending",
+    width: new f(10, 17, 17, 11, 9)
+  }
+], E = [
+  {
+    key: "name",
+    value: P.name,
+    sortOrder: "ascending",
+    width: new f(32, 26, 26, 32, 33)
+  },
+  {
+    key: "role",
+    value: P.role,
+    sortOrder: "ascending",
+    width: new f(58, 57, 57, 57, 58)
+  },
+  {
+    key: "lastSeen",
+    value: P.lastSeen,
+    sortOrder: "ascending",
+    width: new f(10, 17, 17, 11, 9)
+  }
+], rt = 58;
+function lt({
+  userNameSticky: e,
+  sortConfig: o,
+  onColumnSortConfigChanged: r,
+  mode: c
+}) {
+  const u = k(), [h, p] = A(
+    _e(
+      c === "off" ? S : E
+    )
+  );
+  Y(() => {
+    const l = [...h];
+    for (const n of l)
+      n.key === o.sortKey ? n.sortOrder = o.sortOrder : n.sortOrder = "ascending";
+    p(l);
+  }, [o.sortKey, o.sortOrder]);
+  const m = (l, n) => {
+    let x = n;
+    o.sortKey === l && (x = n === "ascending" ? "descending" : "ascending"), r?.(l, x);
+  };
+  return /* @__PURE__ */ t.jsx(
+    dt,
+    {
+      height: rt,
+      "data-testid": a("people-list-header-row"),
+      children: h.map((l) => /* @__PURE__ */ t.jsxs(
+        ht,
+        {
+          userNameSticky: !!e && l.key === "name",
+          sortDataValue: o.sortKey,
+          actualDataValue: l.key,
+          wrapperWidth: l.width,
+          windowSize: u,
+          children: [
+            /* @__PURE__ */ t.jsxs(
+              pt,
+              {
+                "data-testid": a(
+                  "people-list-header",
+                  l.key
+                ),
+                onClick: () => m(l.key, l.sortOrder),
+                children: [
+                  /* @__PURE__ */ t.jsx(z, { children: l.value }),
+                  /* @__PURE__ */ t.jsx(
+                    ct,
+                    {
+                      sortDataValue: o.sortKey,
+                      headerdata: l,
+                      children: /* @__PURE__ */ t.jsx(Ve, { width: 12, height: 12 })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              ut,
+              {
+                isVisible: o.sortKey === l.key && l.key !== "name",
+                children: /* @__PURE__ */ t.jsx(
+                  mt,
+                  {
+                    "data-testid": a(
+                      "people-list-header-sort-cancel",
+                      l.key
+                    ),
+                    onClick: () => m("name", "ascending")
+                  }
+                )
+              }
+            )
+          ]
+        },
+        l.key
+      ))
+    }
+  );
+}
+const at = ue.memo(lt), ct = s.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"}
+`, dt = s(z)`
+  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: ${i.sp5} ${i.sp11} ${i.sp3} ${i.sp11};
+  color: ${(e) => e.theme.colors.grey1};
+  background-color: ${(e) => e.theme.colors.grey4};
+`, ht = s.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: ${i.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: ${i.sp0}; flex: 1 1 auto` : `padding-left: ${i.sp0};`}
+`, mt = s(Ze)`
+  cursor: pointer;
+  color: inherit;
+  width: 12px;
+  height: 12px;
+`, ut = s.div`
+  visibility: ${(e) => e.isVisible ? "visible" : "hidden"};
+  display: flex;
+  align-items: center;
+  padding-top: 2px;
+`, pt = s(z)`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, xt = 58;
+function gt({
+  sortConfig: e,
+  onColumnSortConfigChanged: o,
+  mode: r
+}) {
+  const c = b.getLocalizedStrings().peoplePage, u = Ae({ mode: "all" }), h = me(
+    () => r === "zeni_only" ? E : S,
+    [r]
+  ), p = me(
+    () => h.map((n) => ({ label: n.value, value: n.key })),
+    [h]
+  ), m = h.find(
+    (n) => n.key === e.sortKey
+  );
+  m != null && (m.sortOrder = e.sortOrder);
+  const l = (n, x) => {
+    let g = x;
+    e.sortKey === n && (g = x === "ascending" ? "descending" : "ascending"), o?.(n, g);
+  };
+  return Y(() => {
+    const n = u.watch((x, { name: g }) => {
+      if (g != null && x != null) {
+        const { people_sort_by: $ } = x;
+        o?.(
+          $.selectedOption.value,
+          "ascending"
+        );
+      }
+    });
+    return () => {
+      n.unsubscribe();
+    };
+  }), /* @__PURE__ */ t.jsxs(
+    ft,
+    {
+      height: xt,
+      "data-testid": a("people-list-header-row-small"),
+      children: [
+        /* @__PURE__ */ t.jsx($t, { children: /* @__PURE__ */ t.jsx(Be, { ...u, children: /* @__PURE__ */ t.jsx("form", { children: /* @__PURE__ */ t.jsx(
+          Ke,
+          {
+            defaultValue: {
+              allOptions: p,
+              selectedOption: p.find(
+                (n) => n.value === e.sortKey
+              )
+            },
+            placeholder: `${c.sortBy}:`,
+            style: { width: "200px" },
+            isSearchable: !1,
+            isOptionsSortable: !1,
+            constantSelectedValue: `${c.sortBy}:`,
+            name: "people_sort_by"
+          }
+        ) }) }) }),
+        /* @__PURE__ */ t.jsxs(
+          yt,
+          {
+            "data-testid": a(
+              "people-list-header",
+              e.sortKey
+            ),
+            onClick: () => l(e.sortKey, e.sortOrder),
+            children: [
+              /* @__PURE__ */ t.jsx(bt, { children: m?.value }),
+              /* @__PURE__ */ t.jsx(
+                vt,
+                {
+                  sortDataValue: e.sortKey,
+                  headerdata: m,
+                  children: /* @__PURE__ */ t.jsx(qe, { width: i.sp3, height: i.sp3 })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const wt = ue.memo(
+  gt
+), vt = s.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"}
+`, ft = s(z)`
+  top: 0;
+  left: 0;
+  width: fit-content;
+  min-width: 100%;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: ${i.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};
+      ${Ie.smallRegular.css};
+    }
+  }
+
+  .single-select-field__menu {
+    left: -19px;
+    top: ${i.sp4};
+    border: 1px solid ${(e) => e.theme.colors.grey3};
+    padding-left: 20px;
+  }
+`, $t = s.div`
+  display: flex;
+  gap: ${i.sp1};
+`, yt = s(z)`
+  display: flex;
+  cursor: pointer;
+  gap: 5px;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, bt = s(z)`
+  color: ${(e) => e.theme.colors.hero};
+`, { peoplePage: C } = b.getLocalizedStrings(), St = ({
+  peopleData: e,
+  userNameSticky: o,
+  allClasses: r,
+  allManagers: c,
+  onResendInvite: u,
+  onDeleteUser: h,
+  onRowClick: p
+}) => {
+  const [m, l] = A(!1), n = k(), x = jt(e, c, r), g = e.userRole.userRoles.filter(
+    (w) => !Pe(w)
+  ), $ = () => {
+    h?.(e);
+  }, y = () => {
+    p?.(e.userId);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    It,
+    {
+      windowSize: n,
+      isInviteAccepted: e.userRole.invitationStatus === "accepted",
+      onClick: y,
+      "data-testid": a("people-list-row", e.userId),
+      children: [
+        /* @__PURE__ */ t.jsx(
+          kt,
+          {
+            wrapperWidth: S[0].width,
+            windowSize: n,
+            userNameSticky: o,
+            children: /* @__PURE__ */ t.jsxs(Ct, { children: [
+              /* @__PURE__ */ t.jsx(
+                oe,
+                {
+                  personBasic: e.user,
+                  styles: { height: i.sp6, width: i.sp6 }
+                }
+              ),
+              /* @__PURE__ */ t.jsxs(Pt, { children: [
+                e.user?.firstName ? /* @__PURE__ */ t.jsxs(
+                  Tt,
+                  {
+                    className: "personNameTxt",
+                    isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                    children: [
+                      e.user?.firstName ?? "",
+                      " ",
+                      e.user?.lastName ?? ""
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ t.jsx(
+                  Lt,
+                  {
+                    isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                    className: "emailTxt",
+                    children: e.userRole.userEmail ?? ""
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          zt,
+          {
+            wrapperWidth: S[1].width,
+            windowSize: n,
+            children: /* @__PURE__ */ t.jsx(ze, { roles: g })
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          D(e.userRole.userRoles) ? /* @__PURE__ */ t.jsx(
+            G,
+            {
+              wrapperWidth: S[2].width,
+              windowSize: n,
+              children: /* @__PURE__ */ t.jsx(_, { children: C.notApplicable })
+            }
+          ) : /* @__PURE__ */ t.jsx(t.Fragment, { children: x.manager ? /* @__PURE__ */ t.jsx(
+            $e,
+            {
+              wrapperWidth: S[2].width,
+              windowSize: n,
+              children: /* @__PURE__ */ t.jsx(_, { children: x.manager })
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            G,
+            {
+              wrapperWidth: S[2].width,
+              windowSize: n,
+              children: /* @__PURE__ */ t.jsx(_, { children: C.noManager })
+            }
+          ) }),
+          D(e.userRole.userRoles) ? /* @__PURE__ */ t.jsx(
+            G,
+            {
+              wrapperWidth: S[3].width,
+              windowSize: n,
+              children: /* @__PURE__ */ t.jsx(_, { children: C.notApplicable })
+            }
+          ) : /* @__PURE__ */ t.jsx(t.Fragment, { children: x.department ? /* @__PURE__ */ t.jsx(
+            $e,
+            {
+              wrapperWidth: S[3].width,
+              windowSize: n,
+              children: /* @__PURE__ */ t.jsx(_, { children: x.department })
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            G,
+            {
+              wrapperWidth: S[3].width,
+              windowSize: n,
+              children: /* @__PURE__ */ t.jsx(_, { children: C.emptyDepartmentPlaceholderText })
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ t.jsxs(
+          Nt,
+          {
+            "data-testid": a(
+              "last-seen-container",
+              e.userId
+            ),
+            wrapperWidth: S[4].width,
+            windowSize: n,
+            children: [
+              e.userRole.invitationStatus === "accepted" ? /* @__PURE__ */ t.jsx(Rt, { children: x.lastSeen }) : /* @__PURE__ */ t.jsx(Wt, { children: e.update === "resendInvite" ? /* @__PURE__ */ t.jsx(V, { size: "Small", start: !0 }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                /* @__PURE__ */ t.jsx(
+                  _t,
+                  {
+                    "data-testid": a(
+                      "resend-invite-text",
+                      e.userId
+                    ),
+                    onClick: (w) => {
+                      w.stopPropagation(), u?.(e.userId);
+                    },
+                    children: C.resendInvite.label
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(At, { children: /* @__PURE__ */ t.jsx(Bt, { children: `${C.sentText} ${T(
+                  e?.userRole?.inviteUpdateTime ? e.userRole.inviteUpdateTime : e.userRole.inviteCreateTime
+                )}` }) })
+              ] }) }),
+              /* @__PURE__ */ t.jsx(
+                Ot,
+                {
+                  isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                  className: "menu-icon",
+                  children: /* @__PURE__ */ t.jsx(
+                    Te,
+                    {
+                      menuItems: /* @__PURE__ */ t.jsxs(
+                        Ht,
+                        {
+                          "data-testid": a(
+                            "menu-items-container",
+                            e.userId
+                          ),
+                          children: [
+                            /* @__PURE__ */ t.jsx(
+                              ye,
+                              {
+                                "data-testid": a("edit-people-list-row"),
+                                onClick: () => {
+                                  l(!1), y();
+                                },
+                                children: C.invitePage.editTitle
+                              }
+                            ),
+                            /* @__PURE__ */ t.jsx(
+                              ye,
+                              {
+                                "data-testid": a(
+                                  "delete-people-list-row",
+                                  e.userId
+                                ),
+                                isDelete: !0,
+                                onClick: (w) => {
+                                  w.stopPropagation(), l(!1), $();
+                                },
+                                children: C.deleteOverlay.title
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      setIsMenuOpen: l,
+                      isMenuOpen: m
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+function jt(e, o, r) {
+  const c = r.find((h) => e.userRole.accountingClassIDs[0] === h.classId), u = o.find((h) => h.userId === e.userRole.managerUserId);
+  return {
+    name: `${e.user?.firstName ?? ""} ${e.user?.lastName ?? ""}`,
+    role: {
+      selectedOptions: e.userRole.userRoles,
+      allOptions: Ge
+    },
+    manager: u?.user ? `${u?.user?.firstName} ${u?.user?.lastName}` : void 0,
+    department: c ? c?.className : void 0,
+    lastSeen: e?.userRole?.userLastCheckInTimeIntoTenant ? T(
+      e.userRole.userLastCheckInTimeIntoTenant
+    ) : "-"
+  };
+}
+const It = s.div`
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${i.sp2};
+  display: flex;
+  padding: 9px ${i.sp4} 9px ${i.sp4};
+  align-items: center;
+  width: fit-content;
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${(e) => e.theme.colors.hero};
+  box-shadow: ${(e) => `${i.sp0} 2px ${i.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) => `${i.sp0} 2px ${i.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;
+`, kt = s(ke)`
+  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: ${i.sp3};
+  box-sizing: border-box;
+  z-index: 2;
+`, $e = s(L)`
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`, Rt = s(L)`
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+`, G = s(L)`
+  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;
+`, _ = s.div`
+  width: 96%;
+`, Ct = s.div`
+  display: flex;
+  align-items: center;
+`, Pt = s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  align-items: flex-start;
+  margin-left: ${i.sp2};
+  word-break: break-word;
+`, Tt = s(te)`
+  padding-top: ${i.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;
+`, zt = s(L)`
+  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;
+`, Lt = s(se)`
+  color: ${(e) => e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Nt = s.div`
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  position: relative;
+`, Ot = s.div`
+  position: absolute;
+  right: ${`-${i.sp2}`};
+  top: ${(e) => e.isInviteAccepted ? "6%" : "30%"};
+`, Wt = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`, _t = s(te)`
+  color: ${B.info};
+  cursor: pointer;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, At = s.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+`, Bt = s(se)`
+  color: ${(e) => e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Ht = s.div`
+  margin: 5px ${i.sp0};
+`, ye = s(z)`
+  height: ${i.sp6};
+  display: flex;
+  align-items: center;
+  padding: ${i.sp0} ${i.sp3};
+  color: ${(e) => e.isDelete === !0 ? B.important : e.theme.colors.hero};
+  cursor: pointer;
+  :hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Mt = {
+  width: new f(343, 580, 726)
+}, { peoplePage: I } = b.getLocalizedStrings(), Ut = ({
+  peopleData: e,
+  allClasses: o,
+  allManagers: r,
+  onRowClick: c,
+  onResendInvite: u
+}) => {
+  const h = k(), p = e.userRole.userRoles.filter(
+    (n) => !Pe(n)
+  ), m = as(
+    r,
+    e.userRole.managerUserId
+  ), l = cs(
+    o,
+    e.userRole.accountingClassIDs
+  );
+  return /* @__PURE__ */ t.jsxs(
+    Ft,
+    {
+      windowSize: h,
+      isInviteAccepted: e.userRole.invitationStatus === "accepted",
+      "data-testid": a(
+        "people-list-row-small",
+        e.userId
+      ),
+      onClick: () => {
+        c?.(e.userId);
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs(Et, { children: [
+          /* @__PURE__ */ t.jsx(
+            oe,
+            {
+              personBasic: e.user,
+              styles: { height: i.sp6, width: i.sp6 }
+            }
+          ),
+          /* @__PURE__ */ t.jsx(Zt, { children: /* @__PURE__ */ t.jsxs(Kt, { children: [
+            /* @__PURE__ */ t.jsxs(
+              qt,
+              {
+                className: "personNameTxt",
+                isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                children: [
+                  e.user?.firstName ?? "",
+                  " ",
+                  e.user?.lastName ?? ""
+                ]
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              Gt,
+              {
+                isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                className: "emailTxt",
+                children: e.userRole.userEmail ?? ""
+              }
+            )
+          ] }) }),
+          e.userRole.invitationStatus === "accepted" ? /* @__PURE__ */ t.jsxs(Qt, { className: "lastSeen", children: [
+            /* @__PURE__ */ t.jsx(Jt, { className: "lastSeenDateTxt", children: e?.userRole?.userLastCheckInTimeIntoTenant ? T(
+              e.userRole.userLastCheckInTimeIntoTenant
+            ) : "-" }),
+            /* @__PURE__ */ t.jsx(Xt, { children: I.header.lastSeen })
+          ] }) : /* @__PURE__ */ t.jsx(
+            Yt,
+            {
+              "data-testid": a(
+                "resend-invite-wrapper",
+                e.userId
+              ),
+              children: e.update === "resendInvite" ? /* @__PURE__ */ t.jsx(V, { size: "Small", start: !0 }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                /* @__PURE__ */ t.jsx(
+                  Dt,
+                  {
+                    "data-testid": a(
+                      "resend-invite-text",
+                      e.userId
+                    ),
+                    onClick: (n) => {
+                      n.stopPropagation(), u?.(e.userId);
+                    },
+                    children: I.resendInvite.label
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(es, { children: /* @__PURE__ */ t.jsx(ts, { children: `${I.sentText} ${T(
+                  e?.userRole?.inviteUpdateTime ? e.userRole.inviteUpdateTime : e.userRole.inviteCreateTime
+                )}` }) })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx(Vt, { children: /* @__PURE__ */ t.jsxs(ne, { className: "personDetails", children: [
+          /* @__PURE__ */ t.jsxs(pe, { children: [
+            /* @__PURE__ */ t.jsxs(xe, { children: [
+              I.header.role,
+              ":"
+            ] }),
+            /* @__PURE__ */ t.jsx(re, { children: /* @__PURE__ */ t.jsx(ze, { roles: p }) })
+          ] }),
+          /* @__PURE__ */ t.jsxs(ss, { children: [
+            /* @__PURE__ */ t.jsxs(os, { children: [
+              I.header.manager,
+              ":"
+            ] }),
+            D(e.userRole.userRoles) ? /* @__PURE__ */ t.jsx(Q, { children: I.notApplicable }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: m ? /* @__PURE__ */ t.jsx(rs, { children: m }) : /* @__PURE__ */ t.jsx(Q, { children: I.noManager }) })
+          ] }),
+          /* @__PURE__ */ t.jsxs(is, { children: [
+            /* @__PURE__ */ t.jsxs(ns, { children: [
+              I.header.department,
+              ":"
+            ] }),
+            D(e.userRole.userRoles) ? /* @__PURE__ */ t.jsx(Q, { children: I.notApplicable }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: l ? /* @__PURE__ */ t.jsx(ls, { children: l }) : /* @__PURE__ */ t.jsx(Q, { children: I.emptyDepartmentPlaceholderText }) })
+          ] })
+        ] }) })
+      ]
+    }
+  );
+}, Ft = s.div`
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${i.sp2};
+  display: flex;
+  padding: ${i.sp3};
+  width: ${(e) => Mt.width.valuePx(e.windowSize)};
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${(e) => e.theme.colors.hero};
+  box-shadow: ${(e) => `${i.sp0} 2px ${i.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) => `${i.sp0} 2px ${i.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: ${i.sp1};
+  flex-direction: column;
+`, Et = s.div`
+  display: flex;
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${(e) => e.theme.colors.hero};
+  gap: ${i.sp2};
+`, Vt = s.div`
+  padding-left: ${i.sp7};
+`, Zt = s.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex: 1;
+`, Kt = s.div``, qt = s(L)`
+  color: ${(e) => e.isInviteAccepted ? e.theme.colors.hero : e.theme.colors.grey1};
+`, Gt = s(ie)`
+  color: ${(e) => e.theme.colors.grey1};
+`, ne = s(ie)`
+  color: ${(e) => e.theme.colors.grey1};
+`, Qt = s(ne)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, Jt = s.div`
+  color: ${(e) => e.theme.colors.hero};
+`, Xt = s.div``, Yt = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, Dt = s(ne)`
+  color: ${B.info};
+  cursor: pointer;
+`, es = s.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+`, ts = s(ne)`
+  color: ${(e) => e.theme.colors.grey1};
+`, pe = s.div`
+  display: flex;
+`, ss = s(pe)``, is = s(pe)``, xe = s.div`
+  width: 30%;
+`, os = s(xe)``, ns = s(xe)``, re = s.div`
+  width: 70%;
+`, rs = s(re)``, ls = s(re)``, Q = s(re)`
+  color: ${(e) => e.theme.colors.grey1};
+`, as = (e, o) => {
+  const r = e.find(
+    (c) => c.userId === o
+  );
+  return r?.user ? `${r?.user?.firstName} ${r?.user?.lastName}` : void 0;
+}, cs = (e, o) => {
+  const r = e.find(
+    (c) => o[0] === c.classId
+  );
+  return r ? r.className : void 0;
+}, ds = (e) => k() === "small" ? /* @__PURE__ */ t.jsx(Ut, { ...e }) : /* @__PURE__ */ t.jsx(St, { ...e }), J = b.getLocalizedStrings().peoplePage, hs = ({
+  peopleData: e,
+  userNameSticky: o,
+  onResendInvite: r,
+  onDeleteUser: c,
+  onRowClick: u
+}) => {
+  const [h, p] = A(!1), m = k(), l = ms(e), n = ($) => {
+    const y = [];
+    return $.map((w) => {
+      const j = Re.roles.find(
+        (H) => H.value === w
+      );
+      return j != null && y.push(j?.label ?? ""), y;
+    }), y.length > 0 ? y.join(", ") : "-";
+  }, x = () => {
+    c?.(e);
+  }, g = () => {
+    u?.(e.userId);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    us,
+    {
+      "data-testid": a(
+        "zeni-people-list-row-medium",
+        e.userId
+      ),
+      windowSize: m,
+      isInviteAccepted: e.userRole.invitationStatus === "accepted",
+      onClick: g,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          ps,
+          {
+            wrapperWidth: E[0].width,
+            windowSize: m,
+            userNameSticky: o,
+            children: /* @__PURE__ */ t.jsxs(gs, { children: [
+              /* @__PURE__ */ t.jsx(
+                oe,
+                {
+                  personBasic: e.user,
+                  styles: { height: i.sp6, width: i.sp6 }
+                }
+              ),
+              /* @__PURE__ */ t.jsxs(ws, { children: [
+                e.user?.firstName ? /* @__PURE__ */ t.jsxs(
+                  vs,
+                  {
+                    isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                    className: "personNameTxt",
+                    children: [
+                      e.user?.firstName ?? "",
+                      " ",
+                      e.user?.lastName ?? ""
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ t.jsx(
+                  $s,
+                  {
+                    isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                    className: "emailTxt",
+                    children: e.userRole.userEmail ?? ""
+                  }
+                )
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          fs,
+          {
+            widthNumber: E[1].width,
+            windowSize: m,
+            children: /* @__PURE__ */ t.jsx(
+              xs,
+              {
+                wrapperWidth: new f(100, 100),
+                windowSize: m,
+                children: n(e.userRole.userRoles)
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(
+          Is,
+          {
+            "data-testid": a(
+              "people-list-row-medium-last-seen",
+              e.userId
+            ),
+            wrapperWidth: E[2].width,
+            windowSize: m,
+            children: [
+              e.userRole.invitationStatus === "accepted" ? /* @__PURE__ */ t.jsx(ks, { children: l.lastSeen }) : /* @__PURE__ */ t.jsx(
+                ys,
+                {
+                  "data-testid": a(
+                    "people-list-row-medium-resend-invite",
+                    e.userId
+                  ),
+                  children: e.update === "resendInvite" ? /* @__PURE__ */ t.jsx(V, { size: "Small", start: !0 }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                    /* @__PURE__ */ t.jsx(
+                      bs,
+                      {
+                        "data-testid": a(
+                          "people-list-row-medium-resend-invite-text",
+                          e.userId
+                        ),
+                        onClick: ($) => {
+                          $.stopPropagation(), r?.(e.userId);
+                        },
+                        children: J.resendInvite.label
+                      }
+                    ),
+                    /* @__PURE__ */ t.jsx(Ss, { children: /* @__PURE__ */ t.jsx(js, { children: `${J.sentText} ${T(
+                      e?.userRole?.inviteUpdateTime ? e.userRole.inviteUpdateTime : e.userRole.inviteCreateTime
+                    )}` }) })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ t.jsx(
+                Rs,
+                {
+                  "data-testid": a(
+                    "people-list-row-medium-menu",
+                    e.userId
+                  ),
+                  isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                  className: "menu-icon",
+                  children: /* @__PURE__ */ t.jsx(
+                    Te,
+                    {
+                      menuItems: /* @__PURE__ */ t.jsxs(Cs, { children: [
+                        /* @__PURE__ */ t.jsx(
+                          be,
+                          {
+                            "data-testid": a(
+                              "people-list-row-medium-menu-edit",
+                              e.userId
+                            ),
+                            onClick: () => {
+                              p(!1), g();
+                            },
+                            children: J.invitePage.editTitle
+                          }
+                        ),
+                        /* @__PURE__ */ t.jsx(
+                          be,
+                          {
+                            "data-testid": a(
+                              "people-list-row-menu-delete",
+                              e.userId
+                            ),
+                            isDelete: !0,
+                            onClick: ($) => {
+                              $.stopPropagation(), p(!1), x();
+                            },
+                            children: J.deleteOverlay.title
+                          }
+                        )
+                      ] }),
+                      setIsMenuOpen: p,
+                      isMenuOpen: h
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+function ms(e) {
+  return {
+    name: `${e.user?.firstName ?? ""} ${e.user?.lastName ?? ""}`,
+    role: {
+      selectedOptions: e.userRole.userRoles,
+      allOptions: Re.roles
+    },
+    lastSeen: e?.userRole?.userLastCheckInTimeIntoTenant ? T(
+      e.userRole.userLastCheckInTimeIntoTenant
+    ) : "-"
+  };
+}
+const us = s.div`
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${i.sp2};
+  display: flex;
+  padding: 9px ${i.sp4} 9px ${i.sp4};
+  align-items: center;
+  width: fit-content;
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${(e) => e.theme.colors.hero};
+  box-shadow: ${(e) => `${i.sp0} 2px ${i.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) => `${i.sp0} 2px ${i.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;
+`, ps = s(ke)`
+  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: ${i.sp3};
+  box-sizing: border-box;
+  z-index: 2;
+`, xs = s(L)`
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, gs = s.div`
+  display: flex;
+  align-items: center;
+`, ws = s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  align-items: flex-start;
+  margin-left: ${i.sp2};
+  word-break: break-word;
+`, vs = s(te)`
+  padding-top: ${i.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;
+`, fs = s.div`
+  width: ${(e) => e.widthNumber.valuePercentage(e.windowSize)};
+  display: flex;
+  align-items: flex-start;
+  box-sizing: border-box;
+`, $s = s(se)`
+  color: ${(e) => e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, ys = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`, bs = s(te)`
+  color: ${B.info};
+  cursor: pointer;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Ss = s.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+`, js = s(Qe)`
+  color: ${(e) => e.theme.colors.grey1};
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Is = s.div`
+  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
+  position: relative;
+`, ks = s(L)`
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+`, Rs = s.div`
+  position: absolute;
+  right: ${`-${i.sp2}`};
+  top: ${(e) => e.isInviteAccepted ? "6%" : "30%"};
+`, Cs = s.div`
+  margin: 5px ${i.sp0};
+`, be = s(z)`
+  height: ${i.sp6};
+  display: flex;
+  align-items: center;
+  padding: ${i.sp0} ${i.sp3};
+  color: ${(e) => e.isDelete === !0 ? B.important : e.theme.colors.hero};
+  cursor: pointer;
+  :hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ps = {
+  width: new f(343, 580, 726)
+}, X = b.getLocalizedStrings().peoplePage, Ts = ({
+  peopleData: e,
+  onRowClick: o,
+  onResendInvite: r
+}) => {
+  const c = k();
+  return /* @__PURE__ */ t.jsxs(
+    zs,
+    {
+      windowSize: c,
+      "data-testid": a(
+        "zeni-people-list-row-small",
+        e.userId
+      ),
+      isInviteAccepted: e.userRole.invitationStatus === "accepted",
+      onClick: () => {
+        o?.(e.userId);
+      },
+      children: [
+        /* @__PURE__ */ t.jsxs(Ls, { children: [
+          /* @__PURE__ */ t.jsx(
+            oe,
+            {
+              personBasic: e.user,
+              styles: { height: i.sp6, width: i.sp6 }
+            }
+          ),
+          /* @__PURE__ */ t.jsx(Os, { children: /* @__PURE__ */ t.jsxs(Ws, { children: [
+            /* @__PURE__ */ t.jsxs(
+              _s,
+              {
+                className: "personNameTxt",
+                isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                children: [
+                  e.user?.firstName ?? "",
+                  " ",
+                  e.user?.lastName ?? ""
+                ]
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              As,
+              {
+                isInviteAccepted: e.userRole.invitationStatus === "accepted",
+                className: "emailTxt",
+                children: e.userRole.userEmail ?? ""
+              }
+            )
+          ] }) }),
+          e.userRole.invitationStatus === "accepted" ? /* @__PURE__ */ t.jsxs(
+            Us,
+            {
+              className: "lastSeen",
+              "data-testid": a(
+                "people-list-row-small-last-seen",
+                e.userId
+              ),
+              children: [
+                /* @__PURE__ */ t.jsx(
+                  Fs,
+                  {
+                    className: "lastSeenDateTxt",
+                    "data-testid": a(
+                      "people-list-row-small-last-seen-content",
+                      e.userId
+                    ),
+                    children: e?.userRole?.userLastCheckInTimeIntoTenant ? T(
+                      e.userRole.userLastCheckInTimeIntoTenant
+                    ) : "-"
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(Es, { children: X.header.lastSeen })
+              ]
+            }
+          ) : /* @__PURE__ */ t.jsx(
+            Vs,
+            {
+              "data-testid": a(
+                "people-list-row-small-resend-invite",
+                e.userId
+              ),
+              children: e.update === "resendInvite" ? /* @__PURE__ */ t.jsx(V, { size: "Small", start: !0 }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                /* @__PURE__ */ t.jsx(
+                  Zs,
+                  {
+                    "data-testid": a(
+                      "people-list-row-small-resend-invite-text",
+                      e.userId
+                    ),
+                    onClick: (u) => {
+                      u.stopPropagation(), r?.(e.userId);
+                    },
+                    children: X.resendInvite.label
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(Ks, { children: /* @__PURE__ */ t.jsx(qs, { children: `${X.sentText} ${T(
+                  e?.userRole?.inviteUpdateTime ? e.userRole.inviteUpdateTime : e.userRole.inviteCreateTime
+                )}` }) })
+              ] })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx(Ns, { children: /* @__PURE__ */ t.jsx(le, { className: "personDetails", children: /* @__PURE__ */ t.jsxs(Bs, { style: { display: "flex" }, children: [
+          /* @__PURE__ */ t.jsxs(Hs, { style: {}, children: [
+            X.header.role,
+            ":"
+          ] }),
+          /* @__PURE__ */ t.jsx(Ms, { children: Ce(
+            e.userRole.userRoles,
+            "zeni_only"
+          ) })
+        ] }) }) })
+      ]
+    }
+  );
+}, zs = s.div`
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${i.sp2};
+  display: flex;
+  padding: ${i.sp3};
+  width: ${(e) => Ps.width.valuePx(e.windowSize)};
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${(e) => e.theme.colors.hero};
+  box-shadow: ${(e) => `${i.sp0} 2px ${i.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) => `${i.sp0} 2px ${i.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: ${i.sp2};
+  flex-direction: column;
+`, Ls = s.div`
+  display: flex;
+  min-width: 100%;
+  box-sizing: border-box;
+  color: ${(e) => e.theme.colors.hero};
+  gap: ${i.sp2};
+`, Ns = s.div`
+  padding-left: ${i.sp7};
+`, Os = s.div`
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex: 1;
+`, Ws = s.div``, _s = s(L)`
+  color: ${(e) => e.isInviteAccepted ? e.theme.colors.hero : e.theme.colors.grey1};
+`, As = s(ie)`
+  color: ${(e) => e.theme.colors.grey1};
+`, le = s(ie)`
+  color: ${(e) => e.theme.colors.grey1};
+`, Bs = s.div`
+  display: flex;
+  gap: 6px;
+`, Hs = s.div``, Ms = s.div``, Us = s(le)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, Fs = s.div`
+  color: ${(e) => e.theme.colors.hero};
+`, Es = s.div``, Vs = s.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+`, Zs = s(le)`
+  color: ${B.info};
+  cursor: pointer;
+`, Ks = s.div`
+  display: flex;
+  flex-direction: row;
+  -webkit-box-pack: end;
+  justify-content: flex-end;
+`, qs = s(le)`
+  color: ${(e) => e.theme.colors.grey1};
+`, Gs = (e) => k() === "small" ? /* @__PURE__ */ t.jsx(Ts, { ...e }) : /* @__PURE__ */ t.jsx(hs, { ...e }), M = {
+  overscanCount: 1,
+  rowNameLimit: 55,
+  listItemHeight: 88
+}, ce = {
+  peopleListItemHeight: 138,
+  zeniPeopleListItemHeight: 106,
+  zeniPeopleExtendedListItemHeight: 130
+}, ee = {
+  containerMarginRight: new f(v[0], v[0]),
+  containerMarginLeft: new f(v[0], v[8]),
+  listItemPaddingRight: new f(v[3], v[8]),
+  listItemPaddingLeft: new f(v[3], v[8]),
+  zeniLastRowHeight: new f(154, 136),
+  nonZeniLastRowHeight: new f(200, 136)
+}, U = b.getLocalizedStrings().peoplePage, Qs = ({
+  peopleView: e,
+  allManagers: o,
+  allClasses: r,
+  analytics: c,
+  onColumnSortConfigChanged: u,
+  onDeleteClick: h,
+  onResendInvite: p,
+  onRowClick: m,
+  isZeniTenant: l
+}) => {
+  const n = k(), x = Fe(null), g = !(n === "small" || n === "medium-compact"), [$, y] = A(!1), [w, j] = A(), H = Se(), N = e.people.findIndex(
+    (d) => d.userRole.invitationStatus === "invited"
+  ), O = (d) => {
+    y(!0), j(d);
+  }, ge = je(({ index: d, style: R }) => /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsxs(
+    Ys,
+    {
+      "data-testid": a(
+        "people-list-item",
+        e.people[d].user?.userId
+      ),
+      style: {
+        ...R,
+        width: "fit-content",
+        minWidth: "100%"
+      },
+      windowSize: n,
+      isFirstResendInviteUser: N === d,
+      className: "people-list-item",
+      children: [
+        N === d ? /* @__PURE__ */ t.jsx(ii, {}) : null,
+        e.uiState.mode === "off" ? /* @__PURE__ */ t.jsx(
+          ds,
+          {
+            allManagers: o,
+            allClasses: r,
+            userNameSticky: g,
+            peopleData: e.people[d],
+            onDeleteUser: O,
+            onResendInvite: p,
+            onRowClick: m,
+            isZeniTenant: l
+          }
+        ) : /* @__PURE__ */ t.jsx(
+          Gs,
+          {
+            userNameSticky: g,
+            peopleData: e.people[d],
+            onDeleteUser: O,
+            onResendInvite: p,
+            onRowClick: m,
+            isZeniTenant: l
+          }
+        )
+      ]
+    }
+  ) }), He);
+  ge.displayName = "ListItem";
+  const we = Ee(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (d, R) => {
+      const { children: W, style: K, ...q } = d;
+      return /* @__PURE__ */ t.jsxs(
+        "div",
+        {
+          ref: R,
+          style: {
+            ...K,
+            width: "auto"
+          },
+          ...q,
+          children: [
+            n === "small" ? /* @__PURE__ */ t.jsx(
+              wt,
+              {
+                userNameSticky: g,
+                onColumnSortConfigChanged: u,
+                sortConfig: {
+                  sortKey: e.uiState.sortKey,
+                  sortOrder: e.uiState.sortOrder
+                },
+                mode: e.uiState.mode
+              }
+            ) : /* @__PURE__ */ t.jsx(
+              at,
+              {
+                userNameSticky: g,
+                onColumnSortConfigChanged: u,
+                sortConfig: {
+                  sortKey: e.uiState.sortKey,
+                  sortOrder: e.uiState.sortOrder
+                },
+                mode: e.uiState.mode
+              }
+            ),
+            /* @__PURE__ */ t.jsx(Ds, { children: W })
+          ]
+        }
+      );
+    }
+  );
+  we.displayName = "People list view inner element type";
+  const Le = (d) => {
+    const R = `${e.people[d].user?.firstName} ${e.people[d].user?.lastName}`.length, W = N === d;
+    return R > M.rowNameLimit ? M.listItemHeight + v[5] + (W ? v[3] : v[0]) : M.listItemHeight + (W ? v[3] : v[0]);
+  }, Ne = (d) => {
+    const R = `${e.people[d].user?.firstName} ${e.people[d].user?.lastName}`.length, W = Ce(
+      e.people[d].userRole.userRoles,
+      e.uiState.mode
+    ).length, K = N === d, q = e.uiState.mode === "zeni_only" ? W > 33 ? ce.zeniPeopleExtendedListItemHeight : ce.zeniPeopleListItemHeight : ce.peopleListItemHeight;
+    return R > M.rowNameLimit ? q + v[5] + (K ? v[3] : v[0]) : q + (K ? v[3] : v[0]);
+  }, Oe = {
+    onOkClick: () => {
+      const d = w;
+      c?.trackRemoveUserAccess(
+        d.userRole.userRoles,
+        d.userRole.userEmail
+      ), h?.(
+        d.userId,
+        d.userRole.userRoleId
+      );
+    },
+    onCancelClick: () => {
+      y(!1), j(void 0);
+    }
+  }, ve = Je(
+    e.people.find(
+      (d) => d.userId === w?.userId
+    )?.update
+  ), Z = e.people.find(
+    (d) => d.userId === w?.userId
+  )?.update, We = w != null ? U.deleteOverlay.description.replace(
+    "‘_user-name_’",
+    `"${Js(w)}"`
+  ) : U.deleteOverlay.description;
+  return Y(() => {
+    x.current && x.current.resetAfterIndex(0);
+  }, [e, n]), Y(() => {
+    Z == null && ve === "removeUsers" && (y(!1), j(void 0));
+  }, [Z, ve]), /* @__PURE__ */ t.jsxs(
+    Xs,
+    {
+      "data-testid": a("people-list-view-container"),
+      windowSize: n,
+      mode: e.uiState.mode,
+      children: [
+        $ === !0 ? /* @__PURE__ */ t.jsx(
+          Xe,
+          {
+            titleComponent: /* @__PURE__ */ t.jsx(et, { children: U.deleteOverlay.title }),
+            descriptionComponent: /* @__PURE__ */ t.jsx(De, { children: We }),
+            primaryButtonText: U.deleteOverlay.remove,
+            secondaryButtonText: U.deleteOverlay.cancel,
+            action: Oe,
+            proceedButtonVariant: "danger",
+            isLoading: Z === "removeUsers",
+            isDisabled: Z === "removeUsers",
+            style: { background: H.colors.overlayColor },
+            children: w?.user != null ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+              /* @__PURE__ */ t.jsx(si, {}),
+              /* @__PURE__ */ t.jsx(ei, { children: /* @__PURE__ */ t.jsx(
+                ti,
+                {
+                  src: w?.user.photo?.toString() ?? Ye,
+                  alt: w?.user.userId,
+                  loading: "lazy"
+                }
+              ) })
+            ] }) : null
+          }
+        ) : null,
+        /* @__PURE__ */ t.jsx(Me, { children: ({ height: d, width: R }) => /* @__PURE__ */ t.jsx(
+          oi,
+          {
+            height: d,
+            innerElementType: we,
+            itemCount: e.people.length,
+            itemSize: n === "small" ? Ne : Le,
+            width: R,
+            ref: x,
+            overscanCount: M.overscanCount,
+            children: ge
+          }
+        ) })
+      ]
+    }
+  );
+}, Js = (e) => e.user?.firstName ? `${e.user?.firstName} ${e.user?.lastName}` : e.user?.email ?? "", Xs = s.div`
+  /** Subtract top so list can occupy remaining available height */
+  min-height: ${`calc(100vh - ${i.sp9})`};
+  max-width: 99.9%;
+  .people-list-item:last-of-type {
+    height: ${(e) => e.mode === "zeni_only" ? ee.zeniLastRowHeight.valuePx(e.windowSize) : ee.nonZeniLastRowHeight.valuePx(e.windowSize)} !important;
+    padding-bottom: ${i.sp9};
+  }
+`, Ys = s.div`
+  top: ${i.sp0};
+  left: ${i.sp0};
+  padding: ${(e) => `${i.sp0} ${ee.listItemPaddingRight.valuePx(e.windowSize)} ${e.isFirstResendInviteUser ? i.sp5 : i.sp3} ${ee.listItemPaddingLeft.valuePx(e.windowSize)} `};
+  box-sizing: border-box;
+`, Ds = s.div`
+  position: relative;
+  width: auto;
+  height: 100%;
+`, ei = s.div`
+  position: absolute;
+  top: -26px;
+`, ti = s.img`
+  height: 60px;
+  width: 60px;
+  border-radius: 50%;
+  color: ${(e) => e.theme.colors.hero};
+`, si = s.div`
+  position: absolute;
+  top: 1%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 62px;
+  width: ${i.sp9};
+  border-radius: 50% 50% 0 0;
+  background-color: ${(e) => e.theme.colors.grey5};
+`, ii = s.div`
+  padding-top: ${i.sp3};
+  border-top: 1px solid ${(e) => e.theme.colors.grey3};
+`, oi = s(Ue)``, ni = (e, o) => {
+  const {
+    user: r,
+    userId: c,
+    userRole: u,
+    update: h
+  } = e, {
+    user: p,
+    userId: m,
+    userRole: l,
+    update: n
+  } = o;
+  return F(r, p) && F(c, m) && F(u, l) && F(h, n);
+}, ri = (e, o) => {
+  if (e.peopleView.people.length != o.peopleView.people.length || e.allManagers.length != o.allManagers.length)
+    return !1;
+  let r = !0;
+  for (let c = 0; c < e.peopleView.people.length; ++c) {
+    const u = e.peopleView.people[c], h = o.peopleView.people[c];
+    if (r = ni(u, h), !r)
+      break;
+  }
+  return r = r && F(
+    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;
+}, li = je(
+  Qs,
+  ri
+);
+function ai({
+  peopleInviteSectionProps: e
+}) {
+  const o = k();
+  return /* @__PURE__ */ t.jsx(
+    ci,
+    {
+      isSearchOpen: e.isSearchOpen && o === "small",
+      windowsize: o,
+      children: o !== "small" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        e.hideSearchBtn ? null : /* @__PURE__ */ t.jsx(
+          fe,
+          {
+            style: {
+              position: "absolute",
+              left: "unset",
+              right: "120px"
+            },
+            placeholder: e.searchPlaceHolder,
+            searchText: e.searchText,
+            onSearchTextChanged: (r) => {
+              e.onSearchTextChanged?.(r);
+            },
+            onSearchOpen: e.onSearchOpen
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          tt,
+          {
+            variant: "primary",
+            size: "small",
+            "data-testid": a("invite-people-button"),
+            style: {
+              height: "29px",
+              ...Ie.smallRegular.cssObject,
+              whiteSpace: "nowrap",
+              display: "flex",
+              alignItems: "center"
+            },
+            label: e.invitePeopleLabel,
+            onClick: e.onInvitePeopleClick
+          }
+        )
+      ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+        e.hideInviteBtn ? null : /* @__PURE__ */ t.jsx(
+          di,
+          {
+            "data-testid": a("invite-people-button"),
+            onClick: e.onInvitePeopleClick
+          }
+        ),
+        e.hideSearchBtn ? null : /* @__PURE__ */ t.jsx(
+          fe,
+          {
+            style: {
+              position: "absolute",
+              left: "5px",
+              right: o !== "small" ? "120px" : "unset",
+              top: "44px",
+              width: "98%"
+            },
+            placeholder: e.searchPlaceHolder,
+            searchText: e.searchText,
+            "data-testid": a("people-invite-search"),
+            onSearchTextChanged: (r) => {
+              e.onSearchTextChanged?.(r);
+            },
+            onSearchOpen: e.onSearchOpen,
+            keepSearchBoxOpen: !0
+          }
+        )
+      ] })
+    }
+  );
+}
+const ci = s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: ${(e) => e.windowsize === "small" ? "unset" : "center"};
+`, di = s(nt)`
+  height: 20px;
+  width: 20px;
+  color: ${(e) => e.theme.colors.hero};
+`, de = s.div`
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, hi = s.div`
+  min-height: ${`calc(100vh - ${i.sp9})`};
+`, mi = s.div`
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: ${(e) => e.theme.colors.grey4};
+`, ui = s.div`
+  display: flex;
+  width: 100%;
+  min-height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, pi = s.div`
+  height: 96px;
+  width: 96px;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+  & svg {
+    margin: ${i.sp5};
+    color: ${(e) => e.theme.colors.grey1};
+  }
+  &:hover {
+    & svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, xi = s(se)`
+  margin-top: ${i.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, gi = () => /* @__PURE__ */ t.jsx(mi, { children: /* @__PURE__ */ t.jsx(V, { size: "ExtraLarge", start: !0 }) });
+function wi(e) {
+  const o = Se(), r = k(), { mode: c, searchText: u } = e.peopleView.uiState, { fetchState: h } = e.peopleView, { fetchState: p } = e.managersView, { fetchState: m } = e.classList, [l, n] = A(!1), g = {
+    isSearchOpen: l,
+    onSearchOpen: (O) => {
+      n(O);
+    },
+    onSearchTextChanged: e.personAction.onSearchTextChanged,
+    searchPlaceHolder: b.getLocalizedStrings().peoplePage.searchPlaceHolder,
+    searchText: u,
+    invitePeopleLabel: b.getLocalizedStrings().peoplePage.invitePeopleText,
+    onInvitePeopleClick: e.onInvitePeopleClick,
+    onClickMenuIcon: e.onClickMenuIcon
+  }, $ = e?.isZeniTenant !== !0 && e?.isZeniAdminUser === !0, y = () => {
+    const O = c === "off" ? "zeni_only" : "off";
+    e.personAction.onModeChange?.(O);
+  }, w = h === "Completed" ? `(${e.peopleView.people.length})` : "", j = `${c === "off" ? b.getLocalizedStrings().peoplePage.peopleTitle : b.getLocalizedStrings().peoplePage.zeniPeopleTitle} ${w}`, H = me(
+    () => h === "In-Progress" || h === "Not-Started" || p === "In-Progress" || p === "Not-Started" || e.shouldFetchClasses && (m === "In-Progress" || m === "Not-Started"),
+    [
+      h,
+      p,
+      e.shouldFetchClasses,
+      m
+    ]
+  );
+  function N() {
+    return H ? /* @__PURE__ */ t.jsxs(
+      de,
+      {
+        "data-testid": a("people-page-loading"),
+        children: [
+          /* @__PURE__ */ t.jsx(
+            ae,
+            {
+              title: j,
+              onBackClick: e.personAction.onBackClick,
+              rightSideComponent: /* @__PURE__ */ t.jsx(he, { ...g }),
+              showMenuIcon: r === "medium-compact" || r === "small",
+              onClickMenuIcon: e.onClickMenuIcon,
+              onZeniLogoClick: y,
+              showZeniLogo: $,
+              zeniLogoVisiblity: c === "zeni_only" ? "visible" : "hidden",
+              isSearchOpen: l,
+              backgroundColor: o.colors.grey4,
+              source: "PeoplePage"
+            }
+          ),
+          /* @__PURE__ */ t.jsx(gi, {})
+        ]
+      }
+    ) : h === "Error" || m === "Error" || p === "Error" ? /* @__PURE__ */ t.jsxs(de, { "data-testid": a("people-page-error"), children: [
+      /* @__PURE__ */ t.jsx(
+        ae,
+        {
+          title: j,
+          onBackClick: e.personAction.onBackClick,
+          rightSideComponent: /* @__PURE__ */ t.jsx(he, { ...g }),
+          showMenuIcon: r === "medium-compact" || r === "small",
+          onZeniLogoClick: y,
+          showZeniLogo: $,
+          onClickMenuIcon: e.onClickMenuIcon,
+          backgroundColor: o.colors.grey4,
+          source: "PeoplePage"
+        }
+      ),
+      /* @__PURE__ */ t.jsxs(ui, { children: [
+        /* @__PURE__ */ t.jsx(
+          pi,
+          {
+            "data-testid": a("people-page-error-reload-icon"),
+            onClick: e.personAction.onReloadPeople,
+            children: /* @__PURE__ */ t.jsx(st, { width: i.sp6, height: i.sp6 })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(xi, { children: b.getLocalizedStrings().peoplePage.reloadPage.label })
+      ] })
+    ] }) : /* @__PURE__ */ t.jsxs(
+      de,
+      {
+        "data-testid": a("people-page-content-container"),
+        children: [
+          /* @__PURE__ */ t.jsx(
+            ae,
+            {
+              title: j,
+              onBackClick: e.personAction.onBackClick,
+              rightSideComponent: /* @__PURE__ */ t.jsx(he, { ...g }),
+              showMenuIcon: r === "medium-compact" || r === "small",
+              onZeniLogoClick: y,
+              showZeniLogo: $,
+              onClickMenuIcon: e.onClickMenuIcon,
+              source: "PeoplePage",
+              backgroundColor: o.colors.grey4
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            hi,
+            {
+              "data-testid": a("people-page-content"),
+              windowSize: r,
+              children: e.peopleView.people.length > 0 ? /* @__PURE__ */ t.jsx(
+                li,
+                {
+                  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 !== "" ? /* @__PURE__ */ t.jsx(
+                ot,
+                {
+                  emptySearchTextFirstLine: b.getLocalizedStrings().peoplePage.emptySearchTextFirstLine,
+                  emptySearchTextSecondLine: b.getLocalizedStrings().peoplePage.emptySearchTextSecondLine
+                }
+              ) : /* @__PURE__ */ t.jsx(
+                it,
+                {
+                  message: b.getLocalizedStrings().peoplePage.emptyResultsMessage
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ t.jsx("div", { children: N() });
+}
+const he = (e) => /* @__PURE__ */ t.jsx(ai, { peopleInviteSectionProps: e }), Ci = ue.memo(wi);
+export {
+  Ci as MemoPeople,
+  wi as default
+};