@vitessce/vit-s 3.6.7 → 3.6.9

package/dist/index.js

@@ -9460,7 +9460,7 @@ function getSvgIconUtilityClass(slot) {
   return generateUtilityClass("MuiSvgIcon", slot);
 }
 generateUtilityClasses("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]);
-const useUtilityClasses$i = (ownerState) => {
+const useUtilityClasses$j = (ownerState) => {
   const {
     color: color2,
     fontSize,
@@ -9605,7 +9605,7 @@ const SvgIcon = /* @__PURE__ */ React$1.forwardRef(function SvgIcon2(inProps, re
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
-  const classes = useUtilityClasses$i(ownerState);
+  const classes = useUtilityClasses$j(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(SvgIconRoot, {
     as: component,
     className: clsx$1(classes.root, className),
@@ -9858,7 +9858,7 @@ function getPaperUtilityClass(slot) {
   return generateUtilityClass("MuiPaper", slot);
 }
 generateUtilityClasses("MuiPaper", ["root", "rounded", "outlined", "elevation", "elevation0", "elevation1", "elevation2", "elevation3", "elevation4", "elevation5", "elevation6", "elevation7", "elevation8", "elevation9", "elevation10", "elevation11", "elevation12", "elevation13", "elevation14", "elevation15", "elevation16", "elevation17", "elevation18", "elevation19", "elevation20", "elevation21", "elevation22", "elevation23", "elevation24"]);
-const useUtilityClasses$h = (ownerState) => {
+const useUtilityClasses$i = (ownerState) => {
   const {
     square,
     elevation,
@@ -9931,7 +9931,7 @@ const Paper = /* @__PURE__ */ React$1.forwardRef(function Paper2(inProps, ref) {
     square,
     variant
   };
-  const classes = useUtilityClasses$h(ownerState);
+  const classes = useUtilityClasses$i(ownerState);
   {
     if (theme.shadows[elevation] === void 0) {
       console.error([`MUI: The elevation provided <Paper elevation={${elevation}}> is not available in the theme.`, `Please make sure that \`theme.shadows[${elevation}]\` is defined.`].join("\n"));
@@ -10116,6 +10116,56 @@ function mergeSlotProps(parameters) {
     internalRef: internalSlotProps.ref
   };
 }
+function useSlot(name, parameters) {
+  const {
+    className,
+    elementType: initialElementType,
+    ownerState,
+    externalForwardedProps,
+    internalForwardedProps,
+    shouldForwardComponentProp = false,
+    ...useSlotPropsParams
+  } = parameters;
+  const {
+    component: rootComponent,
+    slots = {
+      [name]: void 0
+    },
+    slotProps = {
+      [name]: void 0
+    },
+    ...other
+  } = externalForwardedProps;
+  const elementType = slots[name] || initialElementType;
+  const resolvedComponentsProps = resolveComponentProps(slotProps[name], ownerState);
+  const {
+    props: {
+      component: slotComponent,
+      ...mergedProps
+    },
+    internalRef
+  } = mergeSlotProps({
+    className,
+    ...useSlotPropsParams,
+    externalForwardedProps: name === "root" ? other : void 0,
+    externalSlotProps: resolvedComponentsProps
+  });
+  const ref = useForkRef$1(internalRef, resolvedComponentsProps == null ? void 0 : resolvedComponentsProps.ref, parameters.ref);
+  const LeafComponent = name === "root" ? slotComponent || rootComponent : slotComponent;
+  const props = appendOwnerState(elementType, {
+    ...name === "root" && !rootComponent && !slots[name] && internalForwardedProps,
+    ...name !== "root" && !slots[name] && internalForwardedProps,
+    ...mergedProps,
+    ...LeafComponent && !shouldForwardComponentProp && {
+      as: LeafComponent
+    },
+    ...LeafComponent && shouldForwardComponentProp && {
+      component: LeafComponent
+    },
+    ref
+  }, ownerState);
+  return [elementType, props];
+}
 const refType = PropTypes.oneOfType([PropTypes.func, PropTypes.object]);
 function isFocusVisible(element) {
   try {
@@ -10567,7 +10617,7 @@ function getButtonBaseUtilityClass(slot) {
   return generateUtilityClass("MuiButtonBase", slot);
 }
 const buttonBaseClasses = generateUtilityClasses("MuiButtonBase", ["root", "disabled", "focusVisible"]);
-const useUtilityClasses$g = (ownerState) => {
+const useUtilityClasses$h = (ownerState) => {
   const {
     disabled,
     focusVisible,
@@ -10783,7 +10833,7 @@ const ButtonBase = /* @__PURE__ */ React$1.forwardRef(function ButtonBase2(inPro
     tabIndex,
     focusVisible
   };
-  const classes = useUtilityClasses$g(ownerState);
+  const classes = useUtilityClasses$h(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx$1(classes.root, className),
@@ -10982,6 +11032,962 @@ ButtonBase.propTypes = {
    */
   type: PropTypes.oneOfType([PropTypes.oneOf(["button", "reset", "submit"]), PropTypes.string])
 };
+function hasCorrectMainProperty(obj) {
+  return typeof obj.main === "string";
+}
+function checkSimplePaletteColorValues(obj, additionalPropertiesToCheck = []) {
+  if (!hasCorrectMainProperty(obj)) {
+    return false;
+  }
+  for (const value of additionalPropertiesToCheck) {
+    if (!obj.hasOwnProperty(value) || typeof obj[value] !== "string") {
+      return false;
+    }
+  }
+  return true;
+}
+function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
+  return ([, value]) => value && checkSimplePaletteColorValues(value, additionalPropertiesToCheck);
+}
+function getAlertUtilityClass(slot) {
+  return generateUtilityClass("MuiAlert", slot);
+}
+const alertClasses = generateUtilityClasses("MuiAlert", ["root", "action", "icon", "message", "filled", "colorSuccess", "colorInfo", "colorWarning", "colorError", "filledSuccess", "filledInfo", "filledWarning", "filledError", "outlined", "outlinedSuccess", "outlinedInfo", "outlinedWarning", "outlinedError", "standard", "standardSuccess", "standardInfo", "standardWarning", "standardError"]);
+function getCircularProgressUtilityClass(slot) {
+  return generateUtilityClass("MuiCircularProgress", slot);
+}
+generateUtilityClasses("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
+const SIZE = 44;
+const circularRotateKeyframe = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const circularDashKeyframe = keyframes`
+  0% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: 0;
+  }
+
+  50% {
+    stroke-dasharray: 100px, 200px;
+    stroke-dashoffset: -15px;
+  }
+
+  100% {
+    stroke-dasharray: 1px, 200px;
+    stroke-dashoffset: -126px;
+  }
+`;
+const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
+        animation: ${circularRotateKeyframe} 1.4s linear infinite;
+      ` : null;
+const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
+        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+      ` : null;
+const useUtilityClasses$g = (ownerState) => {
+  const {
+    classes,
+    variant,
+    color: color2,
+    disableShrink
+  } = ownerState;
+  const slots = {
+    root: ["root", variant, `color${capitalize$1(color2)}`],
+    svg: ["svg"],
+    circle: ["circle", `circle${capitalize$1(variant)}`, disableShrink && "circleDisableShrink"]
+  };
+  return composeClasses(slots, getCircularProgressUtilityClass, classes);
+};
+const CircularProgressRoot = styled("span", {
+  name: "MuiCircularProgress",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, styles2[ownerState.variant], styles2[`color${capitalize$1(ownerState.color)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  display: "inline-block",
+  variants: [{
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: theme.transitions.create("transform")
+    }
+  }, {
+    props: {
+      variant: "indeterminate"
+    },
+    style: rotateAnimation || {
+      animation: `${circularRotateKeyframe} 1.4s linear infinite`
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    props: {
+      color: color2
+    },
+    style: {
+      color: (theme.vars || theme).palette[color2].main
+    }
+  }))]
+})));
+const CircularProgressSVG = styled("svg", {
+  name: "MuiCircularProgress",
+  slot: "Svg"
+})({
+  display: "block"
+  // Keeps the progress centered
+});
+const CircularProgressCircle = styled("circle", {
+  name: "MuiCircularProgress",
+  slot: "Circle",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.circle, styles2[`circle${capitalize$1(ownerState.variant)}`], ownerState.disableShrink && styles2.circleDisableShrink];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  stroke: "currentColor",
+  variants: [{
+    props: {
+      variant: "determinate"
+    },
+    style: {
+      transition: theme.transitions.create("stroke-dashoffset")
+    }
+  }, {
+    props: {
+      variant: "indeterminate"
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: "80px, 200px",
+      strokeDashoffset: 0
+      // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === "indeterminate" && !ownerState.disableShrink,
+    style: dashAnimation || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+    }
+  }]
+})));
+const CircularProgress = /* @__PURE__ */ React$1.forwardRef(function CircularProgress2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiCircularProgress"
+  });
+  const {
+    className,
+    color: color2 = "primary",
+    disableShrink = false,
+    size = 40,
+    style: style2,
+    thickness = 3.6,
+    value = 0,
+    variant = "indeterminate",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color: color2,
+    disableShrink,
+    size,
+    thickness,
+    value,
+    variant
+  };
+  const classes = useUtilityClasses$g(ownerState);
+  const circleStyle = {};
+  const rootStyle = {};
+  const rootProps = {};
+  if (variant === "determinate") {
+    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps["aria-valuenow"] = Math.round(value);
+    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
+    rootStyle.transform = "rotate(-90deg)";
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, {
+    className: clsx$1(classes.root, className),
+    style: {
+      width: size,
+      height: size,
+      ...rootStyle,
+      ...style2
+    },
+    ownerState,
+    ref,
+    role: "progressbar",
+    ...rootProps,
+    ...other,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressSVG, {
+      className: classes.svg,
+      ownerState,
+      viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressCircle, {
+        className: classes.circle,
+        style: circleStyle,
+        ownerState,
+        cx: SIZE,
+        cy: SIZE,
+        r: (SIZE - thickness) / 2,
+        fill: "none",
+        strokeWidth: thickness
+      })
+    })
+  });
+});
+CircularProgress.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
+  /**
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
+   * @default false
+   */
+  disableShrink: chainPropTypes(PropTypes.bool, (props) => {
+    if (props.disableShrink && props.variant && props.variant !== "indeterminate") {
+      return new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.");
+    }
+    return null;
+  }),
+  /**
+   * The size of the component.
+   * If using a number, the pixel unit is assumed.
+   * If using a string, you need to provide the CSS unit, for example '3rem'.
+   * @default 40
+   */
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The thickness of the circle.
+   * @default 3.6
+   */
+  thickness: PropTypes.number,
+  /**
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   * @default 0
+   */
+  value: PropTypes.number,
+  /**
+   * The variant to use.
+   * Use indeterminate when there is no progress value.
+   * @default 'indeterminate'
+   */
+  variant: PropTypes.oneOf(["determinate", "indeterminate"])
+};
+function getIconButtonUtilityClass(slot) {
+  return generateUtilityClass("MuiIconButton", slot);
+}
+const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
+const useUtilityClasses$f = (ownerState) => {
+  const {
+    classes,
+    disabled,
+    color: color2,
+    edge,
+    size,
+    loading
+  } = ownerState;
+  const slots = {
+    root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize$1(color2)}`, edge && `edge${capitalize$1(edge)}`, `size${capitalize$1(size)}`],
+    loadingIndicator: ["loadingIndicator"],
+    loadingWrapper: ["loadingWrapper"]
+  };
+  return composeClasses(slots, getIconButtonUtilityClass, classes);
+};
+const IconButtonRoot = styled(ButtonBase, {
+  name: "MuiIconButton",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, ownerState.loading && styles2.loading, ownerState.color !== "default" && styles2[`color${capitalize$1(ownerState.color)}`], ownerState.edge && styles2[`edge${capitalize$1(ownerState.edge)}`], styles2[`size${capitalize$1(ownerState.size)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => ({
+  textAlign: "center",
+  flex: "0 0 auto",
+  fontSize: theme.typography.pxToRem(24),
+  padding: 8,
+  borderRadius: "50%",
+  color: (theme.vars || theme).palette.action.active,
+  transition: theme.transitions.create("background-color", {
+    duration: theme.transitions.duration.shortest
+  }),
+  variants: [{
+    props: (props) => !props.disableRipple,
+    style: {
+      "--IconButton-hoverBg": theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+      "&:hover": {
+        backgroundColor: "var(--IconButton-hoverBg)",
+        // Reset on touch devices, it doesn't add specificity
+        "@media (hover: none)": {
+          backgroundColor: "transparent"
+        }
+      }
+    }
+  }, {
+    props: {
+      edge: "start"
+    },
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: "start",
+      size: "small"
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: {
+      edge: "end"
+    },
+    style: {
+      marginRight: -12
+    }
+  }, {
+    props: {
+      edge: "end",
+      size: "small"
+    },
+    style: {
+      marginRight: -3
+    }
+  }]
+})), memoTheme(({
+  theme
+}) => ({
+  variants: [{
+    props: {
+      color: "inherit"
+    },
+    style: {
+      color: "inherit"
+    }
+  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    props: {
+      color: color2
+    },
+    style: {
+      color: (theme.vars || theme).palette[color2].main
+    }
+  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
+    props: {
+      color: color2
+    },
+    style: {
+      "--IconButton-hoverBg": theme.vars ? `rgba(${(theme.vars || theme).palette[color2].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color2].main, theme.palette.action.hoverOpacity)
+    }
+  })), {
+    props: {
+      size: "small"
+    },
+    style: {
+      padding: 5,
+      fontSize: theme.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: "large"
+    },
+    style: {
+      padding: 12,
+      fontSize: theme.typography.pxToRem(28)
+    }
+  }],
+  [`&.${iconButtonClasses.disabled}`]: {
+    backgroundColor: "transparent",
+    color: (theme.vars || theme).palette.action.disabled
+  },
+  [`&.${iconButtonClasses.loading}`]: {
+    color: "transparent"
+  }
+})));
+const IconButtonLoadingIndicator = styled("span", {
+  name: "MuiIconButton",
+  slot: "LoadingIndicator"
+})(({
+  theme
+}) => ({
+  display: "none",
+  position: "absolute",
+  visibility: "visible",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  color: (theme.vars || theme).palette.action.disabled,
+  variants: [{
+    props: {
+      loading: true
+    },
+    style: {
+      display: "flex"
+    }
+  }]
+}));
+const IconButton = /* @__PURE__ */ React$1.forwardRef(function IconButton2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiIconButton"
+  });
+  const {
+    edge = false,
+    children,
+    className,
+    color: color2 = "default",
+    disabled = false,
+    disableFocusRipple = false,
+    size = "medium",
+    id: idProp,
+    loading = null,
+    loadingIndicator: loadingIndicatorProp,
+    ...other
+  } = props;
+  const loadingId = useId(idProp);
+  const loadingIndicator = loadingIndicatorProp ?? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, {
+    "aria-labelledby": loadingId,
+    color: "inherit",
+    size: 16
+  });
+  const ownerState = {
+    ...props,
+    edge,
+    color: color2,
+    disabled,
+    disableFocusRipple,
+    loading,
+    loadingIndicator,
+    size
+  };
+  const classes = useUtilityClasses$f(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
+    id: loading ? loadingId : idProp,
+    className: clsx$1(classes.root, className),
+    centerRipple: true,
+    focusRipple: !disableFocusRipple,
+    disabled: disabled || loading,
+    ref,
+    ...other,
+    ownerState,
+    children: [typeof loading === "boolean" && // use plain HTML span to minimize the runtime overhead
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+      className: classes.loadingWrapper,
+      style: {
+        display: "contents"
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonLoadingIndicator, {
+        className: classes.loadingIndicator,
+        ownerState,
+        children: loading && loadingIndicator
+      })
+    }), children]
+  });
+});
+IconButton.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The icon to display.
+   */
+  children: chainPropTypes(PropTypes.node, (props) => {
+    const found = React$1.Children.toArray(props.children).some((child) => /* @__PURE__ */ React$1.isValidElement(child) && child.props.onClick);
+    if (found) {
+      return new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join("\n"));
+    }
+    return null;
+  }),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'default'
+   */
+  color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If given, uses a negative margin to counteract the padding on one
+   * side (this is often helpful for aligning the left or right
+   * side of the icon with content above or below, without ruining the border
+   * size and shape).
+   * @default false
+   */
+  edge: PropTypes.oneOf(["end", "start", false]),
+  /**
+   * @ignore
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, the loading indicator is visible and the button is disabled.
+   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
+   * @default null
+   */
+  loading: PropTypes.bool,
+  /**
+   * Element placed before the children if the button is in loading state.
+   * The node should contain an element with `role="progressbar"` with an accessible name.
+   * By default, it renders a `CircularProgress` that is labeled by the button itself.
+   * @default <CircularProgress color="inherit" size={16} />
+   */
+  loadingIndicator: PropTypes.node,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOfType([PropTypes.oneOf(["small", "medium", "large"]), PropTypes.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+};
+const SuccessOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"
+}), "SuccessOutlined");
+const ReportProblemOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
+}), "ReportProblemOutlined");
+const ErrorOutlineIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+}), "ErrorOutline");
+const InfoOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"
+}), "InfoOutlined");
+const ClearIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+}), "Close");
+const useUtilityClasses$e = (ownerState) => {
+  const {
+    variant,
+    color: color2,
+    severity,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ["root", `color${capitalize$1(color2 || severity)}`, `${variant}${capitalize$1(color2 || severity)}`, `${variant}`],
+    icon: ["icon"],
+    message: ["message"],
+    action: ["action"]
+  };
+  return composeClasses(slots, getAlertUtilityClass, classes);
+};
+const AlertRoot = styled(Paper, {
+  name: "MuiAlert",
+  slot: "Root",
+  overridesResolver: (props, styles2) => {
+    const {
+      ownerState
+    } = props;
+    return [styles2.root, styles2[ownerState.variant], styles2[`${ownerState.variant}${capitalize$1(ownerState.color || ownerState.severity)}`]];
+  }
+})(memoTheme(({
+  theme
+}) => {
+  const getColor = theme.palette.mode === "light" ? darken : lighten;
+  const getBackgroundColor = theme.palette.mode === "light" ? lighten : darken;
+  return {
+    ...theme.typography.body2,
+    backgroundColor: "transparent",
+    display: "flex",
+    padding: "6px 16px",
+    variants: [...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["light"])).map(([color2]) => ({
+      props: {
+        colorSeverity: color2,
+        variant: "standard"
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color2}Color`] : getColor(theme.palette[color2].light, 0.6),
+        backgroundColor: theme.vars ? theme.vars.palette.Alert[`${color2}StandardBg`] : getBackgroundColor(theme.palette[color2].light, 0.9),
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color2}IconColor`]
+        } : {
+          color: theme.palette[color2].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["light"])).map(([color2]) => ({
+      props: {
+        colorSeverity: color2,
+        variant: "outlined"
+      },
+      style: {
+        color: theme.vars ? theme.vars.palette.Alert[`${color2}Color`] : getColor(theme.palette[color2].light, 0.6),
+        border: `1px solid ${(theme.vars || theme).palette[color2].light}`,
+        [`& .${alertClasses.icon}`]: theme.vars ? {
+          color: theme.vars.palette.Alert[`${color2}IconColor`]
+        } : {
+          color: theme.palette[color2].main
+        }
+      }
+    })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter(["dark"])).map(([color2]) => ({
+      props: {
+        colorSeverity: color2,
+        variant: "filled"
+      },
+      style: {
+        fontWeight: theme.typography.fontWeightMedium,
+        ...theme.vars ? {
+          color: theme.vars.palette.Alert[`${color2}FilledColor`],
+          backgroundColor: theme.vars.palette.Alert[`${color2}FilledBg`]
+        } : {
+          backgroundColor: theme.palette.mode === "dark" ? theme.palette[color2].dark : theme.palette[color2].main,
+          color: theme.palette.getContrastText(theme.palette[color2].main)
+        }
+      }
+    }))]
+  };
+}));
+const AlertIcon = styled("div", {
+  name: "MuiAlert",
+  slot: "Icon"
+})({
+  marginRight: 12,
+  padding: "7px 0",
+  display: "flex",
+  fontSize: 22,
+  opacity: 0.9
+});
+const AlertMessage = styled("div", {
+  name: "MuiAlert",
+  slot: "Message"
+})({
+  padding: "8px 0",
+  minWidth: 0,
+  overflow: "auto"
+});
+const AlertAction = styled("div", {
+  name: "MuiAlert",
+  slot: "Action"
+})({
+  display: "flex",
+  alignItems: "flex-start",
+  padding: "4px 0 0 16px",
+  marginLeft: "auto",
+  marginRight: -8
+});
+const defaultIconMapping = {
+  success: /* @__PURE__ */ jsxRuntimeExports.jsx(SuccessOutlinedIcon, {
+    fontSize: "inherit"
+  }),
+  warning: /* @__PURE__ */ jsxRuntimeExports.jsx(ReportProblemOutlinedIcon, {
+    fontSize: "inherit"
+  }),
+  error: /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorOutlineIcon, {
+    fontSize: "inherit"
+  }),
+  info: /* @__PURE__ */ jsxRuntimeExports.jsx(InfoOutlinedIcon, {
+    fontSize: "inherit"
+  })
+};
+const Alert = /* @__PURE__ */ React$1.forwardRef(function Alert2(inProps, ref) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiAlert"
+  });
+  const {
+    action,
+    children,
+    className,
+    closeText = "Close",
+    color: color2,
+    components = {},
+    componentsProps = {},
+    icon,
+    iconMapping = defaultIconMapping,
+    onClose,
+    role = "alert",
+    severity = "success",
+    slotProps = {},
+    slots = {},
+    variant = "standard",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color: color2,
+    severity,
+    variant,
+    colorSeverity: color2 || severity
+  };
+  const classes = useUtilityClasses$e(ownerState);
+  const externalForwardedProps = {
+    slots: {
+      closeButton: components.CloseButton,
+      closeIcon: components.CloseIcon,
+      ...slots
+    },
+    slotProps: {
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [RootSlot, rootSlotProps] = useSlot("root", {
+    ref,
+    shouldForwardComponentProp: true,
+    className: clsx$1(classes.root, className),
+    elementType: AlertRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    ownerState,
+    additionalProps: {
+      role,
+      elevation: 0
+    }
+  });
+  const [IconSlot, iconSlotProps] = useSlot("icon", {
+    className: classes.icon,
+    elementType: AlertIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [MessageSlot, messageSlotProps] = useSlot("message", {
+    className: classes.message,
+    elementType: AlertMessage,
+    externalForwardedProps,
+    ownerState
+  });
+  const [ActionSlot, actionSlotProps] = useSlot("action", {
+    className: classes.action,
+    elementType: AlertAction,
+    externalForwardedProps,
+    ownerState
+  });
+  const [CloseButtonSlot, closeButtonProps] = useSlot("closeButton", {
+    elementType: IconButton,
+    externalForwardedProps,
+    ownerState
+  });
+  const [CloseIconSlot, closeIconProps] = useSlot("closeIcon", {
+    elementType: ClearIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(RootSlot, {
+    ...rootSlotProps,
+    children: [icon !== false ? /* @__PURE__ */ jsxRuntimeExports.jsx(IconSlot, {
+      ...iconSlotProps,
+      children: icon || iconMapping[severity] || defaultIconMapping[severity]
+    }) : null, /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSlot, {
+      ...messageSlotProps,
+      children
+    }), action != null ? /* @__PURE__ */ jsxRuntimeExports.jsx(ActionSlot, {
+      ...actionSlotProps,
+      children: action
+    }) : null, action == null && onClose ? /* @__PURE__ */ jsxRuntimeExports.jsx(ActionSlot, {
+      ...actionSlotProps,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseButtonSlot, {
+        size: "small",
+        "aria-label": closeText,
+        title: closeText,
+        color: "inherit",
+        onClick: onClose,
+        ...closeButtonProps,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIconSlot, {
+          fontSize: "small",
+          ...closeIconProps
+        })
+      })
+    }) : null]
+  });
+});
+Alert.propTypes = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The action to display. It renders after the message, at the end of the alert.
+   */
+  action: PropTypes.node,
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * Override the default label for the *close popup* icon button.
+   *
+   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
+   * @default 'Close'
+   */
+  closeText: PropTypes.string,
+  /**
+   * The color of the component. Unless provided, the value is taken from the `severity` prop.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   */
+  color: PropTypes.oneOfType([PropTypes.oneOf(["error", "info", "success", "warning"]), PropTypes.string]),
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components: PropTypes.shape({
+    CloseButton: PropTypes.elementType,
+    CloseIcon: PropTypes.elementType
+  }),
+  /**
+   * The extra props for the slot components.
+   * You can override the existing props or add new ones.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    closeButton: PropTypes.object,
+    closeIcon: PropTypes.object
+  }),
+  /**
+   * Override the icon displayed before the children.
+   * Unless provided, the icon is mapped to the value of the `severity` prop.
+   * Set to `false` to remove the `icon`.
+   */
+  icon: PropTypes.node,
+  /**
+   * The component maps the `severity` prop to a range of different icons,
+   * for instance success to `<SuccessOutlined>`.
+   * If you wish to change this mapping, you can provide your own.
+   * Alternatively, you can use the `icon` prop to override the icon displayed.
+   */
+  iconMapping: PropTypes.shape({
+    error: PropTypes.node,
+    info: PropTypes.node,
+    success: PropTypes.node,
+    warning: PropTypes.node
+  }),
+  /**
+   * Callback fired when the component requests to be closed.
+   * When provided and no `action` prop is set, a close icon button is displayed that triggers the callback when clicked.
+   * @param {React.SyntheticEvent} event The event source of the callback.
+   */
+  onClose: PropTypes.func,
+  /**
+   * The ARIA role attribute of the element.
+   * @default 'alert'
+   */
+  role: PropTypes.string,
+  /**
+   * The severity of the alert. This defines the color and icon used.
+   * @default 'success'
+   */
+  severity: PropTypes.oneOfType([PropTypes.oneOf(["error", "info", "success", "warning"]), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    closeButton: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    closeIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    message: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    action: PropTypes.elementType,
+    closeButton: PropTypes.elementType,
+    closeIcon: PropTypes.elementType,
+    icon: PropTypes.elementType,
+    message: PropTypes.elementType,
+    root: PropTypes.elementType
+  }),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant to use.
+   * @default 'standard'
+   */
+  variant: PropTypes.oneOfType([PropTypes.oneOf(["filled", "outlined", "standard"]), PropTypes.string])
+};
 function HTMLElementType(props, propName, componentName, location, propFullName) {
   const propValue = props[propName];
   const safePropName = propFullName || propName;
@@ -12465,7 +13471,7 @@ function isHTMLElement(element) {
 function isVirtualElement(element) {
   return !isHTMLElement(element);
 }
-const useUtilityClasses$f = (ownerState) => {
+const useUtilityClasses$d = (ownerState) => {
   const {
     classes
   } = ownerState;
@@ -12574,7 +13580,7 @@ const PopperTooltip = /* @__PURE__ */ React$1.forwardRef(function PopperTooltip2
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes = useUtilityClasses$f(props);
+  const classes = useUtilityClasses$d(props);
   const Root = slots.root ?? "div";
   const rootProps = useSlotProps({
     elementType: Root,
@@ -12765,786 +13771,209 @@ Popper$2.propTypes = {
    */
   popperRef: refType,
   /**
-   * The props used for each slot inside the Popper.
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    root: PropTypes.elementType
-  }),
-  /**
-   * Help supporting a react-transition-group/Transition component.
-   * @default false
-   */
-  transition: PropTypes.bool
-};
-const PopperRoot = styled(Popper$2, {
-  name: "MuiPopper",
-  slot: "Root"
-})({});
-const Popper$1 = /* @__PURE__ */ React$1.forwardRef(function Popper22(inProps, ref) {
-  const isRtl = useRtl();
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiPopper"
-  });
-  const {
-    anchorEl,
-    component,
-    components,
-    componentsProps,
-    container,
-    disablePortal,
-    keepMounted,
-    modifiers: modifiers2,
-    open,
-    placement,
-    popperOptions,
-    popperRef,
-    transition,
-    slots,
-    slotProps,
-    ...other
-  } = props;
-  const RootComponent = (slots == null ? void 0 : slots.root) ?? (components == null ? void 0 : components.Root);
-  const otherProps = {
-    anchorEl,
-    container,
-    disablePortal,
-    keepMounted,
-    modifiers: modifiers2,
-    open,
-    placement,
-    popperOptions,
-    popperRef,
-    transition,
-    ...other
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(PopperRoot, {
-    as: component,
-    direction: isRtl ? "rtl" : "ltr",
-    slots: {
-      root: RootComponent
-    },
-    slotProps: slotProps ?? componentsProps,
-    ...otherProps,
-    ref
-  });
-});
-Popper$1.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
-   * or a function that returns either.
-   * It's used to set the position of the popper.
-   * The return value will passed as the reference object of the Popper instance.
-   */
-  anchorEl: PropTypes.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
-  /**
-   * Popper render function or node.
-   */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: PropTypes.elementType,
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   *
-   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  components: PropTypes.shape({
-    Root: PropTypes.elementType
-  }),
-  /**
-   * The props used for each slot inside the Popper.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
-   * @default {}
-   */
-  componentsProps: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * An HTML element or function that returns one.
-   * The `container` will have the portal children appended to it.
-   *
-   * You can also provide a callback, which is called in a React layout effect.
-   * This lets you set the container from a ref, and also makes server-side rendering possible.
-   *
-   * By default, it uses the body of the top-level document object,
-   * so it's simply `document.body` most of the time.
-   */
-  container: PropTypes.oneOfType([HTMLElementType, PropTypes.func]),
-  /**
-   * The `children` will be under the DOM hierarchy of the parent component.
-   * @default false
-   */
-  disablePortal: PropTypes.bool,
-  /**
-   * Always keep the children in the DOM.
-   * This prop can be useful in SEO situation or
-   * when you want to maximize the responsiveness of the Popper.
-   * @default false
-   */
-  keepMounted: PropTypes.bool,
-  /**
-   * Popper.js is based on a "plugin-like" architecture,
-   * most of its features are fully encapsulated "modifiers".
-   *
-   * A modifier is a function that is called each time Popper.js needs to
-   * compute the position of the popper.
-   * For this reason, modifiers should be very performant to avoid bottlenecks.
-   * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
-   */
-  modifiers: PropTypes.arrayOf(PropTypes.shape({
-    data: PropTypes.object,
-    effect: PropTypes.func,
-    enabled: PropTypes.bool,
-    fn: PropTypes.func,
-    name: PropTypes.any,
-    options: PropTypes.object,
-    phase: PropTypes.oneOf(["afterMain", "afterRead", "afterWrite", "beforeMain", "beforeRead", "beforeWrite", "main", "read", "write"]),
-    requires: PropTypes.arrayOf(PropTypes.string),
-    requiresIfExists: PropTypes.arrayOf(PropTypes.string)
-  })),
-  /**
-   * If `true`, the component is shown.
-   */
-  open: PropTypes.bool.isRequired,
-  /**
-   * Popper placement.
-   * @default 'bottom'
-   */
-  placement: PropTypes.oneOf(["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
-  /**
-   * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
-   * @default {}
-   */
-  popperOptions: PropTypes.shape({
-    modifiers: PropTypes.array,
-    onFirstUpdate: PropTypes.func,
-    placement: PropTypes.oneOf(["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
-    strategy: PropTypes.oneOf(["absolute", "fixed"])
-  }),
-  /**
-   * A ref that points to the used popper instance.
-   */
-  popperRef: refType,
-  /**
-   * The props used for each slot inside the Popper.
-   * @default {}
-   */
-  slotProps: PropTypes.shape({
-    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  }),
-  /**
-   * The components used for each slot inside the Popper.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: PropTypes.shape({
-    root: PropTypes.elementType
-  }),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * Help supporting a react-transition-group/Transition component.
-   * @default false
-   */
-  transition: PropTypes.bool
-};
-function hasCorrectMainProperty(obj) {
-  return typeof obj.main === "string";
-}
-function checkSimplePaletteColorValues(obj, additionalPropertiesToCheck = []) {
-  if (!hasCorrectMainProperty(obj)) {
-    return false;
-  }
-  for (const value of additionalPropertiesToCheck) {
-    if (!obj.hasOwnProperty(value) || typeof obj[value] !== "string") {
-      return false;
-    }
-  }
-  return true;
-}
-function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
-  return ([, value]) => value && checkSimplePaletteColorValues(value, additionalPropertiesToCheck);
-}
-function getCircularProgressUtilityClass(slot) {
-  return generateUtilityClass("MuiCircularProgress", slot);
-}
-generateUtilityClasses("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
-const SIZE = 44;
-const circularRotateKeyframe = keyframes`
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-`;
-const circularDashKeyframe = keyframes`
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-
-  100% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: -126px;
-  }
-`;
-const rotateAnimation = typeof circularRotateKeyframe !== "string" ? css`
-        animation: ${circularRotateKeyframe} 1.4s linear infinite;
-      ` : null;
-const dashAnimation = typeof circularDashKeyframe !== "string" ? css`
-        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
-      ` : null;
-const useUtilityClasses$e = (ownerState) => {
-  const {
-    classes,
-    variant,
-    color: color2,
-    disableShrink
-  } = ownerState;
-  const slots = {
-    root: ["root", variant, `color${capitalize$1(color2)}`],
-    svg: ["svg"],
-    circle: ["circle", `circle${capitalize$1(variant)}`, disableShrink && "circleDisableShrink"]
-  };
-  return composeClasses(slots, getCircularProgressUtilityClass, classes);
-};
-const CircularProgressRoot = styled("span", {
-  name: "MuiCircularProgress",
-  slot: "Root",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.root, styles2[ownerState.variant], styles2[`color${capitalize$1(ownerState.color)}`]];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  display: "inline-block",
-  variants: [{
-    props: {
-      variant: "determinate"
-    },
-    style: {
-      transition: theme.transitions.create("transform")
-    }
-  }, {
-    props: {
-      variant: "indeterminate"
-    },
-    style: rotateAnimation || {
-      animation: `${circularRotateKeyframe} 1.4s linear infinite`
-    }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
-    props: {
-      color: color2
-    },
-    style: {
-      color: (theme.vars || theme).palette[color2].main
-    }
-  }))]
-})));
-const CircularProgressSVG = styled("svg", {
-  name: "MuiCircularProgress",
-  slot: "Svg"
-})({
-  display: "block"
-  // Keeps the progress centered
-});
-const CircularProgressCircle = styled("circle", {
-  name: "MuiCircularProgress",
-  slot: "Circle",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.circle, styles2[`circle${capitalize$1(ownerState.variant)}`], ownerState.disableShrink && styles2.circleDisableShrink];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  stroke: "currentColor",
-  variants: [{
-    props: {
-      variant: "determinate"
-    },
-    style: {
-      transition: theme.transitions.create("stroke-dashoffset")
-    }
-  }, {
-    props: {
-      variant: "indeterminate"
-    },
-    style: {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: "80px, 200px",
-      strokeDashoffset: 0
-      // Add the unit to fix a Edge 16 and below bug.
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === "indeterminate" && !ownerState.disableShrink,
-    style: dashAnimation || {
-      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
-      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
-    }
-  }]
-})));
-const CircularProgress = /* @__PURE__ */ React$1.forwardRef(function CircularProgress2(inProps, ref) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiCircularProgress"
-  });
-  const {
-    className,
-    color: color2 = "primary",
-    disableShrink = false,
-    size = 40,
-    style: style2,
-    thickness = 3.6,
-    value = 0,
-    variant = "indeterminate",
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
-    color: color2,
-    disableShrink,
-    size,
-    thickness,
-    value,
-    variant
-  };
-  const classes = useUtilityClasses$e(ownerState);
-  const circleStyle = {};
-  const rootStyle = {};
-  const rootProps = {};
-  if (variant === "determinate") {
-    const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
-    circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps["aria-valuenow"] = Math.round(value);
-    circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
-    rootStyle.transform = "rotate(-90deg)";
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, {
-    className: clsx$1(classes.root, className),
-    style: {
-      width: size,
-      height: size,
-      ...rootStyle,
-      ...style2
-    },
-    ownerState,
-    ref,
-    role: "progressbar",
-    ...rootProps,
-    ...other,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressSVG, {
-      className: classes.svg,
-      ownerState,
-      viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressCircle, {
-        className: classes.circle,
-        style: circleStyle,
-        ownerState,
-        cx: SIZE,
-        cy: SIZE,
-        r: (SIZE - thickness) / 2,
-        fill: "none",
-        strokeWidth: thickness
-      })
-    })
-  });
-});
-CircularProgress.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object,
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-  /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'primary'
-   */
-  color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
-  /**
-   * If `true`, the shrink animation is disabled.
-   * This only works if variant is `indeterminate`.
-   * @default false
-   */
-  disableShrink: chainPropTypes(PropTypes.bool, (props) => {
-    if (props.disableShrink && props.variant && props.variant !== "indeterminate") {
-      return new Error("MUI: You have provided the `disableShrink` prop with a variant other than `indeterminate`. This will have no effect.");
-    }
-    return null;
-  }),
-  /**
-   * The size of the component.
-   * If using a number, the pixel unit is assumed.
-   * If using a string, you need to provide the CSS unit, for example '3rem'.
-   * @default 40
-   */
-  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * @ignore
-   */
-  style: PropTypes.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * The thickness of the circle.
-   * @default 3.6
+   * The props used for each slot inside the Popper.
+   * @default {}
    */
