@griffel/react 1.2.1 → 1.3.0

package/README.md

@@ -175,6 +175,36 @@ const useClasses = makeStyles({
 });
 ```
 
+### `shorthands.gridArea`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.gridArea('auto'),
+    ...shorthands.gridArea('first', 'second'),
+    ...shorthands.gridArea(2, 4, 'span footer'),
+    ...shorthands.gridArea(2, 4, 1, 3),
+  },
+});
+```
+
+### `shorthands.inset`
+
+```js
+import { makeStyles, shorthands } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    ...shorthands.inset('10px'),
+    ...shorthands.inset('10px', '5px'),
+    ...shorthands.inset('2px', '4px', '8px'),
+    ...shorthands.inset('1px', 0, '3px', '4px'),
+  },
+});
+```
+
 ### `shorthands.margin`
 
 ```js
@@ -335,7 +365,7 @@ const useClasses = makeStyles({
 
     '@media screen and (max-width: 992px)': { color: 'orange' },
     '@supports (display: grid)': { color: 'red' },
-    '@layer utility': { marginBottom: '1em' }
+    '@layer utility': { marginBottom: '1em' },
   },
 });
 ```

package/RendererContext.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"RendererContext.cjs.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\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/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\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  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\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    }, [renderer, targetDocument]);\n  }\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":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;;;AAGA,SAASA,SAAT;AACE,SAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,gBAAK,CAACC,aAAN,eAAqCC,sBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD;AAC/D,MAAIX,SAAS,EAAb,EAAiB;AACf;AACA;AACA;AACAK,IAAAA,gBAAK,CAACO,OAAN,CAAc;AACZ;AACA;AACAC,MAAAA,2BAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;AACD,KAJD,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;AAKD;;AAED,sBAAON,8BAAA,CAACD,eAAe,CAACU,QAAjB;AAA0BC,IAAAA,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;AACd,SAAOX,gBAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;;"}
+{"version":3,"file":"RendererContext.cjs.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\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/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\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  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\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    }, [renderer, targetDocument]);\n  }\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":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA;;;;AAGA,SAASA,SAAT;EACE,OAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,gBAAK,CAACC,aAAN,eAAqCC,sBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;EAAEC,QAAF;EAAYC,QAAZ;EAAsBC;AAAtB,CAAD;EAC/D,IAAIX,SAAS,EAAb,EAAiB;;;;IAIfK,gBAAK,CAACO,OAAN,CAAc;;;MAGZC,2BAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;KAHF,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;;;EAOF,oBAAON,8BAAA,CAACD,eAAe,CAACU,QAAjB;IAA0BC,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;EACd,OAAOX,gBAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;;"}

package/RendererContext.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"RendererContext.esm.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\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/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\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  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\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    }, [renderer, targetDocument]);\n  }\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":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;AAcA;;;;AAGA,SAASA,SAAT;AACE,SAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,KAAK,CAACC,aAAN,eAAqCC,iBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA,QAAZ;AAAsBC,EAAAA;AAAtB,CAAD;AAC/D,MAAIX,SAAS,EAAb,EAAiB;AACf;AACA;AACA;AACAK,IAAAA,KAAK,CAACO,OAAN,CAAc;AACZ;AACA;AACAC,MAAAA,sBAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;AACD,KAJD,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;AAKD;;AAED,sBAAON,mBAAA,CAACD,eAAe,CAACU,QAAjB;AAA0BC,IAAAA,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;AACd,SAAOX,KAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;"}
+{"version":3,"file":"RendererContext.esm.js","sources":["../../../packages/react/src/RendererContext.tsx"],"sourcesContent":["import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelRenderer } from '@griffel/core';\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/**\n * Verifies if an application can use DOM.\n */\nfunction canUseDOM(): boolean {\n  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);\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  if (canUseDOM()) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\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    }, [renderer, targetDocument]);\n  }\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":["canUseDOM","window","document","createElement","RendererContext","React","createContext","createDOMRenderer","RendererProvider","children","renderer","targetDocument","useMemo","rehydrateRendererCache","Provider","value","useRenderer","useContext"],"mappings":";;;AAcA;;;;AAGA,SAASA,SAAT;EACE,OAAO,OAAOC,MAAP,KAAkB,WAAlB,IAAiC,CAAC,EAAEA,MAAM,CAACC,QAAP,IAAmBD,MAAM,CAACC,QAAP,CAAgBC,aAArC,CAAzC;AACD;AAED;;;;;AAGA,MAAMC,eAAe,gBAAGC,KAAK,CAACC,aAAN,eAAqCC,iBAAiB,EAAtD,CAAxB;AAEA;;;;MAGaC,gBAAgB,GAAoC,CAAC;EAAEC,QAAF;EAAYC,QAAZ;EAAsBC;AAAtB,CAAD;EAC/D,IAAIX,SAAS,EAAb,EAAiB;;;;IAIfK,KAAK,CAACO,OAAN,CAAc;;;MAGZC,sBAAsB,CAACH,QAAD,EAAWC,cAAX,CAAtB;KAHF,EAIG,CAACD,QAAD,EAAWC,cAAX,CAJH;;;EAOF,oBAAON,mBAAA,CAACD,eAAe,CAACU,QAAjB;IAA0BC,KAAK,EAAEL;GAAjC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBO;EACd,OAAOX,KAAK,CAACY,UAAN,CAAiBb,eAAjB,CAAP;AACD;;;;"}

package/TextDirectionContext.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextDirectionContext.cjs.js","sources":["../../../packages/react/src/TextDirectionContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface TextDirectionProviderProps {\n  /** Indicates the directionality of the element's text. */\n  dir: 'ltr' | 'rtl';\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":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;AAGA,MAAMA,oBAAoB,gBAAGC,gBAAK,CAACC,aAAN,CAAmC,KAAnC,CAA7B;AAEA;;;;MAGaC,qBAAqB,GAAyC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD;AACzE,sBAAOJ,8BAAA,CAACD,oBAAoB,CAACM,QAAtB;AAA+BC,IAAAA,KAAK,EAAEF;GAAtC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBI;AACd,SAAOP,gBAAK,CAACQ,UAAN,CAAiBT,oBAAjB,CAAP;AACD;;;;;"}
+{"version":3,"file":"TextDirectionContext.cjs.js","sources":["../../../packages/react/src/TextDirectionContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface TextDirectionProviderProps {\n  /** Indicates the directionality of the element's text. */\n  dir: 'ltr' | 'rtl';\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":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;AAGA,MAAMA,oBAAoB,gBAAGC,gBAAK,CAACC,aAAN,CAAmC,KAAnC,CAA7B;AAEA;;;;MAGaC,qBAAqB,GAAyC,CAAC;EAAEC,QAAF;EAAYC;AAAZ,CAAD;EACzE,oBAAOJ,8BAAA,CAACD,oBAAoB,CAACM,QAAtB;IAA+BC,KAAK,EAAEF;GAAtC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBI;EACd,OAAOP,gBAAK,CAACQ,UAAN,CAAiBT,oBAAjB,CAAP;AACD;;;;;"}

package/TextDirectionContext.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextDirectionContext.esm.js","sources":["../../../packages/react/src/TextDirectionContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface TextDirectionProviderProps {\n  /** Indicates the directionality of the element's text. */\n  dir: 'ltr' | 'rtl';\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":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;AAOA;;;;AAGA,MAAMA,oBAAoB,gBAAGC,KAAK,CAACC,aAAN,CAAmC,KAAnC,CAA7B;AAEA;;;;MAGaC,qBAAqB,GAAyC,CAAC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAD;AACzE,sBAAOJ,mBAAA,CAACD,oBAAoB,CAACM,QAAtB;AAA+BC,IAAAA,KAAK,EAAEF;GAAtC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBI;AACd,SAAOP,KAAK,CAACQ,UAAN,CAAiBT,oBAAjB,CAAP;AACD;;;;"}
+{"version":3,"file":"TextDirectionContext.esm.js","sources":["../../../packages/react/src/TextDirectionContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface TextDirectionProviderProps {\n  /** Indicates the directionality of the element's text. */\n  dir: 'ltr' | 'rtl';\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":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;AAOA;;;;AAGA,MAAMA,oBAAoB,gBAAGC,KAAK,CAACC,aAAN,CAAmC,KAAnC,CAA7B;AAEA;;;;MAGaC,qBAAqB,GAAyC,CAAC;EAAEC,QAAF;EAAYC;AAAZ,CAAD;EACzE,oBAAOJ,mBAAA,CAACD,oBAAoB,CAACM,QAAtB;IAA+BC,KAAK,EAAEF;GAAtC,EAA4CD,QAA5C,CAAP;AACD;AAED;;;;;;SAKgBI;EACd,OAAOP,KAAK,CAACQ,UAAN,CAAiBT,oBAAjB,CAAP;AACD;;;;"}

package/__css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"__css.cjs.js","sources":["../../../packages/react/src/__css.ts"],"sourcesContent":["import { __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":["__css","classesMapBySlot","getStyles","vanillaCSS","useClasses","dir","useTextDirection"],"mappings":";;;;;;;AAKA;;;;;AAKA;;SACgBA,MAA4BC;AAC1C,QAAMC,SAAS,GAAGC,UAAU,CAACF,gBAAD,CAA5B;AAEA,SAAO,SAASG,UAAT;AACL,UAAMC,GAAG,GAAGC,qCAAgB,EAA5B;AAEA,WAAOJ,SAAS,CAAC;AAAEG,MAAAA;AAAF,KAAD,CAAhB;AACD,GAJD;AAKD;;;;"}
+{"version":3,"file":"__css.cjs.js","sources":["../../../packages/react/src/__css.ts"],"sourcesContent":["import { __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":["__css","classesMapBySlot","getStyles","vanillaCSS","useClasses","dir","useTextDirection"],"mappings":";;;;;;;AAKA;;;;;AAKA;;SACgBA,MAA4BC;EAC1C,MAAMC,SAAS,GAAGC,UAAU,CAACF,gBAAD,CAA5B;EAEA,OAAO,SAASG,UAAT;IACL,MAAMC,GAAG,GAAGC,qCAAgB,EAA5B;IAEA,OAAOJ,SAAS,CAAC;MAAEG;KAAH,CAAhB;GAHF;AAKD;;;;"}

package/__css.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"__css.esm.js","sources":["../../../packages/react/src/__css.ts"],"sourcesContent":["import { __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":["__css","classesMapBySlot","getStyles","vanillaCSS","useClasses","dir","useTextDirection"],"mappings":";;;AAKA;;;;;AAKA;;SACgBA,MAA4BC;AAC1C,QAAMC,SAAS,GAAGC,OAAU,CAACF,gBAAD,CAA5B;AAEA,SAAO,SAASG,UAAT;AACL,UAAMC,GAAG,GAAGC,gBAAgB,EAA5B;AAEA,WAAOJ,SAAS,CAAC;AAAEG,MAAAA;AAAF,KAAD,CAAhB;AACD,GAJD;AAKD;;;;"}
+{"version":3,"file":"__css.esm.js","sources":["../../../packages/react/src/__css.ts"],"sourcesContent":["import { __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":["__css","classesMapBySlot","getStyles","vanillaCSS","useClasses","dir","useTextDirection"],"mappings":";;;AAKA;;;;;AAKA;;SACgBA,MAA4BC;EAC1C,MAAMC,SAAS,GAAGC,OAAU,CAACF,gBAAD,CAA5B;EAEA,OAAO,SAASG,UAAT;IACL,MAAMC,GAAG,GAAGC,gBAAgB,EAA5B;IAEA,OAAOJ,SAAS,CAAC;MAAEG;KAAH,CAAhB;GAHF;AAKD;;;;"}

package/__styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"__styles.cjs.js","sources":["../../../packages/react/src/__styles.ts"],"sourcesContent":["import { __styles as vanillaStyles } from '@griffel/core';\nimport type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';\n\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);\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":["__styles","classesMapBySlot","cssRules","getStyles","vanillaStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;AAMA;;;;;AAKA;;SACgBA,SACdC,kBACAC;AAEA,QAAMC,SAAS,GAAGC,aAAa,CAACH,gBAAD,EAAmBC,QAAnB,CAA/B;AAEA,SAAO,SAASG,UAAT;AACL,UAAMC,GAAG,GAAGC,qCAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,2BAAW,EAA5B;AAEA,WAAON,SAAS,CAAC;AAAEG,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}
+{"version":3,"file":"__styles.cjs.js","sources":["../../../packages/react/src/__styles.ts"],"sourcesContent":["import { __styles as vanillaStyles } from '@griffel/core';\nimport type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';\n\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);\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":["__styles","classesMapBySlot","cssRules","getStyles","vanillaStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;AAMA;;;;;AAKA;;SACgBA,SACdC,kBACAC;EAEA,MAAMC,SAAS,GAAGC,aAAa,CAACH,gBAAD,EAAmBC,QAAnB,CAA/B;EAEA,OAAO,SAASG,UAAT;IACL,MAAMC,GAAG,GAAGC,qCAAgB,EAA5B;IACA,MAAMC,QAAQ,GAAGC,2BAAW,EAA5B;IAEA,OAAON,SAAS,CAAC;MAAEG,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}

package/__styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"__styles.esm.js","sources":["../../../packages/react/src/__styles.ts"],"sourcesContent":["import { __styles as vanillaStyles } from '@griffel/core';\nimport type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';\n\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);\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":["__styles","classesMapBySlot","cssRules","getStyles","vanillaStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;AAMA;;;;;AAKA;;SACgBA,SACdC,kBACAC;AAEA,QAAMC,SAAS,GAAGC,UAAa,CAACH,gBAAD,EAAmBC,QAAnB,CAA/B;AAEA,SAAO,SAASG,UAAT;AACL,UAAMC,GAAG,GAAGC,gBAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,WAAW,EAA5B;AAEA,WAAON,SAAS,CAAC;AAAEG,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}
+{"version":3,"file":"__styles.esm.js","sources":["../../../packages/react/src/__styles.ts"],"sourcesContent":["import { __styles as vanillaStyles } from '@griffel/core';\nimport type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';\n\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);\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":["__styles","classesMapBySlot","cssRules","getStyles","vanillaStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;AAMA;;;;;AAKA;;SACgBA,SACdC,kBACAC;EAEA,MAAMC,SAAS,GAAGC,UAAa,CAACH,gBAAD,EAAmBC,QAAnB,CAA/B;EAEA,OAAO,SAASG,UAAT;IACL,MAAMC,GAAG,GAAGC,gBAAgB,EAA5B;IACA,MAAMC,QAAQ,GAAGC,WAAW,EAA5B;IAEA,OAAON,SAAS,CAAC;MAAEG,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}

package/index.d.ts

@@ -1,5 +1,5 @@
 export { shorthands, mergeClasses, createDOMRenderer } from '@griffel/core';
-export type { GriffelStyle } from '@griffel/core';
+export type { GriffelStyle, CreateDOMRendererOptions, GriffelRenderer } from '@griffel/core';
 export { makeStyles } from './makeStyles';
 export { makeStaticStyles } from './makeStaticStyles';
 export { renderToStyleElements } from './renderToStyleElements';

package/makeStaticStyles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"makeStaticStyles.cjs.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n  const getStyles = vanillaMakeStaticStyles(styles);\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":["makeStaticStyles","styles","getStyles","vanillaMakeStaticStyles","process","env","NODE_ENV","useStaticStyles","renderer","useRenderer","options"],"mappings":";;;;;;;SAKgBA,iBAAiBC;AAC/B,QAAMC,SAAS,GAAGC,qBAAuB,CAACF,MAAD,CAAzC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,MAA7B,EAAqC;AACnC;AACA,WAAO,QAAP;AACD;;AAED,SAAO,SAASC,eAAT;AACL,UAAMC,QAAQ,GAAGC,2BAAW,EAA5B;AACA,UAAMC,OAAO,GAA4B;AAAEF,MAAAA;AAAF,KAAzC;AAEA,WAAON,SAAS,CAACQ,OAAD,CAAhB;AACD,GALD;AAMD;;;;"}
+{"version":3,"file":"makeStaticStyles.cjs.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n  const getStyles = vanillaMakeStaticStyles(styles);\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":["makeStaticStyles","styles","getStyles","vanillaMakeStaticStyles","process","env","NODE_ENV","useStaticStyles","renderer","useRenderer","options"],"mappings":";;;;;;;SAKgBA,iBAAiBC;EAC/B,MAAMC,SAAS,GAAGC,qBAAuB,CAACF,MAAD,CAAzC;;EAEA,IAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,MAA7B,EAAqC;;IAEnC,OAAO,QAAP;;;EAGF,OAAO,SAASC,eAAT;IACL,MAAMC,QAAQ,GAAGC,2BAAW,EAA5B;IACA,MAAMC,OAAO,GAA4B;MAAEF;KAA3C;IAEA,OAAON,SAAS,CAACQ,OAAD,CAAhB;GAJF;AAMD;;;;"}

package/makeStaticStyles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"makeStaticStyles.esm.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n  const getStyles = vanillaMakeStaticStyles(styles);\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":["makeStaticStyles","styles","getStyles","vanillaMakeStaticStyles","process","env","NODE_ENV","useStaticStyles","renderer","useRenderer","options"],"mappings":";;;SAKgBA,iBAAiBC;AAC/B,QAAMC,SAAS,GAAGC,kBAAuB,CAACF,MAAD,CAAzC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,MAA7B,EAAqC;AACnC;AACA,WAAO,QAAP;AACD;;AAED,SAAO,SAASC,eAAT;AACL,UAAMC,QAAQ,GAAGC,WAAW,EAA5B;AACA,UAAMC,OAAO,GAA4B;AAAEF,MAAAA;AAAF,KAAzC;AAEA,WAAON,SAAS,CAACQ,OAAD,CAAhB;AACD,GALD;AAMD;;;;"}
+{"version":3,"file":"makeStaticStyles.esm.js","sources":["../../../packages/react/src/makeStaticStyles.ts"],"sourcesContent":["import { makeStaticStyles as vanillaMakeStaticStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport type { GriffelStaticStyles, MakeStaticStylesOptions } from '@griffel/core';\n\nexport function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]) {\n  const getStyles = vanillaMakeStaticStyles(styles);\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":["makeStaticStyles","styles","getStyles","vanillaMakeStaticStyles","process","env","NODE_ENV","useStaticStyles","renderer","useRenderer","options"],"mappings":";;;SAKgBA,iBAAiBC;EAC/B,MAAMC,SAAS,GAAGC,kBAAuB,CAACF,MAAD,CAAzC;;EAEA,IAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,MAA7B,EAAqC;;IAEnC,OAAO,QAAP;;;EAGF,OAAO,SAASC,eAAT;IACL,MAAMC,QAAQ,GAAGC,WAAW,EAA5B;IACA,MAAMC,OAAO,GAA4B;MAAEF;KAA3C;IAEA,OAAON,SAAS,CAACQ,OAAD,CAAhB;GAJF;AAMD;;;;"}

package/makeStyles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"makeStyles.cjs.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction 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    // @ts-expect-error \"SECRET_INTERNALS\" are not typed\n    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;\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 don't\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\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":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAASA,iBAAT;AACE;AACA;AACA,MAAI;AACF;AACA,UAAMC,UAAU,GAAGC,gBAAK,CAACC,kDAAN,CAAyDC,sBAAzD,CAAgFC,OAAnG,CAFE;;AAKF,QAAIJ,UAAU,KAAK,IAAf,IAAuBA,UAAU,KAAKK,SAA1C,EAAqD;AACnD,aAAO,KAAP;AACD,KAPC;AAUF;;;AACAL,IAAAA,UAAU,CAACM,UAAX,CAAsB,EAAtB;AACA,WAAO,IAAP;AACD,GAbD,CAaE,OAAOC,CAAP,EAAU;AACV,WAAO,KAAP;AACD;AACF;;SAEeC,WAA0CC;AACxD,QAAMC,SAAS,GAAGC,eAAiB,CAACF,aAAD,CAAnC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAIf,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIgB,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;AAMD;AACF;;AAED,SAAO,SAASC,UAAT;AACL,UAAMC,GAAG,GAAGC,qCAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,2BAAW,EAA5B;AAEA,WAAOX,SAAS,CAAC;AAAEQ,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}
+{"version":3,"file":"makeStyles.cjs.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction 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    // @ts-expect-error \"SECRET_INTERNALS\" are not typed\n    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;\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 don't\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\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":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,SAASA,iBAAT;;;EAGE,IAAI;;IAEF,MAAMC,UAAU,GAAGC,gBAAK,CAACC,kDAAN,CAAyDC,sBAAzD,CAAgFC,OAAnG,CAFE;;IAKF,IAAIJ,UAAU,KAAK,IAAf,IAAuBA,UAAU,KAAKK,SAA1C,EAAqD;MACnD,OAAO,KAAP;KANA;;;;IAWFL,UAAU,CAACM,UAAX,CAAsB,EAAtB;IACA,OAAO,IAAP;GAZF,CAaE,OAAOC,CAAP,EAAU;IACV,OAAO,KAAP;;AAEH;;SAEeC,WAA0CC;EACxD,MAAMC,SAAS,GAAGC,eAAiB,CAACF,aAAD,CAAnC;;EAEA,IAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAIf,iBAAiB,EAArB,EAAyB;MACvB,MAAM,IAAIgB,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;;;;EASJ,OAAO,SAASC,UAAT;IACL,MAAMC,GAAG,GAAGC,qCAAgB,EAA5B;IACA,MAAMC,QAAQ,GAAGC,2BAAW,EAA5B;IAEA,OAAOX,SAAS,CAAC;MAAEQ,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}

package/makeStyles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"makeStyles.esm.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction 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    // @ts-expect-error \"SECRET_INTERNALS\" are not typed\n    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;\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 don't\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\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":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;AAOA,SAASA,iBAAT;AACE;AACA;AACA,MAAI;AACF;AACA,UAAMC,UAAU,GAAGC,KAAK,CAACC,kDAAN,CAAyDC,sBAAzD,CAAgFC,OAAnG,CAFE;;AAKF,QAAIJ,UAAU,KAAK,IAAf,IAAuBA,UAAU,KAAKK,SAA1C,EAAqD;AACnD,aAAO,KAAP;AACD,KAPC;AAUF;;;AACAL,IAAAA,UAAU,CAACM,UAAX,CAAsB,EAAtB;AACA,WAAO,IAAP;AACD,GAbD,CAaE,OAAOC,CAAP,EAAU;AACV,WAAO,KAAP;AACD;AACF;;SAEeC,WAA0CC;AACxD,QAAMC,SAAS,GAAGC,YAAiB,CAACF,aAAD,CAAnC;;AAEA,MAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;AACzC,QAAIf,iBAAiB,EAArB,EAAyB;AACvB,YAAM,IAAIgB,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;AAMD;AACF;;AAED,SAAO,SAASC,UAAT;AACL,UAAMC,GAAG,GAAGC,gBAAgB,EAA5B;AACA,UAAMC,QAAQ,GAAGC,WAAW,EAA5B;AAEA,WAAOX,SAAS,CAAC;AAAEQ,MAAAA,GAAF;AAAOE,MAAAA;AAAP,KAAD,CAAhB;AACD,GALD;AAMD;;;;"}
+{"version":3,"file":"makeStyles.esm.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport * as React from 'react';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nfunction 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    // @ts-expect-error \"SECRET_INTERNALS\" are not typed\n    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;\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 don't\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n\nexport function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>) {\n  const getStyles = vanillaMakeStyles(stylesBySlots);\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":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e","makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;AAOA,SAASA,iBAAT;;;EAGE,IAAI;;IAEF,MAAMC,UAAU,GAAGC,KAAK,CAACC,kDAAN,CAAyDC,sBAAzD,CAAgFC,OAAnG,CAFE;;IAKF,IAAIJ,UAAU,KAAK,IAAf,IAAuBA,UAAU,KAAKK,SAA1C,EAAqD;MACnD,OAAO,KAAP;KANA;;;;IAWFL,UAAU,CAACM,UAAX,CAAsB,EAAtB;IACA,OAAO,IAAP;GAZF,CAaE,OAAOC,CAAP,EAAU;IACV,OAAO,KAAP;;AAEH;;SAEeC,WAA0CC;EACxD,MAAMC,SAAS,GAAGC,YAAiB,CAACF,aAAD,CAAnC;;EAEA,IAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAIf,iBAAiB,EAArB,EAAyB;MACvB,MAAM,IAAIgB,KAAJ,CACJ,CACE,oEADF,EAEE,4EAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;;;;EASJ,OAAO,SAASC,UAAT;IACL,MAAMC,GAAG,GAAGC,gBAAgB,EAA5B;IACA,MAAMC,QAAQ,GAAGC,WAAW,EAA5B;IAEA,OAAOX,SAAS,CAAC;MAAEQ,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@griffel/react",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "React implementation of Atomic CSS-in-JS",
   "license": "MIT",
   "repository": {
@@ -9,7 +9,7 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@griffel/core": "^1.4.1",
+    "@griffel/core": "^1.5.1",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/renderToStyleElements.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { 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 names\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // second 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":["renderToStyleElements","renderer","stylesheets","Object","values","sort","a","b","styleBucketOrdering","indexOf","bucketName","mediaA","elementAttributes","mediaB","compareMediaQueries","map","stylesheet","cssRules","length","React","createElement","key","dangerouslySetInnerHTML","__html","join","filter","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;SAKgBA,sBAAsBC;AACpC,QAAMC,WAAW,GAAGC,MAAM,CAACC,MAAP,CAAcH,QAAQ,CAACC,WAAvB;AAAA,GAEjBG,IAFiB,CAEZ,CAACC,CAAD,EAAIC,CAAJ;AACJ,WAAOC,wBAAmB,CAACC,OAApB,CAA4BH,CAAC,CAACI,UAA9B,IAA4CF,wBAAmB,CAACC,OAApB,CAA4BF,CAAC,CAACG,UAA9B,CAAnD;AACD,GAJiB;AAAA,GAMjBL,IANiB,CAMZ,CAACC,CAAD,EAAIC,CAAJ;AACJ,UAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAF,CAAoB,OAApB,CAAf;AACA,UAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAF,CAAoB,OAApB,CAAf;;AAEA,QAAID,MAAM,IAAIE,MAAd,EAAsB;AACpB,aAAOZ,QAAQ,CAACa,mBAAT,CAA6BH,MAA7B,EAAqCE,MAArC,CAAP;AACD;;AAED,QAAIF,MAAM,IAAIE,MAAd,EAAsB;AACpB,aAAOF,MAAM,GAAG,CAAH,GAAO,CAAC,CAArB;AACD;;AAED,WAAO,CAAP;AACD,GAnBiB,CAApB;AAqBA,SAAOT,WAAW,CACfa,GADI,CACAC,UAAU;AACb,UAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAX,EAAjB;;AAEA,QAAI,CAACA,QAAQ,CAACC,MAAd,EAAsB;AACpB,aAAO,IAAP;AACD;;AAED,wBAAOC,gBAAK,CAACC,aAAN,CAAoB,OAApB;AACLC,MAAAA,GAAG,EAAEL,UAAU,CAACN;OAIbM,UAAU,CAACJ;AACd,sCAAgC;AAEhCU,MAAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,EAAEN,QAAQ,CAACO,IAAT,CAAc,EAAd;AADe;MARpB,CAAP;AAYD,GApBI,EAqBJC,MArBI,CAqBGC,OArBH,CAAP;AAsBD;;;;"}
+{"version":3,"file":"renderToStyleElements.cjs.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { 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 names\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // second 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":["renderToStyleElements","renderer","stylesheets","Object","values","sort","a","b","styleBucketOrdering","indexOf","bucketName","mediaA","elementAttributes","mediaB","compareMediaQueries","map","stylesheet","cssRules","length","React","createElement","key","dangerouslySetInnerHTML","__html","join","filter","Boolean"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;;;SAKgBA,sBAAsBC;EACpC,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAP,CAAcH,QAAQ,CAACC,WAAvB;GAEjBG,IAFiB,CAEZ,CAACC,CAAD,EAAIC,CAAJ;IACJ,OAAOC,wBAAmB,CAACC,OAApB,CAA4BH,CAAC,CAACI,UAA9B,IAA4CF,wBAAmB,CAACC,OAApB,CAA4BF,CAAC,CAACG,UAA9B,CAAnD;GAHgB;GAMjBL,IANiB,CAMZ,CAACC,CAAD,EAAIC,CAAJ;IACJ,MAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAF,CAAoB,OAApB,CAAf;IACA,MAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAF,CAAoB,OAApB,CAAf;;IAEA,IAAID,MAAM,IAAIE,MAAd,EAAsB;MACpB,OAAOZ,QAAQ,CAACa,mBAAT,CAA6BH,MAA7B,EAAqCE,MAArC,CAAP;;;IAGF,IAAIF,MAAM,IAAIE,MAAd,EAAsB;MACpB,OAAOF,MAAM,GAAG,CAAH,GAAO,CAAC,CAArB;;;IAGF,OAAO,CAAP;GAlBgB,CAApB;EAqBA,OAAOT,WAAW,CACfa,GADI,CACAC,UAAU;IACb,MAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAX,EAAjB;;IAEA,IAAI,CAACA,QAAQ,CAACC,MAAd,EAAsB;MACpB,OAAO,IAAP;;;IAGF,oBAAOC,gBAAK,CAACC,aAAN,CAAoB,OAApB;MACLC,GAAG,EAAEL,UAAU,CAACN;OAIbM,UAAU,CAACJ;MACd,gCAAgC;MAEhCU,uBAAuB,EAAE;QACvBC,MAAM,EAAEN,QAAQ,CAACO,IAAT,CAAc,EAAd;;MATL,CAAP;GARG,EAqBJC,MArBI,CAqBGC,OArBH,CAAP;AAsBD;;;;"}

package/renderToStyleElements.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { 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 names\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // second 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":["renderToStyleElements","renderer","stylesheets","Object","values","sort","a","b","styleBucketOrdering","indexOf","bucketName","mediaA","elementAttributes","mediaB","compareMediaQueries","map","stylesheet","cssRules","length","React","createElement","key","dangerouslySetInnerHTML","__html","join","filter","Boolean"],"mappings":";;;AAIA;;;;;;SAKgBA,sBAAsBC;AACpC,QAAMC,WAAW,GAAGC,MAAM,CAACC,MAAP,CAAcH,QAAQ,CAACC,WAAvB;AAAA,GAEjBG,IAFiB,CAEZ,CAACC,CAAD,EAAIC,CAAJ;AACJ,WAAOC,mBAAmB,CAACC,OAApB,CAA4BH,CAAC,CAACI,UAA9B,IAA4CF,mBAAmB,CAACC,OAApB,CAA4BF,CAAC,CAACG,UAA9B,CAAnD;AACD,GAJiB;AAAA,GAMjBL,IANiB,CAMZ,CAACC,CAAD,EAAIC,CAAJ;AACJ,UAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAF,CAAoB,OAApB,CAAf;AACA,UAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAF,CAAoB,OAApB,CAAf;;AAEA,QAAID,MAAM,IAAIE,MAAd,EAAsB;AACpB,aAAOZ,QAAQ,CAACa,mBAAT,CAA6BH,MAA7B,EAAqCE,MAArC,CAAP;AACD;;AAED,QAAIF,MAAM,IAAIE,MAAd,EAAsB;AACpB,aAAOF,MAAM,GAAG,CAAH,GAAO,CAAC,CAArB;AACD;;AAED,WAAO,CAAP;AACD,GAnBiB,CAApB;AAqBA,SAAOT,WAAW,CACfa,GADI,CACAC,UAAU;AACb,UAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAX,EAAjB;;AAEA,QAAI,CAACA,QAAQ,CAACC,MAAd,EAAsB;AACpB,aAAO,IAAP;AACD;;AAED,wBAAOC,KAAK,CAACC,aAAN,CAAoB,OAApB;AACLC,MAAAA,GAAG,EAAEL,UAAU,CAACN;OAIbM,UAAU,CAACJ;AACd,sCAAgC;AAEhCU,MAAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,EAAEN,QAAQ,CAACO,IAAT,CAAc,EAAd;AADe;MARpB,CAAP;AAYD,GApBI,EAqBJC,MArBI,CAqBGC,OArBH,CAAP;AAsBD;;;;"}
+{"version":3,"file":"renderToStyleElements.esm.js","sources":["../../../packages/react/src/renderToStyleElements.ts"],"sourcesContent":["import { 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 names\n    .sort((a, b) => {\n      return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);\n    })\n    // second 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":["renderToStyleElements","renderer","stylesheets","Object","values","sort","a","b","styleBucketOrdering","indexOf","bucketName","mediaA","elementAttributes","mediaB","compareMediaQueries","map","stylesheet","cssRules","length","React","createElement","key","dangerouslySetInnerHTML","__html","join","filter","Boolean"],"mappings":";;;AAIA;;;;;;SAKgBA,sBAAsBC;EACpC,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAP,CAAcH,QAAQ,CAACC,WAAvB;GAEjBG,IAFiB,CAEZ,CAACC,CAAD,EAAIC,CAAJ;IACJ,OAAOC,mBAAmB,CAACC,OAApB,CAA4BH,CAAC,CAACI,UAA9B,IAA4CF,mBAAmB,CAACC,OAApB,CAA4BF,CAAC,CAACG,UAA9B,CAAnD;GAHgB;GAMjBL,IANiB,CAMZ,CAACC,CAAD,EAAIC,CAAJ;IACJ,MAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAF,CAAoB,OAApB,CAAf;IACA,MAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAF,CAAoB,OAApB,CAAf;;IAEA,IAAID,MAAM,IAAIE,MAAd,EAAsB;MACpB,OAAOZ,QAAQ,CAACa,mBAAT,CAA6BH,MAA7B,EAAqCE,MAArC,CAAP;;;IAGF,IAAIF,MAAM,IAAIE,MAAd,EAAsB;MACpB,OAAOF,MAAM,GAAG,CAAH,GAAO,CAAC,CAArB;;;IAGF,OAAO,CAAP;GAlBgB,CAApB;EAqBA,OAAOT,WAAW,CACfa,GADI,CACAC,UAAU;IACb,MAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAX,EAAjB;;IAEA,IAAI,CAACA,QAAQ,CAACC,MAAd,EAAsB;MACpB,OAAO,IAAP;;;IAGF,oBAAOC,KAAK,CAACC,aAAN,CAAoB,OAApB;MACLC,GAAG,EAAEL,UAAU,CAACN;OAIbM,UAAU,CAACJ;MACd,gCAAgC;MAEhCU,uBAAuB,EAAE;QACvBC,MAAM,EAAEN,QAAQ,CAACO,IAAT,CAAc,EAAd;;MATL,CAAP;GARG,EAqBJC,MArBI,CAqBGC,OArBH,CAAP;AAsBD;;;;"}