@cccsaurora/clue-ui 1.2.4-patch.275 → 1.2.5-dev.298

package/icons/Action.js

@@ -1,73 +1,90 @@
-import { jsx as e, jsxs as z } from "react/jsx-runtime";
-import { I } from "../iconify-BBckr5AQ.js";
-import { useTheme as j, Stack as i, Divider as l, Typography as C } from "@mui/material";
-import R from "../components/CountBadge.js";
-import { C as v } from "../AnnotationPreview-BO7rVnOP.js";
-import { u as B } from "../ActionForm-CwsfB99X.js";
-import { g as D } from "../groupBy-br8xmD2R.js";
-import { memo as L, useRef as A, useMemo as s, useEffect as O } from "react";
-import { u as M } from "../index-Dj5C04IX.js";
-const k = ({ result: o }) => /* @__PURE__ */ z(i, { p: 1, children: [
-  /* @__PURE__ */ e(C, { variant: "body1", children: o.action.name }),
-  /* @__PURE__ */ e(C, { variant: "caption", color: "text.secondary", children: o.summary })
-] }), b = ({ value: o, counters: f = !0, disableTooltip: c = !1, ...d }) => {
-  const p = j(), h = M(v, (t) => t.showInfo), a = M(v, (t) => t.closeInfo), y = A(), g = A(), { getActionResults: x } = B(), n = s(
-    () => x(o.type, o.value, o.classification),
-    [x, o.classification, o.type, o.value]
+import { jsx, jsxs } from "react/jsx-runtime";
+import { I as Icon } from "../iconify-CXMreGTg.js";
+import { useTheme, Stack, Divider, Typography } from "@mui/material";
+import CountBadge from "../components/CountBadge.js";
+import { C as CluePopupContext } from "../AnnotationPreview-Dmz7taAU.js";
+import { u as useClueActions } from "../ActionForm-D6gYuFRR.js";
+import { g as groupBy } from "../groupBy-xqz-n0Vd.js";
+import { memo, useRef, useMemo, useEffect } from "react";
+import { u as useContextSelector } from "../index-AMfoEg_6.js";
+const ResultDetails = ({ result }) => {
+  return /* @__PURE__ */ jsxs(Stack, { p: 1, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "body1", children: result.action.name }),
+    /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: result.summary })
+  ] });
+};
+const ActionIcon = ({ value, counters = true, disableTooltip = false, ...otherProps }) => {
+  const theme = useTheme();
+  const showInfo = useContextSelector(CluePopupContext, (state) => state.showInfo);
+  const closeInfo = useContextSelector(CluePopupContext, (state) => state.closeInfo);
+  const successAnchorRef = useRef();
+  const failureAnchorRef = useRef();
+  const { getActionResults } = useClueActions();
+  const actionResults = useMemo(
+    () => getActionResults(value.type, value.value, value.classification),
+    [getActionResults, value.classification, value.type, value.value]
   );
-  O(() => {
-    c && a("context", o);
-  }, [c]);
-  const [m, u] = s(() => {
-    const t = D(n, (r) => r.outcome);
-    return [t.success ?? [], t.failure ?? []];
-  }, [n]), S = s(() => {
-    const t = m.map((r) => /* @__PURE__ */ e(k, { result: r }, r.actionId));
-    return /* @__PURE__ */ e(i, { spacing: 1, divider: /* @__PURE__ */ e(l, { flexItem: !0, orientation: "horizontal" }), children: t });
-  }, [m]), w = s(() => {
-    const t = u.map((r) => /* @__PURE__ */ e(k, { result: r }, r.summary));
-    return /* @__PURE__ */ e(i, { spacing: 1, divider: /* @__PURE__ */ e(l, { flexItem: !0, orientation: "horizontal" }), children: t });
-  }, [u]);
-  return (n == null ? void 0 : n.length) < 1 ? null : /* @__PURE__ */ z(i, { direction: "row", spacing: 1, children: [
-    /* @__PURE__ */ e(l, { flexItem: !0, orientation: "vertical" }),
-    m.length > 0 && /* @__PURE__ */ e(
+  useEffect(() => {
+    if (disableTooltip) {
+      closeInfo("context", value);
+    }
+  }, [disableTooltip]);
+  const [successes, failures] = useMemo(() => {
+    const outcomes = groupBy(actionResults, (result) => result.outcome);
+    return [outcomes.success ?? [], outcomes.failure ?? []];
+  }, [actionResults]);
+  const successContent = useMemo(() => {
+    const entries = successes.map((result) => /* @__PURE__ */ jsx(ResultDetails, { result }, result.actionId));
+    return /* @__PURE__ */ jsx(Stack, { spacing: 1, divider: /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "horizontal" }), children: entries });
+  }, [successes]);
+  const failureContent = useMemo(() => {
+    const entries = failures.map((result) => /* @__PURE__ */ jsx(ResultDetails, { result }, result.summary));
+    return /* @__PURE__ */ jsx(Stack, { spacing: 1, divider: /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "horizontal" }), children: entries });
+  }, [failures]);
+  if ((actionResults == null ? void 0 : actionResults.length) < 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+    /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "vertical" }),
+    successes.length > 0 && /* @__PURE__ */ jsx(
       "span",
       {
-        ref: y,
+        ref: successAnchorRef,
         style: { display: "flex" },
-        onMouseOver: c ? void 0 : () => h("actionResults", y.current, o, { content: S }),
-        onMouseLeave: c ? void 0 : () => a("actionResults", o),
-        children: /* @__PURE__ */ e(R, { disabled: !f, count: n.filter((t) => t.outcome === "success").length, children: /* @__PURE__ */ e(
-          I,
+        onMouseOver: disableTooltip ? void 0 : () => showInfo("actionResults", successAnchorRef.current, value, { content: successContent }),
+        onMouseLeave: disableTooltip ? void 0 : () => closeInfo("actionResults", value),
+        children: /* @__PURE__ */ jsx(CountBadge, { disabled: !counters, count: actionResults.filter((result) => result.outcome === "success").length, children: /* @__PURE__ */ jsx(
+          Icon,
           {
             icon: "material-symbols:bookmark-check-rounded",
-            color: p.palette.success.main,
+            color: theme.palette.success.main,
             fontSize: "1.5em",
-            ...d
+            ...otherProps
           }
         ) })
       }
     ),
-    u.length > 0 && /* @__PURE__ */ e(
+    failures.length > 0 && /* @__PURE__ */ jsx(
       "span",
       {
-        ref: g,
+        ref: failureAnchorRef,
         style: { display: "flex" },
-        onMouseOver: c ? void 0 : () => h("actionResults", g.current, o, { content: w }),
-        onMouseLeave: c ? void 0 : () => a("actionResults", o),
-        children: /* @__PURE__ */ e(R, { disabled: !f, count: n.filter((t) => t.outcome === "failure").length, children: /* @__PURE__ */ e(
-          I,
+        onMouseOver: disableTooltip ? void 0 : () => showInfo("actionResults", failureAnchorRef.current, value, { content: failureContent }),
+        onMouseLeave: disableTooltip ? void 0 : () => closeInfo("actionResults", value),
+        children: /* @__PURE__ */ jsx(CountBadge, { disabled: !counters, count: actionResults.filter((result) => result.outcome === "failure").length, children: /* @__PURE__ */ jsx(
+          Icon,
           {
             icon: "material-symbols:cancel-presentation-rounded",
-            color: p.palette.error.main,
+            color: theme.palette.error.main,
             fontSize: "1.5em",
-            ...d
+            ...otherProps
           }
         ) })
       }
     )
   ] });
-}, P = L(b);
+};
+const ActionIcon$1 = memo(ActionIcon);
 export {
-  P as default
+  ActionIcon$1 as default
 };

package/icons/Assessment.js

@@ -1,108 +1,124 @@
-import { jsxs as b, Fragment as k, jsx as s } from "react/jsx-runtime";
-import { I as l } from "../iconify-BBckr5AQ.js";
-import { useTheme as j, Stack as y, Chip as I, Divider as q, Grid as C, Tooltip as A } from "@mui/material";
-import z from "../components/CountBadge.js";
-import { C as w } from "../AnnotationPreview-BO7rVnOP.js";
-import { g as O } from "../groupBy-br8xmD2R.js";
-import { l as P } from "../last-7CdUxN0r.js";
-import { m as L } from "../maxBy-Bc0dYHcO.js";
-import { s as R } from "../sortBy-DY2JBf9n.js";
-import { s as W } from "../sumBy-DuMASLPd.js";
-import { memo as D, useRef as E, useState as F, useMemo as d, useEffect as G } from "react";
-import { u as S } from "../index-Dj5C04IX.js";
-const H = ({ annotations: u, value: i, counters: f = !0, disableTooltip: r = !1, ubiquitous: h = !1, ...v }) => {
-  const t = j(), g = S(w, (e) => e.showInfo), x = S(w, (e) => e.closeInfo), c = E(), [$, B] = F(!1), o = d(
-    () => u.filter((e) => (e == null ? void 0 : e.type) === "assessment" && (e == null ? void 0 : e.ubiquitous) === h),
-    [u, h]
-  ), m = d(
-    () => Object.entries(O(o, "value")).map(([e, p]) => [
-      e,
-      W(p, "quantity")
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { I as Icon } from "../iconify-CXMreGTg.js";
+import { useTheme, Stack, Chip, Divider, Grid, Tooltip } from "@mui/material";
+import CountBadge from "../components/CountBadge.js";
+import { C as CluePopupContext } from "../AnnotationPreview-Dmz7taAU.js";
+import { g as groupBy } from "../groupBy-xqz-n0Vd.js";
+import { l as last } from "../last-CUCl67Im.js";
+import { m as maxBy } from "../maxBy-IKHzFrCS.js";
+import { s as sortBy } from "../sortBy-DfSj8IoJ.js";
+import { s as sumBy } from "../sumBy-D-hb_NY-.js";
+import { memo, useRef, useState, useMemo, useEffect } from "react";
+import { u as useContextSelector } from "../index-AMfoEg_6.js";
+const AssessmentIcon = ({ annotations, value, counters = true, disableTooltip = false, ubiquitous = false, ...otherProps }) => {
+  const theme = useTheme();
+  const showInfo = useContextSelector(CluePopupContext, (state) => state.showInfo);
+  const closeInfo = useContextSelector(CluePopupContext, (state) => state.closeInfo);
+  const anchorRef = useRef();
+  const [showTooltip, setShowTooltip] = useState(false);
+  const assessmentAnnotations = useMemo(
+    () => annotations.filter((annotation) => (annotation == null ? void 0 : annotation.type) === "assessment" && (annotation == null ? void 0 : annotation.ubiquitous) === ubiquitous),
+    [annotations, ubiquitous]
+  );
+  const sortedAssessments = useMemo(
+    () => Object.entries(groupBy(assessmentAnnotations, "value")).map(([_value, _annotations]) => [
+      _value,
+      sumBy(_annotations, "quantity")
     ]),
-    [o]
-  ), n = d(() => L(m, P), [m]);
-  if (G(() => {
-    r && B(!1);
-  }, [r]), (o == null ? void 0 : o.length) < 1)
+    [assessmentAnnotations]
+  );
+  const popularAssessment = useMemo(() => maxBy(sortedAssessments, last), [sortedAssessments]);
+  useEffect(() => {
+    if (disableTooltip) {
+      setShowTooltip(false);
+    }
+  }, [disableTooltip]);
+  if ((assessmentAnnotations == null ? void 0 : assessmentAnnotations.length) < 1) {
     return null;
-  const M = {
+  }
+  const tooltipProps = {
     tooltip: {
       sx: {
         maxWidth: "500px",
-        backgroundColor: t.palette.background.paper,
-        border: `thin solid ${t.palette.divider}`,
+        backgroundColor: theme.palette.background.paper,
+        border: `thin solid ${theme.palette.divider}`,
         p: 1,
-        boxShadow: t.shadows[2]
+        boxShadow: theme.shadows[2]
       }
     }
-  }, a = /* @__PURE__ */ b(y, { spacing: 1, onClick: (e) => e.stopPropagation(), children: [
-    o.length > 1 && /* @__PURE__ */ b(k, { children: [
-      /* @__PURE__ */ s(y, { direction: "row", children: m.map(([e, p]) => /* @__PURE__ */ s(
-        I,
+  };
+  const tooltipContent = /* @__PURE__ */ jsxs(Stack, { spacing: 1, onClick: (e) => e.stopPropagation(), children: [
+    assessmentAnnotations.length > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Stack, { direction: "row", children: sortedAssessments.map(([type, count]) => /* @__PURE__ */ jsx(
+        Chip,
         {
           size: "small",
           variant: "outlined",
-          label: `${e}: ${p}`,
-          icon: /* @__PURE__ */ s(
-            l,
+          label: `${type}: ${count}`,
+          icon: /* @__PURE__ */ jsx(
+            Icon,
             {
-              icon: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(e) ? "healthicons:hazardous" : "fluent-mdl2:ribbon-solid"
+              icon: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(type) ? "healthicons:hazardous" : "fluent-mdl2:ribbon-solid"
             }
           ),
-          color: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(e) ? "error" : "success"
+          color: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(type) ? "error" : "success"
         },
-        e
+        type
       )) }),
-      /* @__PURE__ */ s(q, { orientation: "horizontal", flexItem: !0 })
+      /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", flexItem: true })
     ] }),
-    /* @__PURE__ */ s(
-      C,
+    /* @__PURE__ */ jsx(
+      Grid,
       {
         sx: {
-          mt: o.length < 2 && `${t.spacing(-0.5)} !important`,
-          ml: `${t.spacing(-0.5)} !important`
+          mt: assessmentAnnotations.length < 2 && `${theme.spacing(-0.5)} !important`,
+          ml: `${theme.spacing(-0.5)} !important`
         },
-        container: !0,
+        container: true,
         spacing: 0.5,
         maxWidth: "500px",
-        children: R(o, "value").map((e) => /* @__PURE__ */ s(C, { item: !0, children: /* @__PURE__ */ s(
-          I,
+        children: sortBy(assessmentAnnotations, "value").map((annotation) => /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+          Chip,
           {
             size: "small",
             variant: "outlined",
-            label: e.analytic + (e.quantity > 1 ? ` (x${e.quantity})` : ""),
-            icon: /* @__PURE__ */ s(
-              l,
+            label: annotation.analytic + (annotation.quantity > 1 ? ` (x${annotation.quantity})` : ""),
+            icon: /* @__PURE__ */ jsx(
+              Icon,
               {
-                icon: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(e.value) ? "healthicons:hazardous" : "fluent-mdl2:ribbon-solid"
+                icon: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(annotation.value) ? "healthicons:hazardous" : "fluent-mdl2:ribbon-solid"
               }
             ),
-            color: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(e.value) ? "error" : "success"
+            color: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(annotation.value) ? "error" : "success"
           }
-        ) }, e.analytic + e.value))
+        ) }, annotation.analytic + annotation.value))
       }
     )
   ] });
-  return ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(n[0]) ? /* @__PURE__ */ s(
-    "span",
-    {
-      ref: c,
-      style: { display: "flex" },
-      onMouseOver: r ? void 0 : () => g("assessment", c.current, i, { content: a }),
-      onMouseLeave: r ? void 0 : () => x("assessment", i),
-      children: /* @__PURE__ */ s(z, { disabled: !f, color: "error", count: n[1], children: /* @__PURE__ */ s(l, { fontSize: "1.5em", ...v, icon: "healthicons:hazardous", color: t.palette.error.main }) })
-    }
-  ) : /* @__PURE__ */ s(
+  if (["trivial", "recon", "attempt", "compromise", "mitigated"].includes(popularAssessment[0])) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: anchorRef,
+        style: { display: "flex" },
+        onMouseOver: disableTooltip ? void 0 : () => showInfo("assessment", anchorRef.current, value, { content: tooltipContent }),
+        onMouseLeave: disableTooltip ? void 0 : () => closeInfo("assessment", value),
+        children: /* @__PURE__ */ jsx(CountBadge, { disabled: !counters, color: "error", count: popularAssessment[1], children: /* @__PURE__ */ jsx(Icon, { fontSize: "1.5em", ...otherProps, icon: "healthicons:hazardous", color: theme.palette.error.main }) })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
     "span",
     {
-      ref: c,
+      ref: anchorRef,
       style: { display: "flex" },
-      onMouseOver: r ? void 0 : () => g("assessment", c.current, i, { content: a }),
-      onMouseLeave: r ? void 0 : () => x("assessment", i),
-      children: /* @__PURE__ */ s(A, { disableInteractive: !0, componentsProps: M, open: $, title: a, children: /* @__PURE__ */ s(z, { disabled: !f, count: n[1], children: /* @__PURE__ */ s(l, { fontSize: "1.5em", ...v, icon: "fluent-mdl2:ribbon-solid", color: t.palette.success.main }) }) })
+      onMouseOver: disableTooltip ? void 0 : () => showInfo("assessment", anchorRef.current, value, { content: tooltipContent }),
+      onMouseLeave: disableTooltip ? void 0 : () => closeInfo("assessment", value),
+      children: /* @__PURE__ */ jsx(Tooltip, { disableInteractive: true, componentsProps: tooltipProps, open: showTooltip, title: tooltipContent, children: /* @__PURE__ */ jsx(CountBadge, { disabled: !counters, count: popularAssessment[1], children: /* @__PURE__ */ jsx(Icon, { fontSize: "1.5em", ...otherProps, icon: "fluent-mdl2:ribbon-solid", color: theme.palette.success.main }) }) })
     }
   );
-}, se = D(H);
+};
+const AssessmentIcon$1 = memo(AssessmentIcon);
 export {
-  se as default
+  AssessmentIcon$1 as default
 };

package/icons/Context.js

@@ -1,72 +1,86 @@
-import { jsx as o } from "react/jsx-runtime";
-import { I as w } from "../iconify-BBckr5AQ.js";
-import { Stack as u, Divider as z } from "@mui/material";
-import v from "../components/AnnotationEntry.js";
-import E from "../components/CountBadge.js";
-import M from "../components/display/icons/Iconified.js";
-import { C as x } from "../AnnotationPreview-BO7rVnOP.js";
-import { g as O } from "../groupBy-br8xmD2R.js";
-import { memo as j, useRef as k, useMemo as h, useEffect as B } from "react";
-import { u as g } from "../index-Dj5C04IX.js";
-const R = ({
-  annotations: l,
-  value: c,
-  counters: y = !0,
-  disableTooltip: n = !1,
-  showExtraIcon: I = !1,
-  ubiquitous: m = !1,
-  ...r
+import { jsx } from "react/jsx-runtime";
+import { I as Icon } from "../iconify-CXMreGTg.js";
+import { Stack, Divider } from "@mui/material";
+import AnnotationEntry from "../components/AnnotationEntry.js";
+import CountBadge from "../components/CountBadge.js";
+import Iconified from "../components/display/icons/Iconified.js";
+import { C as CluePopupContext } from "../AnnotationPreview-Dmz7taAU.js";
+import { g as groupBy } from "../groupBy-xqz-n0Vd.js";
+import { memo, useRef, useMemo, useEffect } from "react";
+import { u as useContextSelector } from "../index-AMfoEg_6.js";
+const ContextIcon = ({
+  annotations,
+  value,
+  counters = true,
+  disableTooltip = false,
+  showExtraIcon = false,
+  ubiquitous = false,
+  ...otherProps
 }) => {
-  const C = g(x, (e) => e.showInfo), p = g(x, (e) => e.closeInfo), a = k(), t = h(
-    () => l.filter((e) => e.type === "context" && e.ubiquitous === m),
-    [l, m]
-  ), s = h(
-    () => t.filter((e) => e.icon || e.analytic_icon),
-    [t]
+  const showInfo = useContextSelector(CluePopupContext, (state) => state.showInfo);
+  const closeInfo = useContextSelector(CluePopupContext, (state) => state.closeInfo);
+  const anchorRef = useRef();
+  const contextAnnotations = useMemo(
+    () => annotations.filter((annotation) => annotation.type === "context" && annotation.ubiquitous === ubiquitous),
+    [annotations, ubiquitous]
   );
-  if (B(() => {
-    n && p("context", c);
-  }, [n]), (t == null ? void 0 : t.length) < 1)
+  const additionalIcons = useMemo(
+    () => contextAnnotations.filter((annotation) => annotation.icon || annotation.analytic_icon),
+    [contextAnnotations]
+  );
+  useEffect(() => {
+    if (disableTooltip) {
+      closeInfo("context", value);
+    }
+  }, [disableTooltip]);
+  if ((contextAnnotations == null ? void 0 : contextAnnotations.length) < 1) {
     return null;
-  const f = [];
-  s.length && Object.entries(O(s, (e) => e.icon || e.analytic_icon)).forEach(
-    ([e, S]) => f.push(
-      /* @__PURE__ */ o(
-        "span",
-        {
-          ref: a,
-          style: { display: "flex" },
-          onMouseOver: n ? void 0 : () => C("context", a.current, c, {
-            content: /* @__PURE__ */ o(
-              u,
+  }
+  const icons = [];
+  if (additionalIcons.length) {
+    Object.entries(groupBy(additionalIcons, (annotation) => annotation.icon || annotation.analytic_icon)).forEach(
+      ([icon, _annotations]) => icons.push(
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: anchorRef,
+            style: { display: "flex" },
+            onMouseOver: disableTooltip ? void 0 : () => showInfo("context", anchorRef.current, value, {
+              content: /* @__PURE__ */ jsx(
+                Stack,
+                {
+                  onClick: (e) => e.stopPropagation(),
+                  spacing: 1,
+                  divider: /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "horizontal" }),
+                  children: _annotations.map((annotation) => /* @__PURE__ */ jsx(AnnotationEntry, { annotation }, JSON.stringify(annotation)))
+                }
+              )
+            }),
+            onMouseLeave: disableTooltip ? void 0 : () => closeInfo("context", value),
+            children: /* @__PURE__ */ jsx(
+              Icon,
               {
-                onClick: (i) => i.stopPropagation(),
-                spacing: 1,
-                divider: /* @__PURE__ */ o(z, { flexItem: !0, orientation: "horizontal" }),
-                children: S.map((i) => /* @__PURE__ */ o(v, { annotation: i }, JSON.stringify(i)))
+                icon,
+                fontSize: otherProps.fontSize ?? "1.25em",
+                style: { filter: "drop-shadow(0px 0px 1px rgb(0 0 0 / 0.4))", ...otherProps.style ?? {} },
+                ...otherProps
               }
             )
-          }),
-          onMouseLeave: n ? void 0 : () => p("context", c),
-          children: /* @__PURE__ */ o(
-            w,
-            {
-              icon: e,
-              fontSize: r.fontSize ?? "1.25em",
-              style: { filter: "drop-shadow(0px 0px 1px rgb(0 0 0 / 0.4))", ...r.style ?? {} },
-              ...r
-            }
-          )
-        },
-        e
+          },
+          icon
+        )
       )
-    )
-  );
-  const d = t.length - s.length;
-  return d > 0 && I && f.push(
-    /* @__PURE__ */ o(E, { disabled: !y, count: d, children: /* @__PURE__ */ o(M, { icon: "ic:baseline-newspaper", style: { zIndex: 2, ...r.style ?? {} } }) }, "extra")
-  ), /* @__PURE__ */ o(u, { direction: "row", spacing: 1, children: f });
-}, G = j(R);
+    );
+  }
+  const additionalSize = contextAnnotations.length - additionalIcons.length;
+  if (additionalSize > 0 && showExtraIcon) {
+    icons.push(
+      /* @__PURE__ */ jsx(CountBadge, { disabled: !counters, count: additionalSize, children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-newspaper", style: { zIndex: 2, ...otherProps.style ?? {} } }) }, "extra")
+    );
+  }
+  return /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, children: icons });
+};
+const ContextIcon$1 = memo(ContextIcon);
 export {
-  G as default
+  ContextIcon$1 as default
 };