-  thickness: PropTypes.number,
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
   /**
-   * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
    */
-  value: PropTypes.number,
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
   /**
-   * The variant to use.
-   * Use indeterminate when there is no progress value.
-   * @default 'indeterminate'
+   * Help supporting a react-transition-group/Transition component.
+   * @default false
    */
-  variant: PropTypes.oneOf(["determinate", "indeterminate"])
-};
-function getIconButtonUtilityClass(slot) {
-  return generateUtilityClass("MuiIconButton", slot);
-}
-const iconButtonClasses = generateUtilityClasses("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]);
-const useUtilityClasses$d = (ownerState) => {
-  const {
-    classes,
-    disabled,
-    color: color2,
-    edge,
-    size,
-    loading
-  } = ownerState;
-  const slots = {
-    root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize$1(color2)}`, edge && `edge${capitalize$1(edge)}`, `size${capitalize$1(size)}`],
-    loadingIndicator: ["loadingIndicator"],
-    loadingWrapper: ["loadingWrapper"]
-  };
-  return composeClasses(slots, getIconButtonUtilityClass, classes);
+  transition: PropTypes.bool
 };
-const IconButtonRoot = styled(ButtonBase, {
-  name: "MuiIconButton",
-  slot: "Root",
-  overridesResolver: (props, styles2) => {
-    const {
-      ownerState
-    } = props;
-    return [styles2.root, ownerState.loading && styles2.loading, ownerState.color !== "default" && styles2[`color${capitalize$1(ownerState.color)}`], ownerState.edge && styles2[`edge${capitalize$1(ownerState.edge)}`], styles2[`size${capitalize$1(ownerState.size)}`]];
-  }
-})(memoTheme(({
-  theme
-}) => ({
-  textAlign: "center",
-  flex: "0 0 auto",
-  fontSize: theme.typography.pxToRem(24),
-  padding: 8,
-  borderRadius: "50%",
-  color: (theme.vars || theme).palette.action.active,
-  transition: theme.transitions.create("background-color", {
-    duration: theme.transitions.duration.shortest
-  }),
-  variants: [{
-    props: (props) => !props.disableRipple,
-    style: {
-      "--IconButton-hoverBg": theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
-      "&:hover": {
-        backgroundColor: "var(--IconButton-hoverBg)",
-        // Reset on touch devices, it doesn't add specificity
-        "@media (hover: none)": {
-          backgroundColor: "transparent"
-        }
-      }
-    }
-  }, {
-    props: {
-      edge: "start"
-    },
-    style: {
-      marginLeft: -12
-    }
-  }, {
-    props: {
-      edge: "start",
-      size: "small"
-    },
-    style: {
-      marginLeft: -3
-    }
-  }, {
-    props: {
-      edge: "end"
-    },
-    style: {
-      marginRight: -12
-    }
-  }, {
-    props: {
-      edge: "end",
-      size: "small"
-    },
-    style: {
-      marginRight: -3
-    }
-  }]
-})), memoTheme(({
-  theme
-}) => ({
-  variants: [{
-    props: {
-      color: "inherit"
-    },
-    style: {
-      color: "inherit"
-    }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
-    props: {
-      color: color2
-    },
-    style: {
-      color: (theme.vars || theme).palette[color2].main
-    }
-  })), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color2]) => ({
-    props: {
-      color: color2
-    },
-    style: {
-      "--IconButton-hoverBg": theme.vars ? `rgba(${(theme.vars || theme).palette[color2].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color2].main, theme.palette.action.hoverOpacity)
-    }
-  })), {
-    props: {
-      size: "small"
-    },
-    style: {
-      padding: 5,
-      fontSize: theme.typography.pxToRem(18)
-    }
-  }, {
-    props: {
-      size: "large"
-    },
-    style: {
-      padding: 12,
-      fontSize: theme.typography.pxToRem(28)
-    }
-  }],
-  [`&.${iconButtonClasses.disabled}`]: {
-    backgroundColor: "transparent",
-    color: (theme.vars || theme).palette.action.disabled
-  },
-  [`&.${iconButtonClasses.loading}`]: {
-    color: "transparent"
-  }
-})));
-const IconButtonLoadingIndicator = styled("span", {
-  name: "MuiIconButton",
-  slot: "LoadingIndicator"
-})(({
-  theme
-}) => ({
-  display: "none",
-  position: "absolute",
-  visibility: "visible",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  color: (theme.vars || theme).palette.action.disabled,
-  variants: [{
-    props: {
-      loading: true
-    },
-    style: {
-      display: "flex"
-    }
-  }]
-}));
-const IconButton = /* @__PURE__ */ React$1.forwardRef(function IconButton2(inProps, ref) {
+const PopperRoot = styled(Popper$2, {
+  name: "MuiPopper",
+  slot: "Root"
+})({});
+const Popper$1 = /* @__PURE__ */ React$1.forwardRef(function Popper22(inProps, ref) {
+  const isRtl = useRtl();
   const props = useDefaultProps({
     props: inProps,
-    name: "MuiIconButton"
+    name: "MuiPopper"
   });
   const {
-    edge = false,
-    children,
-    className,
-    color: color2 = "default",
-    disabled = false,
-    disableFocusRipple = false,
-    size = "medium",
-    id: idProp,
-    loading = null,
-    loadingIndicator: loadingIndicatorProp,
+    anchorEl,
+    component,
+    components,
+    componentsProps,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers: modifiers2,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition,
+    slots,
+    slotProps,
     ...other
   } = props;
-  const loadingId = useId(idProp);
-  const loadingIndicator = loadingIndicatorProp ?? /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress, {
-    "aria-labelledby": loadingId,
-    color: "inherit",
-    size: 16
-  });
-  const ownerState = {
-    ...props,
-    edge,
-    color: color2,
-    disabled,
-    disableFocusRipple,
-    loading,
-    loadingIndicator,
-    size
+  const RootComponent = (slots == null ? void 0 : slots.root) ?? (components == null ? void 0 : components.Root);
+  const otherProps = {
+    anchorEl,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers: modifiers2,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition,
+    ...other
   };
-  const classes = useUtilityClasses$d(ownerState);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
-    id: loading ? loadingId : idProp,
-    className: clsx$1(classes.root, className),
-    centerRipple: true,
-    focusRipple: !disableFocusRipple,
-    disabled: disabled || loading,
-    ref,
-    ...other,
-    ownerState,
-    children: [typeof loading === "boolean" && // use plain HTML span to minimize the runtime overhead
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-      className: classes.loadingWrapper,
-      style: {
-        display: "contents"
-      },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonLoadingIndicator, {
-        className: classes.loadingIndicator,
-        ownerState,
-        children: loading && loadingIndicator
-      })
-    }), children]
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(PopperRoot, {
+    as: component,
+    direction: isRtl ? "rtl" : "ltr",
+    slots: {
+      root: RootComponent
+    },
+    slotProps: slotProps ?? componentsProps,
+    ...otherProps,
+    ref
   });
 });
