grep-components 1.17.0 → 1.17.1-grepf-1864.1

package/dist/index.js

@@ -4,11 +4,11 @@ import LocalizedFormatPlugin from 'dayjs/plugin/localizedFormat';
 import isBetweenPlugin from 'dayjs/plugin/isBetween';
 import { red, pink, purple, deepPurple, indigo, blue, lightBlue, cyan, teal, green, lightGreen, lime, yellow, amber, orange, deepOrange, brown, grey, blueGrey } from '@mui/material/colors';
 import * as React from 'react';
-import React__default, { useContext, forwardRef, createElement, createContext, Fragment, useRef, useLayoutEffect, useState, useCallback as useCallback$1, useEffect, useMemo as useMemo$1 } from 'react';
+import React__default, { useRef, useContext, createContext, createElement, Fragment, forwardRef, useMemo as useMemo$1, useState, useCallback as useCallback$1, useEffect, useLayoutEffect } from 'react';
 import AccountCircle from '@mui/icons-material/AccountCircle';
 import ArrowDropdown from '@mui/icons-material/ArrowDropDown';
 import { Button, Box, Typography, IconButton, Menu, MenuItem, Tabs, Tab, Collapse, MenuList, Tooltip, Container, List, ListItem, ListItemText, ListItemIcon, Divider, styled, TableCell, TableRow, TableSortLabel, TableHead, TablePagination, TableContainer, Table, TableBody, TableFooter, CircularProgress, Link, TextField, FormControl, InputLabel, Select, OutlinedInput, Input, Checkbox, FormHelperText, Grid, ToggleButtonGroup, AppBar as AppBar$1, Toolbar as Toolbar$1, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions } from '@mui/material';
-import { useTheme as useTheme$1 } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { useHistory, NavLink, Prompt } from 'react-router-dom';
 import MenuIcon from '@mui/icons-material/Menu';
 import IconExpand from '@mui/icons-material/ExpandMore';
@@ -128,27 +128,6 @@ var getExcelDateTime = function (datetime, options) { return parseDate(datetime,
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
-function getAugmentedNamespace(n) {
-  var f = n.default;
-	if (typeof f == "function") {
-		var a = function () {
-			return f.apply(this, arguments);
-		};
-		a.prototype = f.prototype;
-  } else a = {};
-  Object.defineProperty(a, '__esModule', {value: true});
-	Object.keys(n).forEach(function (k) {
-		var d = Object.getOwnPropertyDescriptor(n, k);
-		Object.defineProperty(a, k, d.get ? d : {
-			enumerable: true,
-			get: function () {
-				return n[k];
-			}
-		});
-	});
-	return a;
-}
-
 var Key_enum = {};
 
 (function (exports) {
@@ -433,16 +412,28 @@ var convertToRgba = function (color, alpha) {
     return value ? "rgba(".concat(value, ", ").concat(alpha, ")") : color;
 };
 
-var tssReact = {};
-
-var cssAndCx = {};
-
-var classnames$1 = {};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const objectFromEntries = !Object
+    .fromEntries
+    ? (entries) => {
+        if (!entries || !entries[Symbol.iterator]) {
+            throw new Error("Object.fromEntries() requires a single iterable argument");
+        }
+        const o = {};
+        Object.keys(entries).forEach(key => {
+            const [k, v] = entries[key];
+            o[k] = v;
+        });
+        return o;
+    }
+    : Object.fromEntries;
 
-var assert$1 = {};
+/** Object.keys() with types */
+function objectKeys(o) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return Object.keys(o);
+}
 
-Object.defineProperty(assert$1, "__esModule", { value: true });
-assert$1.assert = void 0;
 /** https://docs.tsafe.dev/assert */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function assert(condition, msg) {
@@ -450,74 +441,61 @@ function assert(condition, msg) {
         throw new Error(msg);
     }
 }
-assert$1.assert = assert;
-
-var typeGuard$1 = {};
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-Object.defineProperty(typeGuard$1, "__esModule", { value: true });
-typeGuard$1.typeGuard = void 0;
 /** https://docs.tsafe.dev/typeguard */
 function typeGuard(_value, isMatched) {
     return isMatched;
 }
-typeGuard$1.typeGuard = typeGuard;
 
-(function (exports) {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.classnames = void 0;
-	const assert_1 = assert$1;
-	const typeGuard_1 = typeGuard$1;
-	/** Copy pasted from
-	 * https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L17-L63
-	 **/
-	const classnames = (args) => {
-	    const len = args.length;
-	    let i = 0;
-	    let cls = "";
-	    for (; i < len; i++) {
-	        const arg = args[i];
-	        if (arg == null)
-	            continue;
-	        let toAdd;
-	        switch (typeof arg) {
-	            case "boolean":
-	                break;
-	            case "object": {
-	                if (Array.isArray(arg)) {
-	                    toAdd = (0, exports.classnames)(arg);
-	                }
-	                else {
-	                    (0, assert_1.assert)(!(0, typeGuard_1.typeGuard)(arg, false));
-	                    if (process.env.NODE_ENV !== "production" &&
-	                        arg.styles !== undefined &&
-	                        arg.name !== undefined) {
-	                        console.error("You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n" +
-	                            "`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.");
-	                    }
-	                    toAdd = "";
-	                    for (const k in arg) {
-	                        if (arg[k] && k) {
-	                            toAdd && (toAdd += " ");
-	                            toAdd += k;
-	                        }
-	                    }
-	                }
-	                break;
-	            }
-	            default: {
-	                toAdd = arg;
-	            }
-	        }
-	        if (toAdd) {
-	            cls && (cls += " ");
-	            cls += toAdd;
-	        }
-	    }
-	    return cls;
-	};
-	exports.classnames = classnames;
-} (classnames$1));
+/** Copy pasted from
+ * https://github.com/emotion-js/emotion/blob/23f43ab9f24d44219b0b007a00f4ac681fe8712e/packages/react/src/class-names.js#L17-L63
+ **/
+const classnames = (args) => {
+    const len = args.length;
+    let i = 0;
+    let cls = "";
+    for (; i < len; i++) {
+        const arg = args[i];
+        if (arg == null)
+            continue;
+        let toAdd;
+        switch (typeof arg) {
+            case "boolean":
+                break;
+            case "object": {
+                if (Array.isArray(arg)) {
+                    toAdd = classnames(arg);
+                }
+                else {
+                    assert(!typeGuard(arg, false));
+                    if (process.env.NODE_ENV !== "production" &&
+                        arg.styles !== undefined &&
+                        arg.name !== undefined) {
+                        console.error("You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n" +
+                            "`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.");
+                    }
+                    toAdd = "";
+                    for (const k in arg) {
+                        if (arg[k] && k) {
+                            toAdd && (toAdd += " ");
+                            toAdd += k;
+                        }
+                    }
+                }
+                break;
+            }
+            default: {
+                toAdd = arg;
+            }
+        }
+        if (toAdd) {
+            cls && (cls += " ");
+            cls += toAdd;
+        }
+    }
+    return cls;
+};
 
 /* eslint-disable */
 // Inspired by https://github.com/garycourt/murmurhash-js
@@ -941,13 +919,6 @@ var serializeStyles = function serializeStyles(args, registered, mergedProps) {
   };
 };
 
-var emotionSerialize_esm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  serializeStyles: serializeStyles
-});
-
-var require$$1$1 = /*@__PURE__*/getAugmentedNamespace(emotionSerialize_esm);
-
 var isBrowser$3 = typeof document !== 'undefined';
 function getRegisteredStyles(registered, registeredStyles, classNames) {
   var rawClassName = '';
@@ -1000,24 +971,10 @@ var insertStyles = function insertStyles(cache, serialized, isStringTag) {
   }
 };
 
