@griffel/react 1.5.0 → 1.5.2

package/README.md

@@ -10,11 +10,13 @@ A package with wrappers and APIs to be used with React.js.
   - [Pseudo & class selectors, at-rules, global styles](#pseudo--class-selectors-at-rules-global-styles)
   - [Keyframes (animations)](#keyframes-animations)
   - [CSS Fallback Properties](#css-fallback-properties)
+  - [RTL support](#rtl-support)
 - [`mergeClasses()`](#mergeclasses)
 - [`makeStaticStyles()`](#makestaticstyles)
 - [`makeResetStyles()`](#makeresetstyles)
 - [`createDOMRenderer()`, `RendererProvider`](#createdomrenderer-rendererprovider)
   - [styleElementAttributes](#styleelementattributes)
+- [`TextDirectionProvider`](#textdirectionprovider)
 - [Shorthands](#shorthands)
   - [`shorthands.border`](#shorthandsborder)
   - [`shorthands.borderBottom`, `shorthands.borderTop`, `shorthands.borderLeft`, `shorthands.borderRight`](#shorthandsborderbottom-shorthandsbordertop-shorthandsborderleft-shorthandsborderright)
@@ -133,8 +135,6 @@ const useClasses = makeStyles({
 });
 ```
 
-
-
 ### CSS Fallback Properties
 
 Any CSS property accepts an array of values which are all added to the styles.
@@ -150,6 +150,54 @@ const useClasses = makeStyles({
 });
 ```
 
+### RTL support
+
+Griffel uses [rtl-css-js](https://github.com/kentcdodds/rtl-css-js) to perform automatic flipping of properties and values in Right-To-Left (RTL) text direction defined by `TextDirectionProvider`.
+
+```js
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    paddingLeft: '10px',
+  },
+});
+```
+
+⬇️⬇️⬇️
+
+```css
+/* Will be applied in LTR */
+.frdkuqy {
+  padding-left: 10px;
+}
+/* Will be applied in RTL */
+.f81rol6 {
+  padding-right: 10px;
+}
+```
+
+You can also control which rules you don't want to flip by adding a `/* @noflip */` CSS comment to your rule:
+
+```js
+import { makeStyles } from '@griffel/react';
+
+const useClasses = makeStyles({
+  root: {
+    paddingLeft: '10px /* @noflip */',
+  },
+});
+```
+
+⬇️⬇️⬇️
+
+```css
+/* Will be applied in LTR & RTL */
+.f6x5cb6 {
+  padding-left: 10px;
+}
+```
+
 ## `mergeClasses()`
 
 > 💡 **It is not possible to simply concatenate classes returned by `useClasses()`.**
@@ -341,6 +389,29 @@ const renderer = createDOMRenderer(targetDocument, {
 });
 ```
 
+## `TextDirectionProvider`
+
+`TextDirectionProvider` is used to determine the text direction for style computation. The default text direction is Left-To-Right (LTR).
+
+```jsx
+import { TextDirectionProvider } from '@griffel/react';
+
+function App() {
+  return (
+    <>
+      <TextDirectionProvider>
+        {/* Inner components will have styles for LTR */}
+        {/* ... */}
+      </TextDirectionProvider>
+      <TextDirectionProvider dir="rtl">
+        {/* Inner components will have styles for RTL */}
+        {/* ... */}
+      </TextDirectionProvider>
+    </>
+  );
+}
+```
+
 ## Shorthands
 
 `shorthands` provides a set of functions to mimic [CSS shorthands](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties) and improve developer experience as [CSS shorthands are not supported](https://griffel.js.org/react/guides/limitations#css-shorthands-are-not-supported) by Griffel.

package/RendererContext.cjs.js

@@ -28,20 +28,16 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 /**
  * Verifies if an application can use DOM.
  */
-
 function canUseDOM() {
   return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
 }
 /**
  * @private
  */
-
-
 const RendererContext = /*#__PURE__*/React__namespace.createContext( /*#__PURE__*/core.createDOMRenderer());
 /**
  * @public
  */
-
 const RendererProvider = ({
   children,
   renderer,
@@ -57,7 +53,6 @@ const RendererProvider = ({
       core.rehydrateRendererCache(renderer, targetDocument);
     }, [renderer, targetDocument]);
   }
-
   return /*#__PURE__*/React__namespace.createElement(RendererContext.Provider, {
     value: renderer
   }, children);
@@ -67,7 +62,6 @@ const RendererProvider = ({
  *
  * @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);
 }

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   * Content wrapped by the RendererProvider\n   */\n  children: React.ReactNode;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA;;;;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;;;;;"}
+{"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   * Content wrapped by the RendererProvider\n   */\n  children: React.ReactNode;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA;;;AAGA,SAASA,SAAS;EAChB,OAAO,OAAOC,MAAM,KAAK,WAAW,IAAI,CAAC,EAAEA,MAAM,CAACC,QAAQ,IAAID,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC;AAC9F;AAEA;;;AAGA,MAAMC,eAAe,gBAAGC,gBAAK,CAACC,aAAa,eAAkBC,sBAAiB,EAAE,CAAC;AAEjF;;;MAGaC,gBAAgB,GAAoC,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC;CAAgB;EACtG,IAAIX,SAAS,EAAE,EAAE;;;;IAIfK,gBAAK,CAACO,OAAO,CAAC;;;MAGZC,2BAAsB,CAACH,QAAQ,EAAEC,cAAc,CAAC;KACjD,EAAE,CAACD,QAAQ,EAAEC,cAAc,CAAC,CAAC;;EAGhC,oBAAON,+BAACD,eAAe,CAACU,QAAQ;IAACC,KAAK,EAAEL;KAAWD,QAAQ,CAA4B;AACzF;AAEA;;;;;SAKgBO,WAAW;EACzB,OAAOX,gBAAK,CAACY,UAAU,CAACb,eAAe,CAAC;AAC1C;;;;;"}

package/RendererContext.esm.js

@@ -4,20 +4,16 @@ import * as React from 'react';
 /**
  * Verifies if an application can use DOM.
  */
-
 function canUseDOM() {
   return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
 }
 /**
  * @private
  */
-
-
 const RendererContext = /*#__PURE__*/React.createContext( /*#__PURE__*/createDOMRenderer());
 /**
  * @public
  */
-
 const RendererProvider = ({
   children,
   renderer,
@@ -33,7 +29,6 @@ const RendererProvider = ({
       rehydrateRendererCache(renderer, targetDocument);
     }, [renderer, targetDocument]);
   }
-
   return /*#__PURE__*/React.createElement(RendererContext.Provider, {
     value: renderer
   }, children);
@@ -43,7 +38,6 @@ const RendererProvider = ({
  *
  * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
  */
-
 function useRenderer() {
   return React.useContext(RendererContext);
 }

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   * Content wrapped by the RendererProvider\n   */\n  children: React.ReactNode;\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":";;;AAmBA;;;;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;;;;"}
+{"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   * Content wrapped by the RendererProvider\n   */\n  children: React.ReactNode;\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":";;;AAmBA;;;AAGA,SAASA,SAAS;EAChB,OAAO,OAAOC,MAAM,KAAK,WAAW,IAAI,CAAC,EAAEA,MAAM,CAACC,QAAQ,IAAID,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC;AAC9F;AAEA;;;AAGA,MAAMC,eAAe,gBAAGC,KAAK,CAACC,aAAa,eAAkBC,iBAAiB,EAAE,CAAC;AAEjF;;;MAGaC,gBAAgB,GAAoC,CAAC;EAAEC,QAAQ;EAAEC,QAAQ;EAAEC;CAAgB;EACtG,IAAIX,SAAS,EAAE,EAAE;;;;IAIfK,KAAK,CAACO,OAAO,CAAC;;;MAGZC,sBAAsB,CAACH,QAAQ,EAAEC,cAAc,CAAC;KACjD,EAAE,CAACD,QAAQ,EAAEC,cAAc,CAAC,CAAC;;EAGhC,oBAAON,oBAACD,eAAe,CAACU,QAAQ;IAACC,KAAK,EAAEL;KAAWD,QAAQ,CAA4B;AACzF;AAEA;;;;;SAKgBO,WAAW;EACzB,OAAOX,KAAK,CAACY,UAAU,CAACb,eAAe,CAAC;AAC1C;;;;"}

package/TextDirectionContext.cjs.js

@@ -27,12 +27,10 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 /**
  * @private
  */
-
 const TextDirectionContext = /*#__PURE__*/React__namespace.createContext('ltr');
 /**
  * @public
  */
-
 const TextDirectionProvider = ({
   children,
   dir
@@ -46,7 +44,6 @@ const TextDirectionProvider = ({
  *
  * @private
  */
-
 function useTextDirection() {
   return React__namespace.useContext(TextDirectionContext);
 }

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   * Content wrapped by the TextDirectionProvider.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @private\n */\nconst TextDirectionContext = React.createContext<'ltr' | 'rtl'>('ltr');\n\n/**\n * @public\n */\nexport const TextDirectionProvider: React.FC<TextDirectionProviderProps> = ({ children, dir }) => {\n  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;\n};\n\n/**\n * Returns current directionality of the element's text.\n *\n * @private\n */\nexport function useTextDirection() {\n  return React.useContext(TextDirectionContext);\n}\n"],"names":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;;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;;;;;"}
+{"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   * Content wrapped by the TextDirectionProvider.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @private\n */\nconst TextDirectionContext = React.createContext<'ltr' | 'rtl'>('ltr');\n\n/**\n * @public\n */\nexport const TextDirectionProvider: React.FC<TextDirectionProviderProps> = ({ children, dir }) => {\n  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;\n};\n\n/**\n * Returns current directionality of the element's text.\n *\n * @private\n */\nexport function useTextDirection() {\n  return React.useContext(TextDirectionContext);\n}\n"],"names":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAYA;;;AAGA,MAAMA,oBAAoB,gBAAGC,gBAAK,CAACC,aAAa,CAAgB,KAAK,CAAC;AAEtE;;;MAGaC,qBAAqB,GAAyC,CAAC;EAAEC,QAAQ;EAAEC;CAAK;EAC3F,oBAAOJ,+BAACD,oBAAoB,CAACM,QAAQ;IAACC,KAAK,EAAEF;KAAMD,QAAQ,CAAiC;AAC9F;AAEA;;;;;SAKgBI,gBAAgB;EAC9B,OAAOP,gBAAK,CAACQ,UAAU,CAACT,oBAAoB,CAAC;AAC/C;;;;;"}

package/TextDirectionContext.esm.js

@@ -3,12 +3,10 @@ import * as React from 'react';
 /**
  * @private
  */
-
 const TextDirectionContext = /*#__PURE__*/React.createContext('ltr');
 /**
  * @public
  */
-
 const TextDirectionProvider = ({
   children,
   dir
@@ -22,7 +20,6 @@ const TextDirectionProvider = ({
  *
  * @private
  */
-
 function useTextDirection() {
   return React.useContext(TextDirectionContext);
 }

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   * Content wrapped by the TextDirectionProvider.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @private\n */\nconst TextDirectionContext = React.createContext<'ltr' | 'rtl'>('ltr');\n\n/**\n * @public\n */\nexport const TextDirectionProvider: React.FC<TextDirectionProviderProps> = ({ children, dir }) => {\n  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;\n};\n\n/**\n * Returns current directionality of the element's text.\n *\n * @private\n */\nexport function useTextDirection() {\n  return React.useContext(TextDirectionContext);\n}\n"],"names":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;AAYA;;;;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;;;;"}
+{"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   * Content wrapped by the TextDirectionProvider.\n   */\n  children: React.ReactNode;\n}\n\n/**\n * @private\n */\nconst TextDirectionContext = React.createContext<'ltr' | 'rtl'>('ltr');\n\n/**\n * @public\n */\nexport const TextDirectionProvider: React.FC<TextDirectionProviderProps> = ({ children, dir }) => {\n  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;\n};\n\n/**\n * Returns current directionality of the element's text.\n *\n * @private\n */\nexport function useTextDirection() {\n  return React.useContext(TextDirectionContext);\n}\n"],"names":["TextDirectionContext","React","createContext","TextDirectionProvider","children","dir","Provider","value","useTextDirection","useContext"],"mappings":";;AAYA;;;AAGA,MAAMA,oBAAoB,gBAAGC,KAAK,CAACC,aAAa,CAAgB,KAAK,CAAC;AAEtE;;;MAGaC,qBAAqB,GAAyC,CAAC;EAAEC,QAAQ;EAAEC;CAAK;EAC3F,oBAAOJ,oBAACD,oBAAoB,CAACM,QAAQ;IAACC,KAAK,EAAEF;KAAMD,QAAQ,CAAiC;AAC9F;AAEA;;;;;SAKgBI,gBAAgB;EAC9B,OAAOP,KAAK,CAACQ,UAAU,CAACT,oBAAoB,CAAC;AAC/C;;;;"}

package/__css.cjs.js

@@ -11,7 +11,6 @@ var TextDirectionContext = require('./TextDirectionContext.cjs.js');
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 function __css(classesMapBySlot) {
   const getStyles = core.__css(classesMapBySlot);
   return function useClasses() {

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;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;;;;"}
+{"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,KAAK,CAAuBC,gBAA4C;EACtF,MAAMC,SAAS,GAAGC,UAAU,CAACF,gBAAgB,CAAC;EAE9C,OAAO,SAASG,UAAU;IACxB,MAAMC,GAAG,GAAGC,qCAAgB,EAAE;IAE9B,OAAOJ,SAAS,CAAC;MAAEG;KAAK,CAAC;GAC1B;AACH;;;;"}

package/__css.esm.js

@@ -7,7 +7,6 @@ import { useTextDirection } from './TextDirectionContext.esm.js';
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 function __css(classesMapBySlot) {
   const getStyles = __css$1(classesMapBySlot);
   return function useClasses() {

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;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;;;;"}
+{"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,KAAK,CAAuBC,gBAA4C;EACtF,MAAMC,SAAS,GAAGC,OAAU,CAACF,gBAAgB,CAAC;EAE9C,OAAO,SAASG,UAAU;IACxB,MAAMC,GAAG,GAAGC,gBAAgB,EAAE;IAE9B,OAAOJ,SAAS,CAAC;MAAEG;KAAK,CAAC;GAC1B;AACH;;;;"}

package/__resetCSS.cjs.js

@@ -11,7 +11,6 @@ var TextDirectionContext = require('./TextDirectionContext.cjs.js');
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 function __resetCSS(ltrClassName, rtlClassName) {
   const getStyles = core.__resetCSS(ltrClassName, rtlClassName);
   return function useClasses() {

package/__resetCSS.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"__resetCSS.cjs.js","sources":["../../../packages/react/src/__resetCSS.ts"],"sourcesContent":["import { __resetCSS as vanillaResetCSS } from '@griffel/core';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetCSS(ltrClassName: string, rtlClassName: string | null) {\n  const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["__resetCSS","ltrClassName","rtlClassName","getStyles","vanillaResetCSS","useClasses","dir","useTextDirection"],"mappings":";;;;;;;AAGA;;;;;AAKA;;SACgBA,WAAWC,cAAsBC;EAC/C,MAAMC,SAAS,GAAGC,eAAe,CAACH,YAAD,EAAeC,YAAf,CAAjC;EAEA,OAAO,SAASG,UAAT;IACL,MAAMC,GAAG,GAAGC,qCAAgB,EAA5B;IAEA,OAAOJ,SAAS,CAAC;MAAEG;KAAH,CAAhB;GAHF;AAKD;;;;"}
+{"version":3,"file":"__resetCSS.cjs.js","sources":["../../../packages/react/src/__resetCSS.ts"],"sourcesContent":["import { __resetCSS as vanillaResetCSS } from '@griffel/core';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetCSS(ltrClassName: string, rtlClassName: string | null) {\n  const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["__resetCSS","ltrClassName","rtlClassName","getStyles","vanillaResetCSS","useClasses","dir","useTextDirection"],"mappings":";;;;;;;AAGA;;;;;AAKA;SACgBA,UAAU,CAACC,YAAoB,EAAEC,YAA2B;EAC1E,MAAMC,SAAS,GAAGC,eAAe,CAACH,YAAY,EAAEC,YAAY,CAAC;EAE7D,OAAO,SAASG,UAAU;IACxB,MAAMC,GAAG,GAAGC,qCAAgB,EAAE;IAE9B,OAAOJ,SAAS,CAAC;MAAEG;KAAK,CAAC;GAC1B;AACH;;;;"}

package/__resetCSS.esm.js

@@ -7,7 +7,6 @@ import { useTextDirection } from './TextDirectionContext.esm.js';
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 function __resetCSS(ltrClassName, rtlClassName) {
   const getStyles = __resetCSS$1(ltrClassName, rtlClassName);
   return function useClasses() {

package/__resetCSS.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"__resetCSS.esm.js","sources":["../../../packages/react/src/__resetCSS.ts"],"sourcesContent":["import { __resetCSS as vanillaResetCSS } from '@griffel/core';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetCSS(ltrClassName: string, rtlClassName: string | null) {\n  const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["__resetCSS","ltrClassName","rtlClassName","getStyles","vanillaResetCSS","useClasses","dir","useTextDirection"],"mappings":";;;AAGA;;;;;AAKA;;SACgBA,WAAWC,cAAsBC;EAC/C,MAAMC,SAAS,GAAGC,YAAe,CAACH,YAAD,EAAeC,YAAf,CAAjC;EAEA,OAAO,SAASG,UAAT;IACL,MAAMC,GAAG,GAAGC,gBAAgB,EAA5B;IAEA,OAAOJ,SAAS,CAAC;MAAEG;KAAH,CAAhB;GAHF;AAKD;;;;"}
+{"version":3,"file":"__resetCSS.esm.js","sources":["../../../packages/react/src/__resetCSS.ts"],"sourcesContent":["import { __resetCSS as vanillaResetCSS } from '@griffel/core';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetCSS(ltrClassName: string, rtlClassName: string | null) {\n  const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n\n    return getStyles({ dir });\n  };\n}\n"],"names":["__resetCSS","ltrClassName","rtlClassName","getStyles","vanillaResetCSS","useClasses","dir","useTextDirection"],"mappings":";;;AAGA;;;;;AAKA;SACgBA,UAAU,CAACC,YAAoB,EAAEC,YAA2B;EAC1E,MAAMC,SAAS,GAAGC,YAAe,CAACH,YAAY,EAAEC,YAAY,CAAC;EAE7D,OAAO,SAASG,UAAU;IACxB,MAAMC,GAAG,GAAGC,gBAAgB,EAAE;IAE9B,OAAOJ,SAAS,CAAC;MAAEG;KAAK,CAAC;GAC1B;AACH;;;;"}

package/__resetStyles.cjs.js

@@ -12,7 +12,6 @@ var TextDirectionContext = require('./TextDirectionContext.cjs.js');
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 function __resetStyles(ltrClassName, rtlClassName, cssRules) {
   const getStyles = core.__resetStyles(ltrClassName, rtlClassName, cssRules);
   return function useClasses() {

package/__resetStyles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"__resetStyles.cjs.js","sources":["../../../packages/react/src/__resetStyles.ts"],"sourcesContent":["import { __resetStyles as vanillaResetStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]) {\n  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["__resetStyles","ltrClassName","rtlClassName","cssRules","getStyles","vanillaResetStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;AAKA;;;;;AAKA;;SACgBA,cAAcC,cAAsBC,cAA6BC;EAC/E,MAAMC,SAAS,GAAGC,kBAAkB,CAACJ,YAAD,EAAeC,YAAf,EAA6BC,QAA7B,CAApC;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;;;;"}
+{"version":3,"file":"__resetStyles.cjs.js","sources":["../../../packages/react/src/__resetStyles.ts"],"sourcesContent":["import { __resetStyles as vanillaResetStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]) {\n  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["__resetStyles","ltrClassName","rtlClassName","cssRules","getStyles","vanillaResetStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;AAKA;;;;;AAKA;SACgBA,aAAa,CAACC,YAAoB,EAAEC,YAA2B,EAAEC,QAAkB;EACjG,MAAMC,SAAS,GAAGC,kBAAkB,CAACJ,YAAY,EAAEC,YAAY,EAAEC,QAAQ,CAAC;EAE1E,OAAO,SAASG,UAAU;IACxB,MAAMC,GAAG,GAAGC,qCAAgB,EAAE;IAC9B,MAAMC,QAAQ,GAAGC,2BAAW,EAAE;IAE9B,OAAON,SAAS,CAAC;MAAEG,GAAG;MAAEE;KAAU,CAAC;GACpC;AACH;;;;"}

package/__resetStyles.esm.js

@@ -8,7 +8,6 @@ import { useTextDirection } from './TextDirectionContext.esm.js';
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 function __resetStyles(ltrClassName, rtlClassName, cssRules) {
   const getStyles = __resetStyles$1(ltrClassName, rtlClassName, cssRules);
   return function useClasses() {

package/__resetStyles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"__resetStyles.esm.js","sources":["../../../packages/react/src/__resetStyles.ts"],"sourcesContent":["import { __resetStyles as vanillaResetStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]) {\n  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["__resetStyles","ltrClassName","rtlClassName","cssRules","getStyles","vanillaResetStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;AAKA;;;;;AAKA;;SACgBA,cAAcC,cAAsBC,cAA6BC;EAC/E,MAAMC,SAAS,GAAGC,eAAkB,CAACJ,YAAD,EAAeC,YAAf,EAA6BC,QAA7B,CAApC;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;;;;"}
+{"version":3,"file":"__resetStyles.esm.js","sources":["../../../packages/react/src/__resetStyles.ts"],"sourcesContent":["import { __resetStyles as vanillaResetStyles } from '@griffel/core';\n\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\n/**\n * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.\n *\n * @internal\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: string[]) {\n  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules);\n\n  return function useClasses(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["__resetStyles","ltrClassName","rtlClassName","cssRules","getStyles","vanillaResetStyles","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;AAKA;;;;;AAKA;SACgBA,aAAa,CAACC,YAAoB,EAAEC,YAA2B,EAAEC,QAAkB;EACjG,MAAMC,SAAS,GAAGC,eAAkB,CAACJ,YAAY,EAAEC,YAAY,EAAEC,QAAQ,CAAC;EAE1E,OAAO,SAASG,UAAU;IACxB,MAAMC,GAAG,GAAGC,gBAAgB,EAAE;IAC9B,MAAMC,QAAQ,GAAGC,WAAW,EAAE;IAE9B,OAAON,SAAS,CAAC;MAAEG,GAAG;MAAEE;KAAU,CAAC;GACpC;AACH;;;;"}

package/__styles.cjs.js

@@ -12,7 +12,6 @@ var TextDirectionContext = require('./TextDirectionContext.cjs.js');
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 function __styles(classesMapBySlot, cssRules) {
   const getStyles = core.__styles(classesMapBySlot, cssRules);
   return function useClasses() {

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;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;;;;"}
+{"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,QAAQ,CACtBC,gBAA4C,EAC5CC,QAA0B;EAE1B,MAAMC,SAAS,GAAGC,aAAa,CAACH,gBAAgB,EAAEC,QAAQ,CAAC;EAE3D,OAAO,SAASG,UAAU;IACxB,MAAMC,GAAG,GAAGC,qCAAgB,EAAE;IAC9B,MAAMC,QAAQ,GAAGC,2BAAW,EAAE;IAE9B,OAAON,SAAS,CAAC;MAAEG,GAAG;MAAEE;KAAU,CAAC;GACpC;AACH;;;;"}

package/__styles.esm.js

@@ -8,7 +8,6 @@ import { useTextDirection } from './TextDirectionContext.esm.js';
  * @internal
  */
 // eslint-disable-next-line @typescript-eslint/naming-convention
-
 function __styles(classesMapBySlot, cssRules) {
   const getStyles = __styles$1(classesMapBySlot, cssRules);
   return function useClasses() {

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;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;;;;"}
+{"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,QAAQ,CACtBC,gBAA4C,EAC5CC,QAA0B;EAE1B,MAAMC,SAAS,GAAGC,UAAa,CAACH,gBAAgB,EAAEC,QAAQ,CAAC;EAE3D,OAAO,SAASG,UAAU;IACxB,MAAMC,GAAG,GAAGC,gBAAgB,EAAE;IAC9B,MAAMC,QAAQ,GAAGC,WAAW,EAAE;IAE9B,OAAON,SAAS,CAAC;MAAEG,GAAG;MAAEE;KAAU,CAAC;GACpC;AACH;;;;"}

package/makeResetStyles.cjs.js

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

package/makeResetStyles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"makeResetStyles.cjs.js","sources":["../../../packages/react/src/makeResetStyles.ts"],"sourcesContent":["import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';\nimport type { GriffelResetStyle } from '@griffel/core';\n\nimport { isInsideComponent } from './utils/isInsideComponent';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nexport function makeResetStyles(styles: GriffelResetStyle) {\n  const getStyles = vanillaMakeResetStyles(styles);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeResetStyles(): this function cannot be called in component's scope.\",\n          'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClassName(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["makeResetStyles","styles","getStyles","vanillaMakeResetStyles","process","env","NODE_ENV","isInsideComponent","Error","join","useClassName","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;SAOgBA,gBAAgBC;EAC9B,MAAMC,SAAS,GAAGC,oBAAsB,CAACF,MAAD,CAAxC;;EAEA,IAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAIC,mCAAiB,EAArB,EAAyB;MACvB,MAAM,IAAIC,KAAJ,CACJ,CACE,yEADF,EAEE,iFAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;;;;EASJ,OAAO,SAASC,YAAT;IACL,MAAMC,GAAG,GAAGC,qCAAgB,EAA5B;IACA,MAAMC,QAAQ,GAAGC,2BAAW,EAA5B;IAEA,OAAOZ,SAAS,CAAC;MAAES,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}
+{"version":3,"file":"makeResetStyles.cjs.js","sources":["../../../packages/react/src/makeResetStyles.ts"],"sourcesContent":["import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';\nimport type { GriffelResetStyle } from '@griffel/core';\n\nimport { isInsideComponent } from './utils/isInsideComponent';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nexport function makeResetStyles(styles: GriffelResetStyle) {\n  const getStyles = vanillaMakeResetStyles(styles);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeResetStyles(): this function cannot be called in component's scope.\",\n          'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClassName(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["makeResetStyles","styles","getStyles","vanillaMakeResetStyles","process","env","NODE_ENV","isInsideComponent","Error","join","useClassName","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;SAOgBA,eAAe,CAACC,MAAyB;EACvD,MAAMC,SAAS,GAAGC,oBAAsB,CAACF,MAAM,CAAC;EAEhD,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIC,mCAAiB,EAAE,EAAE;MACvB,MAAM,IAAIC,KAAK,CACb,CACE,yEAAyE,EACzE,iFAAiF,CAClF,CAACC,IAAI,CAAC,GAAG,CAAC,CACZ;;;EAIL,OAAO,SAASC,YAAY;IAC1B,MAAMC,GAAG,GAAGC,qCAAgB,EAAE;IAC9B,MAAMC,QAAQ,GAAGC,2BAAW,EAAE;IAE9B,OAAOZ,SAAS,CAAC;MAAES,GAAG;MAAEE;KAAU,CAAC;GACpC;AACH;;;;"}

package/makeResetStyles.esm.js

@@ -5,13 +5,11 @@ import { useTextDirection } from './TextDirectionContext.esm.js';
 
 function makeResetStyles(styles) {
   const getStyles = makeResetStyles$1(styles);
-
   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();

package/makeResetStyles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"makeResetStyles.esm.js","sources":["../../../packages/react/src/makeResetStyles.ts"],"sourcesContent":["import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';\nimport type { GriffelResetStyle } from '@griffel/core';\n\nimport { isInsideComponent } from './utils/isInsideComponent';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nexport function makeResetStyles(styles: GriffelResetStyle) {\n  const getStyles = vanillaMakeResetStyles(styles);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeResetStyles(): this function cannot be called in component's scope.\",\n          'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClassName(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["makeResetStyles","styles","getStyles","vanillaMakeResetStyles","process","env","NODE_ENV","isInsideComponent","Error","join","useClassName","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;SAOgBA,gBAAgBC;EAC9B,MAAMC,SAAS,GAAGC,iBAAsB,CAACF,MAAD,CAAxC;;EAEA,IAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAIC,iBAAiB,EAArB,EAAyB;MACvB,MAAM,IAAIC,KAAJ,CACJ,CACE,yEADF,EAEE,iFAFF,EAGEC,IAHF,CAGO,GAHP,CADI,CAAN;;;;EASJ,OAAO,SAASC,YAAT;IACL,MAAMC,GAAG,GAAGC,gBAAgB,EAA5B;IACA,MAAMC,QAAQ,GAAGC,WAAW,EAA5B;IAEA,OAAOZ,SAAS,CAAC;MAAES,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}
+{"version":3,"file":"makeResetStyles.esm.js","sources":["../../../packages/react/src/makeResetStyles.ts"],"sourcesContent":["import { makeResetStyles as vanillaMakeResetStyles } from '@griffel/core';\nimport type { GriffelResetStyle } from '@griffel/core';\n\nimport { isInsideComponent } from './utils/isInsideComponent';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\n\nexport function makeResetStyles(styles: GriffelResetStyle) {\n  const getStyles = vanillaMakeResetStyles(styles);\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (isInsideComponent()) {\n      throw new Error(\n        [\n          \"makeResetStyles(): this function cannot be called in component's scope.\",\n          'All makeResetStyles() calls should be top level i.e. in a root scope of a file.',\n        ].join(' '),\n      );\n    }\n  }\n\n  return function useClassName(): string {\n    const dir = useTextDirection();\n    const renderer = useRenderer();\n\n    return getStyles({ dir, renderer });\n  };\n}\n"],"names":["makeResetStyles","styles","getStyles","vanillaMakeResetStyles","process","env","NODE_ENV","isInsideComponent","Error","join","useClassName","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;SAOgBA,eAAe,CAACC,MAAyB;EACvD,MAAMC,SAAS,GAAGC,iBAAsB,CAACF,MAAM,CAAC;EAEhD,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIC,iBAAiB,EAAE,EAAE;MACvB,MAAM,IAAIC,KAAK,CACb,CACE,yEAAyE,EACzE,iFAAiF,CAClF,CAACC,IAAI,CAAC,GAAG,CAAC,CACZ;;;EAIL,OAAO,SAASC,YAAY;IAC1B,MAAMC,GAAG,GAAGC,gBAAgB,EAAE;IAC9B,MAAMC,QAAQ,GAAGC,WAAW,EAAE;IAE9B,OAAOZ,SAAS,CAAC;MAAES,GAAG;MAAEE;KAAU,CAAC;GACpC;AACH;;;;"}

package/makeStaticStyles.cjs.js

@@ -7,12 +7,10 @@ var RendererContext = require('./RendererContext.cjs.js');
 
 function makeStaticStyles(styles) {
   const getStyles = core.makeStaticStyles(styles);
-
   if (process.env.NODE_ENV === 'test') {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   }
-
   return function useStaticStyles() {
     const renderer = RendererContext.useRenderer();
     const options = {

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;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;;;;"}
+{"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,gBAAgB,CAACC,MAAmD;EAClF,MAAMC,SAAS,GAAGC,qBAAuB,CAACF,MAAM,CAAC;EAEjD,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,EAAE;;IAEnC,OAAO,QAAQ;;EAGjB,OAAO,SAASC,eAAe;IAC7B,MAAMC,QAAQ,GAAGC,2BAAW,EAAE;IAC9B,MAAMC,OAAO,GAA4B;MAAEF;KAAU;IAErD,OAAON,SAAS,CAACQ,OAAO,CAAC;GAC1B;AACH;;;;"}

package/makeStaticStyles.esm.js

@@ -3,12 +3,10 @@ import { useRenderer } from './RendererContext.esm.js';
 
 function makeStaticStyles(styles) {
   const getStyles = makeStaticStyles$1(styles);
-
   if (process.env.NODE_ENV === 'test') {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   }
-
   return function useStaticStyles() {
     const renderer = useRenderer();
     const options = {

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;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;;;;"}
+{"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,gBAAgB,CAACC,MAAmD;EAClF,MAAMC,SAAS,GAAGC,kBAAuB,CAACF,MAAM,CAAC;EAEjD,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,MAAM,EAAE;;IAEnC,OAAO,QAAQ;;EAGjB,OAAO,SAASC,eAAe;IAC7B,MAAMC,QAAQ,GAAGC,WAAW,EAAE;IAC9B,MAAMC,OAAO,GAA4B;MAAEF;KAAU;IAErD,OAAON,SAAS,CAACQ,OAAO,CAAC;GAC1B;AACH;;;;"}

package/makeStyles.cjs.js

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

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 type { GriffelStyle } from '@griffel/core';\n\nimport { isInsideComponent } from './utils/isInsideComponent';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\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":["makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","isInsideComponent","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;SAOgBA,WAA0CC;EACxD,MAAMC,SAAS,GAAGC,eAAiB,CAACF,aAAD,CAAnC;;EAEA,IAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAIC,mCAAiB,EAArB,EAAyB;MACvB,MAAM,IAAIC,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,OAAOZ,SAAS,CAAC;MAAES,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}
+{"version":3,"file":"makeStyles.cjs.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { isInsideComponent } from './utils/isInsideComponent';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\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":["makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","isInsideComponent","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;;;;;SAOgBA,UAAU,CAAgCC,aAA0C;EAClG,MAAMC,SAAS,GAAGC,eAAiB,CAACF,aAAa,CAAC;EAElD,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIC,mCAAiB,EAAE,EAAE;MACvB,MAAM,IAAIC,KAAK,CACb,CACE,oEAAoE,EACpE,4EAA4E,CAC7E,CAACC,IAAI,CAAC,GAAG,CAAC,CACZ;;;EAIL,OAAO,SAASC,UAAU;IACxB,MAAMC,GAAG,GAAGC,qCAAgB,EAAE;IAC9B,MAAMC,QAAQ,GAAGC,2BAAW,EAAE;IAE9B,OAAOZ,SAAS,CAAC;MAAES,GAAG;MAAEE;KAAU,CAAC;GACpC;AACH;;;;"}

package/makeStyles.esm.js

@@ -5,13 +5,11 @@ import { useTextDirection } from './TextDirectionContext.esm.js';
 
 function makeStyles(stylesBySlots) {
   const getStyles = makeStyles$1(stylesBySlots);
-
   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();

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 type { GriffelStyle } from '@griffel/core';\n\nimport { isInsideComponent } from './utils/isInsideComponent';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\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":["makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","isInsideComponent","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;SAOgBA,WAA0CC;EACxD,MAAMC,SAAS,GAAGC,YAAiB,CAACF,aAAD,CAAnC;;EAEA,IAAIG,OAAO,CAACC,GAAR,CAAYC,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAIC,iBAAiB,EAArB,EAAyB;MACvB,MAAM,IAAIC,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,OAAOZ,SAAS,CAAC;MAAES,GAAF;MAAOE;KAAR,CAAhB;GAJF;AAMD;;;;"}
+{"version":3,"file":"makeStyles.esm.js","sources":["../../../packages/react/src/makeStyles.ts"],"sourcesContent":["import { makeStyles as vanillaMakeStyles } from '@griffel/core';\nimport type { GriffelStyle } from '@griffel/core';\n\nimport { isInsideComponent } from './utils/isInsideComponent';\nimport { useRenderer } from './RendererContext';\nimport { useTextDirection } from './TextDirectionContext';\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":["makeStyles","stylesBySlots","getStyles","vanillaMakeStyles","process","env","NODE_ENV","isInsideComponent","Error","join","useClasses","dir","useTextDirection","renderer","useRenderer"],"mappings":";;;;;SAOgBA,UAAU,CAAgCC,aAA0C;EAClG,MAAMC,SAAS,GAAGC,YAAiB,CAACF,aAAa,CAAC;EAElD,IAAIG,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIC,iBAAiB,EAAE,EAAE;MACvB,MAAM,IAAIC,KAAK,CACb,CACE,oEAAoE,EACpE,4EAA4E,CAC7E,CAACC,IAAI,CAAC,GAAG,CAAC,CACZ;;;EAIL,OAAO,SAASC,UAAU;IACxB,MAAMC,GAAG,GAAGC,gBAAgB,EAAE;IAC9B,MAAMC,QAAQ,GAAGC,WAAW,EAAE;IAE9B,OAAOZ,SAAS,CAAC;MAAES,GAAG;MAAEE;KAAU,CAAC;GACpC;AACH;;;;"}

package/package.json

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

package/renderToStyleElements.cjs.js

@@ -30,33 +30,30 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
  *
  * @public
  */
-
 function renderToStyleElements(renderer) {
-  const stylesheets = Object.values(renderer.stylesheets) // first sort: bucket names
+  const stylesheets = Object.values(renderer.stylesheets)
+  // first sort: bucket names
   .sort((a, b) => {
     return core.styleBucketOrdering.indexOf(a.bucketName) - core.styleBucketOrdering.indexOf(b.bucketName);
-  }) // second sort: media queries
+  })
+  // second 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
-
+    const cssRules = stylesheet.cssRules();
+    // don't want to create any empty style elements
     if (!cssRules.length) {
       return null;
     }
-
     return /*#__PURE__*/React__namespace.createElement('style', Object.assign(Object.assign({
       key: stylesheet.bucketName
     }, stylesheet.elementAttributes), {

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;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;;;;"}
+{"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,qBAAqB,CAACC,QAAyB;EAC7D,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACH,QAAQ,CAACC,WAAW;;GAEnDG,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,OAAOC,wBAAmB,CAACC,OAAO,CAACH,CAAC,CAACI,UAAU,CAAC,GAAGF,wBAAmB,CAACC,OAAO,CAACF,CAAC,CAACG,UAAU,CAAC;GAC7F;;GAEAL,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,MAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAiB,CAAC,OAAO,CAAC;IAC3C,MAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAiB,CAAC,OAAO,CAAC;IAE3C,IAAID,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOZ,QAAQ,CAACa,mBAAmB,CAACH,MAAM,EAAEE,MAAM,CAAC;;IAGrD,IAAIF,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOF,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;;IAGxB,OAAO,CAAC;GACT,CAAC;EAEJ,OAAOT,WAAW,CACfa,GAAG,CAACC,UAAU;IACb,MAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAQ,EAAE;;IAEtC,IAAI,CAACA,QAAQ,CAACC,MAAM,EAAE;MACpB,OAAO,IAAI;;IAGb,oBAAOC,gBAAK,CAACC,aAAa,CAAC,OAAO;MAChCC,GAAG,EAAEL,UAAU,CAACN;OAIbM,UAAU,CAACJ,iBAAiB;MAC/B,8BAA8B,EAAE,MAAM;MAEtCU,uBAAuB,EAAE;QACvBC,MAAM,EAAEN,QAAQ,CAACO,IAAI,CAAC,EAAE;;OAE1B;GACH,CAAC,CACDC,MAAM,CAACC,OAAO,CAAyB;AAC5C;;;;"}

package/renderToStyleElements.esm.js

@@ -6,33 +6,30 @@ import * as React from 'react';
  *
  * @public
  */
-
 function renderToStyleElements(renderer) {
-  const stylesheets = Object.values(renderer.stylesheets) // first sort: bucket names
+  const stylesheets = Object.values(renderer.stylesheets)
+  // first sort: bucket names
   .sort((a, b) => {
     return styleBucketOrdering.indexOf(a.bucketName) - styleBucketOrdering.indexOf(b.bucketName);
-  }) // second sort: media queries
+  })
+  // second 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
-
+    const cssRules = stylesheet.cssRules();
+    // don't want to create any empty style elements
     if (!cssRules.length) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement('style', Object.assign(Object.assign({
       key: stylesheet.bucketName
     }, stylesheet.elementAttributes), {

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;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;;;;"}
+{"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,qBAAqB,CAACC,QAAyB;EAC7D,MAAMC,WAAW,GAAGC,MAAM,CAACC,MAAM,CAACH,QAAQ,CAACC,WAAW;;GAEnDG,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,OAAOC,mBAAmB,CAACC,OAAO,CAACH,CAAC,CAACI,UAAU,CAAC,GAAGF,mBAAmB,CAACC,OAAO,CAACF,CAAC,CAACG,UAAU,CAAC;GAC7F;;GAEAL,IAAI,CAAC,CAACC,CAAC,EAAEC,CAAC;IACT,MAAMI,MAAM,GAAGL,CAAC,CAACM,iBAAiB,CAAC,OAAO,CAAC;IAC3C,MAAMC,MAAM,GAAGN,CAAC,CAACK,iBAAiB,CAAC,OAAO,CAAC;IAE3C,IAAID,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOZ,QAAQ,CAACa,mBAAmB,CAACH,MAAM,EAAEE,MAAM,CAAC;;IAGrD,IAAIF,MAAM,IAAIE,MAAM,EAAE;MACpB,OAAOF,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC;;IAGxB,OAAO,CAAC;GACT,CAAC;EAEJ,OAAOT,WAAW,CACfa,GAAG,CAACC,UAAU;IACb,MAAMC,QAAQ,GAAGD,UAAU,CAACC,QAAQ,EAAE;;IAEtC,IAAI,CAACA,QAAQ,CAACC,MAAM,EAAE;MACpB,OAAO,IAAI;;IAGb,oBAAOC,KAAK,CAACC,aAAa,CAAC,OAAO;MAChCC,GAAG,EAAEL,UAAU,CAACN;OAIbM,UAAU,CAACJ,iBAAiB;MAC/B,8BAA8B,EAAE,MAAM;MAEtCU,uBAAuB,EAAE;QACvBC,MAAM,EAAEN,QAAQ,CAACO,IAAI,CAAC,EAAE;;OAE1B;GACH,CAAC,CACDC,MAAM,CAACC,OAAO,CAAyB;AAC5C;;;;"}

package/utils/isInsideComponent.cjs.js

@@ -29,14 +29,13 @@ function isInsideComponent() {
   // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
   try {
     // @ts-expect-error "SECRET_INTERNALS" are not typed
-    const dispatcher = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current; // Before any React component was rendered "dispatcher" will be "null"
-
+    const dispatcher = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
+    // 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 check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
     // a call on the dispatcher wont
-
-
     dispatcher.useContext({});
     return true;
   } catch (e) {

package/utils/isInsideComponent.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"isInsideComponent.cjs.js","sources":["../../../../packages/react/src/utils/isInsideComponent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function isInsideComponent() {\n  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    // @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 wont\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;SAEgBA;;;EAGd,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;;;;"}
+{"version":3,"file":"isInsideComponent.cjs.js","sources":["../../../../packages/react/src/utils/isInsideComponent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function isInsideComponent() {\n  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    // @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 wont\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;SAEgBA,iBAAiB;;;EAG/B,IAAI;;IAEF,MAAMC,UAAU,GAAGC,gBAAK,CAACC,kDAAkD,CAACC,sBAAsB,CAACC,OAAO;;IAG1G,IAAIJ,UAAU,KAAK,IAAI,IAAIA,UAAU,KAAKK,SAAS,EAAE;MACnD,OAAO,KAAK;;;;IAKdL,UAAU,CAACM,UAAU,CAAC,EAAE,CAAC;IACzB,OAAO,IAAI;GACZ,CAAC,OAAOC,CAAC,EAAE;IACV,OAAO,KAAK;;AAEhB;;;;"}

package/utils/isInsideComponent.esm.js

@@ -5,14 +5,13 @@ function isInsideComponent() {
   // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36
   try {
     // @ts-expect-error "SECRET_INTERNALS" are not typed
-    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current; // Before any React component was rendered "dispatcher" will be "null"
-
+    const dispatcher = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current;
+    // 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 check with hooks call (i.e. call "React.useContext()" outside a component) will always produce errors, but
     // a call on the dispatcher wont
-
-
     dispatcher.useContext({});
     return true;
   } catch (e) {

package/utils/isInsideComponent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"isInsideComponent.esm.js","sources":["../../../../packages/react/src/utils/isInsideComponent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function isInsideComponent() {\n  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    // @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 wont\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e"],"mappings":";;SAEgBA;;;EAGd,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;;;;"}
+{"version":3,"file":"isInsideComponent.esm.js","sources":["../../../../packages/react/src/utils/isInsideComponent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport function isInsideComponent() {\n  // React 18 always logs errors if a dispatcher is not present:\n  // https://github.com/facebook/react/blob/42f15b324f50d0fd98322c21646ac3013e30344a/packages/react/src/ReactHooks.js#L26-L36\n  try {\n    // @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 wont\n    dispatcher.useContext({});\n    return true;\n  } catch (e) {\n    return false;\n  }\n}\n"],"names":["isInsideComponent","dispatcher","React","__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED","ReactCurrentDispatcher","current","undefined","useContext","e"],"mappings":";;SAEgBA,iBAAiB;;;EAG/B,IAAI;;IAEF,MAAMC,UAAU,GAAGC,KAAK,CAACC,kDAAkD,CAACC,sBAAsB,CAACC,OAAO;;IAG1G,IAAIJ,UAAU,KAAK,IAAI,IAAIA,UAAU,KAAKK,SAAS,EAAE;MACnD,OAAO,KAAK;;;;IAKdL,UAAU,CAACM,UAAU,CAAC,EAAE,CAAC;IACzB,OAAO,IAAI;GACZ,CAAC,OAAOC,CAAC,EAAE;IACV,OAAO,KAAK;;AAEhB;;;;"}