-IconButton.propTypes = {
+Popper$1.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * The icon to display.
+   * An HTML element, [virtualElement](https://popper.js.org/docs/v2/virtual-elements/),
+   * or a function that returns either.
+   * It's used to set the position of the popper.
+   * The return value will passed as the reference object of the Popper instance.
    */
-  children: chainPropTypes(PropTypes.node, (props) => {
-    const found = React$1.Children.toArray(props.children).some((child) => /* @__PURE__ */ React$1.isValidElement(child) && child.props.onClick);
-    if (found) {
-      return new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join("\n"));
-    }
-    return null;
-  }),
+  anchorEl: PropTypes.oneOfType([HTMLElementType, PropTypes.object, PropTypes.func]),
   /**
-   * Override or extend the styles applied to the component.
+   * Popper render function or node.
    */
-  classes: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   /**
-   * @ignore
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
    */
-  className: PropTypes.string,
+  component: PropTypes.elementType,
   /**
-   * The color of the component.
-   * It supports both default and custom theme colors, which can be added as shown in the
-   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
-   * @default 'default'
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @default {}
    */
-  color: PropTypes.oneOfType([PropTypes.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), PropTypes.string]),
+  components: PropTypes.shape({
+    Root: PropTypes.elementType
+  }),
   /**
-   * If `true`, the component is disabled.
+   * The props used for each slot inside the Popper.
+   *
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @default {}
+   */
+  componentsProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * An HTML element or function that returns one.
+   * The `container` will have the portal children appended to it.
+   *
+   * You can also provide a callback, which is called in a React layout effect.
+   * This lets you set the container from a ref, and also makes server-side rendering possible.
+   *
+   * By default, it uses the body of the top-level document object,
+   * so it's simply `document.body` most of the time.
+   */
+  container: PropTypes.oneOfType([HTMLElementType, PropTypes.func]),
+  /**
+   * The `children` will be under the DOM hierarchy of the parent component.
    * @default false
    */
