@vitessce/statistical-plots 3.6.7 → 3.6.9

package/dist/{index-DKYKw8DX.js → index-Dhdy8_KV.js}

@@ -163,9 +163,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",
@@ -174,6 +172,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",
@@ -432,6 +431,7 @@ const ViewHelpMapping = {
   [FileType$1.OBS_FEATURE_MATRIX_SPATIALDATA_ZARR]: DataType$2.OBS_FEATURE_MATRIX,
   [FileType$1.OBS_SETS_SPATIALDATA_ZARR]: DataType$2.OBS_SETS,
   [FileType$1.FEATURE_LABELS_SPATIALDATA_ZARR]: DataType$2.FEATURE_LABELS,
+  [FileType$1.OBS_POINTS_SPATIALDATA_ZARR]: DataType$2.OBS_POINTS,
   // For new file types to support old file types
   [FileType$1.OBS_EMBEDDING_CELLS_JSON]: DataType$2.OBS_EMBEDDING,
   [FileType$1.OBS_LOCATIONS_CELLS_JSON]: DataType$2.OBS_LOCATIONS,
@@ -605,6 +605,9 @@ const ViewHelpMapping = {
   },
   [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
   }
 });
 [
@@ -8241,6 +8244,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")
+});
 configSchema1_0_0.shape.coordinationSpace.unwrap();
 configSchema1_0_0.shape.layout.element.shape.coordinationScopes.unwrap();
 function upgradeReplaceViewProp(prefix2, view, coordinationSpace) {
@@ -8748,7 +8754,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],
@@ -8767,7 +8820,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$3 = { exports: {} };
 var constants$3;
