@cccsaurora/clue-ui 0.15.0-dev.28 → 0.15.0-dev.30

package/components/ClassificationChip.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+interface EnrichedChipProps {
+    classification: string;
+}
+declare const _default: React.NamedExoticComponent<EnrichedChipProps & import('@mui/material').ChipOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "disabled" | "icon" | "color" | "style" | "size" | "children" | "variant" | "classes" | "className" | "sx" | "label" | "tabIndex" | "onDelete" | "avatar" | "clickable" | "deleteIcon" | "skipFocusWhenDisabled"> & {
+    component?: React.ElementType;
+}>;
+export default _default;

package/components/ClassificationChip.js

@@ -0,0 +1,52 @@
+import { jsx } from "react/jsx-runtime";
+import { Tooltip, Chip } from "@mui/material";
+import useClueConfig from "../hooks/useClueConfig.js";
+import { getParts, normalizedClassification } from "../utils/classificationParser.js";
+import React__default, { useMemo, memo } from "react";
+const THEME_TYPES = ["default", "primary", "secondary", "error", "info", "success", "warning"];
+const ClassificationChip = React__default.memo(
+  ({ classification, ...otherProps }) => {
+    var _a, _b;
+    const { config } = useClueConfig();
+    const parts = useMemo(() => {
+      if (!config.c12nDef) {
+        return null;
+      }
+      return getParts(classification, config.c12nDef, "short", true);
+    }, [classification, config.c12nDef]);
+    const normalized = useMemo(() => {
+      if (!config.c12nDef || !parts) {
+        return classification;
+      }
+      return normalizedClassification(parts, config.c12nDef, "short", true);
+    }, [classification, config.c12nDef, parts]);
+    const chipProps = useMemo(() => {
+      var _a2, _b2, _c;
+      const definedColor = (_c = (_b2 = config.c12nDef) == null ? void 0 : _b2.levels_styles_map[(_a2 = config.c12nDef) == null ? void 0 : _a2.levels_map[parts.lvlIdx]]) == null ? void 0 : _c.color;
+      if (THEME_TYPES.includes(definedColor)) {
+        return { color: definedColor };
+      }
+      if (definedColor) {
+        return { sx: { color: definedColor } };
+      }
+      return { color: "default" };
+    }, [(_a = config.c12nDef) == null ? void 0 : _a.levels_map, (_b = config.c12nDef) == null ? void 0 : _b.levels_styles_map, parts.lvlIdx]);
+    return /* @__PURE__ */ jsx(Tooltip, { title: classification, children: /* @__PURE__ */ jsx(
+      Chip,
+      {
+        variant: otherProps.variant || "outlined",
+        label: normalized,
+        ...chipProps,
+        ...otherProps,
+        sx: [
+          ...Array.isArray(chipProps.sx) ? chipProps.sx : [chipProps.sx],
+          ...Array.isArray(otherProps.sx) ? otherProps.sx : [otherProps.sx]
+        ]
+      }
+    ) });
+  }
+);
+const ClassificationChip$1 = memo(ClassificationChip);
+export {
+  ClassificationChip$1 as default
+};

package/components/CountBadge.d.ts

@@ -0,0 +1,8 @@
+declare const CountBadge: import('react').ForwardRefExoticComponent<{
+    color?: "error" | "secondary" | "default" | "primary" | "info" | "success" | "warning";
+    count: number;
+    disabled?: boolean;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export default CountBadge;

package/components/CountBadge.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Badge } from "@mui/material";
+import { forwardRef, cloneElement, Children } from "react";
+const CountBadge = forwardRef(({ children, color = "primary", count, disabled, ...props }, ref) => {
+  if (disabled) {
+    return cloneElement(Children.only(children), { ref, ...props });
+  }
+  return /* @__PURE__ */ jsx(
+    Badge,
+    {
+      ref,
+      ...props,
+      badgeContent: count < 100 ? count : "99+",
+      color,
+      sx: (theme) => ({
+        "& .MuiBadge-badge": {
+          backgroundColor: "transparent",
+          color: theme.palette[color].main,
+          fontWeight: "bold",
+          right: 0,
+          top: 0,
+          transform: `translateY(-25%) translateX(${Math.min(Math.ceil(Math.log10(count)), 3) * 10}%)`,
+          px: 0,
+          fontSize: ".85rem"
+        },
+        pr: 1.5
+      }),
+      children
+    }
+  );
+});
+export {
+  CountBadge as default
+};

