grep-components 1.17.1-grepf-1864.1 → 1.17.2

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, { useRef, useContext, createContext, createElement, Fragment, forwardRef, useMemo as useMemo$1, useState, useCallback as useCallback$1, useEffect, useLayoutEffect } 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 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 } from '@mui/material/styles';
+import { useTheme as useTheme$1 } 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,6 +128,27 @@ 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) {
@@ -412,28 +433,16 @@ var convertToRgba = function (color, alpha) {
     return value ? "rgba(".concat(value, ", ").concat(alpha, ")") : color;
 };
 
-/* 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 tssReact = {};
 
-/** Object.keys() with types */
-function objectKeys(o) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return Object.keys(o);
-}
+var cssAndCx = {};
+
+var classnames$1 = {};
+
+var assert$1 = {};
 
+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) {
@@ -441,61 +450,74 @@ 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;
 
-/** 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;
-};
+(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));
 
 /* eslint-disable */
 // Inspired by https://github.com/garycourt/murmurhash-js
@@ -919,6 +941,13 @@ 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 = '';
@@ -971,10 +1000,24 @@ 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 = useRef();
+    const ref = (0, react_1$5.useRef)();
     if (!ref.current ||
         deps.length !== ref.current.prevDeps.length ||
         ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0) {
@@ -985,169 +1028,9 @@ function useGuaranteedMemo(fn, deps) {
     }
     return ref.current.v;
 }
+useGuaranteedMemo$1.useGuaranteedMemo = useGuaranteedMemo;
 
-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;
-}
+var cache = {};
 
 /*
 
@@ -2455,120 +2338,1556 @@ var createCache = function createCache(options) {
   return cache;
 };
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
+var emotionCache_esm = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': createCache
+});
 
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+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,
+        });
     }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    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 isBrowser = 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);
+var types = {};
 
-if (process.env.NODE_ENV !== 'production') {
-  EmotionCacheContext.displayName = 'EmotionCacheContext';
+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));
 }
+types.matchCSSObject = matchCSSObject;
 
-EmotionCacheContext.Provider;
-var __unsafe_useEmotionCache = function useEmotionCache() {
-  return useContext(EmotionCacheContext);
-};
+(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 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);
-  });
-};
+var mergeClasses$1 = {};
 
-if (!isBrowser) {
-  withEmotionCache = function withEmotionCache(func) {
-    return function (props) {
-      var cache = useContext(EmotionCacheContext);
+var objectKeys$1 = {};
 
-      if (cache === null) {
-        // yes, we're potentially creating this on every render
-        // it doesn't actually matter though since it's only on the server
-        // so there will only every be a single render
-        // that could change in the future because of suspense and etc. but for now,
-        // this works and i don't want to optimise for a future thing that we aren't sure about
-        cache = createCache({
-          key: 'css'
-        });
-        return /*#__PURE__*/createElement(EmotionCacheContext.Provider, {
-          value: cache
-        }, func(props, cache));
-      } else {
-        return func(props, cache);
-      }
-    };
-  };
+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);
 }
+objectKeys$1.objectKeys = objectKeys;
+
+var getDependencyArrayRef$1 = {};
+
+/* 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;
+
+/* 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) {
+  withEmotionCache = function withEmotionCache(func) {
+    return function (props) {
+      var cache = useContext(EmotionCacheContext);
+
+      if (cache === null) {
+        // yes, we're potentially creating this on every render
+        // it doesn't actually matter though since it's only on the server
+        // so there will only every be a single render
+        // that could change in the future because of suspense and etc. but for now,
+        // this works and i don't want to optimise for a future thing that we aren't sure about
+        cache = createCache({
+          key: 'css'
+        });
+        return /*#__PURE__*/createElement(EmotionCacheContext.Provider, {
+          value: cache
+        }, func(props, cache));
+      } else {
+        return func(props, cache);
+      }
+    };
+  };
+}
+
+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;
+        }
 