@@ -11010,10 +11064,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({
@@ -11133,13 +11191,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
@@ -28067,6 +28122,586 @@ ButtonBase.propTypes = {
    */
   type: _pt.oneOfType([_pt.oneOf(["button", "reset", "submit"]), _pt.string])
 };
+function hasCorrectMainProperty(obj) {
+  return typeof obj.main === "string";
+}
+function checkSimplePaletteColorValues(obj, additionalPropertiesToCheck = []) {
+  if (!hasCorrectMainProperty(obj)) {
+    return false;
+  }
+  for (const value2 of additionalPropertiesToCheck) {
+    if (!obj.hasOwnProperty(value2) || typeof obj[value2] !== "string") {
+      return false;
+    }
+  }
+  return true;
+}
+function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
+  return ([, value2]) => value2 && checkSimplePaletteColorValues(value2, additionalPropertiesToCheck);
+}
+function getCircularProgressUtilityClass(slot) {
+  return generateUtilityClass("MuiCircularProgress", slot);
+}
+generateUtilityClasses("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
+const SIZE$2 = 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$1j = (ownerState) => {
+  const {
+    classes: classes2,
+    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, classes2);
+};
+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.forwardRef(function CircularProgress2(inProps, ref2) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiCircularProgress"
+  });
+  const {
+    className,
+    color: color2 = "primary",
+    disableShrink = false,
+    size = 40,
+    style: style2,
+    thickness = 3.6,
+    value: value2 = 0,
+    variant = "indeterminate",
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
+    color: color2,
+    disableShrink,
+    size,
+    thickness,
+    value: value2,
+    variant
+  };
+  const classes2 = useUtilityClasses$1j(ownerState);
+  const circleStyle = {};
+  const rootStyle = {};
+  const rootProps = {};
+  if (variant === "determinate") {
+    const circumference = 2 * Math.PI * ((SIZE$2 - thickness) / 2);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps["aria-valuenow"] = Math.round(value2);
+    circleStyle.strokeDashoffset = `${((100 - value2) / 100 * circumference).toFixed(3)}px`;
+    rootStyle.transform = "rotate(-90deg)";
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, {
+    className: clsx(classes2.root, className),
+    style: {
+      width: size,
+      height: size,
+      ...rootStyle,
+      ...style2
+    },
+    ownerState,
+    ref: ref2,
+    role: "progressbar",
+    ...rootProps,
+    ...other,
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressSVG, {
+      className: classes2.svg,
+      ownerState,
+      viewBox: `${SIZE$2 / 2} ${SIZE$2 / 2} ${SIZE$2} ${SIZE$2}`,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressCircle, {
+        className: classes2.circle,
+        style: circleStyle,
+        ownerState,
+        cx: SIZE$2,
+        cy: SIZE$2,
+        r: (SIZE$2 - 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: _pt.object,
+  /**
+   * @ignore
+   */
+  className: _pt.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: _pt.oneOfType([_pt.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), _pt.string]),
+  /**
+   * If `true`, the shrink animation is disabled.
+   * This only works if variant is `indeterminate`.
+   * @default false
+   */
+  disableShrink: chainPropTypes(_pt.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: _pt.oneOfType([_pt.number, _pt.string]),
+  /**
+   * @ignore
+   */
+  style: _pt.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object]),
+  /**
+   * The thickness of the circle.
+   * @default 3.6
+   */
+  thickness: _pt.number,
+  /**
+   * The value of the progress indicator for the determinate variant.
+   * Value between 0 and 100.
+   * @default 0
+   */
+  value: _pt.number,
+  /**
+   * The variant to use.
+   * Use indeterminate when there is no progress value.
+   * @default 'indeterminate'
+   */
+  variant: _pt.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$1i = (ownerState) => {
+  const {
+    classes: classes2,
+    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, classes2);
+};
+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$1(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$1((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.forwardRef(function IconButton2(inProps, ref2) {
+  const props = useDefaultProps({
+    props: inProps,
+    name: "MuiIconButton"
+  });
+  const {
+    edge = false,
+    children: children2,
+    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 classes2 = useUtilityClasses$1i(ownerState);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
+    id: loading ? loadingId : idProp,
+    className: clsx(classes2.root, className),
+    centerRipple: true,
+    focusRipple: !disableFocusRipple,
+    disabled: disabled || loading,
+    ref: ref2,
+    ...other,
+    ownerState,
+    children: [typeof loading === "boolean" && // use plain HTML span to minimize the runtime overhead
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+      className: classes2.loadingWrapper,
+      style: {
+        display: "contents"
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonLoadingIndicator, {
+        className: classes2.loadingIndicator,
+        ownerState,
+        children: loading && loadingIndicator
+      })
+    }), children2]
+  });
+});
+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(_pt.node, (props) => {
+    const found = React.Children.toArray(props.children).some((child) => /* @__PURE__ */ React.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: _pt.object,
+  /**
+   * @ignore
+   */
+  className: _pt.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: _pt.oneOfType([_pt.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), _pt.string]),
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: _pt.bool,
+  /**
+   * If `true`, the  keyboard focus ripple is disabled.
+   * @default false
+   */
+  disableFocusRipple: _pt.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: _pt.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: _pt.oneOf(["end", "start", false]),
+  /**
+   * @ignore
+   */
+  id: _pt.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: _pt.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: _pt.node,
+  /**
+   * The size of the component.
+   * `small` is equivalent to the dense button styling.
+   * @default 'medium'
+   */
+  size: _pt.oneOfType([_pt.oneOf(["small", "medium", "large"]), _pt.string]),
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object])
+};
+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 usePreviousProps = (value2) => {
   const ref2 = React.useRef({});
   React.useEffect(() => {
@@ -30494,7 +31129,7 @@ function isHTMLElement(element2) {
 function isVirtualElement(element2) {
   return !isHTMLElement(element2);
 }
-const useUtilityClasses$1j = (ownerState) => {
+const useUtilityClasses$1h = (ownerState) => {
   const {
     classes: classes2
   } = ownerState;
@@ -30603,7 +31238,7 @@ const PopperTooltip = /* @__PURE__ */ React.forwardRef(function PopperTooltip2(p
   if (TransitionProps !== null) {
     childProps.TransitionProps = TransitionProps;
   }
-  const classes2 = useUtilityClasses$1j(props);
+  const classes2 = useUtilityClasses$1h(props);
   const Root = slots.root ?? "div";
   const rootProps = useSlotProps({
     elementType: Root,
@@ -31002,7 +31637,7 @@ function getListSubheaderUtilityClass(slot) {
   return generateUtilityClass("MuiListSubheader", slot);
 }
 generateUtilityClasses("MuiListSubheader", ["root", "colorPrimary", "colorInherit", "gutters", "inset", "sticky"]);
-const useUtilityClasses$1i = (ownerState) => {
+const useUtilityClasses$1g = (ownerState) => {
   const {
     classes: classes2,
     color: color2,
@@ -31097,7 +31732,7 @@ const ListSubheader = /* @__PURE__ */ React.forwardRef(function ListSubheader2(i
     disableSticky,
     inset
   };
-  const classes2 = useUtilityClasses$1i(ownerState);
+  const classes2 = useUtilityClasses$1g(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(ListSubheaderRoot, {
     as: component,
     className: clsx(classes2.root, className),
@@ -31156,583 +31791,6 @@ ListSubheader.propTypes = {
    */
   sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object])
 };
-function hasCorrectMainProperty(obj) {
-  return typeof obj.main === "string";
-}
-function checkSimplePaletteColorValues(obj, additionalPropertiesToCheck = []) {
-  if (!hasCorrectMainProperty(obj)) {
-    return false;
-  }
-  for (const value2 of additionalPropertiesToCheck) {
-    if (!obj.hasOwnProperty(value2) || typeof obj[value2] !== "string") {
-      return false;
-    }
-  }
-  return true;
-}
-function createSimplePaletteValueFilter(additionalPropertiesToCheck = []) {
-  return ([, value2]) => value2 && checkSimplePaletteColorValues(value2, additionalPropertiesToCheck);
-}
-function getCircularProgressUtilityClass(slot) {
-  return generateUtilityClass("MuiCircularProgress", slot);
-}
-generateUtilityClasses("MuiCircularProgress", ["root", "determinate", "indeterminate", "colorPrimary", "colorSecondary", "svg", "circle", "circleDeterminate", "circleIndeterminate", "circleDisableShrink"]);
-const SIZE$2 = 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$1h = (ownerState) => {
-  const {
-    classes: classes2,
-    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, classes2);
-};
-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.forwardRef(function CircularProgress2(inProps, ref2) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiCircularProgress"
-  });
-  const {
-    className,
-    color: color2 = "primary",
-    disableShrink = false,
-    size = 40,
-    style: style2,
-    thickness = 3.6,
-    value: value2 = 0,
-    variant = "indeterminate",
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
-    color: color2,
-    disableShrink,
-    size,
-    thickness,
-    value: value2,
-    variant
-  };
-  const classes2 = useUtilityClasses$1h(ownerState);
-  const circleStyle = {};
-  const rootStyle = {};
-  const rootProps = {};
-  if (variant === "determinate") {
-    const circumference = 2 * Math.PI * ((SIZE$2 - thickness) / 2);
-    circleStyle.strokeDasharray = circumference.toFixed(3);
-    rootProps["aria-valuenow"] = Math.round(value2);
-    circleStyle.strokeDashoffset = `${((100 - value2) / 100 * circumference).toFixed(3)}px`;
-    rootStyle.transform = "rotate(-90deg)";
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, {
-    className: clsx(classes2.root, className),
-    style: {
-      width: size,
-      height: size,
-      ...rootStyle,
-      ...style2
-    },
-    ownerState,
-    ref: ref2,
-    role: "progressbar",
-    ...rootProps,
-    ...other,
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressSVG, {
-      className: classes2.svg,
-      ownerState,
-      viewBox: `${SIZE$2 / 2} ${SIZE$2 / 2} ${SIZE$2} ${SIZE$2}`,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressCircle, {
-        className: classes2.circle,
-        style: circleStyle,
-        ownerState,
-        cx: SIZE$2,
-        cy: SIZE$2,
-        r: (SIZE$2 - 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: _pt.object,
-  /**
-   * @ignore
-   */
-  className: _pt.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: _pt.oneOfType([_pt.oneOf(["inherit", "primary", "secondary", "error", "info", "success", "warning"]), _pt.string]),
-  /**
-   * If `true`, the shrink animation is disabled.
-   * This only works if variant is `indeterminate`.
-   * @default false
-   */
-  disableShrink: chainPropTypes(_pt.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: _pt.oneOfType([_pt.number, _pt.string]),
-  /**
-   * @ignore
-   */
-  style: _pt.object,
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object]),
-  /**
-   * The thickness of the circle.
-   * @default 3.6
-   */
-  thickness: _pt.number,
-  /**
-   * The value of the progress indicator for the determinate variant.
-   * Value between 0 and 100.
-   * @default 0
-   */
-  value: _pt.number,
-  /**
-   * The variant to use.
-   * Use indeterminate when there is no progress value.
-   * @default 'indeterminate'
-   */
-  variant: _pt.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$1g = (ownerState) => {
-  const {
-    classes: classes2,
-    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, classes2);
-};
-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$1(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$1((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.forwardRef(function IconButton2(inProps, ref2) {
-  const props = useDefaultProps({
-    props: inProps,
-    name: "MuiIconButton"
-  });
-  const {
-    edge = false,
-    children: children2,
-    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 classes2 = useUtilityClasses$1g(ownerState);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
-    id: loading ? loadingId : idProp,
-    className: clsx(classes2.root, className),
-    centerRipple: true,
-    focusRipple: !disableFocusRipple,
-    disabled: disabled || loading,
-    ref: ref2,
-    ...other,
-    ownerState,
-    children: [typeof loading === "boolean" && // use plain HTML span to minimize the runtime overhead
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-      className: classes2.loadingWrapper,
-      style: {
-        display: "contents"
-      },
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx(IconButtonLoadingIndicator, {
-        className: classes2.loadingIndicator,
-        ownerState,
-        children: loading && loadingIndicator
-      })
-    }), children2]
-  });
-});
-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(_pt.node, (props) => {
-    const found = React.Children.toArray(props.children).some((child) => /* @__PURE__ */ React.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: _pt.object,
-  /**
-   * @ignore
-   */
-  className: _pt.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: _pt.oneOfType([_pt.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), _pt.string]),
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: _pt.bool,
-  /**
-   * If `true`, the  keyboard focus ripple is disabled.
-   * @default false
-   */
-  disableFocusRipple: _pt.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: _pt.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: _pt.oneOf(["end", "start", false]),
-  /**
-   * @ignore
-   */
-  id: _pt.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: _pt.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: _pt.node,
-  /**
-   * The size of the component.
-   * `small` is equivalent to the dense button styling.
-   * @default 'medium'
-   */
-  size: _pt.oneOfType([_pt.oneOf(["small", "medium", "large"]), _pt.string]),
-  /**
-   * The system prop that allows defining system overrides as well as additional CSS styles.
-   */
-  sx: _pt.oneOfType([_pt.arrayOf(_pt.oneOfType([_pt.func, _pt.object, _pt.bool])), _pt.func, _pt.object])
-};
 const CancelIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
 }), "Cancel");
@@ -33268,9 +33326,6 @@ const filledInputClasses = {
   ...inputBaseClasses,
   ...generateUtilityClasses("MuiFilledInput", ["root", "underline", "input", "adornedStart", "adornedEnd", "sizeSmall", "multiline", "hiddenLabel"])
 };
-const CloseIcon = 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 ArrowDropDownIcon = createSvgIcon(/* @__PURE__ */ jsxRuntimeExports.jsx("path", {
   d: "M7 10l5 5 5-5z"
 }), "ArrowDropDown");
@@ -33658,7 +33713,7 @@ const Autocomplete = /* @__PURE__ */ React.forwardRef(function Autocomplete2(inP
     blurOnSelect = false,
     ChipProps: ChipPropsProp,
     className,
-    clearIcon = _ClearIcon || (_ClearIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(CloseIcon, {
+    clearIcon = _ClearIcon || (_ClearIcon = /* @__PURE__ */ jsxRuntimeExports.jsx(ClearIcon, {
       fontSize: "small"
     })),
     clearOnBlur = !props.freeSolo,
@@ -178664,22 +178719,22 @@ function addDecoder(cases2, importFn) {
   }
   cases2.forEach((c2) => registry$1.set(c2, importFn));
 }
-addDecoder([void 0, 1], () => import("./raw-B0E5tGhb.js").then((m2) => m2.default));
-addDecoder(5, () => import("./lzw-D-d5b3_9.js").then((m2) => m2.default));
+addDecoder([void 0, 1], () => import("./raw-TJbs5T8I.js").then((m2) => m2.default));
+addDecoder(5, () => import("./lzw--6K-CH9V.js").then((m2) => m2.default));
 addDecoder(6, () => {
   throw new Error("old style JPEG compression is not supported.");
 });
-addDecoder(7, () => import("./jpeg-L5T74jDu.js").then((m2) => m2.default));
-addDecoder([8, 32946], () => import("./deflate-CIQ8HfQ4.js").then((m2) => m2.default));
-addDecoder(32773, () => import("./packbits-EdeFNk-p.js").then((m2) => m2.default));
+addDecoder(7, () => import("./jpeg-BAsU3Uj1.js").then((m2) => m2.default));
+addDecoder([8, 32946], () => import("./deflate-DFg7j2aM.js").then((m2) => m2.default));
+addDecoder(32773, () => import("./packbits-DIcMoiDr.js").then((m2) => m2.default));
 addDecoder(
   34887,
-  () => import("./lerc-xXmKz_nL.js").then(async (m2) => {
+  () => import("./lerc-Bs40GmLw.js").then(async (m2) => {
     await m2.zstd.init();
     return m2;
   }).then((m2) => m2.default)
 );
-addDecoder(50001, () => import("./webimage-Dr7tpGET.js").then((m2) => m2.default));
+addDecoder(50001, () => import("./webimage-DcmYEYr-.js").then((m2) => m2.default));
 function decodeRowAcc(row, stride) {
   let length2 = row.length - stride;
   let offset2 = 0;
@@ -198712,14 +198767,25 @@ function CellSetExpressionPlotSubscriber(props) {
   );
   const [width2, height2, containerRef] = useGridItemSize();
   const transformOptions = VALUE_TRANSFORM_OPTIONS;
-  const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(
+  const [
+    // eslint-disable-next-line no-unused-vars
+    expressionData,
+    loadedFeatureSelection,
+    featureSelectionStatus,
+    featureSelectionErrors
+  ] = useFeatureSelection(
     loaders,
     dataset,
     false,
     geneSelection,
     { obsType, featureType, featureValueType }
   );
-  const [{ featureLabelsMap: featureLabelsMapOrig }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(
+  const [
+    { featureLabelsMap: featureLabelsMapOrig },
+    featureLabelsStatus,
+    featureLabelsUrls,
+    featureLabelsError
+  ] = useFeatureLabelsData(
     loaders,
     dataset,
     false,
@@ -198732,13 +198798,18 @@ function CellSetExpressionPlotSubscriber(props) {
     featureLabelsMapOrig,
     { stripCuriePrefixes: true }
   );
-  const [{ obsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(
+  const [
+    { obsIndex },
+    matrixIndicesStatus,
+    matrixIndicesUrls,
+    matrixIndicesError
+  ] = useObsFeatureMatrixIndices(
     loaders,
     dataset,
     false,
     { obsType, featureType, featureValueType }
   );
-  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(
+  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls, obsSetsError] = useObsSetsData(
     loaders,
     dataset,
     true,
@@ -198746,7 +198817,12 @@ function CellSetExpressionPlotSubscriber(props) {
     {},
     { obsType }
   );
-  const [{ sampleSets }, sampleSetsStatus, sampleSetsUrls] = useSampleSetsData(
+  const [
+    { sampleSets },
+    sampleSetsStatus,
+    sampleSetsUrls,
+    sampleSetsError
+  ] = useSampleSetsData(
     loaders,
     dataset,
     false,
@@ -198754,7 +198830,12 @@ function CellSetExpressionPlotSubscriber(props) {
     { sampleSetColor },
     { sampleType }
   );
-  const [{ sampleEdges }, sampleEdgesStatus, sampleEdgesUrls] = useSampleEdgesData(
+  const [
+    { sampleEdges },
+    sampleEdgesStatus,
+    sampleEdgesUrls,
+    sampleEdgesError
+  ] = useSampleEdgesData(
     loaders,
     dataset,
     false,
@@ -198762,6 +198843,14 @@ function CellSetExpressionPlotSubscriber(props) {
     {},
     { obsType, sampleType }
   );
+  const errors = [
+    ...featureSelectionErrors,
+    featureLabelsError,
+    matrixIndicesError,
+    obsSetsError,
+    sampleSetsError,
+    sampleEdgesError
+  ];
   const isReady = useReady([
     featureSelectionStatus,
     matrixIndicesStatus,
@@ -198818,6 +198907,7 @@ function CellSetExpressionPlotSubscriber(props) {
       theme,
       isReady,
       helpText,
+      errors,
       options: /* @__PURE__ */ React__default.createElement(
         CellSetExpressionPlotOptions,
         {
@@ -249769,7 +249859,7 @@ function CellSetSizesPlotSubscriber(props) {
   const [width2, height2, containerRef] = useGridItemSize();
   const [currentHierarchy, setCurrentHierarchy] = useState([]);
   const [prevCellSetSelection, setPrevCellSetSelection] = useState([]);
-  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(
+  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrls, obsSetsError] = useObsSetsData(
     loaders,
     dataset,
     true,
@@ -249777,6 +249867,9 @@ function CellSetSizesPlotSubscriber(props) {
     { obsSetSelection: cellSetSelection, obsSetColor: cellSetColor },
     { obsType }
   );
+  const errors = [
+    obsSetsError
+  ];
   const isReady = useReady([obsSetsStatus]);
   const urls = useUrls([obsSetsUrls]);
   const mergedCellSets = useMemo(
@@ -249839,7 +249932,8 @@ function CellSetSizesPlotSubscriber(props) {
       urls,
       theme,
       isReady,
-      helpText
+      helpText,
+      errors
     },
     /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: classes2.vegaContainer }, /* @__PURE__ */ React__default.createElement(
       CellSetSizesPlot,
@@ -249960,7 +250054,8 @@ function ExpressionHistogramSubscriber(props) {
   const [
     { obsIndex, featureIndex, obsFeatureMatrix },
     matrixStatus,
-    matrixUrls
+    matrixUrls,
+    matrixError
   ] = useObsFeatureMatrixData(
     loaders,
     dataset,
@@ -249969,13 +250064,23 @@ function ExpressionHistogramSubscriber(props) {
     {},
     { obsType, featureType, featureValueType }
   );
-  const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(
+  const [
+    // eslint-disable-next-line no-unused-vars
+    expressionData,
+    loadedFeatureSelection,
+    featureSelectionStatus,
+    featureSelectionErrors
+  ] = useFeatureSelection(
     loaders,
     dataset,
     false,
     geneSelection,
     { obsType, featureType, featureValueType }
   );
+  const errors = [
+    matrixError,
+    ...featureSelectionErrors
+  ];
   const isReady = useReady([
     matrixStatus,
     featureSelectionStatus
@@ -250037,7 +250142,8 @@ function ExpressionHistogramSubscriber(props) {
       urls,
       theme,
       isReady,
-      helpText
+      helpText,
+      errors
     },
     /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: classes2.vegaContainer }, /* @__PURE__ */ React__default.createElement(
       ExpressionHistogram,
@@ -250328,14 +250434,25 @@ function DotPlotSubscriber(props) {
   const [width2, height2, containerRef] = useGridItemSize();
   const transformOptions = VALUE_TRANSFORM_OPTIONS;
   const isStratified = Array.isArray(sampleSetSelection) && sampleSetSelection.length > 1;
-  const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(
+  const [
+    // eslint-disable-next-line no-unused-vars
+    expressionData,
+    loadedFeatureSelection,
+    featureSelectionStatus,
+    featureSelectionErrors
+  ] = useFeatureSelection(
     loaders,
     dataset,
     false,
     geneSelection,
     { obsType, featureType, featureValueType }
   );
-  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrl] = useFeatureLabelsData(
+  const [
+    { featureLabelsMap },
+    featureLabelsStatus,
+    featureLabelsUrl,
+    featureLabelsError
+  ] = useFeatureLabelsData(
     loaders,
     dataset,
     false,
@@ -250343,13 +250460,23 @@ function DotPlotSubscriber(props) {
     {},
     { featureType }
   );
-  const [{ obsIndex }, matrixIndicesStatus, matrixIndicesUrl] = useObsFeatureMatrixIndices(
+  const [
+    { obsIndex },
+    matrixIndicesStatus,
+    matrixIndicesUrl,
+    matrixIndicesError
+  ] = useObsFeatureMatrixIndices(
     loaders,
     dataset,
     false,
     { obsType, featureType, featureValueType }
   );
-  const [{ obsSets: cellSets }, obsSetsStatus, obsSetsUrl] = useObsSetsData(
+  const [
+    { obsSets: cellSets },
+    obsSetsStatus,
+    obsSetsUrl,
+    obsSetsError
+  ] = useObsSetsData(
     loaders,
     dataset,
     true,
@@ -250357,7 +250484,12 @@ function DotPlotSubscriber(props) {
     {},
     { obsType }
   );
-  const [{ sampleSets }, sampleSetsStatus, sampleSetsUrl] = useSampleSetsData(
+  const [
+    { sampleSets },
+    sampleSetsStatus,
+    sampleSetsUrl,
+    sampleSetsError
+  ] = useSampleSetsData(
     loaders,
     dataset,
     false,
@@ -250365,7 +250497,12 @@ function DotPlotSubscriber(props) {
     {},
     { sampleType }
   );
-  const [{ sampleEdges }, sampleEdgesStatus, sampleEdgesUrl] = useSampleEdgesData(
+  const [
+    { sampleEdges },
+    sampleEdgesStatus,
+    sampleEdgesUrl,
+    sampleEdgesError
+  ] = useSampleEdgesData(
     loaders,
     dataset,
     false,
@@ -250373,6 +250510,14 @@ function DotPlotSubscriber(props) {
     {},
     { obsType, sampleType }
   );
+  const errors = [
+    ...featureSelectionErrors,
+    featureLabelsError,
+    matrixIndicesError,
+    obsSetsError,
+    sampleSetsError,
+    sampleEdgesError
+  ];
   const isReady = useReady([
     featureSelectionStatus,
     matrixIndicesStatus,
@@ -250416,6 +250561,7 @@ function DotPlotSubscriber(props) {
       theme,
       isReady,
       helpText,
+      errors,
       options: /* @__PURE__ */ React__default.createElement(
         CellSetExpressionPlotOptions,
         {
@@ -250625,14 +250771,25 @@ function FeatureBarPlotSubscriber(props) {
     coordinationScopes
   );
   const [width2, height2, containerRef] = useGridItemSize();
-  const [expressionData, loadedFeatureSelection, featureSelectionStatus] = useFeatureSelection(
+  const [
+    // eslint-disable-next-line no-unused-vars
+    expressionData,
+    loadedFeatureSelection,
+    featureSelectionStatus,
+    featureSelectionErrors
+  ] = useFeatureSelection(
     loaders,
     dataset,
     false,
     geneSelection,
     { obsType, featureType, featureValueType }
   );
-  const [{ featureLabelsMap }, featureLabelsStatus, featureLabelsUrls] = useFeatureLabelsData(
+  const [
+    { featureLabelsMap },
+    featureLabelsStatus,
+    featureLabelsUrls,
+    featureLabelsError
+  ] = useFeatureLabelsData(
     loaders,
     dataset,
     false,
@@ -250643,13 +250800,19 @@ function FeatureBarPlotSubscriber(props) {
   const [
     { obsIndex },
     matrixIndicesStatus,
-    matrixIndicesUrls
+    matrixIndicesUrls,
+    matrixIndicesError
   ] = useObsFeatureMatrixIndices(
     loaders,
     dataset,
     false,
     { obsType, featureType, featureValueType }
   );
+  const errors = [
+    ...featureSelectionErrors,
+    featureLabelsError,
+    matrixIndicesError
+  ];
   const isReady = useReady([
     featureSelectionStatus,
     matrixIndicesStatus,
@@ -250714,7 +250877,8 @@ function FeatureBarPlotSubscriber(props) {
       urls,
       theme,
       isReady,
-      helpText
+      helpText,
+      errors
     },
     /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: classes2.vegaContainer }, expressionArr ? /* @__PURE__ */ React__default.createElement(
       FeatureBarPlot,
@@ -251015,13 +251179,18 @@ function TreemapSubscriber(props) {
     coordinationScopes
   );
   const [width2, height2, containerRef] = useGridItemSize();
-  const [{ obsIndex }, matrixIndicesStatus, matrixIndicesUrls] = useObsFeatureMatrixIndices(
+  const [
+    { obsIndex },
+    matrixIndicesStatus,
+    matrixIndicesUrls,
+    matrixIndicesError
+  ] = useObsFeatureMatrixIndices(
     loaders,
     dataset,
     false,
     { obsType, featureType, featureValueType }
   );
-  const [{ obsSets }, obsSetsStatus, obsSetsUrls] = useObsSetsData(
+  const [{ obsSets }, obsSetsStatus, obsSetsUrls, obsSetsError] = useObsSetsData(
     loaders,
     dataset,
     true,
@@ -251029,7 +251198,12 @@ function TreemapSubscriber(props) {
     {},
     { obsType }
   );
-  const [{ sampleIndex, sampleSets }, sampleSetsStatus, sampleSetsUrls] = useSampleSetsData(
+  const [
+    { sampleIndex, sampleSets },
+    sampleSetsStatus,
+    sampleSetsUrls,
+    sampleSetsError
+  ] = useSampleSetsData(
     loaders,
     dataset,
     // TODO: support `false`, i.e., configurations in which
@@ -251039,7 +251213,12 @@ function TreemapSubscriber(props) {
     { sampleSetColor },
     { sampleType }
   );
-  const [{ sampleEdges }, sampleEdgesStatus, sampleEdgesUrls] = useSampleEdgesData(
+  const [
+    { sampleEdges },
+    sampleEdgesStatus,
+    sampleEdgesUrls,
+    sampleEdgesError
+  ] = useSampleEdgesData(
     loaders,
     dataset,
     // TODO: support `false`, i.e., configurations in which
@@ -251049,6 +251228,12 @@ function TreemapSubscriber(props) {
     {},
     { obsType, sampleType }
   );
+  const errors = [
+    matrixIndicesError,
+    obsSetsError,
+    sampleSetsError,
+    sampleEdgesError
+  ];
   const isReady = useReady([
     matrixIndicesStatus,
     obsSetsStatus,
@@ -251146,6 +251331,7 @@ function TreemapSubscriber(props) {
       theme,
       isReady,
       helpText,
+      errors,
       withPadding: false,
       options: /* @__PURE__ */ React__default.createElement(
         TreemapOptions,
@@ -251512,7 +251698,12 @@ function VolcanoPlotSubscriber(props) {
   const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
   const rawSampleSetSelection = useRawSetPaths(sampleSetsColumnNameMapping, sampleSetSelection);
   const rawObsSetSelection = useRawSetPaths(obsSetsColumnNameMapping, obsSetSelection);
-  const [{ featureStats }, featureStatsStatus] = useFeatureStatsData(
+  const [
+    { featureStats },
+    featureStatsStatus,
+    featureStatsUrls,
+    featureStatsError
+  ] = useFeatureStatsData(
     loaders,
     dataset,
     false,
@@ -251520,6 +251711,9 @@ function VolcanoPlotSubscriber(props) {
     // These volcanoOptions are passed to FeatureStatsAnndataLoader.loadMulti():
     { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection }
   );
+  const errors = [
+    featureStatsError
+  ];
   const isReady = useReady([
     featureStatsStatus
   ]);
@@ -251534,6 +251728,7 @@ function VolcanoPlotSubscriber(props) {
       theme,
       isReady,
       helpText,
+      errors,
       options: /* @__PURE__ */ React__default.createElement(
         VolcanoPlotOptions,
         {
@@ -251847,7 +252042,12 @@ function CellSetCompositionBarPlotSubscriber(props) {
   const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
   const rawSampleSetSelection = useRawSetPaths(sampleSetsColumnNameMapping, sampleSetSelection);
   const rawObsSetSelection = useRawSetPaths(obsSetsColumnNameMapping, obsSetSelection);
-  const [{ obsSetStats }, obsSetStatsStatus] = useObsSetStatsData(
+  const [
+    { obsSetStats },
+    obsSetStatsStatus,
+    obsSetStatsUrls,
+    obsSetStatsError
+  ] = useObsSetStatsData(
     loaders,
     dataset,
     false,
@@ -251855,6 +252055,9 @@ function CellSetCompositionBarPlotSubscriber(props) {
     // These volcanoOptions are passed to ObsSetStatsAnndataLoader.loadMulti():
     { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection }
   );
+  const errors = [
+    obsSetStatsError
+  ];
   const isReady = useReady([
     obsSetStatsStatus
   ]);
@@ -251868,7 +252071,8 @@ function CellSetCompositionBarPlotSubscriber(props) {
       removeGridComponent,
       theme,
       isReady,
-      helpText
+      helpText,
+      errors
     },
     /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: classes2.vegaContainer }, obsSetStats ? /* @__PURE__ */ React__default.createElement(
       CellSetCompositionBarPlot,
@@ -252143,7 +252347,12 @@ function FeatureSetEnrichmentBarPlotSubscriber(props) {
   const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
   const rawSampleSetSelection = useRawSetPaths(sampleSetsColumnNameMapping, sampleSetSelection);
   const rawObsSetSelection = useRawSetPaths(obsSetsColumnNameMapping, obsSetSelection);
-  const [{ featureSetStats }, featureSetStatsStatus] = useFeatureSetStatsData(
+  const [
+    { featureSetStats },
+    featureSetStatsStatus,
+    featureSetStatsUrls,
+    featureSetStatsError
+  ] = useFeatureSetStatsData(
     loaders,
     dataset,
     false,
@@ -252151,6 +252360,9 @@ function FeatureSetEnrichmentBarPlotSubscriber(props) {
     // These volcanoOptions are passed to ObsSetStatsAnndataLoader.loadMulti():
     { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection }
   );
+  const errors = [
+    featureSetStatsError
+  ];
   const isReady = useReady([
     featureSetStatsStatus
   ]);
@@ -252168,7 +252380,8 @@ function FeatureSetEnrichmentBarPlotSubscriber(props) {
       removeGridComponent,
       theme,
       isReady,
-      helpText
+      helpText,
+      errors
     },
     /* @__PURE__ */ React__default.createElement("div", { ref: containerRef, className: classes2.vegaContainer }, featureSetStats ? /* @__PURE__ */ React__default.createElement(
       FeatureSetEnrichmentBarPlot,
@@ -252366,7 +252579,12 @@ function FeatureStatsTableSubscriber(props) {
   const sampleSetsColumnNameMappingReversed = useColumnNameMapping(sampleSetsLoader, true);
   const rawSampleSetSelection = useRawSetPaths(sampleSetsColumnNameMapping, sampleSetSelection);
   const rawObsSetSelection = useRawSetPaths(obsSetsColumnNameMapping, obsSetSelection);
-  const [{ featureStats }, featureStatsStatus] = useFeatureStatsData(
+  const [
+    { featureStats },
+    featureStatsStatus,
+    featureStatsUrls,
+    featureStatsError
+  ] = useFeatureStatsData(
     loaders,
     dataset,
     false,
@@ -252374,6 +252592,9 @@ function FeatureStatsTableSubscriber(props) {
     // These volcanoOptions are passed to FeatureStatsAnndataLoader.loadMulti():
     { sampleSetSelection: rawSampleSetSelection, obsSetSelection: rawObsSetSelection }
   );
+  const errors = [
+    featureStatsError
+  ];
   const isReady = useReady([
     featureStatsStatus
   ]);
@@ -252385,6 +252606,7 @@ function FeatureStatsTableSubscriber(props) {
       theme,
       isReady,
       helpText,
+      errors,
       withPadding: false
     },
     featureStats ? /* @__PURE__ */ React__default.createElement(