@zeniai/web-components 3.16.41 → 3.16.42

package/dist/AllUserItems-PiyGcZO5.js

@@ -0,0 +1,979 @@
+import { d as Q, i as te, j as t, m as ye, o as Re } from "./vendor-.pnpm-BZbZ6JJC.js";
+import p from "@emotion/styled";
+import { hasInvestorBankerLevelAccess as G, toUserRoleTypeStrict as ze } from "@zeniai/client-epic-state";
+import { u as E, R as b, fc as J, j as z, S as l, hZ as U, a as q, h_ as K, h$ as X, i0 as se, J as ae, E as ne, D as u, iz as Ie, ep as De, y as de, B as le, p as ce, w as Ne, _ as Ue, Z as Ce, C as pe, z as me } from "./index-Dig6AEZA.js";
+import { useMemo as ue, useEffect as ge } from "react";
+import { L as he } from "./LabeledEmailInputField-BuQM2p82.js";
+import { L as xe } from "./LabeledSingleSelectWithoutClearableField-CJe5NbJI.js";
+import { L as ve } from "./LabeledUserSingleSelectWithSubtitlesField-DrldfcFO.js";
+import { L as fe, a as be } from "./LabeledZeniRolesDropDownField-BGABkm8J.js";
+const Z = (e, o) => `${e}.${o}`, oe = {
+  largeLabelWidth: new b(120, 120, 160),
+  paddingBottom: new b(u[3], u[2]),
+  textFieldPaddingHorizontal: new b(u[2], u[3]),
+  toolTipWidth: new b(215, 237)
+}, h = q.getLocalizedStrings().peoplePage, We = ({
+  user: e,
+  sectionId: o,
+  mode: r,
+  managersList: s,
+  classList: i,
+  controllersList: x,
+  customerRoleOptions: j,
+  isBankingOnlyTenant: m,
+  isCardsOnlyTenant: $,
+  isEdit: A,
+  person: v,
+  analytics: w
+}) => {
+  const P = E(), I = oe.largeLabelWidth.value(P), { setValue: D } = Q(), W = te(x), S = W.splice(0, 1), L = W.reduce(
+    (a, n) => a.concat(`${n.email},`),
+    ""
+  ), _ = ue(() => te(J.roles), []), g = G(e.role);
+  return ge(() => {
+    (g || m || $) && D("userItems.0.department", {
+      allOptions: [],
+      selectedOption: void 0
+    }), g && D("userItems.0.manager", {
+      allUsers: [],
+      selectedUser: void 0
+    });
+  }, [g, m, $]), /* @__PURE__ */ t.jsxs(
+    Ae,
+    {
+      windowSize: P,
+      "data-testid": z("edit-people-user-item-section"),
+      children: [
+        /* @__PURE__ */ t.jsx(
+          he,
+          {
+            label: h.invitePage.email,
+            name: Z(o, "email"),
+            registerOptions: {
+              required: !0,
+              value: e.email,
+              disabled: !0
+            },
+            placeholder: U(
+              h.addPlaceholderPrefix,
+              h.invitePage.email
+            ),
+            style: {
+              paddingTop: l.sp2,
+              paddingBottom: l.sp2
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsx(k, {}),
+        r === "off" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            fe,
+            {
+              label: { label: h.invitePage.role, width: I },
+              style: { width: "auto" },
+              rolesDropDownField: {
+                name: Z(o, "nonZeniRole"),
+                defaultValue: {
+                  userRole: {
+                    selectedRole: se(e.role),
+                    allRootRole: X(
+                      m,
+                      $
+                    )
+                  },
+                  productsByUserRole: K(
+                    e.role,
+                    j
+                  )
+                },
+                registerOptions: { required: !0 }
+              }
+            }
+          ),
+          /* @__PURE__ */ t.jsx(k, {}),
+          /* @__PURE__ */ t.jsx(
+            ve,
+            {
+              label: {
+                label: h.invitePage.manager,
+                width: I
+              },
+              showTooltip: !0,
+              toolTipWidth: oe.toolTipWidth.valuePx(P),
+              tooltipTitle: /* @__PURE__ */ t.jsx(Fe, {}),
+              userSingleSelectWithSubTitlesField: {
+                name: Z(o, "manager"),
+                value: {
+                  allUsers: s,
+                  selectedUser: e?.managerId ? e?.managerId : "no_manager"
+                },
+                valueToSubtitle: (a) => {
+                  const n = s.findIndex(
+                    (d) => d.userId === a
+                  );
+                  if (n !== -1) {
+                    const d = s[n], y = i.find(
+                      (F) => F.classId === d.userRole.accountingClassIDs[0]
+                    ), R = [];
+                    return y != null && R.push(y.className), R;
+                  } else
+                    return [];
+                },
+                placeholderLabel: g ? h.notApplicable : U(
+                  h.selectPlaceholderPrefix,
+                  h.invitePage.manager
+                ),
+                registerOptions: {
+                  required: !g
+                },
+                showOneOffLabel: {
+                  label: "No Manager",
+                  value: "no_manager",
+                  position: "top",
+                  subtitles: []
+                },
+                isDisabled: g ? "disabled" : void 0,
+                isOptionDisabled: (a) => a === v?.user?.userId
+              },
+              style: { width: "auto" },
+              isDisabled: g ? "disabled" : void 0,
+              opacity: g ? 0.32 : 1
+            }
+          ),
+          /* @__PURE__ */ t.jsx(k, {}),
+          /* @__PURE__ */ t.jsx(
+            xe,
+            {
+              label: {
+                label: h.invitePage.department,
+                width: I
+              },
+              singleSelectWithoutClearableField: {
+                name: Z(o, "department"),
+                defaultValue: {
+                  allOptions: i.map((a) => ({
+                    label: a.fullyQualifiedAccountingClassName ?? "",
+                    value: a.classId,
+                    hoverText: a.accountingClassNumber
+                  })),
+                  selectedOption: i.map((a) => ({
+                    label: a.fullyQualifiedAccountingClassName ?? "",
+                    value: a.classId,
+                    hoverText: a.accountingClassNumber
+                  })).find((a) => a.value === e.departmentId)
+                },
+                placeholder: g || m || $ ? h.notApplicable : U(
+                  h.selectPlaceholderPrefix,
+                  h.invitePage.department
+                ),
+                registerOptions: {
+                  required: !g || !(m || $)
+                },
+                isDisabled: g || m || $ ? "disabled" : void 0,
+                showOptionOnHover: !0
+              },
+              style: { width: "auto" },
+              isDisabled: g || m || $ ? "disabled" : void 0,
+              opacity: g || m || $ ? 0.32 : 1
+            }
+          ),
+          A ? null : /* @__PURE__ */ t.jsxs(Le, { windowSize: P, children: [
+            h.invitePage.controllerText,
+            S[0] ? /* @__PURE__ */ t.jsxs(
+              Me,
+              {
+                href: `mailto:${S[0].email}?cc=${L}&subject=${encodeURIComponent(
+                  h.invitePage.emailSubject
+                )}`,
+                children: [
+                  /* @__PURE__ */ t.jsx("span", { children: `${S[0].firstName} ${S[0].lastName}` }),
+                  /* @__PURE__ */ t.jsx(ae, { className: "arrowIcon" })
+                ]
+              }
+            ) : null
+          ] })
+        ] }) : /* @__PURE__ */ t.jsx(
+          be,
+          {
+            label: { label: h.invitePage.role, width: I },
+            zeniRolesDropDownField: {
+              name: Z(o, "role"),
+              defaultValue: {
+                selectedOptions: e.role,
+                allOptions: _
+              },
+              registerOptions: { required: !0 },
+              placeholderLabel: U(
+                h.selectPlaceholderPrefix,
+                h.invitePage.role
+              ),
+              isMulti: !0,
+              forZeniUser: !0,
+              onSelectionChanged: (a) => {
+                v != null && w?.trackRoleChanged(
+                  v.userRole.userRoles,
+                  a[0],
+                  v?.userRole.userEmail
+                );
+              }
+            },
+            style: { width: "auto" }
+          }
+        )
+      ]
+    }
+  );
+}, Fe = () => q.getLocalizedStrings().peoplePage.invitePage.managerTooltipText, Ae = p.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${l.sp2};
+  margin-bottom: ${l.sp3};
+  .single-select-field__menu {
+    border: ${(e) => e.windowSize === "small" ? `1px solid ${e.theme.colors.grey3}` : "unset"};
+  }
+`, k = p.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, Le = p(ne)`
+  padding: ${(e) => `${l.sp1}  ${e.windowSize === "small" ? l.sp3 : l.sp4}`};
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${l.sp0} ${l.sp0} ${l.sp2} ${l.sp2};
+  text-align: left;
+  color: ${(e) => e.theme.colors.grey1};
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  gap: ${(e) => e.windowSize === "small" ? l.sp0 : "6px"};
+`, Me = p.a`
+  color: ${(e) => e.theme.colors.hero};
+  text-decoration: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  .arrowIcon {
+    cursor: pointer;
+    height: ${l.sp3};
+    width: ${l.sp3};
+  }
+  :hover {
+    color: ${(e) => e.theme.colors.primary};
+    .arrowIcon {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, M = (e, o) => `${e}.${o}`, ie = {
+  largeLabelWidth: new b(125, 140, 160),
+  paddingBottom: new b(u[3], u[2]),
+  toolTipWidth: new b(246, 250)
+}, c = q.getLocalizedStrings().peoplePage, Te = ({
+  user: e,
+  sectionId: o,
+  mode: r,
+  isZeniTenant: s,
+  managersList: i,
+  classList: x,
+  controllersList: j,
+  index: m,
+  customerRoleOptions: $,
+  isEdit: A,
+  isBankingOnlyTenant: v,
+  isCardsOnlyTenant: w
+}) => {
+  const P = E(), {
+    getValues: I,
+    formState: { errors: D },
+    setValue: W
+  } = Q(), S = ie.largeLabelWidth.value(P), [L, ..._] = j, g = _.map((d) => d.email).join(","), a = ue(() => J.roles.filter(
+    (d) => !["admin", "bookkeeping_admin"].includes(d.value)
+  ), []), n = G(e.role);
+  return ge(() => {
+    (n || v || w) && W(`userItems.${m}.department`, {
+      allOptions: [],
+      selectedOption: void 0
+    }), n && W(`userItems.${m}.manager`, {
+      allUsers: [],
+      selectedUser: void 0
+    });
+  }, [n, v, w]), /* @__PURE__ */ t.jsxs(
+    Ze,
+    {
+      windowSize: P,
+      "data-testid": z("invite-people-user-item-section"),
+      children: [
+        /* @__PURE__ */ t.jsx(
+          he,
+          {
+            label: c.invitePage.email,
+            name: M(o, "email"),
+            registerOptions: {
+              required: !0,
+              value: e.email,
+              validate: {
+                duplicate: (d) => !_e(d, I("userItems"), m),
+                notZeniMail: (d) => r === "zeni_only" ? !0 : s || d.map((y) => !y.match(Ie)).reduce((y, R) => y && R)
+              }
+            },
+            placeholder: U(
+              c.addPlaceholderPrefix,
+              c.invitePage.email
+            ),
+            style: {
+              paddingTop: l.sp2,
+              paddingBottom: l.sp2
+            },
+            additionalInfoLabel: He(
+              I("userItems"),
+              M(o, "email"),
+              m,
+              r,
+              D
+            )
+          }
+        ),
+        /* @__PURE__ */ t.jsx(B, {}),
+        r === "off" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            fe,
+            {
+              label: { label: c.invitePage.role, width: S },
+              style: { width: "auto" },
+              rolesDropDownField: {
+                name: M(o, "nonZeniRole"),
+                defaultValue: {
+                  userRole: {
+                    selectedRole: se(e.role),
+                    allRootRole: X(
+                      v,
+                      w
+                    )
+                  },
+                  productsByUserRole: K(
+                    e.role,
+                    $
+                  )
+                },
+                registerOptions: { required: !0 }
+              }
+            }
+          ),
+          /* @__PURE__ */ t.jsx(B, {}),
+          /* @__PURE__ */ t.jsx(
+            ve,
+            {
+              label: {
+                label: c.invitePage.manager,
+                width: S
+              },
+              showTooltip: !0,
+              toolTipWidth: ie.toolTipWidth.valuePx(P),
+              tooltipTitle: /* @__PURE__ */ t.jsx(Ee, {}),
+              userSingleSelectWithSubTitlesField: {
+                name: M(o, "manager"),
+                value: {
+                  allUsers: i,
+                  selectedUser: e.managerId
+                },
+                valueToSubtitle: (d) => {
+                  const y = i.findIndex(
+                    (R) => R.userId === d
+                  );
+                  if (y !== -1) {
+                    const R = i[y], F = x.find(
+                      (N) => N.classId === R.userRole.accountingClassIDs[0]
+                    ), f = [];
+                    return F != null && f.push(F.className), f;
+                  } else
+                    return [];
+                },
+                placeholderLabel: n ? c.notApplicable : U(
+                  c.selectPlaceholderPrefix,
+                  c.invitePage.manager
+                ),
+                registerOptions: {
+                  required: !n
+                },
+                isDisabled: n ? "disabled" : void 0,
+                showOneOffLabel: {
+                  label: "No Manager",
+                  value: "no_manager",
+                  position: "top",
+                  subtitles: []
+                }
+              },
+              style: {
+                width: "auto",
+                height: e.managerId == null ? l.sp8 : "74px",
+                boxSizing: "border-box"
+              },
+              isDisabled: n ? "disabled" : void 0,
+              opacity: n ? 0.32 : 1
+            }
+          ),
+          /* @__PURE__ */ t.jsx(B, {}),
+          /* @__PURE__ */ t.jsx(
+            xe,
+            {
+              label: {
+                label: c.invitePage.department,
+                width: S
+              },
+              singleSelectWithoutClearableField: {
+                name: M(o, "department"),
+                defaultValue: {
+                  allOptions: x.map((d) => ({
+                    label: d.fullyQualifiedAccountingClassName ?? "",
+                    value: d.classId,
+                    hoverText: d.accountingClassNumber
+                  })),
+                  selectedOption: x.map((d) => ({
+                    label: d.fullyQualifiedAccountingClassName ?? "",
+                    value: d.classId,
+                    hoverText: d.accountingClassNumber
+                  })).find((d) => d.value === e.departmentId)
+                },
+                placeholder: n || v || w ? c.notApplicable : U(
+                  c.selectPlaceholderPrefix,
+                  c.invitePage.department
+                ),
+                registerOptions: {
+                  required: !n || !(v || w)
+                },
+                isDisabled: n || v || w ? "disabled" : void 0,
+                showOptionOnHover: !0
+              },
+              style: { width: "auto" },
+              isDisabled: n || v || w ? "disabled" : void 0,
+              opacity: n || v || w ? 0.32 : 1
+            }
+          ),
+          /* @__PURE__ */ t.jsx(B, {}),
+          A ? null : /* @__PURE__ */ t.jsxs(qe, { windowSize: P, isDisabled: n, children: [
+            c.invitePage.controllerText,
+            L ? /* @__PURE__ */ t.jsx(
+              Oe,
+              {
+                firstController: [L],
+                isInvestorBanker: n,
+                restControllerEmailsStr: g
+              }
+            ) : null
+          ] })
+        ] }) : /* @__PURE__ */ t.jsx(
+          be,
+          {
+            label: {
+              label: c.invitePage.role,
+              width: S
+            },
+            zeniRolesDropDownField: {
+              defaultValue: {
+                allOptions: a,
+                selectedOptions: e.role
+              },
+              name: M(o, "role"),
+              placeholderLabel: U(
+                c.selectPlaceholderPrefix,
+                c.invitePage.role
+              ),
+              registerOptions: { required: r === "zeni_only" },
+              isMulti: !1,
+              forZeniUser: !1
+            },
+            style: { width: "auto" }
+          }
+        )
+      ]
+    }
+  );
+}, Ee = () => q.getLocalizedStrings().peoplePage.invitePage.managerTooltipText, _e = (e, o, r) => {
+  const s = o.filter((i) => i.userIndex !== r).map((i) => i.email).flat();
+  return s.length > 0 && e.every((i) => s.includes(i));
+}, Ze = p.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${l.sp0} 2px ${l.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${l.sp2};
+  margin-bottom: ${l.sp3};
+  .single-select-field__menu {
+    border: ${(e) => e.windowSize === "small" ? `1px solid ${e.theme.colors.grey3}` : "unset"};
+  }
+`, B = p.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, qe = p(ne)`
+  padding: ${(e) => `${l.sp1}  ${e.windowSize === "small" ? l.sp3 : l.sp4}`};
+  background: ${(e) => e.theme.colors.grey4};
+  border-radius: ${l.sp0} ${l.sp0} ${l.sp2} ${l.sp2};
+  text-align: left;
+  color: ${(e) => e.theme.colors.grey1};
+  display: flex;
+  flex-direction: ${(e) => e.windowSize === "small" ? "column" : "row"};
+  align-items: ${(e) => e.windowSize === "small" ? "flex-start" : "center"};
+  gap: ${(e) => e.windowSize === "small" ? l.sp0 : "6px"};
+  opacity: ${(e) => e.isDisabled ? 0.32 : 1};
+`, Be = p.a`
+  color: ${(e) => e.theme.colors.hero};
+  text-decoration: none;
+  cursor: ${(e) => e.isDisabled ? "unset" : "pointer"};
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  .arrowIcon {
+    cursor: pointer;
+    height: ${l.sp2};
+    width: ${l.sp2};
+  }
+  :hover {
+    color: ${(e) => e.isDisabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+    .arrowIcon {
+      color: ${(e) => e.isDisabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+    }
+  }
+`, He = (e, o, r, s, i) => {
+  if (ye(i, o) && i?.userItems && i?.userItems[r]?.email)
+    switch (i?.userItems[r]?.email.type) {
+      case "required":
+        return c.invitePage.defaultHelpText;
+      case "pattern":
+        return e[r].email.forEach((m) => {
+          if (!De.test(m))
+            return c.invitePage.defaultHelpText;
+        }), s === "zeni_only" ? c.invitePage.otherThanZeniMailIDForZeniModeText : c.invitePage.zeniMailIDForNormalModeText;
+      case "duplicate":
+        return c.invitePage.emailAlreadyExist;
+      case "notZeniMail":
+        return c.invitePage.zeniMailIDForNormalModeText;
+      case "validate":
+        return c.invitePage.defaultHelpText;
+      default:
+        return;
+    }
+}, Oe = ({
+  isInvestorBanker: e,
+  firstController: o,
+  restControllerEmailsStr: r
+}) => {
+  let s = "";
+  const i = o[0];
+  return i?.firstName && i?.lastName ? s = `${i?.firstName} ${i?.lastName}` : i?.firstName ? s = i?.firstName : i?.lastName ? s = i?.lastName : s = i?.email ?? "", /* @__PURE__ */ t.jsxs(
+    Be,
+    {
+      isDisabled: e,
+      href: e ? void 0 : `mailto:${o[0]?.email}?cc=${r}&subject=${encodeURIComponent(
+        c.invitePage.emailSubject
+      )}`,
+      children: [
+        /* @__PURE__ */ t.jsx("span", { children: s }),
+        /* @__PURE__ */ t.jsx(ae, { className: "arrowIcon" })
+      ]
+    }
+  );
+}, Ve = (e) => /* @__PURE__ */ t.jsx(
+  ke,
+  {
+    style: e.style,
+    "data-testid": z("user-item-section"),
+    children: e.isEdit ? /* @__PURE__ */ t.jsx(We, { ...e }) : /* @__PURE__ */ t.jsx(Te, { ...e })
+  }
+), ke = p.div`
+  display: flex;
+  flex-direction: column;
+`, T = {
+  paddingBottom: new b(u[3], u[2]),
+  buttonWidth: new b(70, 70),
+  marginBottom: new b(12, u[3]),
+  marginRight: new b(u[2], u[3]),
+  deleteContentMarginLeft: new b(u[0], u[3]),
+  sectionHeaderTitlePaddingTop: new b(u[2], u[2]),
+  containerPaddingTop: new b(u[0], u[3]),
+  addUserWrapperGap: new b(u[1], u[2])
+}, Qe = (e, o, r, s, i, x, j) => ({
+  userIndex: e,
+  email: [],
+  role: s === "zeni_only" ? { allOptions: J.roles, selectedOptions: [] } : void 0,
+  nonZeniRole: s !== "zeni_only" ? {
+    userRole: {
+      selectedRole: void 0,
+      allRootRole: X(
+        x,
+        j
+      )
+    },
+    productsByUserRole: K(
+      [],
+      i
+    )
+  } : void 0,
+  manager: {
+    allUsers: o,
+    selectedUser: void 0
+  },
+  department: {
+    allOptions: r.map((m) => ({
+      label: m.className,
+      value: m.classId
+    })),
+    selectedOption: void 0
+  }
+}), C = q.getLocalizedStrings().peoplePage, ft = ({
+  isDisabled: e,
+  control: o,
+  deleteConfirmationIndex: r,
+  updateDeleteConfirmationIndex: s,
+  style: i,
+  sectionId: x,
+  mode: j,
+  isZeniTenant: m,
+  managersList: $,
+  classList: A,
+  controllersList: v,
+  customerRoleOptions: w,
+  isBankingOnlyTenant: P,
+  isCardsOnlyTenant: I,
+  isEdit: D = !1,
+  person: W,
+  analytics: S
+}) => {
+  const { getValues: L } = Q(), { append: _, remove: g } = Re({
+    name: x,
+    control: o
+  }), a = E(), n = L().userItems, d = () => {
+    const f = n.length - 1, N = Qe(
+      f + 1,
+      $,
+      A,
+      j,
+      w,
+      P,
+      I
+    );
+    setTimeout(() => _(N, { shouldFocus: !0 }));
+  }, y = (f) => {
+    s(f);
+  }, R = () => {
+    s(-1);
+  }, F = () => {
+    setTimeout(() => g(r)), s(-1);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    Xe,
+    {
+      style: i,
+      windowSize: a,
+      "data-testid": z("user-items"),
+      children: [
+        n.length > 0 ? n.map((f, N) => {
+          const Se = n.length;
+          let H = {};
+          if (j === "zeni_only")
+            H = {
+              email: f.email,
+              role: Ke(
+                f.role.selectedOptions,
+                D
+              ) ?? void 0
+            };
+          else {
+            const Y = f.nonZeniRole?.userRole.selectedRole, O = Y != null ? (f.nonZeniRole?.productsByUserRole[Y] ?? []).map(
+              (V) => ze(
+                V.selectedOption?.value
+              )
+            ).filter(
+              (V) => V != null
+            ) : [], ee = O.length > 0 ? G(O) : !1;
+            H = {
+              email: f.email,
+              role: O,
+              managerId: ee ? void 0 : f.manager?.selectedUser,
+              departmentId: ee ? void 0 : f.department?.selectedOption?.value
+            };
+          }
+          return /* @__PURE__ */ t.jsxs(
+            Ye,
+            {
+              "data-testid": z(
+                "user-item",
+                f.userIndex.toString()
+              ),
+              children: [
+                D ? null : /* @__PURE__ */ t.jsx(t.Fragment, { children: Se > 1 ? /* @__PURE__ */ t.jsx(re, { windowSize: a, children: /* @__PURE__ */ t.jsx(
+                  Ge,
+                  {
+                    curIndex: N,
+                    isDisabled: e,
+                    deleteConfirmationIndex: r,
+                    onDeleteClick: y,
+                    onCancelClick: R,
+                    onRemoveUserItem: F
+                  }
+                ) }) : /* @__PURE__ */ t.jsx(re, { windowSize: a, children: /* @__PURE__ */ t.jsx(we, { children: /* @__PURE__ */ t.jsx(Pe, { children: /* @__PURE__ */ t.jsx(je, { windowSize: a, children: C.invitePage.user }) }) }) }) }),
+                /* @__PURE__ */ t.jsx(
+                  Ve,
+                  {
+                    isDisabled: e,
+                    sectionId: `${x}.${N}`,
+                    control: o,
+                    user: H,
+                    mode: j,
+                    isZeniTenant: m,
+                    managersList: $,
+                    classList: A,
+                    controllersList: v,
+                    customerRoleOptions: w,
+                    isBankingOnlyTenant: P,
+                    isCardsOnlyTenant: I,
+                    isEdit: D,
+                    person: W,
+                    analytics: S,
+                    index: N
+                  }
+                ),
+                r === N && a === "small" ? /* @__PURE__ */ t.jsx(lt, { children: /* @__PURE__ */ t.jsx(
+                  $e,
+                  {
+                    onCancelClick: R,
+                    onRemoveUserItem: F
+                  }
+                ) }) : null
+              ]
+            },
+            N
+          );
+        }) : null,
+        D ? null : /* @__PURE__ */ t.jsxs(
+          st,
+          {
+            "data-testid": z("all-user-items-add-user-button"),
+            windowSize: a,
+            onClick: () => {
+              d?.();
+            },
+            children: [
+              /* @__PURE__ */ t.jsx(at, {}),
+              /* @__PURE__ */ t.jsx(nt, { children: `${C.invitePage.add} ${C.invitePage.user}` })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}, Ge = ({
+  curIndex: e,
+  deleteConfirmationIndex: o,
+  onDeleteClick: r,
+  onCancelClick: s,
+  onRemoveUserItem: i,
+  isDisabled: x
+}) => {
+  const j = E();
+  return /* @__PURE__ */ t.jsxs(we, { children: [
+    /* @__PURE__ */ t.jsx(Pe, { children: /* @__PURE__ */ t.jsx(je, { windowSize: j, children: `#${e + 1} ${C.invitePage.user}` }) }),
+    x === void 0 ? /* @__PURE__ */ t.jsx(
+      Je,
+      {
+        curIndex: e,
+        deleteConfirmationIndex: o,
+        onDeleteClick: r,
+        onCancelClick: s,
+        onRemoveUserItem: i
+      }
+    ) : null
+  ] });
+}, Je = ({
+  curIndex: e,
+  deleteConfirmationIndex: o,
+  onDeleteClick: r,
+  onCancelClick: s,
+  onRemoveUserItem: i
+}) => {
+  const x = E();
+  return /* @__PURE__ */ t.jsx(t.Fragment, { children: x === "small" ? /* @__PURE__ */ t.jsx(t.Fragment, { children: o !== e ? /* @__PURE__ */ t.jsx(
+    rt,
+    {
+      "data-testid": z(
+        "delete-icon",
+        e.toString()
+      ),
+      onClick: () => r(e)
+    }
+  ) : null }) : /* @__PURE__ */ t.jsx(t.Fragment, { children: o === e ? /* @__PURE__ */ t.jsx(tt, { children: /* @__PURE__ */ t.jsx(
+    $e,
+    {
+      onCancelClick: s,
+      onRemoveUserItem: i
+    }
+  ) }) : /* @__PURE__ */ t.jsx(
+    et,
+    {
+      "data-testid": z(
+        "all-user-items-delete-icon-wrapper"
+      ),
+      className: "delete-icon-wrapper",
+      onClick: () => r(e),
+      children: /* @__PURE__ */ t.jsx(
+        Ce,
+        {
+          style: { padding: "2px 5px" },
+          enterDelay: 600,
+          title: C.invitePage.remove,
+          placement: "left",
+          children: /* @__PURE__ */ t.jsx(it, {})
+        }
+      )
+    }
+  ) }) });
+}, $e = ({
+  onCancelClick: e,
+  onRemoveUserItem: o
+}) => {
+  const r = E();
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    C.invitePage.deleteConfirmation,
+    /* @__PURE__ */ t.jsxs(
+      ot,
+      {
+        windowSize: r,
+        "data-testid": z("delete-confirmation-wrapper"),
+        children: [
+          /* @__PURE__ */ t.jsx(
+            le,
+            {
+              "data-testid": z("delete-confirmation-cancel-button"),
+              label: C.invitePage.cancel,
+              onClick: e,
+              style: {
+                width: T.buttonWidth.value(r),
+                marginRight: l.sp3
+              },
+              size: "small",
+              variant: "secondary"
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            le,
+            {
+              "data-testid": z("delete-confirmation-remove-button"),
+              label: C.invitePage.remove,
+              onClick: o,
+              style: { width: T.buttonWidth.value(r) },
+              size: "small",
+              variant: "danger"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, Ke = (e, o) => o ? e : e != null ? [e] : [], Xe = p.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${(e) => T.containerPaddingTop.valuePx(e.windowSize)};
+`, Ye = p.div`
+  .delete-icon-wrapper {
+    visibility: hidden;
+  }
+  &:hover {
+    .delete-icon-wrapper {
+      visibility: visible;
+    }
+  }
+`, we = p(de)`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  color: ${(e) => e.theme.colors.champion};
+  margin-top: ${l.sp3};
+  height: ${l.sp5};
+`, je = p(de)`
+  color: ${(e) => e.theme.colors.primary};
+`, Pe = p.div`
+  display: flex;
+  align-items: center;
+`, et = p.div`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  cursor: pointer;
+  position: relative;
+`, tt = p(ce)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  align-items: center;
+`, lt = p.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: ${l.sp0} ${l.sp0} ${l.sp7};
+  gap: ${l.sp2};
+`, ot = p.div`
+  display: flex;
+  margin-left: ${(e) => T.deleteContentMarginLeft.valuePx(e.windowSize)};
+`, re = p.div`
+  display: flex;
+  margin-bottom: ${(e) => T.marginBottom.valuePx(e.windowSize)};
+`, it = p(me)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${pe.important};
+  }
+`, rt = p(me)`
+  width: ${l.sp3};
+  height: ${l.sp3};
+  cursor: pointer;
+  color: ${pe.important};
+`, st = p(ce)`
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  padding: ${l.sp3} ${l.sp4};
+  gap: ${(e) => T.addUserWrapperGap.valuePx(e.windowSize)};
+
+  width: auto;
+  height: ${l.sp8};
+
+  border: 1px solid ${(e) => e.theme.colors.hero};
+  border-radius: ${l.sp2};
+  color: ${(e) => e.theme.colors.grey1};
+  box-sizing: border-box;
+  &:hover {
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    div {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    color: ${(e) => e.theme.colors.primary};
+    border-color: ${(e) => e.theme.colors.primary};
+  }
+  margin-top: ${l.sp3};
+  margin-bottom: ${l.sp9};
+`, at = p(Ne)`
+  width: ${l.sp4};
+  height: ${l.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, nt = p(Ue)`
+  color: ${(e) => e.theme.colors.hero};
+`;
+export {
+  ft as A
+};