-var ThemeContext = /* #__PURE__ */createContext({});
+      default:
+        {
+          toAdd = arg;
+        }
+    }
 
-if (process.env.NODE_ENV !== 'production') {
-  ThemeContext.displayName = 'EmotionThemeContext';
-}
+    if (toAdd) {
+      cls && (cls += ' ');
+      cls += toAdd;
+    }
+  }
 
-var isBrowser$1 = typeof document !== 'undefined';
-var useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : function useInsertionEffect(create) {
-  create();
+  return cls;
 };
-function useInsertionEffectMaybe(create) {
-  if (!isBrowser$1) {
-    return create();
+
+function merge(registered, css, className) {
+  var registeredStyles = [];
+  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
+
+  if (registeredStyles.length < 2) {
+    return className;
   }
 
-  useInsertionEffect(create);
+  return rawClassName + css(registeredStyles);
 }
 
-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,
-      serialized = _ref.serialized,
-      isStringTag = _ref.isStringTag;
-  registerStyles(cache, serialized, isStringTag);
+      serializedArr = _ref.serializedArr;
   var rules = useInsertionEffectMaybe(function () {
-    return insertStyles(cache, serialized, isStringTag);
-  });
+    var rules = '';
 
-  if (!isBrowser && rules !== undefined) {
-    var _ref2;
+    for (var i = 0; i < serializedArr.length; i++) {
+      var res = insertStyles(cache, serializedArr[i], false);
 
-    var serializedNames = serialized.name;
-    var next = serialized.next;
+      if (!isBrowser$1 && res !== undefined) {
+        rules += res;
+      }
+    }
 
-    while (next !== undefined) {
-      serializedNames += ' ' + next.name;
-      next = next.next;
+    if (!isBrowser$1) {
+      return rules;
     }
+  });
 
-    return /*#__PURE__*/createElement("style", (_ref2 = {}, _ref2["data-emotion"] = cache.key + " " + serializedNames, _ref2.dangerouslySetInnerHTML = {
+  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 = {
       __html: rules
     }, _ref2.nonce = cache.sheet.nonce, _ref2));
   }
@@ -2576,295 +3895,164 @@ var Insertion = function Insertion(_ref) {
   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 ClassNames = /* #__PURE__ */withEmotionCache(function (props, cache) {
+  var hasRendered = false;
+  var serializedArr = [];
 
-  var WrappedComponent = props[typePropName];
-  var registeredStyles = [cssProp];
-  var className = '';
+  var css = function css() {
+    if (hasRendered && process.env.NODE_ENV !== 'production') {
+      throw new Error('css can only be used during render');
+    }
 
-  if (typeof props.className === 'string') {
-    className = getRegisteredStyles(cache.registered, registeredStyles, props.className);
-  } else if (props.className != null) {
-    className = props.className + " ";
-  }
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
 
-  var serialized = serializeStyles(registeredStyles, undefined, useContext(ThemeContext));
+    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 (process.env.NODE_ENV !== 'production' && serialized.name.indexOf('-') === -1) {
-    var labelFromStack = props[labelPropName];
+    registerStyles(cache, serialized, false);
+    return cache.key + "-" + serialized.name;
+  };
 
-    if (labelFromStack) {
-      serialized = serializeStyles([serialized, 'label:' + labelFromStack + ';']);
+  var cx = function cx() {
+    if (hasRendered && process.env.NODE_ENV !== 'production') {
+      throw new Error('cx can only be used during render');
     }
-  }
 
-  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];
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
-  }
 
-  newProps.ref = ref;
-  newProps.className = className;
+    return merge(cache.registered, css, classnames(args));
+  };
+
+  var content = {
+    css: css,
+    cx: cx,
+    theme: useContext(ThemeContext)
+  };
+  var ele = props.children(content);
+  hasRendered = true;
   return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, {
     cache: cache,
-    serialized: serialized,
-    isStringTag: typeof WrappedComponent === 'string'
-  }), /*#__PURE__*/createElement(WrappedComponent, newProps));
+    serializedArr: serializedArr
+  }), ele);
 });
 
 if (process.env.NODE_ENV !== 'production') {
-  Emotion.displayName = 'EmotionCssPropInternal';
+  ClassNames.displayName = 'EmotionClassNames';
 }
 
