@zeniai/web-components 3.16.55 → 3.16.56

package/dist/NotificationsPage-Cp5Vzxen.js

@@ -0,0 +1,2664 @@
+import { u as ot, j as e, n as ft, d as pt, l as se, A as ne, I as ae, V as re, b as jt, g as Ze, h as to, F as eo } from "./vendor-.pnpm-Q8NJHkXi.js";
+import { useCallback as v, useContext as oo, useRef as W, useEffect as G, useMemo as Q } from "react";
+import { css as M } from "@emotion/react";
+import a from "@emotion/styled";
+import { zeniDate as et, dateNow as y, toZeniUrl as le, toNotificationSubTabTypeStrict as io, toNotificationTabTypeStrict as so } from "@zeniai/client-epic-state";
+import { u as C, jl as no, a as F, kp as ao, C as j, kq as ce, R as _, dz as de, dB as ue, T as ro, ae as V, hD as me, D as x, S as o, jz as lo, p as it, E as Y, o as gt, Q as he, aJ as z, t as Rt, fK as xt, kr as bt, ff as fe, ks as Dt, hG as co, W as uo, aE as mo, ap as ho, aL as Ct, fY as fo, A as po, B as go, eG as xo, av as bo, K as pe, G as wo } from "./index-Ch0zSUpF.js";
+import { S as $o } from "./double-tick-D6s_OvsM.js";
+import { S as yo } from "./SubTabSwitcher-CztgTlw9.js";
+import { u as ge } from "./useLongPress-GCK2COYQ.js";
+import { D as xe, a as be, b as we, c as $e, A as ye, O as Se } from "./NotificationsListConfig-32mYn0rU.js";
+function So({
+  tabs: t,
+  selectedTab: i,
+  subTabs: s,
+  selectedSubTab: n,
+  subTabRightComponent: r,
+  tabStyle: l,
+  subTabStyle: d,
+  onTabChange: c,
+  onSubTabChange: h
+}) {
+  const p = C(), u = ot(), m = v(
+    (g) => {
+      c(g.id);
+    },
+    [c]
+  ), f = v(
+    (g) => {
+      h(g.id);
+    },
+    [h]
+  );
+  return t.length === 0 ? null : /* @__PURE__ */ e.jsxs(jo, { windowSize: p, children: [
+    /* @__PURE__ */ e.jsx(
+      no,
+      {
+        allTabs: t,
+        selectedTab: i,
+        containerStyle: {
+          ...l,
+          borderBottom: `1px solid ${u.colors.grey3}`
+        },
+        onTabChange: m
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      yo,
+      {
+        allTabs: s,
+        selectedTab: n,
+        containerStyle: { ...d },
+        rightComponent: r,
+        onTabChange: f
+      }
+    )
+  ] });
+}
+const jo = a.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`, {
+  common: { timeStrings: je, strings: Co },
+  dateFormat: _t,
+  timeFormat: vo
+} = F.getLocalizedStrings(), Ce = [
+  "today",
+  "yesterday",
+  "last_7_days_this_month",
+  // before_yesterday
+  "earlier_this_month",
+  // before last_7_days_this_month
+  "earlier_that_month"
+], ut = (t) => t.type.concat(Co.underscore).concat(
+  t.start.format(_t.visual.DdashMMdashYYYYFormat)
+), wt = (t) => {
+  switch (t.type) {
+    case "today":
+    case "yesterday":
+    case "earlier_this_month":
+    case "last_7_days_this_month":
+      return je[t.type];
+    case "earlier_that_month":
+      return t.start.format(_t.visual.MMMYYYYFormat);
+  }
+}, ve = (t) => {
+  const i = et(t.toUTCString()), s = y(), n = s.diff(i, "minutes"), r = s.diff(i, "seconds"), l = 60, d = 24 * 60;
+  return r <= l ? je.justNow : n < d && ao(i, 0) ? i.format(vo.hhmmAFormat) : i.format(_t.visual.MMMDFormat);
+}, At = (t) => {
+  switch (t.code) {
+    case "todo":
+      return j.important;
+    case "in_progress":
+      return j.info;
+    case "on_hold":
+      return j.alert;
+    case "done":
+      return j.championLight;
+    case "resolved":
+      return j.successDark;
+    default:
+      return j.neutralGrey2Light;
+  }
+}, {
+  commentsAndNotifications: {
+    notifications: {
+      actionStrings: { comments: No }
+    }
+  }
+} = F.getLocalizedStrings(), Ne = (t) => {
+  t.sort(
+    (r, l) => et(r.inboxNotification.notifiedAt.toUTCString()).isAfter(
+      et(l.inboxNotification.notifiedAt.toUTCString())
+    ) === !0 ? 1 : -1
+  );
+  let i = [...t];
+  const s = [];
+  let n = {
+    singleGroup: [],
+    remainingData: []
+  };
+  for (const r of Ce) {
+    let l = 0, d = 0, c = y().subtract(Math.min(y().date(), l), "d").startOf("d"), h = y().subtract(Math.min(y().date(), d), "d").endOf("d"), p = 1;
+    switch (r) {
+      case "today":
+      case "yesterday":
+        l = r === "today" ? 0 : 1, d = r === "today" ? 0 : 1, c = y().subtract(Math.min(y().date(), l), "d").startOf("d"), h = y().subtract(Math.min(y().date(), d), "d").endOf("d"), n = at(
+          i,
+          c,
+          h
+        ), i = n.remainingData, s.push({
+          start: c,
+          end: h,
+          type: r,
+          notifications: n.singleGroup
+        });
+        break;
+      case "last_7_days_this_month":
+        i.length > 0 && y().date() > 2 && (c = y().subtract(Math.min(y().date() - 1, 8), "d").startOf("d"), h = y().subtract(2, "d").endOf("d"), n = at(
+          i,
+          c,
+          h
+        ), i = n.remainingData, s.push({
+          start: c,
+          end: h,
+          type: r,
+          notifications: n.singleGroup
+        }));
+        break;
+      case "earlier_this_month":
+        i.length > 0 && y().date() > 9 && (c = y().startOf("M").startOf("d"), h = y().subtract(9, "d").endOf("d"), n = at(
+          i,
+          c,
+          h
+        ), i = n.remainingData, s.push({
+          start: c,
+          end: h,
+          type: r,
+          notifications: n.singleGroup
+        }));
+        break;
+      case "earlier_that_month":
+        for (; i.length > 0; ) {
+          const u = y().subtract(p, "month").startOf("M").startOf("d"), m = y().subtract(p, "month").endOf("M").endOf("d");
+          p++, n = at(
+            i,
+            u,
+            m
+          ), i = n.remainingData, s.push({
+            start: u,
+            end: m,
+            type: r,
+            notifications: n.singleGroup
+          });
+        }
+        break;
+    }
+  }
+  return s;
+}, at = (t, i, s) => {
+  const n = [], r = t.map((l) => ce(
+    i,
+    s,
+    et(l.inboxNotification.notifiedAt.toUTCString())
+  ) ? (n.push(l), null) : l).filter(
+    (l) => !!l
+  );
+  return n.sort(
+    (l, d) => et(l.inboxNotification.notifiedAt.toUTCString()).isAfter(
+      et(d.inboxNotification.notifiedAt.toUTCString())
+    ) === !0 ? -1 : 1
+  ), { singleGroup: n, remainingData: r };
+}, To = (t) => {
+  const { thread: i } = t, { newRepliesAdded: s, newCommentAdded: n } = No;
+  return i.comments.length === 1 ? n : s;
+}, Te = new _(3, 2, 1, 1, 1), ke = new _(
+  x[8],
+  x[6],
+  35,
+  35,
+  x[6]
+), mt = {
+  lineClamp: Te,
+  sectionWidth: ke
+}, {
+  common: { texts: Ot, timeStrings: ko, strings: st },
+  commentsAndNotifications: {
+    notifications: {
+      strings: { newMessage: Lo },
+      actionStrings: {
+        comments: { newCommentAdded: Io }
+      }
+    }
+  }
+} = F.getLocalizedStrings(), Ro = ({
+  notificationData: t,
+  users: i,
+  isHighlighted: s = !1,
+  style: n,
+  onNotificationTileClick: r
+}) => {
+  const l = de(), c = ue().analytics, {
+    inboxNotification: { id: h, readAt: p, notifiedAt: u },
+    thread: m
+  } = t, { setRequestToOpenThread: f } = oo(ro), g = p != null ? "read" : "unread", {
+    metadata: { url: S, companyId: I, entityType: D },
+    id: R
+  } = m;
+  return /* @__PURE__ */ e.jsxs(
+    Mo,
+    {
+      readStatus: g,
+      isClickable: !!S,
+      isHighlighted: s,
+      style: n,
+      onClick: () => {
+        S && (r(h, le(S), g), (m.metadata.tab === "bill" || m.metadata.tab === "reimbursement") && f({
+          threadId: R,
+          companyId: I,
+          entityType: D
+        })), m.metadata.application !== "cockpit" && c.trackCommentActivity(
+          "notification",
+          // pageName
+          "clicked",
+          // activityType
+          m.metadata.companyName,
+          // tenantName
+          l.controllersList.controllers.map(
+            (k) => V(k)
+          ),
+          // controllerName
+          m.resolved ? "resolved" : "open",
+          // status
+          {
+            name: me(l.loggedInUser),
+            email: l.loggedInUser?.userEmail ?? ""
+          },
+          // createdBy
+          "db notification"
+          // source
+        );
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(_o, { notificationData: t, users: i }),
+        /* @__PURE__ */ e.jsx(Do, { ...t }),
+        /* @__PURE__ */ e.jsx(Ao, { timestamp: u, readStatus: g })
+      ]
+    }
+  );
+}, Le = ({
+  notificationData: t,
+  users: i
+}) => {
+  const { thread: s } = t, { comments: n } = s, r = n[0];
+  return n.length === 0 || r.body == null ? /* @__PURE__ */ e.jsx(vt, { children: Lo }) : /* @__PURE__ */ e.jsx(vt, { children: r.body.content.map((l) => {
+    switch (l.type) {
+      case "paragraph":
+        return l.children.map((d, c) => {
+          if (Oo(d)) {
+            const p = i.find((u) => u.userId === d.id);
+            return d.id ? /* @__PURE__ */ e.jsx(
+              zo,
+              {
+                notificationData: t,
+                user: p
+              },
+              `${d.id}${st.underscore}${c}`
+            ) : null;
+          }
+          if (Eo(d)) {
+            const p = lo(d.url) ?? d.url;
+            return /* @__PURE__ */ e.jsx(
+              Vo,
+              {
+                href: p,
+                target: "_blank",
+                rel: "noopener noreferrer nofollow",
+                children: d.text ?? d.url
+              },
+              c
+            );
+          }
+          let h = d.text;
+          return d.bold === !0 && (h = /* @__PURE__ */ e.jsx(Bo, { children: h }, c)), d.italic === !0 && (h = /* @__PURE__ */ e.jsx(Uo, { children: h }, c)), d.strikethrough === !0 && (h = /* @__PURE__ */ e.jsx(Wo, { children: h }, c)), d.code === !0 && (h = /* @__PURE__ */ e.jsx(Go, { children: h }, c)), /* @__PURE__ */ e.jsx(Ho, { children: h }, c);
+        });
+      default:
+        return /* @__PURE__ */ e.jsx(vt, { children: Io });
+    }
+  }) });
+}, _o = ({
+  notificationData: t,
+  users: i
+}) => {
+  const s = C();
+  return /* @__PURE__ */ e.jsx(Yo, { windowSize: s, children: /* @__PURE__ */ e.jsx(
+    Le,
+    {
+      notificationData: t,
+      users: i
+    }
+  ) });
+}, zo = ({
+  notificationData: t,
+  user: i
+}) => {
+  const {
+    inboxNotification: { readAt: s }
+  } = t, n = s != null ? "read" : "unread";
+  let r = /* @__PURE__ */ e.jsxs(Et, { className: "userText", readStatus: n, children: [
+    st.atTheRate,
+    Ot.user,
+    st.space
+  ] });
+  if (i != null) {
+    const l = V(i, !1);
+    r = /* @__PURE__ */ e.jsx(e.Fragment, { children: /* @__PURE__ */ e.jsxs(Et, { className: "userText", readStatus: n, children: [
+      st.atTheRate,
+      l || Ot.user,
+      st.space
+    ] }) });
+  }
+  return r;
+}, Ie = (t) => {
+  const i = To(t);
+  return /* @__PURE__ */ e.jsx(e.Fragment, { children: i });
+}, Do = (t) => {
+  const i = C();
+  return /* @__PURE__ */ e.jsx(Po, { windowSize: i, children: /* @__PURE__ */ e.jsx(Ie, { ...t }) });
+}, Re = (t) => {
+  const { timestamp: i, readStatus: s } = t, n = ve(i);
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      Jo,
+      {
+        isNewNotification: n === ko.justNow,
+        children: n
+      }
+    ),
+    /* @__PURE__ */ e.jsx(Ko, { readStatus: s })
+  ] });
+}, Ao = (t) => {
+  const i = C();
+  return /* @__PURE__ */ e.jsx(Fo, { windowSize: i, children: /* @__PURE__ */ e.jsx(Re, { ...t }) });
+};
+function Oo(t) {
+  return "type" in t && t.type === "mention";
+}
+function Eo(t) {
+  return "type" in t && t.type === "link";
+}
+const Mo = a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  cursor: ${(t) => t.isClickable ? "pointer" : "not-allowed"};
+
+  background-color: ${(t) => t.readStatus === "read" && t.isClickable ? t.theme.colors.grey4 : t.theme.colors.grey5};
+
+  color: ${(t) => t.readStatus === "read" && t.isClickable ? t.theme.colors.grey1 : t.theme.colors.hero};
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${(t) => `${o.sp0} 2px ${o.sp1} ${t.theme.colors.dropShadowNormal}`};
+
+  padding: ${o.sp3} ${o.sp2} ${o.sp3} ${o.sp4};
+
+  .userText {
+    color: ${j.brandColorJade};
+  }
+
+  :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;
+  }
+
+  ${(t) => t.isHighlighted ? M`
+          z-index: 1;
+          color: ${t.theme.colors.primary};
+          border: 1px solid ${t.theme.colors.primary};
+
+          .userText {
+            color: ${j.brandColorJade};
+          }
+        ` : null};
+
+  ${(t) => t.isClickable ? M`
+          &:hover {
+            z-index: 1;
+            color: ${t.theme.colors.primary};
+            border: 1px solid ${t.theme.colors.primary};
+
+            .userText {
+              color: ${j.brandColorJade};
+            }
+          }
+        ` : null};
+`, Fo = a(Y)`
+  width: ${(t) => t.windowSize === "small" ? "unset" : "10%"};
+  gap: ${o.sp2};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`, Po = a(it)`
+  color: inherit;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: ${(t) => mt.lineClamp.value(t.windowSize)};
+  -webkit-box-orient: vertical;
+  width: ${(t) => mt.sectionWidth.valuePercentage(t.windowSize)};
+`, Bo = a.strong``, Go = a.code``, Uo = a.em``, Wo = a.s``, Ho = a.span``, Vo = a.a``, Yo = a(it)`
+  color: inherit;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: ${(t) => mt.lineClamp.value(t.windowSize)};
+  -webkit-box-orient: vertical;
+  width: ${(t) => mt.sectionWidth.valuePercentage(t.windowSize)};
+`, Et = a(gt)`
+  color: ${(t) => t.readStatus === "read" ? t.theme.colors.grey1 : j.brandColorJade};
+`, vt = a(gt)`
+  color: inherit;
+`, Jo = a(he)`
+  flex-shrink: 0;
+  color: ${(t) => t.isNewNotification ? t.theme.colors.primary : "inherit"};
+`, Ko = a.div`
+  display: flex;
+  height: ${o.sp2};
+  width: ${o.sp2};
+  border-radius: ${o.sp2};
+  flex-shrink: 0;
+  background-color: ${(t) => t.readStatus === "unread" ? j.info : "transparent"};
+`, Nt = {
+  emptyRowItemSectionWidth: new _(120, 200, 250, 330, 400),
+  emptyLastRowItemSectionWidth: new _(x[6], 50, 60, x[11], 120)
+}, qo = () => {
+  const t = C();
+  return /* @__PURE__ */ e.jsxs(Qo, { windowSize: t, children: [
+    /* @__PURE__ */ e.jsx(Tt, { windowSize: t, isLastItem: !1, children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: Nt.emptyRowItemSectionWidth.value(t),
+        height: x[4]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(Tt, { windowSize: t, isLastItem: !1, children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: Nt.emptyRowItemSectionWidth.value(t),
+        height: x[4]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(Tt, { windowSize: t, isLastItem: !0, children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: Nt.emptyLastRowItemSectionWidth.value(t),
+        height: 18
+      }
+    ) })
+  ] });
+}, Qo = a.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: ${o.sp3} ${o.sp2} ${o.sp3} ${o.sp4};
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${(t) => `${o.sp0} 2px ${o.sp1} ${t.theme.colors.dropShadowNormal}`};
+
+  :hover {
+    z-index: 1;
+    border: ${(t) => `1px solid ${t.theme.colors.primary}`};
+  }
+
+  :first-of-type {
+    border-top-left-radius: ${o.sp2};
+    border-top-right-radius: ${o.sp2};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${o.sp2};
+    border-bottom-right-radius: ${o.sp2};
+  }
+`, Tt = a.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex: 1 1 auto;
+  justify-content: ${(t) => t.isLastItem ? "flex-end" : "start"};
+  width: ${(t) => t.isLastItem ? "10%" : ke.valuePercentage(t.windowSize)};
+`, Xo = () => {
+  const t = C();
+  return /* @__PURE__ */ e.jsxs(Zo, { windowSize: t, children: [
+    /* @__PURE__ */ e.jsxs(ti, { children: [
+      /* @__PURE__ */ e.jsx(z, { width: 180, height: x[4] }),
+      /* @__PURE__ */ e.jsx(z, { width: 180, height: x[4] })
+    ] }),
+    /* @__PURE__ */ e.jsx(ei, { children: /* @__PURE__ */ e.jsx(z, { width: 60, height: 18 }) })
+  ] });
+}, Zo = a.div`
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-direction: row;
+  gap: ${o.sp4};
+
+  padding: ${o.sp3} ${o.sp2} ${o.sp3} ${o.sp3};
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${(t) => `${o.sp0} 2px ${o.sp1} ${t.theme.colors.dropShadowNormal}`};
+
+  :hover {
+    z-index: 1;
+    border: ${(t) => `1px solid ${t.theme.colors.primary}`};
+  }
+
+  :first-of-type {
+    border-top-left-radius: ${o.sp2};
+    border-top-right-radius: ${o.sp2};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${o.sp2};
+    border-bottom-right-radius: ${o.sp2};
+  }
+`, ti = a.div`
+  display: flex;
+  align-items: start;
+  flex-direction: column;
+  gap: ${o.sp2};
+  flex: 1 1 auto;
+  justify-content: start;
+`, ei = a.div`
+  display: flex;
+  align-items: baseline;
+  flex-direction: row;
+  justify-content: end;
+`, oi = () => C() === "small" ? /* @__PURE__ */ e.jsx(Xo, {}) : /* @__PURE__ */ e.jsx(qo, {}), ii = {
+  marginLeft: new _(x[2], x[5], x[7])
+}, si = () => /* @__PURE__ */ e.jsxs(ni, { children: [
+  /* @__PURE__ */ e.jsx(kt, { numberOfRows: 5 }),
+  /* @__PURE__ */ e.jsx(kt, { numberOfRows: 3 })
+] }), kt = ({
+  numberOfRows: t
+}) => {
+  const i = C();
+  return /* @__PURE__ */ e.jsxs(ai, { windowSize: i, children: [
+    /* @__PURE__ */ e.jsx(li, { children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: x[12],
+        height: Rt.standardRegular.lineHeightValue
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(ri, { children: [...Array(t)].map((s) => /* @__PURE__ */ e.jsx(oi, {}, ft())) })
+  ] });
+}, ni = a.div`
+  display: block;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`, ai = a.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${o.sp5};
+  margin-left: ${(t) => ii.marginLeft.valuePx(t.windowSize)};
+`, ri = a.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${o.sp2};
+`, li = a.div`
+  display: flex;
+  padding: ${o.sp3} ${o.sp0};
+`, ci = ({
+  notificationData: t,
+  users: i,
+  isSelectionMode: s = !1,
+  isHighlighted: n = !1,
+  style: r,
+  onNotificationTileClick: l,
+  onNotificationTileLongPress: d
+}) => {
+  const c = de(), p = ue().analytics, {
+    inboxNotification: { id: u, readAt: m, notifiedAt: f },
+    thread: g
+  } = t, S = m != null ? "read" : "unread", I = g.metadata.url, D = v(() => {
+    d?.();
+  }, [d]), R = v(
+    ($) => {
+      $.stopPropagation(), $.cancelable && $.preventDefault(), s ? d?.() : I != null && (l(u, le(g.metadata.url), S), g.metadata.application !== "cockpit" && p.trackCommentActivity(
+        "notification",
+        // pageName
+        "clicked",
+        // activityType
+        g.metadata.companyName,
+        // tenantName
+        c.controllersList.controllers.map(
+          (L) => V(L)
+        ),
+        // controllerName
+        g.resolved ? "resolved" : "open",
+        // status
+        {
+          name: me(c.loggedInUser),
+          email: c.loggedInUser?.userEmail ?? ""
+        },
+        // createdBy
+        "db notification"
+        // source
+      ));
+    },
+    [
+      s,
+      I,
+      d,
+      l,
+      u,
+      g.metadata.url,
+      g.metadata.application,
+      S,
+      c.controllersList,
+      c.loggedInUser,
+      p,
+      g.metadata.companyName,
+      g.resolved
+    ]
+  ), k = ge({ onLongPress: D }, {
+    shouldPreventDefault: !1,
+    delay: 1e3
+  });
+  return /* @__PURE__ */ e.jsxs(
+    hi,
+    {
+      readStatus: S,
+      isClickable: I != null,
+      isHighlighted: n,
+      style: r,
+      ...k,
+      onClick: R,
+      children: [
+        /* @__PURE__ */ e.jsxs(pi, { children: [
+          /* @__PURE__ */ e.jsx(
+            di,
+            {
+              notificationData: t,
+              users: i
+            }
+          ),
+          /* @__PURE__ */ e.jsx(ui, { ...t })
+        ] }),
+        /* @__PURE__ */ e.jsx(mi, { timestamp: f, readStatus: S })
+      ]
+    }
+  );
+}, di = ({
+  notificationData: t,
+  users: i
+}) => /* @__PURE__ */ e.jsx(_e, { children: /* @__PURE__ */ e.jsx(
+  Le,
+  {
+    notificationData: t,
+    users: i
+  }
+) }), ui = (t) => /* @__PURE__ */ e.jsx(_e, { children: /* @__PURE__ */ e.jsx(Ie, { ...t }) }), mi = (t) => /* @__PURE__ */ e.jsx(fi, { children: /* @__PURE__ */ e.jsx(Re, { ...t }) }), hi = a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+  gap: ${o.sp2};
+  cursor: ${(t) => t.isClickable ? "pointer" : "not-allowed"};
+
+  background-color: ${(t) => t.readStatus === "read" && t.isClickable ? t.theme.colors.grey4 : t.theme.colors.grey5};
+
+  color: ${(t) => t.readStatus === "read" && t.isClickable ? t.theme.colors.grey1 : t.theme.colors.hero};
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${(t) => `${o.sp0} 2px ${o.sp1} ${t.theme.colors.dropShadowNormal}`};
+
+  padding: ${o.sp3} ${o.sp2} ${o.sp3} ${o.sp3};
+
+  .userText {
+    color: ${j.brandColorJade};
+  }
+
+  :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;
+  }
+
+  ${(t) => t.isHighlighted ? M`
+          z-index: 1;
+          color: ${t.theme.colors.primary};
+          border: 1px solid ${t.theme.colors.primary};
+
+          .userText {
+            color: ${j.brandColorJade};
+          }
+        ` : null};
+
+  ${(t) => t.isClickable ? M`
+          &:hover {
+            z-index: 1;
+            color: ${t.theme.colors.primary};
+            border: 1px solid ${t.theme.colors.primary};
+
+            .userText {
+              color: ${j.brandColorJade};
+            }
+          }
+        ` : null};
+`, fi = a(Y)`
+  width: 25%;
+  gap: ${o.sp2};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`, pi = a.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${o.sp2};
+`, _e = a(it)`
+  color: inherit;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+`, ze = (t) => C() === "small" ? /* @__PURE__ */ e.jsx(ci, { ...t }) : /* @__PURE__ */ e.jsx(Ro, { ...t }), {
+  common: { all: Mt }
+} = F.getLocalizedStrings(), gi = ({
+  notificationGroup: t,
+  users: i,
+  sectionId: s,
+  checkBoxMode: n,
+  style: r,
+  isDisabled: l,
+  onNotificationTileClick: d
+}) => {
+  const c = ot(), { getValues: h } = pt(), p = h(s);
+  return /* @__PURE__ */ e.jsx(xi, { style: r, children: /* @__PURE__ */ e.jsx(
+    xt,
+    {
+      mode: n,
+      checkBoxes: [
+        {
+          label: /* @__PURE__ */ e.jsx(
+            bi,
+            {
+              htmlFor: `${s}.${Mt.toLocaleLowerCase()}`,
+              style: { color: c.colors.primary },
+              children: wt(t)
+            }
+          ),
+          value: Mt.toLocaleLowerCase(),
+          defaultChecked: !1,
+          groupLabel: !0
+        },
+        ...t.notifications.map(
+          (u, m) => {
+            const f = m === 0, g = t.notifications.length - 1 === m;
+            return {
+              label: /* @__PURE__ */ e.jsx(
+                ze,
+                {
+                  notificationData: u,
+                  users: i,
+                  style: {
+                    borderTopLeftRadius: f ? o.sp2 : void 0,
+                    borderTopRightRadius: f ? o.sp2 : void 0,
+                    borderBottomLeftRadius: g ? o.sp2 : void 0,
+                    borderBottomRightRadius: g ? o.sp2 : void 0
+                  },
+                  isHighlighted: p?.includes(u.inboxNotification.id) === !0,
+                  onNotificationTileClick: d
+                }
+              ),
+              value: u.inboxNotification.id,
+              defaultChecked: !1,
+              groupLabel: !1
+            };
+          }
+        )
+      ],
+      name: s,
+      isDisabled: l,
+      style: { width: "100%" },
+      checkBoxStyle: { padding: o.sp3 },
+      labelCheckBoxStyle: { padding: o.sp3 }
+    }
+  ) });
+}, xi = a.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`, bi = a(bt)`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding: ${o.sp3} ${o.sp0} ${o.sp3} ${o.sp0};
+`, {
+  common: { all: Ft }
+} = F.getLocalizedStrings(), wi = ({
+  notificationGroup: t,
+  users: i,
+  sectionId: s,
+  checkBoxMode: n,
+  style: r,
+  isDisabled: l,
+  onNotificationTileClick: d
+}) => {
+  const c = ot(), { getValues: h } = pt(), p = h(s), u = W([]);
+  return G(() => {
+    u.current = u.current.slice(
+      0,
+      t.notifications.length
+    );
+  }, [t.notifications.length]), /* @__PURE__ */ e.jsx($i, { style: r, children: /* @__PURE__ */ e.jsx(
+    xt,
+    {
+      mode: n,
+      checkBoxes: [
+        {
+          label: /* @__PURE__ */ e.jsx(
+            Pt,
+            {
+              htmlFor: `${s}.${Ft.toLocaleLowerCase()}`,
+              style: {
+                color: c.colors.primary,
+                marginLeft: o.sp2
+              },
+              children: wt(t)
+            }
+          ),
+          value: Ft.toLocaleLowerCase(),
+          defaultChecked: !1,
+          groupLabel: !0
+        },
+        ...t.notifications.map(
+          (m, f) => {
+            const g = f === 0, S = t.notifications.length - 1 === f;
+            return {
+              label: /* @__PURE__ */ e.jsx(
+                Pt,
+                {
+                  ref: (I) => u.current[f] = I,
+                  htmlFor: `${s}.${m.inboxNotification.id}`,
+                  style: { padding: o.sp0 },
+                  children: /* @__PURE__ */ e.jsx(
+                    yi,
+                    {
+                      notificationData: m,
+                      users: i,
+                      style: {
+                        borderTopLeftRadius: g ? o.sp2 : void 0,
+                        borderTopRightRadius: g ? o.sp2 : void 0,
+                        borderBottomLeftRadius: S ? o.sp2 : void 0,
+                        borderBottomRightRadius: S ? o.sp2 : void 0,
+                        marginLeft: o.sp2
+                      },
+                      isHighlighted: p?.includes(m.inboxNotification.id) === !0,
+                      isSelectionMode: n === "always_on",
+                      onNotificationTileClick: d,
+                      onNotificationTileLongPress: () => {
+                        u.current[f]?.click();
+                      }
+                    }
+                  )
+                }
+              ),
+              value: m.inboxNotification.id,
+              defaultChecked: !1,
+              groupLabel: !1
+            };
+          }
+        )
+      ],
+      name: s,
+      isDisabled: l,
+      style: { width: "100%", position: "relative" },
+      checkBoxStyle: {
+        padding: o.sp1,
+        zIndex: 2,
+        left: `-${o.sp1}`,
+        position: "absolute"
+      },
+      checkBoxIconStyle: {
+        backgroundColor: c.colors.grey5
+      }
+    }
+  ) });
+}, $i = a.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`, Pt = a(bt)`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding: ${o.sp3} ${o.sp0} ${o.sp3} ${o.sp0};
+`, yi = a(ze)``, Si = (t) => C() === "small" ? /* @__PURE__ */ e.jsx(wi, { ...t }) : /* @__PURE__ */ e.jsx(gi, { ...t }), {
+  commentsAndNotifications: {
+    notifications: { message: ji }
+  }
+} = F.getLocalizedStrings(), Bt = {
+  rowGap: new _(x[0], x[5], x[5])
+}, Ci = ({
+  notificationGroups: t,
+  users: i,
+  isFetching: s,
+  hasMore: n,
+  sectionId: r,
+  checkBoxMode: l,
+  scrollYOffset: d,
+  currentSubTab: c,
+  isDisabled: h,
+  onUpdateScrollYOffset: p,
+  onFetchNotificationGroups: u,
+  onNotificationClick: m
+}) => {
+  const f = C(), g = W(null), S = W({});
+  G(() => {
+    g.current?.resetAfterIndex(0, !0);
+  }, [f, g, t]), G(() => {
+    g.current?.scrollTo(d);
+  }, [c]);
+  const I = v(
+    (N) => {
+      if (S.current?.[N] != null) {
+        const B = f === "small" && n === !1 && N === t.length - 1 ? Bt.rowGap.value("medium-regular") : Bt.rowGap.value(f);
+        return S.current[N] + B;
+      }
+      return (xe * Te.value(f) + be) * 3 + we + $e;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [f, S, t]
+  ), D = v(
+    (N, B) => {
+      S.current = { ...S.current, [N]: B }, g.current?.resetAfterIndex(0, !0);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [f, g, t]
+  ), R = v(() => {
+    u();
+  }, [u]), b = v(() => {
+  }, []), k = se(
+    (N) => p(N),
+    1e3,
+    {
+      trailing: !0
+    }
+  ), $ = (N) => !n || N < t.length, H = v(() => n && !s ? R() : b(), [n, s, R, b]), L = n ? t.length + 1 : t.length;
+  return /* @__PURE__ */ e.jsx(Ni, { children: /* @__PURE__ */ e.jsx(Ti, { windowSize: f, children: s && t.length === 0 ? /* @__PURE__ */ e.jsx(si, {}) : s === !1 && t.length === 0 ? /* @__PURE__ */ e.jsx(
+    fe,
+    {
+      message: ji.noNotificationsMessage,
+      style: { padding: o.sp0 }
+    }
+  ) : /* @__PURE__ */ e.jsx(ki, { windowSize: f, children: /* @__PURE__ */ e.jsx(ne, { children: ({ height: N, width: B }) => /* @__PURE__ */ e.jsx(
+    ae,
+    {
+      isItemLoaded: $,
+      itemCount: ye,
+      loadMoreItems: H,
+      children: ({ onItemsRendered: J, ref: U }) => /* @__PURE__ */ e.jsx(
+        re,
+        {
+          ref: (K) => {
+            U(K), g.current = K;
+          },
+          height: N,
+          itemCount: L,
+          itemData: {
+            notificationGroups: t,
+            users: i,
+            sectionId: r,
+            checkBoxMode: l,
+            isDisabled: h,
+            isItemLoaded: $,
+            setRowHeight: D,
+            onNotificationClick: m
+          },
+          onItemsRendered: J,
+          itemSize: I,
+          width: B,
+          style: { willChange: "auto" },
+          overscanCount: Se,
+          onScroll: ({ scrollOffset: K }) => {
+            k(K);
+          },
+          initialScrollOffset: d,
+          children: vi
+        }
+      )
+    }
+  ) }) }) }) });
+}, vi = ({ index: t, style: i, data: s }) => {
+  const {
+    notificationGroups: n,
+    users: r,
+    sectionId: l,
+    checkBoxMode: d,
+    isItemLoaded: c,
+    isDisabled: h,
+    setRowHeight: p,
+    onNotificationClick: u
+  } = s, m = W(null), f = C();
+  if (G(
+    () => {
+      m.current?.firstElementChild != null && p(t, m.current.firstElementChild.clientHeight);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, m, f, n[t]?.notifications]
+  ), c(t) === !0) {
+    const g = n[t], S = ut(g);
+    return /* @__PURE__ */ e.jsx(
+      Gt,
+      {
+        style: {
+          ...i,
+          paddingBottom: o.sp0,
+          width: "100%"
+        },
+        ref: m,
+        children: /* @__PURE__ */ e.jsx(
+          Si,
+          {
+            notificationGroup: g,
+            sectionId: `${l}.${S}`,
+            checkBoxMode: d,
+            isDisabled: h,
+            users: r,
+            onNotificationTileClick: u
+          }
+        )
+      },
+      S
+    );
+  }
+  return /* @__PURE__ */ e.jsx(
+    Gt,
+    {
+      ref: m,
+      style: {
+        ...i,
+        paddingBottom: o.sp0
+      },
+      children: /* @__PURE__ */ e.jsx(kt, { numberOfRows: 3 })
+    },
+    ft()
+  );
+}, Ni = a.div`
+  display: block;
+  background-color: ${(t) => t.theme.colors.grey4};
+  height: 100%;
+  width: 100%;
+`, Ti = a.div`
+  height: 100%;
+  width: 100%;
+`, ki = a.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`, Gt = a.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  box-sizing: border-box;
+`, {
+  common: { in: Li, strings: De },
+  dateFormat: Ii,
+  commentsAndNotifications: {
+    notifications: {
+      actionStrings: { notifications: E }
+    }
+  }
+} = F.getLocalizedStrings(), Ae = (t) => {
+  t.sort(
+    (r, l) => r.createTime.isAfter(l.createTime) === !0 ? 1 : -1
+  );
+  let i = [...t];
+  const s = [];
+  let n = {
+    singleGroup: [],
+    remainingData: []
+  };
+  for (const r of Ce) {
+    let l = 0, d = 0, c = y().subtract(Math.min(y().date(), l), "d").startOf("d"), h = y().subtract(Math.min(y().date(), d), "d").endOf("d"), p = 1;
+    switch (r) {
+      case "today":
+      case "yesterday":
+        l = r === "today" ? 0 : 1, d = r === "today" ? 0 : 1, c = y().subtract(Math.min(y().date(), l), "d").startOf("d"), h = y().subtract(Math.min(y().date(), d), "d").endOf("d"), n = rt(
+          i,
+          c,
+          h
+        ), i = n.remainingData, s.push({
+          start: c,
+          end: h,
+          type: r,
+          notifications: n.singleGroup
+        });
+        break;
+      case "last_7_days_this_month":
+        i.length > 0 && y().date() > 2 && (c = y().subtract(Math.min(y().date() - 1, 8), "d").startOf("d"), h = y().subtract(2, "d").endOf("d"), n = rt(
+          i,
+          c,
+          h
+        ), i = n.remainingData, s.push({
+          start: c,
+          end: h,
+          type: r,
+          notifications: n.singleGroup
+        }));
+        break;
+      case "earlier_this_month":
+        i.length > 0 && y().date() > 9 && (c = y().startOf("M").startOf("d"), h = y().subtract(9, "d").endOf("d"), n = rt(
+          i,
+          c,
+          h
+        ), i = n.remainingData, s.push({
+          start: c,
+          end: h,
+          type: r,
+          notifications: n.singleGroup
+        }));
+        break;
+      case "earlier_that_month":
+        for (; i.length > 0; ) {
+          const u = y().subtract(p, "month").startOf("M").startOf("d"), m = y().subtract(p, "month").endOf("M").endOf("d");
+          p++, n = rt(
+            i,
+            u,
+            m
+          ), i = n.remainingData, s.push({
+            start: u,
+            end: m,
+            type: r,
+            notifications: n.singleGroup
+          });
+        }
+        break;
+    }
+  }
+  return s;
+}, rt = (t, i, s) => {
+  const n = [], r = t.map((l) => ce(i, s, l.createTime) ? (n.push(l), null) : l).filter(
+    (l) => !!l
+  );
+  return n.sort(
+    (l, d) => l.createTime.isAfter(d.createTime) === !0 ? -1 : 1
+  ), { singleGroup: n, remainingData: r };
+}, Ri = (t) => {
+  let i = E.newActivity;
+  return t.code === "in_progress" ? i = E.due.replace(
+    "__task_status__",
+    Dt(t.name.toLocaleLowerCase())
+  ) : i = E.due.replace(
+    "__task_status__",
+    Li.toLocaleLowerCase().concat(
+      De.space,
+      Dt(t.name.toLocaleLowerCase())
+    )
+  ), i;
+}, _i = (t) => {
+  const {
+    eventData: { activities: i }
+  } = t;
+  let s = E.newActivity;
+  if (i.length > 0) {
+    const n = i[0].activityType, r = i[0].metadata.eventStatus;
+    switch (n) {
+      case "task_archived":
+        s = E.archive;
+        break;
+      case "task_deleted":
+        s = E.delete;
+        break;
+      case "task_activities":
+        s = E.activities;
+        break;
+      case "task_assigned":
+        s = E.assign;
+        break;
+      case "task_created":
+        s = E.create;
+        break;
+      case "task_due":
+        s = r != null ? Ri(r) : E.dueTomorrow;
+        break;
+      case "task_overdue":
+        s = E.overdue.replace(
+          "__date__",
+          i[0].metadata.additionalInfo?.dueDate.format(
+            Ii.visual.MMMDFormat
+          ) ?? De.empty
+        );
+        break;
+      case "task_status_updated":
+        s = E.statusUpdate;
+        break;
+    }
+  }
+  return s;
+}, Oe = new _(3, 2, 1, 1, 1), Ee = new _(
+  x[8],
+  33,
+  33,
+  33,
+  35
+), ht = {
+  lineClamp: Oe,
+  sectionWidth: Ee
+}, {
+  common: { and: Ut, other: zi, others: Di, texts: Ai, timeStrings: Oi, strings: O, tags: Ei }
+} = F.getLocalizedStrings(), Mi = ({
+  notificationData: t,
+  isHighlighted: i = !1,
+  style: s,
+  onNotificationTileClick: n
+}) => {
+  const {
+    status: r,
+    notificationId: l,
+    eventData: { entitiyId: d, activities: c },
+    createTime: h
+  } = t;
+  return /* @__PURE__ */ e.jsxs(
+    Hi,
+    {
+      notificationStatus: r,
+      isHighlighted: i,
+      style: s,
+      onClick: () => {
+        n(
+          l,
+          d,
+          r,
+          c.length > 0 ? c[0].activityType : void 0
+        );
+      },
+      children: [
+        /* @__PURE__ */ e.jsx(Fi, { ...t }),
+        /* @__PURE__ */ e.jsx(Gi, { ...t }),
+        /* @__PURE__ */ e.jsx(Wi, { ...t }),
+        /* @__PURE__ */ e.jsx(Ui, { createTime: h, notificationStatus: r })
+      ]
+    }
+  );
+}, Me = (t) => {
+  const {
+    status: i,
+    eventData: { title: s }
+  } = t;
+  return /* @__PURE__ */ e.jsx(qi, { notificationStatus: i, children: s || O.hyphen });
+}, Fi = (t) => {
+  const i = C();
+  return /* @__PURE__ */ e.jsx(Ki, { windowSize: i, children: /* @__PURE__ */ e.jsx(Me, { ...t }) });
+}, Pi = (t) => {
+  const {
+    eventData: { activities: i }
+  } = t;
+  if (i.length > 0 && i[0].activityType === "task_status_updated") {
+    const s = i[0].metadata.updates.find(
+      (n) => n.type === "code_name_pair" && n.field === "status"
+    );
+    if (s?.oldValue.codeNamePair != null && s.newValue.codeNamePair != null)
+      return /* @__PURE__ */ e.jsxs(Xi, { children: [
+        /* @__PURE__ */ e.jsx(
+          Wt,
+          {
+            backgroundColor: At(
+              s.oldValue.codeNamePair
+            ),
+            children: s.oldValue.codeNamePair.name
+          }
+        ),
+        /* @__PURE__ */ e.jsx(Zi, {}),
+        /* @__PURE__ */ e.jsx(
+          Wt,
+          {
+            backgroundColor: At(
+              s.newValue.codeNamePair
+            ),
+            children: s.newValue.codeNamePair.name
+          }
+        )
+      ] });
+  }
+  return null;
+}, Bi = (t) => {
+  const {
+    status: i,
+    eventData: { authors: s, activities: n }
+  } = t, r = s.length;
+  if (n[0].activityType === "task_due" || n[0].activityType === "task_overdue" || n[0].activityType === "task_status_updated")
+    return null;
+  let l = /* @__PURE__ */ e.jsxs(X, { className: "userText", notificationStatus: i, children: [
+    O.atTheRate,
+    Ai.user,
+    O.space
+  ] });
+  return r > 0 && (r > 2 ? l = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(
+      X,
+      {
+        className: "userText",
+        notificationStatus: i,
+        children: [
+          O.atTheRate,
+          V(s[0], !1),
+          O.space
+        ]
+      }
+    ),
+    Ut,
+    /* @__PURE__ */ e.jsxs(
+      X,
+      {
+        className: "userText",
+        notificationStatus: i,
+        children: [
+          O.space,
+          r - 1,
+          O.space,
+          Di,
+          O.space
+        ]
+      }
+    )
+  ] }) : r === 2 ? l = /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsxs(
+      X,
+      {
+        className: "userText",
+        notificationStatus: i,
+        children: [
+          O.atTheRate,
+          V(s[0], !1),
+          O.space
+        ]
+      }
+    ),
+    Ut,
+    /* @__PURE__ */ e.jsxs(
+      X,
+      {
+        className: "userText",
+        notificationStatus: i,
+        children: [
+          O.space,
+          s.length === 2 ? O.atTheRate + V(s[1], !1) : zi,
+          O.space
+        ]
+      }
+    )
+  ] }) : l = /* @__PURE__ */ e.jsxs(X, { className: "userText", notificationStatus: i, children: [
+    O.atTheRate,
+    V(s[0], !1),
+    O.space
+  ] })), l;
+}, Fe = (t) => /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+  /* @__PURE__ */ e.jsx(Bi, { ...t }),
+  _i(t),
+  /* @__PURE__ */ e.jsx(Pi, { ...t })
+] }), Gi = (t) => {
+  const i = C(), {
+    eventData: { activities: s }
+  } = t;
+  return /* @__PURE__ */ e.jsx(
+    Ji,
+    {
+      windowSize: i,
+      statusUpdate: s.length > 0 && s[0].activityType === "task_status_updated" && s[0].metadata.updates.find(
+        (n) => n.field === "status"
+      ) != null,
+      children: /* @__PURE__ */ e.jsx(Fe, { ...t })
+    }
+  );
+}, Pe = (t) => {
+  const { createTime: i, notificationStatus: s } = t, n = ve(i.toDate());
+  return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+    /* @__PURE__ */ e.jsx(
+      Qi,
+      {
+        isNewNotification: n === Oi.justNow,
+        children: n
+      }
+    ),
+    /* @__PURE__ */ e.jsx(es, { notificationStatus: s })
+  ] });
+}, Ui = (t) => {
+  const i = C();
+  return /* @__PURE__ */ e.jsx(Vi, { windowSize: i, children: /* @__PURE__ */ e.jsx(Pe, { ...t }) });
+}, Be = (t) => {
+  const {
+    eventData: { activities: i }
+  } = t;
+  return i[0].activityType === "task_overdue" ? /* @__PURE__ */ e.jsx(
+    co,
+    {
+      tagTitle: Ei.overdue,
+      textColor: {
+        color: new jt(j.alert),
+        backgroundColor: new jt("transparent"),
+        borderColor: new jt(j.alert)
+      },
+      showLoader: !1
+    }
+  ) : /* @__PURE__ */ e.jsx(ts, {});
+}, Wi = (t) => {
+  const i = C();
+  return /* @__PURE__ */ e.jsx(Yi, { windowSize: i, children: /* @__PURE__ */ e.jsx(Be, { ...t }) });
+}, Hi = a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  cursor: pointer;
+
+  background-color: ${(t) => t.notificationStatus === "read" ? t.theme.colors.grey4 : t.theme.colors.grey5};
+
+  color: ${(t) => t.notificationStatus === "read" ? t.theme.colors.grey1 : t.theme.colors.hero};
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${(t) => `${o.sp0} 2px ${o.sp1} ${t.theme.colors.dropShadowNormal}`};
+
+  padding: ${o.sp3} ${o.sp2} ${o.sp3} ${o.sp4};
+
+  .userText {
+    color: ${j.brandColorJade};
+  }
+
+  :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;
+  }
+
+  ${(t) => t.isHighlighted ? M`
+          z-index: 1;
+          color: ${t.theme.colors.primary};
+          border: 1px solid ${t.theme.colors.primary};
+
+          .userText {
+            color: ${j.brandColorJade};
+          }
+        ` : null};
+
+  &:hover {
+    z-index: 1;
+    color: ${(t) => t.theme.colors.primary};
+    border: 1px solid ${(t) => t.theme.colors.primary};
+
+    .userText {
+      color: ${j.brandColorJade};
+    }
+  }
+`, Vi = a(Y)`
+  width: ${(t) => t.windowSize === "small" ? "unset" : "10%"};
+  gap: ${o.sp2};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`, Yi = a(Y)`
+  width: ${(t) => t.windowSize === "small" ? "unset" : "10%"};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`, Ji = a(it)`
+  color: inherit;
+
+  ${(t) => t.statusUpdate ? M`
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${o.sp1};
+        ` : M`
+          display: -webkit-box;
+          overflow: hidden;
+          -webkit-line-clamp: ${ht.lineClamp.value(t.windowSize)};
+          gap: ${o.sp1};
+          -webkit-box-orient: vertical;
+        `};
+  width: ${(t) => ht.sectionWidth.valuePercentage(t.windowSize)};
+`, Ki = a(it)`
+  color: inherit;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: ${(t) => ht.lineClamp.value(t.windowSize)};
+  -webkit-box-orient: vertical;
+  width: ${(t) => ht.sectionWidth.valuePercentage(t.windowSize)};
+`, X = a(gt)`
+  color: ${(t) => t.notificationStatus === "read" ? t.theme.colors.grey1 : j.brandColorJade};
+`, qi = a(gt)`
+  color: inherit;
+`, Qi = a(he)`
+  flex-shrink: 0;
+  color: ${(t) => t.isNewNotification ? t.theme.colors.primary : "inherit"};
+`, Xi = a.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: ${o.sp2};
+  flex-wrap: wrap;
+`, Wt = a(Y)`
+  color: ${j.neutralGrey5Light};
+  background: ${(t) => t.backgroundColor};
+  border: 1px solid ${(t) => t.backgroundColor};
+  padding: ${o.sp0} 6px;
+  border-radius: ${o.sp1};
+`, Zi = a(uo)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+  color: ${(t) => t.theme.colors.hero};
+`, ts = a.div`
+  display: flex;
+  flex: 1 1 auto;
+`, es = a.div`
+  display: flex;
+  height: ${o.sp2};
+  width: ${o.sp2};
+  border-radius: ${o.sp2};
+  flex-shrink: 0;
+  background-color: ${(t) => t.notificationStatus === "unread" ? j.info : "transparent"};
+`, lt = {
+  emptyRowItemSectionWidth: new _(120, 200, 280, 330, 400),
+  emptyLastRowItemSectionWidth: new _(x[6], 50, 60, x[11], 120)
+}, os = () => {
+  const t = C();
+  return /* @__PURE__ */ e.jsxs(is, { windowSize: t, children: [
+    /* @__PURE__ */ e.jsx(ct, { windowSize: t, isLastItem: !1, children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: lt.emptyRowItemSectionWidth.value(t),
+        height: x[4]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(ct, { windowSize: t, isLastItem: !1, children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: lt.emptyRowItemSectionWidth.value(t),
+        height: x[4]
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(ct, { windowSize: t, isLastItem: !0, children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: lt.emptyLastRowItemSectionWidth.value(t),
+        height: 18
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(ct, { windowSize: t, isLastItem: !0, children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: lt.emptyLastRowItemSectionWidth.value(t),
+        height: 18
+      }
+    ) })
+  ] });
+}, is = a.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: ${o.sp3} ${o.sp2} ${o.sp3} ${o.sp4};
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${(t) => `${o.sp0} 2px ${o.sp1} ${t.theme.colors.dropShadowNormal}`};
+
+  :hover {
+    z-index: 1;
+    border: ${(t) => `1px solid ${t.theme.colors.primary}`};
+  }
+
+  :first-of-type {
+    border-top-left-radius: ${o.sp2};
+    border-top-right-radius: ${o.sp2};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${o.sp2};
+    border-bottom-right-radius: ${o.sp2};
+  }
+`, ct = a.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex: 1 1 auto;
+  justify-content: ${(t) => t.isLastItem ? "flex-end" : "start"};
+  width: ${(t) => t.isLastItem ? "10%" : Ee.valuePercentage(t.windowSize)};
+`, ss = () => {
+  const t = C();
+  return /* @__PURE__ */ e.jsxs(ns, { windowSize: t, children: [
+    /* @__PURE__ */ e.jsxs(Ht, { children: [
+      /* @__PURE__ */ e.jsx(z, { width: 180, height: x[4] }),
+      /* @__PURE__ */ e.jsx(z, { width: 60, height: 18 })
+    ] }),
+    /* @__PURE__ */ e.jsxs(Ht, { children: [
+      /* @__PURE__ */ e.jsx(z, { width: 180, height: x[4] }),
+      /* @__PURE__ */ e.jsx(z, { width: 60, height: 18 })
+    ] })
+  ] });
+}, ns = a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: ${o.sp4};
+
+  padding: ${o.sp3} ${o.sp2} ${o.sp3} ${o.sp3};
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${(t) => `${o.sp0} 2px ${o.sp1} ${t.theme.colors.dropShadowNormal}`};
+
+  :hover {
+    z-index: 1;
+    border: ${(t) => `1px solid ${t.theme.colors.primary}`};
+  }
+
+  :first-of-type {
+    border-top-left-radius: ${o.sp2};
+    border-top-right-radius: ${o.sp2};
+  }
+
+  :last-of-type {
+    border-bottom-left-radius: ${o.sp2};
+    border-bottom-right-radius: ${o.sp2};
+  }
+`, Ht = a.div`
+  display: flex;
+  flex-direction: row;
+  align-items: start;
+  justify-content: space-between;
+  gap: ${o.sp2};
+  flex: 1 1 auto;
+  width: 100%;
+`, as = () => C() === "small" ? /* @__PURE__ */ e.jsx(ss, {}) : /* @__PURE__ */ e.jsx(os, {}), rs = {
+  marginLeft: new _(x[2], x[5], x[7])
+}, ls = () => /* @__PURE__ */ e.jsxs(cs, { children: [
+  /* @__PURE__ */ e.jsx(Lt, { numberOfRows: 5 }),
+  /* @__PURE__ */ e.jsx(Lt, { numberOfRows: 3 })
+] }), Lt = ({
+  numberOfRows: t
+}) => {
+  const i = C();
+  return /* @__PURE__ */ e.jsxs(ds, { windowSize: i, children: [
+    /* @__PURE__ */ e.jsx(ms, { children: /* @__PURE__ */ e.jsx(
+      z,
+      {
+        width: x[12],
+        height: Rt.standardRegular.lineHeightValue
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(us, { children: [...Array(t)].map((s) => /* @__PURE__ */ e.jsx(as, {}, ft())) })
+  ] });
+}, cs = a.div`
+  display: block;
+  min-height: 100%;
+  flex-direction: column;
+  width: 100%;
+`, ds = a.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: ${o.sp5};
+  margin-left: ${(t) => rs.marginLeft.valuePx(t.windowSize)};
+`, us = a.div`
+  display: flex;
+  flex-direction: column;
+  border-radius: ${o.sp2};
+`, ms = a.div`
+  display: flex;
+  padding: ${o.sp3} ${o.sp0};
+`, hs = ({
+  notificationData: t,
+  isSelectionMode: i = !1,
+  isHighlighted: s = !1,
+  style: n,
+  onNotificationTileClick: r,
+  onNotificationTileLongPress: l
+}) => {
+  const {
+    status: d,
+    createTime: c,
+    eventData: { entitiyId: h, activities: p },
+    notificationId: u
+  } = t, m = v(() => {
+    l?.();
+  }, [l]), f = v(
+    (I) => {
+      I.stopPropagation(), I.cancelable && I.preventDefault(), i ? l?.() : r(
+        u,
+        h,
+        d,
+        p.length > 0 ? p[0].activityType : void 0
+      );
+    },
+    [
+      u,
+      h,
+      d,
+      p,
+      i,
+      l,
+      r
+    ]
+  ), S = ge({ onLongPress: m }, {
+    shouldPreventDefault: !1,
+    delay: 1e3
+  });
+  return /* @__PURE__ */ e.jsxs(
+    bs,
+    {
+      notificationStatus: d,
+      isHighlighted: s,
+      style: n,
+      ...S,
+      onClick: f,
+      children: [
+        /* @__PURE__ */ e.jsxs(Vt, { children: [
+          /* @__PURE__ */ e.jsx(fs, { ...t }),
+          /* @__PURE__ */ e.jsx(gs, { createTime: c, notificationStatus: d })
+        ] }),
+        /* @__PURE__ */ e.jsxs(Vt, { children: [
+          /* @__PURE__ */ e.jsx(ps, { ...t }),
+          p.length > 0 && p[0].activityType === "task_status_updated" ? null : /* @__PURE__ */ e.jsx(xs, { ...t })
+        ] })
+      ]
+    }
+  );
+}, fs = (t) => /* @__PURE__ */ e.jsx(Ge, { statusUpdate: !1, children: /* @__PURE__ */ e.jsx(Me, { ...t }) }), ps = (t) => {
+  const {
+    eventData: { activities: i }
+  } = t;
+  return /* @__PURE__ */ e.jsx(
+    Ge,
+    {
+      statusUpdate: i.length > 0 && i[0].activityType === "task_status_updated" && i[0].metadata.updates.find(
+        (s) => s.field === "status"
+      ) != null,
+      children: /* @__PURE__ */ e.jsx(Fe, { ...t })
+    }
+  );
+}, gs = (t) => /* @__PURE__ */ e.jsx(ws, { children: /* @__PURE__ */ e.jsx(Pe, { ...t }) }), xs = (t) => /* @__PURE__ */ e.jsx($s, { children: /* @__PURE__ */ e.jsx(Be, { ...t }) }), bs = a.div`
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+  justify-content: space-between;
+  width: 100%;
+  gap: ${o.sp2};
+  cursor: pointer;
+
+  background-color: ${(t) => t.notificationStatus === "read" ? t.theme.colors.grey4 : t.theme.colors.grey5};
+
+  color: ${(t) => t.notificationStatus === "read" ? t.theme.colors.grey1 : t.theme.colors.hero};
+  border: 1px solid ${(t) => t.theme.colors.grey3};
+  margin-bottom: -1px;
+  box-shadow: ${(t) => `${o.sp0} 2px ${o.sp1} ${t.theme.colors.dropShadowNormal}`};
+
+  padding: ${o.sp3} ${o.sp2} ${o.sp3} ${o.sp3};
+
+  .userText {
+    color: ${j.brandColorJade};
+  }
+
+  :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;
+  }
+
+  ${(t) => t.isHighlighted ? M`
+          z-index: 1;
+          color: ${t.theme.colors.primary};
+          border: 1px solid ${t.theme.colors.primary};
+
+          .userText {
+            color: ${j.brandColorJade};
+          }
+        ` : null};
+
+  &:hover {
+    z-index: 1;
+    color: ${(t) => t.theme.colors.primary};
+    border: 1px solid ${(t) => t.theme.colors.primary};
+
+    .userText {
+      color: ${j.brandColorJade};
+    }
+  }
+`, ws = a(Y)`
+  width: 25%;
+  gap: ${o.sp2};
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`, $s = a(Y)`
+  width: 25%;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  justify-content: end;
+`, Vt = a.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${o.sp3};
+  width: 100%;
+  justify-content: space-between;
+  align-items: start;
+`, Ge = a(it)`
+  color: inherit;
+  ${(t) => t.statusUpdate ? M`
+          display: flex;
+          flex-wrap: wrap;
+          gap: ${o.sp2};
+        ` : M`
+          display: -webkit-box;
+          -webkit-box-orient: horizontal;
+          gap: ${o.sp1};
+        `};
+`, Ue = (t) => C() === "small" ? /* @__PURE__ */ e.jsx(hs, { ...t }) : /* @__PURE__ */ e.jsx(Mi, { ...t }), {
+  common: { all: Yt }
+} = F.getLocalizedStrings(), ys = ({
+  notificationGroup: t,
+  sectionId: i,
+  checkBoxMode: s,
+  style: n,
+  isDisabled: r,
+  onNotificationTileClick: l
+}) => {
+  const d = ot(), { getValues: c } = pt(), h = c(i);
+  return /* @__PURE__ */ e.jsx(Ss, { style: n, children: /* @__PURE__ */ e.jsx(
+    xt,
+    {
+      mode: s,
+      checkBoxes: [
+        {
+          label: /* @__PURE__ */ e.jsx(
+            js,
+            {
+              htmlFor: `${i}.${Yt.toLocaleLowerCase()}`,
+              style: { color: d.colors.primary },
+              children: wt(t)
+            }
+          ),
+          value: Yt.toLocaleLowerCase(),
+          defaultChecked: !1,
+          groupLabel: !0
+        },
+        ...t.notifications.map(
+          (p, u) => {
+            const m = u === 0, f = t.notifications.length - 1 === u;
+            return {
+              label: /* @__PURE__ */ e.jsx(
+                Ue,
+                {
+                  notificationData: p,
+                  style: {
+                    borderTopLeftRadius: m ? o.sp2 : void 0,
+                    borderTopRightRadius: m ? o.sp2 : void 0,
+                    borderBottomLeftRadius: f ? o.sp2 : void 0,
+                    borderBottomRightRadius: f ? o.sp2 : void 0
+                  },
+                  isHighlighted: h?.includes(p.notificationId) === !0,
+                  onNotificationTileClick: l
+                }
+              ),
+              value: p.notificationId,
+              defaultChecked: !1,
+              groupLabel: !1
+            };
+          }
+        )
+      ],
+      name: i,
+      isDisabled: r,
+      style: { width: "100%" },
+      checkBoxStyle: { padding: o.sp3 },
+      labelCheckBoxStyle: { padding: o.sp3 }
+    }
+  ) });
+}, Ss = a.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`, js = a(bt)`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding: ${o.sp3} ${o.sp0} ${o.sp3} ${o.sp0};
+`, {
+  common: { all: Jt }
+} = F.getLocalizedStrings(), Cs = ({
+  notificationGroup: t,
+  sectionId: i,
+  checkBoxMode: s,
+  style: n,
+  isDisabled: r,
+  onNotificationTileClick: l
+}) => {
+  const d = ot(), { getValues: c } = pt(), h = c(i), p = W([]);
+  return G(() => {
+    p.current = p.current.slice(
+      0,
+      t.notifications.length
+    );
+  }, [t.notifications.length]), /* @__PURE__ */ e.jsx(vs, { style: n, children: /* @__PURE__ */ e.jsx(
+    xt,
+    {
+      mode: s,
+      checkBoxes: [
+        {
+          label: /* @__PURE__ */ e.jsx(
+            Kt,
+            {
+              htmlFor: `${i}.${Jt.toLocaleLowerCase()}`,
+              style: {
+                color: d.colors.primary,
+                marginLeft: o.sp2
+              },
+              children: wt(t)
+            }
+          ),
+          value: Jt.toLocaleLowerCase(),
+          defaultChecked: !1,
+          groupLabel: !0
+        },
+        ...t.notifications.map(
+          (u, m) => {
+            const f = m === 0, g = t.notifications.length - 1 === m;
+            return {
+              label: /* @__PURE__ */ e.jsx(
+                Kt,
+                {
+                  ref: (S) => p.current[m] = S,
+                  htmlFor: `${i}.${u.notificationId}`,
+                  style: { padding: o.sp0 },
+                  children: /* @__PURE__ */ e.jsx(
+                    Ns,
+                    {
+                      notificationData: u,
+                      style: {
+                        borderTopLeftRadius: f ? o.sp2 : void 0,
+                        borderTopRightRadius: f ? o.sp2 : void 0,
+                        borderBottomLeftRadius: g ? o.sp2 : void 0,
+                        borderBottomRightRadius: g ? o.sp2 : void 0,
+                        marginLeft: o.sp2
+                      },
+                      isHighlighted: h?.includes(u.notificationId) === !0,
+                      isSelectionMode: s === "always_on",
+                      onNotificationTileClick: l,
+                      onNotificationTileLongPress: () => {
+                        p.current[m]?.click();
+                      }
+                    }
+                  )
+                }
+              ),
+              value: u.notificationId,
+              defaultChecked: !1,
+              groupLabel: !1
+            };
+          }
+        )
+      ],
+      name: i,
+      isDisabled: r,
+      style: { width: "100%", position: "relative" },
+      checkBoxStyle: {
+        padding: o.sp1,
+        zIndex: 2,
+        left: `-${o.sp1}`,
+        position: "absolute"
+      },
+      checkBoxIconStyle: {
+        backgroundColor: d.colors.grey5
+      }
+    }
+  ) });
+}, vs = a.div`
+  display: flex;
+  align-items: center;
+  width: 100%;
+`, Kt = a(bt)`
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  padding: ${o.sp3} ${o.sp0} ${o.sp3} ${o.sp0};
+`, Ns = a(Ue)``, Ts = (t) => C() === "small" ? /* @__PURE__ */ e.jsx(Cs, { ...t }) : /* @__PURE__ */ e.jsx(ys, { ...t }), {
+  commentsAndNotifications: {
+    notifications: { message: ks }
+  }
+} = F.getLocalizedStrings(), qt = {
+  rowGap: new _(x[0], x[5], x[5])
+}, Ls = ({
+  notificationGroups: t,
+  isFetching: i,
+  hasMore: s,
+  sectionId: n,
+  checkBoxMode: r,
+  scrollYOffset: l,
+  currentSubTab: d,
+  isDisabled: c,
+  onUpdateScrollYOffset: h,
+  onFetchNotificationGroups: p,
+  onNotificationClick: u
+}) => {
+  const m = C(), f = W(null), g = W({});
+  G(() => {
+    f.current?.resetAfterIndex(0, !0);
+  }, [m, f, t]), G(() => {
+    f.current?.scrollTo(l);
+  }, [d]);
+  const S = v(
+    (L) => {
+      if (g.current?.[L] != null) {
+        const N = m === "small" && s === !1 && L === t.length - 1 ? qt.rowGap.value("medium-regular") : qt.rowGap.value(m);
+        return g.current[L] + N;
+      }
+      return (xe * Oe.value(m) + be) * 3 + we + $e;
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [m, g, t]
+  ), I = v(
+    (L, N) => {
+      g.current = { ...g.current, [L]: N }, f.current?.resetAfterIndex(0, !0);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [m, f, t]
+  ), D = v(() => {
+    p();
+  }, [p]), R = v(() => {
+  }, []), b = se(
+    (L) => h(L),
+    1e3,
+    {
+      trailing: !0
+    }
+  ), k = (L) => !s || L < t.length, $ = v(() => s && !i ? D() : R(), [s, i, D, R]), H = s ? t.length + 1 : t.length;
+  return /* @__PURE__ */ e.jsx(Rs, { children: /* @__PURE__ */ e.jsx(_s, { windowSize: m, children: i && t.length === 0 ? /* @__PURE__ */ e.jsx(ls, {}) : i === !1 && t.length === 0 ? /* @__PURE__ */ e.jsx(
+    fe,
+    {
+      message: ks.noNotificationsMessage,
+      style: { padding: o.sp0 }
+    }
+  ) : /* @__PURE__ */ e.jsx(zs, { windowSize: m, children: /* @__PURE__ */ e.jsx(ne, { children: ({ height: L, width: N }) => /* @__PURE__ */ e.jsx(
+    ae,
+    {
+      isItemLoaded: k,
+      itemCount: ye,
+      loadMoreItems: $,
+      children: ({ onItemsRendered: B, ref: J }) => /* @__PURE__ */ e.jsx(
+        re,
+        {
+          ref: (U) => {
+            J(U), f.current = U;
+          },
+          height: L,
+          itemCount: H,
+          itemData: {
+            notificationGroups: t,
+            sectionId: n,
+            checkBoxMode: r,
+            isDisabled: c,
+            isItemLoaded: k,
+            setRowHeight: I,
+            onNotificationClick: u
+          },
+          onItemsRendered: B,
+          itemSize: S,
+          width: N,
+          style: { willChange: "auto" },
+          overscanCount: Se,
+          onScroll: ({ scrollOffset: U }) => {
+            b(U);
+          },
+          initialScrollOffset: l,
+          children: Is
+        }
+      )
+    }
+  ) }) }) }) });
+}, Is = ({ index: t, style: i, data: s }) => {
+  const {
+    notificationGroups: n,
+    sectionId: r,
+    checkBoxMode: l,
+    isItemLoaded: d,
+    isDisabled: c,
+    setRowHeight: h,
+    onNotificationClick: p
+  } = s, u = W(null), m = C();
+  if (G(
+    () => {
+      u.current?.firstElementChild != null && h(t, u.current.firstElementChild.clientHeight);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t, u, m, n[t]?.notifications]
+  ), d(t) === !0) {
+    const f = n[t], g = ut(f);
+    return /* @__PURE__ */ e.jsx(
+      Qt,
+      {
+        style: {
+          ...i,
+          paddingBottom: o.sp0,
+          width: "100%"
+        },
+        ref: u,
+        children: /* @__PURE__ */ e.jsx(
+          Ts,
+          {
+            notificationGroup: f,
+            sectionId: `${r}.${g}`,
+            checkBoxMode: l,
+            isDisabled: c,
+            onNotificationTileClick: p
+          }
+        )
+      },
+      g
+    );
+  }
+  return /* @__PURE__ */ e.jsx(
+    Qt,
+    {
+      ref: u,
+      style: {
+        ...i,
+        paddingBottom: o.sp0
+      },
+      children: /* @__PURE__ */ e.jsx(Lt, { numberOfRows: 3 })
+    },
+    ft()
+  );
+}, Rs = a.div`
+  display: block;
+  background-color: ${(t) => t.theme.colors.grey4};
+  height: 100%;
+  width: 100%;
+`, _s = a.div`
+  height: 100%;
+  width: 100%;
+`, zs = a.div`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  max-width: 99.9%;
+`, Qt = a.div`
+  top: ${o.sp0};
+  left: ${o.sp0};
+  box-sizing: border-box;
+`, {
+  common: {
+    all: It,
+    texts: dt,
+    footer: Ds,
+    strings: { plus: As },
+    numbers: { maximumCount: Xt }
+  },
+  commentsAndNotifications: {
+    notifications: {
+      title: Os,
+      texts: We,
+      strings: Zt
+    }
+  }
+} = F.getLocalizedStrings(), nt = {
+  tableContainerLeftPadding: new _(x[2], x[2], x[2]),
+  tableContainerRightPadding: new _(x[3], x[6], x[8]),
+  tabsContainerLeftRightPadding: new _(x[3], x[6], x[8]),
+  selectedNotificationsTextMarginLeft: new _(x[0], x[6], x[6])
+}, Es = {
+  selectedNotificationsText: new bo(
+    "smallRegular",
+    "standardRegular"
+  )
+}, te = "notificationsPage", Z = "commentsNotificationsTable", tt = "notificationsTable", He = 20, mn = ({
+  notificationView: t,
+  users: i,
+  isNotificationSettingsVisible: s,
+  isDisabled: n,
+  onNotificationClick: r,
+  onCommentNotificationClick: l,
+  onUpdateNotificationViewUIState: d,
+  onUpdateNotificationTabState: c,
+  onUpdateNotificationViewCurrentTabAndSubTab: h,
+  onUpdateNotificationViewSubTab: p,
+  onFetchMoreNotifications: u,
+  onUpdateNotificationStatus: m,
+  onSettingsClick: f,
+  onBackClick: g,
+  onMarkAllNotificationsAsRead: S
+}) => {
+  const I = ot(), D = C(), R = Ze({
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: Q(
+      () => ie(t),
+      [t]
+    ),
+    values: Q(
+      () => ie(t),
+      [t]
+    )
+  }), {
+    currentTab: b,
+    currentSubTab: k,
+    notificationDetailsByTab: $,
+    allSubTabs: H,
+    allNotifications: L,
+    allExternalNotifications: N,
+    notificationsForCurrentTabAndSubTab: B,
+    externalNotificationsForCurrentTabAndSubTab: J
+  } = t, U = Q(() => Object.keys($).map(
+    (w) => ({
+      label: dt[w],
+      id: dt[w].toLocaleLowerCase(),
+      countDetails: {
+        count: $[w].uiState.unreadCount,
+        isFetching: $[w].fetchCountState.fetchState === "In-Progress"
+      }
+    })
+  ), [$]), K = Q(() => H.map((w) => ({
+    label: w === "all" ? It : dt[w],
+    id: w
+  })), [H]), Ve = Q(() => Ne(
+    J
+  ).filter((w) => w.notifications.length > 0), [J]), Ye = Q(() => Ae(B).filter(
+    (w) => w.notifications.length > 0
+  ), [B]), Je = async (w, T) => {
+    const P = w.split(".")[0], q = [];
+    P != null && (P === Z || P === tt) && (Object.values(T[P]).forEach((A) => {
+      q.push(
+        ...A.filter(
+          (Xe) => Xe.includes(It.toLowerCase()) === !1
+        )
+      );
+    }), c(
+      { selectedNotificationIds: q },
+      b
+    ));
+  };
+  G(() => {
+    const w = R.watch((T, { name: P }) => {
+      P != null && T != null && to(
+        () => Je(P, T)
+      );
+    });
+    return () => {
+      w.unsubscribe();
+    };
+  });
+  const $t = v(() => {
+    const w = [], T = $[b].selectedNotificationIdsForSubTab, P = "read";
+    if (b === "comments") {
+      const q = N.filter(
+        (A) => A.inboxNotification.readAt == null
+      ).map(
+        (A) => A.inboxNotification.id
+      );
+      T.forEach((A) => {
+        q.includes(A) && w.push(A);
+      });
+    } else {
+      const q = L.filter((A) => A.status !== P).map((A) => A.notificationId);
+      T.forEach((A) => {
+        q.includes(A) && w.push(A);
+      });
+    }
+    return w;
+  }, [
+    N,
+    L,
+    b,
+    $
+  ]), Ke = $t().length > He ? "disabled" : n, yt = R.watch(
+    Z
+  ), St = R.watch(tt), zt = v(() => {
+    u(b, k);
+  }, [u, b, k]), qe = v(() => {
+    if (b === "comments") {
+      const w = {};
+      Object.keys(yt).forEach((T) => {
+        w[T] = [];
+      }), R.reset(
+        {
+          [Z]: w,
+          [tt]: St
+        },
+        { keepDefaultValues: !1, keepDirty: !1, keepValues: !1 }
+      );
+    } else {
+      const w = {};
+      Object.keys(St).forEach((T) => {
+        w[T] = [];
+      }), R.reset(
+        {
+          [tt]: w,
+          [Z]: yt
+        },
+        { keepDefaultValues: !1, keepDirty: !1, keepValues: !1 }
+      );
+    }
+    c({ selectedNotificationIds: [] }, b);
+  }, [St, yt]), Qe = v(() => {
+    const w = $[b].selectedNotificationIdsForSubTab, T = "read", P = $t();
+    m(
+      b,
+      w,
+      T,
+      P
+    );
+  }, [
+    b,
+    $,
+    $t,
+    m
+  ]);
+  return /* @__PURE__ */ e.jsxs(Fs, { children: [
+    /* @__PURE__ */ e.jsx(
+      mo,
+      {
+        source: "NotificationsPage",
+        title: Os.notifications,
+        backgroundColor: I.colors.grey4,
+        onBackClick: g,
+        rightSideComponent: s === !0 ? /* @__PURE__ */ e.jsx(tn, { onClick: f }) : /* @__PURE__ */ e.jsx(Zs, {})
+      }
+    ),
+    /* @__PURE__ */ e.jsx(Gs, {}),
+    /* @__PURE__ */ e.jsx(Bs, { windowSize: D, children: /* @__PURE__ */ e.jsx(
+      So,
+      {
+        tabs: U,
+        selectedTab: b,
+        onTabChange: (w) => {
+          const T = so(w);
+          T != null && h(T);
+        },
+        subTabs: K,
+        selectedSubTab: k,
+        onSubTabChange: (w) => {
+          const T = io(w);
+          T != null && p(T);
+        },
+        subTabRightComponent: /* @__PURE__ */ e.jsx(
+          Ms,
+          {
+            notificationCount: $[b].uiState.unreadCount,
+            markAsAllReadUpdateState: $[b].markAsAllReadState.fetchState,
+            markAsReadUpdateState: $[b].markAsReadState.fetchState,
+            onMarkAsAllReadClick: () => {
+              S(b);
+            }
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ e.jsx(Ps, { windowSize: D, children: /* @__PURE__ */ e.jsx(eo, { ...R, children: /* @__PURE__ */ e.jsx(
+      "form",
+      {
+        id: oe(te),
+        onSubmit: R.handleSubmit(Qe),
+        style: { width: "100%" },
+        children: b === "comments" ? /* @__PURE__ */ e.jsx(
+          Ci,
+          {
+            users: i,
+            hasMore: $[b].uiState.hasMore,
+            isFetching: $[b].fetchState === "In-Progress",
+            scrollYOffset: $[b].uiState.scrollYOffset[k],
+            currentSubTab: k,
+            checkBoxMode: $[b].selectedNotificationIdsForSubTab.length > 0 ? "always_on" : "checked_or_hover",
+            notificationGroups: Ve,
+            sectionId: Z,
+            onFetchNotificationGroups: zt,
+            onUpdateScrollYOffset: (w) => d(
+              {
+                scrollYOffset: {
+                  ...$[b].uiState.scrollYOffset,
+                  [k]: w
+                }
+              },
+              b
+            ),
+            onNotificationClick: l
+          }
+        ) : /* @__PURE__ */ e.jsx(
+          Ls,
+          {
+            hasMore: $[b].uiState.hasMore,
+            isFetching: $[b].fetchState === "In-Progress",
+            scrollYOffset: $[b].uiState.scrollYOffset[k],
+            currentSubTab: k,
+            checkBoxMode: $[b].selectedNotificationIdsForSubTab.length > 0 ? "always_on" : "checked_or_hover",
+            notificationGroups: Ye,
+            sectionId: tt,
+            onFetchNotificationGroups: zt,
+            onUpdateScrollYOffset: (w) => d(
+              {
+                scrollYOffset: {
+                  ...$[b].uiState.scrollYOffset,
+                  [k]: w
+                }
+              },
+              b
+            ),
+            onNotificationClick: r
+          }
+        )
+      }
+    ) }) }),
+    $[b].selectedNotificationIdsForSubTab.length ? /* @__PURE__ */ e.jsx(
+      ho,
+      {
+        formId: oe(te),
+        primaryBtn: {
+          label: We.markAsRead,
+          isLoading: $[b].markAsReadState.fetchState === "In-Progress",
+          style: { width: "135px" },
+          isDisabled: Ke != null
+        },
+        cancelBtn: {
+          label: Ds.cancel,
+          isDisabled: $[b].markAsReadState.fetchState === "In-Progress",
+          style: { width: "135px" },
+          onClick: qe
+        },
+        helperContainerStyle: D === "small" ? { width: "100%" } : { rowGap: o.sp0 },
+        footerContentStyle: { gap: o.sp2 },
+        leftSideComponent: /* @__PURE__ */ e.jsx(Ct, { controller: D !== "small", children: /* @__PURE__ */ e.jsx(
+          ee,
+          {
+            selectedNotificationsCount: $[b].selectedNotificationIdsForSubTab.length
+          }
+        ) }),
+        topComponent: /* @__PURE__ */ e.jsx(Ct, { controller: D === "small", children: /* @__PURE__ */ e.jsx(
+          ee,
+          {
+            selectedNotificationsCount: $[b].selectedNotificationIdsForSubTab.length
+          }
+        ) }),
+        rightSideComponent: /* @__PURE__ */ e.jsx(Ct, { controller: D !== "small", children: /* @__PURE__ */ e.jsx(Hs, {}) })
+      }
+    ) : null
+  ] });
+}, Ms = ({
+  markAsAllReadUpdateState: t,
+  markAsReadUpdateState: i,
+  notificationCount: s,
+  onMarkAsAllReadClick: n
+}) => {
+  const r = s === 0, l = v(() => {
+    t !== "In-Progress" && i !== "In-Progress" && !r && n();
+  }, [
+    t,
+    i,
+    r,
+    n
+  ]);
+  return /* @__PURE__ */ e.jsx(
+    Us,
+    {
+      variant: "tertiary",
+      size: "small",
+      label: We.markAllAsRead,
+      onClick: l,
+      prefixIcon: t === "In-Progress" ? /* @__PURE__ */ e.jsx(po, { size: "Small", start: !0 }) : /* @__PURE__ */ e.jsx(Ws, { className: "mark-as-read" }),
+      disabled: r,
+      textStyle: { fontWeight: Rt.smallRegular.fontWeight },
+      style: {
+        borderRadius: o.sp1,
+        border: "none",
+        backgroundColor: "transparent",
+        flexShrink: 0,
+        padding: o.sp0,
+        cursor: i === "In-Progress" || t === "In-Progress" || r ? "default" : "pointer"
+      }
+    }
+  );
+}, ee = ({
+  selectedNotificationsCount: t
+}) => {
+  const i = C();
+  return /* @__PURE__ */ e.jsxs(Vs, { windowSize: i, children: [
+    /* @__PURE__ */ e.jsx(Js, { children: /* @__PURE__ */ e.jsx(Ys, { isCircular: t < 10, children: /* @__PURE__ */ e.jsx(Ks, { children: t > Xt ? `${Xt}${As}` : t }) }) }),
+    /* @__PURE__ */ e.jsxs(Xs, { windowSize: i, children: [
+      /* @__PURE__ */ e.jsx(qs, { children: t > 1 ? Zt.notificationsSelected : Zt.notificationSelected }),
+      t > He ? /* @__PURE__ */ e.jsx(Qs, { children: dt.maxLimit }) : null
+    ] })
+  ] });
+}, Fs = a.div`
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  flex-direction: column;
+  background-color: ${(t) => t.theme.colors.grey4};
+`, Ps = a.div`
+  display: flex;
+  height: 100%;
+  overflow: auto;
+  padding-top: ${o.sp0};
+  padding-bottom: ${o.sp0};
+  padding-left: ${(t) => nt.tableContainerLeftPadding.valuePx(t.windowSize)};
+  padding-right: ${(t) => nt.tableContainerRightPadding.valuePx(t.windowSize)};
+`, Bs = a.div`
+  padding-top: ${o.sp0};
+  padding-bottom: ${o.sp0};
+  padding-left: ${(t) => nt.tabsContainerLeftRightPadding.valuePx(t.windowSize)};
+  padding-right: ${(t) => nt.tabsContainerLeftRightPadding.valuePx(t.windowSize)};
+`, Gs = a.div`
+  min-height: ${o.sp3};
+  width: 100%;
+`, Us = a(go)`
+  .mark-as-read {
+    color: ${(t) => t.disabled === !0 ? t.theme.colors.grey2 : t.theme.colors.hero};
+  }
+  :hover {
+    .mark-as-read {
+      color: ${(t) => t.disabled === !0 ? t.theme.colors.grey2 : t.theme.colors.primary};
+    }
+  }
+`, Ws = a($o)`
+  width: ${o.sp3};
+  height: ${o.sp3};
+`, Hs = a.div``, Vs = a.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: ${o.sp2};
+  margin-left: ${(t) => nt.selectedNotificationsTextMarginLeft.valuePx(t.windowSize)};
+`, Ys = a.div`
+  ${(t) => t.isCircular ? M`
+          height: ${o.sp3};
+          width: ${o.sp3};
+          padding: ${o.sp0};
+        ` : M`
+          height: 18px;
+          min-width: ${o.sp3};
+          padding: ${o.sp0} ${o.sp1};
+        `}
+  background-color: transparent;
+  border-radius: inherit;
+`, Js = a.div`
+  border: 1px solid ${(t) => t.theme.colors.grey1};
+  border-radius: ${o.sp12};
+  padding: 2px;
+`, Ks = a(xo)`
+  height: 100%;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${(t) => t.theme.colors.hero};
+`, qs = a(pe)`
+  display: flex;
+`, Qs = a(wo)`
+  display: flex;
+  color: ${j.important};
+  margin-left: ${o.sp1};
+`, Xs = a(pe)`
+  ${(t) => `${Es.selectedNotificationsText.style(t.windowSize)}`};
+  color: ${(t) => t.theme.colors.primary};
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+`, Zs = a.div`
+  width: ${o.sp4};
+  height: ${o.sp4};
+`, tn = a(fo)`
+  color: ${(t) => t.theme.colors.hero};
+  width: ${o.sp4};
+  height: ${o.sp4};
+  cursor: pointer;
+  &:hover {
+    color: ${(t) => t.theme.colors.primary};
+  }
+`, oe = (t) => `${t}_form`, ie = (t) => {
+  const {
+    allNotifications: i,
+    allExternalNotifications: s,
+    notificationDetailsByTab: {
+      tasks: { selectedNotificationIds: n },
+      comments: { selectedNotificationIds: r }
+    }
+  } = t, l = {};
+  Ae(i).filter(
+    (u) => u.notifications.length > 0
+  ).forEach((u) => {
+    const m = u.notifications.map(
+      (f) => f.notificationId
+    );
+    l[ut(u)] = n.filter(
+      (f) => m.includes(f)
+    );
+  });
+  const c = {};
+  return Ne(
+    s
+  ).filter((u) => u.notifications.length > 0).forEach((u) => {
+    const m = u.notifications.map(
+      (f) => f.inboxNotification.id
+    );
+    c[ut(u)] = r.filter(
+      (f) => m.includes(f)
+    );
+  }), {
+    [Z]: c,
+    [tt]: l
+  };
+}, hn = (t, i) => {
+  const s = [];
+  return Object.values(t).forEach((n) => {
+    n.forEach((r) => {
+      r.includes(It.toLocaleLowerCase()) === !1 && i.includes(r) && s.push(r);
+    });
+  }), s;
+};
+export {
+  mn as default,
+  hn as getSelectedNotificationIds,
+  oe as uniqueFormName
+};