-  disabled: PropTypes.bool,
+  disablePortal: PropTypes.bool,
   /**
-   * If `true`, the  keyboard focus ripple is disabled.
+   * Always keep the children in the DOM.
+   * This prop can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Popper.
    * @default false
    */
-  disableFocusRipple: PropTypes.bool,
+  keepMounted: PropTypes.bool,
   /**
-   * If `true`, the ripple effect is disabled.
+   * Popper.js is based on a "plugin-like" architecture,
+   * most of its features are fully encapsulated "modifiers".
    *
-   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
-   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
-   * @default false
+   * A modifier is a function that is called each time Popper.js needs to
+   * compute the position of the popper.
+   * For this reason, modifiers should be very performant to avoid bottlenecks.
+   * To learn how to create a modifier, [read the modifiers documentation](https://popper.js.org/docs/v2/modifiers/).
    */
-  disableRipple: PropTypes.bool,
+  modifiers: PropTypes.arrayOf(PropTypes.shape({
+    data: PropTypes.object,
+    effect: PropTypes.func,
+    enabled: PropTypes.bool,
+    fn: PropTypes.func,
+    name: PropTypes.any,
+    options: PropTypes.object,
+    phase: PropTypes.oneOf(["afterMain", "afterRead", "afterWrite", "beforeMain", "beforeRead", "beforeWrite", "main", "read", "write"]),
+    requires: PropTypes.arrayOf(PropTypes.string),
+    requiresIfExists: PropTypes.arrayOf(PropTypes.string)
+  })),
   /**
-   * If given, uses a negative margin to counteract the padding on one
-   * side (this is often helpful for aligning the left or right
-   * side of the icon with content above or below, without ruining the border
-   * size and shape).
-   * @default false
+   * If `true`, the component is shown.
    */
