@vitessce/vit-s 3.5.12 → 3.6.0

package/dist-tsc/shared-mui/container.js

@@ -1,5 +1,8 @@
-import { makeStyles } from '@material-ui/core';
-export const useVitessceContainerStyles = makeStyles(theme => ({
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-refresh/only-export-components */
+import React from 'react';
+import { makeStyles, ScopedGlobalStyles } from '@vitessce/styles';
+export const useVitessceContainerStyles = makeStyles()(theme => ({
     vitessceContainer: {
         position: 'relative',
         margin: '0',
@@ -19,193 +22,199 @@ export const useVitessceContainerStyles = makeStyles(theme => ({
         '& *, ::after, ::before': {
             boxSizing: 'border-box',
         },
-        // Manually converted styles from 'react-grid-layout/css/styles.css',
-        // using https://cssinjs.org/jss-plugin-global/?v=v10.9.2
-        // so that no CSS or SCSS import is required.
-        '@global .react-grid-layout': {
-            transition: 'height 200ms ease',
-            // Custom
-            height: 'auto',
-            position: 'absolute',
-            width: '100%',
-        },
-        '@global .react-grid-item': {
-            transition: 'all 200ms ease',
-            transitionProperty: 'left, top',
-            // Custom
-            flexDirection: 'column!important',
-            display: 'flex!important',
-            /* So the resize handle position looks correct: */
-            paddingRight: '10px',
-        },
-        '@global .react-grid-item img': {
-            pointerEvents: 'none',
-            userSelect: 'none',
-        },
-        '@global .react-grid-item.cssTransforms': {
-            transitionProperty: 'transform',
-        },
-        '@global .react-grid-item.resizing': {
-            zIndex: '1',
-            willChange: 'width, height',
-        },
-        '@global .react-grid-item.react-draggable-dragging': {
-            transition: 'none',
-            zIndex: '3',
-            willChange: 'transform',
-        },
-        '@global .react-grid-item.dropping': {
-            visibility: 'hidden',
-        },
-        '@global .react-grid-item.react-grid-placeholder': {
-            background: 'red',
-            opacity: '0.2',
-            transitionDuration: '100ms',
-            zIndex: '2',
-            userSelect: 'none',
-        },
-        '@global .react-grid-item > .react-resizable-handle': {
-            position: 'absolute',
-            width: '20px',
-            height: '20px',
-        },
-        '@global .react-grid-item > .react-resizable-handle::after': {
-            content: '""',
-            position: 'absolute',
-            right: '3px',
-            bottom: '3px',
-            width: '5px',
-            height: '5px',
-            borderRight: '2px solid rgba(0, 0, 0, 0.4)',
-            borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
-        },
-        '@global .react-resizable-hide > .react-resizable-handle': {
-            display: 'none',
-        },
-        '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
-            bottom: '0',
-            left: '0',
-            cursor: 'sw-resize',
-            transform: 'rotate(90deg)',
-        },
-        '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
-            bottom: '0',
-            right: '0',
-            cursor: 'se-resize',
-        },
-        '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
-            top: '0',
-            left: '0',
-            cursor: 'nw-resize',
-            transform: 'rotate(180deg)',
-        },
-        '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
-            top: '0',
-            right: '0',
-            cursor: 'ne-resize',
-            transform: 'rotate(270deg)',
-        },
-        '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
-            top: '50%',
-            marginTop: '-10px',
-            cursor: 'ew-resize',
-            left: '0',
-            transform: 'rotate(135deg)',
-        },
-        '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
-            top: '50%',
-            marginTop: '-10px',
-            cursor: 'ew-resize',
-            right: '0',
-            transform: 'rotate(315deg)',
-        },
-        '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
-            left: '50%',
-            marginLeft: '-10px',
-            cursor: 'ns-resize',
-            top: '0',
-            transform: 'rotate(225deg)',
-        },
-        '@global .react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
-            left: '50%',
-            marginLeft: '-10px',
-            cursor: 'ns-resize',
-            bottom: '0',
-            transform: 'rotate(45deg)',
-        },
-        // Manually converted styles from 'react-resizable/css/styles.css',
-        '@global .react-resizable': {
-            position: 'relative',
-        },
-        '@global .react-resizable-handle': {
-            position: 'absolute',
-            width: '20px',
-            height: '20px',
-            backgroundRepeat: 'no-repeat',
-            backgroundOrigin: 'content-box',
-            boxSizing: 'border-box',
-            backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
-            backgroundPosition: 'bottom right',
-            padding: '0 3px 3px 0',
-        },
-        '@global .react-resizable-handle-sw': {
-            bottom: '0',
-            left: '0',
-            cursor: 'sw-resize',
-            transform: 'rotate(90deg)',
-        },
-        '@global .react-resizable-handle-se': {
-            bottom: '0',
-            right: '0',
-            cursor: 'se-resize',
-        },
-        '@global .react-resizable-handle-nw': {
-            top: '0',
-            left: '0',
-            cursor: 'nw-resize',
-            transform: 'rotate(180deg)',
-        },
-        '@global .react-resizable-handle-ne': {
-            top: '0',
-            right: '0',
-            cursor: 'ne-resize',
-            transform: 'rotate(270deg)',
-        },
-        '@global .react-resizable-handle-w': {
-            top: '50%',
-            marginTop: '-10px',
-            cursor: 'ew-resize',
-            left: '0',
-            transform: 'rotate(135deg)',
-        },
-        '@global .react-resizable-handle-e': {
-            top: '50%',
-            marginTop: '-10px',
-            cursor: 'ew-resize',
-            right: '0',
-            transform: 'rotate(315deg)',
-        },
-        '@global .react-resizable-handle-n': {
-            left: '50%',
-            marginLeft: '-10px',
-            cursor: 'ns-resize',
-            top: '0',
-            transform: 'rotate(225deg)',
-        },
-        '@global .react-resizable-handle-s': {
-            left: '50%',
-            marginLeft: '-10px',
-            cursor: 'ns-resize',
-            bottom: '0',
-            transform: 'rotate(45deg)',
-        },
-        // Custom
-        '@global .react-draggable-transparent-selection .react-grid-item': {
-            /* These styles prevent text selection during resize drag interactions.
-              The react-draggable-transparent-selection class is added to the body
-              element during resizing and removed after resizing has finished.
-              Not part of mixin because acts outside of .vitessce-container. */
-            userSelect: 'none !important',
-        },
     },
 }));
