@zeniai/web-components 3.16.58 → 3.16.59

package/dist/TaskDetailPage-D67uUHKh.js

@@ -0,0 +1,2533 @@
+import { j as t, d as le, u as it, m as pe, e as at, br as Et, c as H, o as Ft, g as Rt, h as Mt, F as zt } from "./vendor-.pnpm-Q8NJHkXi.js";
+import * as fe from "react";
+import { useRef as Bt, useEffect as ae, useMemo as Nt, useCallback as _t, Fragment as At, useState as nt } from "react";
+import o from "@emotion/styled";
+import { useCreateThread as qt, useThreads as lt } from "@liveblocks/react";
+import { zeniDate as Ee, getMinAllowedEndDate as Wt, toRecurringFrequency as Fe, allTaskPriority as Ve, allTaskStatus as He, dateNow as be, convertHHMMStrToMinutes as Vt, getRecurringEndDateFromCount as Ht } from "@zeniai/client-epic-state";
+import { a as te, fN as Kt, A as Gt, fz as Yt, S as r, C as x, Z as Re, E as st, aq as dt, p as ct, t as ne, z as Ut, n as Zt, b as ut, u as he, aB as Ke, R as w, D as u, av as pt, fO as Xt, aH as ht, fP as Jt, V as Qt, a0 as er, eZ as tr, fQ as rr, fi as or, y as ir, aD as ce, fR as ar, aL as nr, fJ as lr, fS as sr, fT as dr, fU as cr, ap as ur, G as gt, eO as pr, ax as hr, ba as gr, x as mr, P as fr, fM as br, L as xr, am as yr } from "./index-CkG1pP2v.js";
+import { Composer as $r } from "@liveblocks/react-ui";
+import { css as wr } from "@emotion/react";
+import { L as mt } from "./LabeledSingleSelectField-Cq649DD8.js";
+import { M as vr } from "./MoreMenuButton-j8o88LNj.js";
+import { S as Sr } from "./hyperlink-DQyCeXx2.js";
+const {
+  collaboration: {
+    threads: {
+      placeholder: { addANewComment: kr }
+    }
+  }
+} = te.getLocalizedStrings(), Dr = (e) => {
+  const n = Bt(null), {
+    allowComposer: a = !0,
+    filter: l,
+    showDeleted: p = !1,
+    showReactions: m = !0,
+    showAttachments: s = !1,
+    autoExpand: g = !1,
+    autoFocus: S = !1,
+    showActions: C = "hover",
+    indentContent: $ = !0,
+    textOverrides: v,
+    threadMetadata: k,
+    style: z,
+    composerContainerStyle: O,
+    threadsContainerStyle: W,
+    threadStyle: F,
+    onThreadClick: A
+  } = e, { composerPlaceholder: B = kr } = v, K = qt(), { threads: V, isLoading: R, hasFetchedAll: X, isFetchingMore: J, fetchMore: y } = lt({
+    query: {
+      metadata: l
+    }
+  });
+  ae(() => {
+    const d = setTimeout(() => y?.(), 0);
+    return () => clearTimeout(d);
+  });
+  const I = R || J === !0 || X !== !0, G = Nt(() => V ? Kt(V) : [], [V]), c = _t(
+    ({ body: d }, L) => {
+      L.preventDefault(), L.stopPropagation(), k != null && (K({
+        body: d,
+        metadata: k
+      }), n.current?.scrollTo({ top: 0 }));
+    },
+    [K, k]
+  );
+  return /* @__PURE__ */ t.jsxs(Cr, { style: z, children: [
+    I === !0 ? /* @__PURE__ */ t.jsx(Tr, { children: /* @__PURE__ */ t.jsx(
+      Gt,
+      {
+        size: "Standard",
+        style: { color: "inherit" },
+        start: !0
+      }
+    ) }) : /* @__PURE__ */ t.jsx(jr, { style: W, ref: n, children: G.map((d) => /* @__PURE__ */ t.jsx(
+      Yt,
+      {
+        thread: d,
+        showDeleted: p,
+        showActions: C,
+        autoExpand: g,
+        autoFocus: S,
+        showReactions: m,
+        indentContent: $,
+        textOverrides: v,
+        showAttachments: s,
+        style: F,
+        onThreadClick: (L) => A(L)
+      },
+      d.id
+    )) }),
+    a && k != null && I === !1 ? /* @__PURE__ */ t.jsx(Lr, { style: O, children: /* @__PURE__ */ t.jsx(
+      $r,
+      {
+        onComposerSubmit: c,
+        overrides: {
+          COMPOSER_PLACEHOLDER: B
+        },
+        defaultCollapsed: !0,
+        showAttachments: s,
+        autoFocus: !1
+      }
+    ) }) : null
+  ] });
+}, Cr = o.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: ${r.sp0};
+  background-color: inherit;
+  border: none;
+  gap: ${r.sp0};
+`, jr = o.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${r.sp3};
+
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+  padding-bottom: ${r.sp5};
+  &::-webkit-scrollbar {
+    width: ${r.sp2};
+    height: ${r.sp2};
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: transparent;
+  }
+
+  &:hover {
+    scrollbar-color: ${(e) => e.theme.colors.grey1} transparent;
+    &::-webkit-scrollbar {
+      width: ${r.sp2};
+      height: ${r.sp2};
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-track {
+      box-shadow: inset 0 0 2px ${x.scrollbarBoxShadow};
+      -webkit-box-shadow: inset 0 0 2px ${x.scrollbarBoxShadow};
+      background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${(e) => e.theme.colors.grey1};
+      border-radius: 2px;
+    }
+  }
+`, Lr = o.div`
+  width: 100%;
+  padding: ${r.sp5} ${r.sp0};
+  align-items: center;
+  justify-content: center;
+  display: flex;
+
+  .lb-composer {
+    width: 360px;
+  }
+`, Tr = o.div`
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  background-color: inherit;
+`, { dropDowns: Or, common: Pr } = te.getLocalizedStrings(), Ir = ({
+  name: e,
+  registerOptions: n,
+  defaultValue: a,
+  maxAllowedSelectedValues: l = 2,
+  isLoading: p,
+  isDisabled: m,
+  customStyleConfig: s,
+  placeholder: g,
+  placeholderComponent: S,
+  isListView: C,
+  onCreateOption: $,
+  onDeleteOption: v,
+  customCreateLabel: k
+}) => {
+  const {
+    control: z,
+    formState: { errors: O },
+    getValues: W
+  } = le(), F = it(), A = pe(O, e ?? ""), B = W(e)?.selectedOptions ?? [], K = (c) => c.map((d) => V(d)), V = (c) => ({
+    value: c.value,
+    label: c.label,
+    isDeleted: c.isDeleted
+  }), R = {
+    ...s,
+    control: (c, d) => ({
+      ...c,
+      padding: `0 ${r.sp3}`,
+      backgroundColor: A ? x.importantLight : d.menuIsOpen ? F.colors.background : F.colors.grey5,
+      "&:hover": {
+        backgroundColor: d.isDisabled ? F.colors.grey5 : A ? x.importantLight : F.colors.background
+      },
+      ...s?.control?.(c, d)
+    }),
+    container: (c, d) => ({
+      ...c,
+      width: "100%",
+      ...s?.container?.(c, d)
+    }),
+    valueContainer: (c, d) => ({
+      ...c,
+      ".selected-options": {
+        display: d.selectProps.menuIsOpen ? "none" : "block"
+      },
+      flexWrap: "wrap",
+      ...s?.valueContainer?.(c, d)
+    }),
+    input: (c, d) => ({
+      ...c,
+      width: d.selectProps.menuIsOpen === !1 && B.length === 0 ? "100%" : d.selectProps.menuIsOpen === !1 && B.length > 0 ? r.sp0 : "fit-content",
+      ...s?.input?.(c, d)
+    }),
+    menu: (c, d) => ({
+      ...c,
+      backgroundColor: F.colors.grey5,
+      borderRadius: r.sp1,
+      boxShadow: `${r.sp0} 2px ${r.sp2} ${F.colors.dropShadowHover}`,
+      whiteSpace: "nowrap",
+      zIndex: 2,
+      width: "100%",
+      margin: 0,
+      ...s?.menu?.(c, d)
+    }),
+    menuList: (c) => ({
+      ...c,
+      borderRadius: 0
+    })
+  }, X = { hasError: A, placeholderComponent: S, isListView: C }, J = (c, d) => {
+    const L = c;
+    l && d.length >= l || $ && $(L);
+  }, y = (c) => c.selectedOptions.map((d) => {
+    const L = c.allOptions.find(
+      (re) => re.value === d
+    );
+    return {
+      label: L?.label ?? "",
+      value: L?.value ?? "",
+      isDeleted: L?.isDeleted
+    };
+  }), I = () => null, G = (c) => c.filter(
+    (L) => L.isDeleted !== !0 || L.isDeleted === void 0 || L.isDeleted == null
+  );
+  return /* @__PURE__ */ t.jsx(
+    at,
+    {
+      name: e,
+      control: z,
+      defaultValue: a,
+      rules: n,
+      render: ({ field: { onChange: c, value: d, onBlur: L, ref: re } }) => {
+        const oe = d;
+        return /* @__PURE__ */ t.jsx(
+          Et,
+          {
+            ...X,
+            ref: re,
+            isMulti: !0,
+            createOptionPosition: "last",
+            allowCreateWhileLoading: !0,
+            isSearchable: !0,
+            isClearable: !0,
+            isLoading: p,
+            controlShouldRenderValue: !0,
+            placeholder: g,
+            formatCreateLabel: (N) => k ? k(N) : `${Or.otherOption} ${N}`,
+            onCreateOption: (N) => J(N, d.selectedOptions),
+            value: y(oe),
+            options: G(
+              K(oe.allOptions)
+            ),
+            onChange: (N) => {
+              l && N.length > l || c({
+                selectedOptions: N.map(
+                  (ge) => ge?.value
+                ),
+                allOptions: oe.allOptions
+              });
+            },
+            tabSelectsValue: !1,
+            openMenuOnFocus: !0,
+            classNamePrefix: "creatable-multi-select-field",
+            onBlur: L,
+            menuPlacement: "auto",
+            maxMenuHeight: 288,
+            menuShouldScrollIntoView: !1,
+            closeMenuOnSelect: !1,
+            components: {
+              Control: Er,
+              Option: (N) => _r(N, v),
+              Input: Rr,
+              MultiValue: Mr,
+              MultiValueLabel: zr,
+              ValueContainer: Fr,
+              DropdownIndicator: io,
+              IndicatorSeparator: ao,
+              Placeholder: Nr,
+              MultiValueRemove: Br,
+              ClearIndicator: I
+            },
+            hideSelectedOptions: !1,
+            styles: R,
+            isDisabled: m != null
+          }
+        );
+      }
+    }
+  );
+}, Er = (e) => {
+  const { menuIsOpen: n, isFocused: a, isDisabled: l, selectProps: p } = e, { value: m, hasError: s } = p;
+  return /* @__PURE__ */ t.jsx(
+    Ar,
+    {
+      menuIsOpen: n,
+      isFocused: a,
+      isDisabled: l,
+      optionsLen: m.length,
+      hasError: s,
+      children: /* @__PURE__ */ t.jsx(H.Control, { ...e, className: "select-control", children: e.children })
+    }
+  );
+}, Fr = (e) => {
+  const { selectProps: n } = e, { value: a, placeholderComponent: l, isListView: p } = n, m = a.length, s = m > 1;
+  if (m === 0 && l != null)
+    return /* @__PURE__ */ t.jsxs(H.ValueContainer, { ...e, children: [
+      e.children,
+      n.menuIsOpen === !1 ? l : null
+    ] });
+  if (s && n.menuIsOpen === !1 && p === !0) {
+    const g = a.slice(1).map((S) => S.label).join(", ");
+    return /* @__PURE__ */ t.jsxs(H.ValueContainer, { ...e, className: "select-value-container", children: [
+      e.children,
+      /* @__PURE__ */ t.jsxs(oo, { children: [
+        /* @__PURE__ */ t.jsx(
+          Re,
+          {
+            placement: "bottom-start",
+            title: /* @__PURE__ */ t.jsx(Ue, { children: a[0].label }),
+            style: {
+              color: x.championDark,
+              marginTop: "6px"
+            },
+            display: "flex",
+            children: /* @__PURE__ */ t.jsx(ro, { children: a[0].label })
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          Re,
+          {
+            placement: "bottom-start",
+            title: /* @__PURE__ */ t.jsx(Ue, { children: g }),
+            style: {
+              color: x.championDark,
+              marginTop: "6px"
+            },
+            display: "flex",
+            children: /* @__PURE__ */ t.jsx(eo, { children: /* @__PURE__ */ t.jsxs(to, { children: [
+              Pr.strings.plus,
+              m - 1
+            ] }) })
+          }
+        )
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ t.jsxs(H.ValueContainer, { ...e, className: "select-value-container", children: [
+    e.children,
+    /* @__PURE__ */ t.jsx(qr, { className: "selected-options", children: a.map(
+      (g) => g.label ? /* @__PURE__ */ t.jsx(Wr, { isListView: p, children: g.label }, g.value) : /* @__PURE__ */ t.jsx(At, {}, g.value)
+    ) })
+  ] });
+}, Rr = (e) => {
+  const { selectProps: n } = e, { placeholder: a, value: l, placeholderComponent: p } = n;
+  return l.length === 0 && p != null && n.menuIsOpen === !1 ? /* @__PURE__ */ t.jsx(Qr, { children: /* @__PURE__ */ t.jsx(
+    H.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: l.length === 0 ? a : void 0,
+      children: e.children
+    }
+  ) }) : /* @__PURE__ */ t.jsx(
+    H.Input,
+    {
+      ...e,
+      autoComplete: "new-password",
+      placeholder: l.length === 0 ? a : void 0,
+      children: e.children
+    }
+  );
+}, Mr = (e) => /* @__PURE__ */ t.jsx(H.MultiValue, { ...e, children: e.children }), zr = (e) => {
+  const { data: n } = e;
+  return /* @__PURE__ */ t.jsx(H.MultiValueLabel, { ...e, children: n.label });
+}, Br = () => null, Nr = () => null, _r = ({ children: e, ...n }, a) => {
+  const { data: l, isSelected: p, options: m, isDisabled: s, isFocused: g } = n, { value: S } = l, { onClick: C, type: $ } = l, v = m.find(
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (k) => k.value === l.value
+  );
+  return /* @__PURE__ */ t.jsx(
+    Hr,
+    {
+      className: "select-option-wrapper",
+      isFocused: g,
+      isSelected: p,
+      isDisabled: s,
+      isLastOptionAction: $ === "button",
+      children: /* @__PURE__ */ t.jsx(H.Option, { ...n, className: "select-option", children: /* @__PURE__ */ t.jsxs(Kr, { onClick: C, children: [
+        /* @__PURE__ */ t.jsxs(Zr, { isSelected: p, children: [
+          /* @__PURE__ */ t.jsxs(Ur, { isSelected: p, isDisabled: s, children: [
+            /* @__PURE__ */ t.jsx(Te, { children: v.Logo ? /* @__PURE__ */ t.jsx(v.Logo, {}) : null }),
+            /* @__PURE__ */ t.jsxs(Vr, { children: [
+              n.label,
+              v.subLabels ? /* @__PURE__ */ t.jsx(v.subLabels, {}) : null
+            ] })
+          ] }),
+          g === !0 && v.info ? /* @__PURE__ */ t.jsx(Gr, { isSelected: !!p, children: v.info }) : null
+        ] }),
+        a ? /* @__PURE__ */ t.jsx(Te, { children: /* @__PURE__ */ t.jsx(
+          Yr,
+          {
+            onClick: (k) => {
+              k.stopPropagation(), a(S);
+            },
+            className: "delete-icon"
+          }
+        ) }) : /* @__PURE__ */ t.jsx(t.Fragment, {}),
+        p ? /* @__PURE__ */ t.jsxs(Te, { children: [
+          /* @__PURE__ */ t.jsx(Xr, { className: "right-tick-icon" }),
+          /* @__PURE__ */ t.jsx(Jr, { className: "close-tick-icon" })
+        ] }) : null
+      ] }) })
+    }
+  );
+}, Ar = o.div`
+  width: 100%;
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+
+  .select-control {
+    border: none;
+    min-height: 100%;
+    box-shadow: none;
+
+    &:hover {
+      fill: ${(e) => e.theme.colors.primary};
+    }
+
+    width: auto;
+    cursor: pointer;
+
+    .creatable-multi-select-field__indicators {
+      display: ${(e) => e.isFocused ? "flex" : "none"};
+    }
+
+    .creatable-multi-select-field__clear-indicator {
+      padding: 0;
+      margin-left: ${r.sp2};
+      color: ${(e) => e.theme.colors.primary};
+      transition: none;
+      &:hover {
+        background-color: transparent;
+        color: ${(e) => e.theme.colors.primary};
+      }
+    }
+
+    .creatable-multi-select-field__value-container {
+      gap: ${(e) => e.isFocused ? `${r.sp2}` : `${r.sp0}`};
+    }
+  }
+
+  .select-value-container {
+    width: 100%;
+    padding: 6px ${r.sp0};
+    overflow: auto;
+    display: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "block" : "flex"};
+    justify-content: flex-start;
+    align-items: center;
+    cursor: pointer;
+
+    ${ne.extraSmallRegular.css};
+
+    .selected-options {
+      overflow: initial;
+      text-overflow: unset;
+      white-space: initial;
+      text-align: right;
+
+      ${ne.extraSmallRegular.css};
+    }
+
+    .creatable-multi-select-field__multi-value {
+      padding: 1px 6px;
+      min-width: fit-content;
+      background-color: transparent;
+      margin: ${r.sp0};
+      display: ${(e) => e.isFocused ? "flex" : "none"};
+      color: ${(e) => e.hasError ? x.important : e.theme.colors.primary};
+      border: 1px solid ${(e) => e.theme.colors.primary};
+      box-sizing: border-box;
+      border-radius: ${r.sp1};
+      :last-of-type {
+        margin: ${r.sp0};
+      }
+    }
+
+    .creatable-multi-select-field__input-container {
+      display: flex;
+      ${ne.standardRegular.css};
+      color: ${(e) => e.hasError ? x.important : e.theme.colors.primary};
+      margin: ${r.sp0};
+      cursor: inherit;
+
+      > input {
+        text-align: ${(e) => e.isFocused === !1 && e.optionsLen === 0 ? "right" : "initial"};
+        align-items: center;
+        z-index: ${(e) => e.isFocused ? 2 : "auto"};
+        overflow: hidden;
+        cursor: inherit;
+
+        ::placeholder {
+          color: ${(e) => e.hasError ? x.important : e.theme.colors.grey1};
+        }
+
+        :disabled {
+          visibility: visible;
+        }
+      }
+    }
+
+    .creatable-multi-select-field__multi-value__label {
+      color: inherit;
+      padding: 0;
+      ${ne.extraSmallRegular.css};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .creatable-multi-select-field__multi-value__remove {
+      padding: 0;
+      &:hover {
+        background-color: transparent;
+        color: ${(e) => e.theme.colors.primary};
+      }
+    }
+  }
+`, qr = o(ct)`
+  color: ${(e) => e.theme.colors.primary};
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: right;
+`, Wr = o.label`
+  color: inherit;
+  padding: 1px 6px;
+  min-width: fit-content;
+  background-color: transparent;
+  margin: ${r.sp2};
+  border: 1px solid
+    ${(e) => e.isListView ? e.theme.colors.grey2 : e.theme.colors.primary};
+  box-sizing: border-box;
+  border-radius: ${r.sp1};
+  :last-of-type {
+    margin: ${r.sp0};
+  }
+`, Vr = o.div``, Hr = o.div`
+  .select-option {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    ${ne.extraSmallRegular.css}
+    height: ${r.sp6};
+    padding: ${r.sp2} ${r.sp3};
+    color: ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.hero};
+    opacity: ${(e) => e.isDisabled ? 0.32 : 1};
+    background-color: ${(e) => e.isSelected ? e.theme.colors.grey3 : e.theme.colors.grey5};
+    ${(e) => e.isFocused && wr`
+        background-color: ${e.theme.colors.background};
+      `};
+    cursor: ${(e) => e.isDisabled ? "not-allowed" : "pointer"};
+    border-top: ${(e) => `${e.isLastOptionAction ? `1px solid ${e.theme.colors.grey3}` : "unset"}`};
+    .close-tick-icon {
+      display: none;
+    }
+    .delete-icon {
+      display: none;
+    }
+    &:hover {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.theme.colors.background};
+      color: ${(e) => e.isDisabled ? x.neutralGrey1Light : e.theme.colors.primary};
+      .right-tick-icon {
+        display: none;
+      }
+      .close-tick-icon {
+        display: inline-block;
+        margin-left: ${r.sp3};
+      }
+      .delete-icon {
+        display: inline-block;
+      }
+    }
+  }
+`, Kr = o.div`
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+`, Gr = o.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.primary};
+  align-items: center;
+  flex-direction: row;
+  justify-content: flex-end;
+  margin: ${r.sp0} ${r.sp3};
+  margin-right: ${(e) => e.isSelected ? r.sp3 : r.sp5};
+`, Yr = o(Ut)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, Ur = o.label`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  justify-content: center;
+  padding: 1px 6px;
+  border-radius: ${r.sp1};
+  border: 1px solid
+    ${(e) => e.isSelected ? e.theme.colors.primary : e.theme.colors.grey2};
+  cursor: ${(e) => e.isDisabled ? "not-allowed" : e.isSelected ? "default" : "pointer"};
+`, Zr = o.div`
+  width: ${(e) => e.isSelected ? `calc(100% - ${r.sp3})` : "100%"};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`, Te = o.div`
+  display: flex;
+`, Xr = o(Zt)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, Jr = o(ut)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, Qr = o.div`
+  height: ${r.sp0};
+  width: ${r.sp0};
+`, eo = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${r.sp4};
+  height: ${r.sp4};
+  color: inherit;
+  border-radius: ${r.sp1};
+  padding: ${r.sp0} ${r.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey2};
+  box-sizing: border-box; // To ensure the border and padding are included in the width and height
+`, to = o(dt)`
+  color: inherit;
+  text-align: center;
+`, Ue = o.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding: ${r.sp1} 5px;
+`, ro = o(st)`
+  padding: ${r.sp0} ${r.sp2};
+  max-width: 104px;
+  padding-top: 2px;
+  height: ${r.sp4};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid ${(e) => e.theme.colors.grey2};
+  border-radius: ${r.sp1};
+  box-sizing: border-box;
+`, oo = o.div`
+  display: flex;
+  column-gap: ${r.sp1};
+  align-items: center;
+`, io = () => null, ao = () => null, Z = {
+  width: new w(343, 580, 726),
+  height: new w(u[6], u[6]),
+  paddingTopBottom: new w(u[2], u[2]),
+  marginRight: new w(u[2], u[2]),
+  labelMarginLeft: new w(u[3], u[4]),
+  labelMarginRight: new w(u[3], u[4]),
+  labelMarginTop: new w(u[2], u[2])
+}, no = {
+  infoLabel: new pt("extraSmallRegular", "smallRegular")
+};
+function lo({
+  isDisabled: e,
+  label: n,
+  creatableMultiSelectField: a,
+  style: l,
+  errorInfoLabel: p
+}) {
+  const m = he(), {
+    formState: { errors: s }
+  } = le(), g = pe(s, a.name ?? "");
+  return /* @__PURE__ */ t.jsxs(
+    so,
+    {
+      size: m,
+      style: l,
+      isDisabled: e != null,
+      hasError: g,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          Ke,
+          {
+            isDisabled: e,
+            label: n.label,
+            htmlFor: a.name,
+            style: {
+              marginLeft: Z.labelMarginLeft.value(m),
+              marginRight: Z.labelMarginRight.value(m),
+              marginTop: Z.labelMarginTop.value(m),
+              width: n.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(co, { labelWidth: n.width, children: [
+          /* @__PURE__ */ t.jsx(
+            Ir,
+            {
+              ...a,
+              isDisabled: e
+            }
+          ),
+          g ? /* @__PURE__ */ t.jsx(uo, { size: m, hasError: g, children: p }) : null
+        ] })
+      ]
+    }
+  );
+}
+const so = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => Z.width.valuePx(e.size)};
+  min-height: ${(e) => Z.height.valuePx(e.size)};
+  padding-right: ${(e) => Z.marginRight.valuePx(e.size)};
+  padding-top: ${(e) => Z.paddingTopBottom.valuePx(e.size)};
+  padding-bottom: ${(e) => Z.paddingTopBottom.valuePx(e.size)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 2;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .select-control {
+      background-color: ${(e) => e.hasError ? x.importantLight : e.theme.colors.background};
+    }
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: ${(e) => e.isDisabled === !0 ? "none" : `1px solid ${e.theme.colors.primary}`};
+    .select-control {
+      background-color: ${(e) => e.isDisabled ? e.theme.colors.grey5 : e.hasError ? x.importantLight : e.theme.colors.background};
+    }
+  }
+`, co = o.div`
+  display: flex;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  justify-content: flex-end;
+  flex-direction: column;
+  position: relative;
+`, uo = o.label`
+  color: ${(e) => e.hasError === !0 ? x.important : e.additionalInfoTextColor != null ? e.additionalInfoTextColor : e.theme.colors.grey1};
+  width: auto;
+  ${(e) => `${no.infoLabel.style(e.size)}`};
+  padding-right: ${r.sp3};
+  text-align: right;
+`, {
+  taskManagement: {
+    common: { timeSpentPlaceholder: po }
+  }
+} = te.getLocalizedStrings();
+function ho({
+  name: e,
+  placeholder: n = po,
+  defaultValue: a = "",
+  timeSpentFormat: l,
+  registerOptions: p = {},
+  onInputBlur: m,
+  style: s = {},
+  inputStyle: g = {}
+}) {
+  const {
+    formState: { errors: S }
+  } = le(), C = pe(S, e), $ = it();
+  return /* @__PURE__ */ t.jsx(
+    Xt,
+    {
+      type: "number",
+      name: e,
+      placeholder: n,
+      prefix: "",
+      allowNegative: !1,
+      isNumericString: !0,
+      inputMode: "numeric",
+      returnValueType: "value",
+      registerOptions: p,
+      decimalScale: 0,
+      allowLeadingZeros: !0,
+      thousandSeparator: !1,
+      format: l,
+      style: {
+        display: "flex",
+        flexGrow: 1,
+        width: "-webkit-fill-available",
+        cursor: "inherit",
+        backgroundColor: $.colors.grey3,
+        borderRadius: r.sp1,
+        color: $.colors.primary,
+        height: r.sp6,
+        ...s
+      },
+      hoverBgColor: $.colors.background,
+      disabledColor: $.colors.background,
+      isFieldError: C,
+      defaultValue: a,
+      onClick: (v) => {
+        v.stopPropagation();
+      },
+      onInputBlur: m,
+      inputStyle: g
+    }
+  );
+}
+const Me = {
+  width: new w(343, 580, 726),
+  labelMarginLeft: new w(u[3], u[4]),
+  labelMarginRight: new w(u[3], u[4])
+}, go = {
+  infoLabel: new pt("extraSmallRegular", "smallRegular")
+};
+function mo({
+  name: e,
+  isDisabled: n,
+  label: a,
+  placeholder: l,
+  timeSpentFormat: p,
+  defaultValue: m,
+  style: s,
+  registerOptions: g
+}) {
+  const S = he(), {
+    formState: { errors: C }
+  } = le(), $ = pe(C, e), {
+    common: {
+      snackBar: { task_time_spent_validation: v }
+    }
+  } = te.getLocalizedStrings();
+  return /* @__PURE__ */ t.jsxs(
+    fo,
+    {
+      size: S,
+      style: s,
+      isDisabled: n != null,
+      isError: $,
+      children: [
+        /* @__PURE__ */ t.jsx(
+          Ke,
+          {
+            isDisabled: n,
+            label: a.label,
+            style: {
+              marginLeft: Me.labelMarginLeft.value(S),
+              marginRight: Me.labelMarginRight.value(S),
+              marginTop: u[2],
+              width: a.width ?? "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ t.jsxs(bo, { labelWidth: a.width, children: [
+          /* @__PURE__ */ t.jsx(
+            ho,
+            {
+              name: e,
+              defaultValue: m,
+              placeholder: l,
+              timeSpentFormat: p,
+              registerOptions: g
+            }
+          ),
+          $ === !0 && /* @__PURE__ */ t.jsx(xo, { size: S, isError: $, children: v.failed })
+        ] })
+      ]
+    }
+  );
+}
+const fo = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  width: ${(e) => Me.width.valuePx(e.size)};
+  min-height: ${r.sp6};
+  padding-right: ${r.sp2};
+  padding-top: ${r.sp2};
+  padding-bottom: ${r.sp2};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:focus-within {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+
+    input {
+      background-color: ${(e) => e.isError ? x.importantLight : e.theme.colors.background};
+    }
+  }
+  input {
+    background-color: ${(e) => e.isError ? x.importantLight : e.theme.colors.grey5};
+  }
+  &:hover {
+    z-index: 1;
+    outline: 1px solid
+      ${(e) => e.isDisabled === !0 ? e.theme.colors.grey3 : e.theme.colors.primary};
+    input {
+      background-color: ${(e) => e.isDisabled === !0 ? e.theme.colors.grey5 : e.isError ? x.importantLight : e.theme.colors.background};
+    }
+  }
+`, bo = o.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => e.labelWidth != null ? `calc(100% - ${e.labelWidth}px)` : "auto"};
+  align-items: flex-end;
+  flex-grow: 1;
+`, xo = o.label`
+  display: flex;
+  color: ${x.important};
+  ${(e) => `${go.infoLabel.style(e.size)}`};
+  padding-right: ${r.sp3};
+  text-align: right;
+`, yo = te.getLocalizedStrings(), { common: ee } = yo, $o = {
+  largeLabelWidth: new w(140, 180, 180)
+}, Oe = {
+  width: "auto",
+  paddingTop: r.sp0,
+  paddingBottom: r.sp0,
+  outline: "none"
+}, wo = (e) => {
+  const {
+    name: n,
+    startMinDate: a,
+    recurringView: l,
+    recurringCountInputLabel: p,
+    onClickSave: m,
+    onClickCancel: s
+  } = e, { selectedFrequency: g, selectedStartDate: S, selectedEndDate: C } = l, $ = S != null ? Ee(S.toDateString()) : void 0, v = he(), k = $o.largeLabelWidth.value(v), z = () => {
+    m();
+  };
+  return /* @__PURE__ */ t.jsxs(vo, { children: [
+    /* @__PURE__ */ t.jsx(
+      mt,
+      {
+        label: {
+          label: `${ee.strings.dividerDot}  ${ee.texts.frequency}`,
+          width: k
+        },
+        singleSelectField: {
+          name: `${n}.selectedFrequency`,
+          defaultValue: {
+            selectedOption: g?.selectedOption,
+            allOptions: g?.allOptions ?? []
+          },
+          registerOptions: {
+            required: !0,
+            validate: (O) => !!O.selectedOption
+          }
+        },
+        style: Oe
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      ht,
+      {
+        label: {
+          label: `${ee.strings.dividerDot}  ${ee.texts.startDate}`,
+          width: k
+        },
+        dateField: {
+          name: `${n}.selectedStartDate`,
+          defaultValue: $,
+          showCalenderIcon: !0,
+          minDate: a
+        },
+        style: Oe
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Jt,
+      {
+        label: {
+          label: `${ee.strings.dividerDot}  ${ee.texts.endDate}`,
+          width: k
+        },
+        dateField: {
+          name: `${n}.selectedEndDate`,
+          placeholder: ee.placeholder.endDatePlaceholder,
+          recurringCountInputLabel: p,
+          defaultValue: {
+            ...C
+          },
+          onSaveClick: z,
+          onCancelEndDate: s,
+          registerOptions: {
+            required: !0,
+            validate: (O) => C?.type === "date" ? O != null : !0
+          },
+          minDate: g?.selectedOption != null ? Wt(
+            Fe(g.selectedOption) ?? "weekly",
+            $
+          ) : void 0,
+          showCalenderIcon: !0
+        },
+        style: Oe
+      }
+    )
+  ] });
+}, vo = o.div`
+  padding: ${r.sp0} ${r.sp0} ${r.sp2} ${r.sp2};
+`, ft = [
+  {
+    label: "Daily",
+    value: "daily"
+  },
+  {
+    label: "Weekly",
+    value: "weekly"
+  },
+  {
+    label: "Biweekly",
+    value: "biweekly"
+  },
+  {
+    label: "Monthly",
+    value: "monthly"
+  },
+  {
+    label: "Quarterly",
+    value: "quarterly"
+  }
+], Pe = {
+  tooltipRightPosition: new w(u[6], u[6]),
+  tooltipTopPosition: new w(35, 35),
+  tooltipWidth: new w(180, 193)
+}, So = ({
+  protectedInfoText: e
+}) => {
+  const n = he();
+  return /* @__PURE__ */ t.jsxs(To, { children: [
+    /* @__PURE__ */ t.jsx(Oo, {}),
+    /* @__PURE__ */ t.jsx(Po, { className: "info-tooltip", windowSize: n, children: /* @__PURE__ */ t.jsx(Io, { children: e }) })
+  ] });
+};
+function ko({
+  name: e,
+  rows: n,
+  placeholder: a,
+  placeholderAlignment: l,
+  autoComplete: p = "off",
+  isDisabled: m,
+  defaultValue: s,
+  style: g,
+  hoverBgColor: S,
+  registerOptions: C,
+  protectedInfoText: $,
+  isSaveError: v = !1,
+  showRightTickIcon: k = !1,
+  disableCopyPaste: z = !1,
+  autoCapitalize: O = "off",
+  autoTrim: W = "off",
+  onKeyDown: F
+}) {
+  const {
+    control: A,
+    register: B,
+    formState: { errors: K }
+  } = le(), V = pe(K, e), R = Object.assign({}, C), X = m === "disabled" || m === "readonly" || $ != null;
+  return $ != null ? /* @__PURE__ */ t.jsxs(jo, { style: g, children: [
+    /* @__PURE__ */ t.jsx(So, { protectedInfoText: $ }),
+    /* @__PURE__ */ t.jsx(Lo, { id: e, children: s })
+  ] }) : /* @__PURE__ */ t.jsx(Do, { children: /* @__PURE__ */ t.jsx(
+    at,
+    {
+      name: e,
+      control: A,
+      rules: {
+        ...C
+      },
+      defaultValue: s ?? "",
+      render: ({ field: { onChange: J, onBlur: y, value: I, ref: G } }) => /* @__PURE__ */ t.jsx(
+        Co,
+        {
+          isError: V,
+          style: g,
+          placeholder: a,
+          disabled: X,
+          ...B(e, R),
+          id: e,
+          value: I,
+          ref: G,
+          autoComplete: p,
+          placeholderAlignment: l,
+          hoverBgColor: S,
+          isSaveError: v,
+          showRightTickIcon: k,
+          onKeyDown: F,
+          rows: n,
+          onBlur: y,
+          onChange: J,
+          onInput: (c) => {
+            const d = c.target;
+            switch (O) {
+              case "off":
+                break;
+              case "characters":
+                d.value = d.value.toLocaleUpperCase();
+                break;
+              case "words":
+                d.value = d.value.charAt(0).toLocaleUpperCase().concat(d.value.slice(1));
+                break;
+            }
+            switch (W) {
+              case "off":
+                break;
+              case "trimStart":
+                d.value = d.value.trimStart();
+                break;
+              case "trimEnd":
+                d.value = d.value.trimEnd();
+                break;
+              case "trim":
+                d.value = d.value.trim();
+                break;
+            }
+          },
+          onPaste: (c) => {
+            z && c.preventDefault();
+          },
+          onCopy: (c) => {
+            z && c.preventDefault();
+          }
+        }
+      )
+    }
+  ) });
+}
+const Do = o.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`, Co = o(er)`
+  display: flex;
+  resize: none;
+  overflow: hidden;
+  border-width: ${r.sp0};
+  outline-width: ${r.sp0};
+  color: ${(e) => !e.isError && e.isSaveError === !1 ? e.theme.colors.primary : x.important};
+  background-color: ${(e) => e.isSaveError === !0 || e.isError ? x.importantLight : e.theme.colors.grey5};
+  border-radius: ${r.sp1};
+  text-align: right;
+  padding: ${(e) => e.showRightTickIcon === !0 ? `0 ${r.sp2} 0 ${r.sp3}` : `0 ${r.sp3}`};
+  ::placeholder {
+    text-align: ${(e) => e.placeholderAlignment};
+    color: ${(e) => e.isError ? x.important : e.theme.colors.grey1};
+  }
+  &:focus {
+    text-align: left;
+    outline: none;
+    background-color: ${(e) => e.isError ? x.importantLight : e.theme.colors.background};
+    ${ne.standardRegular.css};
+  }
+  &:hover {
+    background-color: ${(e) => e.isError ? x.importantLight : e.hoverBgColor !== null ? e.hoverBgColor : e.theme.colors.background};
+  }
+  &:disabled {
+    background-color: ${(e) => e.theme.colors.grey5};
+  }
+`, jo = o.div`
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 0 ${r.sp3};
+`, Lo = o(Qt)`
+  color: ${(e) => e.theme.colors.primary};
+  margin-left: 12px;
+  margin-top: 6px;
+`, To = o.div`
+  color: ${(e) => e.theme.colors.primary};
+`, Oo = o(tr)`
+  color: ${(e) => e.theme.colors.hero};
+  width: ${r.sp3};
+  height: ${r.sp3};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    & + .info-tooltip {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+`, Po = o.div`
+  display: none;
+  background-color: ${(e) => e.theme.colors.primary};
+  position: absolute;
+  padding: 2px 5px;
+  border: 1px solid ${(e) => e.theme.colors.primary};
+  border-radius: ${r.sp1};
+  z-index: 1;
+  right: ${(e) => Pe.tooltipRightPosition.valuePx(e.windowSize)};
+  width: ${(e) => Pe.tooltipWidth.valuePx(e.windowSize)};
+  top: ${(e) => Pe.tooltipTopPosition.valuePx(e.windowSize)};
+`, Io = o(dt)`
+  color: ${(e) => e.theme.colors.grey5};
+`, { attachmentTitle: Eo } = te.getLocalizedStrings().taskManagement.taskDetail, Fo = ({
+  sectionId: e,
+  deleteFileStatusById: n,
+  updateFileStatusById: a,
+  filesEndPoint: l,
+  authParams: p,
+  files: m,
+  updateFilesEntity: s,
+  onEditFileName: g,
+  onDeleteFile: S
+}) => {
+  const [C, $] = nt(!1), { control: v } = le(), { fields: k } = Ft({
+    name: e,
+    control: v
+  }), z = k.filter((O) => O != null);
+  return /* @__PURE__ */ t.jsxs(Ro, { children: [
+    /* @__PURE__ */ t.jsx(zo, { children: /* @__PURE__ */ t.jsx(Mo, { children: Eo }) }),
+    /* @__PURE__ */ t.jsx(Bo, { children: z.map(
+      (O, W) => {
+        const { fileIndex: F, fileId: A } = O;
+        return /* @__PURE__ */ t.jsx(No, { children: /* @__PURE__ */ t.jsx(
+          rr,
+          {
+            name: `${e}.${F}`,
+            sizeLimit: or,
+            deleteFileStatusById: n,
+            updateFileStatusById: a,
+            filesEndPoint: l,
+            authParams: p,
+            filemetadataPayload: {
+              documentType: "others",
+              purposeId: "others",
+              documentSide: "front"
+            },
+            file: m.find((B) => B.fileId === A),
+            acceptableTypes: [
+              "image/jpg",
+              "image/jpeg",
+              "image/png",
+              "application/pdf",
+              "image/heic",
+              "image/heif"
+            ],
+            hasError: C,
+            updateFilesEntity: s,
+            onEditFileName: g,
+            onDeleteFile: S,
+            onFileSizeError: (B) => $(B)
+          },
+          W
+        ) }, W);
+      }
+    ) })
+  ] });
+}, Ro = o.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: ${r.sp3};
+`, Mo = o(ir)`
+  color: ${(e) => e.theme.colors.primary};
+`, zo = o.div`
+  display: flex;
+  width: fit-content;
+  height: ${r.sp8};
+  align-items: center;
+`, Bo = o.div`
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2};
+  margin-bottom: ${r.sp3};
+  &:hover {
+    border: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, No = o.div`
+  margin: ${r.sp1} ${r.sp4};
+  :first-of-type {
+    margin-top: ${r.sp2};
+  }
+  :last-of-type {
+    margin-bottom: ${r.sp2};
+  }
+`, _o = 5999, Bi = "taskManagementPage", Ni = "taskManagementTable", _i = "newGroup", Ai = "groupData", qi = "taskData", Wi = "status", Vi = "priority", Hi = "dueDate", Ki = "assignees", Gi = "tags", Yi = "groupName", Ui = "selectedIds", bt = "timeSpent", ue = [
+  {
+    code: "one_time",
+    name: "One-time"
+  },
+  {
+    code: "recurring",
+    name: "Recurring"
+  }
+], Ao = (e) => /* @__PURE__ */ fe.createElement("svg", { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ fe.createElement("path", { d: "M3.16016 1.43762H13.7852C14.1289 1.43762 14.1908 1.61325 13.922 1.82825L9.72203 5.18762L13.922 8.547C14.1908 8.762 14.1289 8.93762 13.7852 8.93762H3.16016", fill: "currentColor" }), /* @__PURE__ */ fe.createElement("path", { d: "M3.16016 1.43762H13.7852C14.1289 1.43762 14.1908 1.61325 13.922 1.82825L9.72203 5.18762L13.922 8.547C14.1908 8.762 14.1289 8.93762 13.7852 8.93762H3.16016", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ fe.createElement("path", { d: "M1.91016 0.812622V15.1876", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round" })), xt = "name", ze = "description", Be = "status", xe = "assignee", ye = "dueDate", Ne = "priority", $e = "tag", _e = "fileIds", h = "taskDetail", Ze = "taskDetailPage", qo = "taskType", U = "recurringView", _ = (e, n) => `${e}.${n}`, Ae = (e) => `${e}_form`, b = {
+  controlHeight: new w(u[6], 60),
+  height: new w(u[6], u[6]),
+  paddingTopBottom: new w(u[2], u[2]),
+  navBarContainerPaddingXaxis: new w(10, u[3]),
+  marginRight: new w(u[2], u[2]),
+  labelWidth: new w(120, 180, 180),
+  largeLabelWidth: new w(120, 120, 160),
+  marginBottom: new w(u[3], u[3]),
+  rowContentPaddingLeft: new w(u[3], u[4]),
+  labelMarginRight: new w(u[3], u[4]),
+  labelMarginTop: new w(u[2], u[2]),
+  containerPaddingLeft: new w(u[3], u[6], u[8]),
+  containerPaddingRight: new w(u[3], u[5], u[5])
+}, {
+  common: M,
+  taskManagement: {
+    common: { timeSpentPlaceholder: Wo, timeSpentFormat: Vo },
+    taskDetail: j
+  },
+  dateFormat: Ie,
+  dropDowns: Ho,
+  collaboration: {
+    threads: {
+      placeholder: { addANewComment: Ko, replyAComment: Go }
+    }
+  }
+} = te.getLocalizedStrings(), qe = (e) => {
+  switch (e) {
+    case "todo":
+    case "urgent":
+      return x.important;
+    case "in_progress":
+    case "medium":
+    case "normal":
+      return x.info;
+    case "on_hold":
+    case "high":
+      return x.alert;
+    case "done":
+      return x.championLight;
+    case "resolved":
+      return x.successDark;
+    default:
+      return x.neutralGrey2Light;
+  }
+}, We = (e) => {
+  const n = (l) => He.find((p) => p.code === l)?.name ?? "", a = (l) => Ve.find((p) => p.code === l)?.name ?? "";
+  switch (e) {
+    case "todo":
+    case "in_progress":
+    case "on_hold":
+    case "done":
+    case "resolved":
+      return /* @__PURE__ */ t.jsx(pi, { color: qe(e), children: n(e) });
+    case "urgent":
+    case "high":
+    case "medium":
+    case "low":
+      return /* @__PURE__ */ t.jsxs(hi, { children: [
+        /* @__PURE__ */ t.jsx(gi, { color: qe(e) }),
+        /* @__PURE__ */ t.jsx(mi, { children: a(e) })
+      ] });
+    default:
+      return /* @__PURE__ */ t.jsx(t.Fragment, {});
+  }
+}, yt = ft.map(
+  (e) => e.label
+), we = (e) => e.map((n) => ({
+  label: n.name,
+  value: n.tagId,
+  isDeleted: n.isDeleted
+})), Yo = ({
+  taskDetailSelectorView: e,
+  companyName: n,
+  companyId: a,
+  loggedInUser: l,
+  analytics: p,
+  isNewClicked: m,
+  filesEndPoint: s,
+  authParams: g,
+  currentUrl: S,
+  taskId: C,
+  taskGroupName: $,
+  onSaveChangesToLocalStore: v,
+  onSaveDetailClick: k,
+  onArchiveTaskClick: z,
+  onDismissClick: O,
+  handleZeniLogoClick: W,
+  updateFilesEntity: F,
+  onDeleteFile: A,
+  onEditFileName: B,
+  onDeleteTaskClick: K,
+  onReloadTaskDetailPage: V,
+  tagListView: R,
+  onCreateTagClick: X,
+  onDeleteTagClick: J
+}) => {
+  const y = he(), I = b.largeLabelWidth.value(y), G = ce(
+    e.taskDetailView.saveStatus.fetchState
+  ), c = ce(
+    e.taskDetailView.deleteTaskStatus.fetchState
+  ), d = e.taskDetailView.saveStatus.fetchState, L = e.taskDetailView.deleteTaskStatus.fetchState, re = ce(e.taskDetailView.taskId), oe = ce(
+    e.taskDetailView.archiveStatus.fetchState
+  ), N = e.taskDetailView.archiveStatus.fetchState, ge = ce(
+    R.tagCreateStatus.fetchState
+  ), ve = R.tagCreateStatus.fetchState, Se = R.tagDeleteStatusById, Ge = () => {
+    const i = Object.keys(Se);
+    for (let D = 0; D < i.length; D++)
+      if (Se[i[D]].fetchState === "In-Progress")
+        return !0;
+    return !1;
+  };
+  ae(() => {
+    if (G === "In-Progress" && d === "Completed" || c === "In-Progress" && L === "Completed" || oe === "In-Progress" && N === "Completed") {
+      const { taskId: i, taskDetailLocalData: D } = e.taskDetailView;
+      if (re == null && i != null && // new task created
+      l.userEmail != null) {
+        const {
+          name: f,
+          description: P,
+          status: E,
+          assignee: q,
+          dueDate: se,
+          priority: Ce,
+          tagIds: je,
+          fileIds: Le
+        } = D;
+        p.trackTaskCreated({
+          tenantName: n,
+          newButtonClicked: m,
+          taskId: i,
+          activity: {
+            count: Y.formState.dirtyFields[h] != null ? Object.keys(Y.formState.dirtyFields[h]).length : 0,
+            details: {
+              name: f,
+              description: P,
+              status: E,
+              priority: Ce,
+              tags: je,
+              assignees: me.filter((Q) => q.includes(Q.userId)).map((Q) => ({
+                name: Q.firstName.concat(M.strings.space, Q.lastName).trim(),
+                email: Q.email
+              })),
+              dueDate: se?.format(Ie.analytics.YYYYDashMMDashDDFormat) ?? null,
+              numberOfAttachments: Le.length
+            }
+          },
+          createdBy: {
+            name: l.firstName != null ? l.firstName.concat(
+              M.strings.space,
+              l.lastName ?? M.strings.empty
+            ).trim() : l.lastName ?? M.strings.empty,
+            email: l.userEmail
+          }
+        });
+      }
+      O();
+    }
+  }, [
+    G,
+    d,
+    c,
+    L,
+    oe,
+    N,
+    O
+  ]);
+  const [, $t] = ar(), [ke, Ye] = nt(!1), wt = () => {
+    $t(S), Ye(!0);
+  };
+  ae(() => {
+    ke === !0 && setTimeout(() => {
+      Ye(!1);
+    }, 800);
+  }, [ke]);
+  const { threads: vt, fetchMore: St } = lt({
+    query: {
+      metadata: {
+        entityType: "task.details",
+        tab: "task",
+        application: "dashboard",
+        entityId: C ?? M.all
+        // For new task we won't have any comments so using 'all' placeholder
+      }
+    }
+  });
+  ae(() => {
+    const i = setTimeout(() => St?.(), 0);
+    return () => clearTimeout(i);
+  });
+  const kt = vt?.length ?? 0, Y = Rt({
+    mode: "all",
+    reValidateMode: "onBlur",
+    defaultValues: ot(e, R),
+    values: ot(e, R),
+    resetOptions: {
+      keepDirtyValues: !0,
+      keepErrors: !0
+    }
+  });
+  ae(() => {
+    (ge === "In-Progress" && ve === "Completed" || Ge()) && Y.resetField(`${h}.${$e}`, {
+      defaultValue: {
+        selectedOptions: T.tagIds,
+        allOptions: we(R.tagList)
+      }
+    });
+  }, [
+    ge,
+    ve,
+    R.tagList.length,
+    Se
+  ]);
+  const Dt = async (i, D) => {
+    if (i != null) {
+      const f = { ...D };
+      let P = {
+        name: f[h].name,
+        description: f[h][ze],
+        status: f[h][Be].selectedOption,
+        assignee: f[h][xe].selectedUsers.map(
+          (E) => E.userId
+        ),
+        dueDate: f[h][ye] != null ? Ee(f[h][ye].toString()) : void 0,
+        priority: f[h][Ne].selectedOption,
+        tagIds: f[h][$e].selectedOptions,
+        type: ue.find((E) => {
+          const q = f[h]?.taskType?.selectedOption;
+          return E.name === q || typeof q == "string" && q.includes(E.name);
+        }) ?? {
+          code: "one_time",
+          name: "One-time"
+        },
+        recurringEndDateLocalData: {
+          recurringEndDate: f[h][U]?.selectedEndDate?.date,
+          recurringDatePickerOptionsType: f[h][U]?.selectedEndDate?.type,
+          recurringCount: f[h][U]?.selectedEndDate?.recurringCount
+        },
+        recurringFrequency: f[h][U]?.selectedFrequency?.selectedOption != null ? Fe(
+          f[h][U].selectedFrequency.selectedOption.toLocaleLowerCase()
+        ) : void 0,
+        recurringStartDate: f[h][U]?.selectedStartDate != null ? Ee(
+          f[h][U].selectedStartDate.toDateString()
+        ) : be(),
+        fileIds: f[h][_e].filter((E) => E != null).map((E) => E.fileId).filter((E) => E != null),
+        timeSpent: f[h].timeSpent
+      };
+      i.includes("selectedEndDate.date") ? P = {
+        ...P,
+        recurringEndDateLocalData: {
+          ...P.recurringEndDateLocalData,
+          recurringDatePickerOptionsType: "date"
+        }
+      } : i.includes("selectedEndDate.recurringCount") ? P = {
+        ...P,
+        recurringEndDateLocalData: {
+          ...P.recurringEndDateLocalData,
+          recurringDatePickerOptionsType: "recurringCount"
+        }
+      } : i.includes("selectedFrequency") && T.savedRecurringTasksCount != null && T.recurringEndDateLocalData.recurringDatePickerOptionsType === "recurringCount" && (P = {
+        ...P,
+        recurringEndDateLocalData: {
+          recurringCount: 0,
+          recurringDatePickerOptionsType: void 0,
+          recurringEndDate: void 0
+        }
+      }), v(P);
+    }
+  };
+  ae(() => {
+    const i = Y.watch((D, { name: f }) => {
+      f != null && D != null && Mt(() => Dt(f, D));
+    });
+    return () => {
+      i.unsubscribe();
+    };
+  });
+  const Ct = Y.handleSubmit(() => {
+    const {
+      taskDetailView: { taskId: i, taskDetailLocalData: D },
+      createdByUser: f
+    } = e;
+    if (i != null && f != null && l.userEmail != null) {
+      const {
+        name: P,
+        description: E,
+        status: q,
+        assignee: se,
+        dueDate: Ce,
+        priority: je,
+        tagIds: Le,
+        fileIds: Q
+      } = D;
+      p.trackTaskEdited({
+        tenantName: n,
+        taskId: i,
+        activity: {
+          count: Y.formState.dirtyFields[h] != null ? Object.keys(Y.formState.dirtyFields[h]).length : 0,
+          details: {
+            name: P,
+            description: E,
+            status: q,
+            priority: je,
+            tags: Le,
+            assignees: me.filter((de) => se.includes(de.userId)).map((de) => ({
+              name: de.firstName.concat(M.strings.space, de.lastName).trim(),
+              email: de.email
+            })),
+            dueDate: Ce?.format(Ie.analytics.YYYYDashMMDashDDFormat) ?? null,
+            numberOfAttachments: Q.length
+          },
+          byUser: {
+            name: l.firstName != null ? l.firstName.concat(
+              M.strings.space,
+              l.lastName ?? M.strings.empty
+            ).trim() : l.lastName ?? M.strings.empty,
+            email: l.userEmail
+          }
+        },
+        createdBy: {
+          name: f.user.firstName.concat(M.strings.space, f.user.lastName).trim(),
+          email: f.user.email
+        },
+        commentsCreated: kt > 0
+      });
+    }
+    k();
+  }), jt = () => {
+    let i = e.taskDetailView.taskDetailLocalData, D = i.recurringEndDateLocalData?.recurringEndDate;
+    i.recurringEndDateLocalData?.recurringDatePickerOptionsType === "recurringCount" && i.recurringStartDate != null && i.recurringFrequency != null && i.recurringEndDateLocalData.recurringCount != null && (D = Ht(
+      i.recurringStartDate,
+      Fe(
+        i.recurringFrequency.toLocaleLowerCase()
+      ),
+      i.recurringEndDateLocalData.recurringCount
+    )), i = {
+      ...i,
+      savedRecurringEndDate: D,
+      savedRecurringTasksCount: i.recurringEndDateLocalData.recurringCount,
+      recurringEndDateLocalData: {
+        ...i.recurringEndDateLocalData,
+        recurringEndDate: D
+      }
+    }, v(i);
+  }, Lt = () => {
+    let i = e.taskDetailView.taskDetailLocalData;
+    i = {
+      ...i,
+      recurringEndDateLocalData: {
+        ...i.recurringEndDateLocalData,
+        recurringEndDate: i.savedRecurringEndDate,
+        // Reset to originally saved end date
+        recurringCount: i.savedRecurringTasksCount
+        // Reset to originally saved count
+      }
+    }, v(i);
+  }, T = e.taskDetailView.taskDetailLocalData, me = e.userList.users.map((i) => i.user).filter(Boolean), Tt = e.userList.users.map(
+    (i) => i.userRole
+  ), De = e.taskDetailView.taskId != null && re != null, Ot = o.div`
+    display: flex;
+    flex-direction: row;
+  `, Pt = o.div``, It = (i) => /* @__PURE__ */ t.jsx(Ot, { children: /* @__PURE__ */ t.jsx(Pt, { children: `${Ho.createOption} "${i}"` }) });
+  return /* @__PURE__ */ t.jsxs(oi, { windowSize: y, children: [
+    /* @__PURE__ */ t.jsxs(li, { windowSize: y, children: [
+      /* @__PURE__ */ t.jsxs(ci, { windowSize: y, children: [
+        /* @__PURE__ */ t.jsx(ui, { onClick: W }),
+        /* @__PURE__ */ t.jsxs(Je, { children: [
+          /* @__PURE__ */ t.jsx(Qe, {}),
+          /* @__PURE__ */ t.jsx(et, { children: n })
+        ] }),
+        /* @__PURE__ */ t.jsx(nr, { controller: !!$, children: /* @__PURE__ */ t.jsxs(Je, { children: [
+          /* @__PURE__ */ t.jsx(Qe, {}),
+          /* @__PURE__ */ t.jsx(et, { children: $ })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t.jsxs(si, { windowSize: y, children: [
+        De ? /* @__PURE__ */ t.jsx(bi, { children: /* @__PURE__ */ t.jsx(
+          Re,
+          {
+            display: "flex",
+            placement: "bottom",
+            title: /* @__PURE__ */ t.jsx($i, { children: ke ? /* @__PURE__ */ t.jsxs(yi, { children: [
+              /* @__PURE__ */ t.jsx(xi, {}),
+              M.copyToClipBoard.copied
+            ] }) : M.copyToClipBoard.copy }),
+            enterDelay: 600,
+            children: /* @__PURE__ */ t.jsx(fi, { onClick: wt })
+          }
+        ) }) : null,
+        De ? /* @__PURE__ */ t.jsx(
+          vr,
+          {
+            entity: "task_management",
+            isMoreOption: !0,
+            closeMenuOnSelect: !0,
+            options: [
+              { label: "Archive", value: "archive" },
+              { label: "Delete", value: "delete" }
+            ],
+            customStyleConfig: {
+              control: () => ({
+                backgroundColor: "inherit",
+                cursor: "pointer",
+                border: "none",
+                ":hover": {
+                  backgroundColor: "inherit"
+                },
+                marginLeft: r.sp4,
+                marginRight: r.sp5
+              }),
+              valueContainer: () => ({
+                display: "flex",
+                "#react-select-2-placeholder": {
+                  marginRight: u[0],
+                  marginLeft: -1
+                }
+              })
+            },
+            onOptionSelection: (i) => {
+              switch (i) {
+                case "delete":
+                  K();
+                  break;
+                case "archive":
+                  z();
+                  break;
+              }
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ t.jsx(di, { onClick: O })
+      ] })
+    ] }),
+    e.fetchState === "Error" ? /* @__PURE__ */ t.jsxs(wi, { children: [
+      /* @__PURE__ */ t.jsx(vi, { onClick: V, children: /* @__PURE__ */ t.jsx(Si, {}) }),
+      /* @__PURE__ */ t.jsx(ki, { children: M.reloadPage.label })
+    ] }) : /* @__PURE__ */ t.jsxs(ei, { windowSize: y, children: [
+      /* @__PURE__ */ t.jsxs(Jo, { children: [
+        /* @__PURE__ */ t.jsxs(Xo, { windowSize: y, children: [
+          /* @__PURE__ */ t.jsx(zt, { ...Y, children: /* @__PURE__ */ t.jsxs("form", { id: Ae(Ze), onSubmit: Ct, children: [
+            /* @__PURE__ */ t.jsxs(Di, { children: [
+              /* @__PURE__ */ t.jsx(
+                lr,
+                {
+                  type: "text",
+                  placeholderAlignment: "left",
+                  name: _(h, xt),
+                  defaultValue: T.name,
+                  placeholder: j.taskNamePlaceholder,
+                  style: {
+                    padding: `${r.sp3} ${r.sp0}`,
+                    marginTop: r.sp3,
+                    background: "transparent",
+                    textAlign: "left",
+                    flexGrow: 1,
+                    width: "-webkit-fill-available",
+                    height: b.controlHeight.value(y),
+                    cursor: "inherit"
+                  },
+                  registerOptions: {
+                    required: !0,
+                    validate: (i) => i != null
+                  }
+                }
+              ),
+              T.type.code === "recurring" ? /* @__PURE__ */ t.jsx(
+                Ci,
+                {
+                  height: r.sp3,
+                  width: r.sp3
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ t.jsx(ni, { children: /* @__PURE__ */ t.jsx(
+              ko,
+              {
+                placeholderAlignment: "left",
+                name: _(h, ze),
+                defaultValue: T.description,
+                placeholder: j.descriptionPlaceholder,
+                rows: 5,
+                style: {
+                  padding: `${r.sp2} ${r.sp3}`,
+                  background: "transparent",
+                  textAlign: "left",
+                  display: "flex",
+                  flexGrow: 1,
+                  cursor: "inherit",
+                  overflow: "auto"
+                },
+                registerOptions: {
+                  required: !0,
+                  validate: (i) => i != null
+                }
+              }
+            ) }),
+            /* @__PURE__ */ t.jsx(rt, { children: /* @__PURE__ */ t.jsx(tt, { children: j.taskDetailsTitle }) }),
+            /* @__PURE__ */ t.jsxs(ai, { children: [
+              /* @__PURE__ */ t.jsx(
+                Xe,
+                {
+                  windowSize: y,
+                  label: {
+                    label: j.statusLabel,
+                    width: I,
+                    style: {
+                      marginLeft: b.rowContentPaddingLeft.value(y),
+                      marginRight: b.labelMarginRight.value(y),
+                      marginTop: b.labelMarginTop.value(y),
+                      width: I
+                    }
+                  },
+                  style: {
+                    width: "auto"
+                  },
+                  singleSelectPickerField: {
+                    valueToLabel: (i) => We(i),
+                    name: _(h, Be),
+                    placeholder: j.statusPlaceholder,
+                    style: { position: "relative" },
+                    capitalizeOptions: !0,
+                    defaultValue: {
+                      selectedOption: T.status,
+                      allOptions: He.map(
+                        (i) => ({
+                          label: i.name,
+                          value: i.code
+                        })
+                      )
+                    },
+                    textAlignment: "right",
+                    registerOptions: {
+                      required: !0,
+                      validate: (i) => i?.selectedOption != null
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(ie, {}),
+              /* @__PURE__ */ t.jsxs(ti, { windowSize: y, children: [
+                /* @__PURE__ */ t.jsx(
+                  Ke,
+                  {
+                    label: j.assigneeLabel,
+                    htmlFor: _(h, xe),
+                    style: {
+                      marginLeft: b.rowContentPaddingLeft.value(y),
+                      marginRight: b.labelMarginRight.value(y),
+                      marginTop: b.labelMarginTop.value(y),
+                      width: I
+                    }
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(ri, { windowSize: y, children: /* @__PURE__ */ t.jsx(
+                  sr,
+                  {
+                    hideEmailTooltip: !1,
+                    shouldHaveBackgroundColor: !1,
+                    showBackgroundColorIfHasAnySelectedOption: !0,
+                    placeholderLabel: j.assigneePlaceholder,
+                    name: _(h, xe),
+                    value: {
+                      allUsers: me,
+                      selectedUsers: me.filter(
+                        (i) => T.assignee.includes(i.userId)
+                      ),
+                      allNonUsers: [],
+                      selectedNonUsers: []
+                    },
+                    registerOptions: {
+                      required: !0,
+                      validate: (i) => i != null && i.selectedUsers.length > 0
+                    },
+                    valueToSubtitle: (i) => {
+                      const D = Tt.find(
+                        (P) => P.userId === i
+                      ), f = [];
+                      if (D != null) {
+                        const P = dr(
+                          D.userRoles
+                        );
+                        P.length > 0 && f.push(P), D.accountingClassIDs.forEach(
+                          (E) => {
+                            const q = e.allAccountingClasses.find(
+                              (se) => se.classId === E
+                            );
+                            q != null && q.className && f.push(q.className);
+                          }
+                        );
+                      }
+                      return f;
+                    }
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ t.jsx(ie, {}),
+              /* @__PURE__ */ t.jsx(
+                ht,
+                {
+                  label: {
+                    label: j.dueDateLabel,
+                    width: I
+                  },
+                  style: {
+                    width: "auto"
+                  },
+                  dateField: {
+                    name: _(h, ye),
+                    placeholder: j.dueDatePlaceholder,
+                    defaultValue: T.dueDate,
+                    dateFormat: Ie.visual.defaultInput,
+                    minDate: be(),
+                    autoComplete: "off",
+                    registerOptions: {
+                      required: !0
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(ie, {}),
+              /* @__PURE__ */ t.jsx(
+                Xe,
+                {
+                  windowSize: y,
+                  label: {
+                    label: j.priorityLabel,
+                    width: I,
+                    style: {
+                      marginLeft: b.rowContentPaddingLeft.value(y),
+                      marginRight: b.labelMarginRight.value(y),
+                      marginTop: b.labelMarginTop.value(y),
+                      width: I
+                    }
+                  },
+                  style: {
+                    width: "auto"
+                  },
+                  singleSelectPickerField: {
+                    valueToLabel: (i) => We(i),
+                    name: _(h, Ne),
+                    placeholder: j.priorityPlaceholder,
+                    style: { position: "relative" },
+                    capitalizeOptions: !0,
+                    defaultValue: {
+                      selectedOption: T.priority,
+                      allOptions: Ve.map(
+                        (i) => ({
+                          label: i.name,
+                          value: i.code
+                        })
+                      )
+                    },
+                    textAlignment: "right",
+                    registerOptions: {
+                      required: !0,
+                      validate: (i) => i?.selectedOption != null
+                    }
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(ie, {}),
+              /* @__PURE__ */ t.jsx(
+                ii,
+                {
+                  windowSize: y,
+                  label: {
+                    label: j.tagLabel,
+                    width: I
+                  },
+                  style: {
+                    width: "auto"
+                  },
+                  creatableMultiSelectField: {
+                    name: _(h, $e),
+                    placeholder: j.tagPlaceholder,
+                    defaultValue: {
+                      selectedOptions: T.tagIds,
+                      allOptions: we(R.tagList)
+                    },
+                    registerOptions: {
+                      required: !1
+                    },
+                    isLoading: ve === "In-Progress" || Ge(),
+                    onCreateOption: X,
+                    onDeleteOption: J,
+                    customCreateLabel: (i) => It(i)
+                  }
+                }
+              ),
+              /* @__PURE__ */ t.jsx(ie, {}),
+              /* @__PURE__ */ t.jsx(
+                mt,
+                {
+                  label: {
+                    label: j.taskTypeLabel,
+                    width: I
+                  },
+                  singleSelectField: {
+                    name: _(h, qo),
+                    defaultValue: {
+                      selectedOption: ue.find(
+                        (i) => i.code === T.type.code
+                      )?.name,
+                      allOptions: ue.map(
+                        (i) => i.name
+                      )
+                    }
+                  },
+                  style: {
+                    width: "auto",
+                    border: "none",
+                    outline: "none"
+                  }
+                }
+              ),
+              T.type.code === "recurring" ? /* @__PURE__ */ t.jsx(
+                wo,
+                {
+                  name: _(h, U),
+                  startMinDate: be(),
+                  recurringView: {
+                    selectedEndDate: {
+                      type: T.recurringEndDateLocalData?.recurringDatePickerOptionsType,
+                      date: T.recurringEndDateLocalData?.recurringEndDate,
+                      recurringCount: T.recurringEndDateLocalData?.recurringCount
+                    },
+                    selectedFrequency: {
+                      allOptions: yt,
+                      selectedOption: T.recurringFrequency
+                    },
+                    selectedStartDate: T.recurringStartDate?.toDate() ?? be().toDate()
+                  },
+                  recurringCountInputLabel: j.totalNumberOfTasks,
+                  onClickSave: jt,
+                  onClickCancel: Lt
+                }
+              ) : null,
+              /* @__PURE__ */ t.jsx(ie, {}),
+              /* @__PURE__ */ t.jsx(
+                mo,
+                {
+                  name: _(h, bt),
+                  placeholder: Wo,
+                  timeSpentFormat: Vo,
+                  defaultValue: T.timeSpent,
+                  label: {
+                    label: j.totalTimeSpent,
+                    width: I
+                  },
+                  registerOptions: {
+                    validate: (i) => Vt(i) > _o ? M.snackBar.task_time_spent_validation.failed : !0
+                  },
+                  style: {
+                    width: "auto",
+                    border: "none",
+                    outline: "none"
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t.jsx(
+              Fo,
+              {
+                sectionId: _(h, _e),
+                deleteFileStatusById: e.deleteFileStatusById,
+                updateFileStatusById: e.updateFileStatusById,
+                filesEndPoint: s,
+                authParams: g,
+                files: e.files,
+                updateFilesEntity: F,
+                onEditFileName: B,
+                onDeleteFile: A
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ t.jsx(rt, { children: /* @__PURE__ */ t.jsx(tt, { children: j.activitySectionTitle }) }),
+          /* @__PURE__ */ t.jsx(
+            cr,
+            {
+              historicActivities: e.taskHistory
+            }
+          )
+        ] }),
+        C == null || e.showTaskDetailFormFooter ? /* @__PURE__ */ t.jsx(
+          ur,
+          {
+            style: {
+              zIndex: 1,
+              paddingTop: r.sp3,
+              paddingBottom: r.sp3
+            },
+            formId: Ae(Ze),
+            helperStyle: { paddingTop: r.sp0, paddingBottom: r.sp0 },
+            primaryBtn: {
+              label: j.primaryBtnText,
+              isLoading: e.taskDetailView.saveStatus.fetchState === "In-Progress"
+            },
+            cancelBtn: {
+              label: j.secondaryBtnText,
+              onClick: O
+            }
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ t.jsx(Qo, { children: De ? /* @__PURE__ */ t.jsx(
+        Dr,
+        {
+          autoExpand: !0,
+          autoFocus: !1,
+          threadMetadata: {
+            companyName: n,
+            companyId: a,
+            entityId: e.taskDetailView.taskId,
+            // Typescript limitation - isEditTask is true --> taskDetailSelectorView.taskDetailView.taskId != null
+            entityType: "task.details",
+            isGlobalComment: !0,
+            application: "dashboard",
+            tab: "task",
+            url: window.location.href
+          },
+          textOverrides: {
+            composerPlaceholder: Ko,
+            replyComposerPlaceholder: Go
+          },
+          filter: {
+            entityType: "task.details",
+            entityId: e.taskDetailView.taskId
+          },
+          threadsContainerStyle: {
+            width: "auto",
+            padding: r.sp5
+          },
+          threadStyle: { width: "100%" },
+          composerContainerStyle: {
+            width: "auto",
+            padding: r.sp5
+          },
+          onThreadClick: () => null
+        }
+      ) : /* @__PURE__ */ t.jsx(Uo, { children: /* @__PURE__ */ t.jsx(Zo, { children: j.taskCommentCreationMessage }) }) })
+    ] })
+  ] });
+}, Uo = o.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`, Zo = o(ct)`
+  color: ${(e) => e.theme.colors.hero};
+  padding: ${r.sp3};
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  border-radius: ${r.sp2};
+`, Xo = o.div`
+  height: 100%;
+  padding-left: ${(e) => b.containerPaddingLeft.valuePx(e.windowSize)};
+  padding-right: ${(e) => b.containerPaddingRight.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => b.containerPaddingRight.valuePx(e.windowSize)};
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`, Jo = o.div`
+  display: flex;
+  width: 70%;
+  flex-direction: column;
+`, Qo = o.div`
+  display: flex;
+  width: 30%;
+  border-left: 1px solid ${(e) => e.theme.colors.grey3};
+
+  .lb-root.lb-composer {
+    width: 100%;
+  }
+`, ei = o.div`
+  display: flex;
+  flex-direction: row;
+  height: calc(100% - 57px);
+`, ti = o.div`
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  background-color: ${(e) => e.theme.colors.grey5};
+  min-height: ${(e) => b.height.valuePx(e.windowSize)};
+  padding-right: ${(e) => b.marginRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => b.paddingTopBottom.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => b.paddingTopBottom.valuePx(e.windowSize)};
+
+  :first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+
+  &:hover {
+    z-index: 1;
+    outline: 1px solid ${(e) => e.theme.colors.primary};
+    .user-multi-select-field__control {
+      background-color: ${(e) => e.theme.colors.background};
+    }
+  }
+`, ri = o.div`
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => `calc(100% - ${b.labelWidth.valuePx(e.windowSize)})`};
+  align-items: flex-end;
+  flex-grow: 1;
+`, oi = o.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey4};
+  overflow-x: hidden;
+  height: 100vh;
+  width: 100%;
+`, Xe = o(
+  yr
+)`
+  border-radius: ${r.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  min-height: ${(e) => b.height.valuePx(e.windowSize)};
+  padding-right: ${(e) => b.marginRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => b.paddingTopBottom.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => b.paddingTopBottom.valuePx(e.windowSize)};
+  width: auto;
+`, ii = o(
+  lo
+)`
+  border-radius: ${r.sp2};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  min-height: ${(e) => b.height.valuePx(e.windowSize)};
+  padding-right: ${(e) => b.marginRight.valuePx(e.windowSize)};
+  padding-top: ${(e) => b.paddingTopBottom.valuePx(e.windowSize)};
+  padding-bottom: ${(e) => b.paddingTopBottom.valuePx(e.windowSize)};
+  width: auto;
+`, ai = o.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2};
+  margin-bottom: ${r.sp3};
+`, ni = o.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${(e) => e.theme.colors.grey3};
+  box-shadow: ${(e) => `${r.sp0} 2px ${r.sp1} ${e.theme.colors.dropShadowNormal}`};
+  border-radius: ${r.sp2};
+  margin-bottom: ${r.sp3};
+  &:hover {
+    border: 1px solid ${(e) => e.theme.colors.primary};
+  }
+`, ie = o.div`
+  display: flex;
+  flex: 1;
+  background-color: ${(e) => e.theme.colors.grey3};
+  min-height: 1px;
+  max-height: 1px;
+`, li = o.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  top: ${r.sp0};
+  padding: ${(e) => `${b.navBarContainerPaddingXaxis.valuePx(e.windowSize)} ${r.sp0}`};
+  z-index: 2;
+  background-color: ${(e) => e.theme.colors.grey4};
+  position: sticky;
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+`, si = o.div`
+  display: flex;
+  padding-right: ${(e) => b.containerPaddingRight.valuePx(e.windowSize)};
+`, di = o(ut)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-height: ${r.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Je = o.div`
+  display: flex;
+  align-items: center;
+`, ci = o.div`
+  padding-left: ${(e) => b.containerPaddingLeft.valuePx(e.windowSize)};
+  display: flex;
+  align-items: center;
+`, Qe = o.div`
+  width: 1px;
+  height: ${r.sp3};
+  margin: ${r.sp0} ${r.sp3};
+  background-color: ${(e) => e.theme.colors.hero};
+`, et = o(hr)`
+  color: ${(e) => e.theme.colors.primary};
+`, ui = o(pr)`
+  width: ${r.sp4};
+  height: ${r.sp4};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.brandColorJade};
+`, pi = o(st)`
+  color: ${(e) => e.color};
+  border: 1px solid ${(e) => e.color};
+  padding: ${r.sp0} ${r.sp2};
+  border-radius: ${r.sp1};
+  white-space: nowrap;
+  width: fit-content;
+`, hi = o.div`
+  display: flex;
+  align-items: center;
+`, gi = o(Ao)`
+  width: ${r.sp3};
+  height: ${r.sp3};
+  color: ${(e) => e.color};
+  margin-right: ${r.sp2};
+`, mi = o(gt)`
+  color: ${(e) => e.theme.colors.hero};
+`, tt = o(xr)`
+  color: ${(e) => e.theme.colors.primary};
+  padding: ${r.sp3} ${r.sp0};
+`, rt = o.div`
+  display: flex;
+  width: fit-content;
+  align-items: center;
+`, fi = o(Sr)`
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+  width: ${r.sp4};
+  height: ${r.sp4};
+  min-height: ${r.sp4};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, bi = o.div`
+  display: flex;
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    svg {
+      color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, xi = o(gr)`
+  height: ${r.sp3};
+  width: ${r.sp3};
+  margin-right: ${r.sp1};
+  color: ${x.success};
+`, yi = o.div`
+  display: flex;
+  align-items: center;
+`, $i = o(gt)`
+  padding: ${r.sp1};
+  color: ${(e) => e.theme.colors.grey1};
+  background: ${(e) => e.theme.colors.overlayColor};
+  border-radius: ${r.sp1};
+`, wi = o.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, vi = o.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`, Si = o(mr)`
+  height: ${r.sp5};
+  width: ${r.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, ki = o(fr)`
+  margin-top: ${r.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, Di = o.div`
+  display: flex;
+  align-items: center;
+`, Ci = o(br)`
+  margin-left: ${r.sp2};
+  margin-top: ${r.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, ot = (e, n) => {
+  const a = e.taskDetailView.taskDetailLocalData, l = e.userList.users.map((s) => s.user).filter(Boolean), p = n.tagList, m = [
+    {
+      fileIndex: a.fileIds.length,
+      fileId: void 0
+    }
+  ];
+  return {
+    [h]: {
+      [xt]: a.name,
+      [ze]: a.description,
+      [Be]: {
+        allOptions: He.map((s) => ({
+          label: s.name,
+          value: s.code
+        })),
+        selectedOption: a.status
+      },
+      [xe]: {
+        allUsers: l,
+        selectedUsers: l.filter(
+          (s) => a.assignee.includes(s.userId)
+        ),
+        allNonUsers: [],
+        selectedNonUsers: []
+      },
+      [ye]: a.dueDate?.toDate(),
+      [Ne]: {
+        allOptions: Ve.map((s) => ({
+          label: s.name,
+          value: s.code
+        })),
+        selectedOption: a.priority
+      },
+      [$e]: {
+        allOptions: we(p),
+        selectedOptions: a.tagIds
+      },
+      [_e]: [
+        ...a.fileIds.map((s, g) => ({
+          fileId: s,
+          fileIndex: g
+        })),
+        ...m
+      ],
+      taskType: {
+        selectedOption: ue.find(
+          (s) => s.code === a.type.code
+        )?.name,
+        allOptions: ue.map((s) => s.name)
+      },
+      recurringView: {
+        selectedEndDate: {
+          type: a.recurringEndDateLocalData?.recurringDatePickerOptionsType,
+          date: a.savedRecurringEndDate,
+          recurringCount: a.savedRecurringTasksCount
+        },
+        selectedStartDate: a.recurringStartDate?.toDate(),
+        selectedFrequency: {
+          allOptions: yt,
+          selectedOption: ft.find(
+            (s) => s.value === a.recurringFrequency
+          )?.label
+        }
+      },
+      [bt]: a.timeSpent
+    }
+  };
+}, Zi = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: Yo,
+  getBgColor: qe,
+  getRichLabel: We,
+  getTagList: we,
+  uniqueFormName: Ae
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  Ir as C,
+  _o as M,
+  Ao as S,
+  ho as T,
+  We as a,
+  Yi as b,
+  Ai as c,
+  we as d,
+  bt as e,
+  Hi as f,
+  qe as g,
+  Ki as h,
+  Gi as i,
+  Ui as j,
+  Bi as k,
+  Ni as l,
+  Zi as m,
+  _i as n,
+  Vi as p,
+  Wi as s,
+  qi as t
+};