-var emotionUtils_esm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  getRegisteredStyles: getRegisteredStyles,
-  insertStyles: insertStyles,
-  registerStyles: registerStyles
-});
-
-var require$$2 = /*@__PURE__*/getAugmentedNamespace(emotionUtils_esm);
-
-var useGuaranteedMemo$1 = {};
-
-Object.defineProperty(useGuaranteedMemo$1, "__esModule", { value: true });
-useGuaranteedMemo$1.useGuaranteedMemo = void 0;
-const react_1$5 = React__default;
 /** Like react's useMemo but with guarantee that the fn
  * won't be invoked again if deps hasn't change */
 function useGuaranteedMemo(fn, deps) {
-    const ref = (0, react_1$5.useRef)();
+    const ref = useRef();
     if (!ref.current ||
         deps.length !== ref.current.prevDeps.length ||
         ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0) {
@@ -1028,9 +985,169 @@ function useGuaranteedMemo(fn, deps) {
     }
     return ref.current.v;
 }
-useGuaranteedMemo$1.useGuaranteedMemo = useGuaranteedMemo;
 
-var cache = {};
+function matchCSSObject(arg) {
+    return (arg instanceof Object &&
+        !("styles" in arg) &&
+        !("length" in arg) &&
+        !("__emotion_styles" in arg));
+}
+
+const { createCssAndCx } = (() => {
+    function merge(registered, css, className) {
+        const registeredStyles = [];
+        const rawClassName = getRegisteredStyles(registered, registeredStyles, className);
+        if (registeredStyles.length < 2) {
+            return className;
+        }
+        return rawClassName + css(registeredStyles);
+    }
+    function createCssAndCx(params) {
+        const { cache } = params;
+        const css = (...args) => {
+            const serialized = serializeStyles(args, cache.registered);
+            insertStyles(cache, serialized, false);
+            const className = `${cache.key}-${serialized.name}`;
+            scope: {
+                const arg = args[0];
+                if (!matchCSSObject(arg)) {
+                    break scope;
+                }
+                increaseSpecificityToTakePrecedenceOverMediaQueries.saveClassNameCSSObjectMapping(cache, className, arg);
+            }
+            return className;
+        };
+        const cx = (...args) => {
+            const className = classnames(args);
+            const feat27FixedClassnames = increaseSpecificityToTakePrecedenceOverMediaQueries.fixClassName(cache, className, css);
+            return merge(cache.registered, css, feat27FixedClassnames);
+            //return merge(cache.registered, css, className);
+        };
+        return { css, cx };
+    }
+    return { createCssAndCx };
+})();
+function createUseCssAndCx(params) {
+    const { useCache } = params;
+    function useCssAndCx() {
+        const cache = useCache();
+        const { css, cx } = useGuaranteedMemo(() => createCssAndCx({ cache }), [cache]);
+        return { css, cx };
+    }
+    return { useCssAndCx };
+}
+// https://github.com/garronej/tss-react/issues/27
+const increaseSpecificityToTakePrecedenceOverMediaQueries = (() => {
+    const cssObjectMapByCache = new WeakMap();
+    return {
+        "saveClassNameCSSObjectMapping": (cache, className, cssObject) => {
+            let cssObjectMap = cssObjectMapByCache.get(cache);
+            if (cssObjectMap === undefined) {
+                cssObjectMap = new Map();
+                cssObjectMapByCache.set(cache, cssObjectMap);
+            }
+            cssObjectMap.set(className, cssObject);
+        },
+        "fixClassName": (() => {
+            function fix(classNameCSSObjects) {
+                let isThereAnyMediaQueriesInPreviousClasses = false;
+                return classNameCSSObjects.map(([className, cssObject]) => {
+                    if (cssObject === undefined) {
+                        return className;
+                    }
+                    let out;
+                    if (!isThereAnyMediaQueriesInPreviousClasses) {
+                        out = className;
+                        for (const key in cssObject) {
+                            if (key.startsWith("@media")) {
+                                isThereAnyMediaQueriesInPreviousClasses = true;
+                                break;
+                            }
+                        }
+                    }
+                    else {
+                        out = {
+                            "&&": cssObject,
+                        };
+                    }
+                    return out;
+                });
+            }
+            return (cache, className, css) => {
+                const cssObjectMap = cssObjectMapByCache.get(cache);
+                return classnames(fix(className
+                    .split(" ")
+                    .map(className => [
+                    className,
+                    cssObjectMap === null || cssObjectMap === void 0 ? void 0 : cssObjectMap.get(className),
+                ])).map(classNameOrCSSObject => typeof classNameOrCSSObject === "string"
+                    ? classNameOrCSSObject
+                    : css(classNameOrCSSObject)));
+            };
+        })(),
+    };
+})();
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/**
+ * useEffect(
+ *    ()=> { ... },
+ *    [ { "foo": "bar" } ]
+ * )
+ * => The callback will be invoked every render.
+ * because { "foo": "bar" } is a new instance every render.
+ *
+ * useEffect(
+ *    ()=> { ... },
+ *    [ getDependencyArrayRef({ "foo": "bar" }) ]
+ * );
+ * => The callback will only be invoked once.
+ *
+ * The optimization will be enabled only if obj is
+ * of the form Record<string, string | number | undefined | null>
+ * overwise the object is returned (the function is the identity function).
+ */
+function getDependencyArrayRef(obj) {
+    if (!(obj instanceof Object) || typeof obj === "function") {
+        return obj;
+    }
+    const arr = [];
+    for (const key in obj) {
+        const value = obj[key];
+        const typeofValue = typeof value;
+        if (!(typeofValue === "string" ||
+            (typeofValue === "number" && !isNaN(value)) ||
+            typeofValue === "boolean" ||
+            value === undefined ||
+            value === null)) {
+            return obj;
+        }
+        arr.push(`${key}:${typeofValue}_${value}`);
+    }
+    return "xSqLiJdLMd9s" + arr.join("|");
+}
+
+/* eslint-disable @typescript-eslint/ban-types */
+function mergeClasses(classesFromUseStyles, classesFromProps, cx) {
+    //NOTE: We use this test to be resilient in case classesFromProps is not of the expected type.
+    if (!(classesFromProps instanceof Object)) {
+        return classesFromUseStyles;
+    }
+    const out = {};
+    objectKeys(classesFromUseStyles).forEach(ruleName => (out[ruleName] = cx(classesFromUseStyles[ruleName], classesFromProps[ruleName])));
+    objectKeys(classesFromProps).forEach(ruleName => {
+        if (ruleName in classesFromUseStyles) {
+            return;
+        }
+        const className = classesFromProps[ruleName];
+        //...Same here, that why we don't do className === undefined
+        if (typeof className !== "string") {
+            return;
+        }
+        out[ruleName] = className;
+    });
+    return out;
+}
 
 /*
 
@@ -2338,948 +2455,55 @@ var createCache = function createCache(options) {
   return cache;
 };
 
-var emotionCache_esm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  'default': createCache
-});
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
 
-var require$$1 = /*@__PURE__*/getAugmentedNamespace(emotionCache_esm);
-
-var __createBinding$2 = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault$2 = (commonjsGlobal && commonjsGlobal.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar$2 = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding$2(result, mod, k);
-    __setModuleDefault$2(result, mod);
-    return result;
-};
-var __importDefault$1 = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(cache, "__esModule", { value: true });
-cache.TssCacheProvider = cache.useTssEmotionCache = cache.getTssDefaultEmotionCache = cache.getDoExistsTssDefaultEmotionCacheMemoizedValue = void 0;
-const react_1$4 = __importStar$2(React__default);
-const cache_1$1 = __importDefault$1(require$$1);
-const { getDoExistsTssDefaultEmotionCacheMemoizedValue, getTssDefaultEmotionCache, reactContext, } = (() => {
-    const propertyKey = "__tss-react_context";
-    const peerDepObj = 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    react_1$4.createContext;
-    let sharedContext = peerDepObj["__tss-react_context"];
-    if (sharedContext === undefined) {
-        const { getTssDefaultEmotionCache, getDoExistsTssDefaultEmotionCacheMemoizedValue, } = (() => {
-            let cache = undefined;
-            /**
-             * Lazily initialized singleton
-             * If doReset is set to true the memoized instance will be
-             * discarded and a new one created.
-             * */
-            function getTssDefaultEmotionCache(params) {
-                const { doReset = false } = params !== null && params !== void 0 ? params : {};
-                if (doReset) {
-                    cache = undefined;
-                }
-                if (cache === undefined) {
-                    cache = (0, cache_1$1.default)({ "key": "tss" });
-                }
-                return cache;
-            }
-            return {
-                getTssDefaultEmotionCache,
-                "getDoExistsTssDefaultEmotionCacheMemoizedValue": () => cache !== undefined,
-            };
-        })();
-        sharedContext = {
-            getTssDefaultEmotionCache,
-            getDoExistsTssDefaultEmotionCacheMemoizedValue,
-            "reactContext": (0, react_1$4.createContext)(undefined),
-        };
-        Object.defineProperty(peerDepObj, propertyKey, {
-            "configurable": false,
-            "enumerable": false,
-            "writable": false,
-            "value": sharedContext,
-        });
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
     }
-    return sharedContext;
-})();
-cache.getDoExistsTssDefaultEmotionCacheMemoizedValue = getDoExistsTssDefaultEmotionCacheMemoizedValue;
-cache.getTssDefaultEmotionCache = getTssDefaultEmotionCache;
-function useTssEmotionCache() {
-    const cacheExplicitlyProvidedForTss = (0, react_1$4.useContext)(reactContext);
-    return cacheExplicitlyProvidedForTss !== null && cacheExplicitlyProvidedForTss !== void 0 ? cacheExplicitlyProvidedForTss : getTssDefaultEmotionCache();
-}
-cache.useTssEmotionCache = useTssEmotionCache;
-function TssCacheProvider(props) {
-    const { children, value } = props;
-    return (react_1$4.default.createElement(reactContext.Provider, { value: value }, children));
-}
-cache.TssCacheProvider = TssCacheProvider;
-
-var types = {};
 
-Object.defineProperty(types, "__esModule", { value: true });
-types.matchCSSObject = void 0;
-function matchCSSObject(arg) {
-    return (arg instanceof Object &&
-        !("styles" in arg) &&
-        !("length" in arg) &&
-        !("__emotion_styles" in arg));
+    return target;
+  };
+  return _extends.apply(this, arguments);
 }
-types.matchCSSObject = matchCSSObject;
 
-(function (exports) {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.useCssAndCx = exports.createCssAndCx = void 0;
-	const classnames_1 = classnames$1;
-	const serialize_1 = require$$1$1;
-	const utils_1 = require$$2;
-	const useGuaranteedMemo_1 = useGuaranteedMemo$1;
-	const cache_1 = cache;
-	const types_1 = types;
-	exports.createCssAndCx = (() => {
-	    function merge(registered, css, className) {
-	        const registeredStyles = [];
-	        const rawClassName = (0, utils_1.getRegisteredStyles)(registered, registeredStyles, className);
-	        if (registeredStyles.length < 2) {
-	            return className;
-	        }
-	        return rawClassName + css(registeredStyles);
-	    }
-	    function createCssAndCx(params) {
-	        const { cache } = params;
-	        const css = (...args) => {
-	            const serialized = (0, serialize_1.serializeStyles)(args, cache.registered);
-	            (0, utils_1.insertStyles)(cache, serialized, false);
-	            const className = `${cache.key}-${serialized.name}`;
-	            scope: {
-	                const arg = args[0];
-	                if (!(0, types_1.matchCSSObject)(arg)) {
-	                    break scope;
-	                }
-	                increaseSpecificityToTakePrecedenceOverMediaQuerries.saveClassNameCSSObjectMapping(cache, className, arg);
-	            }
-	            return className;
-	        };
-	        const cx = (...args) => {
-	            const className = (0, classnames_1.classnames)(args);
-	            const feat27FixedClassnames = increaseSpecificityToTakePrecedenceOverMediaQuerries.fixClassName(cache, className, css);
-	            return merge(cache.registered, css, feat27FixedClassnames);
-	            //return merge(cache.registered, css, className);
-	        };
-	        return { css, cx };
-	    }
-	    return { createCssAndCx };
-	})().createCssAndCx;
-	/** Will pickup the contextual cache if any */
-	function useCssAndCx() {
-	    const cache = (0, cache_1.useTssEmotionCache)();
-	    const { css, cx } = (0, useGuaranteedMemo_1.useGuaranteedMemo)(() => (0, exports.createCssAndCx)({ cache }), [cache]);
-	    return { css, cx };
-	}
-	exports.useCssAndCx = useCssAndCx;
-	// https://github.com/garronej/tss-react/issues/27
-	const increaseSpecificityToTakePrecedenceOverMediaQuerries = (() => {
-	    const cssObjectMapByCache = new WeakMap();
-	    return {
-	        "saveClassNameCSSObjectMapping": (cache, className, cssObject) => {
-	            let cssObjectMap = cssObjectMapByCache.get(cache);
-	            if (cssObjectMap === undefined) {
-	                cssObjectMap = new Map();
-	                cssObjectMapByCache.set(cache, cssObjectMap);
-	            }
-	            cssObjectMap.set(className, cssObject);
-	        },
-	        "fixClassName": (() => {
-	            function fix(classNameCSSObjects) {
-	                let isThereAnyMediaQueriesInPreviousClasses = false;
-	                return classNameCSSObjects.map(([className, cssObject]) => {
-	                    if (cssObject === undefined) {
-	                        return className;
-	                    }
-	                    let out;
-	                    if (!isThereAnyMediaQueriesInPreviousClasses) {
-	                        out = className;
-	                        for (const key in cssObject) {
-	                            if (key.startsWith("@media")) {
-	                                isThereAnyMediaQueriesInPreviousClasses = true;
-	                                break;
-	                            }
-	                        }
-	                    }
-	                    else {
-	                        out = {
-	                            "&&": cssObject,
-	                        };
-	                    }
-	                    return out;
-	                });
-	            }
-	            return (cache, className, css) => {
-	                const cssObjectMap = cssObjectMapByCache.get(cache);
-	                return (0, classnames_1.classnames)(fix(className
-	                    .split(" ")
-	                    .map(className => [
-	                    className,
-	                    cssObjectMap === null || cssObjectMap === void 0 ? void 0 : cssObjectMap.get(className),
-	                ])).map(classNameOrCSSObject => typeof classNameOrCSSObject === "string"
-	                    ? classNameOrCSSObject
-	                    : css(classNameOrCSSObject)));
-	            };
-	        })(),
-	    };
-	})();
-} (cssAndCx));
-
-var mergeClasses$1 = {};
+var isBrowser = typeof document !== 'undefined';
+var hasOwnProperty = {}.hasOwnProperty;
 
