@zeniai/web-components 3.16.50 → 3.16.52

package/dist/TaskListRow-Bry0aEo9.js

@@ -1,1950 +0,0 @@
-import { d as ce, j as t, e as ze, u as Ie, C as Ue, S as Ge, i as X, c as Z, P as Ze } from "./vendor-.pnpm-BZbZ6JJC.js";
-import * as R from "react";
-import me, { useState as Q, useRef as qe, useEffect as fe, useCallback as U } from "react";
-import { css as O } from "@emotion/react";
-import o from "@emotion/styled";
-import { toDueDateGroupKeyType as Ye, getUserName as Je, allTaskStatus as Xe, allTaskPriority as Ne, dateNow as Qe, convertHHMMStrToMinutes as et, toPriorityCodeType as tt } from "@zeniai/client-epic-state";
-import { a as y, t as T, S as r, D as g, p as ee, v as ye, s as $e, Z as B, C as A, ax as We, bb as rt, aq as ot, G as L, E as te, n as nt, aa as Ae, fC as st, aL as D, a3 as it, z as lt, fH as at, ay as Re, R as f, u as we, eV as ct, fI as dt, ab as pt, fJ as ht, fK as ut, fL as gt, aC as be, L as mt, fM as xt, w as ft } from "./index-D4BzzXbc.js";
-import { S as yt } from "./avatar-Dz7aEm3d.js";
-import { Z as $t } from "./ZeniDatePicker-9wyvANBF.js";
-import { b as ge, c as wt, a as vt, C as St, d as bt, T as jt, M as Ct, t as kt, g as Lt, S as Pt, e as je, s as Ot, p as Mt, f as Tt, h as zt, i as It, j as Nt } from "./TaskDetailPage-NsVP5Mjy.js";
-import { S as Wt } from "./add-C0nqJFLa.js";
-import { H as At, a as Rt } from "./common-CQWVbj5B.js";
-const Ht = ({
-  name: e,
-  defaultValue: n,
-  registerOptions: s,
-  dateFormat: i,
-  style: d,
-  inputStyles: c,
-  minDate: p
-}) => {
-  const { control: a } = ce();
-  return /* @__PURE__ */ t.jsx(
-    ze,
-    {
-      name: e,
-      control: a,
-      defaultValue: n,
-      rules: s,
-      render: ({ field: { value: x, onChange: $ } }) => /* @__PURE__ */ t.jsx(
-        $t,
-        {
-          selectedDate: { date: x.date, businessDay: x.businessDay },
-          onSelectedDateChanged: (P, S) => $({
-            date: P,
-            businessDay: S,
-            showBusinessDay: n.showBusinessDay,
-            maxDate: n.maxDate
-          }),
-          showBusinessDay: n.showBusinessDay,
-          maxDate: n.maxDate,
-          style: d,
-          dateFormat: i,
-          inputStyles: c,
-          minDate: p
-        }
-      )
-    }
-  );
-}, Dt = {
-  controller: y.getLocalizedStrings().cockpit.userMultiSelectHeaders.selectedControllers,
-  preparer: y.getLocalizedStrings().cockpit.userMultiSelectHeaders.selectedPreparers,
-  reviewer: y.getLocalizedStrings().cockpit.userMultiSelectHeaders.selectedReviewers,
-  apAnalyst: y.getLocalizedStrings().cockpit.userMultiSelectHeaders.selectedAPAnalysts,
-  taxLead: y.getLocalizedStrings().cockpit.userMultiSelectHeaders.selectedTaxLeads
-}, Bt = (e = "") => {
-  const n = e?.replace(/^companyData\./, "");
-  return Dt[n] || y.getLocalizedStrings().cockpit.userMultiSelectHeaders.selectedUsers;
-};
-function Et(e) {
-  const n = /* @__PURE__ */ new Set();
-  return e.filter((s) => n.has(s.userId) ? !1 : (n.add(s.userId), !0));
-}
-const Vt = o.div`
-  height: ${r.sp4};
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`, Ce = (e, n) => (e = Et(e), e.map((s) => ({
-  ...s,
-  value: s.userId,
-  label: s.firstName != "" || s.lastName != "" ? `${s.firstName} ${n ? s.lastName.slice(0, 1) : s.lastName}` : s.email
-}))), ke = (e) => e.firstName !== "" || e.lastName !== "" ? `${e.firstName} ${e.lastName}` : null, Ft = (e, n) => n && typeof e.label == "string" ? e.label.toLowerCase().includes(n.toLowerCase()) || e.data.email.toLowerCase().includes(n.toLowerCase()) : !0;
-function _t({
-  name: e,
-  allUsers: n,
-  onSelectedUsersChanged: s,
-  selectedUsers: i = [],
-  disable: d = !1,
-  pickerStyles: {
-    optionBackgroundColor: c,
-    optionTextStyle: p,
-    titleTextStyle: a,
-    backgroundColor: x,
-    titleTextAlignment: $,
-    selectedOptionColor: P,
-    multiValueLabelTitleStyle: S
-  } = {},
-  customization: { placeholderLabel: l } = {},
-  isReadOnly: b = !1
-}) {
-  const m = Ie(), V = (h) => {
-    let w = [], v = [];
-    i.length === 0 ? h.forEach((j) => {
-      const C = X(j);
-      C.isRoleSelected = !0, C.isUserSelectionUpdated = !0, w.push(C);
-    }) : h.length === 0 ? i.forEach((j) => {
-      const C = X(j);
-      C.isRoleSelected = !1, v.push(C);
-    }) : i.length > h.length ? (v = i.filter(
-      (j) => !h.find(
-        (C) => C.userId === j.userId
-      )
-    ), v = X(v), v.forEach((j) => {
-      j.isRoleSelected = !1;
-    }), w = [...h]) : i.forEach((j) => {
-      h.forEach((C) => {
-        const K = X(C);
-        j.userId !== C.userId ? (K.isRoleSelected = !0, K.isUserSelectionUpdated = !0) : K.isUserSelectionUpdated = !1, w.push(K);
-      });
-    }), s(w, v);
-  }, F = Ce(n, !1).sort(
-    (h, w) => h.label.localeCompare(w.label)
-  ), W = Ce(i, !0), u = [
-    {
-      label: Bt(e),
-      options: W
-    },
-    {
-      label: y.getLocalizedStrings().cockpit.userMultiSelectHeaders.allUsers,
-      options: F
-    }
-  ], I = c ?? m.colors.grey5, z = x ?? m.colors.grey5, re = x ?? m.colors.grey5, oe = p?.cssObject ?? T.smallRegular.cssObject, de = a?.cssObject ?? oe, q = b ?? !1, pe = S?.cssObject ?? T.smallRegular.cssObject, ne = {
-    control: (h, w) => ({
-      ...h,
-      border: 0,
-      height: "100%",
-      backgroundColor: z,
-      fill: w.selectProps.menuIsOpen === !0 ? m.colors.primary : m.colors.grey1,
-      boxShadow: z,
-      ":active": {
-        backgroundColor: z
-      },
-      ":hover": {
-        fill: m.colors.primary
-      },
-      width: "189px",
-      minHeight: "auto",
-      cursor: "pointer"
-    }),
-    container: (h) => ({
-      ...h,
-      backgroundColor: z,
-      height: "100%"
-    }),
-    multiValue: (h, w) => {
-      const v = i.findIndex((j) => j.userId === w.data.value) === 0;
-      return {
-        ...h,
-        margin: 0,
-        minWidth: void 0,
-        backgroundColor: void 0,
-        ">div": {
-          borderRadius: 0,
-          padding: v ? r.sp0 : `${r.sp0} ${r.sp2}`,
-          borderLeftStyle: v ? "none" : "solid",
-          borderWidth: 1,
-          borderColor: m.colors.grey1,
-          color: "unset"
-        },
-        ">div>div>div>div:last-child": {
-          display: v ? "block" : "none",
-          ...T.standardRegular.cssObject
-        }
-      };
-    },
-    valueContainer: (h) => ({
-      ...h,
-      maxWidth: "100%",
-      cursor: q ? "default" : "pointer",
-      height: "100%",
-      ...de,
-      overflow: "hidden",
-      minWidth: "auto",
-      padding: 0,
-      display: "flex",
-      justifyContent: $ ?? "flex-start",
-      alignItems: "center",
-      flexWrap: "nowrap",
-      ">div>svg": {
-        color: m.colors.grey1,
-        ">path": {
-          color: m.colors.grey5,
-          fill: "currentcolor"
-        }
-      }
-    }),
-    menu: (h) => ({
-      ...h,
-      backgroundColor: I,
-      borderRadius: g[1],
-      boxShadow: `${r.sp0} 2px ${r.sp2} ${m.colors.dropShadowHover}`,
-      whiteSpace: "nowrap",
-      minWidth: "fit-content",
-      zIndex: 20,
-      width: 236,
-      margin: `6px ${r.sp0}`
-    }),
-    menuList: (h) => ({
-      ...h,
-      borderRadius: g[1],
-      "::-webkit-scrollbar": {
-        display: "none"
-      },
-      scrollbarWidth: "none"
-      // For Firefox
-    }),
-    placeholder: (h, w) => ({
-      ...h,
-      width: "100%",
-      minWidth: "148px",
-      color: w.isFocused ? m.colors.primary : "currentColor",
-      ...T.standardRegular.cssObject,
-      ">div>div>svg>circle": {
-        fill: m.colors.grey1
-      }
-    }),
-    noOptionsMessage: (h) => ({
-      ...h,
-      ...T.smallRegular.cssObject,
-      padding: `10px ${r.sp3} 9px ${r.sp3}`,
-      color: m.colors.hero
-    }),
-    option: (h, { isDisabled: w, isSelected: v, isFocused: j }) => ({
-      ...h,
-      ...oe,
-      color: v ? P ?? m.colors.champion : m.colors.hero,
-      backgroundColor: v ? re : j ? m.colors.background : I,
-      cursor: w ? "not-allowed" : "pointer",
-      "svg:nth-of-type(2)": {
-        display: "none"
-      },
-      ":hover": {
-        backgroundColor: m.colors.background,
-        color: m.colors.primary,
-        "svg:nth-of-type(1)": {
-          display: "none"
-        },
-        "svg:nth-of-type(2)": {
-          display: "inline-block"
-        }
-      },
-      "& label": {
-        paddingRight: "10px",
-        cursor: w ? "not-allowed" : v ? "inherit" : "pointer"
-      },
-      ">div>div>div:first-of-type": {
-        display: "flex"
-      }
-    }),
-    input: () => ({
-      display: "inline-grid",
-      color: m.colors.primary,
-      overflow: "hidden",
-      zIndex: 2,
-      minWidth: "auto",
-      maxWidth: "100%",
-      ...T.standardRegular.cssObject,
-      height: g[4],
-      position: i.length === 0 ? "absolute" : "unset",
-      left: "35px",
-      ">input": {
-        ...T.smallBold.cssObject,
-        cursor: "pointer"
-      }
-    }),
-    indicatorSeparator: () => ({
-      /** To customisze the indicator apply the styling to the DownChevron below */
-    }),
-    dropdownIndicator: () => ({}),
-    multiValueLabel: () => ({ ...pe })
-  }, [se, _] = Q(!1);
-  return /* @__PURE__ */ t.jsx(
-    Ue,
-    {
-      onClickAway: () => {
-        _(!1);
-      },
-      children: /* @__PURE__ */ t.jsx(
-        Vt,
-        {
-          onClick: (h) => {
-            h.preventDefault(), _(!se && !b);
-          },
-          className: "userMultiSelectContainer",
-          children: /* @__PURE__ */ t.jsx(
-            Ge,
-            {
-              isMulti: !0,
-              menuPlacement: "bottom",
-              minMenuHeight: 409,
-              maxMenuHeight: 409,
-              menuIsOpen: se,
-              menuShouldScrollIntoView: !1,
-              defaultValue: W,
-              value: W,
-              filterOption: Ft,
-              noOptionsMessage: () => y.getLocalizedStrings().cockpit.management.noPerson,
-              onInputChange: (h) => {
-                h !== "" && _(!0);
-              },
-              placeholder: /* @__PURE__ */ t.jsx(or, { children: /* @__PURE__ */ t.jsx(ee, { children: l ?? "Select..." }) }),
-              components: {
-                Menu: Jt,
-                Option: cr,
-                DropdownIndicator: $r,
-                IndicatorSeparator: vr,
-                MultiValueRemove: wr,
-                ValueContainer: xr,
-                GroupHeading: Gt,
-                MenuList: Kt
-              },
-              hideSelectedOptions: !1,
-              closeMenuOnSelect: !1,
-              styles: ne,
-              options: u,
-              isDisabled: d,
-              classNamePrefix: "grouped-multi-select-field",
-              onChange: (h) => {
-                (h?.length <= n?.length || h?.length < W.length) && (_(!1), V(h));
-              },
-              isClearable: !1,
-              isSearchable: !1,
-              backspaceRemovesValue: !1
-            }
-          )
-        }
-      )
-    }
-  );
-}
-const Kt = (e) => /* @__PURE__ */ t.jsx(Z.MenuList, { ...e, children: me.Children.map(e.children, (n, s) => /* @__PURE__ */ t.jsxs(me.Fragment, { children: [
-  s > 0 && /* @__PURE__ */ t.jsx(Ut, {}),
-  " ",
-  n
-] }, s)) }), Ut = o.div`
-  border-bottom: 1px solid ${A.neutralGrey3Light};
-`, Gt = (e) => {
-  const [n, s] = Q(!0), i = (d) => {
-    d.stopPropagation(), s(!n);
-  };
-  return /* @__PURE__ */ t.jsx(
-    Zt,
-    {
-      className: "group-heading-container",
-      isGroupOpen: n,
-      onClick: i,
-      children: /* @__PURE__ */ t.jsxs(Z.GroupHeading, { ...e, children: [
-        /* @__PURE__ */ t.jsx(qt, { isGroupOpen: n, children: /* @__PURE__ */ t.jsx(Yt, { className: "close-tick-icon" }) }),
-        e.children
-      ] })
-    }
-  );
-}, Zt = o(We)`
-  display: flex;
-  color: ${(e) => e.theme.colors.primary};
-  align-items: center;
-  flex-direction: row;
-
-  ~ div .select-option-wrapper {
-    display: ${(e) => e.isGroupOpen ? "flex" : "none"};
-  }
-
-  .grouped-multi-select-field__group-heading {
-    display: flex;
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    font-family: inherit;
-    color: inherit;
-    text-transform: capitalize;
-    cursor: pointer;
-    padding: 0 18px;
-  }
-`, qt = o.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${r.sp2};
-  transform: ${(e) => e.isGroupOpen ? "rotate(0deg)" : "rotate(-90deg)"};
-`, Yt = o(rt)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, Jt = (e) => {
-  const [n, s] = Q(e.selectProps.inputValue), i = qe(null), d = () => {
-    i.current && i.current.focus(), e.selectProps.onInputChange(n, {
-      action: "input-change",
-      prevInputValue: ""
-    });
-  };
-  fe(() => {
-    d();
-  }, []);
-  const c = (a) => {
-    s(a.target.value), e.selectProps.onInputChange(a.target.value, {
-      action: "input-change",
-      prevInputValue: ""
-    });
-  }, p = (a) => {
-    d(), a.stopPropagation();
-  };
-  return /* @__PURE__ */ t.jsxs(Z.Menu, { ...e, children: [
-    /* @__PURE__ */ t.jsxs(Xt, { children: [
-      /* @__PURE__ */ t.jsx(er, { children: /* @__PURE__ */ t.jsx(tr, {}) }),
-      /* @__PURE__ */ t.jsx(
-        Qt,
-        {
-          ref: i,
-          value: n,
-          onChange: c,
-          onClick: p,
-          placeholder: y.getLocalizedStrings().cockpit.searchByName
-        }
-      )
-    ] }),
-    e.children
-  ] });
-}, Xt = o.div`
-  padding: ${r.sp2};
-  background-color: ${(e) => e.theme.colors.grey5};
-  border-top-right-radius: ${r.sp1};
-  border-top-left-radius: ${r.sp1};
-  display: flex;
-  align-items: center;
-  position: relative;
-  border-bottom: 1px solid ${A.neutralGrey3Light};
-`, Qt = o.input`
-  width: 100%;
-  background-color: ${(e) => e.theme.colors.grey5};
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  padding-right: ${r.sp5};
-  color: ${(e) => (
-  // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-  e.value ? e.theme.colors.primary : e.theme.colors.hero
-)};
-
-  ::placeholder {
-    color: ${(e) => e.theme.colors.grey1};
-  }
-`, er = o.div`
-  display: flex;
-  width: ${r.sp4};
-  height: ${r.sp4};
-  align-items: center;
-  margin-left: ${r.sp2};
-`, tr = o(st)`
-  height: ${r.sp3};
-  width: ${r.sp3};
-  box-sizing: border-box;
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, rr = o.div``, or = o.div`
-  display: flex;
-  align-items: center;
-  color: ${(e) => e.theme.colors.grey1};
-`, nr = o(yt)`
-  margin-right: ${r.sp2};
-  color: ${(e) => e.theme.colors.hero};
-  height: ${r.sp4};
-  width: ${r.sp4};
-`, sr = o(nt)`
-  height: ${r.sp3};
-  width: ${r.sp3};
-  margin-left: ${r.sp4};
-`, ir = o(Ae)`
-  height: ${r.sp3};
-  width: ${r.sp3};
-  margin-left: ${r.sp4};
-`, lr = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-`, He = o.img`
-  border-radius: 50%;
-  justify-content: center;
-  color: ${(e) => e.theme.colors.hero};
-`, De = o.div`
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: ${r.sp1} 5px;
-`, ar = ({
-  children: e,
-  data: n
-}) => /* @__PURE__ */ t.jsx(
-  B,
-  {
-    maxWidth: "280px",
-    placement: "bottom-start",
-    title: /* @__PURE__ */ t.jsxs(De, { children: [
-      ke(n) != null && /* @__PURE__ */ t.jsx("div", { children: ke(n) }),
-      /* @__PURE__ */ t.jsx("div", { children: n.email })
-    ] }),
-    style: {
-      color: A.championDark,
-      marginTop: "6px"
-    },
-    display: "flex",
-    children: e
-  }
-), cr = (e) => {
-  const { data: n, options: s, isSelected: i } = e;
-  let d = 0;
-  return s.forEach((c) => {
-    c.label === y.getLocalizedStrings().cockpit.userMultiSelectHeaders.allUsers && (d = c.options.findIndex((p) => p.value === n.value));
-  }), /* @__PURE__ */ t.jsx(rr, { className: "select-option-wrapper", children: /* @__PURE__ */ t.jsx(Z.Option, { ...e, children: /* @__PURE__ */ t.jsxs(lr, { children: [
-    /* @__PURE__ */ t.jsxs(ur, { children: [
-      /* @__PURE__ */ t.jsx(gr, { children: n?.photo !== void 0 ? /* @__PURE__ */ t.jsx(
-        He,
-        {
-          width: r.sp5,
-          height: r.sp5,
-          src: n?.photo.href,
-          alt: y.getLocalizedStrings().cockpit.userProfileAltText,
-          onError: ({ currentTarget: c }) => {
-            c.onerror = null, c.src = ye;
-          },
-          loading: "lazy"
-        }
-      ) : /* @__PURE__ */ t.jsx(
-        $e,
-        {
-          firstName: n?.firstName ?? "",
-          lastName: n?.lastName ?? "",
-          size: `${r.sp5}`,
-          index: d
-        }
-      ) }),
-      /* @__PURE__ */ t.jsxs(dr, { children: [
-        /* @__PURE__ */ t.jsx(pr, { children: e.label }),
-        /* @__PURE__ */ t.jsx(hr, { children: n.email })
-      ] })
-    ] }),
-    !!i && /* @__PURE__ */ t.jsxs("div", { children: [
-      /* @__PURE__ */ t.jsx(sr, {}),
-      /* @__PURE__ */ t.jsx(ir, {})
-    ] })
-  ] }) }) });
-}, dr = o.div`
-  display: flex;
-  flex-direction: column;
-`, pr = o(L)`
-  color: ${(e) => e.theme.colors.primary};
-`, hr = o(te)`
-  color: ${(e) => e.theme.colors.hero};
-`, ur = o.div`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  margin-left: ${r.sp2};
-`, gr = o.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${r.sp2};
-`, mr = o.div`
-  padding: ${r.sp0} ${r.sp2};
-  max-width: 104px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`, xr = ({ children: e, ...n }) => {
-  const s = n.selectProps.value, i = s.length > 1;
-  if (s.length === 0)
-    return /* @__PURE__ */ t.jsxs(Z.ValueContainer, { ...n, children: [
-      n.selectProps.value.length === 0 && /* @__PURE__ */ t.jsx(nr, {}),
-      e
-    ] });
-  {
-    const d = s[0], c = s.slice(1).map((p) => p.label).join(", ");
-    return /* @__PURE__ */ t.jsxs(Z.ValueContainer, { ...n, children: [
-      /* @__PURE__ */ t.jsx(Sr, { children: /* @__PURE__ */ t.jsxs(ar, { data: d, children: [
-        d?.photo != null ? /* @__PURE__ */ t.jsx(
-          He,
-          {
-            width: r.sp4,
-            height: r.sp4,
-            src: d?.photo.href,
-            alt: y.getLocalizedStrings().cockpit.userProfileAltText,
-            onError: ({ currentTarget: p }) => {
-              p.onerror = null, p.src = ye;
-            },
-            loading: "lazy"
-          }
-        ) : /* @__PURE__ */ t.jsx(
-          $e,
-          {
-            firstName: d?.firstName ?? "",
-            lastName: d?.lastName ?? "",
-            size: r.sp4
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          mr,
-          {
-            style: n.getStyles("multiValueLabel", n),
-            children: d.label
-          }
-        )
-      ] }) }),
-      i && /* @__PURE__ */ t.jsx(
-        B,
-        {
-          placement: "bottom-start",
-          title: /* @__PURE__ */ t.jsx(De, { children: c }),
-          style: {
-            color: A.championDark
-          },
-          display: "flex",
-          children: /* @__PURE__ */ t.jsx(fr, { children: /* @__PURE__ */ t.jsxs(yr, { className: "userBadge", children: [
-            y.getLocalizedStrings().common.strings.plus,
-            Array.from(new Set(n.selectProps.value)).length - 1
-          ] }) })
-        }
-      )
-    ] });
-  }
-}, fr = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${r.sp4};
-  height: ${r.sp4};
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-
-    .userBadge {
-      color: ${(e) => e.theme.colors.primary};
-    }
-  }
-  border-radius: 50%;
-  padding: 6px;
-  border: 1px solid;
-  box-sizing: border-box; // To ensure the border and padding are included in the width and height
-`, yr = o(ot)`
-  color: ${(e) => e.theme.colors.hero};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-  text-align: center;
-`, $r = () => null, wr = () => null, vr = () => null, Sr = o.div`
-  display: flex;
-  flex-direction: row;
-  cursor: pointer;
-`, br = ({
-  name: e,
-  placeholderLabel: n,
-  registerOptions: s,
-  value: i,
-  isReadOnly: d,
-  isDisabled: c,
-  pickerStyles: p
-}) => {
-  const { control: a } = ce();
-  return /* @__PURE__ */ t.jsx(
-    ze,
-    {
-      name: e,
-      control: a,
-      defaultValue: i,
-      rules: s,
-      render: ({ field: { value: x, onChange: $ } }) => /* @__PURE__ */ t.jsx(
-        _t,
-        {
-          name: e,
-          onSelectedUsersChanged: (P, S) => {
-            $({
-              allUsers: i.allUsers,
-              selectedUsers: P,
-              deSelectedUsers: S
-            });
-          },
-          selectedUsers: x.selectedUsers,
-          allUsers: i.allUsers,
-          customization: { placeholderLabel: n },
-          isReadOnly: d,
-          disable: c,
-          pickerStyles: p
-        }
-      )
-    }
-  );
-}, { taskManagement: Le, common: le } = y.getLocalizedStrings();
-function jr({
-  anchorEl: e,
-  isDefault: n,
-  onAddTask: s,
-  onRename: i,
-  onDelete: d,
-  onCollapseAll: c,
-  onExpandAll: p,
-  onClose: a
-}) {
-  const x = () => {
-    a(), s();
-  }, $ = () => {
-    a(), i();
-  }, P = () => {
-    a(), d();
-  }, S = () => {
-    a(), c();
-  }, l = () => {
-    a(), p();
-  };
-  return /* @__PURE__ */ t.jsx(
-    Ze,
-    {
-      open: !!e,
-      anchorEl: e,
-      onClose: a,
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "right"
-      },
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "right"
-      },
-      children: /* @__PURE__ */ t.jsxs(Cr, { children: [
-        /* @__PURE__ */ t.jsxs(Y, { onClick: x, hasBorderBottom: !0, children: [
-          /* @__PURE__ */ t.jsx(kr, {}),
-          /* @__PURE__ */ t.jsx(L, { children: Le.taskList.taskGroupMoreOptions.addTask })
-        ] }),
-        /* @__PURE__ */ t.jsx(Pr, { children: /* @__PURE__ */ t.jsx(Lr, { children: Le.taskList.taskGroupMoreOptions.groupOptions }) }),
-        /* @__PURE__ */ t.jsxs(D, { controller: n === !1, children: [
-          /* @__PURE__ */ t.jsxs(Y, { onClick: $, children: [
-            /* @__PURE__ */ t.jsx(Or, {}),
-            /* @__PURE__ */ t.jsx(L, { children: le.rename })
-          ] }),
-          /* @__PURE__ */ t.jsxs(Y, { onClick: P, children: [
-            /* @__PURE__ */ t.jsx(Mr, {}),
-            /* @__PURE__ */ t.jsx(L, { children: le.delete })
-          ] })
-        ] }),
-        /* @__PURE__ */ t.jsxs(Y, { onClick: S, children: [
-          /* @__PURE__ */ t.jsx(Tr, {}),
-          /* @__PURE__ */ t.jsx(L, { children: le.collapseAll })
-        ] }),
-        /* @__PURE__ */ t.jsxs(Y, { onClick: l, children: [
-          /* @__PURE__ */ t.jsx(zr, {}),
-          /* @__PURE__ */ t.jsx(L, { children: le.expandAll })
-        ] })
-      ] })
-    }
-  );
-}
-const Cr = o.div`
-  display: flex;
-  flex-direction: column;
-`, Y = o.div`
-  display: flex;
-  column-gap: ${r.sp2};
-  align-items: center;
-  padding: ${r.sp2} ${r.sp3};
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-  background-color: ${(e) => e.theme.colors.grey5};
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-    background-color: ${(e) => e.theme.colors.background};
-  }
-  border-bottom: ${(e) => e.hasBorderBottom === !0 ? `1px solid ${e.theme.colors.grey3}` : "none"};
-`, kr = o(Wt)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, Lr = o(We)`
-  color: ${(e) => e.theme.colors.primary};
-`, Pr = o.div`
-  padding: ${r.sp2} ${r.sp3};
-  background-color: ${(e) => e.theme.colors.grey5};
-`, Or = o(it)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, Mr = o(lt)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, Tr = o(at)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, zr = o(Re)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, E = y.getLocalizedStrings().taskManagement.taskList.header, Ir = {
-  key: "name",
-  value: E.name,
-  sortOrder: "ascending",
-  width: new f(20, 30, 30)
-}, Nr = {
-  key: "status",
-  value: E.status,
-  sortOrder: "ascending",
-  width: new f(10, 10, 10)
-}, Wr = {
-  key: "priority",
-  value: E.priority,
-  sortOrder: "ascending",
-  width: new f(12, 12, 12)
-}, Ar = {
-  key: "dueDate",
-  value: E.dueDate,
-  sortOrder: "ascending",
-  width: new f(12, 12, 12)
-}, Rr = {
-  key: "assignee",
-  value: E.assignee,
-  sortOrder: "ascending",
-  width: new f(15, 15, 15)
-}, Hr = {
-  key: "tag",
-  value: E.tag,
-  sortOrder: "ascending",
-  width: new f(15, 10, 10)
-}, Dr = {
-  key: "timeSpent",
-  value: E.timeSpent,
-  sortOrder: "ascending",
-  width: new f(13, 13, 13, 15, 15)
-}, N = [
-  Ir,
-  Nr,
-  Wr,
-  Ar,
-  Rr,
-  Hr,
-  Dr
-], G = {
-  headerLastColumnTopPadding: new f(g[0], g[4]),
-  headerLastColumnRightPadding: new f(g[3], g[4]),
-  headerLastColumnBottomPadding: new f(g[0], g[4]),
-  headerLastColumnLeftPadding: new f(g[3], g[4]),
-  containerMarginLeft: new f(g[0], g[8]),
-  containerMarginRight: new f(g[0], g[8]),
-  headerHeight: new f(At, Rt)
-};
-function Br({
-  companyNameSticky: e,
-  onColumnSortConfigChanged: n,
-  sortConfig: s
-}) {
-  const i = Ie(), d = we(), [c, p] = Q(
-    X(N)
-  );
-  fe(() => {
-    const l = [...c];
-    for (const b of l)
-      b.key === s.sortKey ? b.sortOrder = s.sortOrder : b.sortOrder = "ascending";
-    p(l);
-  }, [s.sortKey, s.sortOrder]);
-  const a = (l, b) => {
-    let m = b;
-    s.sortKey === l && (m = b === "ascending" ? "descending" : "ascending"), n(l, m);
-  }, x = c.find((l) => l.key === s.sortKey) ?? c[0], $ = (l) => c.find((b) => b.key === l)?.value ?? "", P = c.map((l) => l.key), S = y.getLocalizedStrings().spendManagement.billPay.billsByTabs;
-  return d === "small" ? /* @__PURE__ */ t.jsxs(Pe, { windowSize: d, companyNameSticky: !1, children: [
-    /* @__PURE__ */ t.jsxs(_r, { children: [
-      /* @__PURE__ */ t.jsx(Ur, { children: /* @__PURE__ */ t.jsx(Kr, {}) }),
-      /* @__PURE__ */ t.jsx(
-        ct,
-        {
-          title: S.sortBy,
-          placeholder: S.sortBy,
-          pickerValues: P,
-          valueToLabel: $,
-          selectedValue: s.sortKey,
-          onPickerSelectionChanged: (l) => {
-            l != null && a(l, "ascending");
-          },
-          optionTextStyle: T.smallRegular,
-          titleTextStyle: T.smallRegular,
-          titleColor: i.colors.primary,
-          selectedOptionColor: i.colors.hero,
-          optionBackgroundColor: i.colors.grey5,
-          downChevronVisible: !1,
-          backgroundColor: i.colors.background
-        }
-      )
-    ] }),
-    /* @__PURE__ */ t.jsxs(
-      qr,
-      {
-        onClick: () => a(
-          x.key,
-          x.sortOrder
-        ),
-        children: [
-          /* @__PURE__ */ t.jsx(L, { children: x.value }),
-          /* @__PURE__ */ t.jsx(
-            Oe,
-            {
-              sortDataValue: s.sortKey,
-              headerdata: x,
-              children: /* @__PURE__ */ t.jsx(Me, {})
-            }
-          )
-        ]
-      }
-    )
-  ] }) : /* @__PURE__ */ t.jsx(
-    Pe,
-    {
-      companyNameSticky: e,
-      windowSize: d,
-      children: c.map((l) => /* @__PURE__ */ t.jsxs(
-        Vr,
-        {
-          companyNameSticky: e && l.key === "name",
-          sortDataValue: s.sortKey,
-          actualDataValue: l.key,
-          wrapperWidth: l.width,
-          windowSize: d,
-          isLastColumn: l.key === "timeSpent",
-          children: [
-            /* @__PURE__ */ t.jsxs(
-              Zr,
-              {
-                sortKey: l.key,
-                onClick: () => a(l.key, l.sortOrder),
-                children: [
-                  /* @__PURE__ */ t.jsx(L, { children: l.value }),
-                  /* @__PURE__ */ t.jsx(
-                    Oe,
-                    {
-                      sortDataValue: s.sortKey,
-                      headerdata: l,
-                      children: /* @__PURE__ */ t.jsx(Me, {})
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ t.jsx(
-              Gr,
-              {
-                sortDataValue: s.sortKey,
-                windowSize: d,
-                isVisible: s.sortKey === l.key,
-                children: /* @__PURE__ */ t.jsx(
-                  Fr,
-                  {
-                    onClick: () => a("dueDate", "ascending")
-                  }
-                )
-              }
-            )
-          ]
-        },
-        l.key
-      ))
-    }
-  );
-}
-const Er = me.memo(Br), Pe = o(L)`
-  top: ${r.sp0};
-  left: ${r.sp0};
-  min-height: ${(e) => G.headerHeight.valuePx(e.windowSize)};
-  max-height: ${(e) => G.headerHeight.valuePx(e.windowSize)};
-  width: auto;
-  display: flex;
-  align-items: center;
-  box-sizing: border-box;
-  padding: ${(e) => `${G.headerLastColumnTopPadding.valuePx(
-  e.windowSize
-)} ${G.headerLastColumnRightPadding.valuePx(
-  e.windowSize
-)} ${G.headerLastColumnBottomPadding.valuePx(
-  e.windowSize
-)} ${G.headerLastColumnLeftPadding.valuePx(e.windowSize)}`};
-  background-color: ${(e) => e.theme.colors.grey4};
-  justify-content: ${(e) => e.windowSize === "small" ? "space-between" : "unset"};
-  position: sticky;
-`, Vr = o.div`
-  color: ${(e) => e.sortDataValue === e.actualDataValue ? e.theme.colors.primary : e.theme.colors.grey1};
-  width: ${(e) => e.wrapperWidth.valuePercentage(e.windowSize)};
-  min-width: ${(e) => e.isLastColumn === !0 ? "auto" : e.wrapperWidth.valuePercentage(e.windowSize)};
-  padding-left: ${(e) => e.companyNameSticky ? r.sp4 : r.sp0};
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  left: ${r.sp0};
-  justify-content: ${(e) => e.actualDataValue === "amount" || e.isLastColumn === !0 ? "flex-end" : "flex-start"};
-  ${(e) => e.companyNameSticky ? O`
-          position: sticky;
-          z-index: 1;
-        ` : O`
-          position: static;
-          z-index: 0;
-        `};
-  ${(e) => e.actualDataValue === "companyName" ? O`
-          padding-left: ${r.sp4};
-          flex: 1 1 auto;
-        ` : O`
-          padding-left: ${r.sp0};
-        `};
-  box-sizing: border-box;
-`, Fr = o(Ae)`
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  color: ${(e) => e.theme.colors.hero};
-`, Oe = o.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" ? O`
-          padding-top: 2px;
-        ` : O`
-          padding-bottom: 2px;
-        `}
-`, Me = o(pt)`
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  color: inherit;
-`, _r = o.div`
-  gap: ${r.sp1};
-  display: flex;
-`, Kr = o(dt)`
-  width: 12px;
-  height: 12px;
-  color: inherit;
-`, Ur = o.div`
-  margin-right: ${r.sp1};
-  display: flex;
-  align-items: center;
-`, Gr = o.div`
-  display: ${(e) => e.isVisible ? "flex" : "none"};
-  align-items: center;
-  padding-top: 2px;
-`, Zr = o.div`
-  display: flex;
-  cursor: pointer;
-  gap: 5px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-  white-space: nowrap;
-`, qr = o.div`
-  display: flex;
-  cursor: pointer;
-  gap: 5px;
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Yr = (e) => /* @__PURE__ */ R.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...e }, /* @__PURE__ */ R.createElement("circle", { cx: 6.44995, cy: 2.75, r: 1.75, fill: "currentColor" }), /* @__PURE__ */ R.createElement("circle", { cx: 6.44995, cy: 12.05, r: 1.75, fill: "currentColor" }), /* @__PURE__ */ R.createElement("circle", { cx: 6.44995, cy: 21.25, r: 1.75, fill: "currentColor" }), /* @__PURE__ */ R.createElement("circle", { cx: 17.45, cy: 2.75, r: 1.75, fill: "currentColor" }), /* @__PURE__ */ R.createElement("circle", { cx: 17.45, cy: 12.05, r: 1.75, fill: "currentColor" }), /* @__PURE__ */ R.createElement("circle", { cx: 17.45, cy: 21.25, r: 1.75, fill: "currentColor" })), H = (e, n, s) => `${e}.${kt}.${n}.${s}`, Te = (e, n, s) => `${e}.${wt}.${n}.${s}`, Jr = (e, n, s) => {
-  const i = s[n];
-  return !!Object.values(s).filter(
-    (c) => c !== i
-  ).includes(e.trim());
-}, { common: Be, taskManagement: xe } = y.getLocalizedStrings(), M = y.getLocalizedStrings(), ae = {
-  containerPaddingLeft: new f(g[3], g[4]),
-  containerPaddingRight: new f(g[3], g[4], g[4], g[8]),
-  containerPaddingTop: new f(g[2], 12),
-  containerPaddingBottom: new f(g[2], 12),
-  containerMarginLeft: new f(g[4], g[8]),
-  containerMarginRight: new f(g[4], g[8]),
-  taskNameMaxWidth: new f(125, 170, 170, 250, 300)
-}, an = (e, n) => {
-  const s = n.find((i) => i.tagId === e[0]);
-  return s ? /* @__PURE__ */ t.jsxs(fo, { children: [
-    /* @__PURE__ */ t.jsx(yo, { children: /* @__PURE__ */ t.jsx($o, { children: s.name }, `${s.tagId}_${s.name}`) }),
-    e.length > 1 ? /* @__PURE__ */ t.jsx(wo, { children: `${Be.strings.plus}${e.length - 1}` }) : null
-  ] }) : /* @__PURE__ */ t.jsx(t.Fragment, {});
-}, Xr = ({
-  taskGroup: e,
-  uiState: n,
-  userList: s
-}) => {
-  const { groupByKey: i } = n;
-  if (i === "dueDate") {
-    const d = M.common.timeStrings, c = Ye(e.id);
-    return /* @__PURE__ */ t.jsx(J, { children: d[c] });
-  }
-  if (i === "assignee") {
-    if (e.id === "no_assignee")
-      return /* @__PURE__ */ t.jsx(J, { children: M.taskManagement.taskList.groupingFilters.no_assignee });
-    const c = e.id.split(",").map((a) => s.users.find((x) => x.userId === a)?.user).filter((a) => a != null), p = c.length <= 5 ? null : c.slice(5).map((a) => Je(a)).join(", ");
-    return /* @__PURE__ */ t.jsxs(Wo, { children: [
-      /* @__PURE__ */ t.jsxs(Eo, { children: [
-        c.slice(0, 5).map((a, x) => a.photo != null ? /* @__PURE__ */ t.jsx(
-          No,
-          {
-            isFirstElement: x === 0,
-            width: r.sp4,
-            height: r.sp4,
-            src: a.photo.href,
-            alt: M.cockpit.userProfileAltText,
-            onError: ({ currentTarget: $ }) => {
-              $.onerror = null, $.src = ye;
-            }
-          },
-          a.userId
-        ) : a != null ? /* @__PURE__ */ t.jsx(
-          Bo,
-          {
-            isFirstElement: x === 0,
-            children: /* @__PURE__ */ t.jsx(
-              $e,
-              {
-                firstName: a.firstName ?? "",
-                lastName: a.lastName ?? "",
-                size: r.sp4
-              }
-            )
-          },
-          a.userId
-        ) : null),
-        p != null ? /* @__PURE__ */ t.jsx(
-          B,
-          {
-            style: { padding: `${r.sp1} ${r.sp2}` },
-            title: p,
-            placement: "bottom",
-            children: /* @__PURE__ */ t.jsx(Vo, { children: `${M.common.strings.plus}${c.length - 5}` })
-          }
-        ) : null
-      ] }),
-      /* @__PURE__ */ t.jsx(J, { children: e.groupName }),
-      p != null ? /* @__PURE__ */ t.jsx(
-        B,
-        {
-          style: { padding: `${r.sp1} ${r.sp2}` },
-          title: p,
-          placement: "bottom",
-          children: /* @__PURE__ */ t.jsx(Ao, { children: `${M.common.strings.plus}${c.length - 5}` })
-        }
-      ) : null
-    ] });
-  }
-  return i === "tag" && e.id === "no_tag" ? /* @__PURE__ */ t.jsx(J, { children: M.taskManagement.taskList.groupingFilters.no_tag }) : /* @__PURE__ */ t.jsx(J, { children: e.groupName });
-}, Qr = (e) => Ne.find((n) => n.code === e)?.name ?? M.common.strings.empty, eo = (e) => {
-  const n = tt(e);
-  return /* @__PURE__ */ t.jsxs(Fo, { children: [
-    /* @__PURE__ */ t.jsx(_o, { color: Lt(n) }),
-    /* @__PURE__ */ t.jsx(Zo, { children: Qr(n) })
-  ] });
-}, to = ({
-  taskDetail: e,
-  tagList: n,
-  isSelected: s,
-  isDefaultGroupTask: i,
-  isFirstItem: d,
-  isLastItem: c,
-  sectionId: p,
-  userList: a,
-  onRowClick: x,
-  onTimeSpentUpdate: $,
-  onShowToast: P,
-  onCreateTagClick: S
-}) => {
-  const l = we(), { getValues: b, resetField: m, getFieldState: V } = ce(), F = (u, I) => {
-    const z = H(
-      u,
-      I,
-      je
-    );
-    V(z).invalid ? m(z) : $(e, { timeSpent: b(z) });
-  }, W = (u) => /* @__PURE__ */ t.jsx(Ko, { children: /* @__PURE__ */ t.jsx(qo, { children: `${M.dropDowns.createOption} "${u}"` }) });
-  return /* @__PURE__ */ t.jsxs(
-    no,
-    {
-      isDefaultGroupTask: i,
-      isFirstItem: d,
-      isLastItem: c,
-      isSelected: s,
-      children: [
-        /* @__PURE__ */ t.jsxs(
-          so,
-          {
-            windowSize: l,
-            onClick: x,
-            responsiveWidth: N[0].width,
-            children: [
-              /* @__PURE__ */ t.jsxs(io, { windowSize: l, children: [
-                /* @__PURE__ */ t.jsx(
-                  ao,
-                  {
-                    isIconPresent: e.type.code === "recurring",
-                    windowSize: l,
-                    children: e.name
-                  }
-                ),
-                e.type.code === "recurring" ? /* @__PURE__ */ t.jsx(
-                  B,
-                  {
-                    style: { padding: `2px ${r.sp1}` },
-                    title: e.type.name,
-                    placement: "bottom",
-                    children: /* @__PURE__ */ t.jsx(po, { height: r.sp3, width: r.sp3 })
-                  }
-                ) : null
-              ] }),
-              /* @__PURE__ */ t.jsx(
-                B,
-                {
-                  style: { padding: `12px ${r.sp3}` },
-                  title: e.description,
-                  placement: "bottom-start",
-                  children: /* @__PURE__ */ t.jsx(
-                    lo,
-                    {
-                      windowSize: l,
-                      responsiveWidth: N[0].width,
-                      children: /* @__PURE__ */ t.jsx(
-                        co,
-                        {
-                          className: "taskDescriptionText",
-                          windowSize: l,
-                          children: e.description
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          uo,
-          {
-            windowSize: l,
-            responsiveWidth: N[1].width,
-            children: /* @__PURE__ */ t.jsx(
-              be,
-              {
-                name: H(p, e.id, Ot),
-                registerOptions: {
-                  required: !1
-                },
-                defaultValue: {
-                  selectedOption: e.status.code,
-                  allOptions: Xe.map((u) => ({
-                    label: u.name,
-                    value: u.code
-                  }))
-                },
-                valueToLabel: (u) => vt(u),
-                isSearchable: !1,
-                customStyleConfig: {
-                  container: () => ({
-                    justifyContent: "flex-start",
-                    margin: 0
-                  }),
-                  control: () => ({
-                    "&:hover": {
-                      backgroundColor: "unset"
-                    }
-                  }),
-                  menu: () => ({
-                    width: "320px",
-                    zIndex: 3
-                  })
-                },
-                controlProperty: {
-                  leftRightMargin: !1
-                },
-                textAlignment: "left"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          go,
-          {
-            windowSize: l,
-            responsiveWidth: N[2].width,
-            children: /* @__PURE__ */ t.jsx(
-              be,
-              {
-                name: H(p, e.id, Mt),
-                registerOptions: { required: !1 },
-                defaultValue: {
-                  selectedOption: e.priority.code,
-                  allOptions: Ne.map((u) => ({
-                    label: u.name,
-                    value: u.code
-                  }))
-                },
-                valueToLabel: (u) => eo(u),
-                isSearchable: !1,
-                customStyleConfig: {
-                  container: () => ({
-                    justifyContent: "flex-start",
-                    margin: 0
-                  }),
-                  control: () => ({
-                    "&:hover": {
-                      backgroundColor: "unset"
-                    }
-                  }),
-                  menu: () => ({
-                    width: "320px",
-                    zIndex: 3
-                  }),
-                  valueContainer: (u) => ({
-                    ...u,
-                    color: "inherit",
-                    "&.select-value-container": {
-                      ".single-select-field__single-value": {
-                        color: "inherit"
-                      }
-                    }
-                  })
-                },
-                controlProperty: {
-                  leftRightMargin: !1
-                },
-                textAlignment: "left"
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          mo,
-          {
-            windowSize: l,
-            responsiveWidth: N[3].width,
-            children: /* @__PURE__ */ t.jsx(
-              Ht,
-              {
-                name: H(p, e.id, Tt),
-                defaultValue: {
-                  date: e.dueDate,
-                  showBusinessDay: !1
-                },
-                dateFormat: M.dateFormat.visual.MMMDCommaYYYYformat,
-                inputStyles: {
-                  titleTextComponent: ee
-                },
-                minDate: Qe()
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          ho,
-          {
-            windowSize: l,
-            responsiveWidth: N[4].width,
-            children: /* @__PURE__ */ t.jsx(
-              br,
-              {
-                value: {
-                  allUsers: a,
-                  selectedUsers: e.assigneeUsers.map(
-                    (u) => u.user
-                  )
-                },
-                name: H(p, e.id, zt),
-                pickerStyles: {
-                  multiValueLabelTitleStyle: T.standardRegular
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          xo,
-          {
-            windowSize: l,
-            responsiveWidth: N[5].width,
-            children: /* @__PURE__ */ t.jsx(
-              St,
-              {
-                onCreateOption: (...u) => {
-                  S(u[0], e.id);
-                },
-                placeholder: M.common.strings.empty,
-                placeholderComponent: /* @__PURE__ */ t.jsxs(Uo, { children: [
-                  /* @__PURE__ */ t.jsx(Go, {}),
-                  /* @__PURE__ */ t.jsx(L, { children: M.taskManagement.taskDetail.tagPlaceholder })
-                ] }),
-                customCreateLabel: (u) => W(u),
-                defaultValue: {
-                  allOptions: bt(n),
-                  selectedOptions: e.tagIds
-                },
-                maxAllowedSelectedValues: 5,
-                name: H(p, e.id, It),
-                isListView: !0,
-                customStyleConfig: {
-                  valueContainer: (u, I) => ({
-                    justifyContent: "flex-start",
-                    flexWrap: "nowrap",
-                    display: "flex",
-                    alignItems: "center",
-                    ".selected-options": {
-                      textAlign: "left",
-                      display: I.selectProps.menuIsOpen ? "none" : "flex",
-                      alignItems: "center",
-                      flexWrap: "nowrap",
-                      margin: 0,
-                      gap: r.sp2,
-                      label: {
-                        margin: r.sp0
-                      }
-                    }
-                  }),
-                  input: () => ({
-                    flex: 0
-                  }),
-                  control: () => ({
-                    backgroundColor: "unset",
-                    "&:hover": {
-                      backgroundColor: "unset"
-                    },
-                    padding: "0"
-                  }),
-                  menu: () => ({
-                    width: "320px"
-                  })
-                }
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ t.jsx(
-          Ho,
-          {
-            windowSize: l,
-            responsiveWidth: N[6].width,
-            isLastColumn: !0,
-            children: /* @__PURE__ */ t.jsx(Do, { className: "timeSpentField", children: /* @__PURE__ */ t.jsx(
-              jt,
-              {
-                name: H(p, e.id, je),
-                placeholder: xe.common.timeSpentPlaceholder,
-                timeSpentFormat: xe.common.timeSpentFormat,
-                registerOptions: {
-                  validate: (u) => et(u) > Ct ? (P({
-                    messageSection: "task_time_spent_validation",
-                    messageText: "failed",
-                    type: "error",
-                    showStatusIcon: !0
-                  }), "Error") : !0
-                },
-                onInputBlur: () => {
-                  F(p, e.id);
-                },
-                style: { background: "none" },
-                inputStyle: {
-                  textAlign: "right",
-                  padding: `${r.sp0} ${r.sp2}`
-                }
-              }
-            ) })
-          }
-        )
-      ]
-    }
-  );
-}, cn = ({
-  taskGroup: e,
-  tagList: n,
-  sectionId: s,
-  uiState: i,
-  userList: d,
-  showGroupName: c,
-  showRenameTextField: p,
-  isCollapsed: a,
-  isSelectionAllowed: x,
-  selectedRowIds: $,
-  existingTaskGroupNamesByGroupId: P,
-  onRenameClick: S,
-  onDeleteTaskGroup: l,
-  onExpandAll: b,
-  onCollapseAll: m,
-  onAddNewTaskToTaskGroup: V,
-  onCollapseToggle: F,
-  onTaskManagementRowClick: W,
-  onColumnSortConfigChanged: u,
-  onDragStart: I,
-  onTimeSpentUpdate: z,
-  onShowToast: re,
-  onCreateTagClick: oe
-}) => {
-  const [de, q] = Q(null), pe = we(), { groupByKey: ne, sortKey: se, sortOrder: _ } = i, { setFocus: h, control: w } = ce(), v = U(() => {
-    F(e.id);
-  }, [F, e.id]), j = U(
-    (k) => {
-      q(k.currentTarget);
-    },
-    []
-  ), C = U(() => {
-    q(null);
-  }, []), K = U(() => {
-    V(e.id);
-  }, [V, e.id]), Ee = U(() => {
-    q(null), l(e.id);
-  }, [l, e.id]), Ve = U(() => {
-    S(), C();
-  }, [C, S]);
-  fe(() => {
-    p && h(`${s}.${ge}`);
-  }, [s, p, h]);
-  const ve = !!w.getFieldState(`${s}.${ge}`).error, he = e.tasks.filter(
-    (k) => k.status.code === "resolved" || k.status.code === "done"
-  ).length, ie = e.tasks.length, ue = ie > 0 ? he / ie * 100 : 0, Fe = d.users.map((k) => k.user).filter((k) => k != null), _e = ue <= 50 ? A.important : ue <= 85 ? A.alert : A.success;
-  return /* @__PURE__ */ t.jsxs(ro, { windowSize: pe, children: [
-    /* @__PURE__ */ t.jsx(D, { controller: c, children: /* @__PURE__ */ t.jsxs(bo, { children: [
-      /* @__PURE__ */ t.jsxs(oo, { children: [
-        /* @__PURE__ */ t.jsx(
-          So,
-          {
-            isOpen: a === !1,
-            onClick: v,
-            children: /* @__PURE__ */ t.jsx(vo, {})
-          }
-        ),
-        /* @__PURE__ */ t.jsx(D, { controller: p, children: /* @__PURE__ */ t.jsx(
-          ht,
-          {
-            style: {
-              textAlign: "start",
-              width: "100%",
-              padding: `${r.sp1} ${r.sp0} ${r.sp1} ${ve ? r.sp2 : r.sp0}`,
-              background: ve ? void 0 : "unset",
-              ...T.largeMedium.cssObject
-            },
-            type: "text",
-            name: Te(s, e.id, ge),
-            placeholder: xe.taskList.taskGroup.groupNamePlaceholder,
-            registerOptions: {
-              required: !0,
-              validate: (k) => Jr(
-                k,
-                e.id,
-                P
-              ) === !1
-            }
-          }
-        ) }),
-        /* @__PURE__ */ t.jsx(D, { controller: p === !1, children: /* @__PURE__ */ t.jsxs(Mo, { children: [
-          /* @__PURE__ */ t.jsx(
-            Xr,
-            {
-              userList: d,
-              uiState: i,
-              taskGroup: e
-            }
-          ),
-          /* @__PURE__ */ t.jsx(
-            D,
-            {
-              controller: i.groupByKey !== "status",
-              children: /* @__PURE__ */ t.jsx(
-                B,
-                {
-                  style: { padding: `${r.sp1} ${r.sp2}` },
-                  title: `${M.taskManagement.taskList.groupingFilters.completedInfo.replace("__resolvedTasks", he.toString()).replace("__totalTasks", ie.toString())}`,
-                  placement: "bottom",
-                  children: /* @__PURE__ */ t.jsx(To, { children: /* @__PURE__ */ t.jsx(
-                    zo,
-                    {
-                      fill: _e,
-                      percentage: ue
-                    }
-                  ) })
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ t.jsxs(Io, { children: [
-            he,
-            "/",
-            ie
-          ] })
-        ] }) })
-      ] }),
-      /* @__PURE__ */ t.jsx(D, { controller: p === !1, children: /* @__PURE__ */ t.jsx(Lo, { onClick: j, children: /* @__PURE__ */ t.jsx(ko, {}) }) }),
-      /* @__PURE__ */ t.jsx(
-        jr,
-        {
-          onClose: C,
-          onAddTask: K,
-          onCollapseAll: m,
-          onDelete: Ee,
-          onExpandAll: b,
-          onRename: Ve,
-          isDefault: e.isDefault,
-          anchorEl: de
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ t.jsx(
-      D,
-      {
-        controller: a === !1 && e.tasks.length > 0,
-        children: /* @__PURE__ */ t.jsx(
-          ut,
-          {
-            mode: $.length === 0 ? "checked_or_hover" : "always_on",
-            isDisabled: x === !1 ? "disabled" : void 0,
-            checkBoxes: [
-              {
-                label: /* @__PURE__ */ t.jsx(Co, { children: /* @__PURE__ */ t.jsx(
-                  Er,
-                  {
-                    companyNameSticky: !1,
-                    onColumnSortConfigChanged: u,
-                    sortConfig: {
-                      sortKey: se,
-                      sortOrder: _
-                    }
-                  }
-                ) }),
-                prefix: /* @__PURE__ */ t.jsx(Oo, {}),
-                defaultChecked: !1,
-                groupLabel: !0,
-                value: Be.all.toLocaleLowerCase()
-              },
-              ...e.tasks.map((k, Se) => {
-                const Ke = () => {
-                  W(k.id);
-                };
-                return {
-                  label: /* @__PURE__ */ t.jsx(
-                    to,
-                    {
-                      taskDetail: k,
-                      sectionId: s,
-                      tagList: n,
-                      isSelected: $.includes(k.id),
-                      isDefaultGroupTask: e.isDefault === !0 && ne === "groupName",
-                      isFirstItem: Se === 0,
-                      isLastItem: Se === e.tasks.length - 1,
-                      userList: Fe,
-                      onCreateTagClick: oe,
-                      onRowClick: Ke,
-                      onTimeSpentUpdate: z,
-                      onShowToast: re
-                    }
-                  ),
-                  prefix: /* @__PURE__ */ t.jsx(jo, { children: /* @__PURE__ */ t.jsx(Po, {}) }),
-                  value: k.id,
-                  defaultChecked: !1,
-                  groupLabel: !1
-                };
-              })
-            ],
-            name: Te(s, e.id, Nt),
-            style: {
-              width: "100%",
-              rowGap: e.isDefault === !0 && ne === "groupName" ? r.sp3 : r.sp0
-            },
-            checkBoxStyle: { padding: r.sp3 },
-            labelCheckBoxStyle: { padding: r.sp3 },
-            onDragStart: I,
-            draggable: !0
-          }
-        )
-      }
-    )
-  ] });
-}, ro = o.div`
-  padding-right: ${(e) => ae.containerPaddingRight.valuePx(e.windowSize)};
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  row-gap: ${r.sp2};
-`, oo = o.div`
-  display: flex;
-  align-items: center;
-  column-gap: ${r.sp2};
-  width: 100%;
-`, no = o.div`
-  display: flex;
-  width: 100%;
-  align-items: center;
-  color: ${(e) => e.theme.colors.hero};
-  height: ${r.sp10};
-  background-color: ${(e) => e.theme.colors.grey5};
-  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
-  ${(e) => e.isDefaultGroupTask || e.isFirstItem && e.isLastItem ? O`
-          border-radius: ${r.sp2};
-        ` : null}
-
-  ${(e) => e.isDefaultGroupTask === !1 && e.isFirstItem === !0 ? O`
-          border-top-left-radius: ${r.sp2};
-          border-top-right-radius: ${r.sp2};
-        ` : null}
-
-  ${(e) => e.isDefaultGroupTask === !1 && e.isLastItem === !0 ? O`
-          border-bottom-left-radius: ${r.sp2};
-          border-bottom-right-radius: ${r.sp2};
-        ` : null}
-
-  cursor: pointer;
-  margin-bottom: -1px;
-  &:hover {
-    z-index: 1;
-    border-color: ${(e) => e.theme.colors.primary};
-    color: ${(e) => e.theme.colors.primary};
-    .taskDescriptionText {
-      color: ${(e) => e.theme.colors.primary};
-    }
-    .select-value-container div,
-    .select-value-container label {
-      color: ${(e) => e.theme.colors.primary};
-      border-color: ${(e) => e.theme.colors.primary};
-    }
-  }
-  &:not(:hover) {
-    .timeSpentField input:not(:focus-within) {
-      color: ${(e) => e.theme.colors.hero};
-    }
-  }
-
-  ${(e) => e.isSelected === !0 ? O`
-          z-index: 1;
-          border: 1px solid ${e.theme.colors.primary};
-        ` : O`
-          border: 1px solid ${e.theme.colors.grey3};
-        `}
-  padding-left: ${r.sp4};
-  padding-right: ${r.sp4};
-`, so = o.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: top;
-  column-gap: ${r.sp2};
-  align-items: flex-start;
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-`, io = o(ee)`
-  display: flex;
-  flex-direction: row;
-  column-gap: ${r.sp2};
-  align-items: flex-start;
-`, lo = o(ee)`
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  max-height: ${r.sp4};
-  width: 100%;
-`, ao = o.div`
-  max-width: ${(e) => `${e.isIconPresent ? ae.taskNameMaxWidth.value(e.windowSize) - g[4] : ae.taskNameMaxWidth.value(e.windowSize)}px`};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-block;
-`, co = o(L)`
-  color: ${(e) => e.theme.colors.grey1};
-  max-width: ${(e) => ae.taskNameMaxWidth.valuePx(e.windowSize)};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`, po = o(xt)`
-  display: flex;
-  align-items: center;
-  margin-left: ${r.sp1};
-  color: ${(e) => e.theme.colors.hero};
-  margin-top: ${r.sp1};
-`, ho = o.div`
-  display: flex;
-  column-gap: ${r.sp2};
-  align-items: center;
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-`, uo = o.div`
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  color: ${(e) => e.theme.colors.hero};
-  box-sizing: border-box;
-`, go = o(L)`
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: ${(e) => e.isLastColumn === !0 ? "flex-end" : "flex-start"};
-`, mo = o(L)`
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: ${(e) => e.isLastColumn === !0 ? "flex-end" : "flex-start"};
-  padding-right: ${(e) => e.isLastColumn === !0 ? r.sp2 : r.sp0};
-`, xo = o.div`
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  color: ${(e) => e.theme.colors.hero};
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: ${(e) => e.isLastColumn === !0 ? "flex-end" : "flex-start"};
-`, fo = o.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`, yo = o(L)`
-  color: ${(e) => e.theme.colors.hero};
-  max-width: ${r.sp11};
-  overflow: hidden;
-  margin-right: ${r.sp2};
-`, $o = o(te)`
-  border: 1px solid ${A.neutralGrey2Light};
-  border-radius: ${r.sp1};
-  padding: 1px 6px;
-  color: ${(e) => e.theme.colors.grey1};
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-`, wo = o(te)`
-  border: 1px solid ${(e) => e.theme.colors.hero};
-  min-width: calc(${r.sp3} + ${r.sp1});
-  height: calc(${r.sp3} + ${r.sp1});
-  border-radius: 30%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`, vo = o(Re)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-  color: ${(e) => e.theme.colors.primary};
-`, So = o.div`
-  cursor: pointer;
-  display: flex;
-  transform: ${(e) => e.isOpen ? "rotate(0deg)" : "rotate(-90deg)"};
-`, bo = o.div`
-  padding-left: ${r.sp7};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`, jo = o.div`
-  padding-left: ${r.sp3};
-  cursor: grab;
-`, Co = o.div`
-  width: 100%;
-`, ko = o(gt)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, Lo = o.div`
-  cursor: pointer;
-`, Po = o(Yr)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, J = o(mt)`
-  color: ${(e) => e.theme.colors.primary};
-`, Oo = o.div`
-  width: ${r.sp5};
-`, Mo = o.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  column-gap: ${r.sp2};
-`, To = o.div`
-  width: ${r.sp6};
-  background-color: ${(e) => e.theme.colors.grey3};
-  border-radius: 2px;
-  overflow: hidden;
-`, zo = o.div`
-  height: ${r.sp2};
-  width: ${(e) => e.percentage}%;
-  background-color: ${(e) => e.fill};
-`, Io = o(L)`
-  color: ${(e) => e.theme.colors.hero};
-`, No = o.img`
-  border-radius: 50%;
-  justify-content: center;
-  color: ${(e) => e.theme.colors.hero};
-  ${(e) => e.isFirstElement === !1 ? O`
-          margin-left: -${r.sp2};
-        ` : null}
-`, Wo = o.div`
-  display: flex;
-  align-items: center;
-  column-gap: ${r.sp2};
-`, Ao = o(te)`
-  border: 1px solid ${(e) => e.theme.colors.grey2};
-  min-width: 20px;
-  height: 20px;
-  border-radius: 30%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: ${(e) => e.theme.colors.hero};
-`, Ro = o.div`
-  width: inherit;
-  position: relative;
-`, Ho = o(Ro)`
-  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
-  color: ${(e) => e.theme.colors.hero};
-  box-sizing: border-box;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-`, Do = o.div`
-  max-width: ${r.sp11};
-`, Bo = o.div`
-  ${(e) => e.isFirstElement === !1 ? O`
-          margin-left: -${r.sp2};
-        ` : null}
-`, Eo = o.div`
-  display: flex;
-  align-items: center;
-`, Vo = o(te)`
-  width: ${r.sp4};
-  height: ${r.sp4};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  background-color: ${(e) => e.theme.colors.grey3};
-  color: ${(e) => e.theme.colors.hero};
-  margin-left: -${r.sp2};
-`, Fo = o.div`
-  display: flex;
-  align-items: center;
-  margin-right: ${r.sp2};
-`, _o = o(Pt)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-  color: ${(e) => e.color};
-  margin-right: ${r.sp2};
-`, Ko = o.div`
-  display: flex;
-  flex-direction: row;
-`, Uo = o.div`
-  display: flex;
-  align-items: center;
-  column-gap: ${r.sp2};
-  color: ${(e) => e.theme.colors.grey1};
-
-  &:hover {
-    color: ${(e) => e.theme.colors.primary};
-  }
-`, Go = o(ft)`
-  width: ${r.sp3};
-  height: ${r.sp3};
-`, Zo = o(ee)`
-  color: inherit;
-`, qo = o.div``;
-export {
-  Yr as S,
-  jr as T,
-  br as U,
-  Ht as Z,
-  H as a,
-  cn as b,
-  an as g,
-  Jr as i,
-  N as t
-};