-  edge: PropTypes.oneOf(["end", "start", false]),
+  open: PropTypes.bool.isRequired,
   /**
-   * @ignore
+   * Popper placement.
+   * @default 'bottom'
    */
-  id: PropTypes.string,
+  placement: PropTypes.oneOf(["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
   /**
-   * If `true`, the loading indicator is visible and the button is disabled.
-   * If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
-   * @default null
+   * Options provided to the [`Popper.js`](https://popper.js.org/docs/v2/constructors/#options) instance.
+   * @default {}
    */
-  loading: PropTypes.bool,
+  popperOptions: PropTypes.shape({
+    modifiers: PropTypes.array,
+    onFirstUpdate: PropTypes.func,
+    placement: PropTypes.oneOf(["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
+    strategy: PropTypes.oneOf(["absolute", "fixed"])
+  }),
   /**
-   * Element placed before the children if the button is in loading state.
-   * The node should contain an element with `role="progressbar"` with an accessible name.
-   * By default, it renders a `CircularProgress` that is labeled by the button itself.
-   * @default <CircularProgress color="inherit" size={16} />
+   * A ref that points to the used popper instance.
    */
-  loadingIndicator: PropTypes.node,
+  popperRef: refType,
   /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
+   * The props used for each slot inside the Popper.
+   * @default {}
    */
-  size: PropTypes.oneOfType([PropTypes.oneOf(["small", "medium", "large"]), PropTypes.string]),
+  slotProps: PropTypes.shape({
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside the Popper.
+   * Either a string to use a HTML element or a component.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * Help supporting a react-transition-group/Transition component.
+   * @default false
+   */
+  transition: PropTypes.bool
 };
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
@@ -17429,6 +17858,9 @@ const HelpIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
 const SettingsIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"
 }), "Settings");
+const WarningIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
+  d: "M1 21h22L12 2zm12-3h-2v-2h2zm0-4h-2v-4h2z"
+}), "Warning");
 /**!
  * @fileOverview Kickass library to create and place poppers near their reference elements.
  * @version 1.16.1
@@ -27350,6 +27782,9 @@ const configSchema1_0_16 = configSchema1_0_13.extend({
 const configSchema1_0_17 = configSchema1_0_16.extend({
   version: z.literal("1.0.17")
 });
+const configSchema1_0_18 = configSchema1_0_17.extend({
+  version: z.literal("1.0.18")
+});
 let getRandomValues;
 const rnds8 = new Uint8Array(16);
 function rng() {
@@ -28588,7 +29023,54 @@ function upgradeFrom1_0_16(config2) {
     version: "1.0.17"
   };
 }
-const latestConfigSchema = configSchema1_0_17;
+function upgradeFrom1_0_17(config2) {
+  const newConfig = cloneDeep(config2);
+  const { datasets } = newConfig;
+  const newDatasets = datasets.map((datasetDef) => {
+    const { files } = datasetDef;
+    const newFiles = files.map((fileDef) => {
+      const { fileType, options } = fileDef;
+      if (fileType === "spatialdata.zarr" || fileType === "spatialdata.zarr.zip") {
+        if (options.labels && options.shapes) {
+          throw new Error("Cannot upgrade both labels and shapes at the same time. For now, a workaround is to include two separate spatialdata.zarr file definitions, one for labels and one for shapes.");
+        }
+        if (options.labels) {
+          const newOptions = {
+            ...options,
+            obsSegmentations: options.labels
+          };
+          delete newOptions.labels;
+          return {
+            ...fileDef,
+            options: newOptions
+          };
+        }
+        if (options.shapes) {
+          const newOptions = {
+            ...options,
+            obsSegmentations: options.shapes
+          };
+          delete newOptions.shapes;
+          return {
+            ...fileDef,
+            options: newOptions
+          };
+        }
+      }
+      return fileDef;
+    });
+    return {
+      ...datasetDef,
+      files: newFiles
+    };
+  });
+  return {
+    ...newConfig,
+    datasets: newDatasets,
+    version: "1.0.18"
+  };
+}
+const latestConfigSchema = configSchema1_0_18;
 const SCHEMA_HANDLERS = [
   [configSchema0_1_0, upgradeFrom0_1_0],
   [configSchema1_0_0, upgradeFrom1_0_0],
@@ -28607,7 +29089,8 @@ const SCHEMA_HANDLERS = [
   [configSchema1_0_13, upgradeFrom1_0_13],
   [configSchema1_0_14, upgradeFrom1_0_14],
   [configSchema1_0_15, upgradeFrom1_0_15],
-  [configSchema1_0_16, upgradeFrom1_0_16]
+  [configSchema1_0_16, upgradeFrom1_0_16],
+  [configSchema1_0_17, upgradeFrom1_0_17]
 ];
 var re = { exports: {} };
 var constants;
@@ -30642,9 +31125,7 @@ const FileType$1 = {
   OBS_SETS_SPATIALDATA_ZARR: "obsSets.spatialdata.zarr",
   OBS_SPOTS_SPATIALDATA_ZARR: "obsSpots.spatialdata.zarr",
   FEATURE_LABELS_SPATIALDATA_ZARR: "featureLabels.spatialdata.zarr",
-  // TODO:
-  // OBS_POINTS_SPATIALDATA_ZARR: 'obsPoints.spatialdata.zarr',
-  // OBS_LOCATIONS_SPATIALDATA_ZARR: 'obsLocations.spatialdata.zarr',
+  OBS_POINTS_SPATIALDATA_ZARR: "obsPoints.spatialdata.zarr",
   // SpatialData - zipped
   IMAGE_SPATIALDATA_ZARR_ZIP: "image.spatialdata.zarr.zip",
   LABELS_SPATIALDATA_ZARR_ZIP: "labels.spatialdata.zarr.zip",
@@ -30653,6 +31134,7 @@ const FileType$1 = {
   OBS_SETS_SPATIALDATA_ZARR_ZIP: "obsSets.spatialdata.zarr.zip",
   OBS_SPOTS_SPATIALDATA_ZARR_ZIP: "obsSpots.spatialdata.zarr.zip",
   FEATURE_LABELS_SPATIALDATA_ZARR_ZIP: "featureLabels.spatialdata.zarr.zip",
+  OBS_POINTS_SPATIALDATA_ZARR_ZIP: "obsPoints.spatialdata.zarr.zip",
   // MuData
   OBS_FEATURE_MATRIX_MUDATA_ZARR: "obsFeatureMatrix.mudata.zarr",
   OBS_SETS_MUDATA_ZARR: "obsSets.mudata.zarr",
@@ -30904,6 +31386,7 @@ const STATUS = {
   [FileType$1.OBS_FEATURE_MATRIX_SPATIALDATA_ZARR]: DataType$1.OBS_FEATURE_MATRIX,
   [FileType$1.OBS_SETS_SPATIALDATA_ZARR]: DataType$1.OBS_SETS,
   [FileType$1.FEATURE_LABELS_SPATIALDATA_ZARR]: DataType$1.FEATURE_LABELS,
+  [FileType$1.OBS_POINTS_SPATIALDATA_ZARR]: DataType$1.OBS_POINTS,
   // For new file types to support old file types
   [FileType$1.OBS_EMBEDDING_CELLS_JSON]: DataType$1.OBS_EMBEDDING,
   [FileType$1.OBS_LOCATIONS_CELLS_JSON]: DataType$1.OBS_LOCATIONS,
@@ -31077,6 +31560,9 @@ const DATA_TYPE_COORDINATION_VALUE_USAGE = {
   },
   [FileType$1.FEATURE_LABELS_SPATIALDATA_ZARR]: {
     zip: FileType$1.FEATURE_LABELS_SPATIALDATA_ZARR_ZIP
+  },
+  [FileType$1.OBS_POINTS_SPATIALDATA_ZARR]: {
+    zip: FileType$1.OBS_POINTS_SPATIALDATA_ZARR_ZIP
   }
 });
 const AUTO_INDEPENDENT_COORDINATION_TYPES = [
@@ -31751,7 +32237,7 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
     CoordinationType$1.HIERARCHY_LEVELS
   ]
 });
-const version = "3.6.7";
+const version = "3.6.9";
 const META_VERSION = {
   version
 };
@@ -32171,10 +32657,14 @@ const imageSpatialdataSchema = z.object({
   coordinateSystem: z.string().optional().describe('The name of a coordinate transformation output used to transform the image. If not provided, the "global" coordinate system is assumed.')
 });
 const obsSegmentationsSpatialdataSchema = z.object({
-  // TODO: should this be renamed labelsSpatialdataSchema?
-  // TODO: support obsTypesFromChannelNames?
-  path: z.string(),
-  tablePath: z.string().optional().describe("The path to a table which annotates the labels. If available but not specified, the spot identifiers may not be aligned with associated tabular data as expected."),
+  // TODO: support obsTypesFromElementNames?
+  path: z.string().describe("The path to the segmentation data, stored in either shapes/ or labels/."),
+  tablePath: z.string().optional().describe("The path to a table which annotates the labels or shapes. If available but not specified, the spot identifiers may not be aligned with associated tabular data as expected."),
+  coordinateSystem: z.string().optional().describe('The name of a coordinate transformation output used to transform the image. If not provided, the "global" coordinate system is assumed.')
+});
+const obsPointsSpatialdataSchema = z.object({
+  path: z.string().describe("The path to the point data."),
+  tablePath: z.string().optional().describe("The path to a table which annotates the points. If available but not specified, the spot identifiers may not be aligned with associated tabular data as expected."),
   coordinateSystem: z.string().optional().describe('The name of a coordinate transformation output used to transform the image. If not provided, the "global" coordinate system is assumed.')
 });
 z.object({
@@ -32294,13 +32784,10 @@ z.object({
   image: imageSpatialdataSchema,
   // TODO: should this be a special schema
   // to allow specifying fileUid (like for embeddingType)?
-  // TODO: allow multiple labels?
-  labels: obsSegmentationsSpatialdataSchema,
+  // TODO: allow multiple labels/shapes?
+  obsSegmentations: obsSegmentationsSpatialdataSchema,
+  obsPoints: obsPointsSpatialdataSchema,
   // TODO: allow multiple shapes?
-  // TODO: unify labels and shapes to obsSegmentations,
-  // then distinguish in expand function based on
-  // "labels/*" vs. "shapes/*" in path?
-  shapes: obsSegmentationsSpatialdataSchema,
   obsFeatureMatrix: obsFeatureMatrixSpatialdataSchema,
   obsSpots: obsSpotsSpatialdataSchema,
   // TODO: obsPoints
@@ -41178,30 +41665,6 @@ function intern_delete({ _intern, _key }, value) {
 function keyof(value) {
   return value !== null && typeof value === "object" ? value.valueOf() : value;
 }
-class AbstractLoaderError {
-  constructor(message) {
-    this.message = message;
-  }
-  // eslint-disable-next-line class-methods-use-this
-  warnInConsole() {
-    throw new Error("The warnInConsole() method has not been implemented.");
-  }
-}
-class LoaderNotFoundError extends AbstractLoaderError {
-  constructor(loaders, dataset, fileType, viewCoordinationValues) {
-    super(`Error: unable to find matching ${fileType} file in dataset ${dataset}.`);
-    this.name = "LoaderNotFoundError";
-    this.loaders = loaders;
-    this.dataset = dataset;
-    this.fileType = fileType;
-    this.viewCoordinationValues = viewCoordinationValues;
-    this.message = `Expected to match on { ${Object.entries(viewCoordinationValues || {}).map(([k, v]) => `${k}: ${v ?? "null"}`).join(", ")} }`;
-  }
-  warnInConsole() {
-    const { loaders, message } = this;
-    log$1.warn(message, loaders);
-  }
-}
 function getSourceAndLoaderFromFileType(type, fileTypes) {
   if (Array.isArray(fileTypes)) {
     const matchingFileType = fileTypes.find((ft) => ft.name === type);
@@ -41286,6 +41749,7 @@ function createLoaders(datasets, configDescription, fileTypes, coordinationTypes
   const defaultCoordinationValues = Object.fromEntries(
     coordinationTypes.map((ct) => [ct.name, ct.defaultValue])
   );
+  const dataSourceClasses = Array.from(new Set(fileTypes.map((ft) => ft.dataSourceClass)));
   datasets.forEach((dataset) => {
     const datasetLoaders = {
       name: dataset.name,
@@ -41310,8 +41774,8 @@ function createLoaders(datasets, configDescription, fileTypes, coordinationTypes
       );
       const [DataSourceClass, LoaderClass] = getSourceAndLoaderFromFileType(fileType, fileTypes);
       const fileId = url || JSON.stringify(options);
-      const dataSourceName = DataSourceClass.prototype.constructor.name;
-      const dataSourceKey = [fileId, dataSourceName];
+      const dataSourceIndex = dataSourceClasses.indexOf(DataSourceClass);
+      const dataSourceKey = [fileId, dataSourceIndex];
       if (!dataSources.has(dataSourceKey)) {
         dataSources.set(dataSourceKey, new DataSourceClass({
           url,
@@ -41580,7 +42044,7 @@ function useExpandedFeatureLabelsMap(featureType, featureLabelsMap, options) {
     if (!fetchedMapping) return featureLabelsMap;
     return new Map([
       ...stripCuriePrefixes ? Array.from(fetchedMapping).map(([k, v]) => [k.split(":")[1], v.split(":")[1]]) : fetchedMapping,
-      ...featureLabelsMap || []
+      ...Array.from((featureLabelsMap == null ? void 0 : featureLabelsMap.entries()) || [])
     ]);
   }, [fetchedMapping, featureLabelsMap, stripCuriePrefixes]);
   const dataStatus = enabled ? isFetching ? STATUS.LOADING : status : STATUS.SUCCESS;
@@ -42416,7 +42880,16 @@ function VitS(props) {
         refetchOnWindowFocus: false,
         retry: 2
       }
-    }
+    },
+    // Reference: https://tkdodo.eu/blog/react-query-error-handling#the-global-callbacks
+    queryCache: new QueryCache({
+      onError: (error) => {
+        log$1.error(error);
+        if (onWarn) {
+          onWarn(error.message);
+        }
+      }
+    })
     // TODO: should the queryClient be shared? Or have an option to be shared
     // (e.g., based on remountOnUidChange)?
   }), [configKey]);
@@ -42632,6 +43105,18 @@ const useStyles$1 = makeStyles()((theme) => ({
     borderRadius: "8px",
     boxShadow: "0 0 10px rgba(0, 0, 0, 0.2)",
     border: "10px solid grey"
+  },
+  errorList: {
+    width: "100%",
+    maxWidth: 300,
+    padding: "0 4px"
+  },
+  errorListAlert: {
+    marginTop: "2px",
+    marginBottom: "2px"
+  },
+  errorListItemText: {
+    fontSize: "12px"
   }
 }));
 function SettingsIconWithArrow({ open }) {
@@ -42650,6 +43135,7 @@ function PlotOptions(props) {
       buttonIcon,
       buttonClassName: classes.iconButton,
       placement: "bottom-end",
+      title: "Plot Options",
       "aria-label": "Open plot options menu"
     },
     options
@@ -42671,6 +43157,7 @@ function DownloadOptions(props) {
       buttonIcon,
       buttonClassName: classes.iconButton,
       placement: "bottom-end",
+      title: "Download Options",
       "aria-label": "Open download options menu"
     },
     urls.map(({ url, name }) => /* @__PURE__ */ React__default.createElement(MenuItem, { dense: true, key: `${url}_${name}`, "aria-label": `Click to download ${name}` }, /* @__PURE__ */ React__default.createElement(Link, { underline: "always", href: url, target: "_blank", rel: "noopener", className: classes.downloadLink }, "Download ", name)))
