grep-components 1.9.0 → 1.11.0

package/dist/index.js

@@ -429,103 +429,6 @@ var tssReact = {};
 
 var cssAndCx = {};
 
-var Array_prototype_find = {};
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable prefer-rest-params */
-/* eslint-disable no-var */
-Object.defineProperty(Array_prototype_find, "__esModule", { value: true });
-// https://tc39.github.io/ecma262/#sec-array.prototype.find
-if (!Array.prototype.find) {
-    Object.defineProperty(Array.prototype, "find", {
-        value: function (predicate) {
-            // 1. Let O be ? ToObject(this value).
-            if (this == null) {
-                throw new TypeError('"this" is null or not defined');
-            }
-            var o = Object(this);
-            // 2. Let len be ? ToLength(? Get(O, "length")).
-            var len = o.length >>> 0;
-            // 3. If IsCallable(predicate) is false, throw a TypeError exception.
-            if (typeof predicate !== "function") {
-                throw new TypeError("predicate must be a function");
-            }
-            // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-            var thisArg = arguments[1];
-            // 5. Let k be 0.
-            var k = 0;
-            // 6. Repeat, while k < len
-            while (k < len) {
-                // a. Let Pk be ! ToString(k).
-                // b. Let kValue be ? Get(O, Pk).
-                // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
-                // d. If testResult is true, return kValue.
-                var kValue = o[k];
-                if (predicate.call(thisArg, kValue, k, o)) {
-                    return kValue;
-                }
-                // e. Increase k by 1.
-                k++;
-            }
-            // 7. Return undefined.
-            return undefined;
-        },
-        configurable: true,
-        writable: true,
-    });
-}
-
-var _WeakMap = {};
-
-var _Map = {};
-
-Object.defineProperty(_Map, "__esModule", { value: true });
-_Map.Polyfill = _Map.LightMapImpl = void 0;
-class LightMapImpl {
-    constructor() {
-        this.record = [];
-    }
-    has(key) {
-        return this.record.map(([_key]) => _key).indexOf(key) >= 0;
-    }
-    get(key) {
-        const [entry] = this.record.filter(([_key]) => _key === key);
-        if (entry === undefined) {
-            return undefined;
-        }
-        return entry[1];
-    }
-    set(key, value) {
-        const [entry] = this.record.filter(([_key]) => _key === key);
-        if (entry === undefined) {
-            this.record.push([key, value]);
-        }
-        else {
-            entry[1] = value;
-        }
-        return this;
-    }
-    delete(key) {
-        const index = this.record.map(([key]) => key).indexOf(key);
-        if (index < 0) {
-            return false;
-        }
-        this.record.splice(index, 1);
-        return true;
-    }
-    keys() {
-        return this.record.map(([key]) => key);
-    }
-}
-_Map.LightMapImpl = LightMapImpl;
-_Map.Polyfill = typeof Map !== "undefined" ? Map : LightMapImpl;
-
-/* eslint-disable @typescript-eslint/ban-types */
-Object.defineProperty(_WeakMap, "__esModule", { value: true });
-_WeakMap.Polyfill = void 0;
-const Map_1 = _Map;
-_WeakMap.Polyfill = typeof WeakMap !== "undefined" ? WeakMap : Map_1.Polyfill;
-
 var classnames$1 = {};
 
 var assert$1 = {};
@@ -1033,7 +936,7 @@ var emotionSerialize_esm = /*#__PURE__*/Object.freeze({
   serializeStyles: serializeStyles
 });
 