package/components/EnrichedCard.d.ts

@@ -0,0 +1,14 @@
+export interface EnrichedCardProps {
+    type: string;
+    value: string;
+    classification?: string;
+    contextIcon?: boolean;
+    counters?: boolean;
+    hideLoading?: boolean;
+}
+declare const _default: import('react').NamedExoticComponent<EnrichedCardProps & import('@mui/material').CardOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLDivElement>;
+}, "style" | "square" | "children" | "variant" | "classes" | "className" | "sx" | "elevation" | "raised"> & {
+    component?: React.ElementType;
+}>;
+export default _default;

package/components/EnrichedCard.js

@@ -0,0 +1,162 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { I as Icon } from "../iconify-CXMreGTg.js";
+import { useTheme, Card, CardHeader, Stack, CircularProgress, Divider, CardContent, Grid, Chip, Typography, Tooltip, Box } from "@mui/material";
+import { ClueComponentContext } from "../hooks/ClueComponentContext.js";
+import { useClueEnrichSelector } from "../hooks/selectors.js";
+import useAnnotations from "../hooks/useAnnotations.js";
+import useErrors from "../hooks/useErrors.js";
+import AssessmentIcon from "../icons/Assessment.js";
+import ContextIcon from "../icons/Context.js";
+import OpinionIcon from "../icons/Opinion.js";
+import { ICON_MAP } from "../icons/iconMap.js";
+import FrequencyText from "../text/Frequency.js";
+import { memo, useState, useMemo, useCallback } from "react";
+import { u as useContextSelector } from "../index-BDVjGvMI.js";
+import AnnotationEntry from "./AnnotationEntry.js";
+import { u as uniq } from "../ClueEnrichContext-DXwLVp0M.js";
+const EnrichedCard = ({
+  type,
+  value,
+  classification: _classification,
+  contextIcon = false,
+  counters = false,
+  hideLoading = false,
+  ...otherProps
+}) => {
+  const theme = useTheme();
+  const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
+  const defaultClassification = useClueEnrichSelector((ctx) => ctx.defaultClassification);
+  const enrich = useClueEnrichSelector((state) => state.enrich);
+  const [filter, setFilter] = useState("all");
+  const classification = useMemo(
+    () => _classification ?? defaultClassification,
+    [_classification, defaultClassification]
+  );
+  const [annotations, loading] = useAnnotations(type, value, classification);
+  const errors = useErrors(value);
+  const options = useMemo(() => ["all", ...uniq(annotations.map((annotation) => annotation.type))], [annotations]);
+  const forceEnrich = useCallback(() => {
+    return enrich(type, value, {
+      classification,
+      timeout: 15,
+      force: true
+    });
+  }, [classification, enrich, type, value]);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      sx: [
+        {
+          maxWidth: "900px"
+        },
+        ...Array.isArray(otherProps == null ? void 0 : otherProps.sx) ? otherProps == null ? void 0 : otherProps.sx : [otherProps == null ? void 0 : otherProps.sx]
+      ],
+      ...otherProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            title: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(FrequencyText, { annotations, value, variant: "h6" }),
+              /* @__PURE__ */ jsx(
+                AssessmentIcon,
+                {
+                  value: { type, value, classification },
+                  annotations,
+                  counters,
+                  fontSize: "1em",
+                  disableTooltip: true
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                OpinionIcon,
+                {
+                  value: { type, value, classification },
+                  annotations,
+                  counters,
+                  fontSize: "1em",
+                  disableTooltip: true
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ContextIcon,
+                {
+                  value: { type, value, classification },
+                  annotations,
+                  counters,
+                  showExtraIcon: contextIcon,
+                  fontSize: "inherit",
+                  disableTooltip: true
+                }
+              ),
+              loading && !hideLoading && /* @__PURE__ */ jsx(CircularProgress, { color: "primary", size: 18 })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { sx: { mx: 1 } }),
+        /* @__PURE__ */ jsxs(CardContent, { sx: { p: 1 }, children: [
+          /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 0.5, sx: { mb: 1 }, children: [
+            options.map((opt, id) => (
+              // eslint-disable-next-line react/no-array-index-key
+              /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+                Chip,
+                {
+                  size: "small",
+                  variant: opt === filter ? "filled" : "outlined",
+                  icon: ICON_MAP[opt] && /* @__PURE__ */ jsx(Icon, { icon: ICON_MAP[opt] }),
+                  label: /* @__PURE__ */ jsxs(Typography, { variant: "caption", textTransform: "capitalize", children: [
+                    opt,
+                    ":",
+                    " ",
+                    opt === "all" ? annotations.length : annotations.filter((annotation) => annotation.type === opt).length
+                  ] }),
+                  onClick: () => setFilter(opt)
+                }
+              ) }, id)
+            )),
+            (errors == null ? void 0 : errors.length) > 0 && /* @__PURE__ */ jsx(Grid, { item: true, children: /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: /* @__PURE__ */ jsx("div", { onClick: (e) => e.stopPropagation(), children: errors.map((err) => /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { style: { textTransform: "capitalize" }, children: err.source.replace(/-/g, " ") }),
+                  ":",
+                  " ",
+                  err.message
+                ] }, err.source)) }),
+                children: /* @__PURE__ */ jsx(
+                  Chip,
+                  {
+                    size: "small",
+                    variant: "outlined",
+                    icon: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "material-symbols:timer-outline",
+                        color: theme.palette.error.main,
+                        style: { filter: "drop-shadow(0px 0px 1px rgb(0 0 0 / 0.4))" }
+                      }
+                    ),
+                    label: /* @__PURE__ */ jsxs(Typography, { variant: "caption", textTransform: "capitalize", children: [
+                      t("annotation.failed"),
+                      ": ",
+                      errors.length
+                    ] }),
+                    onClick: forceEnrich
+                  }
+                )
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(Grid, { container: true, spacing: 1, alignItems: "stretch", children: annotations.map((annotation, id) => (
+            // eslint-disable-next-line react/no-array-index-key
+            /* @__PURE__ */ jsx(Grid, { item: true, xs: 6, minWidth: "300px", children: /* @__PURE__ */ jsx(Box, { sx: { border: `thin solid ${theme.palette.divider}`, p: 1, height: "100%" }, children: /* @__PURE__ */ jsx(AnnotationEntry, { annotation }) }) }, id)
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+const EnrichedCard$1 = memo(EnrichedCard);
+export {
+  EnrichedCard$1 as default
+};

package/components/EnrichedChip.d.ts

@@ -0,0 +1,9 @@
+import { default as EnrichmentProps } from "../types/EnrichmentProps";
+import { default as React } from 'react';
+
+declare const _default: React.NamedExoticComponent<EnrichmentProps & import('@mui/material').ChipOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "disabled" | "icon" | "color" | "style" | "size" | "children" | "variant" | "classes" | "className" | "sx" | "label" | "tabIndex" | "onDelete" | "avatar" | "clickable" | "deleteIcon" | "skipFocusWhenDisabled"> & {
+    component?: React.ElementType;
+}>;
+export default _default;

package/components/EnrichedChip.js

@@ -0,0 +1,176 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Chip, Tooltip, Box, Stack, CircularProgress } from "@mui/material";
+import Iconified from "./display/icons/Iconified.js";
+import { ClueComponentContext } from "../hooks/ClueComponentContext.js";
+import { ClueGroupContext } from "../hooks/ClueGroupContext.js";
+import { C as CluePopupContext } from "../AnnotationPreview-BvNpZOP0.js";
+import { useClueEnrichSelector } from "../hooks/selectors.js";
+import useAnnotations from "../hooks/useAnnotations.js";
+import ActionIcon from "../icons/Action.js";
+import AssessmentIcon from "../icons/Assessment.js";
+import ContextIcon from "../icons/Context.js";
+import OpinionIcon from "../icons/Opinion.js";
+import FrequencyText from "../text/Frequency.js";
+import React__default, { useRef, useMemo, useCallback, useEffect, memo } from "react";
+import { u as useContextSelector } from "../index-BDVjGvMI.js";
+const EnrichedChip = React__default.memo(
+  ({
+    type: _type,
+    value,
+    classification: _classification,
+    contextIcon = false,
+    counters = false,
+    hideDetails = false,
+    hideLoading = false,
+    forceDetails = false,
+    setForceDetails = null,
+    useDetailsIcon = false,
+    skipEnrichment = false,
+    slotProps = {},
+    ...otherProps
+  }) => {
+    const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
+    const anchorRef = useRef();
+    const groupType = useContextSelector(ClueGroupContext, (ctx) => ctx == null ? void 0 : ctx.type);
+    const defaultClassification = useClueEnrichSelector((ctx) => ctx.defaultClassification);
+    const type = useMemo(() => _type ?? groupType, [_type, groupType]);
+    const classification = useMemo(
+      () => _classification ?? defaultClassification,
+      [_classification, defaultClassification]
+    );
+    if (!type) {
+      throw new Error("Type was not provided as a prop, and component is not used in a group context.");
+    }
+    const [annotations, loading] = useAnnotations(type, value, classification, { skipEnrichment });
+    const showInfo = useContextSelector(CluePopupContext, (ctx) => ctx.showInfo);
+    const closeInfo = useContextSelector(CluePopupContext, (ctx) => ctx.closeInfo);
+    const buildOptions = useCallback(() => {
+      const options = {};
+      if (setForceDetails) {
+        options.onClose = () => setForceDetails(false);
+      }
+      if (slotProps == null ? void 0 : slotProps.popover) {
+        options.popoverProps = slotProps.popover;
+      }
+      return options;
+    }, [setForceDetails, slotProps.popover]);
+    const clicker = useMemo(
+      () => !loading ? !hideDetails || useDetailsIcon ? (e) => {
+        var _a;
+        showInfo("details", anchorRef.current, { type, value, classification }, buildOptions());
+        (_a = otherProps.onClick) == null ? void 0 : _a.call(otherProps, e);
+        e.stopPropagation();
+        e.preventDefault();
+      } : otherProps.onClick : (
+        // We need to give a dummy callback when loading so the popover doesn't get confused
+        (e) => {
+          var _a;
+          (_a = otherProps.onClick) == null ? void 0 : _a.call(otherProps, e);
+        }
+      ),
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [loading, hideDetails, useDetailsIcon, otherProps, type, value, classification]
+    );
+    useEffect(() => {
+      if (forceDetails) {
+        showInfo("details", anchorRef.current, { type, value, classification }, buildOptions());
+      } else {
+        closeInfo("details", {
+          type,
+          value,
+          classification
+        });
+      }
+    }, [classification, forceDetails, type, value]);
+    return /* @__PURE__ */ jsx(
+      Chip,
+      {
+        ...otherProps,
+        ref: anchorRef,
+        variant: otherProps.variant || "outlined",
+        sx: {
+          height: otherProps.size !== "small" ? "40px" : "unset",
+          "& .MuiChip-label": { overflow: "visible" },
+          ...otherProps.sx ?? {}
+        },
+        label: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+          /* @__PURE__ */ jsx(
+            AssessmentIcon,
+            {
+              ubiquitous: true,
+              value: { type, value, classification },
+              annotations,
+              counters,
+              disableTooltip: forceDetails,
+              style: { flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            OpinionIcon,
+            {
+              ubiquitous: true,
+              value: { type, value, classification },
+              annotations,
+              counters,
+              disableTooltip: forceDetails,
+              style: { flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ContextIcon,
+            {
+              ubiquitous: true,
+              value: { type, value, classification },
+              annotations,
+              counters,
+              showExtraIcon: contextIcon,
+              disableTooltip: forceDetails,
+              style: { flexShrink: 0 }
+            }
+          ),
+          otherProps.label ?? /* @__PURE__ */ jsx(FrequencyText, { fontSize: "inherit", annotations, value }),
+          /* @__PURE__ */ jsx(
+            AssessmentIcon,
+            {
+              value: { type, value, classification },
+              annotations,
+              counters,
+              disableTooltip: forceDetails,
+              style: { flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            OpinionIcon,
+            {
+              value: { type, value, classification },
+              annotations,
+              counters,
+              disableTooltip: forceDetails,
+              style: { flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ContextIcon,
+            {
+              value: { type, value, classification },
+              annotations,
+              counters,
+              showExtraIcon: contextIcon,
+              disableTooltip: forceDetails,
+              style: { flexShrink: 0 }
+            }
+          ),
+          /* @__PURE__ */ jsx(ActionIcon, { counters, value: { type, value, classification }, disableTooltip: forceDetails }),
+          loading && !hideLoading && /* @__PURE__ */ jsx(CircularProgress, { color: "primary", size: 16 })
+        ] }),
+        onClick: !useDetailsIcon ? clicker : void 0,
+        onDelete: !loading && useDetailsIcon ? clicker : void 0,
+        deleteIcon: useDetailsIcon ? /* @__PURE__ */ jsx(Tooltip, { title: t("details.open"), children: /* @__PURE__ */ jsx(Box, { component: "span", sx: { pr: 1 }, children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:outline-info" }) }) }) : null
+      }
+    );
+  }
+);
+const EnrichedChip$1 = memo(EnrichedChip);
+export {
+  EnrichedChip$1 as default
+};

package/components/EnrichedTypography.d.ts

@@ -0,0 +1,16 @@
+import { PopoverProps, PopperProps, StackProps } from '@mui/material';
+import { default as EnrichmentProps } from "../types/EnrichmentProps";
+
+export interface EnrichedTypographyProps extends EnrichmentProps {
+    slotProps?: {
+        stack?: StackProps;
+        popper?: PopperProps;
+        popover?: Omit<PopoverProps, 'open'>;
+    };
+}
+declare const _default: import('react').NamedExoticComponent<EnrichedTypographyProps & import('@mui/material').TypographyOwnProps & import('@mui/material/OverridableComponent').CommonProps & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: import('react').Ref<HTMLSpanElement>;
+}, "fontSize" | "color" | "style" | "left" | "right" | "bottom" | "top" | "flex" | "position" | "border" | "padding" | "children" | "variant" | "classes" | "className" | "margin" | "sx" | "p" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "noWrap" | "paragraph" | "gutterBottom" | "variantMapping"> & {
+    component?: React.ElementType;
+}>;
+export default _default;

package/components/EnrichedTypography.js

@@ -0,0 +1,178 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme, Stack, CircularProgress, Tooltip, IconButton } from "@mui/material";
+import Iconified from "./display/icons/Iconified.js";
+import { ClueComponentContext } from "../hooks/ClueComponentContext.js";
+import { ClueGroupContext } from "../hooks/ClueGroupContext.js";
+import { C as CluePopupContext } from "../AnnotationPreview-BvNpZOP0.js";
+import { useClueEnrichSelector } from "../hooks/selectors.js";
+import useAnnotations from "../hooks/useAnnotations.js";
+import ActionIcon from "../icons/Action.js";
+import AssessmentIcon from "../icons/Assessment.js";
+import ContextIcon from "../icons/Context.js";
+import OpinionIcon from "../icons/Opinion.js";
+import FrequencyText from "../text/Frequency.js";
+import { memo, useRef, useMemo, useCallback, useEffect } from "react";
+import { u as useContextSelector } from "../index-BDVjGvMI.js";
+const EnrichedTypography = ({
+  type: _type,
+  value,
+  classification: _classification,
+  contextIcon = false,
+  counters = false,
+  hideDetails = false,
+  hideLoading = false,
+  forceDetails = false,
+  setForceDetails = null,
+  useDetailsIcon = false,
+  skipEnrichment = false,
+  slotProps = {},
+  children,
+  ...otherProps
+}) => {
+  var _a, _b, _c;
+  const { t } = useContextSelector(ClueComponentContext, (ctx) => ctx.i18next);
+  const theme = useTheme();
+  const anchorRef = useRef();
+  const groupType = useContextSelector(ClueGroupContext, (ctx) => ctx == null ? void 0 : ctx.type);
+  const defaultClassification = useClueEnrichSelector((ctx) => ctx.defaultClassification);
+  const type = useMemo(() => _type ?? groupType, [_type, groupType]);
+  const classification = useMemo(
+    () => _classification ?? defaultClassification,
+    [_classification, defaultClassification]
+  );
+  if (!type) {
+    throw new Error("Type was not provided as a prop, and component is not used in a group context.");
+  }
+  const [annotations, loading] = useAnnotations(type, value, classification, { skipEnrichment });
+  const showInfo = useContextSelector(CluePopupContext, (state) => state.showInfo);
+  const closeInfo = useContextSelector(CluePopupContext, (state) => state.closeInfo);
+  const buildOptions = useCallback(() => {
+    const options = {};
+    if (setForceDetails) {
+      options.onClose = () => setForceDetails(false);
+    }
+    if (slotProps == null ? void 0 : slotProps.popover) {
+      options.popoverProps = slotProps.popover;
+    }
+    return options;
+  }, [setForceDetails, slotProps.popover]);
+  const clicker = useMemo(
+    () => !loading ? !hideDetails || useDetailsIcon ? (e) => {
+      var _a2;
+      showInfo("details", anchorRef.current, { type, value, classification }, buildOptions());
+      (_a2 = otherProps.onClick) == null ? void 0 : _a2.call(otherProps, e);
+      e.stopPropagation();
+      e.preventDefault();
+    } : otherProps.onClick : (
+      // We need to give a dummy callback when loading so the popover doesn't get confused
+      (e) => {
+        var _a2;
+        (_a2 = otherProps.onClick) == null ? void 0 : _a2.call(otherProps, e);
+      }
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [loading, hideDetails, useDetailsIcon, otherProps, type, value, classification]
+  );
+  useEffect(() => {
+    if (forceDetails) {
+      showInfo("details", anchorRef.current, { type, value, classification }, buildOptions());
+    } else {
+      closeInfo("details", {
+        type,
+        value,
+        classification
+      });
+    }
+  }, [classification, forceDetails, type, value]);
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      ref: anchorRef,
+      direction: "row",
+      spacing: 1,
+      alignItems: "center",
+      ...slotProps == null ? void 0 : slotProps.stack,
+      sx: [
+        {
+          cursor: !loading && !hideDetails ? "pointer" : "inherit",
+          borderBottom: "1px solid transparent",
+          transition: theme.transitions.create(["border-bottom-color"]),
+          "&:hover": {
+            borderBottomColor: !loading && (!hideDetails ? theme.palette.primary.light : null)
+          }
+        },
+        ...Array.isArray((_a = slotProps == null ? void 0 : slotProps.stack) == null ? void 0 : _a.sx) ? (_b = slotProps == null ? void 0 : slotProps.stack) == null ? void 0 : _b.sx : [(_c = slotProps == null ? void 0 : slotProps.stack) == null ? void 0 : _c.sx]
+      ],
+      onClick: !useDetailsIcon ? clicker : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          AssessmentIcon,
+          {
+            ubiquitous: true,
+            value: { type, value, classification },
+            annotations,
+            counters,
+            disableTooltip: forceDetails
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          OpinionIcon,
+          {
+            ubiquitous: true,
+            value: { type, value, classification },
+            annotations,
+            counters,
+            disableTooltip: forceDetails
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ContextIcon,
+          {
+            ubiquitous: true,
+            value: { type, value, classification },
+            annotations,
+            counters,
+            showExtraIcon: contextIcon,
+            disableTooltip: forceDetails
+          }
+        ),
+        children ?? /* @__PURE__ */ jsx(FrequencyText, { id: `enriched-${type}-value`, ...otherProps, annotations, value }),
+        /* @__PURE__ */ jsx(
+          AssessmentIcon,
+          {
+            value: { type, value, classification },
+            annotations,
+            counters,
+            disableTooltip: forceDetails
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          OpinionIcon,
+          {
+            value: { type, value, classification },
+            annotations,
+            counters,
+            disableTooltip: forceDetails
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ContextIcon,
+          {
+            value: { type, value, classification },
+            annotations,
+            counters,
+            showExtraIcon: contextIcon,
+            disableTooltip: forceDetails
+          }
+        ),
+        /* @__PURE__ */ jsx(ActionIcon, { counters, value: { type, value, classification }, disableTooltip: forceDetails }),
+        loading && !hideLoading && /* @__PURE__ */ jsx(CircularProgress, { color: "primary", size: 18 }),
+        !loading && useDetailsIcon && /* @__PURE__ */ jsx(Tooltip, { title: t("details.open"), children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: clicker, sx: { color: theme.palette.action.disabled }, children: /* @__PURE__ */ jsx(Iconified, { icon: "ic:outline-info" }) }) })
+      ]
+    }
+  );
+};
+const EnrichedTypography$1 = memo(EnrichedTypography);
+export {
+  EnrichedTypography$1 as default
+};