+const gridLayoutStyles = {
+    // Manually converted styles from 'react-grid-layout/css/styles.css',
+    // using https://cssinjs.org/jss-plugin-global/?v=v10.9.2
+    // so that no CSS or SCSS import is required.
+    '.react-grid-layout': {
+        transition: 'height 200ms ease',
+        // Custom
+        height: 'auto',
+        position: 'absolute',
+        width: '100%',
+    },
+    '.react-grid-item': {
+        transition: 'all 200ms ease',
+        transitionProperty: 'left, top',
+        // Custom
+        flexDirection: 'column!important',
+        display: 'flex!important',
+        /* So the resize handle position looks correct: */
+        paddingRight: '10px',
+    },
+    '.react-grid-item img': {
+        pointerEvents: 'none',
+        userSelect: 'none',
+    },
+    '.react-grid-item.cssTransforms': {
+        transitionProperty: 'transform',
+    },
+    '.react-grid-item.resizing': {
+        zIndex: '1',
+        willChange: 'width, height',
+    },
+    '.react-grid-item.react-draggable-dragging': {
+        transition: 'none',
+        zIndex: '3',
+        willChange: 'transform',
+    },
+    '.react-grid-item.dropping': {
+        visibility: 'hidden',
+    },
+    '.react-grid-item.react-grid-placeholder': {
+        background: 'red',
+        opacity: '0.2',
+        transitionDuration: '100ms',
+        zIndex: '2',
+        userSelect: 'none',
+    },
+    '.react-grid-item > .react-resizable-handle': {
+        position: 'absolute',
+        width: '20px',
+        height: '20px',
+    },
+    '.react-grid-item > .react-resizable-handle::after': {
+        content: '""',
+        position: 'absolute',
+        right: '3px',
+        bottom: '3px',
+        width: '5px',
+        height: '5px',
+        borderRight: '2px solid rgba(0, 0, 0, 0.4)',
+        borderBottom: '2px solid rgba(0, 0, 0, 0.4)',
+    },
+    '.react-resizable-hide > .react-resizable-handle': {
+        display: 'none',
+    },
+    '.react-grid-item > .react-resizable-handle.react-resizable-handle-sw': {
+        bottom: '0',
+        left: '0',
+        cursor: 'sw-resize',
+        transform: 'rotate(90deg)',
+    },
+    '.react-grid-item > .react-resizable-handle.react-resizable-handle-se': {
+        bottom: '0',
+        right: '0',
+        cursor: 'se-resize',
+    },
+    '.react-grid-item > .react-resizable-handle.react-resizable-handle-nw': {
+        top: '0',
+        left: '0',
+        cursor: 'nw-resize',
+        transform: 'rotate(180deg)',
+    },
+    '.react-grid-item > .react-resizable-handle.react-resizable-handle-ne': {
+        top: '0',
+        right: '0',
+        cursor: 'ne-resize',
+        transform: 'rotate(270deg)',
+    },
+    '.react-grid-item > .react-resizable-handle.react-resizable-handle-w': {
+        top: '50%',
+        marginTop: '-10px',
+        cursor: 'ew-resize',
+        left: '0',
+        transform: 'rotate(135deg)',
+    },
+    '.react-grid-item > .react-resizable-handle.react-resizable-handle-e': {
+        top: '50%',
+        marginTop: '-10px',
+        cursor: 'ew-resize',
+        right: '0',
+        transform: 'rotate(315deg)',
+    },
+    '.react-grid-item > .react-resizable-handle.react-resizable-handle-n': {
+        left: '50%',
+        marginLeft: '-10px',
+        cursor: 'ns-resize',
+        top: '0',
+        transform: 'rotate(225deg)',
+    },
+    '.react-grid-item > .react-resizable-handle.react-resizable-handle-s': {
+        left: '50%',
+        marginLeft: '-10px',
+        cursor: 'ns-resize',
+        bottom: '0',
+        transform: 'rotate(45deg)',
+    },
+    // Manually converted styles from 'react-resizable/css/styles.css',
+    '.react-resizable': {
+        position: 'relative',
+    },
+    '.react-resizable-handle': {
+        position: 'absolute',
+        width: '20px',
+        height: '20px',
+        backgroundRepeat: 'no-repeat',
+        backgroundOrigin: 'content-box',
+        boxSizing: 'border-box',
+        backgroundImage: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
+        backgroundPosition: 'bottom right',
+        padding: '0 3px 3px 0',
+    },
+    '.react-resizable-handle-sw': {
+        bottom: '0',
+        left: '0',
+        cursor: 'sw-resize',
+        transform: 'rotate(90deg)',
+    },
+    '.react-resizable-handle-se': {
+        bottom: '0',
+        right: '0',
+        cursor: 'se-resize',
+    },
+    '.react-resizable-handle-nw': {
+        top: '0',
+        left: '0',
+        cursor: 'nw-resize',
+        transform: 'rotate(180deg)',
+    },
+    '.react-resizable-handle-ne': {
+        top: '0',
+        right: '0',
+        cursor: 'ne-resize',
+        transform: 'rotate(270deg)',
+    },
+    '.react-resizable-handle-w': {
+        top: '50%',
+        marginTop: '-10px',
+        cursor: 'ew-resize',
+        left: '0',
+        transform: 'rotate(135deg)',
+    },
+    '.react-resizable-handle-e': {
+        top: '50%',
+        marginTop: '-10px',
+        cursor: 'ew-resize',
+        right: '0',
+        transform: 'rotate(315deg)',
+    },
+    '.react-resizable-handle-n': {
+        left: '50%',
+        marginLeft: '-10px',
+        cursor: 'ns-resize',
+        top: '0',
+        transform: 'rotate(225deg)',
+    },
+    '.react-resizable-handle-s': {
+        left: '50%',
+        marginLeft: '-10px',
+        cursor: 'ns-resize',
+        bottom: '0',
+        transform: 'rotate(45deg)',
+    },
+    // Custom
+    '.react-draggable-transparent-selection .react-grid-item': {
+        /* These styles prevent text selection during resize drag interactions.
+          The react-draggable-transparent-selection class is added to the body
+          element during resizing and removed after resizing has finished.
+          Not part of mixin because acts outside of .vitessce-container. */
+        userSelect: 'none !important',
+    },
+};
+export function GridLayoutGlobalStyles(props) {
+    const { classes } = props;
+    return (_jsx(ScopedGlobalStyles, { parentClassName: classes.vitessceContainer, styles: gridLayoutStyles }));
+}

