@vitessce/vit-s 3.9.1 → 3.9.3

package/dist/index.js

@@ -19,7 +19,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 });
 var _overrides, _overrides2, _use_suffix_request, _FetchStore_instances, merge_init_fn, _bytes, _encoder, _data, _stride, _TypedArray, _BYTES_PER_ELEMENT, _shape, _endian, _encoder_config, _decoder_config, _order, _inverseOrder, _shape2, _strides, _metadata, _metadata2, _a2, _focused, _cleanup, _setup, _b, _online, _cleanup2, _setup2, _c, _gcTimeout, _d, _initialState, _revertState, _cache, _client, _retryer, _defaultOptions, _abortSignalConsumed, _Query_instances, dispatch_fn, _e, _queries, _f, _observers, _mutationCache, _retryer2, _Mutation_instances, dispatch_fn2, _g, _mutations, _scopes, _mutationId, _h, _queryCache, _mutationCache2, _defaultOptions2, _queryDefaults, _mutationDefaults, _mountCount, _unsubscribeFocus, _unsubscribeOnline, _i, _client2, _currentQuery, _currentQueryInitialState, _currentResult, _currentResultState, _currentResultOptions, _currentThenable, _selectError, _selectFn, _selectResult, _lastQueryWithDefinedData, _staleTimeoutId, _refetchIntervalId, _currentRefetchInterval, _trackedProps, _QueryObserver_instances, executeFetch_fn, updateStaleTimeout_fn, computeRefetchInterval_fn, updateRefetchInterval_fn, updateTimers_fn, clearStaleTimeout_fn, clearRefetchInterval_fn, updateQuery_fn, notify_fn, _j, _client3, _result, _queries2, _options, _observers2, _combinedResult, _lastCombine, _lastResult, _observerMatches, _QueriesObserver_instances, trackResult_fn, combineResult_fn, findMatchingObservers_fn, onUpdate_fn, notify_fn2, _k;
 import * as React$1 from "react";
-import React__default, { useContext, forwardRef, useRef, useMemo, createContext, createElement, isValidElement, cloneElement, Children, useCallback, Component, useState, useEffect, useLayoutEffect } from "react";
+import React__default, { useContext, forwardRef, useRef, useMemo, createContext, createElement, isValidElement, cloneElement, Children, PureComponent, useEffect, useCallback, Component, useState, useLayoutEffect } from "react";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
 function sheetForTag(tag) {
@@ -415,9 +415,9 @@ function parse(value, root2, parent, rule, rules, rulesets, pseudo, points, decl
 function ruleset(value, root2, parent, index, offset2, rules, points, type, props, children, length2) {
   var post = offset2 - 1;
   var rule = offset2 === 0 ? rules : [""];
-  var size = sizeof(rule);
+  var size2 = sizeof(rule);
   for (var i2 = 0, j = 0, k = 0; i2 < index; ++i2)
-    for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i2])), z2 = value; x < size; ++x)
+    for (var x = 0, y = substr(value, post + 1, post = abs(j = points[i2])), z2 = value; x < size2; ++x)
       if (z2 = trim(j > 0 ? rule[x] + " " + y : replace(y, /&\f/g, rule[x])))
         props[k++] = z2;
   return node(value, root2, parent, offset2 === 0 ? RULESET : type, props, children, length2);
@@ -810,14 +810,14 @@ var createCache = function createCache2(options) {
   cache.sheet.hydrate(nodesToHydrate);
   return cache;
 };
