@zeniai/web-components 3.16.41 → 3.16.42

package/dist/LabeledZeniRolesDropDownField-Da9mc-0B.js

@@ -1,975 +0,0 @@
-import { u as q, j as r, d as F, m as K, i as le, e as Q, S as ne, c as L } from "./vendor-.pnpm-BZbZ6JJC.js";
-import { css as ie } from "@emotion/react";
-import d from "@emotion/styled";
-import { u as I, j as A, B as se, S as o, R as h, D as l, i0 as ae, i5 as de, at as ce, C as T, i6 as N, _ as X, G as Y, E as pe, hV as ue, hL as he, eN as me, hW as ge, eF as be, i7 as xe, aB as Z, t as D, a as fe, o as ye, n as we, aa as ve, p as $e } from "./index-BtH6xclG.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-MwI_BmVq.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 = q(), 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(X)`
-  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(X)`
-  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};
-`, qe = d(me)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${(e) => e.theme.colors.hero};
-`, Ke = d(he)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${(e) => e.theme.colors.hero};
-`, Qe = d(ue)`
-  width: ${o.sp4};
-  height: ${o.sp4};
-  color: ${(e) => e.theme.colors.hero};
-`, Xe = 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(qe, {});
-    case "zeni_cards":
-      return /* @__PURE__ */ r.jsx(Ke, {});
-    case "zeni_treasury":
-      return /* @__PURE__ */ r.jsx(Qe, {});
-    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 = K(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(Xe, { 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(
-    Q,
-    {
-      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 = K(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 = q(), 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(
-    Q,
-    {
-      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
-};