package/dist-tsc/shared-mui/styles.d.ts

@@ -1,6 +1,6 @@
 export namespace muiTheme {
-    let dark: import("@material-ui/core").Theme;
-    let light: import("@material-ui/core").Theme;
-    let light2: import("@material-ui/core").Theme;
+    let dark: import("@mui/material").Theme;
+    let light: import("@mui/material").Theme;
+    let light2: import("@mui/material").Theme;
 }
 //# sourceMappingURL=styles.d.ts.map

package/dist-tsc/shared-mui/styles.js

@@ -1,5 +1,4 @@
-import { createTheme, colors } from '@material-ui/core';
-const { grey } = colors;
+import { createTheme, grey } from '@vitessce/styles';
 const globalColors = {
     white: '#FFFFFF',
     grayLight: '#D3D3D3',
@@ -47,14 +46,16 @@ const sharedThemeOptions = {
             fontSize: '12px',
         },
     },
-    props: {
+    components: {
         MuiButtonBase: {
-            disableRipple: true,
+            defaultProps: {
+                disableRipple: true,
+            },
         },
     },
 };
 const lightPalette = {
-    type: 'light',
+    mode: 'light',
     primary: grey,
     secondary: grey,
     primaryBackground: '#F1F1F1',
@@ -72,13 +73,14 @@ const lightPalette = {
     secondaryBackgroundDim: '#C0C0C0',
     secondaryForeground: '#222222',
     gridLayoutBackground: '#FFFFFF',
+    paperBackground: '#FFFFFF',
     cardBorder: 'rgba(241, 241, 241, 0.125)',
     tooltipText: 'rgba(0, 0, 0, 0.87)',
 };
 export const muiTheme = {
     dark: createTheme({
         palette: {
-            type: 'dark',
+            mode: 'dark',
             primary: grey,
             secondary: grey,
             primaryBackground: '#222222',
@@ -96,6 +98,7 @@ export const muiTheme = {
             secondaryBackgroundDim: '#444444',
             secondaryForeground: '#D3D3D3',
             gridLayoutBackground: '#333333',
+            paperBackground: '#2b2b2b',
             cardBorder: 'rgba(0, 0, 0, 0.125)',
             tooltipText: '#FFFFFF',
             ...globalColors,

package/dist-tsc/shared-plot-options/CellColorEncodingOption.js

@@ -1,13 +1,13 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { useId } from 'react-aria';
-import { TableCell, TableRow } from '@material-ui/core';
+import { TableCell, TableRow } from '@vitessce/styles';
 import { capitalize } from '@vitessce/utils';
 import OptionSelect from './OptionSelect.js';
 import { useStyles } from './styles.js';
 export default function CellColorEncodingOption(props) {
     const { observationsLabel, cellColorEncoding, setCellColorEncoding, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     const cellColorEncodingId = useId();
     const observationsLabelNice = capitalize(observationsLabel);
     function handleColorEncodingChange(event) {

package/dist-tsc/shared-plot-options/OptionSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionSelect.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/OptionSelect.js"],"names":[],"mappings":"AAIA,8DAeC"}
+{"version":3,"file":"OptionSelect.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/OptionSelect.js"],"names":[],"mappings":"AAIA,8DAcC"}

package/dist-tsc/shared-plot-options/OptionSelect.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Select } from '@material-ui/core';
+import { NativeSelect } from '@vitessce/styles';
 import { useStyles } from './styles.js';
 export default function OptionSelect(props) {
     const { classes: classesProp = {} } = props;
-    const classes = useStyles();
-    return (_jsx(Select, { native: true, disableUnderline: true, ...props, classes: {
+    const { classes } = useStyles();
+    return (_jsx(NativeSelect, { disableUnderline: true, ...props, classes: {
             root: classes.optionSelectRoot,
             ...classesProp,
         }, "aria-label": "Select an option" }));

package/dist-tsc/shared-plot-options/OptionsContainer.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { Box, Table, TableBody, TableContainer } from '@material-ui/core';
+import { Box, Table, TableBody, TableContainer } from '@vitessce/styles';
 import { useStyles } from './styles.js';
 export default function OptionsContainer(props) {
     const { children, } = props;
-    const classes = useStyles();
+    const { classes } = useStyles();
     return (_jsx(Box, { className: classes.box, children: _jsx(TableContainer, { className: classes.tableContainer, children: _jsx(Table, { className: classes.table, size: "small", "aria-label": "Menu of options available for the view", children: _jsx(TableBody, { children: children }) }) }) }));
 }

package/dist-tsc/shared-plot-options/styles.d.ts

@@ -1,2 +1,10 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
+export const useStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<never, string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
 //# sourceMappingURL=styles.d.ts.map

package/dist-tsc/shared-plot-options/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/styles.js"],"names":[],"mappings":"AAEA,2GA8CI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/shared-plot-options/styles.js"],"names":[],"mappings":"AAEA;;cAkCE,CAAD;;;kBAMQ,eAET;gBACoB,WACZ;eACM,WACV;EACA"}

package/dist-tsc/shared-plot-options/styles.js

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/core';
-export const useStyles = makeStyles(theme => ({
+import { makeStyles } from '@vitessce/styles';
+export const useStyles = makeStyles()(theme => ({
     box: {
         boxSizing: 'border-box',
     },
@@ -16,7 +16,8 @@ export const useStyles = makeStyles(theme => ({
     slider: {
         color: theme.palette.primaryForeground,
         minWidth: '60px',
-        padding: '10px 0 10px 0',
+        padding: 0,
+        margin: '14px 0 8px 0',
     },
     sliderValueLabel: {
         '& span': {

package/dist-tsc/shared-warning-styles.d.ts

@@ -1,2 +1,10 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
+export const useStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"warningLayout" | "containerFluid" | "row" | "warningCard", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
 //# sourceMappingURL=shared-warning-styles.d.ts.map

package/dist-tsc/shared-warning-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-warning-styles.d.ts","sourceRoot":"","sources":["../src/shared-warning-styles.js"],"names":[],"mappings":"AAEA,2GAmCI"}
+{"version":3,"file":"shared-warning-styles.d.ts","sourceRoot":"","sources":["../src/shared-warning-styles.js"],"names":[],"mappings":"AAEA;;cA6Bc,CAAA;;;kBAG6B,eAChC;gBAAyB,WAClC;eAEY,WAAU;EADpB"}

package/dist-tsc/shared-warning-styles.js

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/core';
-export const useStyles = makeStyles(theme => ({
+import { makeStyles } from '@vitessce/styles';
+export const useStyles = makeStyles()(theme => ({
     warningLayout: {
         backgroundColor: theme.palette.gridLayoutBackground,
         position: 'absolute',

package/dist-tsc/title-styles.d.ts

@@ -1,2 +1,10 @@
-export const useTitleStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<never>;
+export const useTitleStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<never, string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
 //# sourceMappingURL=title-styles.d.ts.map

package/dist-tsc/title-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA,gHA2EI"}
+{"version":3,"file":"title-styles.d.ts","sourceRoot":"","sources":["../src/title-styles.js"],"names":[],"mappings":"AAEA;;cA6BI,CAAF;;;kBAKE,eAGD;gBAAyB,WAAU;eAAsB,WAAU;EAsClE"}

package/dist-tsc/title-styles.js

@@ -1,5 +1,5 @@
-import { makeStyles } from '@material-ui/core';
-export const useTitleStyles = makeStyles(theme => ({
+import { makeStyles } from '@vitessce/styles';
+export const useTitleStyles = makeStyles()(theme => ({
     title: {
         color: theme.palette.primaryForeground,
         overflowX: 'hidden',

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.d.ts

@@ -1,8 +1,2 @@
 export function VitessceGridLayout(props: any): any;
-export namespace VitessceGridLayout {
-    namespace defaultProps {
-        let padding: number;
-        let margin: number;
-    }
-}
 //# sourceMappingURL=VitessceGridLayout.d.ts.map

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.js

@@ -15,7 +15,7 @@ class ResponsiveHeightGridLayout extends ResponsiveGridLayout {
     }
 }
 export function VitessceGridLayout(props) {
-    const { layout, viewTypes, coordinationTypes, fileTypes, stores, padding, margin: marginProp, draggableHandle: draggableHandleClass, onResize, onResizeStop, rowHeight, theme, height, onRemoveComponent, onLayoutChange: onLayoutChangeProp, isBounded, pageMode, children, } = props;
+    const { layout, viewTypes, coordinationTypes, fileTypes, stores, padding = 10, margin: marginProp = 10, draggableHandle: draggableHandleClass, onResize, onResizeStop, rowHeight, theme, height, onRemoveComponent, onLayoutChange: onLayoutChangeProp, isBounded, pageMode, children, } = props;
     const getComponent = useCallback((viewType) => {
         if (Array.isArray(viewTypes)) {
             const matchingViewType = viewTypes.find(v => v.name === viewType);
@@ -125,7 +125,3 @@ export function VitessceGridLayout(props) {
                     || ((window.innerHeight - 2 * padding - (maxRows - 1) * margin)
                         / maxRows), containerPadding: containerPadding, margin: margin, draggableHandle: draggableHandle, onLayoutChange: onLayoutChange, isBounded: isBounded, onResizeStart: saveCurrentLayouts, onDragStart: saveCurrentLayouts, onResize: onResize, onResizeStop: onResizeStop, children: layoutChildren })] }))));
 }
-VitessceGridLayout.defaultProps = {
-    padding: 10,
-    margin: 10,
-};

package/dist-tsc/vitessce-grid-layout/VitessceGridLayout.test.js

@@ -1,13 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { describe, it, expect, afterEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { cleanup, render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { PluginViewType } from '@vitessce/plugins';
 import { VitessceGridLayout } from './VitessceGridLayout.js';
-afterEach(() => {
-    cleanup();
-});
 function FakeComponent(props) {
     const { text } = props;
     return _jsx("span", { children: text });