-function _extends$2() {
-  return _extends$2 = Object.assign ? Object.assign.bind() : function(n2) {
+function _extends$3() {
+  return _extends$3 = Object.assign ? Object.assign.bind() : function(n2) {
     for (var e2 = 1; e2 < arguments.length; e2++) {
       var t2 = arguments[e2];
       for (var r2 in t2) ({}).hasOwnProperty.call(t2, r2) && (n2[r2] = t2[r2]);
     }
     return n2;
-  }, _extends$2.apply(null, arguments);
+  }, _extends$3.apply(null, arguments);
 }
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -2389,7 +2389,7 @@ var createStyled$1 = function createStyled(tag, options) {
       }
     });
     Styled.withComponent = function(nextTag, nextOptions) {
-      var newStyled2 = createStyled(nextTag, _extends$2({}, options, nextOptions, {
+      var newStyled2 = createStyled(nextTag, _extends$3({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       }));
       return newStyled2.apply(void 0, styles2);
@@ -7671,17 +7671,17 @@ function createTypography(palette, typography) {
     }
   }
   const coef = fontSize / 14;
-  const pxToRem = pxToRem2 || ((size) => `${size / htmlFontSize * coef}rem`);
-  const buildVariant = (fontWeight, size, lineHeight, letterSpacing, casing) => ({
+  const pxToRem = pxToRem2 || ((size2) => `${size2 / htmlFontSize * coef}rem`);
+  const buildVariant = (fontWeight, size2, lineHeight, letterSpacing, casing) => ({
     fontFamily,
     fontWeight,
-    fontSize: pxToRem(size),
+    fontSize: pxToRem(size2),
     // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
     lineHeight,
     // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
     // across font-families can cause issues with the kerning.
     ...fontFamily === defaultFontFamily ? {
-      letterSpacing: `${round$1(letterSpacing / size)}em`
+      letterSpacing: `${round$1(letterSpacing / size2)}em`
     } : {},
     ...casing,
     ...allVariants
@@ -9026,14 +9026,14 @@ function chainPropTypes(propType1, propType2) {
     return propType1(...args) || propType2(...args);
   };
 }
-function _extends$1() {
-  return _extends$1 = Object.assign ? Object.assign.bind() : function(n2) {
+function _extends$2() {
+  return _extends$2 = Object.assign ? Object.assign.bind() : function(n2) {
     for (var e2 = 1; e2 < arguments.length; e2++) {
       var t2 = arguments[e2];
       for (var r2 in t2) ({}).hasOwnProperty.call(t2, r2) && (n2[r2] = t2[r2]);
     }
     return n2;
-  }, _extends$1.apply(null, arguments);
+  }, _extends$2.apply(null, arguments);
 }
 function _objectWithoutPropertiesLoose(r2, e2) {
   if (null == r2) return {};
@@ -9044,13 +9044,13 @@ function _objectWithoutPropertiesLoose(r2, e2) {
   }
   return t2;
 }
-function _setPrototypeOf(t2, e2) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t3, e3) {
+function _setPrototypeOf$1(t2, e2) {
+  return _setPrototypeOf$1 = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t3, e3) {
     return t3.__proto__ = e3, t3;
-  }, _setPrototypeOf(t2, e2);
+  }, _setPrototypeOf$1(t2, e2);
 }
-function _inheritsLoose(t2, o2) {
-  t2.prototype = Object.create(o2.prototype), t2.prototype.constructor = t2, _setPrototypeOf(t2, o2);
+function _inheritsLoose$1(t2, o2) {
+  t2.prototype = Object.create(o2.prototype), t2.prototype.constructor = t2, _setPrototypeOf$1(t2, o2);
 }
 const config$1 = {
   disabled: false
@@ -9082,7 +9082,7 @@ var ENTERING = "entering";
 var ENTERED = "entered";
 var EXITING = "exiting";
 var Transition = /* @__PURE__ */ function(_React$Component) {
-  _inheritsLoose(Transition2, _React$Component);
+  _inheritsLoose$1(Transition2, _React$Component);
   function Transition2(props, context) {
     var _this;
     _this = _React$Component.call(this, props, context) || this;
@@ -9498,7 +9498,7 @@ Transition.EXITED = EXITED;
 Transition.ENTERING = ENTERING;
 Transition.ENTERED = ENTERED;
 Transition.EXITING = EXITING;
-function _assertThisInitialized(e2) {
+function _assertThisInitialized$1(e2) {
   if (void 0 === e2) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
   return e2;
 }
@@ -9606,11 +9606,11 @@ var defaultProps = {
   }
 };
 var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
-  _inheritsLoose(TransitionGroup2, _React$Component);
+  _inheritsLoose$1(TransitionGroup2, _React$Component);
   function TransitionGroup2(props, context) {
     var _this;
     _this = _React$Component.call(this, props, context) || this;
-    var handleExited = _this.handleExited.bind(_assertThisInitialized(_this));
+    var handleExited = _this.handleExited.bind(_assertThisInitialized$1(_this));
     _this.state = {
       contextValue: {
         isMounting: true
@@ -9647,7 +9647,7 @@ var TransitionGroup = /* @__PURE__ */ function(_React$Component) {
     }
     if (this.mounted) {
       this.setState(function(state) {
-        var children = _extends$1({}, state.children);
+        var children = _extends$2({}, state.children);
         delete children[child.key];
         return {
           children
@@ -11195,7 +11195,7 @@ const CircularProgress = /* @__PURE__ */ React$1.forwardRef(function CircularPro
     className,
     color: color2 = "primary",
     disableShrink = false,
-    size = 40,
+    size: size2 = 40,
     style: style2,
     thickness = 3.6,
     value = 0,
@@ -11206,7 +11206,7 @@ const CircularProgress = /* @__PURE__ */ React$1.forwardRef(function CircularPro
     ...props,
     color: color2,
     disableShrink,
-    size,
+    size: size2,
     thickness,
     value,
     variant
@@ -11225,8 +11225,8 @@ const CircularProgress = /* @__PURE__ */ React$1.forwardRef(function CircularPro
   return /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgressRoot, {
     className: clsx$1(classes.root, className),
     style: {
-      width: size,
-      height: size,
+      width: size2,
+      height: size2,
       ...rootStyle,
       ...style2
     },
@@ -11326,11 +11326,11 @@ const useUtilityClasses$f = (ownerState) => {
     disabled,
     color: color2,
     edge,
-    size,
+    size: size2,
     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)}`],
+    root: ["root", loading && "loading", disabled && "disabled", color2 !== "default" && `color${capitalize$1(color2)}`, edge && `edge${capitalize$1(edge)}`, `size${capitalize$1(size2)}`],
     loadingIndicator: ["loadingIndicator"],
     loadingWrapper: ["loadingWrapper"]
   };
@@ -11483,7 +11483,7 @@ const IconButton = /* @__PURE__ */ React$1.forwardRef(function IconButton2(inPro
     color: color2 = "default",
     disabled = false,
     disableFocusRipple = false,
-    size = "medium",
+    size: size2 = "medium",
     id: idProp,
     loading = null,
     loadingIndicator: loadingIndicatorProp,
@@ -11503,7 +11503,7 @@ const IconButton = /* @__PURE__ */ React$1.forwardRef(function IconButton2(inPro
     disableFocusRipple,
     loading,
     loadingIndicator,
-    size
+    size: size2
   };
   const classes = useUtilityClasses$f(ownerState);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(IconButtonRoot, {
@@ -14249,13 +14249,13 @@ const useUtilityClasses$c = (ownerState) => {
     hiddenLabel,
     multiline,
     readOnly,
-    size,
+    size: size2,
     startAdornment,
     type
   } = ownerState;
   const slots = {
-    root: ["root", `color${capitalize$1(color2)}`, disabled && "disabled", error && "error", fullWidth && "fullWidth", focused && "focused", formControl && "formControl", size && size !== "medium" && `size${capitalize$1(size)}`, multiline && "multiline", startAdornment && "adornedStart", endAdornment && "adornedEnd", hiddenLabel && "hiddenLabel", readOnly && "readOnly"],
-    input: ["input", disabled && "disabled", type === "search" && "inputTypeSearch", multiline && "inputMultiline", size === "small" && "inputSizeSmall", hiddenLabel && "inputHiddenLabel", startAdornment && "inputAdornedStart", endAdornment && "inputAdornedEnd", readOnly && "readOnly"]
+    root: ["root", `color${capitalize$1(color2)}`, disabled && "disabled", error && "error", fullWidth && "fullWidth", focused && "focused", formControl && "formControl", size2 && size2 !== "medium" && `size${capitalize$1(size2)}`, multiline && "multiline", startAdornment && "adornedStart", endAdornment && "adornedEnd", hiddenLabel && "hiddenLabel", readOnly && "readOnly"],
+    input: ["input", disabled && "disabled", type === "search" && "inputTypeSearch", multiline && "inputMultiline", size2 === "small" && "inputSizeSmall", hiddenLabel && "inputHiddenLabel", startAdornment && "inputAdornedStart", endAdornment && "inputAdornedEnd", readOnly && "readOnly"]
   };
   return composeClasses(slots, getInputBaseUtilityClass, classes);
 };
@@ -14290,8 +14290,8 @@ const InputBaseRoot = styled("div", {
   }, {
     props: ({
       ownerState,
-      size
-    }) => ownerState.multiline && size === "small",
+      size: size2
+    }) => ownerState.multiline && size2 === "small",
     style: {
       paddingTop: 1
     }
@@ -14473,7 +14473,7 @@ const InputBase = /* @__PURE__ */ React$1.forwardRef(function InputBase2(inProps
     readOnly,
     renderSuffix,
     rows,
-    size,
+    size: size2,
     slotProps = {},
     slots = {},
     startAdornment,
@@ -15129,6 +15129,10 @@ ClickAwayListener.propTypes = {
 {
   ClickAwayListener["propTypes"] = exactProp(ClickAwayListener.propTypes);
 }
+function getScrollbarSize$1(win = window) {
+  const documentWidth = win.document.documentElement.clientWidth;
+  return win.innerWidth - documentWidth;
+}
 const styles = {
   entering: {
     opacity: 1
@@ -15990,10 +15994,6 @@ List.propTypes = {
 };
 const listItemTextClasses = generateUtilityClasses("MuiListItemText", ["root", "multiline", "dense", "inset", "primary", "secondary"]);
 const listItemIconClasses = generateUtilityClasses("MuiListItemIcon", ["root", "alignItemsFlexStart"]);
-function getScrollbarSize(win = window) {
-  const documentWidth = win.document.documentElement.clientWidth;
-  return win.innerWidth - documentWidth;
-}
 function nextItem(list, item, disableListWrap) {
   if (list === item) {
     return list.firstChild;
@@ -16082,7 +16082,7 @@ const MenuList = /* @__PURE__ */ React$1.forwardRef(function MenuList2(props, re
     }) => {
       const noExplicitWidth = !listRef.current.style.width;
       if (containerElement.clientHeight < listRef.current.clientHeight && noExplicitWidth) {
-        const scrollbarSize = `${getScrollbarSize(ownerWindow(containerElement))}px`;
+        const scrollbarSize = `${getScrollbarSize$1(ownerWindow(containerElement))}px`;
         listRef.current.style[direction === "rtl" ? "paddingLeft" : "paddingRight"] = scrollbarSize;
         listRef.current.style.width = `calc(100% + ${scrollbarSize})`;
       }
@@ -17254,7 +17254,7 @@ const Table = /* @__PURE__ */ React$1.forwardRef(function Table2(inProps, ref) {
     className,
     component = defaultComponent$2,
     padding: padding2 = "normal",
-    size = "medium",
+    size: size2 = "medium",
     stickyHeader = false,
     ...other
   } = props;
@@ -17262,15 +17262,15 @@ const Table = /* @__PURE__ */ React$1.forwardRef(function Table2(inProps, ref) {
     ...props,
     component,
     padding: padding2,
-    size,
+    size: size2,
     stickyHeader
   };
   const classes = useUtilityClasses$4(ownerState);
   const table = React$1.useMemo(() => ({
     padding: padding2,
-    size,
+    size: size2,
     stickyHeader
-  }), [padding2, size, stickyHeader]);
+  }), [padding2, size2, stickyHeader]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(TableContext.Provider, {
     value: table,
     children: /* @__PURE__ */ jsxRuntimeExports.jsx(TableRoot, {
@@ -17416,11 +17416,11 @@ const useUtilityClasses$2 = (ownerState) => {
     variant,
     align,
     padding: padding2,
-    size,
+    size: size2,
     stickyHeader
   } = ownerState;
   const slots = {
-    root: ["root", variant, stickyHeader && "stickyHeader", align !== "inherit" && `align${capitalize$1(align)}`, padding2 !== "normal" && `padding${capitalize$1(padding2)}`, `size${capitalize$1(size)}`]
+    root: ["root", variant, stickyHeader && "stickyHeader", align !== "inherit" && `align${capitalize$1(align)}`, padding2 !== "normal" && `padding${capitalize$1(padding2)}`, `size${capitalize$1(size2)}`]
   };
   return composeClasses(slots, getTableCellUtilityClass, classes);
 };
@@ -18099,7 +18099,7 @@ var defineProperty$1 = function(obj, key, value) {
   }
   return obj;
 };
-var _extends = Object.assign || function(target) {
+var _extends$1 = Object.assign || function(target) {
   for (var i2 = 1; i2 < arguments.length; i2++) {
     var source = arguments[i2];
     for (var key in source) {
@@ -18111,7 +18111,7 @@ var _extends = Object.assign || function(target) {
   return target;
 };
 function getClientRect(offsets) {
-  return _extends({}, offsets, {
+  return _extends$1({}, offsets, {
     right: offsets.left + offsets.width,
     bottom: offsets.top + offsets.height
   });
@@ -18295,7 +18295,7 @@ function computeAutoPlacement(placement, refRect, popper2, reference2, boundarie
     }
   };
   var sortedAreas = Object.keys(rects).map(function(key) {
-    return _extends({
+    return _extends$1({
       key
     }, rects[key], {
       area: getArea(rects[key])
@@ -18603,9 +18603,9 @@ function computeStyle(data, options) {
   var attributes = {
     "x-placement": data.placement
   };
-  data.attributes = _extends({}, attributes, data.attributes);
-  data.styles = _extends({}, styles2, data.styles);
-  data.arrowStyles = _extends({}, data.offsets.arrow, data.arrowStyles);
+  data.attributes = _extends$1({}, attributes, data.attributes);
+  data.styles = _extends$1({}, styles2, data.styles);
+  data.arrowStyles = _extends$1({}, data.offsets.arrow, data.arrowStyles);
   return data;
 }
 function isModifierRequired(modifiers2, requestingName, requestedName) {
@@ -18740,7 +18740,7 @@ function flip(data, options) {
         variation = getOppositeVariation(variation);
       }
       data.placement = placement + (variation ? "-" + variation : "");
-      data.offsets.popper = _extends({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
+      data.offsets.popper = _extends$1({}, data.offsets.popper, getPopperOffsets(data.instance.popper, data.offsets.reference, data.placement));
       data = runModifiers(data.instance.modifiers, data, "flip");
     }
   });
@@ -18783,13 +18783,13 @@ function toValue(str, measurement, popperOffsets2, referenceOffsets) {
     var rect = getClientRect(element);
     return rect[measurement] / 100 * value;
   } else if (unit === "vh" || unit === "vw") {
-    var size = void 0;
+    var size2 = void 0;
     if (unit === "vh") {
-      size = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+      size2 = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
     } else {
-      size = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+      size2 = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
     }
-    return size / 100 * value;
+    return size2 / 100 * value;
   } else {
     return value;
   }
@@ -18899,7 +18899,7 @@ function preventOverflow(data, options) {
   };
   order2.forEach(function(placement) {
     var side = ["left", "top"].indexOf(placement) !== -1 ? "primary" : "secondary";
-    popper2 = _extends({}, popper2, check[side](placement));
+    popper2 = _extends$1({}, popper2, check[side](placement));
   });
   data.offsets.popper = popper2;
   return data;
@@ -18917,7 +18917,7 @@ function shift(data) {
       start: defineProperty$1({}, side, reference2[side]),
       end: defineProperty$1({}, side, reference2[side] + reference2[measurement] - popper2[measurement])
     };
-    data.offsets.popper = _extends({}, popper2, shiftOffsets[shiftvariation]);
+    data.offsets.popper = _extends$1({}, popper2, shiftOffsets[shiftvariation]);
   }
   return data;
 }
@@ -19320,7 +19320,7 @@ var Popper = function() {
       return requestAnimationFrame(_this.update);
     };
     this.update = debounce$1(this.update.bind(this));
-    this.options = _extends({}, Popper3.Defaults, options);
+    this.options = _extends$1({}, Popper3.Defaults, options);
     this.state = {
       isDestroyed: false,
       isCreated: false,
@@ -19329,11 +19329,11 @@ var Popper = function() {
     this.reference = reference2 && reference2.jquery ? reference2[0] : reference2;
     this.popper = popper2 && popper2.jquery ? popper2[0] : popper2;
     this.options.modifiers = {};
-    Object.keys(_extends({}, Popper3.Defaults.modifiers, options.modifiers)).forEach(function(name) {
-      _this.options.modifiers[name] = _extends({}, Popper3.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
+    Object.keys(_extends$1({}, Popper3.Defaults.modifiers, options.modifiers)).forEach(function(name) {
+      _this.options.modifiers[name] = _extends$1({}, Popper3.Defaults.modifiers[name] || {}, options.modifiers ? options.modifiers[name] : {});
     });
     this.modifiers = Object.keys(this.options.modifiers).map(function(name) {
-      return _extends({
+      return _extends$1({
         name
       }, _this.options.modifiers[name]);
     }).sort(function(a2, b) {
@@ -19399,21 +19399,20 @@ Popper.Utils = (typeof window !== "undefined" ? window : global).PopperUtils;
 Popper.placements = placements;
 Popper.Defaults = Defaults;
 function createChainedFunction(...funcs) {
-  return funcs.reduce((acc, func) => {
-    if (func == null) {
-      return acc;
-    }
-    {
-      if (typeof func !== "function") {
-        console.error("Material-UI: Invalid Argument Type, must only provide functions, undefined, or null.");
+  return funcs.reduce(
+    (acc, func) => {
+      if (func == null) {
+        return acc;
       }
+      return function chainedFunction(...args) {
+        acc.apply(this, args);
+        func.apply(this, args);
+      };
+    },
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    () => {
     }
-    return function chainedFunction(...args) {
-      acc.apply(this, args);
-      func.apply(this, args);
-    };
-  }, () => {
-  });
+  );
 }
 function setRef(ref, value) {
   if (typeof ref === "function") {
@@ -19452,7 +19451,7 @@ function flipPlacement(placement, theme) {
   }
 }
 function getAnchorEl(anchorEl) {
-  return typeof anchorEl === "function" ? anchorEl() : anchorEl;
+  return typeof anchorEl === "function" ? anchorEl(document.body) : anchorEl;
 }
 const useEnhancedEffect = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;
 const defaultPopperOptions = {};
@@ -19482,25 +19481,18 @@ React$1.forwardRef((props, ref) => {
     }
     if (popperRef.current) {
       popperRef.current.destroy();
-      handlePopperRefRef.current(null);
+      if (handlePopperRefRef.current) {
+        setRef(handlePopperRefRef.current, null);
+      }
     }
     const handlePopperUpdate = (data) => {
       setPlacement(data.placement);
     };
-    const resolvedAnchorEl = getAnchorEl(anchorEl);
-    {
-      if (resolvedAnchorEl && resolvedAnchorEl.nodeType === 1) {
-        const box = resolvedAnchorEl.getBoundingClientRect();
-        if (box.top === 0 && box.left === 0 && box.right === 0 && box.bottom === 0) {
-          console.warn([
-            "Material-UI: The `anchorEl` prop provided to the component is invalid.",
-            "The anchor element should be part of the document layout.",
-            "Make sure the element is present in the document or that it's not display none."
-          ].join("\n"));
-        }
-      }
+    const anchorElement = getAnchorEl(anchorEl);
+    if (!anchorElement) {
+      return;
     }
-    const popper2 = new Popper(getAnchorEl(anchorEl), tooltipRef.current, {
+    const popper2 = new Popper(anchorElement, tooltipRef.current, {
       placement: rtlPlacement,
       ...popperOptions,
       modifiers: {
@@ -19518,7 +19510,9 @@ React$1.forwardRef((props, ref) => {
       onCreate: createChainedFunction(handlePopperUpdate, popperOptions.onCreate),
       onUpdate: createChainedFunction(handlePopperUpdate, popperOptions.onUpdate)
     });
-    handlePopperRefRef.current(popper2);
+    if (handlePopperRefRef.current) {
+      setRef(handlePopperRefRef.current, popper2);
+    }
   }, [anchorEl, disablePortal, modifiers2, open2, rtlPlacement, popperOptions]);
   const handleRef = React$1.useCallback((node2) => {
     setRef(ownRef, node2);
@@ -19532,7 +19526,9 @@ React$1.forwardRef((props, ref) => {
       return;
     }
     popperRef.current.destroy();
-    handlePopperRefRef.current(null);
+    if (handlePopperRefRef.current) {
+      setRef(handlePopperRefRef.current, null);
+    }
   };
   const handleExited = () => {
     setExited(true);
@@ -19563,7 +19559,7 @@ React$1.forwardRef((props, ref) => {
     // Fix Popper.js display issue
     top: 0,
     left: 0,
-    display: !open2 && keepMounted && !transition ? "none" : null,
+    display: !open2 && keepMounted && !transition ? "none" : void 0,
     ...style2
   }, children: typeof children === "function" ? children(childProps) : children }) });
 });
@@ -19578,9 +19574,703 @@ function ScopedGlobalStyles(props) {
   const component = useMemo(() => {
     const computedStyles = prependParentClassName(styles2, parentClassName);
     return jsxRuntimeExports.jsx(GlobalStyles$3, { styles: computedStyles });
-  }, [parentClassName]);
+  }, [parentClassName, styles2]);
   return component;
 }
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function(target) {
+    for (var i2 = 1; i2 < arguments.length; i2++) {
+      var source = arguments[i2];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+function _assertThisInitialized(self2) {
+  if (self2 === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+  return self2;
+}
+function _setPrototypeOf(o2, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf2(o3, p2) {
+    o3.__proto__ = p2;
+    return o3;
+  };
+  return _setPrototypeOf(o2, p);
+}
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+var safeIsNaN = Number.isNaN || function ponyfill(value) {
+  return typeof value === "number" && value !== value;
+};
+function isEqual$1(first, second) {
+  if (first === second) {
+    return true;
+  }
+  if (safeIsNaN(first) && safeIsNaN(second)) {
+    return true;
+  }
+  return false;
+}
+function areInputsEqual(newInputs, lastInputs) {
+  if (newInputs.length !== lastInputs.length) {
+    return false;
+  }
+  for (var i2 = 0; i2 < newInputs.length; i2++) {
+    if (!isEqual$1(newInputs[i2], lastInputs[i2])) {
+      return false;
+    }
+  }
+  return true;
+}
+function memoizeOne(resultFn, isEqual2) {
+  if (isEqual2 === void 0) {
+    isEqual2 = areInputsEqual;
+  }
+  var lastThis;
+  var lastArgs = [];
+  var lastResult;
+  var calledOnce = false;
+  function memoized() {
+    var newArgs = [];
+    for (var _i2 = 0; _i2 < arguments.length; _i2++) {
+      newArgs[_i2] = arguments[_i2];
+    }
+    if (calledOnce && lastThis === this && isEqual2(newArgs, lastArgs)) {
+      return lastResult;
+    }
+    lastResult = resultFn.apply(this, newArgs);
+    calledOnce = true;
+    lastThis = this;
+    lastArgs = newArgs;
+    return lastResult;
+  }
+  return memoized;
+}
+var hasNativePerformanceNow = typeof performance === "object" && typeof performance.now === "function";
+var now$1 = hasNativePerformanceNow ? function() {
+  return performance.now();
+} : function() {
+  return Date.now();
+};
+function cancelTimeout(timeoutID) {
+  cancelAnimationFrame(timeoutID.id);
+}
+function requestTimeout(callback, delay) {
+  var start2 = now$1();
+  function tick() {
+    if (now$1() - start2 >= delay) {
+      callback.call(null);
+    } else {
+      timeoutID.id = requestAnimationFrame(tick);
+    }
+  }
+  var timeoutID = {
+    id: requestAnimationFrame(tick)
+  };
+  return timeoutID;
+}
+var size = -1;
+function getScrollbarSize(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+  if (size === -1 || recalculate) {
+    var div = document.createElement("div");
+    var style2 = div.style;
+    style2.width = "50px";
+    style2.height = "50px";
+    style2.overflow = "scroll";
+    document.body.appendChild(div);
+    size = div.offsetWidth - div.clientWidth;
+    document.body.removeChild(div);
+  }
+  return size;
+}
+var cachedRTLResult = null;
+function getRTLOffsetType(recalculate) {
+  if (recalculate === void 0) {
+    recalculate = false;
+  }
+  if (cachedRTLResult === null || recalculate) {
+    var outerDiv = document.createElement("div");
+    var outerStyle = outerDiv.style;
+    outerStyle.width = "50px";
+    outerStyle.height = "50px";
+    outerStyle.overflow = "scroll";
+    outerStyle.direction = "rtl";
+    var innerDiv = document.createElement("div");
+    var innerStyle = innerDiv.style;
+    innerStyle.width = "100px";
+    innerStyle.height = "100px";
+    outerDiv.appendChild(innerDiv);
+    document.body.appendChild(outerDiv);
+    if (outerDiv.scrollLeft > 0) {
+      cachedRTLResult = "positive-descending";
+    } else {
+      outerDiv.scrollLeft = 1;
+      if (outerDiv.scrollLeft === 0) {
+        cachedRTLResult = "negative";
+      } else {
+        cachedRTLResult = "positive-ascending";
+      }
+    }
+    document.body.removeChild(outerDiv);
+    return cachedRTLResult;
+  }
+  return cachedRTLResult;
+}
+var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
+var defaultItemKey$1 = function defaultItemKey3(index, data) {
+  return index;
+};
+var devWarningsDirection = null;
+var devWarningsTagName$1 = null;
+{
+  if (typeof window !== "undefined" && typeof window.WeakSet !== "undefined") {
+    devWarningsDirection = /* @__PURE__ */ new WeakSet();
+    devWarningsTagName$1 = /* @__PURE__ */ new WeakSet();
+  }
+}
+function createListComponent(_ref) {
+  var _class;
+  var getItemOffset3 = _ref.getItemOffset, getEstimatedTotalSize4 = _ref.getEstimatedTotalSize, getItemSize3 = _ref.getItemSize, getOffsetForIndexAndAlignment5 = _ref.getOffsetForIndexAndAlignment, getStartIndexForOffset3 = _ref.getStartIndexForOffset, getStopIndexForStartIndex3 = _ref.getStopIndexForStartIndex, initInstanceProps5 = _ref.initInstanceProps, shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange, validateProps5 = _ref.validateProps;
+  return _class = /* @__PURE__ */ function(_PureComponent) {
+    _inheritsLoose(List3, _PureComponent);
+    function List3(props) {
+      var _this;
+      _this = _PureComponent.call(this, props) || this;
+      _this._instanceProps = initInstanceProps5(_this.props, _assertThisInitialized(_this));
+      _this._outerRef = void 0;
+      _this._resetIsScrollingTimeoutId = null;
+      _this.state = {
+        instance: _assertThisInitialized(_this),
+        isScrolling: false,
+        scrollDirection: "forward",
+        scrollOffset: typeof _this.props.initialScrollOffset === "number" ? _this.props.initialScrollOffset : 0,
+        scrollUpdateWasRequested: false
+      };
+      _this._callOnItemsRendered = void 0;
+      _this._callOnItemsRendered = memoizeOne(function(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
+        return _this.props.onItemsRendered({
+          overscanStartIndex,
+          overscanStopIndex,
+          visibleStartIndex,
+          visibleStopIndex
+        });
+      });
+      _this._callOnScroll = void 0;
+      _this._callOnScroll = memoizeOne(function(scrollDirection, scrollOffset, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          scrollDirection,
+          scrollOffset,
+          scrollUpdateWasRequested
+        });
+      });
+      _this._getItemStyle = void 0;
+      _this._getItemStyle = function(index) {
+        var _this$props = _this.props, direction = _this$props.direction, itemSize = _this$props.itemSize, layout = _this$props.layout;
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
+        var style2;
+        if (itemStyleCache.hasOwnProperty(index)) {
+          style2 = itemStyleCache[index];
+        } else {
+          var _offset = getItemOffset3(_this.props, index, _this._instanceProps);
+          var size2 = getItemSize3(_this.props, index, _this._instanceProps);
+          var isHorizontal = direction === "horizontal" || layout === "horizontal";
+          var isRtl = direction === "rtl";
+          var offsetHorizontal = isHorizontal ? _offset : 0;
+          itemStyleCache[index] = style2 = {
+            position: "absolute",
+            left: isRtl ? void 0 : offsetHorizontal,
+            right: isRtl ? offsetHorizontal : void 0,
+            top: !isHorizontal ? _offset : 0,
+            height: !isHorizontal ? size2 : "100%",
+            width: isHorizontal ? size2 : "100%"
+          };
+        }
+        return style2;
+      };
+      _this._getItemStyleCache = void 0;
+      _this._getItemStyleCache = memoizeOne(function(_, __, ___) {
+        return {};
+      });
+      _this._onScrollHorizontal = function(event) {
+        var _event$currentTarget = event.currentTarget, clientWidth = _event$currentTarget.clientWidth, scrollLeft = _event$currentTarget.scrollLeft, scrollWidth = _event$currentTarget.scrollWidth;
+        _this.setState(function(prevState) {
+          if (prevState.scrollOffset === scrollLeft) {
+            return null;
+          }
+          var direction = _this.props.direction;
+          var scrollOffset = scrollLeft;
+          if (direction === "rtl") {
+            switch (getRTLOffsetType()) {
+              case "negative":
+                scrollOffset = -scrollLeft;
+                break;
+              case "positive-descending":
+                scrollOffset = scrollWidth - clientWidth - scrollLeft;
+                break;
+            }
+          }
+          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
+            scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+      _this._onScrollVertical = function(event) {
+        var _event$currentTarget2 = event.currentTarget, clientHeight = _event$currentTarget2.clientHeight, scrollHeight = _event$currentTarget2.scrollHeight, scrollTop = _event$currentTarget2.scrollTop;
+        _this.setState(function(prevState) {
+          if (prevState.scrollOffset === scrollTop) {
+            return null;
+          }
+          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
+          return {
+            isScrolling: true,
+            scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
+            scrollOffset,
+            scrollUpdateWasRequested: false
+          };
+        }, _this._resetIsScrollingDebounced);
+      };
+      _this._outerRefSetter = function(ref) {
+        var outerRef = _this.props.outerRef;
+        _this._outerRef = ref;
+        if (typeof outerRef === "function") {
+          outerRef(ref);
+        } else if (outerRef != null && typeof outerRef === "object" && outerRef.hasOwnProperty("current")) {
+          outerRef.current = ref;
+        }
+      };
+      _this._resetIsScrollingDebounced = function() {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          cancelTimeout(_this._resetIsScrollingTimeoutId);
+        }
+        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
+      };
+      _this._resetIsScrolling = function() {
+        _this._resetIsScrollingTimeoutId = null;
+        _this.setState({
+          isScrolling: false
+        }, function() {
+          _this._getItemStyleCache(-1, null);
+        });
+      };
+      return _this;
+    }
+    List3.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
+      validateSharedProps$1(nextProps, prevState);
+      validateProps5(nextProps);
+      return null;
+    };
+    var _proto = List3.prototype;
+    _proto.scrollTo = function scrollTo(scrollOffset) {
+      scrollOffset = Math.max(0, scrollOffset);
+      this.setState(function(prevState) {
+        if (prevState.scrollOffset === scrollOffset) {
+          return null;
+        }
+        return {
+          scrollDirection: prevState.scrollOffset < scrollOffset ? "forward" : "backward",
+          scrollOffset,
+          scrollUpdateWasRequested: true
+        };
+      }, this._resetIsScrollingDebounced);
+    };
+    _proto.scrollToItem = function scrollToItem(index, align) {
+      if (align === void 0) {
+        align = "auto";
+      }
+      var _this$props2 = this.props, itemCount = _this$props2.itemCount, layout = _this$props2.layout;
+      var scrollOffset = this.state.scrollOffset;
+      index = Math.max(0, Math.min(index, itemCount - 1));
+      var scrollbarSize = 0;
+      if (this._outerRef) {
+        var outerRef = this._outerRef;
+        if (layout === "vertical") {
+          scrollbarSize = outerRef.scrollWidth > outerRef.clientWidth ? getScrollbarSize() : 0;
+        } else {
+          scrollbarSize = outerRef.scrollHeight > outerRef.clientHeight ? getScrollbarSize() : 0;
+        }
+      }
+      this.scrollTo(getOffsetForIndexAndAlignment5(this.props, index, align, scrollOffset, this._instanceProps, scrollbarSize));
+    };
+    _proto.componentDidMount = function componentDidMount() {
+      var _this$props3 = this.props, direction = _this$props3.direction, initialScrollOffset = _this$props3.initialScrollOffset, layout = _this$props3.layout;
+      if (typeof initialScrollOffset === "number" && this._outerRef != null) {
+        var outerRef = this._outerRef;
+        if (direction === "horizontal" || layout === "horizontal") {
+          outerRef.scrollLeft = initialScrollOffset;
+        } else {
+          outerRef.scrollTop = initialScrollOffset;
+        }
+      }
+      this._callPropsCallbacks();
+    };
+    _proto.componentDidUpdate = function componentDidUpdate() {
+      var _this$props4 = this.props, direction = _this$props4.direction, layout = _this$props4.layout;
+      var _this$state = this.state, scrollOffset = _this$state.scrollOffset, scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
+      if (scrollUpdateWasRequested && this._outerRef != null) {
+        var outerRef = this._outerRef;
+        if (direction === "horizontal" || layout === "horizontal") {
+          if (direction === "rtl") {
+            switch (getRTLOffsetType()) {
+              case "negative":
+                outerRef.scrollLeft = -scrollOffset;
+                break;
+              case "positive-ascending":
+                outerRef.scrollLeft = scrollOffset;
+                break;
+              default:
+                var clientWidth = outerRef.clientWidth, scrollWidth = outerRef.scrollWidth;
+                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
+                break;
+            }
+          } else {
+            outerRef.scrollLeft = scrollOffset;
+          }
+        } else {
+          outerRef.scrollTop = scrollOffset;
+        }
+      }
+      this._callPropsCallbacks();
+    };
+    _proto.componentWillUnmount = function componentWillUnmount() {
+      if (this._resetIsScrollingTimeoutId !== null) {
+        cancelTimeout(this._resetIsScrollingTimeoutId);
+      }
+    };
+    _proto.render = function render() {
+      var _this$props5 = this.props, children = _this$props5.children, className = _this$props5.className, direction = _this$props5.direction, height2 = _this$props5.height, innerRef = _this$props5.innerRef, innerElementType = _this$props5.innerElementType, innerTagName = _this$props5.innerTagName, itemCount = _this$props5.itemCount, itemData = _this$props5.itemData, _this$props5$itemKey = _this$props5.itemKey, itemKey = _this$props5$itemKey === void 0 ? defaultItemKey$1 : _this$props5$itemKey, layout = _this$props5.layout, outerElementType = _this$props5.outerElementType, outerTagName = _this$props5.outerTagName, style2 = _this$props5.style, useIsScrolling = _this$props5.useIsScrolling, width2 = _this$props5.width;
+      var isScrolling = this.state.isScrolling;
+      var isHorizontal = direction === "horizontal" || layout === "horizontal";
+      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
+      var _this$_getRangeToRend = this._getRangeToRender(), startIndex = _this$_getRangeToRend[0], stopIndex = _this$_getRangeToRend[1];
+      var items = [];
+      if (itemCount > 0) {
+        for (var _index = startIndex; _index <= stopIndex; _index++) {
+          items.push(createElement(children, {
+            data: itemData,
+            key: itemKey(_index, itemData),
+            index: _index,
+            isScrolling: useIsScrolling ? isScrolling : void 0,
+            style: this._getItemStyle(_index)
+          }));
+        }
+      }
+      var estimatedTotalSize = getEstimatedTotalSize4(this.props, this._instanceProps);
+      return createElement(outerElementType || outerTagName || "div", {
+        className,
+        onScroll,
+        ref: this._outerRefSetter,
+        style: _extends({
+          position: "relative",
+          height: height2,
+          width: width2,
+          overflow: "auto",
+          WebkitOverflowScrolling: "touch",
+          willChange: "transform",
+          direction
+        }, style2)
+      }, createElement(innerElementType || innerTagName || "div", {
+        children: items,
+        ref: innerRef,
+        style: {
+          height: isHorizontal ? "100%" : estimatedTotalSize,
+          pointerEvents: isScrolling ? "none" : void 0,
+          width: isHorizontal ? estimatedTotalSize : "100%"
+        }
+      }));
+    };
+    _proto._callPropsCallbacks = function _callPropsCallbacks() {
+      if (typeof this.props.onItemsRendered === "function") {
+        var itemCount = this.props.itemCount;
+        if (itemCount > 0) {
+          var _this$_getRangeToRend2 = this._getRangeToRender(), _overscanStartIndex = _this$_getRangeToRend2[0], _overscanStopIndex = _this$_getRangeToRend2[1], _visibleStartIndex = _this$_getRangeToRend2[2], _visibleStopIndex = _this$_getRangeToRend2[3];
+          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
+        }
+      }
+      if (typeof this.props.onScroll === "function") {
+        var _this$state2 = this.state, _scrollDirection = _this$state2.scrollDirection, _scrollOffset = _this$state2.scrollOffset, _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
+        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
+      }
+    };
+    _proto._getRangeToRender = function _getRangeToRender() {
+      var _this$props6 = this.props, itemCount = _this$props6.itemCount, overscanCount = _this$props6.overscanCount;
+      var _this$state3 = this.state, isScrolling = _this$state3.isScrolling, scrollDirection = _this$state3.scrollDirection, scrollOffset = _this$state3.scrollOffset;
+      if (itemCount === 0) {
+        return [0, 0, 0, 0];
+      }
+      var startIndex = getStartIndexForOffset3(this.props, scrollOffset, this._instanceProps);
+      var stopIndex = getStopIndexForStartIndex3(this.props, startIndex, scrollOffset, this._instanceProps);
+      var overscanBackward = !isScrolling || scrollDirection === "backward" ? Math.max(1, overscanCount) : 1;
+      var overscanForward = !isScrolling || scrollDirection === "forward" ? Math.max(1, overscanCount) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    };
+    return List3;
+  }(PureComponent), _class.defaultProps = {
+    direction: "ltr",
+    itemData: void 0,
+    layout: "vertical",
+    overscanCount: 2,
+    useIsScrolling: false
+  }, _class;
+}
+var validateSharedProps$1 = function validateSharedProps3(_ref2, _ref3) {
+  var children = _ref2.children, direction = _ref2.direction, height2 = _ref2.height, layout = _ref2.layout, innerTagName = _ref2.innerTagName, outerTagName = _ref2.outerTagName, width2 = _ref2.width;
+  var instance = _ref3.instance;
+  {
+    if (innerTagName != null || outerTagName != null) {
+      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
+        devWarningsTagName$1.add(instance);
+        console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.");
+      }
+    }
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    switch (direction) {
+      case "horizontal":
+      case "vertical":
+        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
+          devWarningsDirection.add(instance);
+          console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
+        }
+        break;
+      case "ltr":
+      case "rtl":
+        break;
+      default:
+        throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". ' + ('"' + direction + '" was specified.'));
+    }
+    switch (layout) {
+      case "horizontal":
+      case "vertical":
+        break;
+      default:
+        throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". ' + ('"' + layout + '" was specified.'));
+    }
+    if (children == null) {
+      throw Error('An invalid "children" prop has been specified. Value should be a React component. ' + ('"' + (children === null ? "null" : typeof children) + '" was specified.'));
+    }
+    if (isHorizontal && typeof width2 !== "number") {
+      throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. ' + ('"' + (width2 === null ? "null" : typeof width2) + '" was specified.'));
+    } else if (!isHorizontal && typeof height2 !== "number") {
+      throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. ' + ('"' + (height2 === null ? "null" : typeof height2) + '" was specified.'));
+    }
+  }
+};
+var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
+var getItemMetadata$1 = function getItemMetadata3(props, index, instanceProps) {
+  var _ref = props, itemSize = _ref.itemSize;
+  var itemMetadataMap = instanceProps.itemMetadataMap, lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+  if (index > lastMeasuredIndex) {
+    var offset2 = 0;
+    if (lastMeasuredIndex >= 0) {
+      var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+      offset2 = itemMetadata.offset + itemMetadata.size;
+    }
+    for (var i2 = lastMeasuredIndex + 1; i2 <= index; i2++) {
+      var size2 = itemSize(i2);
+      itemMetadataMap[i2] = {
+        offset: offset2,
+        size: size2
+      };
+      offset2 += size2;
+    }
+    instanceProps.lastMeasuredIndex = index;
+  }
+  return itemMetadataMap[index];
+};
+var findNearestItem$1 = function findNearestItem3(props, instanceProps, offset2) {
+  var itemMetadataMap = instanceProps.itemMetadataMap, lastMeasuredIndex = instanceProps.lastMeasuredIndex;
+  var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
+  if (lastMeasuredItemOffset >= offset2) {
+    return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset2);
+  } else {
+    return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset2);
+  }
+};
+var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch3(props, instanceProps, high, low, offset2) {
+  while (low <= high) {
+    var middle = low + Math.floor((high - low) / 2);
+    var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
+    if (currentOffset === offset2) {
+      return middle;
+    } else if (currentOffset < offset2) {
+      low = middle + 1;
+    } else if (currentOffset > offset2) {
+      high = middle - 1;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch3(props, instanceProps, index, offset2) {
+  var itemCount = props.itemCount;
+  var interval = 1;
+  while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset2) {
+    index += interval;
+    interval *= 2;
+  }
+  return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset2);
+};
+var getEstimatedTotalSize = function getEstimatedTotalSize2(_ref2, _ref3) {
+  var itemCount = _ref2.itemCount;
+  var itemMetadataMap = _ref3.itemMetadataMap, estimatedItemSize = _ref3.estimatedItemSize, lastMeasuredIndex = _ref3.lastMeasuredIndex;
+  var totalSizeOfMeasuredItems = 0;
+  if (lastMeasuredIndex >= itemCount) {
+    lastMeasuredIndex = itemCount - 1;
+  }
+  if (lastMeasuredIndex >= 0) {
+    var itemMetadata = itemMetadataMap[lastMeasuredIndex];
+    totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
+  }
+  var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
+  var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
+  return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
+};
+var VariableSizeList$1 = /* @__PURE__ */ createListComponent({
+  getItemOffset: function getItemOffset(props, index, instanceProps) {
+    return getItemMetadata$1(props, index, instanceProps).offset;
+  },
+  getItemSize: function getItemSize(props, index, instanceProps) {
+    return instanceProps.itemMetadataMap[index].size;
+  },
+  getEstimatedTotalSize,
+  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment3(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
+    var direction = props.direction, height2 = props.height, layout = props.layout, width2 = props.width;
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    var size2 = isHorizontal ? width2 : height2;
+    var itemMetadata = getItemMetadata$1(props, index, instanceProps);
+    var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
+    var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size2, itemMetadata.offset));
+    var minOffset = Math.max(0, itemMetadata.offset - size2 + itemMetadata.size + scrollbarSize);
+    if (align === "smart") {
+      if (scrollOffset >= minOffset - size2 && scrollOffset <= maxOffset + size2) {
+        align = "auto";
+      } else {
+        align = "center";
+      }
+    }
+    switch (align) {
+      case "start":
+        return maxOffset;
+      case "end":
+        return minOffset;
+      case "center":
+        return Math.round(minOffset + (maxOffset - minOffset) / 2);
+      case "auto":
+      default:
+        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+          return scrollOffset;
+        } else if (scrollOffset < minOffset) {
+          return minOffset;
+        } else {
+          return maxOffset;
+        }
+    }
+  },
+  getStartIndexForOffset: function getStartIndexForOffset(props, offset2, instanceProps) {
+    return findNearestItem$1(props, instanceProps, offset2);
+  },
+  getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
+    var direction = props.direction, height2 = props.height, itemCount = props.itemCount, layout = props.layout, width2 = props.width;
+    var isHorizontal = direction === "horizontal" || layout === "horizontal";
+    var size2 = isHorizontal ? width2 : height2;
+    var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
+    var maxOffset = scrollOffset + size2;
+    var offset2 = itemMetadata.offset + itemMetadata.size;
+    var stopIndex = startIndex;
+    while (stopIndex < itemCount - 1 && offset2 < maxOffset) {
+      stopIndex++;
+      offset2 += getItemMetadata$1(props, stopIndex, instanceProps).size;
+    }
+    return stopIndex;
+  },
+  initInstanceProps: function initInstanceProps2(props, instance) {
+    var _ref4 = props, estimatedItemSize = _ref4.estimatedItemSize;
+    var instanceProps = {
+      itemMetadataMap: {},
+      estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
+      lastMeasuredIndex: -1
+    };
+    instance.resetAfterIndex = function(index, shouldForceUpdate) {
+      if (shouldForceUpdate === void 0) {
+        shouldForceUpdate = true;
+      }
+      instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1);
+      instance._getItemStyleCache(-1);
+      if (shouldForceUpdate) {
+        instance.forceUpdate();
+      }
+    };
+    return instanceProps;
+  },
+  shouldResetStyleCacheOnItemSizeChange: false,
+  validateProps: function validateProps2(_ref5) {
+    var itemSize = _ref5.itemSize;
+    {
+      if (typeof itemSize !== "function") {
+        throw Error('An invalid "itemSize" prop has been specified. Value should be a function. ' + ('"' + (itemSize === null ? "null" : typeof itemSize) + '" was specified.'));
+      }
+    }
+  }
+});
+const VariableSizeList = VariableSizeList$1;
+const LIST_ROW_HEIGHT = 48;
+makeStyles()(() => ({
+  searchInput: {
+    lineHeight: "initial",
+    height: "auto !important"
+  }
+}));
+const OuterElementContext = React__default.createContext({});
+const OuterElementType = React__default.forwardRef((props, ref) => {
+  const outerProps = React__default.useContext(OuterElementContext);
+  return jsxRuntimeExports.jsx("div", { ref, ...props, ...outerProps });
+});
+function ListRow(props) {
+  const { data, index, style: style2 } = props;
+  const dataSet = data[index];
+  const inlineStyle = {
+    ...style2,
+    top: style2.top + 8
+  };
+  const [props0, option, getItemLabel] = dataSet;
+  const { key, ...optionProps } = props0;
+  return jsxRuntimeExports.jsx(Typography, { component: "li", ...optionProps, noWrap: true, style: inlineStyle, children: getItemLabel(option) }, key);
+}
+function useResetCache(itemCount) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current != null) {
+      ref.current.resetAfterIndex(0, true);
+    }
+  }, [itemCount]);
+  return ref;
+}
+React__default.forwardRef((props, ref) => {
+  const { children, ...other } = props;
+  const items = children;
+  const itemCount = items.length;
+  const gridRef = useResetCache(itemCount);
+  return jsxRuntimeExports.jsx("div", { ref, children: jsxRuntimeExports.jsx(OuterElementContext.Provider, { value: other, children: jsxRuntimeExports.jsx(VariableSizeList, { height: Math.min(8, itemCount) * LIST_ROW_HEIGHT, itemSize: () => LIST_ROW_HEIGHT, width: "100%", innerElementType: "ul", outerElementType: OuterElementType, overscanCount: 5, ref: gridRef, itemCount, itemData: items, children: ListRow }) }) });
+});
 function readBlobAsArrayBuffer(blob) {
   if (blob.arrayBuffer) {
     return blob.arrayBuffer();
@@ -20107,10 +20797,10 @@ function decodeBuffer(uint8View, isUTF8) {
   return utf8Decoder.decode(uint8View);
 }
 async function findEndOfCentralDirector(reader, totalLength) {
-  const size = Math.min(EOCDR_WITHOUT_COMMENT_SIZE + MAX_COMMENT_SIZE, totalLength);
-  const readStart = totalLength - size;
-  const data = await readAs(reader, readStart, size);
-  for (let i2 = size - EOCDR_WITHOUT_COMMENT_SIZE; i2 >= 0; --i2) {
+  const size2 = Math.min(EOCDR_WITHOUT_COMMENT_SIZE + MAX_COMMENT_SIZE, totalLength);
+  const readStart = totalLength - size2;
+  const data = await readAs(reader, readStart, size2);
+  for (let i2 = size2 - EOCDR_WITHOUT_COMMENT_SIZE; i2 >= 0; --i2) {
     if (getUint32LE(data, i2) !== EOCDR_SIGNATURE) {
       continue;
     }
@@ -20399,6 +21089,13 @@ function assert$1(expression, msg = "") {
   if (!expression)
     throw new Error(msg);
 }
+function isZipEntryInternal(entry) {
+  if (!("compressionMethod" in entry) || !("_rawEntry" in entry)) {
+    return false;
+  }
+  const rawEntry = entry._rawEntry;
+  return typeof entry.compressionMethod === "number" && typeof rawEntry === "object" && rawEntry !== null && "relativeOffsetOfLocalHeader" in rawEntry && typeof rawEntry.relativeOffsetOfLocalHeader === "number";
+}
 class BlobReader2 {
   constructor(blob) {
     this.blob = blob;
@@ -20431,18 +21128,19 @@ class HTTPRangeReader {
     }
     return this.length;
   }
-  async read(offset2, size) {
-    if (size === 0) {
+  async read(offset2, size2) {
+    if (size2 === 0) {
       return new Uint8Array(0);
     }
-    const req = await fetch_range(this.url, offset2, size, __privateGet(this, _overrides));
-    assert$1(req.ok, `failed http request ${this.url}, status: ${req.status} offset: ${offset2} size: ${size}: ${req.statusText}`);
+    const req = await fetch_range(this.url, offset2, size2, __privateGet(this, _overrides));
+    assert$1(req.ok, `failed http request ${this.url}, status: ${req.status} offset: ${offset2} size: ${size2}: ${req.statusText}`);
     return new Uint8Array(await req.arrayBuffer());
   }
 }
 _overrides = new WeakMap();
 class ZipFileStore {
   constructor(reader, opts = {}) {
+    this.reader = reader;
     this.info = unzip(reader).then((info) => {
       if (opts.transformEntries) {
         info.entries = opts.transformEntries(info.entries);
@@ -20450,12 +21148,46 @@ class ZipFileStore {
       return info;
     });
   }
+  /**
+   * Compute the byte offset where entry data begins in the zip file.
+   * This requires reading the local file header to get filename and extra field lengths.
+   */
+  async getEntryDataOffset(entry) {
+    const localHeaderOffset = entry._rawEntry.relativeOffsetOfLocalHeader;
+    const header = await this.reader.read(localHeaderOffset, 30);
+    const fileNameLength = header[26] + header[27] * 256;
+    const extraFieldLength = header[28] + header[29] * 256;
+    return localHeaderOffset + 30 + fileNameLength + extraFieldLength;
+  }
   async get(key) {
     let entry = (await this.info).entries[strip_prefix(key)];
     if (!entry)
       return;
     return new Uint8Array(await entry.arrayBuffer());
   }
+  async getRange(key, range2) {
+    const entry = (await this.info).entries[strip_prefix(key)];
+    if (!entry)
+      return void 0;
+    if (!isZipEntryInternal(entry)) {
+      throw new Error("ZipFileStore.getRange requires internal unzipit properties that are not available. This may indicate an incompatible version of unzipit.");
+    }
+    if (entry.compressionMethod !== 0) {
+      const bytes = await this.get(key);
+      if (!bytes)
+        return void 0;
+      if ("suffixLength" in range2) {
+        return bytes.slice(-range2.suffixLength);
+      }
+      return bytes.slice(range2.offset, range2.offset + range2.length);
+    }
+    const dataOffset = await this.getEntryDataOffset(entry);
+    if ("suffixLength" in range2) {
+      const start2 = dataOffset + entry.size - range2.suffixLength;
+      return this.reader.read(start2, range2.suffixLength);
+    }
+    return this.reader.read(dataOffset + range2.offset, range2.length);
+  }
   async has(key) {
     return strip_prefix(key) in (await this.info).entries;
   }
@@ -20726,6 +21458,9 @@ function get_ctr(data_type) {
     let [, kind, chars] = match2;
     return (kind === "U" ? UnicodeStringArray : ByteStringArray).bind(null, Number(chars));
   }
+  if (data_type === "string") {
+    return globalThis.Array;
+  }
   let ctr = {
     int8: Int8Array,
     int16: Int16Array,
@@ -20847,7 +21582,7 @@ function is_dtype(dtype, query) {
   let is_boolean = dtype === "bool";
   if (query === "boolean")
     return is_boolean;
-  let is_string = dtype.startsWith("v2:U") || dtype.startsWith("v2:S");
+  let is_string = dtype.startsWith("v2:U") || dtype.startsWith("v2:S") || dtype === "string";
   if (query === "string")
     return is_string;
   let is_bigint = dtype === "int64" || dtype === "uint64";
@@ -21122,11 +21857,11 @@ function empty_like(chunk, order2) {
 function convert_array_order(src, target) {
   let out = empty_like(src, target);
   let n_dims = src.shape.length;
-  let size = src.data.length;
+  let size2 = src.data.length;
   let index = Array(n_dims).fill(0);
   let src_data = proxy(src.data);
   let out_data = proxy(out.data);
-  for (let src_idx = 0; src_idx < size; src_idx++) {
+  for (let src_idx = 0; src_idx < size2; src_idx++) {
     let out_idx = 0;
     for (let dim = 0; dim < n_dims; dim++) {
       out_idx += index[dim] * out.stride[dim];
@@ -21313,7 +22048,7 @@ async function load_codecs(chunk_meta) {
   return { array_to_array, array_to_bytes, bytes_to_bytes };
 }
 function is_typed_array_like_meta(meta) {
-  return meta.data_type !== "v2:object";
+  return meta.data_type !== "v2:object" && meta.data_type !== "string";
 }
 class NodeNotFoundError extends Error {
   constructor(context, options = {}) {
@@ -21398,7 +22133,7 @@ function create_sharded_chunk_getter(location, shard_shape, encode_shard_key, sh
     codecs: sharding_config.index_codecs
   });
   let cache = {};
-  return async (chunk_coord) => {
+  return async (chunk_coord, options) => {
     let shard_coord = chunk_coord.map((d, i2) => Math.floor(d / index_shape[i2]));
     let shard_path = location.resolve(encode_shard_key(shard_coord)).path;
     let index;
@@ -21409,7 +22144,7 @@ function create_sharded_chunk_getter(location, shard_shape, encode_shard_key, sh
       let index_size = 16 * index_shape.reduce((a2, b) => a2 * b, 1);
       let bytes = await get_range(shard_path, {
         suffixLength: index_size + checksum_size
-      });
+      }, options);
       index = cache[shard_path] = bytes ? await index_codec.decode(bytes) : null;
     }
     if (index === null) {
@@ -21425,7 +22160,7 @@ function create_sharded_chunk_getter(location, shard_shape, encode_shard_key, sh
     return get_range(shard_path, {
       offset: Number(offset2),
       length: Number(length2)
-    });
+    }, options);
   };
 }
 var _a;
@@ -21528,8 +22263,8 @@ let Array$1 = (_a2 = class extends (_a = Location, _a) {
     let context = this[CONTEXT_MARKER];
     let maybe_bytes = await context.get_chunk_bytes(chunk_coords, options);
     if (!maybe_bytes) {
-      let size = context.chunk_shape.reduce((a2, b) => a2 * b, 1);
-      let data = new context.TypedArray(size);
+      let size2 = context.chunk_shape.reduce((a2, b) => a2 * b, 1);
+      let data = new context.TypedArray(size2);
       data.fill(context.fill_value);
       return {
         data,
@@ -25264,9 +25999,9 @@ function mapCacheHas(key) {
   return getMapData(this, key).has(key);
 }
 function mapCacheSet(key, value) {
-  var data = getMapData(this, key), size = data.size;
+  var data = getMapData(this, key), size2 = data.size;
   data.set(key, value);
-  this.size += data.size == size ? 0 : 1;
+  this.size += data.size == size2 ? 0 : 1;
   return this;
 }
 function MapCache(entries) {
@@ -29056,8 +29791,8 @@ class ZodSet extends ZodType {
       maxSize: { value: maxSize, message: errorUtil.toString(message) }
     });
   }
-  size(size, message) {
-    return this.min(size, message).max(size, message);
+  size(size2, message) {
+    return this.min(size2, message).max(size2, message);
   }
   nonempty(message) {
     return this.min(1, message);
@@ -33124,6 +33859,7 @@ const ViewType$1 = {
   OBS_SET_COMPOSITION_BAR_PLOT: "obsSetCompositionBarPlot",
   FEATURE_SET_ENRICHMENT_BAR_PLOT: "featureSetEnrichmentBarPlot",
   BIOMARKER_SELECT: "biomarkerSelect",
+  BIOMARKER_SELECT_ALT: "biomarkerSelectAlt",
   COMPARATIVE_HEADING: "comparativeHeading",
   LINK_CONTROLLER: "linkController",
   NEUROGLANCER: "neuroglancer",
@@ -34326,6 +35062,17 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
     CoordinationType$1.OBS_SET_FILTER
     // TODO: create coordination types for internal state of the biomarker selection view?
   ],
+  [ViewType$1.BIOMARKER_SELECT_ALT]: [
+    CoordinationType$1.DATASET,
+    CoordinationType$1.OBS_TYPE,
+    CoordinationType$1.SAMPLE_TYPE,
+    CoordinationType$1.FEATURE_SELECTION,
+    CoordinationType$1.SAMPLE_SET_SELECTION,
+    CoordinationType$1.SAMPLE_SET_FILTER,
+    CoordinationType$1.OBS_SET_SELECTION,
+    CoordinationType$1.OBS_SET_FILTER
+    // TODO: create coordination types for internal state of the biomarker selection view?
+  ],
   [ViewType$1.COMPARATIVE_HEADING]: [
     CoordinationType$1.DATASET,
     CoordinationType$1.OBS_TYPE,
@@ -34371,7 +35118,7 @@ const AUTO_INDEPENDENT_COORDINATION_TYPES = [
     CoordinationType$1.HIERARCHY_LEVELS
   ]
 });
-const version = "3.9.1";
+const version = "3.9.3";
 const META_VERSION = {
   version
 };
@@ -35042,7 +35789,7 @@ const sharedThemeOptions = {
   // Use px instead of rem, so that sizing is consistent despite the root element font-size.
   // Reference: https://github.com/mui/material-ui/blob/627c08fc/src/styles/createTypography.js
   typography: {
-    pxToRem: (size) => `${size}px`,
+    pxToRem: (size2) => `${size2}px`,
     display4: {
       fontSize: "112px"
     },
@@ -35106,6 +35853,7 @@ const lightPalette = {
   gridLayoutBackground: "#FFFFFF",
   paperBackground: "#FFFFFF",
   cardBorder: "rgba(241, 241, 241, 0.125)",
+  cardInfoBorder: "#ccc",
   tooltipText: "rgba(0, 0, 0, 0.87)"
 };
 const muiTheme = {
@@ -35131,6 +35879,7 @@ const muiTheme = {
       gridLayoutBackground: "#333333",
       paperBackground: "#2b2b2b",
       cardBorder: "rgba(0, 0, 0, 0.125)",
+      cardInfoBorder: "#222222",
       tooltipText: "#FFFFFF",
       ...globalColors
     },
@@ -35140,6 +35889,7 @@ const muiTheme = {
   light: createTheme({
     palette: {
       ...lightPalette,
+      cardInfoBorder: "#F1F1F1",
       ...globalColors
     },
     ...sharedThemeOptions,
@@ -35157,7 +35907,7 @@ const muiTheme = {
       ...globalColors
     },
     ...sharedThemeOptions,
-    cardBorderSize: "2px"
+    cardBorderSize: "1px"
   })
 };
 const createStoreImpl = (createState) => {
@@ -38049,9 +38799,9 @@ function require_mapCacheSet() {
   hasRequired_mapCacheSet = 1;
   var getMapData2 = require_getMapData();
   function mapCacheSet2(key, value) {
-    var data = getMapData2(this, key), size = data.size;
+    var data = getMapData2(this, key), size2 = data.size;
     data.set(key, value);
-    this.size += data.size == size ? 0 : 1;
+    this.size += data.size == size2 ? 0 : 1;
     return this;
   }
   _mapCacheSet = mapCacheSet2;
@@ -41611,14 +42361,14 @@ function requireResizableBox() {
         propsHeight: _this.props.height
       };
       _this.onResize = function(e2, data) {
-        var size = data.size;
+        var size2 = data.size;
         if (_this.props.onResize) {
           e2.persist == null ? void 0 : e2.persist();
-          _this.setState(size, function() {
+          _this.setState(size2, function() {
             return _this.props.onResize && _this.props.onResize(e2, data);
           });
         } else {
-          _this.setState(size);
+          _this.setState(size2);
         }
       };
       return _this;
@@ -42228,23 +42978,23 @@ function requireGridItem() {
          * @return {Function}           Handler function.
          */
         function onResizeHandler(e2, _ref4, handlerName) {
-          var node2 = _ref4.node, size = _ref4.size;
+          var node2 = _ref4.node, size2 = _ref4.size;
           var handler = this.props[handlerName];
           if (!handler) return;
           var _this$props7 = this.props, cols = _this$props7.cols, x = _this$props7.x, y = _this$props7.y, i2 = _this$props7.i, maxH = _this$props7.maxH, minH = _this$props7.minH;
           var _this$props8 = this.props, minW = _this$props8.minW, maxW = _this$props8.maxW;
-          var _calcWH = (0, _calculateUtils.calcWH)(this.getPositionParams(), size.width, size.height, x, y), w = _calcWH.w, h = _calcWH.h;
+          var _calcWH = (0, _calculateUtils.calcWH)(this.getPositionParams(), size2.width, size2.height, x, y), w = _calcWH.w, h = _calcWH.h;
           minW = Math.max(minW, 1);
           maxW = Math.min(maxW, cols - x);
           w = (0, _calculateUtils.clamp)(w, minW, maxW);
           h = (0, _calculateUtils.clamp)(h, minH, maxH);
           this.setState({
-            resizing: handlerName === "onResizeStop" ? null : size
+            resizing: handlerName === "onResizeStop" ? null : size2
           });
           handler.call(this, i2, w, h, {
             e: e2,
             node: node2,
-            size
+            size: size2
           });
         }
       )
@@ -44714,7 +45464,7 @@ const gridLayoutStyles = {
   },
   ".react-grid-item > .react-resizable-handle.react-resizable-handle-se": {
     bottom: "0",
-    right: "0",
+    right: "10px",
     cursor: "se-resize"
   },
   ".react-grid-item > .react-resizable-handle.react-resizable-handle-nw": {
@@ -44856,18 +45606,23 @@ const useTitleStyles = makeStyles()((theme) => ({
     textOverflow: "ellipsis",
     whiteSpace: "nowrap"
   },
-  titleInfo: {
+  infoText: {
+    color: theme.palette.primaryForeground,
     width: "100%",
     textOverflow: "ellipsis",
     whiteSpace: "nowrap",
     overflow: "hidden",
-    fontSize: "80% !important",
+    fontSize: "60% !important",
     opacity: ".8",
-    padding: "0 4px",
+    padding: "0",
     justifyContent: "center",
-    lineHeight: "25px !important",
-    flexShrink: "1",
-    textAlign: "right !important"
+    textAlign: "center !important",
+    borderTop: "0px",
+    borderBottom: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderLeft: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderRight: `1px solid ${theme.palette.cardInfoBorder}`,
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
   },
   titleButtons: {
     display: "flex",
@@ -44883,15 +45638,20 @@ const useTitleStyles = makeStyles()((theme) => ({
     border: `${theme.cardBorderSize} solid ${theme.palette.cardBorder}`,
     flex: "1 1 auto",
     minHeight: "1px",
-    marginTop: "8px",
-    marginBottom: "8px",
+    marginTop: "0",
+    marginBottom: "0",
     position: "relative",
     display: "flex",
     flexDirection: "column",
     minWidth: "0",
     wordWrap: "break-word",
     backgroundClip: "border-box",
-    borderRadius: "4px"
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px"
+  },
+  cardWithoutInfoText: {
+    borderBottomLeftRadius: "4px",
+    borderBottomRightRadius: "4px"
   },
   paddingCard: {
     padding: "12px"
@@ -45824,9 +46584,10 @@ function TitleInfo(props) {
   } = props;
   const errors = errorsProp == null ? void 0 : errorsProp.filter(Boolean);
   const { classes } = useTitleStyles();
+  const hasInfoText = Boolean(info);
   return (
     // d-flex without wrapping div is not always full height; I don't understand the root cause.
-    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: classes.title, role: "banner" }, /* @__PURE__ */ React__default.createElement("div", { className: classes.titleLeft, role: "heading", "aria-level": "1" }, title), /* @__PURE__ */ React__default.createElement("div", { className: classes.titleInfo, title: info, role: "note" }, info), /* @__PURE__ */ React__default.createElement("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls" }, /* @__PURE__ */ React__default.createElement(
+    /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: classes.title, role: "banner" }, /* @__PURE__ */ React__default.createElement("div", { className: classes.titleLeft, role: "heading", "aria-level": "1" }, title), /* @__PURE__ */ React__default.createElement("div", { className: classes.titleButtons, role: "toolbar", "aria-label": "Plot options and controls" }, /* @__PURE__ */ React__default.createElement(
       PlotOptions,
       {
         options
@@ -45862,7 +46623,8 @@ function TitleInfo(props) {
             [classes.spatialCard]: isSpatial,
             [classes.noScrollCard]: !isScroll && !isSpatial,
             [classes.noPaddingCard]: !withPadding,
-            [classes.paddingCard]: withPadding
+            [classes.paddingCard]: withPadding,
+            [classes.cardWithoutInfoText]: !hasInfoText
           }
         ),
         "aria-busy": !isReady,
@@ -45870,7 +46632,7 @@ function TitleInfo(props) {
       },
       !isReady ? /* @__PURE__ */ React__default.createElement(LoadingIndicator, null) : null,
       children
-    ))
+    ), hasInfoText ? /* @__PURE__ */ React__default.createElement("div", { className: classes.infoText, title: info, role: "note" }, info) : null)
   );
 }
 class VitessceError extends Error {