@griffel/react 1.6.1 → 1.6.2

package/src/TextDirectionContext.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 export interface TextDirectionProviderProps {
     /** Indicates the directionality of the element's text. */
     dir: 'ltr' | 'rtl';
@@ -16,4 +16,4 @@ export declare const TextDirectionProvider: React.FC<TextDirectionProviderProps>
  *
  * @private
  */
-export declare function useTextDirection(): "ltr" | "rtl";
+export declare function useTextDirection(): "rtl" | "ltr";

package/src/TextDirectionContext.js

@@ -0,0 +1,21 @@
+'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

package/src/TextDirectionContext.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/__css.js

@@ -0,0 +1,17 @@
+'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

package/src/__css.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/__resetCSS.js

@@ -0,0 +1,17 @@
+'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

package/src/__resetCSS.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/__resetStyles.js

@@ -0,0 +1,20 @@
+'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

package/src/__resetStyles.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/__staticCSS.js

@@ -0,0 +1,15 @@
+'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

package/src/__staticCSS.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/__staticStyles.js

@@ -0,0 +1,18 @@
+'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

package/src/__staticStyles.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/__styles.js

@@ -0,0 +1,20 @@
+'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

package/src/__styles.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/index.d.ts

@@ -1,14 +1,14 @@
 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';

package/src/index.js

@@ -0,0 +1,16 @@
+'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

package/src/index.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/insertionFactory.js

@@ -0,0 +1,21 @@
+'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

package/src/insertionFactory.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/makeResetStyles.js

@@ -0,0 +1,23 @@
+'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

package/src/makeResetStyles.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/makeStaticStyles.js

@@ -0,0 +1,17 @@
+'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

package/src/makeStaticStyles.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/makeStyles.js

@@ -0,0 +1,23 @@
+'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

package/src/makeStyles.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/renderToStyleElements.d.ts

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type { ReactElement } from 'react';
 import type { GriffelRenderer } from '@griffel/core';
 /**
  * This method returns a list of <style> React elements with the rendered CSS. This is useful for Server-Side rendering.
  *
  * @public
  */
-export declare function renderToStyleElements(renderer: GriffelRenderer): React.ReactElement[];
+export declare function renderToStyleElements(renderer: GriffelRenderer): ReactElement[];

package/src/renderToStyleElements.js

@@ -0,0 +1,51 @@
+'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

package/src/renderToStyleElements.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/useInsertionEffect.d.ts

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

package/{useInsertionEffect.esm.js → src/useInsertionEffect.js}

@@ -1,10 +1,7 @@
-"use client";
-import * as React from 'react';
-
-const useInsertionEffect =
+'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;
-
-export { useInsertionEffect };
-//# sourceMappingURL=useInsertionEffect.esm.js.map
+//# sourceMappingURL=useInsertionEffect.js.map

package/src/useInsertionEffect.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/utils/canUseDOM.js

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

package/src/utils/canUseDOM.js.map

@@ -0,0 +1 @@
+{"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"}

package/src/utils/isInsideComponent.js

@@ -0,0 +1,36 @@
+'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

package/src/utils/isInsideComponent.js.map

@@ -0,0 +1 @@
+{"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/RendererContext.cjs.js

@@ -1,62 +0,0 @@
-"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

package/RendererContext.cjs.js.map

@@ -1 +0,0 @@
-{"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;;;"}

package/RendererContext.esm.js

@@ -1,39 +0,0 @@
-"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

package/RendererContext.esm.js.map

@@ -1 +0,0 @@
-{"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;;"}