-var require$$2$1 = /*@__PURE__*/getAugmentedNamespace(emotionSerialize_esm);
+var require$$1 = /*@__PURE__*/getAugmentedNamespace(emotionSerialize_esm);
 
 var isBrowser$3 = typeof document !== 'undefined';
 function getRegisteredStyles(registered, registeredStyles, classNames) {
@@ -1094,17 +997,17 @@ var emotionUtils_esm = /*#__PURE__*/Object.freeze({
   registerStyles: registerStyles
 });
 
-var require$$3$1 = /*@__PURE__*/getAugmentedNamespace(emotionUtils_esm);
+var require$$2$1 = /*@__PURE__*/getAugmentedNamespace(emotionUtils_esm);
 
 var useGuaranteedMemo$1 = {};
 
 Object.defineProperty(useGuaranteedMemo$1, "__esModule", { value: true });
 useGuaranteedMemo$1.useGuaranteedMemo = void 0;
-const react_1$2 = React__default;
+const react_1$4 = React__default;
 /** Like react's useMemo but with guarantee that the fn
  * won't be invoked again if deps hasn't change */
 function useGuaranteedMemo(fn, deps) {
-    const ref = (0, react_1$2.useRef)();
+    const ref = (0, react_1$4.useRef)();
     if (!ref.current ||
         deps.length !== ref.current.prevDeps.length ||
         ref.current.prevDeps.map((v, i) => v === deps[i]).indexOf(false) >= 0) {
@@ -2432,50 +2335,69 @@ var emotionCache_esm = /*#__PURE__*/Object.freeze({
 
 var require$$2 = /*@__PURE__*/getAugmentedNamespace(emotionCache_esm);
 
-(function (exports) {
 var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TssCacheProvider = exports.useTssEmotionCache = exports.getDoExistsTssDefaultEmotionCacheMemoizedValue = exports.getTssDefaultEmotionCache = void 0;
-const jsx_runtime_1 = require$$0;
-const react_1 = React__default;
-const cache_1 = __importDefault(require$$2);
-_a = (() => {
-    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.default)({ "key": "tss" });
-        }
-        return cache;
+Object.defineProperty(cache, "__esModule", { value: true });
+cache.TssCacheProvider = cache.useTssEmotionCache = cache.getTssDefaultEmotionCache = cache.getDoExistsTssDefaultEmotionCacheMemoizedValue = void 0;
+const jsx_runtime_1$2 = require$$0;
+const react_1$3 = React__default;
+const cache_1$1 = __importDefault(require$$2);
+const { getDoExistsTssDefaultEmotionCacheMemoizedValue, getTssDefaultEmotionCache, reactContext, } = (() => {
+    const propertyKey = "__tss-react_context";
+    const peerDepObj = 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    react_1$3.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$3.createContext)(undefined),
+        };
+        Object.defineProperty(peerDepObj, propertyKey, {
+            "configurable": false,
+            "enumerable": false,
+            "writable": false,
+            "value": sharedContext,
+        });
     }
-    return {
-        getTssDefaultEmotionCache,
-        "getDoExistsTssDefaultEmotionCacheMemoizedValue": () => cache !== undefined,
-    };
-})(), exports.getTssDefaultEmotionCache = _a.getTssDefaultEmotionCache, exports.getDoExistsTssDefaultEmotionCacheMemoizedValue = _a.getDoExistsTssDefaultEmotionCacheMemoizedValue;
-const context = (0, react_1.createContext)(undefined);
+    return sharedContext;
+})();
+cache.getDoExistsTssDefaultEmotionCacheMemoizedValue = getDoExistsTssDefaultEmotionCacheMemoizedValue;
+cache.getTssDefaultEmotionCache = getTssDefaultEmotionCache;
 function useTssEmotionCache() {
-    const cacheExplicitlyProvidedForTss = (0, react_1.useContext)(context);
-    return cacheExplicitlyProvidedForTss !== null && cacheExplicitlyProvidedForTss !== void 0 ? cacheExplicitlyProvidedForTss : (0, exports.getTssDefaultEmotionCache)();
+    const cacheExplicitlyProvidedForTss = (0, react_1$3.useContext)(reactContext);
+    return cacheExplicitlyProvidedForTss !== null && cacheExplicitlyProvidedForTss !== void 0 ? cacheExplicitlyProvidedForTss : getTssDefaultEmotionCache();
 }
-exports.useTssEmotionCache = useTssEmotionCache;
+cache.useTssEmotionCache = useTssEmotionCache;
 function TssCacheProvider(props) {
     const { children, value } = props;
-    return (0, jsx_runtime_1.jsx)(context.Provider, Object.assign({ value: value }, { children: children }), void 0);
+    return ((0, jsx_runtime_1$2.jsx)(reactContext.Provider, Object.assign({ value: value }, { children: children })));
 }
-exports.TssCacheProvider = TssCacheProvider;
-}(cache));
+cache.TssCacheProvider = TssCacheProvider;
 
 var types = {};
 
