@griffel/react - npm Package Compare versions

Comparing version 1.6.1 to 1.6.2

lib/__css.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__css", {
+    enumerable: true,
+    get: function() {
+        return __css;
+    }
+});
+const _core = require("@griffel/core");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+function __css(classesMapBySlot) {
+    const getStyles = (0, _core.__css)(classesMapBySlot);
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        return getStyles({
+            dir
+        });
+    };
+} //# sourceMappingURL=__css.js.map

lib/__resetCSS.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__resetCSS", {
+    enumerable: true,
+    get: function() {
+        return __resetCSS;
+    }
+});
+const _core = require("@griffel/core");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+function __resetCSS(ltrClassName, rtlClassName) {
+    const getStyles = (0, _core.__resetCSS)(ltrClassName, rtlClassName);
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        return getStyles({
+            dir
+        });
+    };
+} //# sourceMappingURL=__resetCSS.js.map

lib/__resetStyles.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__resetStyles", {
+    enumerable: true,
+    get: function() {
+        return __resetStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+function __resetStyles(ltrClassName, rtlClassName, cssRules) {
+    const getStyles = (0, _core.__resetStyles)(ltrClassName, rtlClassName, cssRules, _insertionFactory.insertionFactory);
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            dir,
+            renderer
+        });
+    };
+} //# sourceMappingURL=__resetStyles.js.map

lib/__staticCSS.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__staticCSS", {
+    enumerable: true,
+    get: function() {
+        return __staticCSS;
+    }
+});
+const _core = require("@griffel/core");
+function __staticCSS() {
+    const getStyles = (0, _core.__staticCSS)();
+    return function useStaticStyles() {
+        return getStyles();
+    };
+} //# sourceMappingURL=__staticCSS.js.map

lib/__staticStyles.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__staticStyles", {
+    enumerable: true,
+    get: function() {
+        return __staticStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+function __staticStyles(cssRules) {
+    const getStyles = (0, _core.__staticStyles)(cssRules, _insertionFactory.insertionFactory);
+    return function useStaticStyles() {
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            renderer
+        });
+    };
+} //# sourceMappingURL=__staticStyles.js.map

lib/__styles.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "__styles", {
+    enumerable: true,
+    get: function() {
+        return __styles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+function __styles(classesMapBySlot, cssRules) {
+    const getStyles = (0, _core.__styles)(classesMapBySlot, cssRules, _insertionFactory.insertionFactory);
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            dir,
+            renderer
+        });
+    };
+} //# sourceMappingURL=__styles.js.map

lib/index.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get RESET () {
+        return _core.RESET;
+    },
+    get RendererProvider () {
+        return _RendererContext.RendererProvider;
+    },
+    get TextDirectionProvider () {
+        return _TextDirectionContext.TextDirectionProvider;
+    },
+    get __css () {
+        return __css.__css;
+    },
+    get __resetCSS () {
+        return __resetCSS.__resetCSS;
+    },
+    get __resetStyles () {
+        return __resetStyles.__resetStyles;
+    },
+    get __staticCSS () {
+        return __staticCSS.__staticCSS;
+    },
+    get __staticStyles () {
+        return __staticStyles.__staticStyles;
+    },
+    get __styles () {
+        return __styles.__styles;
+    },
+    get createDOMRenderer () {
+        return _core.createDOMRenderer;
+    },
+    get makeResetStyles () {
+        return _makeResetStyles.makeResetStyles;
+    },
+    get makeStaticStyles () {
+        return _makeStaticStyles.makeStaticStyles;
+    },
+    get makeStyles () {
+        return _makeStyles.makeStyles;
+    },
+    get mergeClasses () {
+        return _core.mergeClasses;
+    },
+    get renderToStyleElements () {
+        return _renderToStyleElements.renderToStyleElements;
+    },
+    get shorthands () {
+        return _core.shorthands;
+    },
+    get useRenderer_unstable () {
+        return _RendererContext.useRenderer;
+    }
+});
+const _core = require("@griffel/core");
+const _makeStyles = require("./makeStyles.cjs");
+const _makeResetStyles = require("./makeResetStyles.cjs");
+const _makeStaticStyles = require("./makeStaticStyles.cjs");
+const _renderToStyleElements = require("./renderToStyleElements.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+const __css = require("./__css.cjs");
+const __styles = require("./__styles.cjs");
+const __resetCSS = require("./__resetCSS.cjs");
+const __resetStyles = require("./__resetStyles.cjs");
+const __staticCSS = require("./__staticCSS.cjs");
+const __staticStyles = require("./__staticStyles.cjs");
+ //# sourceMappingURL=index.js.map

lib/insertionFactory.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "insertionFactory", {
+    enumerable: true,
+    get: function() {
+        return insertionFactory;
+    }
+});
+const _canUseDOM = require("./utils/canUseDOM.cjs");
+const _useInsertionEffect = require("./useInsertionEffect.cjs");
+const insertionFactory = ()=>{
+    const insertionCache = {};
+    return function insert(renderer, cssRules) {
+        // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
+        if (_useInsertionEffect.useInsertionEffect && (0, _canUseDOM.canUseDOM)()) {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            (0, _useInsertionEffect.useInsertionEffect)(()=>{
+                renderer.insertCSSRules(cssRules);
+            }, [
+                renderer,
+                cssRules
+            ]);
+            return;
+        }
+        if (insertionCache[renderer.id] === undefined) {
+            renderer.insertCSSRules(cssRules);
+            insertionCache[renderer.id] = true;
+        }
+    };
+}; //# sourceMappingURL=insertionFactory.js.map

lib/makeResetStyles.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "makeResetStyles", {
+    enumerable: true,
+    get: function() {
+        return makeResetStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+const _isInsideComponent = require("./utils/isInsideComponent.cjs");
+function makeResetStyles(styles) {
+    const getStyles = (0, _core.makeResetStyles)(styles, _insertionFactory.insertionFactory);
+    if (process.env.NODE_ENV !== 'production') {
+        if ((0, _isInsideComponent.isInsideComponent)()) {
+            throw new Error([
+                "makeResetStyles(): this function cannot be called in component's scope.",
+                'All makeResetStyles() calls should be top level i.e. in a root scope of a file.'
+            ].join(' '));
+        }
+    }
+    return function useClassName() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            dir,
+            renderer
+        });
+    };
+} //# sourceMappingURL=makeResetStyles.js.map

lib/makeStaticStyles.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "makeStaticStyles", {
+    enumerable: true,
+    get: function() {
+        return makeStaticStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+function makeStaticStyles(styles) {
+    const getStyles = (0, _core.makeStaticStyles)(styles, _insertionFactory.insertionFactory);
+    if (process.env.NODE_ENV === 'test') {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return ()=>{};
+    }
+    return function useStaticStyles() {
+        const renderer = (0, _RendererContext.useRenderer)();
+        const options = {
+            renderer
+        };
+        return getStyles(options);
+    };
+} //# sourceMappingURL=makeStaticStyles.js.map

lib/makeStyles.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "makeStyles", {
+    enumerable: true,
+    get: function() {
+        return makeStyles;
+    }
+});
+const _core = require("@griffel/core");
+const _insertionFactory = require("./insertionFactory.cjs");
+const _RendererContext = require("./RendererContext.cjs");
+const _TextDirectionContext = require("./TextDirectionContext.cjs");
+const _isInsideComponent = require("./utils/isInsideComponent.cjs");
+function makeStyles(stylesBySlots) {
+    const getStyles = (0, _core.makeStyles)(stylesBySlots, _insertionFactory.insertionFactory);
+    if (process.env.NODE_ENV !== 'production') {
+        if ((0, _isInsideComponent.isInsideComponent)()) {
+            throw new Error([
+                "makeStyles(): this function cannot be called in component's scope.",
+                'All makeStyles() calls should be top level i.e. in a root scope of a file.'
+            ].join(' '));
+        }
+    }
+    return function useClasses() {
+        const dir = (0, _TextDirectionContext.useTextDirection)();
+        const renderer = (0, _RendererContext.useRenderer)();
+        return getStyles({
+            dir,
+            renderer
+        });
+    };
+} //# sourceMappingURL=makeStyles.js.map

lib/RendererContext.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get RendererProvider () {
+        return RendererProvider;
+    },
+    get useRenderer () {
+        return useRenderer;
+    }
+});
+const _core = require("@griffel/core");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _canUseDOM = require("./utils/canUseDOM.cjs");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+/**
+ * @private
+ */ const RendererContext = /*#__PURE__*/ _react.default.createContext(/*#__PURE__*/ (0, _core.createDOMRenderer)());
+const RendererProvider = ({ children, renderer, targetDocument })=>{
+    _react.default.useMemo(()=>{
+        if ((0, _canUseDOM.canUseDOM)()) {
+            // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
+            // avoid double insertion of classes
+            (0, _core.rehydrateRendererCache)(renderer, targetDocument);
+        }
+    }, [
+        renderer,
+        targetDocument
+    ]);
+    return _react.default.createElement(RendererContext.Provider, {
+        value: renderer
+    }, children);
+};
+function useRenderer() {
+    return _react.default.useContext(RendererContext);
+} //# sourceMappingURL=RendererContext.js.map

lib/renderToStyleElements.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderToStyleElements", {
+    enumerable: true,
+    get: function() {
+        return renderToStyleElements;
+    }
+});
+const _core = require("@griffel/core");
+const _react = require("react");
+function renderToStyleElements(renderer) {
+    const stylesheets = Object.values(renderer.stylesheets)// first sort: bucket by order [data-priority]
+    .sort((a, b)=>{
+        return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
+    })// second sort: bucket by bucket name
+    .sort((a, b)=>{
+        return _core.styleBucketOrdering.indexOf(a.bucketName) - _core.styleBucketOrdering.indexOf(b.bucketName);
+    })// third sort: media queries
+    .sort((a, b)=>{
+        const mediaA = a.elementAttributes['media'];
+        const mediaB = b.elementAttributes['media'];
+        if (mediaA && mediaB) {
+            return renderer.compareMediaQueries(mediaA, mediaB);
+        }
+        if (mediaA || mediaB) {
+            return mediaA ? 1 : -1;
+        }
+        return 0;
+    });
+    return stylesheets.map((stylesheet)=>{
+        const cssRules = stylesheet.cssRules();
+        // don't want to create any empty style elements
+        if (!cssRules.length) {
+            return null;
+        }
+        return (0, _react.createElement)('style', {
+            key: stylesheet.bucketName,
+            // TODO: support "nonce"
+            // ...renderer.styleNodeAttributes,
+            ...stylesheet.elementAttributes,
+            'data-make-styles-rehydration': 'true',
+            dangerouslySetInnerHTML: {
+                __html: cssRules.join('')
+            }
+        });
+    }).filter(Boolean);
+} //# sourceMappingURL=renderToStyleElements.js.map

