@cccsaurora/clue-ui 1.0.1-dev.70 → 1.0.2-patch.38

package/icons/Action.js

@@ -1,90 +1,73 @@
-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-DiQDjt9s.js";
-import { u as useClueActions } from "../ActionForm-D4ryHO0M.js";
-import { g as groupBy } from "../groupBy-DC2oOuBN.js";
-import { memo, useRef, useMemo, useEffect } from "react";
-import { u as useContextSelector } from "../index-BDVjGvMI.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]
+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-dYinoSA9.js";
+import { u as B } from "../ActionForm-Sw7D-KOE.js";
+import { g as D } from "../groupBy-BheQYl6f.js";
+import { memo as L, useRef as A, useMemo as s, useEffect as O } from "react";
+import { u as M } from "../index-E7g8cRyW.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]
   );
-  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(
+  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(
       "span",
       {
-        ref: successAnchorRef,
+        ref: y,
         style: { display: "flex" },
-        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,
+        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,
           {
             icon: "material-symbols:bookmark-check-rounded",
-            color: theme.palette.success.main,
+            color: p.palette.success.main,
             fontSize: "1.5em",
-            ...otherProps
+            ...d
           }
         ) })
       }
     ),
-    failures.length > 0 && /* @__PURE__ */ jsx(
+    u.length > 0 && /* @__PURE__ */ e(
       "span",
       {
-        ref: failureAnchorRef,
+        ref: g,
         style: { display: "flex" },
-        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,
+        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,
           {
             icon: "material-symbols:cancel-presentation-rounded",
-            color: theme.palette.error.main,
+            color: p.palette.error.main,
             fontSize: "1.5em",
-            ...otherProps
+            ...d
           }
         ) })
       }
     )
   ] });
-};
-const ActionIcon$1 = memo(ActionIcon);
+}, P = L(b);
 export {
-  ActionIcon$1 as default
+  P as default
 };

package/icons/Assessment.js

@@ -1,123 +1,107 @@
-import { jsxs, jsx, Fragment } 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-DiQDjt9s.js";
-import { g as groupBy } from "../groupBy-DC2oOuBN.js";
-import { l as last } from "../last-CUCl67Im.js";
-import { m as maxBy, s as sortBy } from "../sortBy-B-UKp4GT.js";
-import { s as sumBy } from "../sumBy-MYkDPHZL.js";
-import { memo, useRef, useState, useMemo, useEffect } from "react";
-import { u as useContextSelector } from "../index-BDVjGvMI.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")
+import { jsxs as b, jsx as s, Fragment as k } 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-dYinoSA9.js";
+import { g as O } from "../groupBy-BheQYl6f.js";
+import { l as P } from "../last-7CdUxN0r.js";
+import { m as L, s as R } from "../sortBy-ITdmD17L.js";
+import { s as W } from "../sumBy-DxJUU2E8.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-E7g8cRyW.js";
+const H = ({ annotations: u, value: i, counters: f = !0, disableTooltip: r = !1, ubiquitous: h = !1, ...v }) => {
+  const o = j(), g = S(w, (e) => e.showInfo), x = S(w, (e) => e.closeInfo), c = E(), [$, B] = F(!1), t = 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(t, "value")).map(([e, p]) => [
+      e,
+      W(p, "quantity")
     ]),
-    [assessmentAnnotations]
-  );
-  const popularAssessment = useMemo(() => maxBy(sortedAssessments, last), [sortedAssessments]);
-  useEffect(() => {
-    if (disableTooltip) {
-      setShowTooltip(false);
-    }
-  }, [disableTooltip]);
-  if ((assessmentAnnotations == null ? void 0 : assessmentAnnotations.length) < 1) {
+    [t]
+  ), n = d(() => L(m, P), [m]);
+  if (G(() => {
+    r && B(!1);
+  }, [r]), (t == null ? void 0 : t.length) < 1)
     return null;