@@ -2492,15 +2414,12 @@ types.matchCSSObject = matchCSSObject;
 (function (exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCssAndCx = exports.createCssAndCx = void 0;
-
-const WeakMap_1 = _WeakMap;
 const classnames_1 = classnames$1;
-const serialize_1 = require$$2$1;
-const utils_1 = require$$3$1;
+const serialize_1 = require$$1;
+const utils_1 = require$$2$1;
 const useGuaranteedMemo_1 = useGuaranteedMemo$1;
 const cache_1 = cache;
 const types_1 = types;
-const refPropertyName = "ref";
 exports.createCssAndCx = (() => {
     function merge(registered, css, className) {
         const registeredStyles = [];
@@ -2513,31 +2432,9 @@ exports.createCssAndCx = (() => {
     function createCssAndCx(params) {
         const { cache } = params;
         const css = (...args) => {
-            let ref = undefined;
-            scope: {
-                if (args.length !== 1) {
-                    break scope;
-                }
-                const [arg] = args;
-                if (!(arg instanceof Object)) {
-                    break scope;
-                }
-                if (!(refPropertyName in arg)) {
-                    break scope;
-                }
-                const mostLikelyRef = arg[refPropertyName];
-                if (typeof mostLikelyRef !== "string" &&
-                    mostLikelyRef !== undefined) {
-                    break scope;
-                }
-                ref = mostLikelyRef;
-                const argCopy = Object.assign({}, arg);
-                delete argCopy[refPropertyName];
-                args = [argCopy];
-            }
             const serialized = (0, serialize_1.serializeStyles)(args, cache.registered);
             (0, utils_1.insertStyles)(cache, serialized, false);
-            const className = `${cache.key}-${serialized.name}${ref === undefined ? "" : ` ${ref}`}`;
+            const className = `${cache.key}-${serialized.name}`;
             scope: {
                 const arg = args[0];
                 if (!(0, types_1.matchCSSObject)(arg)) {
@@ -2566,7 +2463,7 @@ function useCssAndCx() {
 exports.useCssAndCx = useCssAndCx;
 // https://github.com/garronej/tss-react/issues/27
 const increaseSpecificityToTakePrecedenceOverMediaQuerries = (() => {
-    const cssObjectMapByCache = new WeakMap_1.Polyfill();
+    const cssObjectMapByCache = new WeakMap();
     return {
         "saveClassNameCSSObjectMapping": (cache, className, cssObject) => {
             let cssObjectMap = cssObjectMapByCache.get(cache);
@@ -2586,8 +2483,11 @@ const increaseSpecificityToTakePrecedenceOverMediaQuerries = (() => {
                     let out;
                     if (!isThereAnyMediaQueriesInPreviousClasses) {
                         out = className;
-                        if (Object.keys(cssObject).find(key => key.startsWith("@media")) !== undefined) {
-                            isThereAnyMediaQueriesInPreviousClasses = true;
+                        for (const key in cssObject) {
+                            if (key.startsWith("@media")) {
+                                isThereAnyMediaQueriesInPreviousClasses = true;
+                                break;
+                            }
                         }
                     }
                     else {
@@ -2614,27 +2514,7 @@ const increaseSpecificityToTakePrecedenceOverMediaQuerries = (() => {
 })();
 }(cssAndCx));
 
-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;
+var mergeClasses$1 = {};
 
 var objectKeys$1 = {};
 
@@ -2691,58 +2571,177 @@ function getDependencyArrayRef(obj) {
 }
 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$2 = 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$2.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$1 = React__default;
 const Object_fromEntries_1 = Object_fromEntries;
 const objectKeys_1 = objectKeys$1;
 const cssAndCx_1 = cssAndCx;
 const getDependencyArrayRef_1 = getDependencyArrayRef$1;
-/**
- * @see {@link https://github.com/garronej/tss-react}
- */
+const typeGuard_1 = typeGuard$1;
+const cache_1 = cache;
+const assert_1 = assert$1;
+const mergeClasses_1 = mergeClasses$1;
+const getCounter = (() => {
+    let counter = 0;
+    return () => counter++;
+})();
 function createMakeStyles(params) {
     const { useTheme } = params;
-    const getCounter = (() => {
-        let counter = 0;
-        return () => counter++;
-    })();
     /** returns useStyle. */
     function makeStyles(params) {
-        const { label: labelOrWrappedLabel } = params !== null && params !== void 0 ? params : {};
-        const label = typeof labelOrWrappedLabel !== "object"
-            ? labelOrWrappedLabel
-            : Object.keys(labelOrWrappedLabel)[0];
+        const { name: nameOrWrappedName } = 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;
             const outerCounter = getCounter();
-            return function useStyles(params) {
+            return function useStyles(params, styleOverrides) {
+                var _a, _b;
                 const theme = useTheme();
-                const { cx, css } = (0, cssAndCx_1.useCssAndCx)();
-                return (0, react_1$1.useMemo)(() => {
-                    const cssObjectByRuleName = getCssObjectByRuleName(theme, params, (() => {
-                        let count = 0;
-                        return function createRef() {
-                            return `tss-ref${outerCounter}x${count++}${label !== undefined ? `-${label}` : ""}`;
-                        };
-                    })());
+                const { css, cx } = (0, cssAndCx_1.useCssAndCx)();
+                const cache = (0, cache_1.useTssEmotionCache)();
+                let classes = (0, react_1$1.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}-${outerCounter}${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 = `${label !== undefined ? `${label}-` : ""}${ruleName}`;
+                            cssObject.label = `${name !== undefined ? `${name}-` : ""}${ruleName}`;
                         }
-                        return [ruleName, css(cssObject)];
+                        return [
+                            ruleName,
+                            `${css(cssObject)}${(0, typeGuard_1.typeGuard)(ruleName, ruleName in refClassesCache)
+                                ? ` ${refClassesCache[ruleName]}`
+                                : ""}`,
+                        ];
                     }));
-                    return {
-                        classes,
-                        theme,
+                    (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$1.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$1.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,
-                        cx,
-                    };
-                }, [cx, css, theme, (0, getDependencyArrayRef_1.getDependencyArrayRef)(params)]);
+                    ]);
+                    classes = (0, react_1$1.useMemo)(() => (0, mergeClasses_1.mergeClasses)(classes, themeClasses, cx), [classes, themeClasses, cx]);
+                }
+                return {
+                    classes,
+                    theme,
+                    css,
+                    cx,
+                };
             };
         };
     }
@@ -2789,7 +2788,7 @@ const capitalize_1 = capitalize$1;
 function createWithStyles(params) {
     const { useTheme } = params;
     const { makeStyles } = (0, makeStyles_1.createMakeStyles)({ useTheme });
-    function withStyles(Component, cssObjectByRuleNameOrGetCssObjectByRuleName) {
+    function withStyles(Component, cssObjectByRuleNameOrGetCssObjectByRuleName, params) {
         const Component_ = typeof Component === "string"
             ? (() => {
                 const tag = Component;
@@ -2803,17 +2802,21 @@ function createWithStyles(params) {
                 return Out;
             })()
             : Component;
-        const useStyles = makeStyles()(typeof cssObjectByRuleNameOrGetCssObjectByRuleName === "function"
-            ? (theme, props, createRef) => incorporateMediaQueries(cssObjectByRuleNameOrGetCssObjectByRuleName(theme, props, createRef))
+        const name = (() => {
+            const { name } = Component_;
+            return typeof name === "string" ? name : undefined;
+        })();
+        const useStyles = makeStyles((params === null || params === void 0 ? void 0 : params.name) !== undefined ? params : { name })(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.forwardRef)(function (props, ref) {
-            const { classes, cx } = useStyles(props);
-            const { className } = props, rest = __rest(props, ["className"]);
-            return ((0, jsx_runtime_1$1.jsx)(Component_, Object.assign({ ref: ref, className: cx(classes.root, className) }, (typeof Component === "string" ? {} : { classes }), rest), void 0));
+            // 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 ((0, jsx_runtime_1$1.jsx)(Component_, Object.assign({ ref: ref, className: cx(classes.root, className) }, (typeof Component === "string" ? {} : { classes }), rest)));
         });
-        const { name } = Component_;
-        if (typeof name === "string") {
+        if (name !== undefined) {
             Object.defineProperty(Out, "name", {
                 "value": `${name}WithStyles`,
             });
@@ -3865,13 +3868,17 @@ var emotionReact_esm = /*#__PURE__*/Object.freeze({
   withTheme: withTheme
 });
 
-var require$$3 = /*@__PURE__*/getAugmentedNamespace(emotionReact_esm);
+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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -3891,30 +3898,36 @@ var __importStar = (commonjsGlobal && commonjsGlobal.__importStar) || function (
 Object.defineProperty(GlobalStyles$1, "__esModule", { value: true });
 GlobalStyles$1.GlobalStyles = void 0;
 const jsx_runtime_1 = require$$0;
-const reactEmotion = __importStar(require$$3);
+const reactEmotion = __importStar(require$$4);
 function GlobalStyles(props) {
     const { styles } = props;
-    return (0, jsx_runtime_1.jsx)(reactEmotion.Global, { styles: reactEmotion.css(styles) }, void 0);
+    return (0, jsx_runtime_1.jsx)(reactEmotion.Global, { styles: reactEmotion.css(styles) });
 }
 GlobalStyles$1.GlobalStyles = GlobalStyles;
 
 (function (exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createMakeAndWithStyles = exports.TssCacheProvider = exports.getTssDefaultEmotionCache = exports.GlobalStyles = exports.keyframes = exports.createWithStyles = exports.createMakeStyles = exports.useCssAndCx = void 0;
+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; } });
-/** Reexport from @emotion/react */
-var react_1 = require$$3;
+/** @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));
 }
@@ -4759,7 +4772,7 @@ var GrepTableCard = function (props) {
 };
 
 var LoadingOverlay = function (_a) {
-    var _b = _a.overlay, overlay = _b === void 0 ? 'rgba(255,255,255, .5)' : _b, show = _a.show, children = _a.children, minTime = _a.minTime, box = __rest$1(_a, ["overlay", "show", "children", "minTime"]);
+    var _b = _a.overlay, overlay = _b === void 0 ? 'rgba(255,255,255, .5)' : _b, show = _a.show, children = _a.children, minTime = _a.minTime, zIndex = _a.zIndex, sx = _a.sx, box = __rest$1(_a, ["overlay", "show", "children", "minTime", "zIndex", "sx"]);
     var _c = __read(useState(show), 2), enabled = _c[0], setEnabled = _c[1];
     useEffect(function () {
         var timeout = setTimeout(function () { return setEnabled(show); }, show ? 0 : minTime);
@@ -4767,11 +4780,11 @@ var LoadingOverlay = function (_a) {
     }, [show, minTime, setEnabled]);
     return (React__default.createElement(Box, { position: "relative", display: "block", overflow: show ? 'hidden' : '' },
         children,
-        React__default.createElement(Box, __assign({ position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", top: 0, left: 0, height: "100%", width: "100%", zIndex: enabled ? 999 : -999, style: {
+        React__default.createElement(Box, __assign({ position: "absolute", display: "flex", alignItems: "center", justifyContent: "center", top: 0, left: 0, height: "100%", width: "100%", zIndex: enabled ? (zIndex ? zIndex : 999) : -999, style: {
                 backgroundColor: overlay,
                 opacity: show ? 1 : 0,
                 transition: "opacity ".concat(show ? 0 : minTime, "ms ease"),
-            } }, box),
+            }, sx: sx }, box),
             React__default.createElement(CircularProgress, null))));
 };
 
@@ -5561,10 +5574,10 @@ var textStyles = {
     outline: 'none',
     fontSize: 16,
 };
-var useStyles$6 = makeStyles()(function (_a, _props, createRef) {
+var useStyles$6 = makeStyles()(function (_a, _props, classes) {
     var _b;
     var palette = _a.palette;
-    var text = __assign(__assign({ ref: createRef() }, textStyles), { color: 'inherit', fontWeight: 400 });
+    var text = __assign(__assign({}, textStyles), { color: 'inherit', fontWeight: 400 });
     return {
         container: {
             padding: 10,
@@ -5579,7 +5592,7 @@ var useStyles$6 = makeStyles()(function (_a, _props, createRef) {
                     color: palette.primary.main,
                 }
             },
-            _b["&:focus .".concat(text.ref)] = {
+            _b["&:focus .".concat(classes.text)] = {
                 color: palette.primary.main,
                 outline: 'auto',
             },
@@ -5747,7 +5760,9 @@ function invariant$1(condition, message) {
     if (isProduction$2) {
         throw new Error(prefix$2);
     }
-    throw new Error(prefix$2 + ": " + (message || ''));
+    var provided = typeof message === 'function' ? message() : message;
+    var value = provided ? prefix$2 + ": " + provided : prefix$2;
+    throw new Error(value);
 }
 
 var getRect = function getRect(_ref) {
@@ -21468,8 +21483,9 @@ var InlineButton = function (_a) {
     var type = _a.type; _a.editor; var children = _a.children, props = __rest$1(_a, ["type", "editor", "children"]);
     var classes = useButtonStyles().classes;
     var _b = useContext(EditorContext), state = _b.state, setState = _b.setState;
-    var onClick = function (e) {
-        e.preventDefault();
+    var onClick = function (event) {
+        event.preventDefault();
+        var e = event;
         setState(UpdateStyle(state, e.currentTarget.value));
     };
     var selected = state.getCurrentInlineStyle().has(type);