lib/TextDirectionContext.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get TextDirectionProvider () {
+        return TextDirectionProvider;
+    },
+    get useTextDirection () {
+        return useTextDirection;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+/**
+ * @private
+ */ const TextDirectionContext = /*#__PURE__*/ _react.default.createContext('ltr');
+const TextDirectionProvider = ({ children, dir })=>{
+    return _react.default.createElement(TextDirectionContext.Provider, {
+        value: dir
+    }, children);
+};
+function useTextDirection() {
+    return _react.default.useContext(TextDirectionContext);
+} //# sourceMappingURL=TextDirectionContext.js.map

lib/useInsertionEffect.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useInsertionEffect", {
+    enumerable: true,
+    get: function() {
+        return useInsertionEffect;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const useInsertionEffect = // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
+// eslint-disable-next-line no-useless-concat
+_react.default['useInsertion' + 'Effect'] ? _react.default['useInsertion' + 'Effect'] : undefined; //# sourceMappingURL=useInsertionEffect.js.map

lib/utils/canUseDOM.cjs

+/**
+ * Verifies if an application can use DOM.
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "canUseDOM", {
+    enumerable: true,
+    get: function() {
+        return canUseDOM;
+    }
+});
+function canUseDOM() {
+    return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
+} //# sourceMappingURL=canUseDOM.js.map

lib/utils/isInsideComponent.cjs

+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "isInsideComponent", {
+    enumerable: true,
+    get: function() {
+        return isInsideComponent;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getDispatcher() {
+    try {
+        return _react.default[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
+    } catch  {
+    // React 19+
+    }
+    try {
+        return _react.default[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher.current;
+    } catch  {
+    // React 18 and below
+    }
+}
+function isInsideComponent() {
+    // React 18 always logs errors if a dispatcher is not present:
+    // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
+    try {
+        const dispatcher = getDispatcher();
+        // Before any React component was rendered "dispatcher" will be "null"
+        if (dispatcher === null || dispatcher === undefined) {
+            return false;
+        }
+        // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
+        // a call on the dispatcher wont
+        dispatcher.useContext({});
+        return true;
+    } catch  {
+        return false;
+    }
+} //# sourceMappingURL=isInsideComponent.js.map

src/__css.js

+'use client';
+import { __css as vanillaCSS } from '@griffel/core';
+import { useTextDirection } from './TextDirectionContext.js';
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function __css(classesMapBySlot) {
+    const getStyles = vanillaCSS(classesMapBySlot);
+    return function useClasses() {
+        const dir = useTextDirection();
+        return getStyles({ dir });
+    };
+}
+//# sourceMappingURL=__css.js.map

src/__css.js.map

+{"version":3,"file":"__css.js","sourceRoot":"","sources":["../../../../packages/react/src/__css.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,KAAK,CAAuB,gBAA4C;IACtF,MAAM,SAAS,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAC;IAE/C,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}

src/__resetCSS.js

+'use client';
+import { __resetCSS as vanillaResetCSS } from '@griffel/core';
+import { useTextDirection } from './TextDirectionContext.js';
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function __resetCSS(ltrClassName, rtlClassName) {
+    const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);
+    return function useClasses() {
+        const dir = useTextDirection();
+        return getStyles({ dir });
+    };
+}
+//# sourceMappingURL=__resetCSS.js.map

src/__resetCSS.js.map

+{"version":3,"file":"__resetCSS.js","sourceRoot":"","sources":["../../../../packages/react/src/__resetCSS.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,UAAU,CAAC,YAAoB,EAAE,YAA2B;IAC1E,MAAM,SAAS,GAAG,eAAe,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IAE9D,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}

src/__resetStyles.js

+'use client';
+import { __resetStyles as vanillaResetStyles } from '@griffel/core';
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function __resetStyles(ltrClassName, rtlClassName, cssRules) {
+    const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules, insertionFactory);
+    return function useClasses() {
+        const dir = useTextDirection();
+        const renderer = useRenderer();
+        return getStyles({ dir, renderer });
+    };
+}
+//# sourceMappingURL=__resetStyles.js.map

src/__resetStyles.js.map

+{"version":3,"file":"__resetStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/__resetStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAGpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,aAAa,CAC3B,YAAoB,EACpB,YAA2B,EAC3B,QAAqC;IAErC,MAAM,SAAS,GAAG,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAE7F,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC"}

src/__staticCSS.js

+'use client';
+import { __staticCSS as vanillaStaticCSS } from '@griffel/core';
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function __staticCSS() {
+    const getStyles = vanillaStaticCSS();
+    return function useStaticStyles() {
+        return getStyles();
+    };
+}
+//# sourceMappingURL=__staticCSS.js.map

src/__staticCSS.js.map

+{"version":3,"file":"__staticCSS.js","sourceRoot":"","sources":["../../../../packages/react/src/__staticCSS.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,WAAW,IAAI,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEhE;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,WAAW;IACzB,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,OAAO,SAAS,eAAe;QAC7B,OAAO,SAAS,EAAE,CAAC;IACrB,CAAC,CAAC;AACJ,CAAC"}

src/__staticStyles.js

+'use client';
+import { __staticStyles as vanillaStaticStyles } from '@griffel/core';
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function __staticStyles(cssRules) {
+    const getStyles = vanillaStaticStyles(cssRules, insertionFactory);
+    return function useStaticStyles() {
+        const renderer = useRenderer();
+        return getStyles({ renderer });
+    };
+}
+//# sourceMappingURL=__staticStyles.js.map

src/__staticStyles.js.map

+{"version":3,"file":"__staticStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/__staticStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,cAAc,IAAI,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAGtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,cAAc,CAAC,QAA0B;IACvD,MAAM,SAAS,GAAG,mBAAmB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAElE,OAAO,SAAS,eAAe;QAC7B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC;AACJ,CAAC"}

src/__styles.js

+'use client';
+import { __styles as vanillaStyles } from '@griffel/core';
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @internal
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function __styles(classesMapBySlot, cssRules) {
+    const getStyles = vanillaStyles(classesMapBySlot, cssRules, insertionFactory);
+    return function useClasses() {
+        const dir = useTextDirection();
+        const renderer = useRenderer();
+        return getStyles({ dir, renderer });
+    };
+}
+//# sourceMappingURL=__styles.js.map

src/__styles.js.map

+{"version":3,"file":"__styles.js","sourceRoot":"","sources":["../../../../packages/react/src/__styles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AAG1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAE7D;;;;GAIG;AACH,gEAAgE;AAChE,MAAM,UAAU,QAAQ,CACtB,gBAA4C,EAC5C,QAA0B;IAE1B,MAAM,SAAS,GAAG,aAAa,CAAC,gBAAgB,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC;IAE9E,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC"}

src/index.js

+'use client';
+export { RESET, shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
+export { makeStyles } from './makeStyles.js';
+export { makeResetStyles } from './makeResetStyles.js';
+export { makeStaticStyles } from './makeStaticStyles.js';
+export { renderToStyleElements } from './renderToStyleElements.js';
+export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext.js';
+export { TextDirectionProvider } from './TextDirectionContext.js';
+// Private exports, are used by build time transforms
+export { __css } from './__css.js';
+export { __styles } from './__styles.js';
+export { __resetCSS } from './__resetCSS.js';
+export { __resetStyles } from './__resetStyles.js';
+export { __staticCSS } from './__staticCSS.js';
+export { __staticStyles } from './__staticStyles.js';
+//# sourceMappingURL=index.js.map

src/index.js.map

+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../packages/react/src/index.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGnF,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAEnE,OAAO,EAAE,gBAAgB,EAAE,WAAW,IAAI,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAC7F,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAElE,qDAAqD;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

src/insertionFactory.js

+'use client';
+import { canUseDOM } from './utils/canUseDOM.js';
+import { useInsertionEffect } from './useInsertionEffect.js';
+export const insertionFactory = () => {
+    const insertionCache = {};
+    return function insert(renderer, cssRules) {
+        // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
+        if (useInsertionEffect && canUseDOM()) {
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            useInsertionEffect(() => {
+                renderer.insertCSSRules(cssRules);
+            }, [renderer, cssRules]);
+            return;
+        }
+        if (insertionCache[renderer.id] === undefined) {
+            renderer.insertCSSRules(cssRules);
+            insertionCache[renderer.id] = true;
+        }
+    };
+};
+//# sourceMappingURL=insertionFactory.js.map

src/insertionFactory.js.map

+{"version":3,"file":"insertionFactory.js","sourceRoot":"","sources":["../../../../packages/react/src/insertionFactory.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAIb,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,MAAM,gBAAgB,GAA4B,GAAG,EAAE;IAC5D,MAAM,cAAc,GAA4B,EAAE,CAAC;IAEnD,OAAO,SAAS,MAAM,CAAC,QAAyB,EAAE,QAA0B;QAC1E,8GAA8G;QAC9G,IAAI,kBAAkB,IAAI,SAAS,EAAE,EAAE,CAAC;YACtC,sDAAsD;YACtD,kBAAkB,CAAC,GAAG,EAAE;gBACtB,QAAQ,CAAC,cAAc,CAAC,QAAS,CAAC,CAAC;YACrC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;YAEzB,OAAO;QACT,CAAC;QAED,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,SAAS,EAAE,CAAC;YAC9C,QAAQ,CAAC,cAAc,CAAC,QAAS,CAAC,CAAC;YACnC,cAAc,CAAC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;QACrC,CAAC;IACH,CAAC,CAAC;AACJ,CAAC,CAAC"}

src/makeResetStyles.js

+'use client';
+import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+import { isInsideComponent } from './utils/isInsideComponent.js';
+export function makeResetStyles(styles) {
+    const getStyles = vanillaMakeResetStyles(styles, insertionFactory);
+    if (process.env.NODE_ENV !== 'production') {
+        if (isInsideComponent()) {
+            throw new Error([
+                "makeResetStyles(): this function cannot be called in component's scope.",
+                'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',
+            ].join(' '));
+        }
+    }
+    return function useClassName() {
+        const dir = useTextDirection();
+        const renderer = useRenderer();
+        return getStyles({ dir, renderer });
+    };
+}
+//# sourceMappingURL=makeResetStyles.js.map

src/makeResetStyles.js.map

+{"version":3,"file":"makeResetStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/makeResetStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,eAAe,IAAI,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAG1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,UAAU,eAAe,CAAC,MAAyB;IACvD,MAAM,SAAS,GAAG,sBAAsB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAEnE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QAC1C,IAAI,iBAAiB,EAAE,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CACb;gBACE,yEAAyE;gBACzE,iFAAiF;aAClF,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,SAAS,YAAY;QAC1B,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC"}

src/makeStaticStyles.js

+'use client';
+import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+export function makeStaticStyles(styles) {
+    const getStyles = vanillaMakeStaticStyles(styles, insertionFactory);
+    if (process.env.NODE_ENV === 'test') {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return () => { };
+    }
+    return function useStaticStyles() {
+        const renderer = useRenderer();
+        const options = { renderer };
+        return getStyles(options);
+    };
+}
+//# sourceMappingURL=makeStaticStyles.js.map

src/makeStaticStyles.js.map

+{"version":3,"file":"makeStaticStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/makeStaticStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,gBAAgB,IAAI,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,UAAU,gBAAgB,CAAC,MAAmD;IAClF,MAAM,SAAS,GAAG,uBAAuB,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAEpE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;QACpC,gEAAgE;QAChE,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC;IAED,OAAO,SAAS,eAAe;QAC7B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAC/B,MAAM,OAAO,GAA4B,EAAE,QAAQ,EAAE,CAAC;QAEtD,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC,CAAC;AACJ,CAAC"}

src/makeStyles.js

+'use client';
+import { makeStyles as vanillaMakeStyles } from '@griffel/core';
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+import { isInsideComponent } from './utils/isInsideComponent.js';
+export function makeStyles(stylesBySlots) {
+    const getStyles = vanillaMakeStyles(stylesBySlots, insertionFactory);
+    if (process.env.NODE_ENV !== 'production') {
+        if (isInsideComponent()) {
+            throw new Error([
+                "makeStyles(): this function cannot be called in component's scope.",
+                'All makeStyles() calls should be top level i.e. in a root scope of a file.',
+            ].join(' '));
+        }
+    }
+    return function useClasses() {
+        const dir = useTextDirection();
+        const renderer = useRenderer();
+        return getStyles({ dir, renderer });
+    };
+}
+//# sourceMappingURL=makeStyles.js.map

src/makeStyles.js.map

+{"version":3,"file":"makeStyles.js","sourceRoot":"","sources":["../../../../packages/react/src/makeStyles.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,UAAU,IAAI,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGhE,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,UAAU,UAAU,CAAgC,aAA0C;IAClG,MAAM,SAAS,GAAG,iBAAiB,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;IAErE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;QAC1C,IAAI,iBAAiB,EAAE,EAAE,CAAC;YACxB,MAAM,IAAI,KAAK,CACb;gBACE,oEAAoE;gBACpE,4EAA4E;aAC7E,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,SAAS,UAAU;QACxB,MAAM,GAAG,GAAG,gBAAgB,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;QAE/B,OAAO,SAAS,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC,CAAC;AACJ,CAAC"}

src/RendererContext.js

+'use client';
+import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';
+import React from 'react';
+import { canUseDOM } from './utils/canUseDOM.js';
+/**
+ * @private
+ */
+const RendererContext = /*#__PURE__*/ React.createContext(/*#__PURE__*/ createDOMRenderer());
+/**
+ * @public
+ */
+export const RendererProvider = ({ children, renderer, targetDocument }) => {
+    React.useMemo(() => {
+        if (canUseDOM()) {
+            // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
+            // avoid double insertion of classes
+            rehydrateRendererCache(renderer, targetDocument);
+        }
+    }, [renderer, targetDocument]);
+    return React.createElement(RendererContext.Provider, { value: renderer }, children);
+};
+/**
+ * Returns an instance of current makeStyles() renderer.
+ *
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
+ */
+export function useRenderer() {
+    return React.useContext(RendererContext);
+}
+//# sourceMappingURL=RendererContext.js.map

src/RendererContext.js.map

+{"version":3,"file":"RendererContext.js","sourceRoot":"","sources":["../../../../packages/react/src/RendererContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAiBjD;;GAEG;AACH,MAAM,eAAe,GAAG,aAAa,CAAC,KAAK,CAAC,aAAa,CAAkB,aAAa,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAE9G;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IAC1G,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjB,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,kHAAkH;YAClH,oCAAoC;YACpC,sBAAsB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,OAAO,oBAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,IAAG,QAAQ,CAA4B,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,KAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;AAC3C,CAAC"}

src/renderToStyleElements.js

+'use client';
+import { styleBucketOrdering } from '@griffel/core';
+import { createElement } from 'react';
+/**
+ * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
+ *
+ * @public
+ */
+export function renderToStyleElements(renderer) {
+    const stylesheets = Object.values(renderer.stylesheets)
+        // first sort: bucket by order [data-priority]
+        .sort((a, b) => {
+        return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
+    })
+        // second sort: bucket by bucket name
+        .sort((a, b) => {
+        return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
+    })
+        // third sort: media queries
+        .sort((a, b) => {
+        const mediaA = a.elementAttributes['media'];
+        const mediaB = b.elementAttributes['media'];
+        if (mediaA && mediaB) {
+            return renderer.compareMediaQueries(mediaA, mediaB);
+        }
+        if (mediaA || mediaB) {
+            return mediaA ? 1 : -1;
+        }
+        return 0;
+    });
+    return stylesheets
+        .map(stylesheet => {
+        const cssRules = stylesheet.cssRules();
+        // don't want to create any empty style elements
+        if (!cssRules.length) {
+            return null;
+        }
+        return createElement('style', {
+            key: stylesheet.bucketName,
+            // TODO: support "nonce"
+            // ...renderer.styleNodeAttributes,
+            ...stylesheet.elementAttributes,
+            'data-make-styles-rehydration': 'true',
+            dangerouslySetInnerHTML: {
+                __html: cssRules.join(''),
+            },
+        });
+    })
+        .filter(Boolean);
+}
+//# sourceMappingURL=renderToStyleElements.js.map

src/renderToStyleElements.js.map

+{"version":3,"file":"renderToStyleElements.js","sourceRoot":"","sources":["../../../../packages/react/src/renderToStyleElements.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAItC;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,QAAyB;IAC7D,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC;QACrD,8CAA8C;SAC7C,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACb,OAAO,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAAC,CAAC;IACrG,CAAC,CAAC;QACF,qCAAqC;SACpC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACb,OAAO,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAC/F,CAAC,CAAC;QACF,4BAA4B;SAC3B,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACb,MAAM,MAAM,GAAG,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC5C,MAAM,MAAM,GAAG,CAAC,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAE5C,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;YACrB,OAAO,QAAQ,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACtD,CAAC;QAED,IAAI,MAAM,IAAI,MAAM,EAAE,CAAC;YACrB,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACzB,CAAC;QAED,OAAO,CAAC,CAAC;IACX,CAAC,CAAC,CAAC;IAEL,OAAO,WAAW;SACf,GAAG,CAAC,UAAU,CAAC,EAAE;QAChB,MAAM,QAAQ,GAAG,UAAU,CAAC,QAAQ,EAAE,CAAC;QACvC,gDAAgD;QAChD,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACrB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,aAAa,CAAC,OAAO,EAAE;YAC5B,GAAG,EAAE,UAAU,CAAC,UAAU;YAE1B,wBAAwB;YACxB,mCAAmC;YACnC,GAAG,UAAU,CAAC,iBAAiB;YAC/B,8BAA8B,EAAE,MAAM;YAEtC,uBAAuB,EAAE;gBACvB,MAAM,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;aAC1B;SACF,CAAC,CAAC;IACL,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAmB,CAAC;AACvC,CAAC"}

src/TextDirectionContext.js

+'use client';
+import React from 'react';
+/**
+ * @private
+ */
+const TextDirectionContext = /*#__PURE__*/ React.createContext('ltr');
+/**
+ * @public
+ */
+export const TextDirectionProvider = ({ children, dir }) => {
+    return React.createElement(TextDirectionContext.Provider, { value: dir }, children);
+};
+/**
+ * Returns current directionality of the element's text.
+ *
+ * @private
+ */
+export function useTextDirection() {
+    return React.useContext(TextDirectionContext);
+}
+//# sourceMappingURL=TextDirectionContext.js.map

src/TextDirectionContext.js.map

+{"version":3,"file":"TextDirectionContext.js","sourceRoot":"","sources":["../../../../packages/react/src/TextDirectionContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B;;GAEG;AACH,MAAM,oBAAoB,GAAG,aAAa,CAAC,KAAK,CAAC,aAAa,CAAgB,KAAK,CAAC,CAAC;AAErF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAyC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE;IAC/F,OAAO,oBAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,IAAG,QAAQ,CAAiC,CAAC;AAC/F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,KAAK,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAChD,CAAC"}

src/useInsertionEffect.js

+'use client';
+import React from 'react';
+export const useInsertionEffect = 
+// @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
+// eslint-disable-next-line no-useless-concat
+React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;
+//# sourceMappingURL=useInsertionEffect.js.map

src/useInsertionEffect.js.map

+{"version":3,"file":"useInsertionEffect.js","sourceRoot":"","sources":["../../../../packages/react/src/useInsertionEffect.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB;AAC7B,sHAAsH;AACtH,6CAA6C;AAC7C,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC"}

src/utils/canUseDOM.js

+/**
+ * Verifies if an application can use DOM.
+ */
+export function canUseDOM() {
+    return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
+}
+//# sourceMappingURL=canUseDOM.js.map

src/utils/canUseDOM.js.map

+{"version":3,"file":"canUseDOM.js","sourceRoot":"","sources":["../../../../../packages/react/src/utils/canUseDOM.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,SAAS;IACvB,OAAO,OAAO,MAAM,KAAK,WAAW,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;AAC/F,CAAC"}

src/utils/isInsideComponent.js

+'use client';
+import React from 'react';
+function getDispatcher() {
+    try {
+        return React[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
+    }
+    catch {
+        // React 19+
+    }
+    try {
+        return React[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher
+            .current;
+    }
+    catch {
+        // React 18 and below
+    }
+}
+export function isInsideComponent() {
+    // React 18 always logs errors if a dispatcher is not present:
+    // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
+    try {
+        const dispatcher = getDispatcher();
+        // Before any React component was rendered "dispatcher" will be "null"
+        if (dispatcher === null || dispatcher === undefined) {
+            return false;
+        }
+        // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
+        // a call on the dispatcher wont
+        dispatcher.useContext({});
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+//# sourceMappingURL=isInsideComponent.js.map

src/utils/isInsideComponent.js.map

+{"version":3,"file":"isInsideComponent.js","sourceRoot":"","sources":["../../../../../packages/react/src/utils/isInsideComponent.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,SAAS,aAAa;IACpB,IAAI,CAAC;QACH,OAAQ,KAAa,CAAC,EAAE,CAAC,MAAM,CAAC,iEAAiE,CAAC,CAAC,CAAC,CAAC,CAAC;IACxG,CAAC;IAAC,MAAM,CAAC;QACP,YAAY;IACd,CAAC;IAED,IAAI,CAAC;QACH,OAAQ,KAAa,CAAC,EAAE,CAAC,MAAM,CAAC,oDAAoD,CAAC,CAAC,CAAC,sBAAsB;aAC1G,OAAO,CAAC;IACb,CAAC;IAAC,MAAM,CAAC;QACP,qBAAqB;IACvB,CAAC;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC/B,8DAA8D;IAC9D,2HAA2H;IAC3H,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QAEnC,sEAAsE;QACtE,IAAI,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;YACpD,OAAO,KAAK,CAAC;QACf,CAAC;QAED,+GAA+G;QAC/G,gCAAgC;QAChC,UAAU,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;QAC1B,OAAO,IAAI,CAAC;IACd,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,KAAK,CAAC;IACf,CAAC;AACH,CAAC"}

package.json

 {
   "name": "@griffel/react",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "React implementation of Atomic CSS-in-JS",
@@ -11,2 +11,14 @@ "license": "MIT",
   "sideEffects": false,
+  "type": "module",
+  "main": "./lib/index.cjs",
+  "module": "./src/index.js",
+  "types": "./src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.d.ts",
+      "import": "./src/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
   "wyw-in-js": {
@@ -19,3 +31,3 @@ "tags": {
   "dependencies": {
-    "@griffel/core": "^1.20.1",
+    "@griffel/core": "^1.20.2",
     "tslib": "^2.1.0"
@@ -25,6 +37,3 @@ },
     "react": ">=16.8.0 <20.0.0"
-  },
-  "module": "./index.esm.js",
-  "main": "./index.cjs.js",
-  "types": "./index.d.ts"
+  }
 }

src/index.d.ts

 export { RESET, shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
 export type { GriffelStyle, GriffelResetStyle, CreateDOMRendererOptions, GriffelRenderer } from '@griffel/core';
-export { makeStyles } from './makeStyles';
-export { makeResetStyles } from './makeResetStyles';
-export { makeStaticStyles } from './makeStaticStyles';
-export { renderToStyleElements } from './renderToStyleElements';
-export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext';
-export { TextDirectionProvider } from './TextDirectionContext';
-export { __css } from './__css';
-export { __styles } from './__styles';
-export { __resetCSS } from './__resetCSS';
-export { __resetStyles } from './__resetStyles';
-export { __staticCSS } from './__staticCSS';
-export { __staticStyles } from './__staticStyles';
+export { makeStyles } from './makeStyles.js';
+export { makeResetStyles } from './makeResetStyles.js';
+export { makeStaticStyles } from './makeStaticStyles.js';
+export { renderToStyleElements } from './renderToStyleElements.js';
+export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext.js';
+export { TextDirectionProvider } from './TextDirectionContext.js';
+export { __css } from './__css.js';
+export { __styles } from './__styles.js';
+export { __resetCSS } from './__resetCSS.js';
+export { __resetStyles } from './__resetStyles.js';
+export { __staticCSS } from './__staticCSS.js';
+export { __staticStyles } from './__staticStyles.js';

src/RendererContext.d.ts

 import type { GriffelRenderer } from '@griffel/core';
-import * as React from 'react';
+import React from 'react';
 export interface RendererProviderProps {
@@ -4,0 +4,0 @@ /** An instance of Griffel renderer. */

src/renderToStyleElements.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import type { ReactElement } from 'react';
 import type { GriffelRenderer } from '@griffel/core';
@@ -8,2 +8,2 @@ /**
  */
-export declare function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[];
+export declare function renderToStyleElements(renderer: GriffelRenderer): ReactElement[];

src/TextDirectionContext.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 export interface TextDirectionProviderProps {
@@ -19,2 +19,2 @@ /** Indicates the directionality of the element's text. */
  */
-export declare function useTextDirection(): "ltr" | "rtl";
+export declare function useTextDirection(): "rtl" | "ltr";

src/useInsertionEffect.d.ts

@@ -1,2 +0,2 @@
-import * as React from 'react';
+import React from 'react';
 export declare const useInsertionEffect: typeof React.useInsertionEffect | undefined;

__css.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var TextDirectionContext = require('./TextDirectionContext.cjs.js');
-
-/**
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __css(classesMapBySlot) {
-  const getStyles = core.__css(classesMapBySlot);
-  return function useClasses() {
-    const dir = TextDirectionContext.useTextDirection();
-    return getStyles({
-      dir
-    });
-  };
-}
-
-exports.__css = __css;
-//# sourceMappingURL=__css.cjs.js.map

__css.cjs.js.map

-{"version":3,"file":"__css.cjs.js","sources":["../../../packages/react/src/__css.ts"],"sourcesContent":["'use client';\n\nimport { __css as vanillaCSS } from '@griffel/core';\nimport type { CSSClassesMapBySlot } from '@griffel/core';\n\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>) {\n  const getStyles = vanillaCSS(classesMapBySlot);\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["dir"],"mappings":";;;;;;AAOA;;;;AAIG;AACH;AACM;AACJ;;AAGE;AAEA;AAAmBA;AAAG;;AAE1B;;"}

__css.esm.js

-"use client";
-import { __css as __css$1 } from '@griffel/core';
-import { useTextDirection } from './TextDirectionContext.esm.js';
-
-/**
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __css(classesMapBySlot) {
-  const getStyles = __css$1(classesMapBySlot);
-  return function useClasses() {
-    const dir = useTextDirection();
-    return getStyles({
-      dir
-    });
-  };
-}
-
-export { __css };
-//# sourceMappingURL=__css.esm.js.map

__css.esm.js.map

-{"version":3,"file":"__css.esm.js","sources":["../../../packages/react/src/__css.ts"],"sourcesContent":["'use client';\n\nimport { __css as vanillaCSS } from '@griffel/core';\nimport type { CSSClassesMapBySlot } from '@griffel/core';\n\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>) {\n  const getStyles = vanillaCSS(classesMapBySlot);\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["dir"],"mappings":";;;;AAOA;;;;AAIG;AACH;AACM;AACJ;;AAGE;AAEA;AAAmBA;AAAG;;AAE1B;;"}

__resetCSS.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var TextDirectionContext = require('./TextDirectionContext.cjs.js');
-
-/**
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __resetCSS(ltrClassName, rtlClassName) {
-  const getStyles = core.__resetCSS(ltrClassName, rtlClassName);
-  return function useClasses() {
-    const dir = TextDirectionContext.useTextDirection();
-    return getStyles({
-      dir
-    });
-  };
-}
-
-exports.__resetCSS = __resetCSS;
-//# sourceMappingURL=__resetCSS.cjs.js.map

__resetCSS.cjs.js.map

-{"version":3,"file":"__resetCSS.cjs.js","sources":["../../../packages/react/src/__resetCSS.ts"],"sourcesContent":["'use client';\n\nimport { __resetCSS as vanillaResetCSS } from '@griffel/core';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetCSS(ltrClassName: string, rtlClassName: string | null) {\n  const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["dir"],"mappings":";;;;;;AAKA;;;;AAIG;AACH;AACM;AACJ;;AAGE;AAEA;AAAmBA;AAAG;;AAE1B;;"}

__resetCSS.esm.js

-"use client";
-import { __resetCSS as __resetCSS$1 } from '@griffel/core';
-import { useTextDirection } from './TextDirectionContext.esm.js';
-
-/**
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __resetCSS(ltrClassName, rtlClassName) {
-  const getStyles = __resetCSS$1(ltrClassName, rtlClassName);
-  return function useClasses() {
-    const dir = useTextDirection();
-    return getStyles({
-      dir
-    });
-  };
-}
-
-export { __resetCSS };
-//# sourceMappingURL=__resetCSS.esm.js.map

__resetCSS.esm.js.map

-{"version":3,"file":"__resetCSS.esm.js","sources":["../../../packages/react/src/__resetCSS.ts"],"sourcesContent":["'use client';\n\nimport { __resetCSS as vanillaResetCSS } from '@griffel/core';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetCSS(ltrClassName: string, rtlClassName: string | null) {\n  const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["dir"],"mappings":";;;;AAKA;;;;AAIG;AACH;AACM;AACJ;;AAGE;AAEA;AAAmBA;AAAG;;AAE1B;;"}

__resetStyles.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var insertionFactory = require('./insertionFactory.cjs.js');
-var RendererContext = require('./RendererContext.cjs.js');
-var TextDirectionContext = require('./TextDirectionContext.cjs.js');
-
-/**
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __resetStyles(ltrClassName, rtlClassName, cssRules) {
-  const getStyles = core.__resetStyles(ltrClassName, rtlClassName, cssRules, insertionFactory.insertionFactory);
-  return function useClasses() {
-    const dir = TextDirectionContext.useTextDirection();
-    const renderer = RendererContext.useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-exports.__resetStyles = __resetStyles;
-//# sourceMappingURL=__resetStyles.cjs.js.map

__resetStyles.cjs.js.map

-{"version":3,"file":"__resetStyles.cjs.js","sources":["../../../packages/react/src/__resetStyles.ts"],"sourcesContent":["'use client';\n\nimport { __resetStyles as vanillaResetStyles } from '@griffel/core';\nimport type { CSSRulesByBucket } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetStyles(\n  ltrClassName: string,\n  rtlClassName: string | null,\n  cssRules: CSSRulesByBucket | string[],\n) {\n  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules, insertionFactory);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;;AASA;;;;AAIG;AACH;;;;AASI;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}

__resetStyles.esm.js

-"use client";
-import { __resetStyles as __resetStyles$1 } from '@griffel/core';
-import { insertionFactory } from './insertionFactory.esm.js';
-import { useRenderer } from './RendererContext.esm.js';
-import { useTextDirection } from './TextDirectionContext.esm.js';
-
-/**
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __resetStyles(ltrClassName, rtlClassName, cssRules) {
-  const getStyles = __resetStyles$1(ltrClassName, rtlClassName, cssRules, insertionFactory);
-  return function useClasses() {
-    const dir = useTextDirection();
-    const renderer = useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-export { __resetStyles };
-//# sourceMappingURL=__resetStyles.esm.js.map

__resetStyles.esm.js.map

-{"version":3,"file":"__resetStyles.esm.js","sources":["../../../packages/react/src/__resetStyles.ts"],"sourcesContent":["'use client';\n\nimport { __resetStyles as vanillaResetStyles } from '@griffel/core';\nimport type { CSSRulesByBucket } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetStyles(\n  ltrClassName: string,\n  rtlClassName: string | null,\n  cssRules: CSSRulesByBucket | string[],\n) {\n  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules, insertionFactory);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;AASA;;;;AAIG;AACH;;;;AASI;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}

__staticCSS.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-
-/**
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __staticCSS() {
-  const getStyles = core.__staticCSS();
-  return function useStaticStyles() {
-    return getStyles();
-  };
-}
-
-exports.__staticCSS = __staticCSS;
-//# sourceMappingURL=__staticCSS.cjs.js.map

__staticCSS.cjs.js.map

-{"version":3,"file":"__staticCSS.cjs.js","sources":["../../../packages/react/src/__staticCSS.ts"],"sourcesContent":["'use client';\n\nimport { __staticCSS as vanillaStaticCSS } from '@griffel/core';\n\n/**\n * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __staticCSS() {\n  const getStyles = vanillaStaticCSS();\n\n  return function useStaticStyles(): void {\n    return getStyles();\n  };\n}\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AACH;;AAEE;;;;AAKF;;"}

__staticCSS.esm.js

-"use client";
-import { __staticCSS as __staticCSS$1 } from '@griffel/core';
-
-/**
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __staticCSS() {
-  const getStyles = __staticCSS$1();
-  return function useStaticStyles() {
-    return getStyles();
-  };
-}
-
-export { __staticCSS };
-//# sourceMappingURL=__staticCSS.esm.js.map

__staticCSS.esm.js.map

-{"version":3,"file":"__staticCSS.esm.js","sources":["../../../packages/react/src/__staticCSS.ts"],"sourcesContent":["'use client';\n\nimport { __staticCSS as vanillaStaticCSS } from '@griffel/core';\n\n/**\n * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __staticCSS() {\n  const getStyles = vanillaStaticCSS();\n\n  return function useStaticStyles(): void {\n    return getStyles();\n  };\n}\n"],"names":[],"mappings":";;;AAIA;;;;AAIG;AACH;;AAEE;;;;AAKF;;"}

__staticStyles.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var insertionFactory = require('./insertionFactory.cjs.js');
-var RendererContext = require('./RendererContext.cjs.js');
-
-/**
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __staticStyles(cssRules) {
-  const getStyles = core.__staticStyles(cssRules, insertionFactory.insertionFactory);
-  return function useStaticStyles() {
-    const renderer = RendererContext.useRenderer();
-    return getStyles({
-      renderer
-    });
-  };
-}
-
-exports.__staticStyles = __staticStyles;
-//# sourceMappingURL=__staticStyles.cjs.js.map

__staticStyles.cjs.js.map

-{"version":3,"file":"__staticStyles.cjs.js","sources":["../../../packages/react/src/__staticStyles.ts"],"sourcesContent":["'use client';\n\nimport { __staticStyles as vanillaStaticStyles } from '@griffel/core';\nimport type { CSSRulesByBucket } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\n\n/**\n * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __staticStyles(cssRules: CSSRulesByBucket) {\n  const getStyles = vanillaStaticStyles(cssRules, insertionFactory);\n\n  return function useStaticStyles(): void {\n    const renderer = useRenderer();\n\n    return getStyles({ renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;AAQA;;;;AAIG;AACH;AACM;AACJ;;AAGE;AAEA;AAAmBA;AAAQ;;AAE/B;;"}

__staticStyles.esm.js

-"use client";
-import { __staticStyles as __staticStyles$1 } from '@griffel/core';
-import { insertionFactory } from './insertionFactory.esm.js';
-import { useRenderer } from './RendererContext.esm.js';
-
-/**
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __staticStyles(cssRules) {
-  const getStyles = __staticStyles$1(cssRules, insertionFactory);
-  return function useStaticStyles() {
-    const renderer = useRenderer();
-    return getStyles({
-      renderer
-    });
-  };
-}
-
-export { __staticStyles };
-//# sourceMappingURL=__staticStyles.esm.js.map

__staticStyles.esm.js.map

-{"version":3,"file":"__staticStyles.esm.js","sources":["../../../packages/react/src/__staticStyles.ts"],"sourcesContent":["'use client';\n\nimport { __staticStyles as vanillaStaticStyles } from '@griffel/core';\nimport type { CSSRulesByBucket } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\n\n/**\n * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __staticStyles(cssRules: CSSRulesByBucket) {\n  const getStyles = vanillaStaticStyles(cssRules, insertionFactory);\n\n  return function useStaticStyles(): void {\n    const renderer = useRenderer();\n\n    return getStyles({ renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;AAQA;;;;AAIG;AACH;AACM;AACJ;;AAGE;AAEA;AAAmBA;AAAQ;;AAE/B;;"}

__styles.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var insertionFactory = require('./insertionFactory.cjs.js');
-var RendererContext = require('./RendererContext.cjs.js');
-var TextDirectionContext = require('./TextDirectionContext.cjs.js');
-
-/**
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __styles(classesMapBySlot, cssRules) {
-  const getStyles = core.__styles(classesMapBySlot, cssRules, insertionFactory.insertionFactory);
-  return function useClasses() {
-    const dir = TextDirectionContext.useTextDirection();
-    const renderer = RendererContext.useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-exports.__styles = __styles;
-//# sourceMappingURL=__styles.cjs.js.map

__styles.cjs.js.map

-{"version":3,"file":"__styles.cjs.js","sources":["../../../packages/react/src/__styles.ts"],"sourcesContent":["'use client';\n\nimport { __styles as vanillaStyles } from '@griffel/core';\nimport type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __styles<Slots extends string>(\n  classesMapBySlot: CSSClassesMapBySlot<Slots>,\n  cssRules: CSSRulesByBucket,\n) {\n  const getStyles = vanillaStyles(classesMapBySlot, cssRules, insertionFactory);\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;;AASA;;;;AAIG;AACH;AACM;;;AAOF;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}

__styles.esm.js

-"use client";
-import { __styles as __styles$1 } from '@griffel/core';
-import { insertionFactory } from './insertionFactory.esm.js';
-import { useRenderer } from './RendererContext.esm.js';
-import { useTextDirection } from './TextDirectionContext.esm.js';
-
-/**
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @internal
- */
-// eslint-disable-next-line @typescript-eslint/naming-convention
-function __styles(classesMapBySlot, cssRules) {
-  const getStyles = __styles$1(classesMapBySlot, cssRules, insertionFactory);
-  return function useClasses() {
-    const dir = useTextDirection();
-    const renderer = useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-export { __styles };
-//# sourceMappingURL=__styles.esm.js.map

__styles.esm.js.map

-{"version":3,"file":"__styles.esm.js","sources":["../../../packages/react/src/__styles.ts"],"sourcesContent":["'use client';\n\nimport { __styles as vanillaStyles } from '@griffel/core';\nimport type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __styles<Slots extends string>(\n  classesMapBySlot: CSSClassesMapBySlot<Slots>,\n  cssRules: CSSRulesByBucket,\n) {\n  const getStyles = vanillaStyles(classesMapBySlot, cssRules, insertionFactory);\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;AASA;;;;AAIG;AACH;AACM;;;AAOF;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}

index.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var makeStyles = require('./makeStyles.cjs.js');
-var makeResetStyles = require('./makeResetStyles.cjs.js');
-var makeStaticStyles = require('./makeStaticStyles.cjs.js');
-var renderToStyleElements = require('./renderToStyleElements.cjs.js');
-var RendererContext = require('./RendererContext.cjs.js');
-var TextDirectionContext = require('./TextDirectionContext.cjs.js');
-var __css = require('./__css.cjs.js');
-var __styles = require('./__styles.cjs.js');
-var __resetCSS = require('./__resetCSS.cjs.js');
-var __resetStyles = require('./__resetStyles.cjs.js');
-var __staticCSS = require('./__staticCSS.cjs.js');
-var __staticStyles = require('./__staticStyles.cjs.js');
-
-
-
-Object.defineProperty(exports, "RESET", {
-	enumerable: true,
-	get: function () { return core.RESET; }
-});
-Object.defineProperty(exports, "createDOMRenderer", {
-	enumerable: true,
-	get: function () { return core.createDOMRenderer; }
-});
-Object.defineProperty(exports, "mergeClasses", {
-	enumerable: true,
-	get: function () { return core.mergeClasses; }
-});
-Object.defineProperty(exports, "shorthands", {
-	enumerable: true,
-	get: function () { return core.shorthands; }
-});
-exports.makeStyles = makeStyles.makeStyles;
-exports.makeResetStyles = makeResetStyles.makeResetStyles;
-exports.makeStaticStyles = makeStaticStyles.makeStaticStyles;
-exports.renderToStyleElements = renderToStyleElements.renderToStyleElements;
-exports.RendererProvider = RendererContext.RendererProvider;
-exports.useRenderer_unstable = RendererContext.useRenderer;
-exports.TextDirectionProvider = TextDirectionContext.TextDirectionProvider;
-exports.__css = __css.__css;
-exports.__styles = __styles.__styles;
-exports.__resetCSS = __resetCSS.__resetCSS;
-exports.__resetStyles = __resetStyles.__resetStyles;
-exports.__staticCSS = __staticCSS.__staticCSS;
-exports.__staticStyles = __staticStyles.__staticStyles;
-//# sourceMappingURL=index.cjs.js.map

index.cjs.js.map

-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

index.d.ts

-export * from "./src/index";

index.esm.js

-"use client";
-export { RESET, createDOMRenderer, mergeClasses, shorthands } from '@griffel/core';
-export { makeStyles } from './makeStyles.esm.js';
-export { makeResetStyles } from './makeResetStyles.esm.js';
-export { makeStaticStyles } from './makeStaticStyles.esm.js';
-export { renderToStyleElements } from './renderToStyleElements.esm.js';
-export { RendererProvider, useRenderer as useRenderer_unstable } from './RendererContext.esm.js';
-export { TextDirectionProvider } from './TextDirectionContext.esm.js';
-export { __css } from './__css.esm.js';
-export { __styles } from './__styles.esm.js';
-export { __resetCSS } from './__resetCSS.esm.js';
-export { __resetStyles } from './__resetStyles.esm.js';
-export { __staticCSS } from './__staticCSS.esm.js';
-export { __staticStyles } from './__staticStyles.esm.js';
-//# sourceMappingURL=index.esm.js.map

index.esm.js.map

-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

insertionFactory.cjs.js

-"use client";
-'use strict';
-
-var canUseDOM = require('./utils/canUseDOM.cjs.js');
-var useInsertionEffect = require('./useInsertionEffect.cjs.js');
-
-const insertionFactory = () => {
-  const insertionCache = {};
-  return function insert(renderer, cssRules) {
-    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
-    if (useInsertionEffect.useInsertionEffect && canUseDOM.canUseDOM()) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useInsertionEffect.useInsertionEffect(() => {
-        renderer.insertCSSRules(cssRules);
-      }, [renderer, cssRules]);
-      return;
-    }
-    if (insertionCache[renderer.id] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[renderer.id] = true;
-    }
-  };
-};
-
-exports.insertionFactory = insertionFactory;
-//# sourceMappingURL=insertionFactory.cjs.js.map

insertionFactory.cjs.js.map

-{"version":3,"file":"insertionFactory.cjs.js","sources":["../../../packages/react/src/insertionFactory.ts"],"sourcesContent":["'use client';\n\nimport type { CSSRulesByBucket, GriffelInsertionFactory, GriffelRenderer } from '@griffel/core';\n\nimport { canUseDOM } from './utils/canUseDOM';\nimport { useInsertionEffect } from './useInsertionEffect';\n\nexport const insertionFactory: GriffelInsertionFactory = () => {\n  const insertionCache: Record<string, boolean> = {};\n\n  return function insert(renderer: GriffelRenderer, cssRules: CSSRulesByBucket) {\n    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR\n    if (useInsertionEffect && canUseDOM()) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      useInsertionEffect(() => {\n        renderer.insertCSSRules(cssRules!);\n      }, [renderer, cssRules]);\n\n      return;\n    }\n\n    if (insertionCache[renderer.id] === undefined) {\n      renderer.insertCSSRules(cssRules!);\n      insertionCache[renderer.id] = true;\n    }\n  };\n};\n"],"names":["useInsertionEffect","renderer","insertionCache"],"mappings":";;;;;;AAOO;;AAGL;AACE;AACA;AACE;AACAA;AACEC;AACF;AAEA;AACF;;AAGEA;AACAC;AACF;;AAEJ;;"}

insertionFactory.esm.js

-"use client";
-import { canUseDOM } from './utils/canUseDOM.esm.js';
-import { useInsertionEffect } from './useInsertionEffect.esm.js';
-
-const insertionFactory = () => {
-  const insertionCache = {};
-  return function insert(renderer, cssRules) {
-    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
-    if (useInsertionEffect && canUseDOM()) {
-      // eslint-disable-next-line react-hooks/rules-of-hooks
-      useInsertionEffect(() => {
-        renderer.insertCSSRules(cssRules);
-      }, [renderer, cssRules]);
-      return;
-    }
-    if (insertionCache[renderer.id] === undefined) {
-      renderer.insertCSSRules(cssRules);
-      insertionCache[renderer.id] = true;
-    }
-  };
-};
-
-export { insertionFactory };
-//# sourceMappingURL=insertionFactory.esm.js.map

insertionFactory.esm.js.map

-{"version":3,"file":"insertionFactory.esm.js","sources":["../../../packages/react/src/insertionFactory.ts"],"sourcesContent":["'use client';\n\nimport type { CSSRulesByBucket, GriffelInsertionFactory, GriffelRenderer } from '@griffel/core';\n\nimport { canUseDOM } from './utils/canUseDOM';\nimport { useInsertionEffect } from './useInsertionEffect';\n\nexport const insertionFactory: GriffelInsertionFactory = () => {\n  const insertionCache: Record<string, boolean> = {};\n\n  return function insert(renderer: GriffelRenderer, cssRules: CSSRulesByBucket) {\n    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR\n    if (useInsertionEffect && canUseDOM()) {\n      // eslint-disable-next-line react-hooks/rules-of-hooks\n      useInsertionEffect(() => {\n        renderer.insertCSSRules(cssRules!);\n      }, [renderer, cssRules]);\n\n      return;\n    }\n\n    if (insertionCache[renderer.id] === undefined) {\n      renderer.insertCSSRules(cssRules!);\n      insertionCache[renderer.id] = true;\n    }\n  };\n};\n"],"names":["useInsertionEffect","renderer","insertionCache"],"mappings":";;;;AAOO;;AAGL;AACE;AACA;AACE;AACAA;AACEC;AACF;AAEA;AACF;;AAGEA;AACAC;AACF;;AAEJ;;"}

makeResetStyles.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var insertionFactory = require('./insertionFactory.cjs.js');
-var RendererContext = require('./RendererContext.cjs.js');
-var TextDirectionContext = require('./TextDirectionContext.cjs.js');
-var isInsideComponent = require('./utils/isInsideComponent.cjs.js');
-
-function makeResetStyles(styles) {
-  const getStyles = core.makeResetStyles(styles, insertionFactory.insertionFactory);
-  if (process.env.NODE_ENV !== 'production') {
-    if (isInsideComponent.isInsideComponent()) {
-      throw new Error(["makeResetStyles(): this function cannot be called in component's scope.", 'All makeResetStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
-    }
-  }
-  return function useClassName() {
-    const dir = TextDirectionContext.useTextDirection();
-    const renderer = RendererContext.useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-exports.makeResetStyles = makeResetStyles;
-//# sourceMappingURL=makeResetStyles.cjs.js.map

makeResetStyles.cjs.js.map

-{"version":3,"file":"makeResetStyles.cjs.js","sources":["../../../packages/react/src/makeResetStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';\nimport type { GriffelResetStyle } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\nimport { isInsideComponent } from './utils/isInsideComponent';\n\nexport function makeResetStyles(styles: GriffelResetStyle) {\n  const getStyles = vanillaMakeResetStyles(styles, insertionFactory);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeResetStyles(): this function cannot be called in component's scope.\",\n          'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClassName(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;;;AAUM;AACJ;AAEA;;AAEI;AAMF;AACF;;AAGE;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}

makeResetStyles.esm.js

-"use client";
-import { makeResetStyles as makeResetStyles$1 } from '@griffel/core';
-import { insertionFactory } from './insertionFactory.esm.js';
-import { useRenderer } from './RendererContext.esm.js';
-import { useTextDirection } from './TextDirectionContext.esm.js';
-import { isInsideComponent } from './utils/isInsideComponent.esm.js';
-
-function makeResetStyles(styles) {
-  const getStyles = makeResetStyles$1(styles, insertionFactory);
-  if (process.env.NODE_ENV !== 'production') {
-    if (isInsideComponent()) {
-      throw new Error(["makeResetStyles(): this function cannot be called in component's scope.", 'All makeResetStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
-    }
-  }
-  return function useClassName() {
-    const dir = useTextDirection();
-    const renderer = useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-export { makeResetStyles };
-//# sourceMappingURL=makeResetStyles.esm.js.map

makeResetStyles.esm.js.map

-{"version":3,"file":"makeResetStyles.esm.js","sources":["../../../packages/react/src/makeResetStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';\nimport type { GriffelResetStyle } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\nimport { isInsideComponent } from './utils/isInsideComponent';\n\nexport function makeResetStyles(styles: GriffelResetStyle) {\n  const getStyles = vanillaMakeResetStyles(styles, insertionFactory);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeResetStyles(): this function cannot be called in component's scope.\",\n          'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClassName(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;AAUM;AACJ;AAEA;;AAEI;AAMF;AACF;;AAGE;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}

makeStaticStyles.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var insertionFactory = require('./insertionFactory.cjs.js');
-var RendererContext = require('./RendererContext.cjs.js');
-
-function makeStaticStyles(styles) {
-  const getStyles = core.makeStaticStyles(styles, insertionFactory.insertionFactory);
-  if (process.env.NODE_ENV === 'test') {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  }
-  return function useStaticStyles() {
-    const renderer = RendererContext.useRenderer();
-    const options = {
-      renderer
-    };
-    return getStyles(options);
-  };
-}
-
-exports.makeStaticStyles = makeStaticStyles;
-//# sourceMappingURL=makeStaticStyles.cjs.js.map

makeStaticStyles.cjs.js.map

-{"version":3,"file":"makeStaticStyles.cjs.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n  const getStyles = vanillaMakeStaticStyles(styles, insertionFactory);\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {};\n  }\n\n  return function useStaticStyles(): void {\n    const renderer = useRenderer();\n    const options: MakeStaticStylesOptions = { renderer };\n\n    return getStyles(options);\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;AAQM;AACJ;AAEA;AACE;;AAEF;;AAGE;AACA;AAA2CA;;;;AAI/C;;"}

makeStaticStyles.esm.js

-"use client";
-import { makeStaticStyles as makeStaticStyles$1 } from '@griffel/core';
-import { insertionFactory } from './insertionFactory.esm.js';
-import { useRenderer } from './RendererContext.esm.js';
-
-function makeStaticStyles(styles) {
-  const getStyles = makeStaticStyles$1(styles, insertionFactory);
-  if (process.env.NODE_ENV === 'test') {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  }
-  return function useStaticStyles() {
-    const renderer = useRenderer();
-    const options = {
-      renderer
-    };
-    return getStyles(options);
-  };
-}
-
-export { makeStaticStyles };
-//# sourceMappingURL=makeStaticStyles.esm.js.map

makeStaticStyles.esm.js.map

-{"version":3,"file":"makeStaticStyles.esm.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n  const getStyles = vanillaMakeStaticStyles(styles, insertionFactory);\n\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {};\n  }\n\n  return function useStaticStyles(): void {\n    const renderer = useRenderer();\n    const options: MakeStaticStylesOptions = { renderer };\n\n    return getStyles(options);\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;AAQM;AACJ;AAEA;AACE;;AAEF;;AAGE;AACA;AAA2CA;;;;AAI/C;;"}

makeStyles.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var insertionFactory = require('./insertionFactory.cjs.js');
-var RendererContext = require('./RendererContext.cjs.js');
-var TextDirectionContext = require('./TextDirectionContext.cjs.js');
-var isInsideComponent = require('./utils/isInsideComponent.cjs.js');
-
-function makeStyles(stylesBySlots) {
-  const getStyles = core.makeStyles(stylesBySlots, insertionFactory.insertionFactory);
-  if (process.env.NODE_ENV !== 'production') {
-    if (isInsideComponent.isInsideComponent()) {
-      throw new Error(["makeStyles(): this function cannot be called in component's scope.", 'All makeStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
-    }
-  }
-  return function useClasses() {
-    const dir = TextDirectionContext.useTextDirection();
-    const renderer = RendererContext.useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-exports.makeStyles = makeStyles;
-//# sourceMappingURL=makeStyles.cjs.js.map

makeStyles.cjs.js.map

-{"version":3,"file":"makeStyles.cjs.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\nimport { isInsideComponent } from './utils/isInsideComponent';\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots, insertionFactory);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeStyles(): this function cannot be called in component's scope.\",\n          'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;;;AAUM;AACJ;AAEA;;AAEI;AAMF;AACF;;AAGE;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}

makeStyles.esm.js

-"use client";
-import { makeStyles as makeStyles$1 } from '@griffel/core';
-import { insertionFactory } from './insertionFactory.esm.js';
-import { useRenderer } from './RendererContext.esm.js';
-import { useTextDirection } from './TextDirectionContext.esm.js';
-import { isInsideComponent } from './utils/isInsideComponent.esm.js';
-
-function makeStyles(stylesBySlots) {
-  const getStyles = makeStyles$1(stylesBySlots, insertionFactory);
-  if (process.env.NODE_ENV !== 'production') {
-    if (isInsideComponent()) {
-      throw new Error(["makeStyles(): this function cannot be called in component's scope.", 'All makeStyles() calls should be top level i.e. in a root scope of a file.'].join(' '));
-    }
-  }
-  return function useClasses() {
-    const dir = useTextDirection();
-    const renderer = useRenderer();
-    return getStyles({
-      dir,
-      renderer
-    });
-  };
-}
-
-export { makeStyles };
-//# sourceMappingURL=makeStyles.esm.js.map

makeStyles.esm.js.map

-{"version":3,"file":"makeStyles.esm.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { insertionFactory } from './insertionFactory';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\nimport { isInsideComponent } from './utils/isInsideComponent';\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots, insertionFactory);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeStyles(): this function cannot be called in component's scope.\",\n          'All makeStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClasses(): Record<Slots, string> {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["renderer"],"mappings":";;;;;;;AAUM;AACJ;AAEA;;AAEI;AAMF;AACF;;AAGE;AACA;AAEA;;AAAwBA;AAAQ;;AAEpC;;"}

RendererContext.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var React = require('react');
-var canUseDOM = require('./utils/canUseDOM.cjs.js');
-
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === 'object' && 'default' in e) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
-
-/**
- * @private
- */
-const RendererContext = /*#__PURE__*/React__namespace.createContext(/*#__PURE__*/core.createDOMRenderer());
-/**
- * @public
- */
-const RendererProvider = ({
-  children,
-  renderer,
-  targetDocument
-}) => {
-  React__namespace.useMemo(() => {
-    if (canUseDOM.canUseDOM()) {
-      // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
-      // avoid double insertion of classes
-      core.rehydrateRendererCache(renderer, targetDocument);
-    }
-  }, [renderer, targetDocument]);
-  return /*#__PURE__*/React__namespace.createElement(RendererContext.Provider, {
-    value: renderer
-  }, children);
-};
-/**
- * Returns an instance of current makeStyles() renderer.
- *
- * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
- */
-function useRenderer() {
-  return React__namespace.useContext(RendererContext);
-}
-
-exports.RendererProvider = RendererProvider;
-exports.useRenderer = useRenderer;
-//# sourceMappingURL=RendererContext.cjs.js.map

RendererContext.cjs.js.map

-{"version":3,"file":"RendererContext.cjs.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["'use client';\n\nimport { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport type { GriffelRenderer } from '@griffel/core';\nimport * as React from 'react';\n\nimport { canUseDOM } from './utils/canUseDOM';\n\nexport interface RendererProviderProps {\n  /** An instance of Griffel renderer. */\n  renderer: GriffelRenderer;\n\n  /**\n   * Document used to insert CSS variables to head\n   */\n  targetDocument?: Document;\n\n  /**\n   * Content wrapped by the RendererProvider\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @private\n */\nconst RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());\n\n/**\n * @public\n */\nexport const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {\n  React.useMemo(() => {\n    if (canUseDOM()) {\n      // \"rehydrateCache()\" can't be called in effects as it needs to be called before any component will be rendered to\n      // avoid double insertion of classes\n      rehydrateRendererCache(renderer, targetDocument);\n    }\n  }, [renderer, targetDocument]);\n\n  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;\n};\n\n/**\n * Returns an instance of current makeStyles() renderer.\n *\n * @private Exported as \"useRenderer_unstable\" use it on own risk. Can be changed or removed without a notice.\n */\nexport function useRenderer(): GriffelRenderer {\n  return React.useContext(RendererContext);\n}\n"],"names":["targetDocument","rehydrateRendererCache","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBA;;AAEG;AACH;AAEA;;AAEG;AACI;;;AAAiFA;AAAc;;;AAGhG;AACA;AACAC;AACF;AACF;AAEA;AAAiCC;;AACnC;AAEA;;;;AAIG;;AAED;AACF;;;"}

RendererContext.esm.js

-"use client";
-import { rehydrateRendererCache, createDOMRenderer } from '@griffel/core';
-import * as React from 'react';
-import { canUseDOM } from './utils/canUseDOM.esm.js';
-
-/**
- * @private
- */
-const RendererContext = /*#__PURE__*/React.createContext(/*#__PURE__*/createDOMRenderer());
-/**
- * @public
- */
-const RendererProvider = ({
-  children,
-  renderer,
-  targetDocument
-}) => {
-  React.useMemo(() => {
-    if (canUseDOM()) {
-      // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
-      // avoid double insertion of classes
-      rehydrateRendererCache(renderer, targetDocument);
-    }
-  }, [renderer, targetDocument]);
-  return /*#__PURE__*/React.createElement(RendererContext.Provider, {
-    value: renderer
-  }, children);
-};
-/**
- * Returns an instance of current makeStyles() renderer.
- *
- * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
- */
-function useRenderer() {
-  return React.useContext(RendererContext);
-}
-
-export { RendererProvider, useRenderer };
-//# sourceMappingURL=RendererContext.esm.js.map

RendererContext.esm.js.map

-{"version":3,"file":"RendererContext.esm.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["'use client';\n\nimport { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport type { GriffelRenderer } from '@griffel/core';\nimport * as React from 'react';\n\nimport { canUseDOM } from './utils/canUseDOM';\n\nexport interface RendererProviderProps {\n  /** An instance of Griffel renderer. */\n  renderer: GriffelRenderer;\n\n  /**\n   * Document used to insert CSS variables to head\n   */\n  targetDocument?: Document;\n\n  /**\n   * Content wrapped by the RendererProvider\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @private\n */\nconst RendererContext = React.createContext<GriffelRenderer>(createDOMRenderer());\n\n/**\n * @public\n */\nexport const RendererProvider: React.FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {\n  React.useMemo(() => {\n    if (canUseDOM()) {\n      // \"rehydrateCache()\" can't be called in effects as it needs to be called before any component will be rendered to\n      // avoid double insertion of classes\n      rehydrateRendererCache(renderer, targetDocument);\n    }\n  }, [renderer, targetDocument]);\n\n  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;\n};\n\n/**\n * Returns an instance of current makeStyles() renderer.\n *\n * @private Exported as \"useRenderer_unstable\" use it on own risk. Can be changed or removed without a notice.\n */\nexport function useRenderer(): GriffelRenderer {\n  return React.useContext(RendererContext);\n}\n"],"names":["targetDocument","rehydrateRendererCache","value"],"mappings":";;;;;AAuBA;;AAEG;AACH;AAEA;;AAEG;AACI;;;AAAiFA;AAAc;;;AAGhG;AACA;AACAC;AACF;AACF;AAEA;AAAiCC;;AACnC;AAEA;;;;AAIG;;AAED;AACF;;"}

renderToStyleElements.cjs.js

-"use client";
-'use strict';
-
-var core = require('@griffel/core');
-var React = require('react');
-
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === 'object' && 'default' in e) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
-
-/**
- * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
- *
- * @public
- */
-function renderToStyleElements(renderer) {
-  const stylesheets = Object.values(renderer.stylesheets)
-  // first sort: bucket by order [data-priority]
-  .sort((a, b) => {
-    return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
-  })
-  // second sort: bucket by bucket name
-  .sort((a, b) => {
-    return core.styleBucketOrdering.indexOf(a.bucketName) - core.styleBucketOrdering.indexOf(b.bucketName);
-  })
-  // third sort: media queries
-  .sort((a, b) => {
-    const mediaA = a.elementAttributes['media'];
-    const mediaB = b.elementAttributes['media'];
-    if (mediaA && mediaB) {
-      return renderer.compareMediaQueries(mediaA, mediaB);
-    }
-    if (mediaA || mediaB) {
-      return mediaA ? 1 : -1;
-    }
-    return 0;
-  });
-  return stylesheets.map(stylesheet => {
-    const cssRules = stylesheet.cssRules();
-    // don't want to create any empty style elements
-    if (!cssRules.length) {
-      return null;
-    }
-    return /*#__PURE__*/React__namespace.createElement('style', Object.assign({
-      key: stylesheet.bucketName
-    }, stylesheet.elementAttributes, {
-      'data-make-styles-rehydration': 'true',
-      dangerouslySetInnerHTML: {
-        __html: cssRules.join('')
-      }
-    }));
-  }).filter(Boolean);
-}
-
-exports.renderToStyleElements = renderToStyleElements;
-//# sourceMappingURL=renderToStyleElements.cjs.js.map

renderToStyleElements.cjs.js.map

-{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["'use client';\n\nimport { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n  const stylesheets = Object.values(renderer.stylesheets)\n    // first sort: bucket by order [data-priority]\n    .sort((a, b) => {\n      return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);\n    })\n    // second sort: bucket by bucket name\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // third sort: media queries\n    .sort((a, b) => {\n      const mediaA = a.elementAttributes['media'];\n      const mediaB = b.elementAttributes['media'];\n\n      if (mediaA && mediaB) {\n        return renderer.compareMediaQueries(mediaA, mediaB);\n      }\n\n      if (mediaA || mediaB) {\n        return mediaA ? 1 : -1;\n      }\n\n      return 0;\n    });\n\n  return stylesheets\n    .map(stylesheet => {\n      const cssRules = stylesheet.cssRules();\n      // don't want to create any empty style elements\n      if (!cssRules.length) {\n        return null;\n      }\n\n      return React.createElement('style', {\n        key: stylesheet.bucketName,\n\n        // TODO: support \"nonce\"\n        // ...renderer.styleNodeAttributes,\n        ...stylesheet.elementAttributes,\n        'data-make-styles-rehydration': 'true',\n\n        dangerouslySetInnerHTML: {\n          __html: cssRules.join(''),\n        },\n      });\n    })\n    .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["dangerouslySetInnerHTML","__html"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;AAIG;AACG;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;AACA;;AAGE;AACF;;AAGE;AACF;AAEA;AACF;AAEF;AAEI;AACA;AACA;AACE;AACF;;;;AAQE;AAEAA;AACEC;AACD;AAAA;AAEL;AAEJ;;"}

renderToStyleElements.esm.js

-"use client";
-import { styleBucketOrdering } from '@griffel/core';
-import * as React from 'react';
-
-/**
- * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
- *
- * @public
- */
-function renderToStyleElements(renderer) {
-  const stylesheets = Object.values(renderer.stylesheets)
-  // first sort: bucket by order [data-priority]
-  .sort((a, b) => {
-    return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);
-  })
-  // second sort: bucket by bucket name
-  .sort((a, b) => {
-    return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
-  })
-  // third sort: media queries
-  .sort((a, b) => {
-    const mediaA = a.elementAttributes['media'];
-    const mediaB = b.elementAttributes['media'];
-    if (mediaA && mediaB) {
-      return renderer.compareMediaQueries(mediaA, mediaB);
-    }
-    if (mediaA || mediaB) {
-      return mediaA ? 1 : -1;
-    }
-    return 0;
-  });
-  return stylesheets.map(stylesheet => {
-    const cssRules = stylesheet.cssRules();
-    // don't want to create any empty style elements
-    if (!cssRules.length) {
-      return null;
-    }
-    return /*#__PURE__*/React.createElement('style', Object.assign({
-      key: stylesheet.bucketName
-    }, stylesheet.elementAttributes, {
-      'data-make-styles-rehydration': 'true',
-      dangerouslySetInnerHTML: {
-        __html: cssRules.join('')
-      }
-    }));
-  }).filter(Boolean);
-}
-
-export { renderToStyleElements };
-//# sourceMappingURL=renderToStyleElements.esm.js.map

renderToStyleElements.esm.js.map

-{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["'use client';\n\nimport { styleBucketOrdering } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\n\n/**\n * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.\n *\n * @public\n */\nexport function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[] {\n  const stylesheets = Object.values(renderer.stylesheets)\n    // first sort: bucket by order [data-priority]\n    .sort((a, b) => {\n      return Number(a.elementAttributes['data-priority']) - Number(b.elementAttributes['data-priority']);\n    })\n    // second sort: bucket by bucket name\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // third sort: media queries\n    .sort((a, b) => {\n      const mediaA = a.elementAttributes['media'];\n      const mediaB = b.elementAttributes['media'];\n\n      if (mediaA && mediaB) {\n        return renderer.compareMediaQueries(mediaA, mediaB);\n      }\n\n      if (mediaA || mediaB) {\n        return mediaA ? 1 : -1;\n      }\n\n      return 0;\n    });\n\n  return stylesheets\n    .map(stylesheet => {\n      const cssRules = stylesheet.cssRules();\n      // don't want to create any empty style elements\n      if (!cssRules.length) {\n        return null;\n      }\n\n      return React.createElement('style', {\n        key: stylesheet.bucketName,\n\n        // TODO: support \"nonce\"\n        // ...renderer.styleNodeAttributes,\n        ...stylesheet.elementAttributes,\n        'data-make-styles-rehydration': 'true',\n\n        dangerouslySetInnerHTML: {\n          __html: cssRules.join(''),\n        },\n      });\n    })\n    .filter(Boolean) as React.ReactElement[];\n}\n"],"names":["dangerouslySetInnerHTML","__html"],"mappings":";;;;AAMA;;;;AAIG;AACG;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;;AAEF;AAAA;AAEE;AACA;;AAGE;AACF;;AAGE;AACF;AAEA;AACF;AAEF;AAEI;AACA;AACA;AACE;AACF;;;;AAQE;AAEAA;AACEC;AACD;AAAA;AAEL;AAEJ;;"}

TextDirectionContext.cjs.js

-"use client";
-'use strict';
-
-var React = require('react');
-
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === 'object' && 'default' in e) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
-
-/**
- * @private
- */
-const TextDirectionContext = /*#__PURE__*/React__namespace.createContext('ltr');
-/**
- * @public
- */
-const TextDirectionProvider = ({
-  children,
-  dir
-}) => {
-  return /*#__PURE__*/React__namespace.createElement(TextDirectionContext.Provider, {
-    value: dir
-  }, children);
-};
-/**
- * Returns current directionality of the element's text.
- *
- * @private
- */
-function useTextDirection() {
-  return React__namespace.useContext(TextDirectionContext);
-}
-
-exports.TextDirectionProvider = TextDirectionProvider;
-exports.useTextDirection = useTextDirection;
-//# sourceMappingURL=TextDirectionContext.cjs.js.map

TextDirectionContext.cjs.js.map

-{"version":3,"file":"TextDirectionContext.cjs.js","sources":["../../../packages/react/src/TextDirectionContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport interface TextDirectionProviderProps {\n  /** Indicates the directionality of the element's text. */\n  dir: 'ltr' | 'rtl';\n\n  /**\n   * Content wrapped by the TextDirectionProvider.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @private\n */\nconst TextDirectionContext = React.createContext<'ltr' | 'rtl'>('ltr');\n\n/**\n * @public\n */\nexport const TextDirectionProvider: React.FC<TextDirectionProviderProps> = ({ children, dir }) => {\n  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;\n};\n\n/**\n * Returns current directionality of the element's text.\n *\n * @private\n */\nexport function useTextDirection() {\n  return React.useContext(TextDirectionContext);\n}\n"],"names":["dir","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;AAEG;AACH;AAEA;;AAEG;AACI;;AAAiFA;AAAG;AACzF;AAAsCC;;AACxC;AAEA;;;;AAIG;;AAED;AACF;;;"}

TextDirectionContext.esm.js

-"use client";
-import * as React from 'react';
-
-/**
- * @private
- */
-const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
-/**
- * @public
- */
-const TextDirectionProvider = ({
-  children,
-  dir
-}) => {
-  return /*#__PURE__*/React.createElement(TextDirectionContext.Provider, {
-    value: dir
-  }, children);
-};
-/**
- * Returns current directionality of the element's text.
- *
- * @private
- */
-function useTextDirection() {
-  return React.useContext(TextDirectionContext);
-}
-
-export { TextDirectionProvider, useTextDirection };
-//# sourceMappingURL=TextDirectionContext.esm.js.map

TextDirectionContext.esm.js.map

-{"version":3,"file":"TextDirectionContext.esm.js","sources":["../../../packages/react/src/TextDirectionContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport interface TextDirectionProviderProps {\n  /** Indicates the directionality of the element's text. */\n  dir: 'ltr' | 'rtl';\n\n  /**\n   * Content wrapped by the TextDirectionProvider.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @private\n */\nconst TextDirectionContext = React.createContext<'ltr' | 'rtl'>('ltr');\n\n/**\n * @public\n */\nexport const TextDirectionProvider: React.FC<TextDirectionProviderProps> = ({ children, dir }) => {\n  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;\n};\n\n/**\n * Returns current directionality of the element's text.\n *\n * @private\n */\nexport function useTextDirection() {\n  return React.useContext(TextDirectionContext);\n}\n"],"names":["dir","value"],"mappings":";;;AAcA;;AAEG;AACH;AAEA;;AAEG;AACI;;AAAiFA;AAAG;AACzF;AAAsCC;;AACxC;AAEA;;;;AAIG;;AAED;AACF;;"}

useInsertionEffect.cjs.js

-"use client";
-'use strict';
-
-var React = require('react');
-
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === 'object' && 'default' in e) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
-
-const useInsertionEffect =
-// @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
-// eslint-disable-next-line no-useless-concat
-React__namespace['useInsertion' + 'Effect'] ? React__namespace['useInsertion' + 'Effect'] : undefined;
-
-exports.useInsertionEffect = useInsertionEffect;
-//# sourceMappingURL=useInsertionEffect.cjs.js.map

useInsertionEffect.cjs.js.map

-{"version":3,"file":"useInsertionEffect.cjs.js","sources":["../../../packages/react/src/useInsertionEffect.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport const useInsertionEffect: typeof React.useInsertionEffect | undefined =\n  // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions\n  // eslint-disable-next-line no-useless-concat\n  React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKE;AACA;AACAA;;"}

useInsertionEffect.esm.js

-"use client";
-import * as React from 'react';
-
-const useInsertionEffect =
-// @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions
-// eslint-disable-next-line no-useless-concat
-React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;
-
-export { useInsertionEffect };
-//# sourceMappingURL=useInsertionEffect.esm.js.map

useInsertionEffect.esm.js.map

-{"version":3,"file":"useInsertionEffect.esm.js","sources":["../../../packages/react/src/useInsertionEffect.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport const useInsertionEffect: typeof React.useInsertionEffect | undefined =\n  // @ts-expect-error Hack to make sure that `useInsertionEffect` will not cause bundling issues in older React versions\n  // eslint-disable-next-line no-useless-concat\n  React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : undefined;\n"],"names":["React"],"mappings":";;;;AAKE;AACA;AACAA;;"}

utils/canUseDOM.cjs.js

-'use strict';
-
-/**
- * Verifies if an application can use DOM.
- */
-function canUseDOM() {
-  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
-}
-
-exports.canUseDOM = canUseDOM;
-//# sourceMappingURL=canUseDOM.cjs.js.map

utils/canUseDOM.cjs.js.map

-{"version":3,"file":"canUseDOM.cjs.js","sources":["../../../../packages/react/src/utils/canUseDOM.ts"],"sourcesContent":["/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n"],"names":["canUseDOM","window","document","createElement"],"mappings":";;AAAA;;AAEG;SACaA,SAASA,GAAA;AACvB,EAAA,OAAO,OAAOC,MAAM,KAAK,WAAW,IAAI,CAAC,EAAEA,MAAM,CAACC,QAAQ,IAAID,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC;AAC9F;;;;"}

utils/canUseDOM.esm.js

-/**
- * Verifies if an application can use DOM.
- */
-function canUseDOM() {
-  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
-}
-
-export { canUseDOM };
-//# sourceMappingURL=canUseDOM.esm.js.map

utils/canUseDOM.esm.js.map

-{"version":3,"file":"canUseDOM.esm.js","sources":["../../../../packages/react/src/utils/canUseDOM.ts"],"sourcesContent":["/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\n}\n"],"names":["canUseDOM","window","document","createElement"],"mappings":"AAAA;;AAEG;SACaA,SAASA,GAAA;AACvB,EAAA,OAAO,OAAOC,MAAM,KAAK,WAAW,IAAI,CAAC,EAAEA,MAAM,CAACC,QAAQ,IAAID,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC;AAC9F;;;;"}

utils/isInsideComponent.cjs.js

-"use client";
-'use strict';
-
-var React = require('react');
-
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === 'object' && 'default' in e) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
-
-function getDispatcher() {
-  try {
-    return React__namespace[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
-  } catch (_unused) {
-    // React 19+
-  }
-  try {
-    return React__namespace[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher.current;
-  } catch (_unused2) {
-    // React 18 and below
-  }
-}
-function isInsideComponent() {
-  // React 18 always logs errors if a dispatcher is not present:
-  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
-  try {
-    const dispatcher = getDispatcher();
-    // Before any React component was rendered "dispatcher" will be "null"
-    if (dispatcher === null || dispatcher === undefined) {
-      return false;
-    }
-    // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
-    // a call on the dispatcher wont
-    dispatcher.useContext({});
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-exports.isInsideComponent = isInsideComponent;
-//# sourceMappingURL=isInsideComponent.cjs.js.map

utils/isInsideComponent.cjs.js.map

-{"version":3,"file":"isInsideComponent.cjs.js","sources":["../../../../packages/react/src/utils/isInsideComponent.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nfunction getDispatcher() {\n  try {\n    return (React as any)[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;\n  } catch {\n    // React 19+\n  }\n\n  try {\n    return (React as any)[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher\n      .current;\n  } catch {\n    // React 18 and below\n  }\n}\n\nexport function isInsideComponent() {\n  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    const dispatcher = getDispatcher();\n\n    // Before any React component was rendered \"dispatcher\" will be \"null\"\n    if (dispatcher === null || dispatcher === undefined) {\n      return false;\n    }\n\n    // A check with hooks call (i.e. call \"React.useContext()\" outside a component) will always produce errors, but\n    // a call on the dispatcher wont\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":["dispatcher"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;AAII;AAAA;;AAIA;;AAGA;AAAA;AAEJ;;AAGE;AACA;;AAEE;AAEA;AACA;AACE;AACF;AAEA;AACA;AACAA;AACA;;AAEA;AACF;AACF;;"}

utils/isInsideComponent.esm.js

-"use client";
-import * as React from 'react';
-
-function getDispatcher() {
-  try {
-    return React[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;
-  } catch (_unused) {
-    // React 19+
-  }
-  try {
-    return React[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher.current;
-  } catch (_unused2) {
-    // React 18 and below
-  }
-}
-function isInsideComponent() {
-  // React 18 always logs errors if a dispatcher is not present:
-  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
-  try {
-    const dispatcher = getDispatcher();
-    // Before any React component was rendered "dispatcher" will be "null"
-    if (dispatcher === null || dispatcher === undefined) {
-      return false;
-    }
-    // A check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
-    // a call on the dispatcher wont
-    dispatcher.useContext({});
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-export { isInsideComponent };
-//# sourceMappingURL=isInsideComponent.esm.js.map

utils/isInsideComponent.esm.js.map

-{"version":3,"file":"isInsideComponent.esm.js","sources":["../../../../packages/react/src/utils/isInsideComponent.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nfunction getDispatcher() {\n  try {\n    return (React as any)[''.concat('__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE')].H;\n  } catch {\n    // React 19+\n  }\n\n  try {\n    return (React as any)[''.concat('__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED')].ReactCurrentDispatcher\n      .current;\n  } catch {\n    // React 18 and below\n  }\n}\n\nexport function isInsideComponent() {\n  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    const dispatcher = getDispatcher();\n\n    // Before any React component was rendered \"dispatcher\" will be \"null\"\n    if (dispatcher === null || dispatcher === undefined) {\n      return false;\n    }\n\n    // A check with hooks call (i.e. call \"React.useContext()\" outside a component) will always produce errors, but\n    // a call on the dispatcher wont\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":["dispatcher"],"mappings":";;;AAIA;;;;AAII;AAAA;;AAIA;;AAGA;AAAA;AAEJ;;AAGE;AACA;;AAEE;AAEA;AACA;AACE;AACF;AAEA;AACA;AACAA;AACA;;AAEA;AACF;AACF;;"}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Is type module

Yes

NaN

Worsened metrics

Total package byte prevSize

64784

-27.03%

Number of package files

71

-20.22%

Lines of code

1023

-1.73%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• Updated

  @griffel/core@^1.20.2