-var objectKeys$1 = {};
+var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
+// because this module is primarily intended for the browser and node
+// but it's also required in react native and similar environments sometimes
+// and we could have a special build just for that
+// but this is much easier and the native packages
+// might use a different theme context in the future anyway
+typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
+  key: 'css'
+}) : null);
 
-Object.defineProperty(objectKeys$1, "__esModule", { value: true });
-objectKeys$1.objectKeys = void 0;
-/** Object.keys() with types */
-function objectKeys(o) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return Object.keys(o);
+if (process.env.NODE_ENV !== 'production') {
+  EmotionCacheContext.displayName = 'EmotionCacheContext';
 }
-objectKeys$1.objectKeys = objectKeys;
 
-var getDependencyArrayRef$1 = {};
+EmotionCacheContext.Provider;
+var __unsafe_useEmotionCache = function useEmotionCache() {
+  return useContext(EmotionCacheContext);
+};
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-Object.defineProperty(getDependencyArrayRef$1, "__esModule", { value: true });
-getDependencyArrayRef$1.getDependencyArrayRef = void 0;
-/**
- * useEffect(
- *    ()=> { ... },
- *    [ { "foo": "bar" } ]
- * )
- * => The callback will be invoked every render.
- * because { "foo": "bar" } is a new instance every render.
- *
- * useEffect(
- *    ()=> { ... },
- *    [ getDependencyArrayRef({ "foo": "bar" }) ]
- * );
- * => The callback will only be invoked once.
- *
- * The optimization will be enabled only if obj is
- * of the form Record<string, string | number | undefined | null>
- * overwise the object is returned (the function is the identity function).
- */
-function getDependencyArrayRef(obj) {
-    if (!(obj instanceof Object) || typeof obj === "function") {
-        return obj;
-    }
-    const arr = [];
-    for (const key in obj) {
-        const value = obj[key];
-        const typeofValue = typeof value;
-        if (!(typeofValue === "string" ||
-            (typeofValue === "number" && !isNaN(value)) ||
-            typeofValue === "boolean" ||
-            value === undefined ||
-            value === null)) {
-            return obj;
-        }
-        arr.push(`${key}:${typeofValue}_${value}`);
-    }
-    return "xSqLiJdLMd9s" + arr.join("|");
-}
-getDependencyArrayRef$1.getDependencyArrayRef = getDependencyArrayRef;
+var withEmotionCache = function withEmotionCache(func) {
+  // $FlowFixMe
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    // the cache will never be null in the browser
+    var cache = useContext(EmotionCacheContext);
+    return func(props, cache, ref);
+  });
+};
 