@@ -42688,12 +43175,43 @@ function HelpButton(props) {
       buttonIcon: /* @__PURE__ */ React__default.createElement(HelpIcon, null),
       buttonClassName: classes.iconButton,
       placement: "bottom-end",
+      title: "Help Info",
       "aria-label": "Open help info",
       withPaper: false
     },
     /* @__PURE__ */ React__default.createElement("span", { className: classes.helpTextSpan }, helpText)
   );
 }
+function ErrorInfo(props) {
+  const { errors } = props;
+  const [open, setOpen] = useState(false);
+  const { classes } = useStyles$1();
+  return /* @__PURE__ */ React__default.createElement(
+    PopperMenu,
+    {
+      open,
+      setOpen,
+      buttonIcon: /* @__PURE__ */ React__default.createElement(WarningIcon, { color: "error" }),
+      buttonClassName: classes.iconButton,
+      placement: "bottom-end",
+      title: "View Errors",
+      "aria-label": "Open error info"
+    },
+    /* @__PURE__ */ React__default.createElement(List, { className: classes.errorList }, errors.map((error, index) => /* @__PURE__ */ React__default.createElement(
+      Alert,
+      {
+        key: `${index}-${error.name}-${error.message}`,
+        severity: "error",
+        className: classes.errorListAlert,
+        slots: { message: "span" },
+        slotProps: { message: { className: classes.errorListItemText } }
+      },
+      error.name,
+      ": ",
+      error.message
+    )))
+  );
+}
 function ClosePaneButton(props) {
   const { removeGridComponent } = props;
   const { classes } = useStyles$1();
@@ -42703,7 +43221,7 @@ function ClosePaneButton(props) {
       onClick: removeGridComponent,
       size: "small",
       className: classes.iconButton,
-      title: "close",
+      title: "Close View",
       "aria-label": "Close panel button"
     },
     /* @__PURE__ */ React__default.createElement(CloseIcon, null)
@@ -42723,8 +43241,10 @@ function TitleInfo(props) {
     closeButtonVisible = true,
     downloadButtonVisible = true,
     helpText,
-    withPadding = true
+    withPadding = true,
+    errors: errorsProp
   } = props;
+  const errors = errorsProp == null ? void 0 : errorsProp.filter(Boolean);
   const { classes } = useTitleStyles();
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
@@ -42738,6 +43258,11 @@ function TitleInfo(props) {
       {
         urls
       }
+    ) : null, Array.isArray(errors) && errors.length > 0 ? /* @__PURE__ */ React__default.createElement(
+      ErrorInfo,
+      {
+        errors
+      }
     ) : null, helpText ? /* @__PURE__ */ React__default.createElement(
       HelpButton,
       {
@@ -42770,12 +43295,16 @@ function TitleInfo(props) {
     ))
   );
 }
-function warn(error, setWarning) {
-  setWarning(error.message);
-  log$1.warn(error.message);
-  log$1.error(error.stack);
-  if (error instanceof AbstractLoaderError) {
-    error.warnInConsole();
+class VitessceError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "VitessceError";
+  }
+}
+class LoaderNotFoundError extends VitessceError {
+  constructor(message) {
+    super(message);
+    this.name = "LoaderNotFoundError";
   }
 }
 function initCoordinationSpace(values2, setters, initialValues) {
@@ -42804,13 +43333,12 @@ async function dataQueryFn(ctx) {
     return { data, coordinationValues, urls, requestInit: requestInit2 };
   }
   if (isRequired) {
-    throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+    throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${dataType}, ${JSON.stringify(matchOn)}`);
   } else {
     return { data: placeholderObject };
   }
 }
 function useDataType(dataType, loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOn) {
-  const setWarning = useSetWarning();
   const placeholderObject = useMemo(() => ({}), []);
   const dataQuery = useQuery({
     // TODO: only enable when loaders has been initialized?
@@ -42831,7 +43359,6 @@ function useDataType(dataType, loaders, dataset, isRequired, coordinationSetters
   const loadedData = (data == null ? void 0 : data.data) || placeholderObject;
   const coordinationValues = data == null ? void 0 : data.coordinationValues;
   const urls = data == null ? void 0 : data.urls;
-  const requestInit2 = data == null ? void 0 : data.requestInit;
   useEffect(() => {
     initCoordinationSpace(
       coordinationValues,
@@ -42839,17 +43366,11 @@ function useDataType(dataType, loaders, dataset, isRequired, coordinationSetters
       initialCoordinationValues
     );
   }, [coordinationValues]);
-  useEffect(() => {
-    if (error) {
-      warn(error, setWarning);
-    }
-  }, [error, setWarning]);
   const dataStatus = isFetching ? STATUS.LOADING : status;
-  return [loadedData, dataStatus, urls, requestInit2];
+  return [loadedData, dataStatus, urls, error];
 }
 function useDataTypeMulti(dataType, loaders, dataset, isRequired, coordinationSetters, initialCoordinationValues, matchOnObj, mergeCoordination, viewUid) {
   const placeholderObject = useMemo(() => ({}), []);
-  const setWarning = useSetWarning();
   const matchOnEntries = matchOnObj ? Object.entries(matchOnObj) : [];
   const dataQueries = useQueries({
     // eslint-disable-next-line no-unused-vars
@@ -42870,6 +43391,7 @@ function useDataTypeMulti(dataType, loaders, dataset, isRequired, coordinationSe
   });
   const anyLoading = dataQueries.some((q) => q.isFetching);
   const anyError = dataQueries.some((q) => q.isError);
+  const errors = anyError ? dataQueries.filter((q) => q.isError).map((q) => q.error) : [];
   const dataStatus = anyLoading ? STATUS.LOADING : anyError ? STATUS.ERROR : STATUS.SUCCESS;
   const isSuccess = dataStatus === STATUS.SUCCESS;
   useEffect(() => {
@@ -42894,11 +43416,6 @@ function useDataTypeMulti(dataType, loaders, dataset, isRequired, coordinationSe
       }
     });
   }, [isSuccess]);
-  useEffect(() => {
-    dataQueries.map((q) => q.error).filter((e) => Boolean(e)).forEach((error) => {
-      warn(error, setWarning);
-    });
-  }, [anyError, setWarning]);
   const data = useMemo(() => Object.fromEntries(
     matchOnEntries.map(([scopeKey], i) => {
       var _a2;
@@ -42917,7 +43434,7 @@ function useDataTypeMulti(dataType, loaders, dataset, isRequired, coordinationSe
     // Deliberate dependency omissions: matchOnEntries, since dataQueries depends on it.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   ), [dataQueries]);
-  return [data, dataStatus, urls];
+  return [data, dataStatus, urls, errors];
 }
 function useHasLoader(loaders, dataset, dataType, matchOn) {
   const loader = useMatchingLoader(loaders, dataset, dataType, matchOn);
@@ -43103,7 +43620,6 @@ function useComparisonMetadata(loaders, dataset, isRequired, coordinationSetters
   );
 }
 function useFeatureSelection(loaders, dataset, isRequired, selection, matchOn) {
-  const setWarning = useSetWarning();
   const featureQueries = useQueries({
     queries: (selection == null ? void 0 : selection.map((featureId) => ({
       structuralSharing: false,
@@ -43140,7 +43656,7 @@ function useFeatureSelection(loaders, dataset, isRequired, selection, matchOn) {
           return { data: expressionData, dataKey: featureId };
         }
         if (isRequired) {
-          throw new LoaderNotFoundError(loaders, dataset, DataType$1.OBS_FEATURE_MATRIX, matchOn);
+          throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${DataType$1.OBS_FEATURE_MATRIX}, ${JSON.stringify(matchOn)}`);
         } else {
           return { data: null, dataKey: null };
         }
