@zeniai/web-components 3.17.3 → 3.17.4

package/dist/TaskManagementPage-B1YyOXIN.js

@@ -0,0 +1,1935 @@
+import { j as t, P as ot, u as st, d as nt, g as $t, h as yt, F as St, A as Ct, V as vt, aN as Tt, aA as jt } from "./vendor-.pnpm-B2klaOGU.js";
+import * as N from "react";
+import { useEffect as ne, useState as F, useRef as fe, useCallback as g, useMemo as xe, Fragment as bt } from "react";
+import s from "@emotion/styled";
+import { TASK_LIST_GROUP_BY_CATEGORIES as Lt, toTaskListGroupByKeyTypeStrict as Ae, convertHHMMStrToMinutes as It, allTaskPriority as rt, allTaskStatus as it } from "@zeniai/client-epic-state";
+import { a as le, S as o, aq as Mt, o as X, w as Gt, z as at, F as ue, aL as Y, y as lt, u as he, fF as Et, fG as Nt, b as Ot, _ as Re, az as ct, kI as Bt, B as _e, fM as Pt, t as Rt, fN as Dt, fO as Wt, Z as De, C as ze, R as oe, D as W, fP as _t, E as At, dB as zt, aE as Ft, aP as Ht, V as Ut, fh as Kt, P as Yt, ao as Zt } from "./index-CR2Dmphx.js";
+import { B as qt } from "./BusyIndication-DOn9iBRA.js";
+import { css as Ce } from "@emotion/react";
+import { F as Xt, S as Jt } from "./SpendManagementSection-Dtgv0AT8.js";
+import { D as Qt, a as Vt, b as eo, c as to } from "./NotificationsListConfig-D4eYN7aa.js";
+import { getDashboardFilterCategoryValues as oo } from "./SpendManagementListViewPage-gjrkkLEp.js";
+import { O as so, d as no } from "./common-DfVz37P_.js";
+import { a as Fe, T as ro, M as io, e as ve, n as J, k as He, b as ke, j as Te, d as ao, i as dt, h as pt, f as ut, p as ht, s as mt, c as gt, l as q, t as pe } from "./TaskDetailPage-JoCgLMUW.js";
+import { i as lo, T as co, S as po, t as te, g as uo, a as Ue, b as ho } from "./TaskListRow-__L7C93Y.js";
+import { Z as mo } from "./ZeniAvatar-CIU-3KjB.js";
+const go = 100, xo = 100, fo = 3, ko = 0.7, wo = ({
+  scrollContainerRef: e,
+  isEnabled: p = !0,
+  edgeThreshold: r = go,
+  scrollSpeed: u = xo,
+  minScrollAmount: h = fo,
+  scrollCurveExponent: d = ko
+}) => {
+  ne(() => {
+    if (!p || typeof window > "u" || typeof document > "u")
+      return;
+    let n = !1, c = 0, i = null;
+    const l = Math.max(r, 1), $ = () => {
+      i !== null && (cancelAnimationFrame(i), i = null);
+    }, j = (f) => {
+      const L = e.current;
+      return !L || !(f.target instanceof Node) ? !1 : L.contains(f.target);
+    }, E = (f) => j(f), O = (f) => {
+      const C = Math.max(f, 0) / l, b = Math.pow(C, d) * u;
+      return Math.max(h, b);
+    }, x = (f, L, C) => {
+      const b = C === "up" ? -L : L;
+      f === window ? window.scrollBy({
+        top: b,
+        behavior: "auto"
+      }) : f instanceof HTMLElement && typeof f.scrollTop == "number" && (f.scrollTop += b);
+    }, w = () => e.current ?? window, k = () => {
+      if (!n)
+        return;
+      const f = w(), L = window.innerHeight, C = c;
+      if (C < l && C > 0) {
+        const b = l - C, m = O(b);
+        x(f, m, "up");
+      } else if (C > L - l) {
+        const b = C - (L - l), m = O(b);
+        x(f, m, "down");
+      }
+      i = requestAnimationFrame(k);
+    }, B = (f) => {
+      E(f) ? n = !0 : (n = !1, $());
+    }, P = () => {
+      n = !1, $();
+    }, R = (f) => {
+      n && (c = f.clientY);
+    }, S = (f) => {
+      R(f), n && i === null && (i = requestAnimationFrame(k));
+    };
+    return document.addEventListener("dragstart", B), document.addEventListener("dragend", P), document.addEventListener("dragover", S), () => {
+      document.removeEventListener("dragstart", B), document.removeEventListener("dragend", P), document.removeEventListener("dragover", S), $();
+    };
+  }, [
+    r,
+    p,
+    h,
+    e,
+    d,
+    u
+  ]);
+}, Ne = le.getLocalizedStrings(), xt = ({ count: e }) => /* @__PURE__ */ t.jsx($o, { isCircular: e < 10, children: /* @__PURE__ */ t.jsx(yo, { children: e > Ne.common.numbers.maximumCount ? `${Ne.common.numbers.maximumCount}${Ne.common.strings.plus}` : e }) }), $o = s.div`
+  ${(e) => e.isCircular ? Ce`
+          height: 18px;
+          width: 18px;
+        ` : Ce`
+          height: 18px;
+          min-width: 18px;
+          padding: ${o.sp0} ${o.sp1};
+        `}
+  background-color: transparent;
+  border-radius: ${o.sp12};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: 1px solid;
+  outline-color: inherit;
+`, yo = s(Mt)`
+  color: inherit;
+`, { taskManagement: Ke, common: Oe } = le.getLocalizedStrings();
+function So(e) {
+  const { onChange: p, value: r, resetDisabled: u, onReset: h } = e, d = () => {
+    u !== !0 && h();
+  };
+  return /* @__PURE__ */ t.jsxs(Co, { children: [
+    /* @__PURE__ */ t.jsx(jo, { children: Ke.taskList.groupingFilters.groupBy }),
+    /* @__PURE__ */ t.jsx(vo, { children: /* @__PURE__ */ t.jsx(
+      Xt,
+      {
+        value: r,
+        placeHolder: Ke.taskList.groupingFilters.placeholder,
+        onChange: (n) => {
+          const c = Ae(
+            n.value
+          );
+          if (c != null)
+            p(c);
+          else
+            throw new Error("Invalid taskListGroupByKey");
+        },
+        options: Lt,
+        getOptionLabel: (n) => {
+          const c = Oe.texts, i = Ae(n);
+          return i != null ? c[i] : Oe.strings.empty;
+        }
+      }
+    ) }),
+    /* @__PURE__ */ t.jsxs(To, { onClick: d, isDisabled: u, children: [
+      /* @__PURE__ */ t.jsx(bo, {}),
+      /* @__PURE__ */ t.jsx(X, { children: Oe.reset })
+    ] })
+  ] });
+}
+const Co = s.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp4};
+  justify-content: space-between;
+  padding-bottom: ${o.sp4};
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+`, vo = s.div`
+  flex: 1;
+`, To = s.div`
+  display: flex;
+  align-items: center;
+  color: ${(e) => e.theme.colors.hero};
+  ${(e) => e.isDisabled ? Ce`
+          opacity: 0.3;
+        ` : Ce`
+          cursor: pointer;
+        `};
+  &:hover {
+    color: ${(e) => e.isDisabled ? e.theme.colors.hero : e.theme.colors.primary};
+  }
+
+  column-gap: ${o.sp1};
+`, jo = s(Gt)`
+  color: ${(e) => e.theme.colors.primary};
+`, bo = s(at)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, Lo = le.getLocalizedStrings().taskManagement.taskList.footer;
+function Io({
+  taskGroupsList: e,
+  anchorEl: p,
+  groupByKey: r,
+  onCreateNewGroup: u,
+  onExistingGroupSelection: h,
+  onClose: d
+}) {
+  const n = () => {
+    d(), u();
+  };
+  return /* @__PURE__ */ t.jsx(
+    ot,
+    {
+      open: !!p,
+      anchorEl: p,
+      onClose: d,
+      transformOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      children: /* @__PURE__ */ t.jsxs(Mo, { children: [
+        /* @__PURE__ */ t.jsx(Go, { children: e.map((c) => {
+          const i = () => {
+            d(), h(c.id);
+          };
+          return /* @__PURE__ */ t.jsx(
+            Ye,
+            {
+              onClick: i,
+              children: /* @__PURE__ */ t.jsx(ue, { children: c.groupName })
+            },
+            c.id
+          );
+        }) }),
+        /* @__PURE__ */ t.jsx(Y, { controller: r === "groupName", children: /* @__PURE__ */ t.jsxs(Ye, { onClick: n, children: [
+          /* @__PURE__ */ t.jsx(Eo, {}),
+          /* @__PURE__ */ t.jsx(ue, { children: Lo.createGroup })
+        ] }) })
+      ] })
+    }
+  );
+}
+const Mo = s.div`
+  background-color: ${(e) => e.theme.colors.grey5};
+`, Ye = s.div`
+  padding: ${o.sp2} ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+
+  cursor: pointer;
+  display: flex;
+  column-gap: ${o.sp1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    background-color: ${(e) => e.theme.colors.background};
+  }
+`, Go = s.div`
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+`, Eo = s(lt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`;
+function No({
+  placeholder: e,
+  searchText: p,
+  inputContainerStyles: r,
+  onSearchTextChanged: u
+}) {
+  const [h, d] = F(!1), n = fe(null), c = he(), i = () => {
+    p || d(!1);
+  };
+  return /* @__PURE__ */ t.jsxs(Oo, { children: [
+    h ? null : /* @__PURE__ */ t.jsx(
+      Po,
+      {
+        onMouseEnter: () => d(!0),
+        onClick: () => {
+          d(!0), n.current?.focus();
+        },
+        children: /* @__PURE__ */ t.jsx(Ze, {})
+      }
+    ),
+    h ? /* @__PURE__ */ t.jsxs(Bo, { style: r, isOpen: h, children: [
+      /* @__PURE__ */ t.jsx(Ze, {}),
+      /* @__PURE__ */ t.jsx(
+        Ro,
+        {
+          windowSize: c,
+          autoFocus: c !== "small",
+          placeholder: e,
+          value: p,
+          onBlur: i,
+          onChange: (l) => {
+            const $ = l.target;
+            u($.value);
+          },
+          ref: n
+        }
+      ),
+      p ? /* @__PURE__ */ t.jsx(Do, {}) : null
+    ] }) : null
+  ] });
+}
+const Oo = s.div`
+  position: relative;
+`, Bo = s.div`
+  position: absolute;
+  right: 0;
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp1};
+  padding-bottom: ${o.sp1};
+  border-bottom: 1px solid ${(e) => e.theme.colors.primary};
+  min-width: ${({ isOpen: e }) => e ? "200px" : "0px"};
+  transition: min-width 0.3s ease-in-out;
+`, Ze = s(Et)`
+  color: ${(e) => e.theme.colors.hero};
+  width: ${o.sp3};
+  height: ${o.sp3};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Po = s.div`
+  cursor: pointer;
+`, Ro = s(Nt)`
+  display: flex;
+  border-width: ${o.sp0};
+  outline-width: ${o.sp0};
+  color: ${(e) => e.theme.colors.primary};
+  border-radius: ${o.sp1};
+  flex: 1;
+  background-color: inherit;
+  ::placeholder {
+    color: ${(e) => e.theme.colors.grey1};
+  }
+`, Do = s(Ot)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, Wo = (e) => /* @__PURE__ */ N.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ N.createElement("path", { d: "M4.36407 1.50001H11.8665H19.3689C19.3689 1.50001 20.733 1.50001 20.733 2.86409V21.1359C20.733 21.1359 20.733 22.5 19.3689 22.5H4.36407C4.36407 22.5 3 22.5 3 21.1359V2.86409C3 2.86409 3 1.50001 4.36407 1.50001Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M19.6011 5.42688H3.10107", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M10.7344 9.60004L7.92188 12.4125L6.51562 11.0063", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M13.7344 11.0063H17.4844", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M10.7344 15.4125L7.92188 18.225L6.51562 16.8188", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M13.7344 16.8188H17.4844", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), _o = (e) => /* @__PURE__ */ N.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ N.createElement("path", { d: "M4.36407 1.50001H11.8665H19.3689C19.3689 1.50001 20.733 1.50001 20.733 2.86409V21.1359C20.733 21.1359 20.733 22.5 19.3689 22.5H4.36407C4.36407 22.5 3 22.5 3 21.1359V2.86409C3 2.86409 3 1.50001 4.36407 1.50001Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M10.7344 8.1001L7.92188 10.9126L6.51562 9.50635", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M13.7344 9.50635H17.4844", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M10.7344 13.9126L7.92188 16.7251L6.51562 15.3188", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M13.7344 15.3188H17.4844", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), Ao = (e) => /* @__PURE__ */ N.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...e }, /* @__PURE__ */ N.createElement("path", { d: "M4.49908 1.50001H12.0015H19.5039C19.5039 1.50001 20.868 1.50001 20.868 2.86409V21.1359C20.868 21.1359 20.868 22.5 19.5039 22.5H4.49908C4.49908 22.5 3.13501 22.5 3.13501 21.1359V2.86409C3.13501 2.86409 3.13501 1.50001 4.49908 1.50001Z", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ N.createElement("path", { d: "M7.5 11.9996L8.598 14.1953C8.70072 14.4016 8.85107 14.5804 9.03662 14.7171C9.22217 14.8538 9.43759 14.9443 9.66506 14.9812C9.89254 15.0182 10.1255 15.0004 10.3448 14.9295C10.5641 14.8585 10.7633 14.7364 10.926 14.5733L16.5 9", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" })), { taskManagement: zo, common: Fo } = le.getLocalizedStrings(), se = zo.taskList.newTaskOptions;
+function Ho({
+  anchorEl: e,
+  groupByKey: p,
+  taskGroupTemplates: r,
+  taskCreationFromTemplateStatus: u,
+  isTaskTemplatesEnabled: h,
+  expandedTemplate: d,
+  onExpandTemplate: n,
+  onClose: c,
+  onNewTaskClick: i,
+  onNewGroupClick: l,
+  handleGroupTemplateClick: $,
+  handleGroupTemplateTaskClick: j,
+  onNewTaskInitialization: E
+}) {
+  const O = st(), [x, w] = F(null), [k, B] = F(null);
+  ne(() => {
+    u.fetchState === "Completed" && (B(null), w(null), c());
+  }, [u.fetchState, c]);
+  const P = g(
+    (S, f) => {
+      w(f), j(S, f);
+    },
+    [j]
+  ), R = g(
+    (S) => {
+      B(S), $(S);
+    },
+    [$]
+  );
+  return /* @__PURE__ */ t.jsx(
+    ot,
+    {
+      open: !!e,
+      sx: {
+        "& .MuiPaper-root": {
+          border: `1px solid ${O.colors.grey3}`
+        }
+      },
+      anchorEl: e,
+      onClose: c,
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      children: /* @__PURE__ */ t.jsxs(Ko, { isTaskTemplatesEnabled: h, children: [
+        /* @__PURE__ */ t.jsxs(qo, { children: [
+          /* @__PURE__ */ t.jsxs(qe, { onClick: i, children: [
+            /* @__PURE__ */ t.jsx(Yo, {}),
+            /* @__PURE__ */ t.jsx(Re, { children: se.task })
+          ] }),
+          /* @__PURE__ */ t.jsx(Y, { controller: p === "groupName", children: /* @__PURE__ */ t.jsxs(qe, { onClick: () => l(""), children: [
+            /* @__PURE__ */ t.jsx(Zo, {}),
+            /* @__PURE__ */ t.jsx(Re, { children: se.group })
+          ] }) })
+        ] }),
+        h ? /* @__PURE__ */ t.jsx(
+          Uo,
+          {
+            taskGroupTemplates: r,
+            taskIdInCreation: x,
+            groupIdInCreation: k,
+            expandedTemplate: d,
+            handleGroupTemplateClick: R,
+            handleGroupTemplateTaskClick: P,
+            onNewGroupClick: l,
+            onNewTaskInitialization: E,
+            onExpandTemplate: n
+          }
+        ) : null
+      ] })
+    }
+  );
+}
+const Uo = ({
+  taskGroupTemplates: e,
+  taskIdInCreation: p,
+  groupIdInCreation: r,
+  expandedTemplate: u,
+  onExpandTemplate: h,
+  handleGroupTemplateClick: d,
+  handleGroupTemplateTaskClick: n,
+  onNewGroupClick: c,
+  onNewTaskInitialization: i
+}) => {
+  const [l, $] = F(""), j = xe(() => {
+    const x = [];
+    return e.forEach((w) => {
+      if (w.name.toLowerCase().includes(l.toLowerCase()))
+        x.push(w);
+      else {
+        const k = w.tasks.filter(
+          (B) => B.name.toLowerCase().includes(l.toLowerCase())
+        );
+        k.length > 0 && x.push({
+          ...w,
+          tasks: k
+        });
+      }
+    }), x;
+  }, [e, l]), E = g(() => {
+    i(l);
+  }, [l, i]), O = g(() => {
+    c(l);
+  }, [l, c]);
+  return /* @__PURE__ */ t.jsxs(Xo, { children: [
+    /* @__PURE__ */ t.jsx(Jo, { children: /* @__PURE__ */ t.jsxs(Vo, { children: [
+      /* @__PURE__ */ t.jsxs(Qo, { children: [
+        /* @__PURE__ */ t.jsx(es, {}),
+        /* @__PURE__ */ t.jsx(ts, { children: se.groupTemplates })
+      ] }),
+      /* @__PURE__ */ t.jsx(
+        No,
+        {
+          inputContainerStyles: {
+            top: "50%",
+            transform: "translateY(-50%)"
+          },
+          searchText: l,
+          onSearchTextChanged: $,
+          placeholder: se.searchPlaceholder
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ t.jsx(Y, { controller: j.length > 0, children: /* @__PURE__ */ t.jsx(os, { children: j.map((x) => {
+      const w = u === x.id;
+      return /* @__PURE__ */ t.jsxs(ps, { children: [
+        /* @__PURE__ */ t.jsxs(
+          ss,
+          {
+            onClick: () => {
+              h(x.id);
+            },
+            expanded: w,
+            children: [
+              /* @__PURE__ */ t.jsxs(ns, { children: [
+                /* @__PURE__ */ t.jsx(Y, { controller: w, children: /* @__PURE__ */ t.jsx(ds, {}) }),
+                /* @__PURE__ */ t.jsx(Y, { controller: !w, children: /* @__PURE__ */ t.jsx(cs, {}) }),
+                /* @__PURE__ */ t.jsx(X, { children: x.name }),
+                /* @__PURE__ */ t.jsx(xt, { count: x.tasks.length })
+              ] }),
+              /* @__PURE__ */ t.jsx(
+                as,
+                {
+                  expanded: w,
+                  className: "hidden-create-group-button",
+                  variant: "secondary",
+                  size: "xs-small",
+                  label: se.createGroup,
+                  disabled: x.createdAt != null,
+                  onClick: (k) => {
+                    k.stopPropagation(), h(null), d(x.id);
+                  },
+                  reverseSpinnerColor: !1,
+                  loading: r === x.id
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ t.jsx(Y, { controller: w, children: /* @__PURE__ */ t.jsx(bt, { children: x.tasks.map((k) => /* @__PURE__ */ t.jsxs(rs, { children: [
+          /* @__PURE__ */ t.jsxs(is, { children: [
+            /* @__PURE__ */ t.jsx(us, { className: "styled-dot" }),
+            /* @__PURE__ */ t.jsx(gs, { className: "task-name-text", children: k.name })
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            ls,
+            {
+              loading: p === k.name,
+              className: "hidden-create-task-button",
+              variant: "secondary",
+              size: "xs-small",
+              label: Fo.create,
+              reverseSpinnerColor: !1,
+              onClick: () => n(
+                x.id,
+                k.name
+              )
+            }
+          )
+        ] }, k.name)) }) })
+      ] }, x.id);
+    }) }) }),
+    /* @__PURE__ */ t.jsxs(Y, { controller: j.length === 0, children: [
+      /* @__PURE__ */ t.jsx(hs, { children: /* @__PURE__ */ t.jsx(ms, { children: se.noTaskGroup }) }),
+      /* @__PURE__ */ t.jsxs(Xe, { onClick: E, children: [
+        /* @__PURE__ */ t.jsx(Je, {}),
+        /* @__PURE__ */ t.jsx(X, { children: se.newTaskOptionText.replace(
+          "__searchText__",
+          l
+        ) })
+      ] }),
+      /* @__PURE__ */ t.jsxs(Xe, { onClick: O, children: [
+        /* @__PURE__ */ t.jsx(Je, {}),
+        /* @__PURE__ */ t.jsx(X, { children: se.newGroupOptionText.replace(
+          "__searchText__",
+          l
+        ) })
+      ] })
+    ] })
+  ] });
+}, Ko = s.div`
+  display: flex;
+  flex-direction: column;
+  width: ${(e) => e.isTaskTemplatesEnabled ? "408px" : "unset"};
+`, qe = s.div`
+  display: flex;
+  column-gap: ${o.sp2};
+  align-items: center;
+  padding: ${o.sp2} ${o.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};
+  }
+`, Yo = s(Ao)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, Zo = s(_o)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, qo = s.div`
+  display: flex;
+  flex-direction: column;
+  border-bottom: 1px solid ${(e) => e.theme.colors.grey3};
+`, Xo = s.div`
+  background-color: ${(e) => e.theme.colors.grey5};
+  padding-bottom: ${o.sp2};
+`, Jo = s.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${o.sp2} ${o.sp3};
+`, Qo = s.div`
+  display: flex;
+  column-gap: ${o.sp2};
+  align-items: center;
+  justify-content: space-between;
+`, Vo = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`, es = s(Wo)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, ts = s(Re)`
+  color: ${(e) => e.theme.colors.primary};
+`, os = s.div`
+  max-height: 320px;
+  overflow: auto;
+`, ss = s.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding-left: ${o.sp6};
+  padding-right: ${o.sp4};
+  color: ${(e) => e.expanded ? e.theme.colors.primary : e.theme.colors.hero};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    .hidden-create-group-button {
+      display: block;
+    }
+  }
+`, ns = s.div`
+  display: flex;
+  align-items: center;
+  padding: ${o.sp2} ${o.sp0};
+  color: inherit;
+  column-gap: ${o.sp2};
+`, rs = s.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  padding-left: ${o.sp6};
+  padding-right: ${o.sp4};
+
+  &:hover {
+    column-gap: ${o.sp2};
+    background-color: ${(e) => e.theme.colors.background};
+    .task-name-text {
+      max-width: 244px;
+    }
+    .hidden-create-task-button {
+      display: block;
+    }
+  }
+`, is = s.div`
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: ${o.sp2} ${o.sp0};
+  color: ${(e) => e.theme.colors.hero};
+  flex-grow: 1;
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+    .styled-dot {
+      background-color: ${(e) => e.theme.colors.primary};
+    }
+  }
+`, as = s(_e)`
+  display: ${(e) => e.expanded === !0 ? "block" : "none"};
+`, ls = s(_e)`
+  display: none;
+`, cs = s(Bt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, ds = s(ct)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, ps = s.div``, us = s.div`
+  display: inline-block;
+  border-radius: ${o.sp2};
+  width: ${o.sp1};
+  height: ${o.sp1};
+  margin: ${o.sp0} 12px ${o.sp0} 6px;
+  cursor: inherit;
+  background-color: ${(e) => e.theme.colors.grey1};
+`, hs = s.div`
+  padding: ${o.sp2} ${o.sp3};
+`, ms = s(X)`
+  color: ${(e) => e.theme.colors.hero};
+`, Xe = s.div`
+  display: flex;
+  align-items: center;
+  padding: ${o.sp2} ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+  cursor: pointer;
+  column-gap: ${o.sp2};
+  &:hover {
+    background-color: ${(e) => e.theme.colors.background};
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, Je = s(lt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, gs = s(X)`
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 336px;
+`, { common: Be, dateFormat: xs, taskManagement: We } = le.getLocalizedStrings(), ft = {
+  containerPaddingLeft: new oe(W[3], W[4]),
+  containerPaddingRight: new oe(W[3], W[4], W[4], W[8]),
+  containerPaddingTop: new oe(W[2], 12),
+  containerPaddingBottom: new oe(W[2], 12),
+  containerMarginLeft: new oe(W[4], W[8]),
+  containerMarginRight: new oe(W[4], W[8]),
+  taskNameMaxWidth: new oe(125, 170, 170, 250, 300)
+}, fs = ({
+  taskDetail: e,
+  tagList: p,
+  sectionId: r,
+  onRowClick: u,
+  onTimeSpentUpdate: h,
+  onShowToast: d
+}) => {
+  const n = he(), c = e.assigneeUsers.length, i = e.assigneeUsers[0]?.user, l = i?.firstName || i?.lastName ? `${i.firstName} ${i.lastName}` : i?.email ?? Be.strings.empty, { getValues: $, resetField: j, getFieldState: E } = nt(), O = (x, w) => {
+    const k = Ue(
+      x,
+      w,
+      ve
+    );
+    E(k).invalid ? j(k) : h(e, { timeSpent: $(k) });
+  };
+  return /* @__PURE__ */ t.jsxs($s, { children: [
+    /* @__PURE__ */ t.jsxs(
+      Es,
+      {
+        windowSize: n,
+        onClick: u,
+        responsiveWidth: te[0].width,
+        children: [
+          /* @__PURE__ */ t.jsxs(Ns, { windowSize: n, children: [
+            /* @__PURE__ */ t.jsx(
+              Bs,
+              {
+                isIconPresent: e.type.code === "recurring",
+                windowSize: n,
+                className: "taskNameText",
+                children: e.name
+              }
+            ),
+            e.type.code === "recurring" ? /* @__PURE__ */ t.jsx(
+              De,
+              {
+                style: { padding: `12px ${o.sp3}` },
+                title: e.type.name,
+                placement: "bottom",
+                children: /* @__PURE__ */ t.jsx(Rs, { height: o.sp3, width: o.sp3 })
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ t.jsx(
+            De,
+            {
+              style: { padding: `12px ${o.sp3}` },
+              title: e.description,
+              placement: "bottom-start",
+              children: /* @__PURE__ */ t.jsx(
+                Os,
+                {
+                  windowSize: n,
+                  responsiveWidth: te[0].width,
+                  children: /* @__PURE__ */ t.jsx(
+                    Ps,
+                    {
+                      windowSize: n,
+                      className: "taskDescriptionText",
+                      children: e.description
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Qe,
+      {
+        windowSize: n,
+        responsiveWidth: te[1].width,
+        children: Fe(e.status.code)
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      As,
+      {
+        windowSize: n,
+        responsiveWidth: te[2].width,
+        children: Fe(e.priority.code)
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      zs,
+      {
+        windowSize: n,
+        responsiveWidth: te[3].width,
+        children: e.dueDate != null ? e.dueDate.format(xs.visual.MMMDCommaYYYYformat) : /* @__PURE__ */ t.jsx(ys, { children: Be.strings.hyphen })
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Qe,
+      {
+        windowSize: n,
+        responsiveWidth: te[4].width,
+        children: c > 0 ? /* @__PURE__ */ t.jsxs(Ss, { children: [
+          /* @__PURE__ */ t.jsx(
+            mo,
+            {
+              personBasic: i,
+              styles: {
+                width: o.sp4,
+                height: o.sp4
+              }
+            }
+          ),
+          /* @__PURE__ */ t.jsx(Ds, { children: /* @__PURE__ */ t.jsx(Ws, { children: l }) }),
+          c > 1 ? /* @__PURE__ */ t.jsx(Cs, { children: `${Be.strings.plus}${c - 1}` }) : null
+        ] }) : null
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Fs,
+      {
+        windowSize: n,
+        responsiveWidth: te[5].width,
+        children: e.tagIds.length > 0 ? /* @__PURE__ */ t.jsx(_s, { children: uo(e.tagIds, p) }) : null
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Us,
+      {
+        windowSize: n,
+        responsiveWidth: te[6].width,
+        isLastColumn: !0,
+        isDisabled: !1,
+        children: /* @__PURE__ */ t.jsx(Ks, { className: "timeSpentField", children: /* @__PURE__ */ t.jsx(
+          ro,
+          {
+            name: Ue(r, e.id, ve),
+            placeholder: We.common.timeSpentPlaceholder,
+            timeSpentFormat: We.common.timeSpentFormat,
+            registerOptions: {
+              validate: (x) => It(x) > io ? (d({
+                messageSection: "task_time_spent_validation",
+                messageText: "failed",
+                type: "error",
+                showStatusIcon: !0
+              }), "Error") : !0
+            },
+            style: {
+              padding: `${o.sp0} ${o.sp1}`,
+              background: "unset"
+            },
+            onInputBlur: () => {
+              O(r, e.id);
+            },
+            inputStyle: {
+              textAlign: "right",
+              padding: `${o.sp0} ${o.sp2}`
+            }
+          }
+        ) })
+      }
+    )
+  ] });
+}, ks = ({
+  taskGroup: e,
+  tagList: p,
+  sectionId: r,
+  showGroupName: u,
+  showRenameTextField: h,
+  isSelectionAllowed: d,
+  isCollapsed: n,
+  existingTaskGroupNamesByGroupId: c,
+  onDeleteTaskGroup: i,
+  onExpandAll: l,
+  onCollapseAll: $,
+  onAddNewTaskToTaskGroup: j,
+  onCollapseToggle: E,
+  onTaskManagementRowClick: O,
+  onDragStart: x,
+  onTimeSpentUpdate: w,
+  onShowToast: k
+}) => {
+  const [B, P] = F(null), R = he(), { setFocus: S } = nt(), f = g(() => {
+    E(e.id);
+  }, [E, e.id]), L = g(
+    (_) => {
+      P(_.currentTarget);
+    },
+    []
+  ), C = g(() => {
+    P(null);
+  }, []), b = g(() => {
+    j(e.id);
+  }, [j, e.id]), m = g(() => {
+    P(null), i(e.id);
+  }, [i, e.id]), v = g(() => {
+    S(`${r}.groupName`), C();
+  }, [C, r, S]);
+  return /* @__PURE__ */ t.jsxs(ws, { windowSize: R, children: [
+    /* @__PURE__ */ t.jsx(Y, { controller: u, children: /* @__PURE__ */ t.jsxs(vs, { children: [
+      /* @__PURE__ */ t.jsxs(Ts, { children: [
+        /* @__PURE__ */ t.jsx(
+          js,
+          {
+            isOpen: n === !1,
+            onClick: f,
+            children: /* @__PURE__ */ t.jsx(bs, {})
+          }
+        ),
+        /* @__PURE__ */ t.jsx(
+          Pt,
+          {
+            style: {
+              textAlign: "start",
+              width: "100%",
+              background: "unset",
+              ...Rt.largeMedium.cssObject
+            },
+            type: "text",
+            name: `${r}.groupName`,
+            placeholder: We.taskList.taskGroup.groupNamePlaceholder,
+            registerOptions: {
+              required: !0,
+              validate: (_) => lo(
+                _,
+                e.id,
+                c
+              ) === !1
+            },
+            isDisabled: h && e.id !== "new_group" || e.isDefault ? "disabled" : void 0
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t.jsx(Ls, { onClick: L, children: /* @__PURE__ */ t.jsx(Is, {}) }),
+      /* @__PURE__ */ t.jsx(
+        co,
+        {
+          onClose: C,
+          onAddTask: b,
+          onCollapseAll: $,
+          onDelete: m,
+          onExpandAll: l,
+          onRename: v,
+          isDefault: e.isDefault,
+          anchorEl: B
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ t.jsx(Y, { controller: n === !1, children: /* @__PURE__ */ t.jsx(
+      Dt,
+      {
+        mode: "checked_or_hover",
+        isDisabled: d === !1 ? "disabled" : void 0,
+        checkBoxes: [
+          ...e.tasks.map((_) => {
+            const Z = () => {
+              O(_.id);
+            };
+            return {
+              label: /* @__PURE__ */ t.jsx(
+                fs,
+                {
+                  taskDetail: _,
+                  onRowClick: Z,
+                  tagList: p,
+                  onTimeSpentUpdate: w,
+                  onShowToast: k,
+                  sectionId: r
+                }
+              ),
+              prefix: R === "small" ? null : /* @__PURE__ */ t.jsx(Ms, { children: /* @__PURE__ */ t.jsx(Gs, {}) }),
+              value: _.id,
+              defaultChecked: !1,
+              groupLabel: !1
+            };
+          })
+        ],
+        name: `${r}.selectedIds`,
+        style: { width: "100%", rowGap: o.sp3 },
+        checkBoxStyle: { padding: o.sp3 },
+        labelCheckBoxStyle: { padding: o.sp3 },
+        onDragStart: x,
+        draggable: !0
+      }
+    ) })
+  ] });
+}, ws = s.div`
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding-right: ${o.sp3};
+  row-gap: ${o.sp3};
+`, $s = s.div`
+  display: flex;
+  align-items: center;
+  height: ${o.sp10};
+  width: 100%;
+  background-color: ${(e) => e.theme.colors.grey5};
+  border: ${(e) => `1px solid ${e.theme.colors.grey3}`};
+  box-shadow: ${(e) => e.theme.mode === "dark" ? `${ze.dropShadowNormalDark} ${o.sp0} 2px ${o.sp1}` : `${o.sp0} 2px ${o.sp1} ${ze.dropShadowNormalLight}`};
+  border-radius: ${o.sp2};
+  cursor: pointer;
+  &:hover {
+    z-index: 1;
+    border-color: ${(e) => e.theme.colors.primary};
+    color: ${(e) => e.theme.colors.primary};
+    .taskDescriptionText,
+    .taskNameText {
+      color: ${(e) => e.theme.colors.primary};
+    }
+    .selected-options 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};
+    }
+  }
+  padding-left: ${o.sp4};
+  padding-right: ${o.sp4};
+  justify-content: space-between;
+`, ys = s(X)``, Ss = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  color: ${(e) => e.theme.colors.hero};
+`, Cs = s(At)`
+  border: 1px solid ${(e) => e.theme.colors.hero};
+  width: calc(${o.sp3} + ${o.sp1});
+  height: calc(${o.sp3} + ${o.sp1});
+  border-radius: 30%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`, vs = s.div`
+  padding-left: ${o.sp7};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`, Ts = s.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`, js = s.div`
+  cursor: pointer;
+  transform: ${(e) => e.isOpen ? "rotate(0deg)" : "rotate(-90deg)"};
+`, bs = s(ct)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(e) => e.theme.colors.primary};
+`, Ls = s.div`
+  cursor: pointer;
+`, Is = s(Wt)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, Ms = s.div`
+  padding-left: ${o.sp3};
+  cursor: grab;
+`, Gs = s(po)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, Es = s.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: top;
+  column-gap: ${o.sp2};
+  align-items: flex-start;
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+`, Ns = s(X)`
+  display: flex;
+  flex-direction: row;
+  column-gap: ${o.sp2};
+  align-items: flex-start;
+`, Os = s(X)`
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  max-height: ${o.sp4};
+  width: 100%;
+`, Bs = s.div`
+  max-width: ${(e) => `${ft.taskNameMaxWidth.value(e.windowSize) - W[4]}px`};
+  color: ${(e) => e.theme.colors.hero};
+  width: ${(e) => e.isIconPresent ? "80%" : "90%"};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+`, Ps = s(ue)`
+  color: ${(e) => e.theme.colors.grey1};
+  max-width: ${(e) => ft.taskNameMaxWidth.valuePx(e.windowSize)};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`, Rs = s(_t)`
+  display: flex;
+  align-items: center;
+  margin-left: ${o.sp1};
+  color: ${(e) => e.theme.colors.hero};
+  margin-top: ${o.sp1};
+`, Ds = s.div`
+  margin-right: ${o.sp1};
+  margin-left: ${o.sp1};
+  overflow: hidden;
+  display: flex;
+  flex-direction: row;
+  column-gap: ${o.sp2};
+`, Ws = s(ue)`
+  color: ${(e) => e.theme.colors.hero};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: ${o.sp8};
+  white-space: nowrap;
+`, _s = s.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: ${o.sp2};
+`, Qe = s.div`
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  overflow: hidden;
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  margin-right: ${o.sp1};
+`, As = s(ue)`
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  overflow: hidden;
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: ${(e) => e.isLastColumn === !0 ? "flex-end" : "flex-start"};
+  padding-right: ${o.sp1};
+  column-gap: ${o.sp2};
+`, zs = s(ue)`
+  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;
+  align-items: center;
+  justify-content: ${(e) => e.isLastColumn === !0 ? "flex-end" : "flex-start"};
+  padding-right: ${(e) => e.isLastColumn === !0 ? o.sp2 : o.sp0};
+  column-gap: ${o.sp2};
+`, Fs = s.div`
+  width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  min-width: ${(e) => e.responsiveWidth.valuePercentage(e.windowSize)};
+  overflow: hidden;
+  color: ${(e) => e.theme.colors.hero};
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: ${(e) => e.isLastColumn === !0 ? "flex-end" : "flex-start"};
+  padding-right: ${o.sp1};
+  column-gap: ${o.sp2};
+`, Hs = s.div`
+  width: inherit;
+  position: relative;
+`, Us = s(Hs)`
+  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;
+  align-items: center;
+  justify-content: flex-end;
+  column-gap: ${o.sp2};
+`, Ks = s.div`
+  max-width: ${o.sp11};
+`, Ys = (e) => /* @__PURE__ */ N.createElement("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ N.createElement("rect", { x: 10, y: 2, width: 12, height: 12, rx: 2, stroke: "currentColor", strokeWidth: 1.5 }), /* @__PURE__ */ N.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 10.75C7 10.3358 6.66421 10 6.25 10H3.70967C2.76545 10 2 10.7654 2 11.7097V20.2936C2 21.2378 2.76544 22.0033 3.70966 22.0033H12.2936C13.2378 22.0033 14.0033 21.2378 14.0033 20.2936V17.75C14.0033 17.3358 13.6675 17 13.2533 17C12.8391 17 12.5033 17.3358 12.5033 17.75V20.2936C12.5033 20.4094 12.4094 20.5033 12.2936 20.5033H3.70966C3.59387 20.5033 3.5 20.4094 3.5 20.2936V11.7097C3.5 11.5939 3.59387 11.5 3.70967 11.5H6.25C6.66421 11.5 7 11.1642 7 10.75Z", fill: "currentColor" })), K = le.getLocalizedStrings(), Ve = (e) => `${e}_form`, Zs = {
+  rowGap: new oe(W[0], W[5], W[5])
+}, {
+  common: { footer: et },
+  taskManagement: Pe
+} = le.getLocalizedStrings(), Ln = ({
+  taskListView: e,
+  tagListView: p,
+  isTaskTemplatesEnabled: r,
+  onCreateTagClick: u,
+  updateTask: h,
+  onDragNDrop: d,
+  onDeleteTaskGroup: n,
+  updateLocalData: c,
+  onTaskManagementRowClick: i,
+  onReloadTasks: l,
+  onColumnSortConfigChanged: $,
+  onSearchTextChanged: j,
+  onBackClick: E,
+  onNewTaskClick: O,
+  onFiltersChange: x,
+  resetLocalData: w,
+  handleCreateGroup: k,
+  assignGroupToTasks: B,
+  onAddNewTaskToTaskGroup: P,
+  onGroupByFilterChange: R,
+  onTaskGroupRename: S,
+  analytics: f,
+  onTimeSpentUpdate: L,
+  onShowToast: C,
+  handleGroupTemplateClick: b,
+  handleGroupTemplateTaskClick: m,
+  handleNewTaskInitialization: v
+}) => {
+  const [_, Z] = F(!1), [re, H] = F(null), [U, ce] = F(null), [V, we] = F(null), [je, me] = F(null), [$e, de] = F(!1), be = zt(), { fetchState: ie, uiState: ee, filters: Le, userList: ge, taskGroupsWithTasksList: Ie } = e, { tagList: Me } = p, Ge = st(), Ee = (D) => {
+    de(D);
+  }, ye = g(
+    (D) => {
+      me(D.currentTarget);
+    },
+    []
+  ), Se = g(
+    (D) => {
+      R(D);
+    },
+    [R]
+  ), a = g(() => {
+    R("groupName");
+  }, [R]), I = g(
+    (D) => {
+      v(D);
+    },
+    [v]
+  ), A = ge.users.map((D) => D.user).filter((D) => D != null), M = {
+    entity: "task_management",
+    showNewButtonOnNavbar: !0,
+    showEntityEmailInfoIconOnNavbar: !1,
+    newButtonLabel: K.common.create,
+    isSearchOpen: $e,
+    searchPlaceHolder: K.taskManagement.taskList.searchPlaceHolder,
+    searchText: ee.searchText,
+    showSettingsIcon: !1,
+    showStatementButtonOnNavbar: !1,
+    showDownloadButtonOnNavbar: !1,
+    disableDownloadButton: !0,
+    filters: Le,
+    searchTextBoxStyle: { right: "108px" },
+    onNewButtonClick: ye,
+    onSearchOpen: Ee,
+    onSearchTextChanged: j,
+    onFiltersChange: x,
+    analytics: f,
+    downloadState: "Not-Started",
+    createdByUserListLoaded: ge.fetchState === "Completed" || ge.fetchState === "Error",
+    groupByFiltersComponent: {
+      component: /* @__PURE__ */ t.jsx(
+        So,
+        {
+          value: ee.groupByKey,
+          resetDisabled: ee.groupByKey === "groupName",
+          onChange: Se,
+          onReset: a
+        }
+      ),
+      height: 90
+    },
+    getFilterOptions: () => oo(
+      "task_management",
+      A,
+      be.loggedInUserRole ?? [],
+      p.tagList
+    )
+  }, Q = g(
+    (D) => {
+      me(null), H(J), c({
+        ...e.localData,
+        newTaskGroupName: D
+      });
+    },
+    [e.localData, c]
+  ), G = g(() => {
+    me(null);
+  }, []), z = g(() => {
+    U != null && n(U);
+  }, [U, n]), T = g(() => {
+    H(J);
+  }, []), y = g((D) => {
+    we((wt) => wt === D ? null : D);
+  }, []);
+  ne(() => {
+    e.taskGroupDeleteStatus.fetchState === "Completed" && Z(!1);
+  }, [e.taskGroupDeleteStatus.fetchState]), ne(() => {
+    r && e.taskGroupTemplates.length > 0 && we(e.taskGroupTemplates[0].id);
+  }, [r, e.taskGroupTemplates]);
+  const ae = () => ie === "Error" ? /* @__PURE__ */ t.jsxs(tn, { children: [
+    /* @__PURE__ */ t.jsx(on, { onClick: l, children: /* @__PURE__ */ t.jsx(sn, {}) }),
+    /* @__PURE__ */ t.jsx(nn, { children: K.common.reloadPage.label })
+  ] }) : ie === "Completed" && Ie.length === 0 ? /* @__PURE__ */ t.jsx(Kt, { message: K.taskManagement.taskList.noDataText }) : ie === "Not-Started" || ie === "In-Progress" ? /* @__PURE__ */ t.jsx(qt, { fetchState: ie }) : /* @__PURE__ */ t.jsx(
+    qs,
+    {
+      taskListView: e,
+      tagList: Me,
+      renameActiveField: re,
+      updateTask: h,
+      onDragNDrop: d,
+      onAddNewTaskToTaskGroup: P,
+      onColumnSortConfigChanged: $,
+      onTaskManagementRowClick: i,
+      assignGroupToTasks: B,
+      handleCreateGroup: k,
+      resetLocalData: w,
+      setGroupCreationInProgress: T,
+      setShowDeleteModal: Z,
+      updateLocalData: c,
+      setActiveTaskGroupId: ce,
+      setRenameActiveField: H,
+      onTaskGroupRename: S,
+      onTimeSpentUpdate: L,
+      onShowToast: C,
+      onCreateTagClick: u
+    }
+  ), kt = /* @__PURE__ */ t.jsx(
+    Jt,
+    {
+      spendManagementSectionProps: M
+    }
+  );
+  return /* @__PURE__ */ t.jsxs(en, { children: [
+    /* @__PURE__ */ t.jsx(
+      Ft,
+      {
+        title: K.taskManagement.taskList.pageTitle,
+        showBackButton: !0,
+        showMenuIcon: !1,
+        backgroundColor: Ge.colors.grey4,
+        style: { zIndex: 3 },
+        onBackClick: E,
+        rightSideComponent: kt,
+        isSearchOpen: $e,
+        source: "TaskManagementPage"
+      }
+    ),
+    /* @__PURE__ */ t.jsx(
+      Ho,
+      {
+        anchorEl: je,
+        groupByKey: ee.groupByKey,
+        taskGroupTemplates: e.taskGroupTemplates,
+        taskCreationFromTemplateStatus: e.taskCreationFromTemplateStatus,
+        isTaskTemplatesEnabled: r,
+        onClose: G,
+        onNewTaskClick: O,
+        onNewGroupClick: Q,
+        handleGroupTemplateClick: b,
+        handleGroupTemplateTaskClick: m,
+        onNewTaskInitialization: I,
+        onExpandTemplate: y,
+        expandedTemplate: V
+      }
+    ),
+    /* @__PURE__ */ t.jsx(Vs, { children: ae() }),
+    /* @__PURE__ */ t.jsx(Y, { controller: _ === !0, children: /* @__PURE__ */ t.jsx(
+      Ht,
+      {
+        action: {
+          onOkClick: z,
+          onCancelClick: () => {
+            Z(!1);
+          }
+        },
+        isLoading: e.taskGroupDeleteStatus.fetchState === "In-Progress",
+        secondaryButtonText: K.common.cancel,
+        primaryButtonText: K.common.confirm,
+        titleComponent: /* @__PURE__ */ t.jsx(dn, { children: /* @__PURE__ */ t.jsx(Ut, { children: K.taskManagement.taskList.taskGroup.deleteTaskGroup }) }),
+        proceedButtonVariant: "primary",
+        descriptionComponent: /* @__PURE__ */ t.jsx(pn, { children: /* @__PURE__ */ t.jsx(X, { children: K.taskManagement.taskList.deleteConfirmationMessage }) })
+      }
+    ) })
+  ] });
+}, qs = ({
+  taskListView: e,
+  tagList: p,
+  renameActiveField: r,
+  updateTask: u,
+  onTaskGroupRename: h,
+  setRenameActiveField: d,
+  onDragNDrop: n,
+  updateLocalData: c,
+  setShowDeleteModal: i,
+  handleCreateGroup: l,
+  resetLocalData: $,
+  assignGroupToTasks: j,
+  setGroupCreationInProgress: E,
+  onTaskManagementRowClick: O,
+  onColumnSortConfigChanged: x,
+  onAddNewTaskToTaskGroup: w,
+  setActiveTaskGroupId: k,
+  onTimeSpentUpdate: B,
+  onShowToast: P,
+  onCreateTagClick: R
+}) => {
+  const S = fe(null), [f, L] = F(null), C = fe({}), b = he(), { localData: m, taskGroupsWithTasksList: v, uiState: _ } = e, [Z, re] = F([]), H = fe(null);
+  wo({
+    scrollContainerRef: H,
+    isEnabled: b !== "small"
+  });
+  const U = xe(() => e.userList.users.map((a) => a.user).filter((a) => a != null), [e.userList.users]), ce = $t({
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    shouldFocusError: !0,
+    defaultValues: xe(
+      () => tt(
+        e.taskGroupsWithTasksList,
+        m,
+        U,
+        p
+      ),
+      [m, e.taskGroupsWithTasksList, U, p]
+    ),
+    values: xe(
+      () => tt(
+        e.taskGroupsWithTasksList,
+        m,
+        U,
+        p
+      ),
+      [m, e.taskGroupsWithTasksList, U, p]
+    )
+  }), V = xe(() => {
+    if (r !== J)
+      return v;
+    const a = [], I = v.map(
+      (A) => {
+        const M = A.tasks.filter((Q) => {
+          const G = m.selectedTaskIds.includes(Q.id) === !0;
+          return G && a.push(Q), G === !1;
+        });
+        return {
+          ...A,
+          tasks: M
+        };
+      }
+    );
+    return I.unshift({
+      groupName: "",
+      isDefault: !1,
+      id: J,
+      tasks: a
+    }), I;
+  }, [r, v, m.selectedTaskIds]), we = g(
+    (a) => Z.includes(V[a].id) || V[a].tasks.length === 0 ? 100 : C.current?.[a] != null ? C.current[a] + Zs.rowGap.value(b) : (Qt * 1 + Vt) * 3 + eo + to,
+    [Z, V, b]
+  ), je = g(
+    (a) => {
+      L(a.currentTarget);
+    },
+    []
+  ), me = g(
+    (a, I) => {
+      C.current = { ...C.current, [a]: I }, S.current?.resetAfterIndex(0, !0);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [b, S, v]
+  ), $e = g((a) => {
+    re((I) => I.includes(a) ? I.filter((A) => a !== A) : [...I, a]), S.current?.resetAfterIndex(0, !0);
+  }, []), de = g(() => {
+    L(null);
+  }, []), be = g(() => {
+    re(
+      v.map((a) => a.id)
+    ), S.current?.resetAfterIndex(0, !0);
+  }, [v]), ie = g(() => {
+    re([]), S.current?.resetAfterIndex(0, !0);
+  }, []), ee = g(() => {
+    E(), S.current?.scrollTo(0), de();
+  }, [de, E]), Le = g(
+    (a) => {
+      k(a), i(!0);
+    },
+    [k, i]
+  ), ge = g(() => {
+    m.selectedTaskIds.length > 0 ? r !== J ? ee() : l(!0) : r === J ? l(!1) : r != null && h(
+      r,
+      m.existingTaskGroupNamesByGroupId[r]
+    );
+  }, [
+    m.selectedTaskIds.length,
+    m.existingTaskGroupNamesByGroupId,
+    r,
+    ee,
+    l,
+    h
+  ]), Ie = g(() => {
+    d(null), $();
+  }, [$, d]), Me = g(
+    (a) => {
+      $(), d(a);
+    },
+    [$, d]
+  ), Ge = g(() => {
+    m.defaultTaskGroupId != null && j(m.defaultTaskGroupId);
+  }, [j, m.defaultTaskGroupId]), Ee = async (a, I) => {
+    if (a.includes(ht)) {
+      const M = a.split(".")[2], G = v.flatMap((T) => T.tasks).find((T) => T.id === M), z = I[q][pe][M].priority.selectedOption;
+      if (G != null && z != null) {
+        const T = rt.find(
+          (y) => y.code === z
+        );
+        T != null && u(G, {
+          priority: T
+        });
+      }
+      return;
+    }
+    if (a.includes(mt)) {
+      const M = a.split(".")[2], G = v.flatMap((T) => T.tasks).find((T) => T.id === M), z = I[q][pe][M].status.selectedOption;
+      if (G != null && z != null) {
+        const T = it.find(
+          (y) => y.code === z
+        );
+        G != null && T != null && u(G, {
+          status: T
+        });
+      }
+      return;
+    }
+    if (a.includes(pt)) {
+      const M = a.split(".")[2], G = v.flatMap((y) => y.tasks).find((y) => y.id === M), z = v.find((y) => y.tasks.find((ae) => ae.id === M))?.id, T = I[q][pe][M].assignees.selectedUsers.map((y) => y.userId);
+      z != null && T != null && G != null && u(G, {
+        assignees: T
+      });
+      return;
+    }
+    if (a.includes(ut)) {
+      const M = a.split(".")[2], G = v.flatMap((y) => y.tasks).find((y) => y.id === M), z = v.find((y) => y.tasks.find((ae) => ae.id === M))?.id, T = I[q][pe][M].dueDate.date;
+      z != null && T != null && G != null && u(G, {
+        dueDate: T
+      });
+      return;
+    }
+    if (a.includes(dt)) {
+      const M = a.split(".")[2], G = v.flatMap((y) => y.tasks).find((y) => y.id === M), z = v.find((y) => y.tasks.find((ae) => ae.id === M))?.id, T = I[q][pe][M].tags.selectedOptions;
+      z != null && T != null && G != null && u(G, {
+        tagIds: T
+      });
+      return;
+    }
+    a.includes(ve) && ce.trigger(a);
+    const A = Qs(a, I, m);
+    c(A);
+  };
+  ne(() => {
+    const a = ce.watch((I, { name: A }) => {
+      A != null && I != null && yt(() => Ee(A, I));
+    });
+    return () => {
+      a.unsubscribe();
+    };
+  }), ne(() => {
+    e.taskGroupCreationStatus.fetchState === "Completed" && d(null);
+  }, [d, e.taskGroupCreationStatus.fetchState]), ne(() => {
+    e.taskGroupUpdateStatus.fetchState === "Completed" && d(null);
+  }, [d, e.taskGroupUpdateStatus.fetchState]);
+  const ye = v.length > 1 && m.selectedTaskIds.length > 0 && r !== J, Se = m.newTaskGroupName.length > 0 || m.selectedTaskIds.length > 0 || r !== null;
+  return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+    /* @__PURE__ */ t.jsx(St, { ...ce, children: /* @__PURE__ */ t.jsx(
+      "form",
+      {
+        id: Ve(He),
+        onSubmit: ce.handleSubmit(ge),
+        style: { width: "100%" },
+        children: /* @__PURE__ */ t.jsx(
+          rn,
+          {
+            isFooterVisible: Se,
+            windowSize: b,
+            children: /* @__PURE__ */ t.jsx(Ct, { children: ({ height: a, width: I }) => /* @__PURE__ */ t.jsx(
+              vt,
+              {
+                ref: S,
+                outerRef: H,
+                height: a,
+                itemCount: V.length,
+                itemSize: we,
+                estimatedItemSize: no,
+                itemKey: (A) => V[A].id,
+                width: I,
+                overscanCount: so,
+                itemData: {
+                  tagList: p,
+                  taskGroupsWithTasksList: V,
+                  uiState: _,
+                  collapsedGroups: Z,
+                  userList: e.userList,
+                  renameActiveField: r,
+                  selectedRowIds: m.selectedTaskIds,
+                  existingTaskGroupNamesByGroupId: m.existingTaskGroupNamesByGroupId,
+                  onRenameClick: Me,
+                  handleOnDragNDrop: n,
+                  onCollapseToggle: $e,
+                  setRowHeight: me,
+                  onTaskManagementRowClick: O,
+                  onColumnSortConfigChanged: x,
+                  onAddNewTaskToTaskGroup: w,
+                  onCollapseAll: be,
+                  onDeleteTaskGroup: Le,
+                  onExpandAll: ie,
+                  onTimeSpentUpdate: B,
+                  onShowToast: P,
+                  onCreateTagClick: R
+                },
+                initialScrollOffset: 0,
+                children: Xs
+              }
+            ) })
+          }
+        )
+      }
+    ) }),
+    Se ? /* @__PURE__ */ t.jsx(
+      Zt,
+      {
+        formId: Ve(He),
+        primaryBtn: {
+          label: v.length === 1 && m.selectedTaskIds.length > 0 && r !== J ? Pe.taskList.footer.createGroup : et.save,
+          style: { width: "135px" },
+          isLoading: e.taskGroupCreationStatus.fetchState === "In-Progress" || e.taskGroupUpdateStatus.fetchState === "In-Progress"
+        },
+        cancelBtn: {
+          label: et.cancel,
+          style: { width: "135px" },
+          onClick: Ie
+        },
+        helperContainerStyle: b === "small" ? { width: "100%" } : void 0,
+        leftSideComponent: /* @__PURE__ */ t.jsx(
+          Y,
+          {
+            controller: b !== "small" && m.selectedTaskIds.length > 0,
+            children: /* @__PURE__ */ t.jsxs(ln, { children: [
+              /* @__PURE__ */ t.jsx(xt, { count: m.selectedTaskIds.length }),
+              /* @__PURE__ */ t.jsx(cn, { children: m.selectedTaskIds.length > 1 ? Pe.taskList.footer.tasksSelected : Pe.taskList.footer.taskSelected })
+            ] })
+          }
+        ),
+        rightSideComponent: /* @__PURE__ */ t.jsx(
+          Y,
+          {
+            controller: b !== "small" && m.selectedTaskIds.length > 0,
+            children: /* @__PURE__ */ t.jsx(hn, { children: /* @__PURE__ */ t.jsx(
+              De,
+              {
+                enterDelay: 600,
+                title: K.taskManagement.taskList.footer.ungroup,
+                children: /* @__PURE__ */ t.jsx(un, { onClick: Ge })
+              }
+            ) })
+          }
+        ),
+        showPrimaryButton: ye === !1,
+        customPrimaryButton: ye ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            _e,
+            {
+              variant: "secondary",
+              label: K.taskManagement.taskList.footer.moveTo,
+              onClick: je,
+              style: { width: "135px" },
+              size: "standard",
+              loading: e.updateTasksFetchState.fetchState === "In-Progress",
+              reverseSpinnerColor: !1
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            Io,
+            {
+              taskGroupsList: v,
+              anchorEl: f,
+              groupByKey: _.groupByKey,
+              onCreateNewGroup: ee,
+              onExistingGroupSelection: (a) => {
+                de(), j(a);
+              },
+              onClose: de
+            }
+          )
+        ] }) : void 0
+      }
+    ) : null
+  ] });
+}, Xs = ({ index: e, style: p, data: r }) => {
+  const u = fe(null), h = he(), {
+    tagList: d,
+    taskGroupsWithTasksList: n,
+    uiState: c,
+    renameActiveField: i,
+    collapsedGroups: l,
+    onCollapseToggle: $,
+    onTaskManagementRowClick: j,
+    setRowHeight: E,
+    onColumnSortConfigChanged: O,
+    onCollapseAll: x,
+    onExpandAll: w,
+    onAddNewTaskToTaskGroup: k,
+    onDeleteTaskGroup: B,
+    handleOnDragNDrop: P,
+    onRenameClick: R,
+    userList: S,
+    selectedRowIds: f,
+    existingTaskGroupNamesByGroupId: L,
+    onTimeSpentUpdate: C,
+    onShowToast: b,
+    onCreateTagClick: m
+  } = r;
+  ne(
+    () => {
+      u.current?.firstElementChild != null && E(e, u.current.firstElementChild.clientHeight);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [e, u, h, n[e]?.tasks]
+  );
+  const v = g(
+    (H) => {
+      const U = H.dataTransfer.getData("row");
+      P(U, n[e].id);
+    },
+    [P, e, n]
+  ), _ = g((H) => {
+    H.preventDefault();
+  }, []), Z = (H, U) => {
+    H.dataTransfer.setData("row", U);
+  }, re = () => {
+    R(n[e].id);
+  };
+  return /* @__PURE__ */ t.jsx(
+    an,
+    {
+      style: {
+        ...p,
+        width: "100%"
+      },
+      ref: u,
+      onDrop: v,
+      onDragOver: _,
+      children: /* @__PURE__ */ t.jsx(
+        Js,
+        {
+          taskGroup: n[e],
+          showGroupName: !0,
+          tagList: d,
+          uiState: c,
+          isCollapsed: l.includes(
+            n[e].id
+          ),
+          onCollapseToggle: $,
+          showRenameTextField: i === n[e].id,
+          isSelectionAllowed: i == null,
+          onTaskManagementRowClick: j,
+          onColumnSortConfigChanged: O,
+          onAddNewTaskToTaskGroup: k,
+          onCollapseAll: x,
+          onDeleteTaskGroup: B,
+          onExpandAll: w,
+          selectedRowIds: f,
+          userList: S,
+          existingTaskGroupNamesByGroupId: L,
+          onDragStart: Z,
+          onRenameClick: re,
+          onTimeSpentUpdate: C,
+          onShowToast: b,
+          onCreateTagClick: m
+        },
+        n[e].id
+      )
+    }
+  );
+}, Js = ({
+  taskGroup: e,
+  tagList: p,
+  showGroupName: r,
+  uiState: u,
+  showRenameTextField: h,
+  isCollapsed: d,
+  isSelectionAllowed: n,
+  selectedRowIds: c,
+  userList: i,
+  existingTaskGroupNamesByGroupId: l,
+  onRenameClick: $,
+  onTaskManagementRowClick: j,
+  onCollapseToggle: E,
+  onColumnSortConfigChanged: O,
+  onCollapseAll: x,
+  onExpandAll: w,
+  onAddNewTaskToTaskGroup: k,
+  onDeleteTaskGroup: B,
+  onDragStart: P,
+  onTimeSpentUpdate: R,
+  onShowToast: S,
+  onCreateTagClick: f
+}) => {
+  const L = he(), C = L === "medium-regular" || L === "medium-compact" || L === "small" ? ks : ho;
+  return /* @__PURE__ */ t.jsx(
+    C,
+    {
+      taskGroup: e,
+      tagList: p,
+      userList: i,
+      sectionId: q,
+      showGroupName: r,
+      uiState: u,
+      showRenameTextField: h,
+      isCollapsed: d,
+      isSelectionAllowed: n,
+      selectedRowIds: c,
+      existingTaskGroupNamesByGroupId: l,
+      onAddNewTaskToTaskGroup: k,
+      onCollapseAll: x,
+      onDeleteTaskGroup: B,
+      onExpandAll: w,
+      onCollapseToggle: E,
+      onTaskManagementRowClick: j,
+      onColumnSortConfigChanged: O,
+      onDragStart: P,
+      onRenameClick: $,
+      onTimeSpentUpdate: R,
+      onShowToast: S,
+      onCreateTagClick: f
+    }
+  );
+}, tt = (e, p, r, u) => {
+  const h = {}, d = {};
+  e.forEach((c) => {
+    d[c.id] = {
+      [Te]: [],
+      [ke]: p.existingTaskGroupNamesByGroupId[c.id]
+    }, c.tasks.forEach((i) => {
+      p.selectedTaskIds.includes(i.id) && d[c.id].selectedIds.push(i.id), h[i.id] = {
+        [mt]: {
+          selectedOption: i.status.code,
+          allOptions: it.map((l) => ({
+            label: l.name,
+            value: l.code
+          }))
+        },
+        [ht]: {
+          selectedOption: i.priority.code,
+          allOptions: rt.map((l) => ({
+            label: l.name,
+            value: l.code
+          }))
+        },
+        [ut]: {
+          date: i.dueDate,
+          showBusinessDay: !1
+        },
+        [pt]: {
+          allUsers: r,
+          selectedUsers: i.assigneeUsers.map(
+            (l) => l.user
+          )
+        },
+        [dt]: {
+          allOptions: ao(u),
+          selectedOptions: i.tagIds
+        },
+        [ve]: i.timeSpent
+      };
+    });
+  });
+  const n = {
+    [gt]: {
+      [J]: {
+        [ke]: p.newTaskGroupName,
+        [Te]: []
+      },
+      ...d
+    },
+    [pe]: h
+  };
+  return {
+    [q]: n
+  };
+}, Qs = (e, p, r) => {
+  if (e.includes(q)) {
+    const u = e.split(".")[2];
+    if (e.includes(ke))
+      return e.includes(J) ? {
+        ...r,
+        newTaskGroupName: p[q].groupData[u][ke]
+      } : {
+        ...r,
+        existingTaskGroupNamesByGroupId: {
+          ...r.existingTaskGroupNamesByGroupId,
+          [u]: p[q].groupData[u][ke]
+        }
+      };
+    if (e.includes(Te)) {
+      const h = Tt(
+        jt(
+          Object.values(p[q][gt]),
+          Te
+        )
+      ).filter((d) => d !== K.common.all.toLocaleLowerCase());
+      return {
+        ...r,
+        selectedTaskIds: h
+      };
+    }
+  }
+  return r;
+}, Vs = s.div`
+  display: block;
+  height: 100%;
+`, en = s.div`
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  row-gap: ${o.sp4};
+  background-color: ${(e) => e.theme.colors.grey4};
+  overflow: hidden;
+`, tn = s.div`
+  display: flex;
+  width: 100%;
+  height: calc(100% - 60px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`, on = s.div`
+  height: 96px;
+  width: 96px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${(e) => e.theme.colors.background};
+  border-radius: 50%;
+  cursor: pointer;
+`, sn = s(at)`
+  height: ${o.sp5};
+  width: ${o.sp5};
+  color: ${(e) => e.theme.colors.grey1};
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, nn = s(Yt)`
+  margin-top: ${o.sp3};
+  color: ${(e) => e.theme.colors.hero};
+`, rn = s.div`
+  /** Subtract top so list can occupy remaining available height */
+  height: ${(e) => e.isFooterVisible === !0 ? "calc(100vh - 152px)" : "calc(100vh - 88px)"}; // total - header
+  max-width: 99.9%;
+`, an = s.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  box-sizing: border-box;
+`, ln = s.div`
+  display: flex;
+  align-items: center;
+  column-gap: ${o.sp2};
+  padding-left: ${o.sp9};
+`, cn = s(X)`
+  color: ${(e) => e.theme.colors.primary};
+`, dn = s.div`
+  padding-top: ${o.sp7};
+  padding-bottom: ${o.sp4};
+  color: ${(e) => e.theme.colors.primary};
+`, pn = s.div`
+  padding-left: ${o.sp8};
+  padding-right: ${o.sp8};
+  padding-bottom: ${o.sp5};
+  color: ${(e) => e.theme.colors.hero};
+`, un = s(Ys)`
+  width: ${o.sp4};
+  height: ${o.sp4};
+  cursor: pointer;
+  color: ${(e) => e.theme.colors.hero};
+
+  &:hover {
+    color: ${(e) => e.theme.colors.primary};
+  }
+`, hn = s.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: ${o.sp6};
+`;
+export {
+  Ln as default,
+  Ve as uniqueFormName
+};