-/* eslint-disable @typescript-eslint/ban-types */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-Object.defineProperty(mergeClasses$1, "__esModule", { value: true });
-mergeClasses$1.useMergedClasses = mergeClasses$1.mergeClasses = void 0;
-const objectKeys_1$1 = objectKeys$1;
-const getDependencyArrayRef_1$1 = getDependencyArrayRef$1;
-const cssAndCx_1$1 = cssAndCx;
-const react_1$3 = React__default;
-function mergeClasses(classesFromUseStyles, classesFromProps, cx) {
-    //NOTE: We use this test to be resilient in case classesFromProps is not of the expected type.
-    if (!(classesFromProps instanceof Object)) {
-        return classesFromUseStyles;
-    }
-    const out = {};
-    (0, objectKeys_1$1.objectKeys)(classesFromUseStyles).forEach(ruleName => (out[ruleName] = cx(classesFromUseStyles[ruleName], classesFromProps[ruleName])));
-    (0, objectKeys_1$1.objectKeys)(classesFromProps).forEach(ruleName => {
-        if (ruleName in classesFromUseStyles) {
-            return;
-        }
-        const className = classesFromProps[ruleName];
-        //...Same here, that why we don't do className === undefined
-        if (typeof className !== "string") {
-            return;
-        }
-        out[ruleName] = className;
-    });
-    return out;
-}
-mergeClasses$1.mergeClasses = mergeClasses;
-function useMergedClasses(classes, classesOv) {
-    const { cx } = (0, cssAndCx_1$1.useCssAndCx)();
-    return (0, react_1$3.useMemo)(() => mergeClasses(classes, classesOv, cx), [classes, (0, getDependencyArrayRef_1$1.getDependencyArrayRef)(classesOv), cx]);
-}
-mergeClasses$1.useMergedClasses = useMergedClasses;
-
-var makeStyles$1 = {};
-
-var Object_fromEntries = {};
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-Object.defineProperty(Object_fromEntries, "__esModule", { value: true });
-Object_fromEntries.objectFromEntries = void 0;
-Object_fromEntries.objectFromEntries = !Object
-    .fromEntries
-    ? (entries) => {
-        if (!entries || !entries[Symbol.iterator]) {
-            throw new Error("Object.fromEntries() requires a single iterable argument");
-        }
-        const o = {};
-        Object.keys(entries).forEach(key => {
-            const [k, v] = entries[key];
-            o[k] = v;
-        });
-        return o;
-    }
-    : Object.fromEntries;
-
-Object.defineProperty(makeStyles$1, "__esModule", { value: true });
-makeStyles$1.createMakeStyles = void 0;
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const react_1$2 = React__default;
-const Object_fromEntries_1 = Object_fromEntries;
-const objectKeys_1 = objectKeys$1;
-const cssAndCx_1 = cssAndCx;
-const getDependencyArrayRef_1 = getDependencyArrayRef$1;
-const typeGuard_1 = typeGuard$1;
-const cache_1 = cache;
-const assert_1 = assert$1;
-const mergeClasses_1 = mergeClasses$1;
-let counter = 0;
-function createMakeStyles(params) {
-    const { useTheme } = params;
-    /** returns useStyle. */
-    function makeStyles(params) {
-        const { name: nameOrWrappedName, uniqId = counter++ } = params !== null && params !== void 0 ? params : {};
-        const name = typeof nameOrWrappedName !== "object"
-            ? nameOrWrappedName
-            : Object.keys(nameOrWrappedName)[0];
-        return function (cssObjectByRuleNameOrGetCssObjectByRuleName) {
-            const getCssObjectByRuleName = typeof cssObjectByRuleNameOrGetCssObjectByRuleName ===
-                "function"
-                ? cssObjectByRuleNameOrGetCssObjectByRuleName
-                : () => cssObjectByRuleNameOrGetCssObjectByRuleName;
-            return function useStyles(params, styleOverrides) {
-                var _a, _b;
-                const theme = useTheme();
-                const { css, cx } = (0, cssAndCx_1.useCssAndCx)();
-                const cache = (0, cache_1.useTssEmotionCache)();
-                let classes = (0, react_1$2.useMemo)(() => {
-                    const refClassesCache = {};
-                    const refClasses = typeof Proxy !== "undefined" &&
-                        new Proxy({}, {
-                            "get": (_target, propertyKey) => {
-                                if (typeof propertyKey === "symbol") {
-                                    (0, assert_1.assert)(false);
-                                }
-                                return (refClassesCache[propertyKey] = `${cache.key}-${uniqId}${name !== undefined ? `-${name}` : ""}-${propertyKey}-ref`);
-                            },
-                        });
-                    const cssObjectByRuleName = getCssObjectByRuleName(theme, params, refClasses || {});
-                    const classes = (0, Object_fromEntries_1.objectFromEntries)((0, objectKeys_1.objectKeys)(cssObjectByRuleName).map(ruleName => {
-                        const cssObject = cssObjectByRuleName[ruleName];
-                        if (!cssObject.label) {
-                            cssObject.label = `${name !== undefined ? `${name}-` : ""}${ruleName}`;
-                        }
-                        return [
-                            ruleName,
-                            `${css(cssObject)}${(0, typeGuard_1.typeGuard)(ruleName, ruleName in refClassesCache)
-                                ? ` ${refClassesCache[ruleName]}`
-                                : ""}`,
-                        ];
-                    }));
-                    (0, objectKeys_1.objectKeys)(refClassesCache).forEach(ruleName => {
-                        if (ruleName in classes) {
-                            return;
-                        }
-                        classes[ruleName] =
-                            refClassesCache[ruleName];
-                    });
-                    return classes;
-                }, [cache, css, cx, theme, (0, getDependencyArrayRef_1.getDependencyArrayRef)(params)]);
-                const propsClasses = styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props.classes;
-                {
-                    classes = (0, react_1$2.useMemo)(() => (0, mergeClasses_1.mergeClasses)(classes, propsClasses, cx), [classes, (0, getDependencyArrayRef_1.getDependencyArrayRef)(propsClasses), cx]);
-                }
-                {
-                    let cssObjectByRuleNameOrGetCssObjectByRuleName = undefined;
-                    try {
-                        cssObjectByRuleNameOrGetCssObjectByRuleName =
-                            name !== undefined
-                                ? (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.styleOverrides
-                                : undefined;
-                        // eslint-disable-next-line no-empty
-                    }
-                    catch (_c) { }
-                    const themeClasses = (0, react_1$2.useMemo)(() => {
-                        if (!cssObjectByRuleNameOrGetCssObjectByRuleName) {
-                            return undefined;
-                        }
-                        const themeClasses = {};
-                        for (const ruleName in cssObjectByRuleNameOrGetCssObjectByRuleName) {
-                            const cssObjectOrGetCssObject = cssObjectByRuleNameOrGetCssObjectByRuleName[ruleName];
-                            if (!(cssObjectOrGetCssObject instanceof Object)) {
-                                continue;
-                            }
-                            themeClasses[ruleName] = css(typeof cssObjectOrGetCssObject === "function"
-                                ? cssObjectOrGetCssObject(Object.assign({ theme, "ownerState": styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.ownerState }, styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props))
-                                : cssObjectOrGetCssObject);
-                        }
-                        return themeClasses;
-                    }, [
-                        cssObjectByRuleNameOrGetCssObjectByRuleName ===
-                            undefined
-                            ? undefined
-                            : JSON.stringify(cssObjectByRuleNameOrGetCssObjectByRuleName),
-                        (0, getDependencyArrayRef_1.getDependencyArrayRef)(styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props),
-                        (0, getDependencyArrayRef_1.getDependencyArrayRef)(styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.ownerState),
-                        css,
-                    ]);
-                    classes = (0, react_1$2.useMemo)(() => (0, mergeClasses_1.mergeClasses)(classes, themeClasses, cx), [classes, themeClasses, cx]);
-                }
-                return {
-                    classes,
-                    theme,
-                    css,
-                    cx,
-                };
-            };
-        };
-    }
-    function useStyles() {
-        const theme = useTheme();
-        const { css, cx } = (0, cssAndCx_1.useCssAndCx)();
-        return { theme, css, cx };
-    }
-    return { makeStyles, useStyles };
-}
-makeStyles$1.createMakeStyles = createMakeStyles;
-
-var withStyles$1 = {};
-
-var capitalize$1 = {};
-
-Object.defineProperty(capitalize$1, "__esModule", { value: true });
-capitalize$1.capitalize = void 0;
-/** @see <https://docs.tsafe.dev/capitalize> */
-function capitalize(str) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return (str.charAt(0).toUpperCase() + str.slice(1));
-}
-capitalize$1.capitalize = capitalize;
-
-var __createBinding$1 = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault$1 = (commonjsGlobal && commonjsGlobal.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar$1 = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding$1(result, mod, k);
-    __setModuleDefault$1(result, mod);
-    return result;
-};
-var __rest = (commonjsGlobal && commonjsGlobal.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(withStyles$1, "__esModule", { value: true });
-withStyles$1.createWithStyles = void 0;
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const react_1$1 = __importStar$1(React__default);
-const makeStyles_1 = makeStyles$1;
-const capitalize_1 = capitalize$1;
-function createWithStyles(params) {
-    const { useTheme } = params;
-    const { makeStyles } = (0, makeStyles_1.createMakeStyles)({ useTheme });
-    function withStyles(Component, cssObjectByRuleNameOrGetCssObjectByRuleName, params) {
-        const Component_ = typeof Component === "string"
-            ? (() => {
-                const tag = Component;
-                const Out = function (_a) {
-                    var { children } = _a, props = __rest(_a, ["children"]);
-                    return (0, react_1$1.createElement)(tag, props, children);
-                };
-                Object.defineProperty(Out, "name", {
-                    "value": (0, capitalize_1.capitalize)(tag),
-                });
-                return Out;
-            })()
-            : Component;
-        const name = (() => {
-            const { name } = Component_;
-            return typeof name === "string" ? name : undefined;
-        })();
-        const useStyles = makeStyles(params)(typeof cssObjectByRuleNameOrGetCssObjectByRuleName === "function"
-            ? (theme, props, classes) => incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName(theme, props, classes))
-            : incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName));
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        const Out = (0, react_1$1.forwardRef)(function (props, ref) {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { className, classes: _classes } = props, rest = __rest(props, ["className", "classes"]);
-            const { classes, cx } = useStyles(props, { props });
-            return (react_1$1.default.createElement(Component_, Object.assign({ ref: ref, className: cx(classes.root, className) }, (typeof Component === "string" ? {} : { classes }), rest)));
-        });
-        if (name !== undefined) {
-            Object.defineProperty(Out, "name", {
-                "value": `${name}WithStyles`,
-            });
-        }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        return Out;
-    }
-    return { withStyles };
-}
-withStyles$1.createWithStyles = createWithStyles;
-function incorporateMediaQueries(cssObjectByRuleNameWithMediaQueries) {
-    const cssObjectByRuleName = {};
-    const cssObjectByRuleNameWithMediaQueriesByMediaQuery = {};
-    Object.keys(cssObjectByRuleNameWithMediaQueries).forEach(ruleNameOrMediaQuery => ((ruleNameOrMediaQuery.startsWith("@media")
-        ? cssObjectByRuleNameWithMediaQueriesByMediaQuery
-        : cssObjectByRuleName)[ruleNameOrMediaQuery] =
-        cssObjectByRuleNameWithMediaQueries[ruleNameOrMediaQuery]));
-    Object.keys(cssObjectByRuleNameWithMediaQueriesByMediaQuery).forEach(mediaQuery => {
-        const cssObjectByRuleNameBis = cssObjectByRuleNameWithMediaQueriesByMediaQuery[mediaQuery];
-        Object.keys(cssObjectByRuleNameBis).forEach(ruleName => {
-            var _a;
-            return (cssObjectByRuleName[ruleName] = Object.assign(Object.assign({}, ((_a = cssObjectByRuleName[ruleName]) !== null && _a !== void 0 ? _a : {})), { [mediaQuery]: cssObjectByRuleNameBis[ruleName] }));
-        });
-    });
-    return cssObjectByRuleName;
-}
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
-var reactIs$1 = {exports: {}};
-
-var reactIs_production_min = {};
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_production_min;
-
-function requireReactIs_production_min () {
-	if (hasRequiredReactIs_production_min) return reactIs_production_min;
-	hasRequiredReactIs_production_min = 1;
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
-	reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
-	reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
-	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
-	return reactIs_production_min;
-}
-
-var reactIs_development = {};
-
-/** @license React v16.13.1
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_development;
-
-function requireReactIs_development () {
-	if (hasRequiredReactIs_development) return reactIs_development;
-	hasRequiredReactIs_development = 1;
-
-
-
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-
-	// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-	// nor polyfill, then a plain number is used for performance.
-	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-	var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-	var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-	var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-	var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-	var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-	var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-	var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-	// (unstable) APIs that have been removed. Can we remove the symbols?
-
-	var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-	var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-	var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-	var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-	var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-	var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-	var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-	var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-	var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-	var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-	var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
-
-	function isValidElementType(type) {
-	  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-	  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-	}
-
-	function typeOf(object) {
-	  if (typeof object === 'object' && object !== null) {
-	    var $$typeof = object.$$typeof;
-
-	    switch ($$typeof) {
-	      case REACT_ELEMENT_TYPE:
-	        var type = object.type;
-
-	        switch (type) {
-	          case REACT_ASYNC_MODE_TYPE:
-	          case REACT_CONCURRENT_MODE_TYPE:
-	          case REACT_FRAGMENT_TYPE:
-	          case REACT_PROFILER_TYPE:
-	          case REACT_STRICT_MODE_TYPE:
-	          case REACT_SUSPENSE_TYPE:
-	            return type;
-
-	          default:
-	            var $$typeofType = type && type.$$typeof;
-
-	            switch ($$typeofType) {
-	              case REACT_CONTEXT_TYPE:
-	              case REACT_FORWARD_REF_TYPE:
-	              case REACT_LAZY_TYPE:
-	              case REACT_MEMO_TYPE:
-	              case REACT_PROVIDER_TYPE:
-	                return $$typeofType;
-
-	              default:
-	                return $$typeof;
-	            }
-
-	        }
-
-	      case REACT_PORTAL_TYPE:
-	        return $$typeof;
-	    }
-	  }
-
-	  return undefined;
-	} // AsyncMode is deprecated along with isAsyncMode
-
-	var AsyncMode = REACT_ASYNC_MODE_TYPE;
-	var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
-	var ContextConsumer = REACT_CONTEXT_TYPE;
-	var ContextProvider = REACT_PROVIDER_TYPE;
-	var Element = REACT_ELEMENT_TYPE;
-	var ForwardRef = REACT_FORWARD_REF_TYPE;
-	var Fragment = REACT_FRAGMENT_TYPE;
-	var Lazy = REACT_LAZY_TYPE;
-	var Memo = REACT_MEMO_TYPE;
-	var Portal = REACT_PORTAL_TYPE;
-	var Profiler = REACT_PROFILER_TYPE;
-	var StrictMode = REACT_STRICT_MODE_TYPE;
-	var Suspense = REACT_SUSPENSE_TYPE;
-	var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
-
-	function isAsyncMode(object) {
-	  {
-	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
-	    }
-	  }
-
-	  return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
-	}
-	function isConcurrentMode(object) {
-	  return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
-	}
-	function isContextConsumer(object) {
-	  return typeOf(object) === REACT_CONTEXT_TYPE;
-	}
-	function isContextProvider(object) {
-	  return typeOf(object) === REACT_PROVIDER_TYPE;
-	}
-	function isElement(object) {
-	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-	}
-	function isForwardRef(object) {
-	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
-	}
-	function isFragment(object) {
-	  return typeOf(object) === REACT_FRAGMENT_TYPE;
-	}
-	function isLazy(object) {
-	  return typeOf(object) === REACT_LAZY_TYPE;
-	}
-	function isMemo(object) {
-	  return typeOf(object) === REACT_MEMO_TYPE;
-	}
-	function isPortal(object) {
-	  return typeOf(object) === REACT_PORTAL_TYPE;
-	}
-	function isProfiler(object) {
-	  return typeOf(object) === REACT_PROFILER_TYPE;
-	}
-	function isStrictMode(object) {
-	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-	}
-	function isSuspense(object) {
-	  return typeOf(object) === REACT_SUSPENSE_TYPE;
-	}
-
-	reactIs_development.AsyncMode = AsyncMode;
-	reactIs_development.ConcurrentMode = ConcurrentMode;
-	reactIs_development.ContextConsumer = ContextConsumer;
-	reactIs_development.ContextProvider = ContextProvider;
-	reactIs_development.Element = Element;
-	reactIs_development.ForwardRef = ForwardRef;
-	reactIs_development.Fragment = Fragment;
-	reactIs_development.Lazy = Lazy;
-	reactIs_development.Memo = Memo;
-	reactIs_development.Portal = Portal;
-	reactIs_development.Profiler = Profiler;
-	reactIs_development.StrictMode = StrictMode;
-	reactIs_development.Suspense = Suspense;
-	reactIs_development.isAsyncMode = isAsyncMode;
-	reactIs_development.isConcurrentMode = isConcurrentMode;
-	reactIs_development.isContextConsumer = isContextConsumer;
-	reactIs_development.isContextProvider = isContextProvider;
-	reactIs_development.isElement = isElement;
-	reactIs_development.isForwardRef = isForwardRef;
-	reactIs_development.isFragment = isFragment;
-	reactIs_development.isLazy = isLazy;
-	reactIs_development.isMemo = isMemo;
-	reactIs_development.isPortal = isPortal;
-	reactIs_development.isProfiler = isProfiler;
-	reactIs_development.isStrictMode = isStrictMode;
-	reactIs_development.isSuspense = isSuspense;
-	reactIs_development.isValidElementType = isValidElementType;
-	reactIs_development.typeOf = typeOf;
-	  })();
-	}
-	return reactIs_development;
-}
-
-(function (module) {
-
-	if (process.env.NODE_ENV === 'production') {
-	  module.exports = requireReactIs_production_min();
-	} else {
-	  module.exports = requireReactIs_development();
-	}
-} (reactIs$1));
-
-var reactIs = reactIs$1.exports;
-
-/**
- * Copyright 2015, Yahoo! Inc.
- * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
- */
-var REACT_STATICS = {
-  childContextTypes: true,
-  contextType: true,
-  contextTypes: true,
-  defaultProps: true,
-  displayName: true,
-  getDefaultProps: true,
-  getDerivedStateFromError: true,
-  getDerivedStateFromProps: true,
-  mixins: true,
-  propTypes: true,
-  type: true
-};
-var KNOWN_STATICS = {
-  name: true,
-  length: true,
-  prototype: true,
-  caller: true,
-  callee: true,
-  arguments: true,
-  arity: true
-};
-var FORWARD_REF_STATICS = {
-  '$$typeof': true,
-  render: true,
-  defaultProps: true,
-  displayName: true,
-  propTypes: true
-};
-var MEMO_STATICS = {
-  '$$typeof': true,
-  compare: true,
-  defaultProps: true,
-  displayName: true,
-  propTypes: true,
-  type: true
-};
-var TYPE_STATICS = {};
-TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
-TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
-
-function getStatics(component) {
-  // React v16.11 and below
-  if (reactIs.isMemo(component)) {
-    return MEMO_STATICS;
-  } // React v16.12 and above
-
-
-  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
-}
-
-var defineProperty = Object.defineProperty;
-var getOwnPropertyNames = Object.getOwnPropertyNames;
-var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-var getPrototypeOf = Object.getPrototypeOf;
-var objectPrototype = Object.prototype;
-function hoistNonReactStatics$2(targetComponent, sourceComponent, blacklist) {
-  if (typeof sourceComponent !== 'string') {
-    // don't hoist over string (html) components
-    if (objectPrototype) {
-      var inheritedComponent = getPrototypeOf(sourceComponent);
-
-      if (inheritedComponent && inheritedComponent !== objectPrototype) {
-        hoistNonReactStatics$2(targetComponent, inheritedComponent, blacklist);
-      }
-    }
-
-    var keys = getOwnPropertyNames(sourceComponent);
-
-    if (getOwnPropertySymbols) {
-      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
-    }
-
-    var targetStatics = getStatics(targetComponent);
-    var sourceStatics = getStatics(sourceComponent);
-
-    for (var i = 0; i < keys.length; ++i) {
-      var key = keys[i];
-
-      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
-        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
-
-        try {
-          // Avoid failures from read-only properties
-          defineProperty(targetComponent, key, descriptor);
-        } catch (e) {}
-      }
-    }
-  }
-
-  return targetComponent;
-}
-
-var hoistNonReactStatics_cjs = hoistNonReactStatics$2;
-
-// this file isolates this package that is not tree-shakeable
-// and if this module doesn't actually contain any logic of its own
-// then Rollup just use 'hoist-non-react-statics' directly in other chunks
-
-var hoistNonReactStatics = (function (targetComponent, sourceComponent) {
-  return hoistNonReactStatics_cjs(targetComponent, sourceComponent);
-});
-
-var hoistNonReactStatics$1 = hoistNonReactStatics;
-
-var isBrowser$1 = typeof document !== 'undefined';
-var hasOwnProperty = {}.hasOwnProperty;
-
-var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
-// because this module is primarily intended for the browser and node
-// but it's also required in react native and similar environments sometimes
-// and we could have a special build just for that
-// but this is much easier and the native packages
-// might use a different theme context in the future anyway
-typeof HTMLElement !== 'undefined' ? /* #__PURE__ */createCache({
-  key: 'css'
-}) : null);
-
-if (process.env.NODE_ENV !== 'production') {
-  EmotionCacheContext.displayName = 'EmotionCacheContext';
-}
-
-var CacheProvider = EmotionCacheContext.Provider;
-var __unsafe_useEmotionCache = function useEmotionCache() {
-  return useContext(EmotionCacheContext);
-};
-
-var withEmotionCache = function withEmotionCache(func) {
-  // $FlowFixMe
-  return /*#__PURE__*/forwardRef(function (props, ref) {
-    // the cache will never be null in the browser
-    var cache = useContext(EmotionCacheContext);
-    return func(props, cache, ref);
-  });
-};
-
-if (!isBrowser$1) {
+if (!isBrowser) {
   withEmotionCache = function withEmotionCache(func) {
     return function (props) {
       var cache = useContext(EmotionCacheContext);
@@ -3301,593 +2525,50 @@ if (!isBrowser$1) {
       }
     };
   };
-}
-
-var ThemeContext = /* #__PURE__ */createContext({});
-
-if (process.env.NODE_ENV !== 'production') {
-  ThemeContext.displayName = 'EmotionThemeContext';
-}
-
-var useTheme = function useTheme() {
-  return useContext(ThemeContext);
-};
-
-var getTheme = function getTheme(outerTheme, theme) {
-  if (typeof theme === 'function') {
-    var mergedTheme = theme(outerTheme);
-
-    if (process.env.NODE_ENV !== 'production' && (mergedTheme == null || typeof mergedTheme !== 'object' || Array.isArray(mergedTheme))) {
-      throw new Error('[ThemeProvider] Please return an object from your theme function, i.e. theme={() => ({})}!');
-    }
-
-    return mergedTheme;
-  }
-
-  if (process.env.NODE_ENV !== 'production' && (theme == null || typeof theme !== 'object' || Array.isArray(theme))) {
-    throw new Error('[ThemeProvider] Please make your theme prop a plain object');
-  }
-
-  return _extends({}, outerTheme, theme);
-};
-
-var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
-  return weakMemoize(function (theme) {
-    return getTheme(outerTheme, theme);
-  });
-});
-var ThemeProvider = function ThemeProvider(props) {
-  var theme = useContext(ThemeContext);
-
-  if (props.theme !== theme) {
-    theme = createCacheWithTheme(theme)(props.theme);
-  }
-
-  return /*#__PURE__*/createElement(ThemeContext.Provider, {
-    value: theme
-  }, props.children);
-};
-function withTheme(Component) {
-  var componentName = Component.displayName || Component.name || 'Component';
-
-  var render = function render(props, ref) {
-    var theme = useContext(ThemeContext);
-    return /*#__PURE__*/createElement(Component, _extends({
-      theme: theme,
-      ref: ref
-    }, props));
-  }; // $FlowFixMe
-
-
-  var WithTheme = /*#__PURE__*/forwardRef(render);
-  WithTheme.displayName = "WithTheme(" + componentName + ")";
-  return hoistNonReactStatics$1(WithTheme, Component);
-}
-
-var getLastPart = function getLastPart(functionName) {
-  // The match may be something like 'Object.createEmotionProps' or
-  // 'Loader.prototype.render'
-  var parts = functionName.split('.');
-  return parts[parts.length - 1];
-};
-
-var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) {
-  // V8
-  var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line);
-  if (match) return getLastPart(match[1]); // Safari / Firefox
-
-  match = /^([A-Za-z0-9$.]+)@/.exec(line);
-  if (match) return getLastPart(match[1]);
-  return undefined;
-};
-
-var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS
-// identifiers, thus we only need to replace what is a valid character for JS,
-// but not for CSS.
-
-var sanitizeIdentifier = function sanitizeIdentifier(identifier) {
-  return identifier.replace(/\$/g, '-');
-};
-
-var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) {
-  if (!stackTrace) return undefined;
-  var lines = stackTrace.split('\n');
-
-  for (var i = 0; i < lines.length; i++) {
-    var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error"
-
-    if (!functionName) continue; // If we reach one of these, we have gone too far and should quit
-
-    if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an
-    // uppercase letter
-
-    if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName);
-  }
-
-  return undefined;
-};
-
-var isBrowser$1$1 = typeof document !== 'undefined';
-var useInsertionEffect$1 = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
-  create();
-};
-function useInsertionEffectMaybe(create) {
-  if (!isBrowser$1$1) {
-    return create();
-  }
-
-  useInsertionEffect$1(create);
-}
-
-var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
-var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
-var createEmotionProps = function createEmotionProps(type, props) {
-  if (process.env.NODE_ENV !== 'production' && typeof props.css === 'string' && // check if there is a css declaration
-  props.css.indexOf(':') !== -1) {
-    throw new Error("Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/react' like this: css`" + props.css + "`");
-  }
-
-  var newProps = {};
-
-  for (var key in props) {
-    if (hasOwnProperty.call(props, key)) {
-      newProps[key] = props[key];
-    }
-  }
-
-  newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when
-  // the label hasn't already been computed
-
-  if (process.env.NODE_ENV !== 'production' && !!props.css && (typeof props.css !== 'object' || typeof props.css.name !== 'string' || props.css.name.indexOf('-') === -1)) {
-    var label = getLabelFromStackTrace(new Error().stack);
-    if (label) newProps[labelPropName] = label;
-  }
-
-  return newProps;
-};
-
-var Insertion$1 = function Insertion(_ref) {
-  var cache = _ref.cache,
-      serialized = _ref.serialized,
-      isStringTag = _ref.isStringTag;
-  registerStyles(cache, serialized, isStringTag);
-  var rules = useInsertionEffectMaybe(function () {
-    return insertStyles(cache, serialized, isStringTag);
-  });
-
-  if (!isBrowser$1 && rules !== undefined) {
-    var _ref2;
-
-    var serializedNames = serialized.name;
-    var next = serialized.next;
-
-    while (next !== undefined) {
-      serializedNames += ' ' + next.name;
-      next = next.next;
-    }
-
-    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref2.nonce = cache.sheet.nonce, _ref2));
-  }
-
-  return null;
-};
-
-var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
-  var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
-  // not passing the registered cache to serializeStyles because it would
-  // make certain babel optimisations not possible
-
-  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
-    cssProp = cache.registered[cssProp];
-  }
-
-  var WrappedComponent = props[typePropName];
-  var registeredStyles = [cssProp];
-  var className = '';
-
-  if (typeof props.className === 'string') {
-    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
-  } else if (props.className != null) {
-    className = props.className + " ";
-  }
-
-  var serialized = serializeStyles(registeredStyles, undefined, useContext(ThemeContext));
-
-  if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
-    var labelFromStack = props[labelPropName];
-
-    if (labelFromStack) {
-      serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
-    }
-  }
-
-  className += cache.key + "-" + serialized.name;
-  var newProps = {};
-
-  for (var key in props) {
-    if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
-      newProps[key] = props[key];
-    }
-  }
-
-  newProps.ref = ref;
-  newProps.className = className;
-  return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion$1, {
-    cache: cache,
-    serialized: serialized,
-    isStringTag: typeof WrappedComponent === 'string'
-  }), /*#__PURE__*/createElement(WrappedComponent, newProps));
-});
-
-if (process.env.NODE_ENV !== 'production') {
-  Emotion.displayName = 'EmotionCssPropInternal';
-}
-
-var pkg = {
-	name: "@emotion/react",
-	version: "11.10.0",
-	main: "dist/emotion-react.cjs.js",
-	module: "dist/emotion-react.esm.js",
-	browser: {
-		"./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js"
-	},
-	exports: {
-		".": {
-			module: {
-				worker: "./dist/emotion-react.worker.esm.js",
-				browser: "./dist/emotion-react.browser.esm.js",
-				"default": "./dist/emotion-react.esm.js"
-			},
-			"default": "./dist/emotion-react.cjs.js"
-		},
-		"./jsx-runtime": {
-			module: {
-				worker: "./jsx-runtime/dist/emotion-react-jsx-runtime.worker.esm.js",
-				browser: "./jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js",
-				"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.esm.js"
-			},
-			"default": "./jsx-runtime/dist/emotion-react-jsx-runtime.cjs.js"
-		},
-		"./_isolated-hnrs": {
-			module: {
-				worker: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.worker.esm.js",
-				browser: "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.browser.esm.js",
-				"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.esm.js"
-			},
-			"default": "./_isolated-hnrs/dist/emotion-react-_isolated-hnrs.cjs.js"
-		},
-		"./jsx-dev-runtime": {
-			module: {
-				worker: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.worker.esm.js",
-				browser: "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.browser.esm.js",
-				"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.esm.js"
-			},
-			"default": "./jsx-dev-runtime/dist/emotion-react-jsx-dev-runtime.cjs.js"
-		},
-		"./package.json": "./package.json",
-		"./types/css-prop": "./types/css-prop.d.ts",
-		"./macro": "./macro.js"
-	},
-	types: "types/index.d.ts",
-	files: [
-		"src",
-		"dist",
-		"jsx-runtime",
-		"jsx-dev-runtime",
-		"_isolated-hnrs",
-		"types/*.d.ts",
-		"macro.js",
-		"macro.d.ts",
-		"macro.js.flow"
-	],
-	sideEffects: false,
-	author: "Emotion Contributors",
-	license: "MIT",
-	scripts: {
-		"test:typescript": "dtslint types"
-	},
-	dependencies: {
-		"@babel/runtime": "^7.18.3",
-		"@emotion/babel-plugin": "^11.10.0",
-		"@emotion/cache": "^11.10.0",
-		"@emotion/serialize": "^1.1.0",
-		"@emotion/utils": "^1.2.0",
-		"@emotion/weak-memoize": "^0.3.0",
-		"hoist-non-react-statics": "^3.3.1"
-	},
-	peerDependencies: {
-		"@babel/core": "^7.0.0",
-		react: ">=16.8.0"
-	},
-	peerDependenciesMeta: {
-		"@babel/core": {
-			optional: true
-		},
-		"@types/react": {
-			optional: true
-		}
-	},
-	devDependencies: {
-		"@babel/core": "^7.18.5",
-		"@definitelytyped/dtslint": "0.0.112",
-		"@emotion/css": "11.10.0",
-		"@emotion/css-prettifier": "1.1.0",
-		"@emotion/server": "11.10.0",
-		"@emotion/styled": "11.10.0",
-		"html-tag-names": "^1.1.2",
-		react: "16.14.0",
-		"svg-tag-names": "^1.1.1",
-		typescript: "^4.5.5"
-	},
-	repository: "https://github.com/emotion-js/emotion/tree/main/packages/react",
-	publishConfig: {
-		access: "public"
-	},
-	"umd:main": "dist/emotion-react.umd.min.js",
-	preconstruct: {
-		entrypoints: [
-			"./index.js",
-			"./jsx-runtime.js",
-			"./jsx-dev-runtime.js",
-			"./_isolated-hnrs.js"
-		],
-		umdName: "emotionReact",
-		exports: {
-			envConditions: [
-				"browser",
-				"worker"
-			],
-			extra: {
-				"./types/css-prop": "./types/css-prop.d.ts",
-				"./macro": "./macro.js"
-			}
-		}
-	}
-};
-
-var jsx = function jsx(type, props) {
-  var args = arguments;
-
-  if (props == null || !hasOwnProperty.call(props, 'css')) {
-    // $FlowFixMe
-    return createElement.apply(undefined, args);
-  }
-
-  var argsLength = args.length;
-  var createElementArgArray = new Array(argsLength);
-  createElementArgArray[0] = Emotion;
-  createElementArgArray[1] = createEmotionProps(type, props);
-
-  for (var i = 2; i < argsLength; i++) {
-    createElementArgArray[i] = args[i];
-  } // $FlowFixMe
-
-
-  return createElement.apply(null, createElementArgArray);
-};
-
-var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useLayoutEffect;
-var warnedAboutCssPropForGlobal = false; // maintain place over rerenders.
-// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild
-// initial client-side render from SSR, use place of hydrating tag
-
-var Global = /* #__PURE__ */withEmotionCache(function (props, cache) {
-  if (process.env.NODE_ENV !== 'production' && !warnedAboutCssPropForGlobal && ( // check for className as well since the user is
-  // probably using the custom createElement which
-  // means it will be turned into a className prop
-  // $FlowFixMe I don't really want to add it to the type since it shouldn't be used
-  props.className || props.css)) {
-    console.error("It looks like you're using the css prop on Global, did you mean to use the styles prop instead?");
-    warnedAboutCssPropForGlobal = true;
-  }
-
-  var styles = props.styles;
-  var serialized = serializeStyles([styles], undefined, useContext(ThemeContext));
-
-  if (!isBrowser$1) {
-    var _ref;
-
-    var serializedNames = serialized.name;
-    var serializedStyles = serialized.styles;
-    var next = serialized.next;
-
-    while (next !== undefined) {
-      serializedNames += ' ' + next.name;
-      serializedStyles += next.styles;
-      next = next.next;
-    }
-
-    var shouldCache = cache.compat === true;
-    var rules = cache.insert("", {
-      name: serializedNames,
-      styles: serializedStyles
-    }, cache.sheet, shouldCache);
-
-    if (shouldCache) {
-      return null;
-    }
-
-    return /*#__PURE__*/createElement("style", (_ref = {}, _ref["data-emotion"] = cache.key + "-global " + serializedNames, _ref.dangerouslySetInnerHTML = {
-      __html: rules
-    }, _ref.nonce = cache.sheet.nonce, _ref));
-  } // yes, i know these hooks are used conditionally
-  // but it is based on a constant that will never change at runtime
-  // it's effectively like having two implementations and switching them out
-  // so it's not actually breaking anything
-
-
-  var sheetRef = useRef();
-  useInsertionEffect(function () {
-    var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675
-
-    var sheet = new cache.sheet.constructor({
-      key: key,
-      nonce: cache.sheet.nonce,
-      container: cache.sheet.container,
-      speedy: cache.sheet.isSpeedy
-    });
-    var rehydrating = false; // $FlowFixMe
-
-    var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]");
-
-    if (cache.sheet.tags.length) {
-      sheet.before = cache.sheet.tags[0];
-    }
-
-    if (node !== null) {
-      rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s
-
-      node.setAttribute('data-emotion', key);
-      sheet.hydrate([node]);
-    }
-
-    sheetRef.current = [sheet, rehydrating];
-    return function () {
-      sheet.flush();
-    };
-  }, [cache]);
-  useInsertionEffect(function () {
-    var sheetRefCurrent = sheetRef.current;
-    var sheet = sheetRefCurrent[0],
-        rehydrating = sheetRefCurrent[1];
-
-    if (rehydrating) {
-      sheetRefCurrent[1] = false;
-      return;
-    }
-
-    if (serialized.next !== undefined) {
-      // insert keyframes
-      insertStyles(cache, serialized.next, true);
-    }
-
-    if (sheet.tags.length) {
-      // if this doesn't exist then it will be null so the style element will be appended
-      var element = sheet.tags[sheet.tags.length - 1].nextElementSibling;
-      sheet.before = element;
-      sheet.flush();
-    }
-
-    cache.insert("", serialized, sheet, false);
-  }, [cache, serialized.name]);
-  return null;
-});
-
-if (process.env.NODE_ENV !== 'production') {
-  Global.displayName = 'EmotionGlobal';
-}
-
-function css() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-
-  return serializeStyles(args);
-}
-
-var keyframes = function keyframes() {
-  var insertable = css.apply(void 0, arguments);
-  var name = "animation-" + insertable.name; // $FlowFixMe
-
-  return {
-    name: name,
-    styles: "@keyframes " + name + "{" + insertable.styles + "}",
-    anim: 1,
-    toString: function toString() {
-      return "_EMO_" + this.name + "_" + this.styles + "_EMO_";
-    }
-  };
-};
-
-var classnames = function classnames(args) {
-  var len = args.length;
-  var i = 0;
-  var cls = '';
-
-  for (; i < len; i++) {
-    var arg = args[i];
-    if (arg == null) continue;
-    var toAdd = void 0;
-
-    switch (typeof arg) {
-      case 'boolean':
-        break;
-
-      case 'object':
-        {
-          if (Array.isArray(arg)) {
-            toAdd = classnames(arg);
-          } else {
-            if (process.env.NODE_ENV !== 'production' && arg.styles !== undefined && arg.name !== undefined) {
-              console.error('You have passed styles created with `css` from `@emotion/react` package to the `cx`.\n' + '`cx` is meant to compose class names (strings) so you should convert those styles to a class name by passing them to the `css` received from <ClassNames/> component.');
-            }
-
-            toAdd = '';
-
-            for (var k in arg) {
-              if (arg[k] && k) {
-                toAdd && (toAdd += ' ');
-                toAdd += k;
-              }
-            }
-          }
-
-          break;
-        }
+}
 
-      default:
-        {
-          toAdd = arg;
-        }
-    }
+var ThemeContext = /* #__PURE__ */createContext({});
 
-    if (toAdd) {
-      cls && (cls += ' ');
-      cls += toAdd;
-    }
-  }
+if (process.env.NODE_ENV !== 'production') {
+  ThemeContext.displayName = 'EmotionThemeContext';
+}
 