@@ -43150,6 +43666,7 @@ function useFeatureSelection(loaders, dataset, isRequired, selection, matchOn) {
   });
   const anyLoading = featureQueries.some((q) => q.isFetching);
   const anyError = featureQueries.some((q) => q.isError);
+  const errors = anyError ? featureQueries.filter((q) => q.isError).map((q) => q.error) : [];
   const dataStatus = anyLoading ? STATUS.LOADING : anyError ? STATUS.ERROR : STATUS.SUCCESS;
   const isSuccess = dataStatus === STATUS.SUCCESS;
   const geneData = useMemo(() => isSuccess ? featureQueries.map((q) => {
@@ -43160,15 +43677,9 @@ function useFeatureSelection(loaders, dataset, isRequired, selection, matchOn) {
     var _a2;
     return ((_a2 = q.data) == null ? void 0 : _a2.dataKey) || null;
   }) : null, [isSuccess, selection, dataset]);
-  useEffect(() => {
-    featureQueries.map((q) => q.error).filter((e) => Boolean(e)).forEach((error) => {
-      warn(error, setWarning);
-    });
-  }, [anyError, setWarning]);
-  return [geneData, loadedGeneName, dataStatus];
+  return [geneData, loadedGeneName, dataStatus, errors];
 }
 function useComparativeDataType(loaders, dataset, isRequired, matchOn, volcanoOptions, dataType) {
-  const setWarning = useSetWarning();
   const placeholderObject = useMemo(() => ({}), []);
   const statsQuery = useQuery({
     // TODO: only enable once `loaders` is available?
@@ -43205,7 +43716,7 @@ function useComparativeDataType(loaders, dataset, isRequired, matchOn, volcanoOp
         };
       }
       if (isRequired) {
-        throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+        throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${dataType}, ${JSON.stringify(matchOn)}`);
       } else {
         return { data: placeholderObject, dataKey: null };
       }
@@ -43216,12 +43727,7 @@ function useComparativeDataType(loaders, dataset, isRequired, matchOn, volcanoOp
   const loadedData = (data == null ? void 0 : data.data) || placeholderObject;
   const dataStatus = isFetching ? STATUS.LOADING : status;
   const urls = data == null ? void 0 : data.urls;
-  useEffect(() => {
-    if (error) {
-      setWarning(error.message);
-    }
-  }, [error, setWarning]);
-  return [loadedData, dataStatus, urls];
+  return [loadedData, dataStatus, urls, error];
 }
 function useFeatureStatsData(loaders, dataset, isRequired, matchOn, volcanoOptions) {
   return useComparativeDataType(
@@ -43254,7 +43760,6 @@ function useObsSetStatsData(loaders, dataset, isRequired, matchOn, volcanoOption
   );
 }
 function useObsFeatureMatrixIndices(loaders, dataset, isRequired, matchOn) {
-  const setWarning = useSetWarning();
   const placeholderObject = useMemo(() => ({}), []);
   const indicesQuery = useQuery({
     // TODO: only enable once `loaders` is available?
@@ -43301,7 +43806,7 @@ function useObsFeatureMatrixIndices(loaders, dataset, isRequired, matchOn) {
         };
       }
       if (isRequired) {
-        throw new LoaderNotFoundError(loaders, dataset, DataType$1.OBS_FEATURE_MATRIX, matchOn);
+        throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${DataType$1.OBS_FEATURE_MATRIX}, ${JSON.stringify(matchOn)}`);
       } else {
         return { data: placeholderObject, dataKey: null };
       }
@@ -43312,12 +43817,7 @@ function useObsFeatureMatrixIndices(loaders, dataset, isRequired, matchOn) {
   const loadedData = (data == null ? void 0 : data.data) || placeholderObject;
   const dataStatus = isFetching ? STATUS.LOADING : status;
   const urls = data == null ? void 0 : data.urls;
-  useEffect(() => {
-    if (error) {
-      setWarning(error.message);
-    }
-  }, [error, setWarning]);
-  return [loadedData, dataStatus, urls];
+  return [loadedData, dataStatus, urls, error];
 }
 function useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, viewUid) {
   const obsTypeCoordination = useComplexCoordination(
@@ -43335,7 +43835,7 @@ function useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, da
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [obsPointsData, obsPointsDataStatus, obsPointsUrls] = useDataTypeMulti(
+  const [obsPointsData, obsPointsDataStatus, obsPointsUrls, obsPointsErrors] = useDataTypeMulti(
     DataType$1.OBS_POINTS,
     loaders,
     dataset,
@@ -43346,7 +43846,7 @@ function useMultiObsPoints(coordinationScopes, coordinationScopesBy, loaders, da
     mergeCoordination,
     viewUid
   );
-  return [obsPointsData, obsPointsDataStatus, obsPointsUrls];
+  return [obsPointsData, obsPointsDataStatus, obsPointsUrls, obsPointsErrors];
 }
 function useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, viewUid) {
   const obsTypeCoordination = useComplexCoordination(
@@ -43364,7 +43864,7 @@ function useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dat
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls] = useDataTypeMulti(
+  const [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls, obsSpotsErrors] = useDataTypeMulti(
     DataType$1.OBS_SPOTS,
     loaders,
     dataset,
@@ -43375,7 +43875,7 @@ function useMultiObsSpots(coordinationScopes, coordinationScopesBy, loaders, dat
     mergeCoordination,
     viewUid
   );
-  return [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls];
+  return [obsSpotsData, obsSpotsDataStatus, obsSpotsUrls, obsSpotsErrors];
 }
 function useSpotMultiObsSets(coordinationScopes, coordinationScopesBy, loaders, dataset) {
   const obsTypeCoordination = useComplexCoordination(
@@ -43393,7 +43893,7 @@ function useSpotMultiObsSets(coordinationScopes, coordinationScopesBy, loaders,
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [obsSetsData, obsSetsDataStatus, obsSetsUrls] = useDataTypeMulti(
+  const [obsSetsData, obsSetsDataStatus, obsSetsUrls, obsSetsErrors] = useDataTypeMulti(
     DataType$1.OBS_SETS,
     loaders,
     dataset,
@@ -43402,7 +43902,7 @@ function useSpotMultiObsSets(coordinationScopes, coordinationScopesBy, loaders,
     {},
     matchOnObj
   );
-  return [obsSetsData, obsSetsDataStatus, obsSetsUrls];
+  return [obsSetsData, obsSetsDataStatus, obsSetsUrls, obsSetsErrors];
 }
 function useSpotMultiFeatureLabels(coordinationScopes, coordinationScopesBy, loaders, dataset) {
   const featureTypeCoordination = useComplexCoordination(
@@ -43420,7 +43920,12 @@ function useSpotMultiFeatureLabels(coordinationScopes, coordinationScopesBy, loa
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [featureLabelsData, featureLabelsStatus, featureLabelsUrls] = useDataTypeMulti(
+  const [
+    featureLabelsData,
+    featureLabelsStatus,
+    featureLabelsUrls,
+    featureLabelsErrors
+  ] = useDataTypeMulti(
     DataType$1.FEATURE_LABELS,
     loaders,
     dataset,
@@ -43429,7 +43934,12 @@ function useSpotMultiFeatureLabels(coordinationScopes, coordinationScopesBy, loa
     {},
     matchOnObj
   );
-  return [featureLabelsData, featureLabelsStatus, featureLabelsUrls];
+  return [
+    featureLabelsData,
+    featureLabelsStatus,
+    featureLabelsUrls,
+    featureLabelsErrors
+  ];
 }
 function useMultiObsLabels(coordinationScopes, obsType, loaders, dataset) {
   const obsLabelsTypes = useMultiCoordinationValues(
@@ -43442,7 +43952,7 @@ function useMultiObsLabels(coordinationScopes, obsType, loaders, dataset) {
       { obsLabelsType, obsType }
     ])
   ), [obsLabelsTypes, obsType]);
-  const [obsLabelsData, obsLabelsDataStatus, obsLabelsUrls] = useDataTypeMulti(
+  const [obsLabelsData, obsLabelsDataStatus, obsLabelsUrls, obsLabelsErrors] = useDataTypeMulti(
     DataType$1.OBS_LABELS,
     loaders,
     dataset,
@@ -43451,7 +43961,7 @@ function useMultiObsLabels(coordinationScopes, obsType, loaders, dataset) {
     {},
     obsLabelsMatchOnObj
   );
-  return [obsLabelsTypes, obsLabelsData, obsLabelsDataStatus, obsLabelsUrls];
+  return [obsLabelsTypes, obsLabelsData, obsLabelsDataStatus, obsLabelsUrls, obsLabelsErrors];
 }
 function useMultiObsSegmentations(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, viewUid) {
   const imageCoordination = useComplexCoordination(
@@ -43472,7 +43982,8 @@ function useMultiObsSegmentations(coordinationScopes, coordinationScopesBy, load
   const [
     obsSegmentationsData,
     obsSegmentationsDataStatus,
-    obsSegmentationsUrls
+    obsSegmentationsUrls,
+    obsSegmentationsErrors
   ] = useDataTypeMulti(
     DataType$1.OBS_SEGMENTATIONS,
     loaders,
@@ -43484,7 +43995,12 @@ function useMultiObsSegmentations(coordinationScopes, coordinationScopesBy, load
     mergeCoordination,
     viewUid
   );
-  return [obsSegmentationsData, obsSegmentationsDataStatus, obsSegmentationsUrls];
+  return [
+    obsSegmentationsData,
+    obsSegmentationsDataStatus,
+    obsSegmentationsUrls,
+    obsSegmentationsErrors
+  ];
 }
 function useMultiImages(coordinationScopes, coordinationScopesBy, loaders, dataset, mergeCoordination, viewUid) {
   const imageCoordination = useComplexCoordination(
@@ -43502,7 +44018,7 @@ function useMultiImages(coordinationScopes, coordinationScopesBy, loaders, datas
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [imageData, imageDataStatus, imageUrls] = useDataTypeMulti(
+  const [imageData, imageDataStatus, imageUrls, imageErrors] = useDataTypeMulti(
     DataType$1.IMAGE,
     loaders,
     dataset,
@@ -43513,7 +44029,7 @@ function useMultiImages(coordinationScopes, coordinationScopesBy, loaders, datas
     mergeCoordination,
     viewUid
   );
-  return [imageData, imageDataStatus, imageUrls];
+  return [imageData, imageDataStatus, imageUrls, imageErrors];
 }
 function getFeatureSelectionQueryKeyScopeTuplesAux(allSelections, allMatchOnObj, depth, dataset, dataType, isRequired, prevLevelScopes, currSelection, currMatchOn) {
   var _a2;
@@ -43705,13 +44221,12 @@ async function featureSelectionQueryFn(ctx) {
     };
   }
   if (isRequired) {
-    throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+    throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${dataType}, ${JSON.stringify(matchOn)}`);
   } else {
     return { data: null, dataKey: null };
   }
 }
 function useFeatureSelectionMultiLevel(loaders, dataset, isRequired, matchOnObj, selections, depth) {
-  const setWarning = useSetWarning();
   const queryKeyScopeTuples = useMemo(() => getFeatureSelectionQueryKeyScopeTuples(
     selections,
     matchOnObj,
@@ -43731,6 +44246,7 @@ function useFeatureSelectionMultiLevel(loaders, dataset, isRequired, matchOnObj,
   });
   const anyLoading = featureQueries.some((q) => q.isFetching);
   const anyError = featureQueries.some((q) => q.isError);
+  const errors = anyError ? featureQueries.filter((q) => q.isError).map((q) => q.error) : [];
   const dataStatus = anyLoading ? STATUS.LOADING : anyError ? STATUS.ERROR : STATUS.SUCCESS;
   const flatGeneData = featureQueries.map((q) => {
     var _a2;
@@ -43748,11 +44264,6 @@ function useFeatureSelectionMultiLevel(loaders, dataset, isRequired, matchOnObj,
     var _a2;
     return ((_a2 = q.data) == null ? void 0 : _a2.normData) || null;
   });
-  useEffect(() => {
-    featureQueries.map((q) => q.error).filter((e) => Boolean(e)).forEach((error) => {
-      warn(error, setWarning);
-    });
-  }, [anyError, setWarning]);
   const [geneData, loadedGeneName, extents, normData] = useMemo(() => {
     const nestedGeneData = nestFeatureSelectionQueryResults(queryKeyScopeTuples, flatGeneData);
     const nestedLoadedGeneName = nestFeatureSelectionQueryResults(
@@ -43763,7 +44274,7 @@ function useFeatureSelectionMultiLevel(loaders, dataset, isRequired, matchOnObj,
     const nestedNormData = nestFeatureSelectionQueryResults(queryKeyScopeTuples, flatNormData);
     return [nestedGeneData, nestedLoadedGeneName, nestedExtents, nestedNormData];
   }, [featureQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
-  return [geneData, loadedGeneName, extents, normData, dataStatus];
+  return [geneData, loadedGeneName, extents, normData, dataStatus, errors];
 }
 async function matrixIndicesQueryFn(ctx) {
   const { loaders } = ctx.meta;
@@ -43793,13 +44304,12 @@ async function matrixIndicesQueryFn(ctx) {
     };
   }
   if (isRequired) {
-    throw new LoaderNotFoundError(loaders, dataset, dataType, matchOn);
+    throw new LoaderNotFoundError(`Loader not found for parameters: ${dataset}, ${dataType}, ${JSON.stringify(matchOn)}`);
   } else {
     return { data: null, dataKey: null };
   }
 }
 function useObsFeatureMatrixIndicesMultiLevel(loaders, dataset, isRequired, matchOnObj, depth) {
-  const setWarning = useSetWarning();
   const queryKeyScopeTuples = useMemo(() => getMatrixIndicesQueryKeyScopeTuples(
     matchOnObj,
     depth,
@@ -43818,24 +44328,19 @@ function useObsFeatureMatrixIndicesMultiLevel(loaders, dataset, isRequired, matc
   });
   const anyLoading = indicesQueries.some((q) => q.isFetching);
   const anyError = indicesQueries.some((q) => q.isError);
+  const errors = anyError ? indicesQueries.filter((q) => q.isError).map((q) => q.error) : [];
   const dataStatus = anyLoading ? STATUS.LOADING : anyError ? STATUS.ERROR : STATUS.SUCCESS;
   const flatIndicesData = indicesQueries.map((q) => {
     var _a2;
     return ((_a2 = q.data) == null ? void 0 : _a2.data) || null;
   });
-  useEffect(() => {
-    indicesQueries.map((q) => q.error).filter((e) => Boolean(e)).forEach((error) => {
-      warn(error, setWarning);
-    });
-  }, [anyError, setWarning]);
   const indicesData = useMemo(() => {
     const nestedIndicesData = nestQueryResults(queryKeyScopeTuples, flatIndicesData);
     return nestedIndicesData;
   }, [indicesQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
-  return [indicesData, dataStatus];
+  return [indicesData, dataStatus, errors];
 }
 function useDataTypeMultiLevel(loaders, dataset, isRequired, matchOnObj, depth, dataType) {
-  const setWarning = useSetWarning();
   const queryKeyScopeTuples = useMemo(() => getQueryKeyScopeTuples(
     matchOnObj,
     depth,
@@ -43854,21 +44359,17 @@ function useDataTypeMultiLevel(loaders, dataset, isRequired, matchOnObj, depth,
   });
   const anyLoading = locationsQueries.some((q) => q.isFetching);
   const anyError = locationsQueries.some((q) => q.isError);
+  const errors = anyError ? locationsQueries.filter((q) => q.isError).map((q) => q.error) : [];
   const dataStatus = anyLoading ? STATUS.LOADING : anyError ? STATUS.ERROR : STATUS.SUCCESS;
   const flatIndicesData = locationsQueries.map((q) => {
     var _a2;
     return ((_a2 = q.data) == null ? void 0 : _a2.data) || null;
   });
-  useEffect(() => {
-    locationsQueries.map((q) => q.error).filter((e) => Boolean(e)).forEach((error) => {
-      warn(error, setWarning);
-    });
-  }, [anyError, setWarning]);
   const locationsData = useMemo(() => {
     const nestedIndicesData = nestQueryResults(queryKeyScopeTuples, flatIndicesData);
     return nestedIndicesData;
   }, [locationsQueries.reduce((a, h) => a + h.dataUpdatedAt, 0), queryKeyScopeTuples]);
-  return [locationsData, dataStatus];
+  return [locationsData, dataStatus, errors];
 }
 function useObsLocationsMultiLevel(loaders, dataset, isRequired, matchOnObj, depth) {
   return useDataTypeMultiLevel(
@@ -43952,7 +44453,8 @@ function useSegmentationMultiFeatureSelection(coordinationScopes, coordinationSc
     loadedSelections,
     extents,
     normData,
-    featureStatus
+    featureStatus,
+    errors
   ] = useFeatureSelectionMultiLevel(
     loaders,
     dataset,
@@ -43961,7 +44463,7 @@ function useSegmentationMultiFeatureSelection(coordinationScopes, coordinationSc
     selections,
     2
   );
-  return [featureData, loadedSelections, extents, normData, featureStatus];
+  return [featureData, loadedSelections, extents, normData, featureStatus, errors];
 }
 function useSpotMultiFeatureSelection(coordinationScopes, coordinationScopesBy, loaders, dataset) {
   const obsFeatureMatrixCoordination = useComplexCoordination(
@@ -44008,7 +44510,8 @@ function useSpotMultiFeatureSelection(coordinationScopes, coordinationScopesBy,
     loadedSelections,
     extents,
     normData,
-    featureStatus
+    featureStatus,
+    errors
   ] = useFeatureSelectionMultiLevel(
     loaders,
     dataset,
@@ -44017,7 +44520,7 @@ function useSpotMultiFeatureSelection(coordinationScopes, coordinationScopesBy,
     selections,
     1
   );
-  return [featureData, loadedSelections, extents, normData, featureStatus];
+  return [featureData, loadedSelections, extents, normData, featureStatus, errors];
 }
 function useSegmentationMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset) {
   const obsFeatureMatrixCoordination = useComplexCoordinationSecondary(
@@ -44038,14 +44541,14 @@ function useSegmentationMultiObsFeatureMatrixIndices(coordinationScopes, coordin
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [indicesData, indicesDataStatus] = useObsFeatureMatrixIndicesMultiLevel(
+  const [indicesData, indicesDataStatus, indicesDataErrors] = useObsFeatureMatrixIndicesMultiLevel(
     loaders,
     dataset,
     false,
     matchOnObj,
     2
   );
-  return [indicesData, indicesDataStatus];
+  return [indicesData, indicesDataStatus, indicesDataErrors];
 }
 function useSpotMultiObsFeatureMatrixIndices(coordinationScopes, coordinationScopesBy, loaders, dataset) {
   const obsFeatureMatrixCoordination = useComplexCoordination(
@@ -44065,14 +44568,14 @@ function useSpotMultiObsFeatureMatrixIndices(coordinationScopes, coordinationSco
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [indicesData, indicesDataStatus] = useObsFeatureMatrixIndicesMultiLevel(
+  const [indicesData, indicesDataStatus, indicesDataErrors] = useObsFeatureMatrixIndicesMultiLevel(
     loaders,
     dataset,
     false,
     matchOnObj,
     1
   );
-  return [indicesData, indicesDataStatus];
+  return [indicesData, indicesDataStatus, indicesDataErrors];
 }
 function usePointMultiObsLabels(coordinationScopes, coordinationScopesBy, loaders, dataset) {
   const obsLabelsCoordination = useComplexCoordination(
@@ -44091,14 +44594,14 @@ function usePointMultiObsLabels(coordinationScopes, coordinationScopesBy, loader
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [indicesData, indicesDataStatus] = useObsLabelsMultiLevel(
+  const [indicesData, indicesDataStatus, indicesDataErrors] = useObsLabelsMultiLevel(
     loaders,
     dataset,
     false,
     matchOnObj,
     1
   );
-  return [indicesData, indicesDataStatus];
+  return [indicesData, indicesDataStatus, indicesDataErrors];
 }
 function useSegmentationMultiObsLocations(coordinationScopes, coordinationScopesBy, loaders, dataset) {
   const obsTypeCoordination = useComplexCoordinationSecondary(
@@ -44117,14 +44620,14 @@ function useSegmentationMultiObsLocations(coordinationScopes, coordinationScopes
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [indicesData, indicesDataStatus] = useObsLocationsMultiLevel(
+  const [indicesData, indicesDataStatus, indicesDataErrors] = useObsLocationsMultiLevel(
     loaders,
     dataset,
     false,
     matchOnObj,
     2
   );
-  return [indicesData, indicesDataStatus];
+  return [indicesData, indicesDataStatus, indicesDataErrors];
 }
 function useSegmentationMultiObsSets(coordinationScopes, coordinationScopesBy, loaders, dataset) {
   const obsTypeCoordination = useComplexCoordinationSecondary(
@@ -44143,14 +44646,14 @@ function useSegmentationMultiObsSets(coordinationScopes, coordinationScopesBy, l
     // indirect dependencies here.
     [coordinationScopes, coordinationScopesBy]
   );
-  const [indicesData, indicesDataStatus] = useObsSetsMultiLevel(
+  const [indicesData, indicesDataStatus, indicesDataErrors] = useObsSetsMultiLevel(
     loaders,
     dataset,
     false,
     matchOnObj,
     2
   );
-  return [indicesData, indicesDataStatus];
+  return [indicesData, indicesDataStatus, indicesDataErrors];
 }
 const $b5e257d569688ac6$var$defaultContext = {
   prefix: String(Math.round(Math.random() * 1e10)),