-/* 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;
-    }
-    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 };
+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.');
     }
-    return { makeStyles, useStyles };
-}
-const reactContext = createContext(undefined);
-function useCacheProvidedByProvider() {
-    const cacheExplicitlyProvidedForTss = useContext(reactContext);
-    return cacheExplicitlyProvidedForTss;
-}
 
-/** @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));
+    globalContext[globalKey] = true;
+  }
 }
 
-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;
+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
+});
+
+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;
 };
-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;
+var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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) });
 }
+GlobalStyles$1.GlobalStyles = GlobalStyles;
 
-/** @see <https://docs.tss-react.dev/api/makestyles> */
-function createMakeAndWithStyles(params) {
-    return Object.assign(Object.assign({}, createMakeStyles(params)), createWithStyles(params));
-}
+(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));
 
 var _a;
-var makeStyles = (_a = createMakeAndWithStyles({
-    useTheme: useTheme,
+var makeStyles = (_a = tssReact.createMakeAndWithStyles({
+    useTheme: useTheme$1,
     /*
       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
@@ -4581,7 +5769,7 @@ var Sidebar = function (_a) {
     };
     var renderItem = function (page) { return (React.createElement(React.Fragment, null,
         page.linkIcon && (React.createElement(ListItemIcon, { className: classes.icon }, page.linkIcon)),
-        React.createElement(ListItemText$1, { tabIndex: -1, disableTypography: true, primary: page.label, className: page.id === currentPageId ? classes.selected : classes.text }))); };
+        React.createElement(ListItemText$1, { sx: { outline: 'none !important' }, tabIndex: -1, disableTypography: true, primary: page.label, className: page.id === currentPageId ? classes.selected : classes.text }))); };
     return (React.createElement(Box$1, { className: classes.container },
         React.createElement(List$1, null, pages.map(function (page) {
             var _a;
@@ -4945,8 +6133,6 @@ 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;
@@ -8275,7 +9461,7 @@ function getScrollListener(_ref) {
     onWindowScroll(getWindowScroll());
   }
 
-  var scheduled = rafSchd$1(updateScroll);
+  var scheduled = rafSchd(updateScroll);
   var binding = getWindowScrollBinding(scheduled);
   var unbind = noop;
 
@@ -9621,8 +10807,8 @@ var scroll$1 = (function (_ref) {
 var createFluidScroller = (function (_ref) {
   var scrollWindow = _ref.scrollWindow,
       scrollDroppable = _ref.scrollDroppable;
-  var scheduleWindowScroll = rafSchd$1(scrollWindow);
-  var scheduleDroppableScroll = rafSchd$1(scrollDroppable);
+  var scheduleWindowScroll = rafSchd(scrollWindow);
+  var scheduleDroppableScroll = rafSchd(scrollDroppable);
   var dragging = null;
 
   var tryScroll = function tryScroll(state) {
@@ -11586,7 +12772,7 @@ function tryStart(_ref3) {
   }
 
   function fluidLift(clientSelection) {
-    var move$1 = rafSchd$1(function (client) {
+    var move$1 = rafSchd(function (client) {
       tryDispatchWhenDragging(function () {
         return move({
           client: client
@@ -12220,7 +13406,7 @@ function useDroppablePublisher(args) {
     memoizedUpdateScroll(scroll.x, scroll.y);
   }, [getClosestScroll, memoizedUpdateScroll]);
   var scheduleScrollUpdate = useMemo(function () {
-    return rafSchd$1(updateScroll);
+    return rafSchd(updateScroll);
   }, [updateScroll]);
   var onClosestScroll = useCallback(function () {
     var dragging = whileDraggingRef.current;