-  return cls;
+var isBrowser$1 = typeof document !== 'undefined';
+var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
+  create();
 };
-
-function merge(registered, css, className) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
-
-  if (registeredStyles.length < 2) {
-    return className;
+function useInsertionEffectMaybe(create) {
+  if (!isBrowser$1) {
+    return create();
   }
 
-  return rawClassName + css(registeredStyles);
+  useInsertionEffect(create);
 }
 
+var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__';
+var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
+
 var Insertion = function Insertion(_ref) {
   var cache = _ref.cache,
-      serializedArr = _ref.serializedArr;
+      serialized = _ref.serialized,
+      isStringTag = _ref.isStringTag;
+  registerStyles(cache, serialized, isStringTag);
   var rules = useInsertionEffectMaybe(function () {
-    var rules = '';
+    return insertStyles(cache, serialized, isStringTag);
+  });
 
-    for (var i = 0; i < serializedArr.length; i++) {
-      var res = insertStyles(cache, serializedArr[i], false);
+  if (!isBrowser && rules !== undefined) {
+    var _ref2;
 
-      if (!isBrowser$1 && res !== undefined) {
-        rules += res;
-      }
-    }
+    var serializedNames = serialized.name;
+    var next = serialized.next;
 
-    if (!isBrowser$1) {
-      return rules;
+    while (next !== undefined) {
+      serializedNames += ' ' + next.name;
+      next = next.next;
     }
-  });
-
-  if (!isBrowser$1 && rules.length !== 0) {
-    var _ref2;
 
-    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedArr.map(function (serialized) {
-      return serialized.name;
-    }).join(' '), _ref2.dangerouslySetInnerHTML = {
+    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
       __html: rules
     }, _ref2.nonce = cache.sheet.nonce, _ref2));
   }
