@zeniai/web-components 3.16.96 → 3.16.97

package/dist/LabeledZeniRolesDropDownField-Docjgj8Y.js

@@ -0,0 +1,975 @@
+import { u as X, j as r, d as F, m as q, i as le, e as K, S as ne, c as L } from "./vendor-.pnpm-B2klaOGU.js";
+import { css as ie } from "@emotion/react";
+import d from "@emotion/styled";
+import { u as I, e as A, B as se, S as o, R as h, D as l, i7 as ae, ic as de, at as ce, C as T, id as N, _ as Q, F as Y, E as pe, hW as ue, hV as he, eP as me, hX as ge, eG as be, ie as xe, aB as Z, t as D, a as fe, n as ye, p as we, ab as ve, o as $e } from "./index-C65jHl_B.js";
+import { useCallback as Re, useMemo as Se, useEffect as V, useState as je, createElement as Ce } from "react";
+import { toUserRoleTypeStrict as Te, isNonZeniRole as U } from "@zeniai/client-epic-state";
+import { R as ke } from "./RoleWithToolTip-DSSGBzvw.js";
+const H = {
+  grpBtnMarginTopBottom: new h(l[1], l[3]),
+  grpBtnMarginLeftRight: new h(l[0], l[3])
+}, Be = d.div`
+  display: flex;
+  margin-top: ${(e) => H.grpBtnMarginTopBottom.valuePx(e.windowSize)};
+  margin-bottom: ${(e) => H.grpBtnMarginTopBottom.valuePx(e.windowSize)};
+  margin-left: ${(e) => H.grpBtnMarginLeftRight.valuePx(e.windowSize)};
+  cursor: pointer;
+  height: 29px;
+  &:hover {
+    .verticalLine {
+      border-left: 1px solid
+        ${(e) => e.isDisabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+    }
+  }
+`, ze = d.div`
+  display: flex;
+  flex-direction: row;
+  &:hover {
+    .verticalLine {
+      border-left: 1px solid
+        ${(e) => e.isDisabled ? e.theme.colors.grey1 : e.theme.colors.primary};
+    }
+  }
+`, Pe = d.div`
+  border-left: 1px solid ${(e) => e.theme.colors.grey1};
+`, W = ({
+  allBtnOptions: e,
+  isDisabled: s,
+  selectedOption: n,
+  buttonClickHandler: c
+}) => {
+  const p = I(), a = X(), f = (u) => n?.value === u.value ? "primary" : "secondary", $ = (u) => n?.value === u.value ? {
+    backgroundColor: {
+      default: a.colors.primary,
+      hover: a.colors.primary,
+      disabled: a.colors.primary
+    },
+    textColor: {
+      default: a.colors.grey5,
+      hover: a.colors.grey5,
+      disabled: a.colors.hero
+    },
+    borderColor: {
+      default: a.colors.primary,
+      hover: a.colors.primary,
+      disabled: a.colors.grey3
+    }
+  } : {
+    backgroundColor: {
+      default: "transparent",
+      hover: a.colors.grey4,
+      disabled: "transparent"
+    },
+    textColor: {
+      default: a.colors.primary,
+      hover: a.colors.primary,
+      disabled: a.colors.hero
+    },
+    borderColor: {
+      default: a.colors.grey1,
+      hover: a.colors.primary,
+      disabled: a.colors.grey3
+    }
+  }, b = e.length, y = s === "disabled" || s === "readonly";
+  return /* @__PURE__ */ r.jsx(Be, { windowSize: p, isDisabled: y, children: e.map((u, x) => /* @__PURE__ */ r.jsxs(
+    ze,
+    {
+      "data-testid": A(
+        "grouped-button-container",
+        u.value
+      ),
+      className: "grpBtn",
+      isDisabled: y || !u.enabled,
+      children: [
+        /* @__PURE__ */ r.jsx(
+          se,
+          {
+            label: u.label,
+            size: "small",
+            variant: f(u),
+            "data-testid": A("grouped-button", u.value),
+            onClick: () => c(u.value),
+            buttonColors: $(u),
+            disabled: y || !u.enabled,
+            style: {
+              borderTopRightRadius: x === b - 1 ? o.sp1 : o.sp0,
+              borderBottomRightRadius: x === b - 1 ? o.sp1 : o.sp0,
+              borderTopLeftRadius: x === 0 ? o.sp1 : o.sp0,
+              borderBottomLeftRadius: x === 0 ? o.sp1 : o.sp0,
+              borderRight: x === b - 1 ? "" : "none",
+              borderLeft: x === 0 ? "" : "none",
+              width: "65px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            }
+          }
+        ),
+        x !== b - 1 ? /* @__PURE__ */ r.jsx(Pe, { className: "verticalLine" }) : null
+      ]
+    },
+    u.value
+  )) });
+}, E = {
+  allRolesMarginLeftRight: new h(l[3], l[4])
+}, Le = d.div`
+  display: flex;
+  flex-direction: column;
+  color: ${(e) => e.theme.colors.hero};
+  margin-right: ${(e) => E.allRolesMarginLeftRight.valuePx(e.windowSize)};
+  margin-left: ${(e) => E.allRolesMarginLeftRight.valuePx(e.windowSize)};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Ie = d.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`, Oe = d.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: ${o.sp4};
+  overflow: hidden;
+  height: auto;
+  max-height: ${(e) => e.isCollapsed ? "850px" : o.sp0};
+  visibility: ${(e) => e.isCollapsed ? "visible" : "hidden"};
+  transition:
+    visibility 250ms ease-in-out,
+    max-height 250ms ease-in-out;
+`, De = d.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: ${o.sp3};
+  justify-content: space-between;
+`, Ee = d(Q)`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+`, G = d(Y)`
+  display: flex;
+  color: ${(e) => e.theme.colors.hero};
+`, Fe = d.div`
+  display: flex;
+  .roleTitle {
+    color: ${(e) => e.isError ? T.important : e.theme.colors.hero};
+  }
+  .roleSubTitle {
+    color: ${(e) => e.theme.colors.hero};
+  }
+  .roleSuitableFor {
+    color: ${(e) => e.theme.colors.grey1};
+    border-color: ${(e) => e.theme.colors.grey2};
+  }
+  &:hover {
+    input {
+      border-color: ${(e) => e.theme.colors.primary};
+    }
+    .roleTitle {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    .roleSubTitle {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    .roleSuitableFor {
+      color: ${(e) => e.theme.colors.primary};
+      border-color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, Me = d.div`
+  display: flex;
+  flex-direction: column;
+`, _e = d(Q)`
+  display: flex;
+`, Ne = d(Y)`
+  display: flex;
+  margin-bottom: ${o.sp1};
+`, He = d(pe)`
+  display: flex;
+  padding: 1px 6px 1px 6px;
+  border: 1px solid;
+  border-radius: ${o.sp1};
+  width: fit-content;
+`, Ae = d.div`
+  display: flex;
+  flex-direction: row;
+`, Ve = d.div``, Ue = d.div`
+  display: flex;
+  flex-direction: column;
+  padding-left: ${o.sp3};
+`, We = d(xe)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, Ge = d(be)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, Je = d(ge)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, Xe = d(me)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, qe = d(he)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, Ke = d(ue)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  color: ${(e) => e.theme.colors.hero};
+`, Qe = d.div`
+  display: flex;
+  flex-direction: column;
+  margin-right: ${(e) => E.allRolesMarginLeftRight.valuePx(e.windowSize)};
+  margin-left: ${(e) => E.allRolesMarginLeftRight.valuePx(e.windowSize)};
+  color: ${(e) => e.theme.mode === "light" ? T.brandColorOnyx : T.brandColorPearl};
+`, Ye = (e) => {
+  switch (e) {
+    case "bookkeeping":
+      return /* @__PURE__ */ r.jsx(We, {});
+    case "zeni_bill_pay":
+      return /* @__PURE__ */ r.jsx(Ge, {});
+    case "zeni_reimbursements":
+      return /* @__PURE__ */ r.jsx(Je, {});
+    case "zeni_checking":
+      return /* @__PURE__ */ r.jsx(Xe, {});
+    case "zeni_cards":
+      return /* @__PURE__ */ r.jsx(qe, {});
+    case "zeni_treasury":
+      return /* @__PURE__ */ r.jsx(Ke, {});
+    default:
+      return null;
+  }
+}, Ze = (e) => /* @__PURE__ */ r.jsxs(Me, { children: [
+  /* @__PURE__ */ r.jsx(_e, { className: "roleTitle", children: N[e].label }),
+  /* @__PURE__ */ r.jsx(Ne, { className: "roleSubTitle", children: N[e].subTitle }),
+  /* @__PURE__ */ r.jsx(He, { className: "roleSuitableFor", children: N[e].roleSuitableFor })
+] }), eo = ({
+  name: e,
+  isDisabled: s,
+  selectedValue: n,
+  onSelectionChanged: c
+}) => {
+  const {
+    formState: { errors: p }
+  } = F(), a = q(p, `${e}.userRole.selectedRole`), f = I(), $ = n.productsByUserRole.employee.findIndex(
+    (m) => m.productType === "zeni_reimbursements"
+  ), b = Re(
+    (m) => {
+      const i = ae([m]), C = de(m), v = le(
+        n.productsByUserRole[i]
+      ), R = v.findIndex(
+        (B) => B.productType === C
+      ), O = v[R].selectedOption?.value === m;
+      R > -1 && (v[R] = {
+        ...v[R],
+        selectedOption: O ? void 0 : v[R].options.filter(
+          (B) => B.value === m
+        )[0]
+      });
+      const M = {
+        userRole: {
+          selectedRole: i,
+          allRootRole: n.userRole.allRootRole
+        },
+        productsByUserRole: {
+          ...n.productsByUserRole,
+          [i]: [...v]
+        }
+      };
+      c(M);
+    },
+    [c, n]
+  ), y = n.userRole.selectedRole, u = Se(() => y != null ? (n.productsByUserRole[y] ?? []).map(
+    (m) => Te(m.selectedOption?.value)
+  ).filter(
+    (m) => m != null
+  ) : [], [y, n.productsByUserRole]);
+  V(() => {
+    y === "employee" && u.length === 0 && $ > -1 && b("reimbursements_user");
+  }, [y, u, $, b]);
+  const x = n.userRole.allRootRole, k = (m) => m === "employee" && n.userRole.selectedRole === "employee";
+  return s === "readonly" ? /* @__PURE__ */ r.jsx(Qe, { windowSize: f, children: /* @__PURE__ */ r.jsx(ke, { roles: u }) }) : /* @__PURE__ */ r.jsx(Ie, { children: x.map((m) => /* @__PURE__ */ r.jsxs(Le, { windowSize: f, children: [
+    /* @__PURE__ */ r.jsx(Fe, { isError: a, children: /* @__PURE__ */ r.jsx(
+      ce,
+      {
+        isDisabled: s,
+        label: {
+          label: Ze(m)
+        },
+        style: { paddingBottom: o.sp4, alignItems: "flex-start" },
+        radioField: {
+          name: `${e}.userRole.selectedRole`,
+          id: `${e}.${m}`,
+          value: m,
+          radioSize: "small",
+          checked: n.userRole.selectedRole === m,
+          style: {
+            marginTop: o.sp1
+          }
+        }
+      }
+    ) }),
+    /* @__PURE__ */ r.jsx(
+      Oe,
+      {
+        windowSize: f,
+        isCollapsed: k(m),
+        roleCount: n.productsByUserRole[m].length,
+        children: n.productsByUserRole[m].map(
+          (i) => /* @__PURE__ */ r.jsxs(De, { children: [
+            /* @__PURE__ */ r.jsxs(Ae, { children: [
+              /* @__PURE__ */ r.jsx(Ve, { children: i.productType && Ye(i.productType) }),
+              /* @__PURE__ */ r.jsxs(Ue, { children: [
+                /* @__PURE__ */ r.jsx(Ee, { children: i.label }),
+                f === "small" ? /* @__PURE__ */ r.jsx(
+                  W,
+                  {
+                    allBtnOptions: i.options,
+                    selectedOption: i.selectedOption,
+                    buttonClickHandler: b
+                  }
+                ) : null,
+                /* @__PURE__ */ r.jsx(G, { children: i.subTitleUser }),
+                /* @__PURE__ */ r.jsx(G, { children: i.subTitleAdmin })
+              ] })
+            ] }),
+            f !== "small" ? /* @__PURE__ */ r.jsx(
+              W,
+              {
+                allBtnOptions: i.options,
+                selectedOption: i.selectedOption,
+                buttonClickHandler: b,
+                isDisabled: s
+              }
+            ) : null
+          ] }, i.productType)
+        )
+      }
+    )
+  ] }, m)) });
+}, oo = ({
+  name: e,
+  defaultValue: s,
+  isDisabled: n,
+  registerOptions: c
+}) => {
+  const { control: p } = F();
+  return /* @__PURE__ */ r.jsx(
+    K,
+    {
+      name: e,
+      control: p,
+      defaultValue: s,
+      rules: c,
+      render: ({ field: { onChange: a, value: f } }) => {
+        const $ = f;
+        return /* @__PURE__ */ r.jsx(
+          eo,
+          {
+            onSelectionChanged: (b) => {
+              a(b);
+            },
+            selectedValue: $,
+            name: e,
+            isDisabled: n
+          }
+        );
+      }
+    }
+  );
+}, j = {
+  width: new h(343, 580, 726),
+  height: new h(l[6], l[6]),
+  controlHeight: new h(l[6], l[6]),
+  paddingTopBottom: new h(l[2], l[2]),
+  marginTop: new h(l[2], l[2]),
+  marginBottom: new h(l[2], l[2]),
+  marginRight: new h(l[2], l[2]),
+  labelPaddingLeft: new h(l[3], l[4]),
+  labelPaddingRight: new h(l[3], l[4]),
+  labelPaddingTop: new h(l[2], l[2]),
+  labelPaddingBottom: new h(l[2], l[3])
+};
+function jo({
+  isDisabled: e,
+  label: s,
+  rolesDropDownField: n,
+  style: c
+}) {
+  const p = I();
+  return /* @__PURE__ */ r.jsxs(ro, { size: p, style: c, isDisabled: e != null, children: [
+    /* @__PURE__ */ r.jsx(
+      Z,
+      {
+        isDisabled: e,
+        label: s.label,
+        htmlFor: n.name,
+        style: {
+          paddingLeft: j.labelPaddingLeft.value(p),
+          paddingRight: j.labelPaddingRight.value(p),
+          paddingTop: j.labelPaddingTop.value(p),
+          paddingBottom: j.labelPaddingBottom.value(p)
+        }
+      }
+    ),
+    /* @__PURE__ */ r.jsx(oo, { ...n, isDisabled: e })
+  ] });
+}
+const ro = d.div`
+  display: flex;
+  flex-direction: ${(e) => e.isDisabled ? "row" : "column"};
+  align-items: ${(e) => e.isDisabled ? "center" : "flex-start"};
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => j.width.valuePx(e.size)};
+  min-height: ${(e) => j.height.valuePx(e.size)};
+  padding-top: ${(e) => j.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => j.paddingTopBottom.valuePx(e.size)};
+  ${(e) => e.isDisabled ? ie`
+          justify-content: space-between;
+        ` : null}
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .select-control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+  &:hover {
+    z-index: 1;
+    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
+    .roles-count-wrapper {
+      border-color: inherit;
+    }
+  }
+`;
+function to({
+  onSelectionChanged: e,
+  forZeniUser: s,
+  selectedRoles: n,
+  allRoles: c,
+  disable: p = !1,
+  isMulti: a = !1,
+  clearSelectedRole: f,
+  style: $,
+  name: b,
+  isValuePlacedAtEnd: y = !0
+}) {
+  const [u, x] = je(), {
+    formState: { errors: k }
+  } = F(), m = q(k, b ?? "");
+  V(() => {
+    const t = c.filter(
+      (g) => n != null && n.includes(g.value)
+    );
+    x(a ? t : t[0]);
+  }, [n]), V(() => {
+    f === !0 && a === !1 && x(void 0);
+  }, [f]);
+  const i = X(), C = I(), v = JSON.parse(JSON.stringify(c));
+  if (n != null && s) {
+    if (!n.includes("admin")) {
+      const t = v.findIndex((g) => g.value === "admin");
+      v.splice(t, 1);
+    }
+    if (!n.includes("bookkeeping_admin")) {
+      const t = v.findIndex(
+        (g) => g.value === "bookkeeping_admin"
+      );
+      v.splice(t, 1);
+    }
+  }
+  const R = i.colors.grey5, O = D.smallRegular.cssObject, M = O, B = u?.length > 3, ee = {
+    control: (t) => ({
+      ...t,
+      backgroundColor: "inherit",
+      boxShadow: R,
+      border: "none",
+      cursor: "pointer",
+      ":hover": {
+        backgroundColor: "inherit"
+      },
+      flexWrap: "nowrap",
+      marginTop: "unset"
+    }),
+    container: (t) => ({
+      ...t,
+      fill: i.colors.hero,
+      ":hover": {
+        fill: i.colors.primary
+      },
+      width: "100%",
+      ...$
+    }),
+    valueContainer: (t) => ({
+      ...t,
+      flexWrap: B ? "wrap" : "nowrap",
+      width: C === "small" || !a ? "auto" : "263px",
+      paddingTop: "unset",
+      cursor: "pointer",
+      ...M,
+      overflow: "visible",
+      minWidth: "auto",
+      paddingLeft: o.sp0,
+      paddingRight: o.sp0,
+      display: "flex",
+      justifyContent: "flex-start",
+      fill: i.colors.hero,
+      ":hover": {
+        ">div>div": {
+          fill: i.colors.primary,
+          color: i.colors.primary
+        }
+      },
+      ">div:last-of-type": {
+        span: {
+          display: "none"
+        }
+      }
+    }),
+    singleValue: (t, g) => ({
+      ...t,
+      color: g.selectProps.menuIsOpen === !0 ? i.colors.primary : i.colors.hero,
+      maxWidth: "auto",
+      overflow: "auto",
+      ":hover": {
+        color: i.colors.primary
+      },
+      marginLeft: o.sp0,
+      position: "inherit",
+      transform: "none",
+      top: o.sp0,
+      marginRight: o.sp0,
+      padding: o.sp0,
+      ...D.standardRegular.cssObject
+    }),
+    multiValue: (t, g) => ({
+      ...t,
+      margin: 0,
+      minWidth: void 0,
+      backgroundColor: void 0,
+      color: g.selectProps.menuIsOpen === !0 ? i.colors.primary : i.colors.hero,
+      ":hover": {
+        color: i.colors.primary
+      },
+      ">div": {
+        borderRadius: o.sp0,
+        padding: o.sp0,
+        borderLeftStyle: "solid",
+        borderWidth: o.sp0,
+        borderColor: i.colors.grey1,
+        color: "unset"
+      }
+    }),
+    menu: (t) => ({
+      ...t,
+      backgroundColor: R,
+      boxShadow: `${o.sp0} 2px ${o.sp2} ${i.colors.dropShadowHover}`,
+      whiteSpace: "nowrap",
+      minWidth: "fit-content",
+      width: C === "small" ? "230px" : "100%",
+      right: C === "small" ? o.sp0 : "unset",
+      borderRadius: o.sp1,
+      margin: o.sp0,
+      border: C === "small" ? `1px solid ${i.colors.grey3}` : "unset"
+    }),
+    menuList: (t) => ({
+      ...t,
+      maxHeight: "240px"
+    }),
+    option: (t, { isSelected: g, isDisabled: P, data: z }) => {
+      const w = U(z.value) && s === !0, _ = J(
+        g,
+        w,
+        z.value,
+        i
+      );
+      return {
+        ...t,
+        height: w ? 44 : 40,
+        padding: w ? o.sp0 : `${o.sp2} 12px`,
+        marginTop: w ? o.sp1 : "unset",
+        whiteSpace: "unset",
+        display: "flex",
+        alignItems: "center",
+        opacity: 1,
+        ...O,
+        color: _,
+        cursor: P ? "not-allowed" : "pointer",
+        backgroundColor: g && !w ? i.colors.background : "transparent",
+        ">div": {
+          backgroundColor: g ? i.colors.background : "transparent"
+        },
+        borderTop: w || z.value === "delete" ? `1px solid ${i.colors.background}` : "none",
+        "& label": {
+          paddingRight: "10px"
+        },
+        "svg:nth-of-type(2)": {
+          display: "none"
+        },
+        ":hover": {
+          color: J(
+            !0,
+            w,
+            z.value,
+            i
+          ),
+          backgroundColor: g && !w ? i.colors.background : w ? "transparent" : i.colors.background,
+          ">div": {
+            backgroundColor: i.colors.background
+          },
+          "svg:nth-of-type(1)": {
+            display: w || s === !1 ? "inline-block" : "none"
+          },
+          "svg:nth-of-type(2)": {
+            display: w ? "none" : "inline-block"
+          }
+        },
+        ">div>div>div:first-of-type": {
+          display: "flex"
+        }
+      };
+    },
+    indicatorsContainer: (t) => ({
+      ...t,
+      alignItems: a ? "flex-start" : "center",
+      paddingTop: B || !a ? "unset" : "5px"
+    }),
+    indicatorSeparator: () => ({}),
+    dropdownIndicator: () => ({
+      paddingTop: a ? o.sp1 : "2px",
+      svg: {
+        marginLeft: a && u?.length > 0 ? "unset" : "6px"
+      }
+    })
+  }, oe = (t) => {
+    const { isSelected: g } = t;
+    return /* @__PURE__ */ Ce(L.Option, { ...t, key: t.data.value }, /* @__PURE__ */ r.jsxs(ho, { role: t.data.value, forZeniUser: s, children: [
+      /* @__PURE__ */ r.jsx(ye, { children: t.data.label }),
+      !!g && /* @__PURE__ */ r.jsxs("div", { children: [
+        /* @__PURE__ */ r.jsx(we, { width: o.sp3, height: o.sp3 }),
+        s === !0 ? /* @__PURE__ */ r.jsx(ve, { width: o.sp3, height: o.sp3 }) : null
+      ] })
+    ] }));
+  }, re = (t) => {
+    const g = [];
+    a && t.forEach((P) => {
+      g.push(P.value);
+    }), e(
+      a ? g : t.value
+    );
+  }, te = (t) => {
+    const { menuIsOpen: g, isFocused: P, isDisabled: z, selectProps: w } = t, { value: _ } = w;
+    return /* @__PURE__ */ r.jsx(
+      go,
+      {
+        menuIsOpen: g,
+        isFocused: P,
+        isDisabled: z,
+        selectedValue: _,
+        isError: m,
+        isValuePlacedAtEnd: y,
+        windowSize: C,
+        children: /* @__PURE__ */ r.jsx(L.Control, { ...t, className: "select-control", children: t.children })
+      }
+    );
+  };
+  return /* @__PURE__ */ r.jsx(
+    ne,
+    {
+      isMulti: a,
+      menuPlacement: "auto",
+      minMenuHeight: 250,
+      menuShouldScrollIntoView: !1,
+      defaultValue: u,
+      value: u,
+      closeMenuOnSelect: !0,
+      options: v,
+      isDisabled: p,
+      hideSelectedOptions: !1,
+      onChange: (t) => {
+        re(t);
+      },
+      isClearable: !1,
+      isSearchable: !0,
+      components: {
+        Control: te,
+        DropdownIndicator: io,
+        Option: oe,
+        MultiValueRemove: so,
+        IndicatorSeparator: ao,
+        MultiValueLabel: co,
+        ValueContainer: po,
+        Placeholder: no,
+        Input: lo
+      },
+      styles: ee,
+      theme: (t) => ({
+        ...t,
+        colors: {
+          ...t.colors,
+          primary: R
+        }
+      }),
+      placeholder: fe.getLocalizedStrings().peoplePage.dropdownPlaceHolderText,
+      isOptionDisabled: (t) => s === !1 && t.enabled === !1 || s === !0 && U(t.value),
+      classNamePrefix: "zeniRolesDropDown"
+    }
+  );
+}
+const lo = (e) => {
+  const { selectProps: s } = e, { placeholder: n, value: c, isMulti: p } = s;
+  return /* @__PURE__ */ r.jsx(
+    L.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: p === !0 && c?.length === 0 || c == null ? n : void 0,
+      children: e.children
+    }
+  );
+}, no = () => null, J = (e, s, n, c) => e && !s && n !== "delete" ? c.colors.primary : s ? c.colors.grey1 : n === "delete" ? T.important : c.colors.hero, io = () => null, so = () => null, ao = () => null, co = ({ children: e, data: s, ...n }) => /* @__PURE__ */ r.jsx(L.MultiValueLabel, { ...n, children: /* @__PURE__ */ r.jsxs(uo, { children: [
+  e,
+  /* @__PURE__ */ r.jsx(mo, { className: "seperator", children: "," })
+] }) }), po = ({ children: e, ...s }) => /* @__PURE__ */ r.jsx(L.ValueContainer, { ...s, className: "select-value-container", children: e }), uo = d($e)`
+  padding: ${o.sp0} 2px;
+  max-width: 104px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: ${(e) => e.theme.colors.primary};
+`, ho = d.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  ${(e) => U(e.role) && e.forZeniUser === !0 ? `padding: ${o.sp0} 12px; height: ${o.sp6};margin-top: ${o.sp1};width: 100%` : ""}
+`, mo = d.span``, go = d.div`
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey5};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+  .select-control {
+    border: none;
+    height: ${(e) => e.windowSize === "small" ? "auto" : o.sp6};
+    background-color: ${(e) => e.menuIsOpen && e.isValuePlacedAtEnd === !0 ? e.theme.colors.background : e.isError === !0 ? T.importantLight : e.theme.colors.grey5};
+    box-shadow: none;
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.isValuePlacedAtEnd !== !0 ? "inherit" : e.theme.colors.background};
+      border-color: none;
+    }
+    width: auto;
+    min-height: ${o.sp6};
+    cursor: pointer;
+  }
+  .select-value-container {
+    width: 100%;
+    display: flex;
+    margin: ${(e) => `${o.sp0}
+      ${e.isValuePlacedAtEnd === !0 ? o.sp3 : o.sp0}`};
+    padding: ${o.sp0};
+    max-width: 100%;
+    height: 100%;
+    min-width: auto;
+    align-items: center;
+    flex-wrap: ${(e) => e.windowSize === "small" ? "wrap" : "nowrap"};
+    cursor: pointer;
+    justify-content: ${(e) => e.menuIsOpen === !1 && e.isValuePlacedAtEnd === !0 ? "flex-end" : "flex-start"};
+
+    .zeniRolesDropDown__single-value {
+      border-radius: ${o.sp0};
+      margin: ${o.sp0};
+      color: ${(e) => e.theme.colors.primary};
+      ${D.standardRegular.css};
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .zeniRolesDropDown__input-container {
+      display: flex;
+      width: ${(e) => e.menuIsOpen === !1 && e.selectedValue == null ? o.sp0 : "100%"};
+      position: ${(e) => e.isFocused === !1 && e.selectedValue == null ? "initial" : "absolute"};
+      ${D.standardRegular.css};
+      color: ${(e) => e.theme.colors.primary};
+      margin: ${o.sp0};
+      cursor: inherit;
+      ::after {
+        width: ${o.sp0};
+        min-width: ${o.sp0};
+      }
+
+      > input {
+        text-align: ${(e) => e.menuIsOpen === !1 && (e.selectedValue == null || e.selectedValue?.length === 0) ? "right" : "initial"};
+        align-items: center;
+        overflow: hidden;
+        cursor: inherit;
+        :disabled {
+          visibility: visible;
+        }
+        ::placeholder {
+          color: ${(e) => e.isError === !0 && e.menuIsOpen !== !0 ? T.important : e.theme.colors.grey1};
+        }
+      }
+    }
+    .placeholder-container {
+      color: ${(e) => e.isError === !0 && e.menuIsOpen !== !0 ? T.important : e.theme.colors.grey1};
+    }
+    > div:nth-last-of-type(2) .seperator {
+      visibility: hidden;
+    }
+  }
+`, bo = ({
+  name: e,
+  forZeniUser: s,
+  registerOptions: n,
+  defaultValue: c,
+  isDisabled: p,
+  isMulti: a,
+  style: f,
+  onSelectionChanged: $,
+  isValuePlacedAtEnd: b = !0
+}) => {
+  const { control: y } = F();
+  return /* @__PURE__ */ r.jsx(
+    K,
+    {
+      name: e,
+      control: y,
+      defaultValue: c,
+      rules: n,
+      render: ({ field: { value: u, onChange: x } }) => /* @__PURE__ */ r.jsx(
+        to,
+        {
+          onSelectionChanged: (k) => {
+            x({
+              allOptions: c.allOptions,
+              selectedOptions: k
+            }), $?.(k);
+          },
+          forZeniUser: s,
+          selectedRoles: u.selectedOptions,
+          disable: p,
+          isMulti: a,
+          name: e,
+          style: f,
+          allRoles: c.allOptions,
+          isValuePlacedAtEnd: b
+        }
+      )
+    }
+  );
+}, S = {
+  width: new h(343, 580, 726),
+  height: new h(l[6], l[6]),
+  controlHeight: new h(l[6], l[6]),
+  paddingTopBottom: new h(l[2], l[2]),
+  marginTop: new h(l[2], l[2]),
+  marginBottom: new h(l[2], l[2]),
+  marginRight: new h(l[2], l[2]),
+  labelMarginLeft: new h(l[3], l[4]),
+  labelMarginRight: new h(l[3], l[4]),
+  labelMarginTop: new h(l[2], l[2])
+};
+function Co({
+  isDisabled: e,
+  label: s,
+  zeniRolesDropDownField: n,
+  style: c
+}) {
+  const p = I();
+  return /* @__PURE__ */ r.jsxs(
+    xo,
+    {
+      size: p,
+      style: c,
+      isDisabled: e != null,
+      "data-testid": A(
+        "labeled-zeni-roles-dropdown-field",
+        n.name
+      ),
+      children: [
+        /* @__PURE__ */ r.jsx(
+          Z,
+          {
+            isDisabled: e,
+            label: s.label,
+            htmlFor: n.name,
+            style: {
+              marginLeft: S.labelMarginLeft.value(p),
+              marginRight: S.labelMarginRight.value(p),
+              marginTop: S.labelMarginTop.value(p),
+              width: s.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ r.jsx(
+          bo,
+          {
+            ...n,
+            isDisabled: e === "disabled" || e === "readonly",
+            style: {
+              display: "flex",
+              flexGrow: 1,
+              width: s.width != null ? `calc(100% - ${s.width}px)` : "auto",
+              height: p === "small" ? "auto" : o.sp6,
+              minHeight: S.controlHeight.value(p)
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+const xo = d.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => S.width.valuePx(e.size)};
+  min-height: ${(e) => S.height.valuePx(e.size)};
+  padding-right: ${(e) => S.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => S.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => S.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .select-control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+    }
+  }
+`;
+export {
+  jo as L,
+  Co as a
+};