@cccsaurora/clue-ui 1.0.2 → 1.1.0-dev.10

package/components/display/markdown/markdownPlugins/tabs.js

@@ -1,4 +1,4 @@
-import { c } from "../../../../tabs-CgADNA57.js";
+import { c } from "../../../../tabs-xGuUGsJd.js";
 export {
   c as codeTabs
 };

package/components/enrichment/EnrichPopover.js

@@ -1,80 +1,88 @@
-import { jsxs as y, Fragment as C, jsx as e } from "react/jsx-runtime";
-import { useTheme as k, Tooltip as S, IconButton as E, CircularProgress as d, Button as z, Popover as I, Paper as j, Stack as c, Box as P, Typography as B, Divider as O } from "@mui/material";
-import { useClueComponentSelector as T, useClueEnrichSelector as p } from "../../hooks/selectors.js";
-import { c as w } from "../../ActionForm-BtTv0s4P.js";
-import { useState as m, useRef as M, useCallback as D, useEffect as F } from "react";
-import g from "../display/icons/Iconified.js";
-const J = ({ show: t = !1, size: b = "small", selector: n }) => {
-  const { t: s } = T((i) => i.i18next), h = k(), l = p((i) => i.availableSources), u = p((i) => i.enrich), [x, o] = m(t), [r, f] = m(!1), a = M(null), v = D(
-    async (i) => {
-      f(!0);
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useTheme, Tooltip, IconButton, CircularProgress, Button, Popover, Paper, Stack, Box, Typography, Divider } from "@mui/material";
+import { useClueComponentSelector, useClueEnrichSelector } from "../../hooks/selectors.js";
+import { c as capitalize } from "../../ActionForm-D4ryHO0M.js";
+import { useState, useRef, useCallback, useEffect } from "react";
+import Iconified from "../display/icons/Iconified.js";
+const EnrichPopover = ({ show = false, size = "small", selector }) => {
+  const { t } = useClueComponentSelector((ctx) => ctx.i18next);
+  const theme = useTheme();
+  const availableSources = useClueEnrichSelector((ctx) => ctx.availableSources);
+  const _enrich = useClueEnrichSelector((ctx) => ctx.enrich);
+  const [showEnrichMenu, setShowEnrichMenu] = useState(show);
+  const [loading, setLoading] = useState(false);
+  const enrichEl = useRef(null);
+  const enrich = useCallback(
+    async (_source) => {
+      setLoading(true);
       try {
-        await u(n.type, n.value, {
-          classification: n.classification,
+        await _enrich(selector.type, selector.value, {
+          classification: selector.classification,
           timeout: 30,
-          force: !0,
-          noCache: !0,
-          sources: [i],
-          append: !0
+          force: true,
+          noCache: true,
+          sources: [_source],
+          append: true
         });
       } finally {
-        f(!1);
+        setLoading(false);
       }
     },
-    [u, n.classification, n.type, n.value]
+    [_enrich, selector.classification, selector.type, selector.value]
   );
-  return F(() => {
-    o(t);
-  }, [t]), /* @__PURE__ */ y(C, { children: [
-    b === "small" ? /* @__PURE__ */ e(S, { ref: a, title: s("enrich"), children: /* @__PURE__ */ e("span", { style: { alignSelf: "center" }, children: /* @__PURE__ */ e(
-      E,
+  useEffect(() => {
+    setShowEnrichMenu(show);
+  }, [show]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    size === "small" ? /* @__PURE__ */ jsx(Tooltip, { ref: enrichEl, title: t("enrich"), children: /* @__PURE__ */ jsx("span", { style: { alignSelf: "center" }, children: /* @__PURE__ */ jsx(
+      IconButton,
       {
-        onClick: () => o(!0),
-        disabled: Object.keys(l).length < 1 || r,
+        onClick: () => setShowEnrichMenu(true),
+        disabled: Object.keys(availableSources).length < 1 || loading,
         color: "info",
-        children: r ? /* @__PURE__ */ e(d, { color: "info", size: "24px" }) : /* @__PURE__ */ e(g, { icon: "ic:baseline-auto-fix-high" })
+        children: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "info", size: "24px" }) : /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-auto-fix-high" })
       }
-    ) }) }) : /* @__PURE__ */ e(
-      z,
+    ) }) }) : /* @__PURE__ */ jsx(
+      Button,
       {
-        ref: a,
+        ref: enrichEl,
         variant: "outlined",
         color: "info",
-        disabled: Object.keys(l).length < 1 || r,
-        startIcon: r ? /* @__PURE__ */ e(d, { color: "info", size: "20px" }) : /* @__PURE__ */ e(g, { icon: "ic:baseline-auto-fix-high" }),
+        disabled: Object.keys(availableSources).length < 1 || loading,
+        startIcon: loading ? /* @__PURE__ */ jsx(CircularProgress, { color: "info", size: "20px" }) : /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-auto-fix-high" }),
         sx: { alignSelf: "stretch" },
-        onClick: () => o(!0),
-        children: s("enrich")
+        onClick: () => setShowEnrichMenu(true),
+        children: t("enrich")
       }
     ),
-    /* @__PURE__ */ e(
-      I,
+    /* @__PURE__ */ jsx(
+      Popover,
       {
         sx: { zIndex: 2e3 },
-        open: x,
-        disablePortal: !0,
-        onClose: () => o(!1),
-        anchorEl: a.current,
+        open: showEnrichMenu,
+        disablePortal: true,
+        onClose: () => setShowEnrichMenu(false),
+        anchorEl: enrichEl.current,
         anchorOrigin: { horizontal: "left", vertical: "bottom" },
-        children: /* @__PURE__ */ e(j, { onClick: () => o(!1), children: /* @__PURE__ */ e(c, { divider: /* @__PURE__ */ e(O, { flexItem: !0, orientation: "horizontal" }), children: l.map((i) => /* @__PURE__ */ e(
-          P,
+        children: /* @__PURE__ */ jsx(Paper, { onClick: () => setShowEnrichMenu(false), children: /* @__PURE__ */ jsx(Stack, { divider: /* @__PURE__ */ jsx(Divider, { flexItem: true, orientation: "horizontal" }), children: availableSources.map((_source) => /* @__PURE__ */ jsx(
+          Box,
           {
             sx: {
               px: 3,
               py: 1,
               cursor: "pointer",
-              transition: h.transitions.create("background-color"),
-              "&:hover": { backgroundColor: h.palette.background.default }
+              transition: theme.transitions.create("background-color"),
+              "&:hover": { backgroundColor: theme.palette.background.default }
             },
-            onClick: () => v(i),
-            children: /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(c, { direction: "row", spacing: 1, alignItems: "center", children: /* @__PURE__ */ e(B, { variant: "body1", children: i.split("-").map(w).join(" ") }) }) })
+            onClick: () => enrich(_source),
+            children: /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(Stack, { direction: "row", spacing: 1, alignItems: "center", children: /* @__PURE__ */ jsx(Typography, { variant: "body1", children: _source.split("-").map(capitalize).join(" ") }) }) })
           },
-          i
+          _source
         )) }) })
       }
     )
   ] });
 };
 export {
-  J as default
+  EnrichPopover as default
 };

package/components/fetchers/Fetcher.js

@@ -1,77 +1,104 @@
-import { jsx as e, jsxs as m } from "react/jsx-runtime";
-import { I } from "../../iconify-BBckr5AQ.js";
-import { useTheme as J, Skeleton as A, Chip as N, Tooltip as z, Paper as O, Stack as x, Box as D, IconButton as E } from "@mui/material";
-import { F } from "../../FlexOne-BXWFOd1T.js";
-import w from "../display/icons/Iconified.js";
-import { J as G } from "../../index-CnaCBNrd.js";
-import { ClueComponentContext as H } from "../../hooks/ClueComponentContext.js";
-import { useClueFetcherSelector as g } from "../../hooks/selectors.js";
-import L, { useState as s, useEffect as V, memo as W } from "react";
-import { u as $ } from "../../index-E7g8cRyW.js";
-import q from "../display/graph/index.js";
-import K from "../display/markdown/index.js";
-import Q from "./PreviewModal.js";
-import U from "./StatusChip.js";
-const X = L.memo(
+import { jsx, jsxs } from "react/jsx-runtime";
+import { I as Icon } from "../../iconify-CXMreGTg.js";
+import { useTheme, Skeleton, Chip, Tooltip, Paper, Stack, Box, IconButton } from "@mui/material";
+import { F as FlexOne } from "../../FlexOne-BSYAhhtG.js";
+import Iconified from "../display/icons/Iconified.js";
+import { J as JSONViewer } from "../../index-BMxyILVD.js";
+import { ClueComponentContext } from "../../hooks/ClueComponentContext.js";
+import { useClueFetcherSelector } from "../../hooks/selectors.js";
+import React__default, { useState, useEffect, memo } from "react";
+import { u as useContextSelector } from "../../index-BDVjGvMI.js";
+import Graph from "../display/graph/index.js";
+import Markdown from "../display/markdown/index.js";
+import PreviewModal from "./PreviewModal.js";
+import StatusChip from "./StatusChip.js";
+const Fetcher = React__default.memo(
   ({
-    type: c,
-    value: f,
-    classification: h,
-    fetcherId: a,
+    type,
+    value,
+    classification,
+    fetcherId,
     slotProps: {
-      paper: t = {},
-      preview: j = {},
-      stack: r = {},
-      image: M = {},
-      chip: C = {},
-      skeleton: n = {}
+      paper: paperProps = {},
+      preview: previewProps = {},
+      stack: stackProps = {},
+      image: imageProps = {},
+      chip: chipProps = {},
+      skeleton: skeletonProps = {}
     } = {}
   }) => {
-    var v;
-    const l = J(), u = g((o) => o.fetchers), y = g((o) => o.fetchSelector), R = g((o) => o.fetchCompleted), { t: d } = $(H, (o) => o == null ? void 0 : o.i18next), [i, _] = s(null), [B, S] = s(!0), [T, b] = s(!1);
-    if (V(() => {
+    var _a;
+    const theme = useTheme();
+    const fetchers = useClueFetcherSelector((ctx) => ctx.fetchers);
+    const fetchSelector = useClueFetcherSelector((ctx) => ctx.fetchSelector);
+    const fetchCompleted = useClueFetcherSelector((ctx) => ctx.fetchCompleted);
+    const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx == null ? void 0 : ctx.i18next);
+    const [result, setResult] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [showPreview, setShowPreview] = useState(false);
+    useEffect(() => {
       (async () => {
         try {
-          S(!0), _(await y(a, { type: c, value: f, classification: h }));
+          setLoading(true);
+          setResult(await fetchSelector(fetcherId, { type, value, classification }));
         } finally {
-          S(!1);
+          setLoading(false);
         }
       })();
-    }, [h, y, a, c, f]), R)
-      if (a)
-        if (a.includes(".")) {
-          if (!(a in u))
-            return console.warn("Fetcher ID does not correspond to a registered fetcher. Component will not render."), null;
-        } else return console.warn(
+    }, [classification, fetchSelector, fetcherId, type, value]);
+    if (fetchCompleted) {
+      if (!fetcherId) {
+        console.warn("Missing fetcher Id. Component will not render.");
+        return null;
+      } else if (!fetcherId.includes(".")) {
+        console.warn(
           "Invalid fetcher id. Must be in the format '<plugin_id>.<fetcher_id>'. Component will not render."
-        ), null;
-      else return console.warn("Missing fetcher Id. Component will not render."), null;
-    else
-      return null;
-    return B ? ((v = u[a]) == null ? void 0 : v.format) === "status" ? /* @__PURE__ */ e(
-      A,
-      {
-        variant: "rounded",
-        height: "32px",
-        width: "150px",
-        ...n,
-        sx: [
-          { borderRadius: "16px" },
-          ...Array.isArray(n == null ? void 0 : n.sx) ? n == null ? void 0 : n.sx : [n == null ? void 0 : n.sx]
-        ]
+        );
+        return null;
+      } else if (!(fetcherId in fetchers)) {
+        console.warn("Fetcher ID does not correspond to a registered fetcher. Component will not render.");
+        return null;
       }
-    ) : /* @__PURE__ */ e(A, { variant: "rounded", height: "325px", width: "300px", ...n }) : (i == null ? void 0 : i.outcome) === "failure" && u[a].format === "status" ? /* @__PURE__ */ e(
-      N,
-      {
-        icon: /* @__PURE__ */ e(z, { title: i.error, children: /* @__PURE__ */ e(I, { icon: "mdi:information-outline", fontSize: "1.25rem" }) }),
-        label: d("error"),
-        color: "error",
-        ...C
+    } else {
+      return null;
+    }
+    if (loading) {
+      if (((_a = fetchers[fetcherId]) == null ? void 0 : _a.format) === "status") {
+        return /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rounded",
+            height: "32px",
+            width: "150px",
+            ...skeletonProps,
+            sx: [
+              { borderRadius: "16px" },
+              ...Array.isArray(skeletonProps == null ? void 0 : skeletonProps.sx) ? skeletonProps == null ? void 0 : skeletonProps.sx : [skeletonProps == null ? void 0 : skeletonProps.sx]
+            ]
+          }
+        );
+      } else {
+        return /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", height: "325px", width: "300px", ...skeletonProps });
       }
-    ) : (i == null ? void 0 : i.format) === "status" ? /* @__PURE__ */ e(U, { data: i.data, ...C }) : /* @__PURE__ */ e(
-      O,
+    }
+    if ((result == null ? void 0 : result.outcome) === "failure" && fetchers[fetcherId].format === "status") {
+      return /* @__PURE__ */ jsx(
+        Chip,
+        {
+          icon: /* @__PURE__ */ jsx(Tooltip, { title: result.error, children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:information-outline", fontSize: "1.25rem" }) }),
+          label: t("error"),
+          color: "error",
+          ...chipProps
+        }
+      );
+    }
+    if ((result == null ? void 0 : result.format) === "status") {
+      return /* @__PURE__ */ jsx(StatusChip, { data: result.data, ...chipProps });
+    }
+    return /* @__PURE__ */ jsx(
+      Paper,
       {
-        ...t,
+        ...paperProps,
         sx: [
           {
             p: 1,
@@ -80,16 +107,16 @@ const X = L.memo(
             width: "100%",
             minWidth: "300px"
           },
-          ...Array.isArray(t == null ? void 0 : t.sx) ? t == null ? void 0 : t.sx : [t == null ? void 0 : t.sx]
+          ...Array.isArray(paperProps == null ? void 0 : paperProps.sx) ? paperProps == null ? void 0 : paperProps.sx : [paperProps == null ? void 0 : paperProps.sx]
         ],
-        children: /* @__PURE__ */ m(
-          x,
+        children: /* @__PURE__ */ jsxs(
+          Stack,
           {
             sx: {
               "& > img": {
                 borderRadius: "3px",
                 cursor: "zoom-in",
-                transition: l.transitions.create("border-color", { duration: l.transitions.duration.shortest }),
+                transition: theme.transitions.create("border-color", { duration: theme.transitions.duration.shortest }),
                 border: "3px solid transparent",
                 "&:hover": {
                   borderColor: "primary.main"
@@ -97,64 +124,65 @@ const X = L.memo(
               }
             },
             children: [
-              (i == null ? void 0 : i.outcome) === "failure" && /* @__PURE__ */ e("code", { style: { color: l.palette.error.main }, children: /* @__PURE__ */ e("pre", { style: { marginTop: 0, marginBottom: 0 }, children: i.error }) }),
-              (i == null ? void 0 : i.format) === "markdown" && /* @__PURE__ */ e(K, { md: i.data }),
-              (i == null ? void 0 : i.format) === "image" && /* @__PURE__ */ e("img", { src: i.data.image, alt: i.data.alt, ...M, onClick: () => b(!0) }),
-              (i == null ? void 0 : i.format) === "json" && /* @__PURE__ */ e(D, { sx: { ".react-json-view": { backgroundColor: "transparent !important" } }, children: /* @__PURE__ */ e(G, { data: i.data }) }),
-              (i == null ? void 0 : i.format) === "graph" && /* @__PURE__ */ e(q, { graph: i.data, sx: { minHeight: "600px" } }),
-              /* @__PURE__ */ e(F, {}),
-              /* @__PURE__ */ m(
-                x,
+              (result == null ? void 0 : result.outcome) === "failure" && /* @__PURE__ */ jsx("code", { style: { color: theme.palette.error.main }, children: /* @__PURE__ */ jsx("pre", { style: { marginTop: 0, marginBottom: 0 }, children: result.error }) }),
+              (result == null ? void 0 : result.format) === "markdown" && /* @__PURE__ */ jsx(Markdown, { md: result.data }),
+              (result == null ? void 0 : result.format) === "image" && /* @__PURE__ */ jsx("img", { src: result.data.image, alt: result.data.alt, ...imageProps, onClick: () => setShowPreview(true) }),
+              (result == null ? void 0 : result.format) === "json" && /* @__PURE__ */ jsx(Box, { sx: { ".react-json-view": { backgroundColor: "transparent !important" } }, children: /* @__PURE__ */ jsx(JSONViewer, { data: result.data }) }),
+              (result == null ? void 0 : result.format) === "graph" && /* @__PURE__ */ jsx(Graph, { graph: result.data, sx: { minHeight: "600px" } }),
+              /* @__PURE__ */ jsx(FlexOne, {}),
+              /* @__PURE__ */ jsxs(
+                Stack,
                 {
                   direction: "row",
                   spacing: 1,
-                  ...r,
+                  ...stackProps,
                   sx: [
                     {
-                      py: l.spacing(0.5),
+                      py: theme.spacing(0.5),
                       display: "flex",
                       alignItems: "center"
                     },
-                    ...Array.isArray(r == null ? void 0 : r.sx) ? r == null ? void 0 : r.sx : [r == null ? void 0 : r.sx]
+                    ...Array.isArray(stackProps == null ? void 0 : stackProps.sx) ? stackProps == null ? void 0 : stackProps.sx : [stackProps == null ? void 0 : stackProps.sx]
                   ],
                   children: [
-                    /* @__PURE__ */ e(w, { icon: "ic:baseline-landscape", color: "primary", fontSize: "small" }),
-                    /* @__PURE__ */ e(
-                      z,
+                    /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-landscape", color: "primary", fontSize: "small" }),
+                    /* @__PURE__ */ jsx(
+                      Tooltip,
                       {
-                        title: /* @__PURE__ */ m(x, { spacing: 0.5, children: [
-                          /* @__PURE__ */ m("span", { children: [
-                            d("type"),
+                        title: /* @__PURE__ */ jsxs(Stack, { spacing: 0.5, children: [
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("type"),
                             ": ",
-                            c
+                            type
                           ] }),
-                          /* @__PURE__ */ m("span", { children: [
-                            d("value"),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("value"),
                             ": ",
-                            f
+                            value
                           ] }),
-                          /* @__PURE__ */ m("span", { children: [
-                            d("classification"),
+                          /* @__PURE__ */ jsxs("span", { children: [
+                            t("classification"),
                             ": ",
-                            h ?? "N/A"
+                            classification ?? "N/A"
                           ] })
                         ] }),
-                        children: /* @__PURE__ */ e(w, { icon: "ic:outline-info", fontSize: "small" })
+                        children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:outline-info", fontSize: "small" })
                       }
                     ),
-                    /* @__PURE__ */ e(F, {}),
-                    (i == null ? void 0 : i.link) && /* @__PURE__ */ e(E, { size: "small", component: "a", href: i.link, children: /* @__PURE__ */ e(w, { icon: "ic:baseline-open-in-new", fontSize: "small" }) })
+                    /* @__PURE__ */ jsx(FlexOne, {}),
+                    (result == null ? void 0 : result.link) && /* @__PURE__ */ jsx(IconButton, { size: "small", component: "a", href: result.link, children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:baseline-open-in-new", fontSize: "small" }) })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(Q, { ...j, open: T, result: i, onClose: () => b(!1) })
+              /* @__PURE__ */ jsx(PreviewModal, { ...previewProps, open: showPreview, result, onClose: () => setShowPreview(false) })
             ]
           }
         )
       }
     );
   }
-), di = W(X);
+);
+const Fetcher$1 = memo(Fetcher);
 export {
-  di as default
+  Fetcher$1 as default
 };

package/components/fetchers/PreviewModal.js

@@ -1,19 +1,22 @@
-import { jsx as m } from "react/jsx-runtime";
-import { Modal as n, Paper as f } from "@mui/material";
-import { memo as l } from "react";
-const c = ({ result: i, onClose: d, open: x = !1, ...a }) => /* @__PURE__ */ m(
-  n,
-  {
-    open: x,
-    sx: [
-      { display: "flex", alignItems: "center", justifyContent: "center" },
-      ...Array.isArray(a == null ? void 0 : a.sx) ? a == null ? void 0 : a.sx : [a == null ? void 0 : a.sx]
-    ],
-    onClose: d,
-    ...a,
-    children: /* @__PURE__ */ m(f, { sx: { maxHeight: "90%", maxWidth: "90%", p: 2, overflow: "auto" }, children: (i == null ? void 0 : i.format) === "image" && /* @__PURE__ */ m("img", { src: i.data.image, alt: i.data.alt, style: { maxWidth: "100%" } }) })
-  }
-), t = l(c);
+import { jsx } from "react/jsx-runtime";
+import { Modal, Paper } from "@mui/material";
+import { memo } from "react";
+const PreviewModal = ({ result, onClose, open = false, ...otherProps }) => {
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      sx: [
+        { display: "flex", alignItems: "center", justifyContent: "center" },
+        ...Array.isArray(otherProps == null ? void 0 : otherProps.sx) ? otherProps == null ? void 0 : otherProps.sx : [otherProps == null ? void 0 : otherProps.sx]
+      ],
+      onClose,
+      ...otherProps,
+      children: /* @__PURE__ */ jsx(Paper, { sx: { maxHeight: "90%", maxWidth: "90%", p: 2, overflow: "auto" }, children: (result == null ? void 0 : result.format) === "image" && /* @__PURE__ */ jsx("img", { src: result.data.image, alt: result.data.alt, style: { maxWidth: "100%" } }) })
+    }
+  );
+};
+const PreviewModal$1 = memo(PreviewModal);
 export {
-  t as default
+  PreviewModal$1 as default
 };

package/components/fetchers/StatusChip.js

@@ -1,26 +1,30 @@
-import { jsx as l } from "react/jsx-runtime";
-import { I as r } from "../../iconify-BBckr5AQ.js";
-import { useTheme as f, Chip as x } from "@mui/material";
-import { ClueComponentContext as g } from "../../hooks/ClueComponentContext.js";
-import { u as s } from "../../index-E7g8cRyW.js";
-const S = ({ data: e, ...n }) => {
-  var t;
-  const m = f(), { i18n: i, t: u } = s(g, (o) => o.i18next);
-  return e != null && e.empty ? null : /* @__PURE__ */ l(
-    x,
+import { jsx } from "react/jsx-runtime";
+import { I as Icon } from "../../iconify-CXMreGTg.js";
+import { useTheme, Chip } from "@mui/material";
+import { ClueComponentContext } from "../../hooks/ClueComponentContext.js";
+import { u as useContextSelector } from "../../index-BDVjGvMI.js";
+const StatusChip = ({ data, ...chipProps }) => {
+  var _a;
+  const theme = useTheme();
+  const { i18n, t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
+  if (data == null ? void 0 : data.empty) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    Chip,
     {
-      icon: e.icon && /* @__PURE__ */ l(r, { icon: e.icon, fontSize: "1.25rem" }),
-      deleteIcon: /* @__PURE__ */ l("a", { href: e.link, rel: "noreferrer", target: "_blank", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ l(r, { icon: "mdi:open-in-new", color: m.palette.text.primary, fontSize: "1.25rem" }) }),
-      ...n,
-      onDelete: e.link ? () => console.log("Navigating to %s", e.link) : null,
-      label: ((t = e.labels.find((o) => o.language === i.language) ?? e.labels[0]) == null ? void 0 : t.label) ?? u("unknown"),
+      icon: data.icon && /* @__PURE__ */ jsx(Icon, { icon: data.icon, fontSize: "1.25rem" }),
+      deleteIcon: /* @__PURE__ */ jsx("a", { href: data.link, rel: "noreferrer", target: "_blank", style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(Icon, { icon: "mdi:open-in-new", color: theme.palette.text.primary, fontSize: "1.25rem" }) }),
+      ...chipProps,
+      onDelete: data.link ? () => console.log("Navigating to %s", data.link) : null,
+      label: ((_a = data.labels.find((label) => label.language === i18n.language) ?? data.labels[0]) == null ? void 0 : _a.label) ?? t("unknown"),
       sx: [
-        ...Array.isArray(n == null ? void 0 : n.sx) ? n == null ? void 0 : n.sx : [n == null ? void 0 : n.sx],
-        e.color && { backgroundColor: e.color }
+        ...Array.isArray(chipProps == null ? void 0 : chipProps.sx) ? chipProps == null ? void 0 : chipProps.sx : [chipProps == null ? void 0 : chipProps.sx],
+        data.color && { backgroundColor: data.color }
       ]
     }
   );
 };
 export {
-  S as default
+  StatusChip as default
 };

package/components/group/Entry.js

@@ -1,13 +1,15 @@
-import { ClueGroupContext as s } from "../../hooks/ClueGroupContext.js";
-import { i as u } from "../../utils-CD0rFIFU.js";
-import { memo as i, useEffect as a } from "react";
-import { u as n } from "../../index-E7g8cRyW.js";
-const p = ({ children: e, entry: t, selected: m = !1 }) => {
-  const r = n(s, (o) => o == null ? void 0 : o.setValues);
-  return a(() => {
-    r == null || r((o) => [...o.filter((f) => !u(f, t)), ...m ? [t] : []]);
-  }, [t, m, r]), e;
-}, G = i(p);
+import { ClueGroupContext } from "../../hooks/ClueGroupContext.js";
+import { i as isEqual } from "../../utils-Dr4wbKBZ.js";
+import { memo, useEffect } from "react";
+import { u as useContextSelector } from "../../index-BDVjGvMI.js";
+const Entry = ({ children, entry, selected = false }) => {
+  const setValues = useContextSelector(ClueGroupContext, (ctx) => ctx == null ? void 0 : ctx.setValues);
+  useEffect(() => {
+    setValues == null ? void 0 : setValues((_values) => [..._values.filter((value) => !isEqual(value, entry)), ...selected ? [entry] : []]);
+  }, [entry, selected, setValues]);
+  return children;
+};
+const Entry$1 = memo(Entry);
 export {
-  G as default
+  Entry$1 as default
 };

package/components/group/Group.js

@@ -1,12 +1,15 @@
-import { jsx as m, jsxs as i } from "react/jsx-runtime";
-import { Stack as u } from "@mui/material";
-import { ClueGroupProvider as c } from "../../hooks/ClueGroupContext.js";
-import { memo as n } from "react";
-import f from "./GroupControl.js";
-const p = ({ children: o, showHeader: t = !0, slotProps: r, ...e }) => /* @__PURE__ */ m(c, { ...e, children: t ? /* @__PURE__ */ i(u, { direction: "column", alignSelf: "stretch", ...(r == null ? void 0 : r.stack) ?? {}, children: [
-  /* @__PURE__ */ m(f, {}),
-  o
-] }) : o }), h = n(p);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Stack } from "@mui/material";
+import { ClueGroupProvider } from "../../hooks/ClueGroupContext.js";
+import { memo } from "react";
+import GroupControl from "./GroupControl.js";
+const Group = ({ children, showHeader = true, slotProps, ...groupProps }) => {
+  return /* @__PURE__ */ jsx(ClueGroupProvider, { ...groupProps, children: showHeader ? /* @__PURE__ */ jsxs(Stack, { direction: "column", alignSelf: "stretch", ...(slotProps == null ? void 0 : slotProps.stack) ?? {}, children: [
+    /* @__PURE__ */ jsx(GroupControl, {}),
+    children
+  ] }) : children });
+};
+const Group$1 = memo(Group);
 export {
-  h as default
+  Group$1 as default
 };