@@ -3895,164 +2576,295 @@ var Insertion = function Insertion(_ref) {
   return null;
 };
 
-var ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
-  var hasRendered = false;
-  var serializedArr = [];
+var Emotion = /* #__PURE__ */withEmotionCache(function (props, cache, ref) {
+  var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works
+  // not passing the registered cache to serializeStyles because it would
+  // make certain babel optimisations not possible
 
-  var css = function css() {
-    if (hasRendered && process.env.NODE_ENV !== 'production') {
-      throw new Error('css can only be used during render');
-    }
+  if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) {
+    cssProp = cache.registered[cssProp];
+  }
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var WrappedComponent = props[typePropName];
+  var registeredStyles = [cssProp];
+  var className = '';
 
-    var serialized = serializeStyles(args, cache.registered);
-    serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx`
+  if (typeof props.className === 'string') {
+    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
+  } else if (props.className != null) {
+    className = props.className + " ";
+  }
 
-    registerStyles(cache, serialized, false);
-    return cache.key + "-" + serialized.name;
-  };
+  var serialized = serializeStyles(registeredStyles, undefined, useContext(ThemeContext));
 
-  var cx = function cx() {
-    if (hasRendered && process.env.NODE_ENV !== 'production') {
-      throw new Error('cx can only be used during render');
-    }
+  if (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
+    var labelFromStack = props[labelPropName];
 
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
+    if (labelFromStack) {
+      serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
     }
+  }
 
-    return merge(cache.registered, css, classnames(args));
-  };
+  className += cache.key + "-" + serialized.name;
+  var newProps = {};
 
-  var content = {
-    css: css,
-    cx: cx,
-    theme: useContext(ThemeContext)
-  };
-  var ele = props.children(content);
-  hasRendered = true;
+  for (var key in props) {
+    if (hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && (process.env.NODE_ENV === 'production' || key !== labelPropName)) {
+      newProps[key] = props[key];
+    }
+  }
+
+  newProps.ref = ref;
+  newProps.className = className;
   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
     cache: cache,
-    serializedArr: serializedArr
-  }), ele);
+    serialized: serialized,
+    isStringTag: typeof WrappedComponent === 'string'
+  }), /*#__PURE__*/createElement(WrappedComponent, newProps));
 });
 
 if (process.env.NODE_ENV !== 'production') {
-  ClassNames.displayName = 'EmotionClassNames';
+  Emotion.displayName = 'EmotionCssPropInternal';
 }
 
-if (process.env.NODE_ENV !== 'production') {
-  var isBrowser = typeof document !== 'undefined'; // #1727 for some reason Jest evaluates modules twice if some consuming module gets mocked with jest.mock
-
-  var isJest = typeof jest !== 'undefined';
-
-  if (isBrowser && !isJest) {
-    // globalThis has wide browser support - https://caniuse.com/?search=globalThis, Node.js 12 and later
-    var globalContext = // $FlowIgnore
-    typeof globalThis !== 'undefined' ? globalThis // eslint-disable-line no-undef
-    : isBrowser ? window : global;
-    var globalKey = "__EMOTION_REACT_" + pkg.version.split('.')[0] + "__";
-
-    if (globalContext[globalKey]) {
-      console.warn('You are loading @emotion/react when it is already loaded. Running ' + 'multiple instances may cause problems. This can happen if multiple ' + 'versions are used, or if multiple builds of the same version are ' + 'used.');
+/* eslint-disable @typescript-eslint/no-explicit-any */
+let counter = 0;
+function createMakeStyles(params) {
+    const { useTheme, cache: cacheProvidedAtInception } = params;
+    function useCache() {
+        var _a;
+        const contextualCache = __unsafe_useEmotionCache();
+        const cacheExplicitlyProvidedForTss = useCacheProvidedByProvider();
+        const cacheToBeUsed = (_a = cacheProvidedAtInception !== null && cacheProvidedAtInception !== void 0 ? cacheProvidedAtInception : cacheExplicitlyProvidedForTss) !== null && _a !== void 0 ? _a : contextualCache;
+        if (cacheToBeUsed === null) {
+            throw new Error([
+                "In order to get SSR working with tss-react you need to explicitly provide an Emotion cache.",
+                "MUI users be aware: This is not an error strictly related to tss-react, with or without tss-react,",
+                "MUI needs an Emotion cache to be provided for SSR to work.",
+                "Here is the MUI documentation related to SSR setup: https://mui.com/material-ui/guides/server-rendering/",
+                "TSS provides helper that makes the process of setting up SSR easier: https://docs.tss-react.dev/ssr",
+            ].join("\n"));
+        }
+        return cacheToBeUsed;
     }
-
-    globalContext[globalKey] = true;
-  }
+    const { useCssAndCx } = createUseCssAndCx({ useCache });
+    /** returns useStyle. */
+    function makeStyles(params) {
+        const { name: nameOrWrappedName, uniqId = counter++ } = params !== null && params !== void 0 ? params : {};
+        const name = typeof nameOrWrappedName !== "object"
+            ? nameOrWrappedName
+            : Object.keys(nameOrWrappedName)[0];
+        return function (cssObjectByRuleNameOrGetCssObjectByRuleName) {
+            const getCssObjectByRuleName = typeof cssObjectByRuleNameOrGetCssObjectByRuleName ===
+                "function"
+                ? cssObjectByRuleNameOrGetCssObjectByRuleName
+                : () => cssObjectByRuleNameOrGetCssObjectByRuleName;
+            return function useStyles(params, styleOverrides) {
+                var _a, _b;
+                const theme = useTheme();
+                const { css, cx } = useCssAndCx();
+                const cache = useCache();
+                let classes = useMemo$1(() => {
+                    const refClassesCache = {};
+                    const refClasses = typeof Proxy !== "undefined" &&
+                        new Proxy({}, {
+                            "get": (_target, propertyKey) => {
+                                if (typeof propertyKey === "symbol") {
+                                    assert(false);
+                                }
+                                return (refClassesCache[propertyKey] = `${cache.key}-${uniqId}${name !== undefined ? `-${name}` : ""}-${propertyKey}-ref`);
+                            },
+                        });
+                    const cssObjectByRuleName = getCssObjectByRuleName(theme, params, refClasses || {});
+                    const classes = objectFromEntries(objectKeys(cssObjectByRuleName).map(ruleName => {
+                        const cssObject = cssObjectByRuleName[ruleName];
+                        if (!cssObject.label) {
+                            cssObject.label = `${name !== undefined ? `${name}-` : ""}${ruleName}`;
+                        }
+                        return [
+                            ruleName,
+                            `${css(cssObject)}${typeGuard(ruleName, ruleName in refClassesCache)
+                                ? ` ${refClassesCache[ruleName]}`
+                                : ""}`,
+                        ];
+                    }));
+                    objectKeys(refClassesCache).forEach(ruleName => {
+                        if (ruleName in classes) {
+                            return;
+                        }
+                        classes[ruleName] =
+                            refClassesCache[ruleName];
+                    });
+                    return classes;
+                }, [cache, css, cx, theme, getDependencyArrayRef(params)]);
+                const propsClasses = styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props.classes;
+                classes = useMemo$1(() => mergeClasses(classes, propsClasses, cx), [classes, getDependencyArrayRef(propsClasses), cx]);
+                {
+                    let cssObjectByRuleNameOrGetCssObjectByRuleName = undefined;
+                    try {
+                        cssObjectByRuleNameOrGetCssObjectByRuleName =
+                            name !== undefined
+                                ? (_b = (_a = theme.components) === null || _a === void 0 ? void 0 : _a[name]) === null || _b === void 0 ? void 0 : _b.styleOverrides
+                                : undefined;
+                        // eslint-disable-next-line no-empty
+                    }
+                    catch (_c) { }
+                    const themeClasses = useMemo$1(() => {
+                        if (!cssObjectByRuleNameOrGetCssObjectByRuleName) {
+                            return undefined;
+                        }
+                        const themeClasses = {};
+                        for (const ruleName in cssObjectByRuleNameOrGetCssObjectByRuleName) {
+                            const cssObjectOrGetCssObject = cssObjectByRuleNameOrGetCssObjectByRuleName[ruleName];
+                            if (!(cssObjectOrGetCssObject instanceof Object)) {
+                                continue;
+                            }
+                            themeClasses[ruleName] = css(typeof cssObjectOrGetCssObject === "function"
+                                ? cssObjectOrGetCssObject(Object.assign({ theme, "ownerState": styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.ownerState }, styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props))
+                                : cssObjectOrGetCssObject);
+                        }
+                        return themeClasses;
+                    }, [
+                        cssObjectByRuleNameOrGetCssObjectByRuleName ===
+                            undefined
+                            ? undefined
+                            : JSON.stringify(cssObjectByRuleNameOrGetCssObjectByRuleName),
+                        getDependencyArrayRef(styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.props),
+                        getDependencyArrayRef(styleOverrides === null || styleOverrides === void 0 ? void 0 : styleOverrides.ownerState),
+                        css,
+                    ]);
+                    classes = useMemo$1(() => mergeClasses(classes, themeClasses, cx), [classes, themeClasses, cx]);
+                }
+                return {
+                    classes,
+                    theme,
+                    css,
+                    cx,
+                };
+            };
+        };
+    }
+    function useStyles() {
+        const theme = useTheme();
+        const { css, cx } = useCssAndCx();
+        return { theme, css, cx };
+    }
+    return { makeStyles, useStyles };
+}
+const reactContext = createContext(undefined);
+function useCacheProvidedByProvider() {
+    const cacheExplicitlyProvidedForTss = useContext(reactContext);
+    return cacheExplicitlyProvidedForTss;
 }
 
-var emotionReact_esm = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ClassNames: ClassNames,
-  Global: Global,
-  createElement: jsx,
-  css: css,
-  jsx: jsx,
-  keyframes: keyframes,
-  CacheProvider: CacheProvider,
-  ThemeContext: ThemeContext,
-  ThemeProvider: ThemeProvider,
-  __unsafe_useEmotionCache: __unsafe_useEmotionCache,
-  useTheme: useTheme,
-  get withEmotionCache () { return withEmotionCache; },
-  withTheme: withTheme
-});
+/** @see <https://docs.tsafe.dev/capitalize> */
+function capitalize(str) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (str.charAt(0).toUpperCase() + str.slice(1));
+}
 
-var require$$4 = /*@__PURE__*/getAugmentedNamespace(emotionReact_esm);
-
-var GlobalStyles$1 = {};
-
-var __createBinding = (commonjsGlobal && commonjsGlobal.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (commonjsGlobal && commonjsGlobal.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
-Object.defineProperty(GlobalStyles$1, "__esModule", { value: true });
-GlobalStyles$1.GlobalStyles = void 0;
-const react_1 = __importDefault(React__default);
-const reactEmotion = __importStar(require$$4);
-function GlobalStyles(props) {
-    const { styles } = props;
-    return react_1.default.createElement(reactEmotion.Global, { styles: reactEmotion.css(styles) });
+function createWithStyles(params) {
+    const { useTheme, cache } = params;
+    const { makeStyles } = createMakeStyles({ useTheme, cache });
+    function withStyles(Component, cssObjectByRuleNameOrGetCssObjectByRuleName, params) {
+        const Component_ = typeof Component === "string"
+            ? (() => {
+                const tag = Component;
+                const Out = function (_a) {
+                    var { children } = _a, props = __rest(_a, ["children"]);
+                    return createElement(tag, props, children);
+                };
+                Object.defineProperty(Out, "name", {
+                    "value": capitalize(tag),
+                });
+                return Out;
+            })()
+            : Component;
+        /**
+         * Get component name for wrapping
+         * @see https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging
+         */
+        const name = (() => {
+            {
+                const displayName = Component_.displayName;
+                if (displayName) {
+                    return displayName;
+                }
+            }
+            {
+                const { name } = Component_;
+                if (name) {
+                    return name;
+                }
+            }
+            return params === null || params === void 0 ? void 0 : params.name;
+        })();
+        const useStyles = makeStyles(Object.assign(Object.assign({}, params), { name }))(typeof cssObjectByRuleNameOrGetCssObjectByRuleName === "function"
+            ? (theme, props, classes) => incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName(theme, props, classes))
+            : incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName));
+        function getHasNonRootClasses(classes) {
+            for (const name in classes) {
+                if (name === "root") {
+                    continue;
+                }
+                return true;
+            }
+            return false;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const Out = forwardRef(function (props, ref) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            const { className, classes: _classes } = props, rest = __rest(props, ["className", "classes"]);
+            const { classes, cx } = useStyles(props, { props });
+            return (React__default.createElement(Component_, Object.assign({ ref: ref, className: getHasNonRootClasses(classes)
+                    ? className
+                    : cx(classes.root, className) }, (typeof Component === "string" ? {} : { classes }), rest)));
+        });
+        if (name !== undefined) {
+            Out.displayName = `${capitalize(name)}WithStyles`;
+            Object.defineProperty(Out, "name", { "value": Out.displayName });
+        }
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return Out;
+    }
+    return { withStyles };
+}
+function incorporateMediaQueries(cssObjectByRuleNameWithMediaQueries) {
+    const cssObjectByRuleName = {};
+    const cssObjectByRuleNameWithMediaQueriesByMediaQuery = {};
+    Object.keys(cssObjectByRuleNameWithMediaQueries).forEach(ruleNameOrMediaQuery => ((ruleNameOrMediaQuery.startsWith("@media")
+        ? cssObjectByRuleNameWithMediaQueriesByMediaQuery
+        : cssObjectByRuleName)[ruleNameOrMediaQuery] =
+        cssObjectByRuleNameWithMediaQueries[ruleNameOrMediaQuery]));
+    Object.keys(cssObjectByRuleNameWithMediaQueriesByMediaQuery).forEach(mediaQuery => {
+        const cssObjectByRuleNameBis = cssObjectByRuleNameWithMediaQueriesByMediaQuery[mediaQuery];
+        Object.keys(cssObjectByRuleNameBis).forEach(ruleName => {
+            var _a;
+            return (cssObjectByRuleName[ruleName] = Object.assign(Object.assign({}, ((_a = cssObjectByRuleName[ruleName]) !== null && _a !== void 0 ? _a : {})), { [mediaQuery]: cssObjectByRuleNameBis[ruleName] }));
+        });
+    });
+    return cssObjectByRuleName;
 }
-GlobalStyles$1.GlobalStyles = GlobalStyles;
 
-(function (exports) {
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.createMakeAndWithStyles = exports.TssCacheProvider = exports.getTssDefaultEmotionCache = exports.GlobalStyles = exports.keyframes = exports.createWithStyles = exports.createMakeStyles = exports.useMergedClasses = exports.useCssAndCx = void 0;
-	/** @see <https://docs.tss-react.dev/api-references> */
-	var cssAndCx_1 = cssAndCx;
-	Object.defineProperty(exports, "useCssAndCx", { enumerable: true, get: function () { return cssAndCx_1.useCssAndCx; } });
-	var mergeClasses_1 = mergeClasses$1;
-	Object.defineProperty(exports, "useMergedClasses", { enumerable: true, get: function () { return mergeClasses_1.useMergedClasses; } });
-	const makeStyles_1 = makeStyles$1;
-	Object.defineProperty(exports, "createMakeStyles", { enumerable: true, get: function () { return makeStyles_1.createMakeStyles; } });
-	const withStyles_1 = withStyles$1;
-	Object.defineProperty(exports, "createWithStyles", { enumerable: true, get: function () { return withStyles_1.createWithStyles; } });
-	/** @see <https://docs.tss-react.dev/api-references/keyframes> */
-	var react_1 = require$$4;
-	Object.defineProperty(exports, "keyframes", { enumerable: true, get: function () { return react_1.keyframes; } });
-	/** @see <https://docs.tss-react.dev/api-references/globalstyles> */
-	var GlobalStyles_1 = GlobalStyles$1;
-	Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return GlobalStyles_1.GlobalStyles; } });
-	/** @see <https://docs.tss-react.dev/cache> */
-	var cache_1 = cache;
-	Object.defineProperty(exports, "getTssDefaultEmotionCache", { enumerable: true, get: function () { return cache_1.getTssDefaultEmotionCache; } });
-	Object.defineProperty(exports, "TssCacheProvider", { enumerable: true, get: function () { return cache_1.TssCacheProvider; } });
-	/** @see <https://docs.tss-react.dev/api-references/makestyles-usestyles> */
-	function createMakeAndWithStyles(params) {
-	    return Object.assign(Object.assign({}, (0, makeStyles_1.createMakeStyles)(params)), (0, withStyles_1.createWithStyles)(params));
-	}
-	exports.createMakeAndWithStyles = createMakeAndWithStyles;
-} (tssReact));
+/** @see <https://docs.tss-react.dev/api/makestyles> */
+function createMakeAndWithStyles(params) {
+    return Object.assign(Object.assign({}, createMakeStyles(params)), createWithStyles(params));
+}
 
 var _a;
-var makeStyles = (_a = tssReact.createMakeAndWithStyles({
-    useTheme: useTheme$1,
+var makeStyles = (_a = createMakeAndWithStyles({
+    useTheme: useTheme,
     /*
       OR, if you have extended the default mui theme adding your own custom properties:
       Let's assume the myTheme object that you provide to the <ThemeProvider /> is of
@@ -6133,6 +4945,8 @@ var rafSchd = function rafSchd(fn) {
   return wrapperFn;
 };
 
+var rafSchd$1 = rafSchd;
+
 var isProduction = process.env.NODE_ENV === 'production';
 var spacesAndTabs = /[ \t]{2,}/g;
 var lineStartWithSpaces = /^[ \t]*/gm;
@@ -9461,7 +8275,7 @@ function getScrollListener(_ref) {
     onWindowScroll(getWindowScroll());
   }
 
-  var scheduled = rafSchd(updateScroll);
+  var scheduled = rafSchd$1(updateScroll);
   var binding = getWindowScrollBinding(scheduled);
   var unbind = noop;
 
@@ -10807,8 +9621,8 @@ var scroll$1 = (function (_ref) {
 var createFluidScroller = (function (_ref) {
   var scrollWindow = _ref.scrollWindow,
       scrollDroppable = _ref.scrollDroppable;
-  var scheduleWindowScroll = rafSchd(scrollWindow);
-  var scheduleDroppableScroll = rafSchd(scrollDroppable);
+  var scheduleWindowScroll = rafSchd$1(scrollWindow);
+  var scheduleDroppableScroll = rafSchd$1(scrollDroppable);
   var dragging = null;
 
   var tryScroll = function tryScroll(state) {
@@ -12772,7 +11586,7 @@ function tryStart(_ref3) {
   }
 
   function fluidLift(clientSelection) {
-    var move$1 = rafSchd(function (client) {
+    var move$1 = rafSchd$1(function (client) {
       tryDispatchWhenDragging(function () {
         return move({
           client: client
@@ -13406,7 +12220,7 @@ function useDroppablePublisher(args) {
     memoizedUpdateScroll(scroll.x, scroll.y);
   }, [getClosestScroll, memoizedUpdateScroll]);
   var scheduleScrollUpdate = useMemo(function () {
-    return rafSchd(updateScroll);
+    return rafSchd$1(updateScroll);
   }, [updateScroll]);
   var onClosestScroll = useCallback(function () {
     var dragging = whileDraggingRef.current;