@zeniai/web-components 3.16.72 → 3.16.74

package/dist/NotificationsPage-BkvXIfOi.js

@@ -1,2664 +0,0 @@
-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-DtFedGku.js";
-import { useCallback as v, useContext as oo, useRef as W, useEffect as G, useMemo as Q } from "react";
-import { css as E } 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, jz as no, a as F, kK as ao, C as j, kL as ce, R as _, dz as de, dB as ue, T as ro, ae as V, hF as me, D as x, S as o, jN as lo, p as it, E as Y, o as gt, Q as he, aJ as z, t as Rt, fM as xt, kM as bt, fh as fe, kN as Dt, hN as co, W as uo, aE as mo, ap as ho, aL as Ct, f_ as fo, A as po, B as go, eH as xo, av as bo, K as pe, G as wo } from "./index-DLKZoZ-i.js";
-import { S as $o } from "./double-tick-D6s_OvsM.js";
-import { S as yo } from "./SubTabSwitcher-C1u2CKEv.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-D7QOePou.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(
-    Eo,
-    {
-      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 (Mo(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(Mt, { 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(Mt, { 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 Mo(t) {
-  return "type" in t && t.type === "link";
-}
-const Eo = 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 ? E`
-          z-index: 1;
-          color: ${t.theme.colors.primary};
-          border: 1px solid ${t.theme.colors.primary};
-
-          .userText {
-            color: ${j.brandColorJade};
-          }
-        ` : null};
-
-  ${(t) => t.isClickable ? E`
-          &: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)};
-`, Mt = 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 ? E`
-          z-index: 1;
-          color: ${t.theme.colors.primary};
-          border: 1px solid ${t.theme.colors.primary};
-
-          .userText {
-            color: ${j.brandColorJade};
-          }
-        ` : null};
-
-  ${(t) => t.isClickable ? E`
-          &: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: Et }
-} = 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}.${Et.toLocaleLowerCase()}`,
-              style: { color: c.colors.primary },
-              children: wt(t)
-            }
-          ),
-          value: Et.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: M }
-    }
-  }
-} = 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 = M.newActivity;
-  return t.code === "in_progress" ? i = M.due.replace(
-    "__task_status__",
-    Dt(t.name.toLocaleLowerCase())
-  ) : i = M.due.replace(
-    "__task_status__",
-    Li.toLocaleLowerCase().concat(
-      De.space,
-      Dt(t.name.toLocaleLowerCase())
-    )
-  ), i;
-}, _i = (t) => {
-  const {
-    eventData: { activities: i }
-  } = t;
-  let s = M.newActivity;
-  if (i.length > 0) {
-    const n = i[0].activityType, r = i[0].metadata.eventStatus;
-    switch (n) {
-      case "task_archived":
-        s = M.archive;
-        break;
-      case "task_deleted":
-        s = M.delete;
-        break;
-      case "task_activities":
-        s = M.activities;
-        break;
-      case "task_assigned":
-        s = M.assign;
-        break;
-      case "task_created":
-        s = M.create;
-        break;
-      case "task_due":
-        s = r != null ? Ri(r) : M.dueTomorrow;
-        break;
-      case "task_overdue":
-        s = M.overdue.replace(
-          "__date__",
-          i[0].metadata.additionalInfo?.dueDate.format(
-            Ii.visual.MMMDFormat
-          ) ?? De.empty
-        );
-        break;
-      case "task_status_updated":
-        s = M.statusUpdate;
-        break;
-    }
-  }
-  return s;
-}, Oe = new _(3, 2, 1, 1, 1), Me = new _(
-  x[8],
-  33,
-  33,
-  33,
-  35
-), ht = {
-  lineClamp: Oe,
-  sectionWidth: Me
-}, {
-  common: { and: Ut, other: zi, others: Di, texts: Ai, timeStrings: Oi, strings: O, tags: Mi }
-} = F.getLocalizedStrings(), Ei = ({
-  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 })
-      ]
-    }
-  );
-}, Ee = (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(Ee, { ...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: Mi.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 ? E`
-          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 ? E`
-          display: flex;
-          flex-wrap: wrap;
-          gap: ${o.sp1};
-        ` : E`
-          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%" : Me.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(Ee, { ...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 ? E`
-          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 ? E`
-          display: flex;
-          flex-wrap: wrap;
-          gap: ${o.sp2};
-        ` : E`
-          display: -webkit-box;
-          -webkit-box-orient: horizontal;
-          gap: ${o.sp1};
-        `};
-`, Ue = (t) => C() === "small" ? /* @__PURE__ */ e.jsx(hs, { ...t }) : /* @__PURE__ */ e.jsx(Ei, { ...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])
-}, Ms = {
-  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(
-          Es,
-          {
-            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
-  ] });
-}, Es = ({
-  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 ? E`
-          height: ${o.sp3};
-          width: ${o.sp3};
-          padding: ${o.sp0};
-        ` : E`
-          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) => `${Ms.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
-};