-  }
-  const tooltipProps = {
+  const M = {
     tooltip: {
       sx: {
         maxWidth: "500px",
-        backgroundColor: theme.palette.background.paper,
-        border: `thin solid ${theme.palette.divider}`,
+        backgroundColor: o.palette.background.paper,
+        border: `thin solid ${o.palette.divider}`,
         p: 1,
-        boxShadow: theme.shadows[2]
+        boxShadow: o.shadows[2]
       }
     }
-  };
-  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,
+  }, a = /* @__PURE__ */ b(y, { spacing: 1, onClick: (e) => e.stopPropagation(), children: [
+    t.length > 1 && /* @__PURE__ */ b(k, { children: [
+      /* @__PURE__ */ s(y, { direction: "row", children: m.map(([e, p]) => /* @__PURE__ */ s(
+        I,
         {
           size: "small",
           variant: "outlined",
-          label: `${type}: ${count}`,
-          icon: /* @__PURE__ */ jsx(
-            Icon,
+          label: `${e}: ${p}`,
+          icon: /* @__PURE__ */ s(
+            l,
             {
-              icon: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(type) ? "healthicons:hazardous" : "fluent-mdl2:ribbon-solid"
+              icon: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(e) ? "healthicons:hazardous" : "fluent-mdl2:ribbon-solid"
             }
           ),
-          color: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(type) ? "error" : "success"
+          color: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(e) ? "error" : "success"
         },
-        type
+        e
       )) }),
-      /* @__PURE__ */ jsx(Divider, { orientation: "horizontal", flexItem: true })
+      /* @__PURE__ */ s(q, { orientation: "horizontal", flexItem: !0 })
     ] }),
-    /* @__PURE__ */ jsx(
-      Grid,
+    /* @__PURE__ */ s(
+      C,
       {
         sx: {
-          mt: assessmentAnnotations.length < 2 && `${theme.spacing(-0.5)} !important`,
-          ml: `${theme.spacing(-0.5)} !important`
+          mt: t.length < 2 && `${o.spacing(-0.5)} !important`,
+          ml: `${o.spacing(-0.5)} !important`
         },
-        container: true,
+        container: !0,
         spacing: 0.5,
         maxWidth: "500px",
-        children: sortBy(assessmentAnnotations, "value").map((annotation) => /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
-          Chip,
+        children: R(t, "value").map((e) => /* @__PURE__ */ s(C, { item: !0, children: /* @__PURE__ */ s(
+          I,
           {
             size: "small",
             variant: "outlined",
-            label: annotation.analytic + (annotation.quantity > 1 ? ` (x${annotation.quantity})` : ""),
-            icon: /* @__PURE__ */ jsx(
-              Icon,
+            label: e.analytic + (e.quantity > 1 ? ` (x${e.quantity})` : ""),
+            icon: /* @__PURE__ */ s(
+              l,
               {
-                icon: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(annotation.value) ? "healthicons:hazardous" : "fluent-mdl2:ribbon-solid"
+                icon: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(e.value) ? "healthicons:hazardous" : "fluent-mdl2:ribbon-solid"
               }
             ),
-            color: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(annotation.value) ? "error" : "success"
+            color: ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(e.value) ? "error" : "success"
           }
-        ) }, annotation.analytic + annotation.value))
+        ) }, e.analytic + e.value))
       }
     )
   ] });
-  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(
+  return ["trivial", "recon", "attempt", "compromise", "mitigated"].includes(n[0]) ? /* @__PURE__ */ s(
     "span",
     {
-      ref: anchorRef,
+      ref: c,
       style: { display: "flex" },
-      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 }) }) })
+      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: o.palette.error.main }) })
+    }
+  ) : /* @__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(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: o.palette.success.main }) }) })
     }
   );
-};
-const AssessmentIcon$1 = memo(AssessmentIcon);
+}, ee = D(H);
 export {
-  AssessmentIcon$1 as default
+  ee as default
 };

package/icons/Context.js

@@ -1,83 +1,69 @@
-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-DiQDjt9s.js";
-import { g as groupBy } from "../groupBy-DC2oOuBN.js";
-import { memo, useRef, useMemo, useEffect } from "react";
-import { u as useContextSelector } from "../index-BDVjGvMI.js";
-const ContextIcon = ({
-  annotations,
-  value,
-  counters = true,
-  disableTooltip = false,
-  showExtraIcon = false,
-  ubiquitous = false,
-  ...otherProps
+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-dYinoSA9.js";
+import { g as O } from "../groupBy-BheQYl6f.js";
+import { memo as j, useRef as k, useMemo as h, useEffect as B } from "react";
+import { u as g } from "../index-E7g8cRyW.js";
+const R = ({
+  annotations: l,
+  value: c,
+  counters: I = !0,
+  disableTooltip: n = !1,
+  showExtraIcon: y = !1,
+  ubiquitous: m = !1,
+  ...r
 }) => {
-  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]
-  );
-  const additionalIcons = useMemo(() => contextAnnotations.filter((annotation) => annotation.icon), [contextAnnotations]);
-  useEffect(() => {
-    if (disableTooltip) {
-      closeInfo("context", value);
-    }
-  }, [disableTooltip]);
-  if ((contextAnnotations == null ? void 0 : contextAnnotations.length) < 1) {
+  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), [t]);
+  if (B(() => {
+    n && p("context", c);
+  }, [n]), (t == null ? void 0 : t.length) < 1)
     return null;
-  }
-  const icons = [];
-  if (additionalIcons.length) {
-    Object.entries(groupBy(additionalIcons, "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,
+  const f = [];
+  s.length && Object.entries(O(s, "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,
               {
-                icon,
-                fontSize: otherProps.fontSize ?? "1.25em",
-                style: { filter: "drop-shadow(0px 0px 1px rgb(0 0 0 / 0.4))", ...otherProps.style ?? {} },
-                ...otherProps
+                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
-        )
+          }),
+          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
       )
-    );
-  }
-  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);
+    )
+  );
+  const d = t.length - s.length;
+  return d > 0 && y && f.push(
+    /* @__PURE__ */ o(E, { disabled: !I, 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 });
+}, H = j(R);
 export {
-  ContextIcon$1 as default
+  H as default
 };