@zeniai/web-components 3.16.86 → 3.16.87

package/dist/TaskListRow-hFmfH2Et.js

@@ -0,0 +1,1950 @@
+import { d as ce, j as t, e as ze, u as Ie, C as Ue, S as Ge, i as J, c as Z, P as Ze } from "./vendor-.pnpm-D5gxGIYo.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 Xe, allTaskStatus as Je, 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, o as ee, v as ye, s as $e, Z as B, C as A, ay as We, be as rt, aq as ot, F as L, E as te, p as st, ab as Ae, fE as nt, aL as H, a9 as it, x as lt, fJ as at, az as Re, R as f, u as we, eX as ct, fK as dt, aa as pt, fL as ht, fM as ut, fN as gt, aC as be, k as mt, fO as xt, y as ft } from "./index-BtWKMiEc.js";
+import { S as yt } from "./avatar-Dz7aEm3d.js";
+import { Z as $t } from "./ZeniDatePicker-D1zUb_f2.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-BGPkLW2Q.js";
+import { S as Wt } from "./add-C0nqJFLa.js";
+import { H as At, a as Rt } from "./common-CDLCBMrL.js";
+const Dt = ({
+  name: e,
+  defaultValue: s,
+  registerOptions: n,
+  dateFormat: i,
+  style: d,
+  inputStyles: c,
+  minDate: p
+}) => {
+  const { control: a } = ce();
+  return /* @__PURE__ */ t.jsx(
+    ze,
+    {
+      name: e,
+      control: a,
+      defaultValue: s,
+      rules: n,
+      render: ({ field: { value: x, onChange: $ } }) => /* @__PURE__ */ t.jsx(
+        $t,
+        {
+          selectedDate: { date: x.date, businessDay: x.businessDay },
+          onSelectedDateChanged: (P, S) => $({
+            date: P,
+            businessDay: S,
+            showBusinessDay: s.showBusinessDay,
+            maxDate: s.maxDate
+          }),
+          showBusinessDay: s.showBusinessDay,
+          maxDate: s.maxDate,
+          style: d,
+          dateFormat: i,
+          inputStyles: c,
+          minDate: p
+        }
+      )
+    }
+  );
+}, Ht = {
+  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 s = e?.replace(/^companyData\./, "");
+  return Ht[s] || y.getLocalizedStrings().cockpit.userMultiSelectHeaders.selectedUsers;
+};
+function Et(e) {
+  const s = /* @__PURE__ */ new Set();
+  return e.filter((n) => s.has(n.userId) ? !1 : (s.add(n.userId), !0));
+}
+const Ft = o.div`
+  height: ${r.sp4};
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`, Ce = (e, s) => (e = Et(e), e.map((n) => ({
+  ...n,
+  value: n.userId,
+  label: n.firstName != "" || n.lastName != "" ? `${n.firstName} ${s ? n.lastName.slice(0, 1) : n.lastName}` : n.email
+}))), ke = (e) => e.firstName !== "" || e.lastName !== "" ? `${e.firstName} ${e.lastName}` : null, Vt = (e, s) => s && typeof e.label == "string" ? e.label.toLowerCase().includes(s.toLowerCase()) || e.data.email.toLowerCase().includes(s.toLowerCase()) : !0;
+function _t({
+  name: e,
+  allUsers: s,
+  onSelectedUsersChanged: n,
+  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(), F = (h) => {
+    let w = [], v = [];
+    i.length === 0 ? h.forEach((j) => {
+      const C = J(j);
+      C.isRoleSelected = !0, C.isUserSelectionUpdated = !0, w.push(C);
+    }) : h.length === 0 ? i.forEach((j) => {
+      const C = J(j);
+      C.isRoleSelected = !1, v.push(C);
+    }) : i.length > h.length ? (v = i.filter(
+      (j) => !h.find(
+        (C) => C.userId === j.userId
+      )
+    ), v = J(v), v.forEach((j) => {
+      j.isRoleSelected = !1;
+    }), w = [...h]) : i.forEach((j) => {
+      h.forEach((C) => {
+        const K = J(C);
+        j.userId !== C.userId ? (K.isRoleSelected = !0, K.isUserSelectionUpdated = !0) : K.isUserSelectionUpdated = !1, w.push(K);
+      });
+    }), n(w, v);
+  }, V = Ce(s, !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: V
+    }
+  ], 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, se = {
+    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 })
+  }, [ne, _] = Q(!1);
+  return /* @__PURE__ */ t.jsx(
+    Ue,
+    {
+      onClickAway: () => {
+        _(!1);
+      },
+      children: /* @__PURE__ */ t.jsx(
+        Ft,
+        {
+          onClick: (h) => {
+            h.preventDefault(), _(!ne && !b);
+          },
+          className: "userMultiSelectContainer",
+          children: /* @__PURE__ */ t.jsx(
+            Ge,
+            {
+              isMulti: !0,
+              menuPlacement: "bottom",
+              minMenuHeight: 409,
+              maxMenuHeight: 409,
+              menuIsOpen: ne,
+              menuShouldScrollIntoView: !1,
+              defaultValue: W,
+              value: W,
+              filterOption: Vt,
+              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: Xt,
+                Option: cr,
+                DropdownIndicator: $r,
+                IndicatorSeparator: vr,
+                MultiValueRemove: wr,
+                ValueContainer: xr,
+                GroupHeading: Gt,
+                MenuList: Kt
+              },
+              hideSelectedOptions: !1,
+              closeMenuOnSelect: !1,
+              styles: se,
+              options: u,
+              isDisabled: d,
+              classNamePrefix: "grouped-multi-select-field",
+              onChange: (h) => {
+                (h?.length <= s?.length || h?.length < W.length) && (_(!1), F(h));
+              },
+              isClearable: !1,
+              isSearchable: !1,
+              backspaceRemovesValue: !1
+            }
+          )
+        }
+      )
+    }
+  );
+}
+const Kt = (e) => /* @__PURE__ */ t.jsx(Z.MenuList, { ...e, children: me.Children.map(e.children, (s, n) => /* @__PURE__ */ t.jsxs(me.Fragment, { children: [
+  n > 0 && /* @__PURE__ */ t.jsx(Ut, {}),
+  " ",
+  s
+] }, n)) }), Ut = o.div`
+  border-bottom: 1px solid ${A.neutralGrey3Light};
+`, Gt = (e) => {
+  const [s, n] = Q(!0), i = (d) => {
+    d.stopPropagation(), n(!s);
+  };
+  return /* @__PURE__ */ t.jsx(
+    Zt,
+    {
+      className: "group-heading-container",
+      isGroupOpen: s,
+      onClick: i,
+      children: /* @__PURE__ */ t.jsxs(Z.GroupHeading, { ...e, children: [
+        /* @__PURE__ */ t.jsx(qt, { isGroupOpen: s, 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};
+`, Xt = (e) => {
+  const [s, n] = Q(e.selectProps.inputValue), i = qe(null), d = () => {
+    i.current && i.current.focus(), e.selectProps.onInputChange(s, {
+      action: "input-change",
+      prevInputValue: ""
+    });
+  };
+  fe(() => {
+    d();
+  }, []);
+  const c = (a) => {
+    n(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(Jt, { children: [
+      /* @__PURE__ */ t.jsx(er, { children: /* @__PURE__ */ t.jsx(tr, {}) }),
+      /* @__PURE__ */ t.jsx(
+        Qt,
+        {
+          ref: i,
+          value: s,
+          onChange: c,
+          onClick: p,
+          placeholder: y.getLocalizedStrings().cockpit.searchByName
+        }
+      )
+    ] }),
+    e.children
+  ] });
+}, Jt = 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(nt)`
+  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};
+`, sr = o(yt)`
+  margin-right: ${r.sp2};
+  color: ${(e) => e.theme.colors.hero};
+  height: ${r.sp4};
+  width: ${r.sp4};
+`, nr = o(st)`
+  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;
+`, De = o.img`
+  border-radius: 50%;
+  justify-content: center;
+  color: ${(e) => e.theme.colors.hero};
+`, He = o.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: ${r.sp1} 5px;
+`, ar = ({
+  children: e,
+  data: s
+}) => /* @__PURE__ */ t.jsx(
+  B,
+  {
+    maxWidth: "280px",
+    placement: "bottom-start",
+    title: /* @__PURE__ */ t.jsxs(He, { children: [
+      ke(s) != null && /* @__PURE__ */ t.jsx("div", { children: ke(s) }),
+      /* @__PURE__ */ t.jsx("div", { children: s.email })
+    ] }),
+    style: {
+      color: A.championDark,
+      marginTop: "6px"
+    },
+    display: "flex",
+    children: e
+  }
+), cr = (e) => {
+  const { data: s, options: n, isSelected: i } = e;
+  let d = 0;
+  return n.forEach((c) => {
+    c.label === y.getLocalizedStrings().cockpit.userMultiSelectHeaders.allUsers && (d = c.options.findIndex((p) => p.value === s.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: s?.photo !== void 0 ? /* @__PURE__ */ t.jsx(
+        De,
+        {
+          width: r.sp5,
+          height: r.sp5,
+          src: s?.photo.href,
+          alt: y.getLocalizedStrings().cockpit.userProfileAltText,
+          onError: ({ currentTarget: c }) => {
+            c.onerror = null, c.src = ye;
+          },
+          loading: "lazy"
+        }
+      ) : /* @__PURE__ */ t.jsx(
+        $e,
+        {
+          firstName: s?.firstName ?? "",
+          lastName: s?.lastName ?? "",
+          size: `${r.sp5}`,
+          index: d
+        }
+      ) }),
+      /* @__PURE__ */ t.jsxs(dr, { children: [
+        /* @__PURE__ */ t.jsx(pr, { children: e.label }),
+        /* @__PURE__ */ t.jsx(hr, { children: s.email })
+      ] })
+    ] }),
+    !!i && /* @__PURE__ */ t.jsxs("div", { children: [
+      /* @__PURE__ */ t.jsx(nr, {}),
+      /* @__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, ...s }) => {
+  const n = s.selectProps.value, i = n.length > 1;
+  if (n.length === 0)
+    return /* @__PURE__ */ t.jsxs(Z.ValueContainer, { ...s, children: [
+      s.selectProps.value.length === 0 && /* @__PURE__ */ t.jsx(sr, {}),
+      e
+    ] });
+  {
+    const d = n[0], c = n.slice(1).map((p) => p.label).join(", ");
+    return /* @__PURE__ */ t.jsxs(Z.ValueContainer, { ...s, children: [
+      /* @__PURE__ */ t.jsx(Sr, { children: /* @__PURE__ */ t.jsxs(ar, { data: d, children: [
+        d?.photo != null ? /* @__PURE__ */ t.jsx(
+          De,
+          {
+            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: s.getStyles("multiValueLabel", s),
+            children: d.label
+          }
+        )
+      ] }) }),
+      i && /* @__PURE__ */ t.jsx(
+        B,
+        {
+          placement: "bottom-start",
+          title: /* @__PURE__ */ t.jsx(He, { 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(s.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: s,
+  registerOptions: n,
+  value: i,
+  isReadOnly: d,
+  isDisabled: c,
+  pickerStyles: p
+}) => {
+  const { control: a } = ce();
+  return /* @__PURE__ */ t.jsx(
+    ze,
+    {
+      name: e,
+      control: a,
+      defaultValue: i,
+      rules: n,
+      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: s },
+          isReadOnly: d,
+          disable: c,
+          pickerStyles: p
+        }
+      )
+    }
+  );
+}, { taskManagement: Le, common: le } = y.getLocalizedStrings();
+function jr({
+  anchorEl: e,
+  isDefault: s,
+  onAddTask: n,
+  onRename: i,
+  onDelete: d,
+  onCollapseAll: c,
+  onExpandAll: p,
+  onClose: a
+}) {
+  const x = () => {
+    a(), n();
+  }, $ = () => {
+    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(H, { controller: s === !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)
+}, Dr = {
+  key: "tag",
+  value: E.tag,
+  sortOrder: "ascending",
+  width: new f(15, 10, 10)
+}, Hr = {
+  key: "timeSpent",
+  value: E.timeSpent,
+  sortOrder: "ascending",
+  width: new f(13, 13, 13, 15, 15)
+}, N = [
+  Ir,
+  Nr,
+  Wr,
+  Ar,
+  Rr,
+  Dr,
+  Hr
+], 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: s,
+  sortConfig: n
+}) {
+  const i = Ie(), d = we(), [c, p] = Q(
+    J(N)
+  );
+  fe(() => {
+    const l = [...c];
+    for (const b of l)
+      b.key === n.sortKey ? b.sortOrder = n.sortOrder : b.sortOrder = "ascending";
+    p(l);
+  }, [n.sortKey, n.sortOrder]);
+  const a = (l, b) => {
+    let m = b;
+    n.sortKey === l && (m = b === "ascending" ? "descending" : "ascending"), s(l, m);
+  }, x = c.find((l) => l.key === n.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: n.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: n.sortKey,
+              headerdata: x,
+              children: /* @__PURE__ */ t.jsx(Me, {})
+            }
+          )
+        ]
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsx(
+    Pe,
+    {
+      companyNameSticky: e,
+      windowSize: d,
+      children: c.map((l) => /* @__PURE__ */ t.jsxs(
+        Fr,
+        {
+          companyNameSticky: e && l.key === "name",
+          sortDataValue: n.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: n.sortKey,
+                      headerdata: l,
+                      children: /* @__PURE__ */ t.jsx(Me, {})
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ t.jsx(
+              Gr,
+              {
+                sortDataValue: n.sortKey,
+                windowSize: d,
+                isVisible: n.sortKey === l.key,
+                children: /* @__PURE__ */ t.jsx(
+                  Vr,
+                  {
+                    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;
+`, Fr = 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;
+`, Vr = 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" })), D = (e, s, n) => `${e}.${kt}.${s}.${n}`, Te = (e, s, n) => `${e}.${wt}.${s}.${n}`, Xr = (e, s, n) => {
+  const i = n[s];
+  return !!Object.values(n).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)
+}, ls = (e, s) => {
+  const n = s.find((i) => i.tagId === e[0]);
+  return n ? /* @__PURE__ */ t.jsxs(fo, { children: [
+    /* @__PURE__ */ t.jsx(yo, { children: /* @__PURE__ */ t.jsx($o, { children: n.name }, `${n.tagId}_${n.name}`) }),
+    e.length > 1 ? /* @__PURE__ */ t.jsx(wo, { children: `${Be.strings.plus}${e.length - 1}` }) : null
+  ] }) : /* @__PURE__ */ t.jsx(t.Fragment, {});
+}, Jr = ({
+  taskGroup: e,
+  uiState: s,
+  userList: n
+}) => {
+  const { groupByKey: i } = s;
+  if (i === "dueDate") {
+    const d = M.common.timeStrings, c = Ye(e.id);
+    return /* @__PURE__ */ t.jsx(X, { children: d[c] });
+  }
+  if (i === "assignee") {
+    if (e.id === "no_assignee")
+      return /* @__PURE__ */ t.jsx(X, { children: M.taskManagement.taskList.groupingFilters.no_assignee });
+    const c = e.id.split(",").map((a) => n.users.find((x) => x.userId === a)?.user).filter((a) => a != null), p = c.length <= 5 ? null : c.slice(5).map((a) => Xe(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(Fo, { children: `${M.common.strings.plus}${c.length - 5}` })
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ t.jsx(X, { 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(X, { children: M.taskManagement.taskList.groupingFilters.no_tag }) : /* @__PURE__ */ t.jsx(X, { children: e.groupName });
+}, Qr = (e) => Ne.find((s) => s.code === e)?.name ?? M.common.strings.empty, eo = (e) => {
+  const s = tt(e);
+  return /* @__PURE__ */ t.jsxs(Vo, { children: [
+    /* @__PURE__ */ t.jsx(_o, { color: Lt(s) }),
+    /* @__PURE__ */ t.jsx(Zo, { children: Qr(s) })
+  ] });
+}, to = ({
+  taskDetail: e,
+  tagList: s,
+  isSelected: n,
+  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: F } = ce(), V = (u, I) => {
+    const z = D(
+      u,
+      I,
+      je
+    );
+    F(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(
+    so,
+    {
+      isDefaultGroupTask: i,
+      isFirstItem: d,
+      isLastItem: c,
+      isSelected: n,
+      children: [
+        /* @__PURE__ */ t.jsxs(
+          no,
+          {
+            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: D(p, e.id, Ot),
+                registerOptions: {
+                  required: !1
+                },
+                defaultValue: {
+                  selectedOption: e.status.code,
+                  allOptions: Je.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: D(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(
+              Dt,
+              {
+                name: D(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: D(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(s),
+                  selectedOptions: e.tagIds
+                },
+                maxAllowedSelectedValues: 5,
+                name: D(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(
+          Do,
+          {
+            windowSize: l,
+            responsiveWidth: N[6].width,
+            isLastColumn: !0,
+            children: /* @__PURE__ */ t.jsx(Ho, { className: "timeSpentField", children: /* @__PURE__ */ t.jsx(
+              jt,
+              {
+                name: D(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: () => {
+                  V(p, e.id);
+                },
+                style: { background: "none" },
+                inputStyle: {
+                  textAlign: "right",
+                  padding: `${r.sp0} ${r.sp2}`
+                }
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}, as = ({
+  taskGroup: e,
+  tagList: s,
+  sectionId: n,
+  uiState: i,
+  userList: d,
+  showGroupName: c,
+  showRenameTextField: p,
+  isCollapsed: a,
+  isSelectionAllowed: x,
+  selectedRowIds: $,
+  existingTaskGroupNamesByGroupId: P,
+  onRenameClick: S,
+  onDeleteTaskGroup: l,
+  onExpandAll: b,
+  onCollapseAll: m,
+  onAddNewTaskToTaskGroup: F,
+  onCollapseToggle: V,
+  onTaskManagementRowClick: W,
+  onColumnSortConfigChanged: u,
+  onDragStart: I,
+  onTimeSpentUpdate: z,
+  onShowToast: re,
+  onCreateTagClick: oe
+}) => {
+  const [de, q] = Q(null), pe = we(), { groupByKey: se, sortKey: ne, sortOrder: _ } = i, { setFocus: h, control: w } = ce(), v = U(() => {
+    V(e.id);
+  }, [V, e.id]), j = U(
+    (k) => {
+      q(k.currentTarget);
+    },
+    []
+  ), C = U(() => {
+    q(null);
+  }, []), K = U(() => {
+    F(e.id);
+  }, [F, e.id]), Ee = U(() => {
+    q(null), l(e.id);
+  }, [l, e.id]), Fe = U(() => {
+    S(), C();
+  }, [C, S]);
+  fe(() => {
+    p && h(`${n}.${ge}`);
+  }, [n, p, h]);
+  const ve = !!w.getFieldState(`${n}.${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, Ve = 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(H, { 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(H, { 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(n, e.id, ge),
+            placeholder: xe.taskList.taskGroup.groupNamePlaceholder,
+            registerOptions: {
+              required: !0,
+              validate: (k) => Xr(
+                k,
+                e.id,
+                P
+              ) === !1
+            }
+          }
+        ) }),
+        /* @__PURE__ */ t.jsx(H, { controller: p === !1, children: /* @__PURE__ */ t.jsxs(Mo, { children: [
+          /* @__PURE__ */ t.jsx(
+            Jr,
+            {
+              userList: d,
+              uiState: i,
+              taskGroup: e
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            H,
+            {
+              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(H, { 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: Fe,
+          isDefault: e.isDefault,
+          anchorEl: de
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ t.jsx(
+      H,
+      {
+        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: ne,
+                      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: n,
+                      tagList: s,
+                      isSelected: $.includes(k.id),
+                      isDefaultGroupTask: e.isDefault === !0 && se === "groupName",
+                      isFirstItem: Se === 0,
+                      isLastItem: Se === e.tasks.length - 1,
+                      userList: Ve,
+                      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(n, e.id, Nt),
+            style: {
+              width: "100%",
+              rowGap: e.isDefault === !0 && se === "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%;
+`, so = 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};
+`, no = 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};
+`, X = 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;
+`, Do = 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;
+`, Ho = 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;
+`, Fo = 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};
+`, Vo = 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,
+  Dt as Z,
+  D as a,
+  as as b,
+  ls as g,
+  Xr as i,
+  N as t
+};