@zeniai/web-components 3.17.1 → 3.17.2

package/dist/PeoplePage-BduvauCB.js

@@ -1,1994 +0,0 @@
-import { i as _e, j as t, g as Ae, F as Be, u as Se, av as He, A as Me, k as F, V as Ue } from "./vendor-.pnpm-B2klaOGU.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, e as a, F as z, aa as Ve, S as i, ab as Ze, aV as Ke, fc as qe, t as Ie, A as V, fb as T, fd as Qe, _ as ke, n as te, P as se, o as L, C as B, E as ie, fe as Re, Q as Ge, ff as Ce, aD as Je, aP as Xe, v as Ye, aQ as De, aR as et, D as v, fg as fe, B as tt, aE as ae, z as st, fh as it } from "./index-DOPIZEh4.js";
-import { E as ot } from "./EmptySearchResults-DB83lEnn.js";
-import { hasZeniRoleOrCompanyOfficerAccess as Pe, hasInvestorBankerLevelAccess as D } from "@zeniai/client-epic-state";
-import { M as Te } from "./Menu-x9ZwZscJ.js";
-import { Z as oe } from "./ZeniAvatar-C0fTMeLv.js";
-import { R as ze } from "./RoleWithToolTip-CX-nfje7.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(
-            Q,
-            {
-              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(
-            Q,
-            {
-              wrapperWidth: S[2].width,
-              windowSize: n,
-              children: /* @__PURE__ */ t.jsx(_, { children: C.noManager })
-            }
-          ) }),
-          D(e.userRole.userRoles) ? /* @__PURE__ */ t.jsx(
-            Q,
-            {
-              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(
-            Q,
-            {
-              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(Ot, { 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(
-                Wt,
-                {
-                  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: Qe
-    },
-    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;
-`, Q = 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;
-`, Wt = s.div`
-  position: absolute;
-  right: ${`-${i.sp2}`};
-  top: ${(e) => e.isInviteAccepted ? "6%" : "30%"};
-`, Ot = 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(
-              Qt,
-              {
-                isInviteAccepted: e.userRole.invitationStatus === "accepted",
-                className: "emailTxt",
-                children: e.userRole.userEmail ?? ""
-              }
-            )
-          ] }) }),
-          e.userRole.invitationStatus === "accepted" ? /* @__PURE__ */ t.jsxs(Gt, { 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(G, { children: I.notApplicable }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: m ? /* @__PURE__ */ t.jsx(rs, { children: m }) : /* @__PURE__ */ t.jsx(G, { children: I.noManager }) })
-          ] }),
-          /* @__PURE__ */ t.jsxs(is, { children: [
-            /* @__PURE__ */ t.jsxs(ns, { children: [
-              I.header.department,
-              ":"
-            ] }),
-            D(e.userRole.userRoles) ? /* @__PURE__ */ t.jsx(G, { children: I.notApplicable }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: l ? /* @__PURE__ */ t.jsx(ls, { children: l }) : /* @__PURE__ */ t.jsx(G, { 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};
-`, Qt = s(ie)`
-  color: ${(e) => e.theme.colors.grey1};
-`, ne = s(ie)`
-  color: ${(e) => e.theme.colors.grey1};
-`, Gt = 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)``, G = 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(Ge)`
-  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(Ws, { children: /* @__PURE__ */ t.jsxs(Os, { 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};
-`, Ws = s.div`
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  flex: 1;
-`, Os = 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};
-`, Qs = (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, Gs = ({
-  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"
-  ), W = (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: W,
-            onResendInvite: p,
-            onRowClick: m,
-            isZeniTenant: l
-          }
-        ) : /* @__PURE__ */ t.jsx(
-          Qs,
-          {
-            userNameSticky: g,
-            peopleData: e.people[d],
-            onDeleteUser: W,
-            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: O, 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: O })
-          ]
-        }
-      );
-    }
-  );
-  we.displayName = "People list view inner element type";
-  const Le = (d) => {
-    const R = `${e.people[d].user?.firstName} ${e.people[d].user?.lastName}`.length, O = N === d;
-    return R > M.rowNameLimit ? M.listItemHeight + v[5] + (O ? v[3] : v[0]) : M.listItemHeight + (O ? v[3] : v[0]);
-  }, Ne = (d) => {
-    const R = `${e.people[d].user?.firstName} ${e.people[d].user?.lastName}`.length, O = Ce(
-      e.people[d].userRole.userRoles,
-      e.uiState.mode
-    ).length, K = N === d, q = e.uiState.mode === "zeni_only" ? O > 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]);
-  }, We = {
-    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, Oe = 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: Oe }),
-            primaryButtonText: U.deleteOverlay.remove,
-            secondaryButtonText: U.deleteOverlay.cancel,
-            action: We,
-            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(
-  Gs,
-  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: (W) => {
-      n(W);
-    },
-    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 W = c === "off" ? "zeni_only" : "off";
-    e.personAction.onModeChange?.(W);
-  }, 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
-};