@griffel/react - npm Package Compare versions

Comparing version 1.7.2 to 1.7.3

.storybook/main.js

+import { dirname, join } from 'node:path';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+
+export default {
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(ts|tsx)'],
+  addons: [],
+  typescript: {
+    reactDocgen: false,
+  },
+};
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

.storybook/preview.js

+export const tags = ['autodocs'];

bundle-size/__css.fixture.js

+import { __css } from '@griffel/react';
+
+console.log(__css);
+
+export default {
+  name: '__css',
+};

bundle-size/__styles.fixture.js

+import { __styles } from '@griffel/react';
+
+console.log(__styles);
+
+export default {
+  name: '__styles',
+};

bundle-size/makeResetStyles.fixture.js

+import { makeResetStyles } from '@griffel/react';
+
+console.log(makeResetStyles);
+
+export default {
+  name: 'makeResetStyles (runtime)',
+};

bundle-size/makeStaticStyles.fixture.js

+import { makeStaticStyles } from '@griffel/react';
+
+console.log(makeStaticStyles);
+
+export default {
+  name: 'makeStaticStyles (runtime)',
+};

bundle-size/makeStyles.fixture.js

+import { makeStyles } from '@griffel/react';
+
+console.log(makeStyles);
+
+export default {
+  name: 'makeStyles (runtime)',
+};

CHANGELOG.json

+{
+  "name": "@griffel/react",
+  "entries": [
+    {
+      "date": "Thu, 21 May 2026 08:10:29 GMT",
+      "version": "1.7.3",
+      "tag": "@griffel/react_v1.7.3",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "f1e532569b99490e9e013ba45da448aef98f2116",
+            "comment": "chore: tighten ESLint rules and clean up redundant directives"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "ef37fbef91a9657379baf5c727945046ff1c906a",
+            "comment": "fix: drop nx flat/react preset and adopt official react/react-hooks/react-compiler flat presets"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "36755723e897e973cb36d4196d3d6d34953d3ac1",
+            "comment": "fix: bump ESLint to v10 and migrate React lint rules to eslint-plugin-react-x"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "42e7217508220889bab80c7aae5bbd9c5d6c6fde",
+            "comment": "chore: migrate Storybook to @storybook/react-vite"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.21.1",
+            "commit": "not available"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 04 May 2026 12:34:39 GMT",
+      "tag": "@griffel/react_v1.7.2",
+      "version": "1.7.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.21.0",
+            "commit": "d83f3c21bd7764c9396d3879c63cb087f3d37ba8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 30 Apr 2026 08:33:37 GMT",
+      "tag": "@griffel/react_v1.7.1",
+      "version": "1.7.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "a4d43188447b8f7738ae5a4493c76d8f399e72ca",
+            "comment": "fix: tag babel-emitted helpers as @private not @internal so they survive stripInternal and remain re-exportable from index.d.ts"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.20.3",
+            "commit": "a4d43188447b8f7738ae5a4493c76d8f399e72ca"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 29 Apr 2026 17:05:15 GMT",
+      "tag": "@griffel/react_v1.7.0",
+      "version": "1.7.0",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "3e7c9ba0dc38935cbbfe6f98d957445a9457a26e",
+            "comment": "fix(react): emit interop-free types so consumers without esModuleInterop can compile"
+          }
+        ],
+        "minor": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "ae63d7f7d40e8e095da26f41908157086d9823af",
+            "comment": "feat(react): switch to modern JSX runtime, bump react peerDep to >=16.14.0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 29 Apr 2026 08:41:14 GMT",
+      "tag": "@griffel/react_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "e622ba1a5a32b06348274f1e2f214a60c0faab80",
+            "comment": "chore: migrate to ESLint 9 flat config"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "01c98b78b3f36efda818d6f81d0a1c9e5935d773",
+            "comment": "chore: fix lint issues ahead of ESLint 9 migration"
+          }
+        ],
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "71fed59fe213a5eadafb161aa8848e13c6d707bb",
+            "comment": "refactor(build): switch from rollup to tsc + SWC"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.20.2",
+            "commit": "776d6d657e411ede5cdb6493bc70e354e78b541c"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 11 Mar 2026 13:33:34 GMT",
+      "tag": "@griffel/react_v1.6.1",
+      "version": "1.6.1",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "c1c05e2822a214d7cc3ad14c4e981e1b93ba245f",
+            "comment": "chore: migrate from Jest to Vitest"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 Mar 2026 15:56:28 GMT",
+      "tag": "@griffel/react_v1.6.1",
+      "version": "1.6.1",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "f422dee59ffc7ad2f4e5396def5dae5c9785cf24",
+            "comment": "chore: hoist common tsconfig strict options to base config"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.20.1",
+            "commit": "75914de37870943b9f2d483be421efe9cad8872f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 06 Mar 2026 08:17:05 GMT",
+      "tag": "@griffel/react_v1.6.0",
+      "version": "1.6.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "7df55abb5486fe5d5cd0a0c4731d4aaee9bbe7c8",
+            "comment": "feat: add makeStaticStyles AOT/CSS extraction support"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.20.0",
+            "commit": "832ca3b88650bb8fa8b20499ade2e679518bc934"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 08 Dec 2025 10:45:32 GMT",
+      "tag": "@griffel/react_v1.5.32",
+      "version": "1.5.32",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "0c93f454a493a1e427575ac8eef6cc0e1246f1c1",
+            "comment": "chore: update imports in stories"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 06 Nov 2025 19:40:21 GMT",
+      "tag": "@griffel/react_v1.5.32",
+      "version": "1.5.32",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "968ed526b60eddf809f309866ce03dd5a15c5edd",
+            "comment": "fix: renderToStyleElements() should handle shorthands ordering"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Nov 2025 15:43:56 GMT",
+      "tag": "@griffel/react_v1.5.31",
+      "version": "1.5.31",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "a09e6aa5c86e05dca8dcda07771693189ef16af1",
+            "comment": "feat(react): add 'use client' directives"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "e591d1c2bf61df66d543715df660943601561ecb",
+            "comment": "fix: fix dev-only validation to work in React 19"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 28 Jul 2025 09:12:30 GMT",
+      "tag": "@griffel/react_v1.5.30",
+      "version": "1.5.30",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "f6ad8b5172b9bda7522c33badc84ce2d3a979c2f",
+            "comment": "chore: bump Nx to 21.2.1"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "a588a6c1f301e598557a8a1255f6069ccbbb2534",
+            "comment": "chore: apply release"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 22 Apr 2025 10:05:48 GMT",
+      "tag": "@griffel/react_v1.5.30",
+      "version": "1.5.30",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "d25d0967a81daac6fd8640961836b806ecfc7fe8",
+            "comment": "chore: allow React 19 in \"peerDependencies\""
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.19.2",
+            "commit": "d25d0967a81daac6fd8640961836b806ecfc7fe8"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 23 Jan 2025 12:09:03 GMT",
+      "tag": "@griffel/react_v1.5.29",
+      "version": "1.5.29",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.19.1",
+            "commit": "78b2b5f231e3032de8aa1b5c5794a2a4317df42e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Jan 2025 13:44:43 GMT",
+      "tag": "@griffel/react_v1.5.28",
+      "version": "1.5.28",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.19.0",
+            "commit": "fa0a08b0452669a9bc4e0f83b2dbcd85b97f733e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 12 Nov 2024 09:58:11 GMT",
+      "tag": "@griffel/react_v1.5.27",
+      "version": "1.5.27",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.18.2",
+            "commit": "4dd2eec22aaff93dead8429c4a35496de7dab438"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 31 Oct 2024 16:16:50 GMT",
+      "tag": "@griffel/react_v1.5.26",
+      "version": "1.5.26",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "4436d63cff956aa0a71f7a7e00df1897e468c6d9",
+            "comment": "chore: add eslint-plugin-react-compiler and enable for React package."
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "fb21c433253790424a07159ede50c9f827b51137",
+            "comment": "fix: make RendererProvider compatible with React Compiler"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.18.1",
+            "commit": "00ba8831f3b895c1600e8211895c0d2b99c13365"
+          }
+        ],
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "291da5fea61bd08be595df1cdce171b755612898",
+            "comment": "chore: bump Nx to 19.8.6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 29 Jul 2024 07:31:53 GMT",
+      "tag": "@griffel/react_v1.5.25",
+      "version": "1.5.25",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.18.0",
+            "commit": "aa24116ea5cf763ee7f56363067a5c386c4c2222"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 10 Jul 2024 14:36:29 GMT",
+      "tag": "@griffel/react_v1.5.24",
+      "version": "1.5.24",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.17.1",
+            "commit": "15496655df98b9d8e8f505b461cc6dbd12e3122e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 May 2024 08:24:17 GMT",
+      "tag": "@griffel/react_v1.5.23",
+      "version": "1.5.23",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.17.0",
+            "commit": "6ae570dbbd711a5e95184004f5d4d98a8ffa2df3"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 02 May 2024 14:07:14 GMT",
+      "tag": "@griffel/react_v1.5.22",
+      "version": "1.5.22",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "062a9d5bc3903f0ce7a3450403b19b622caab05d",
+            "comment": "feat: add support for `RESET`"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.16.0",
+            "commit": "9745935b1bd28b02ee7c19d9195883e8454f0810"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Mar 2024 11:33:53 GMT",
+      "tag": "@griffel/react_v1.5.21",
+      "version": "1.5.21",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.15.3",
+            "commit": "95326c52b330ad9d286fad926f2aa26914c39061"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 23 Jan 2024 11:03:15 GMT",
+      "tag": "@griffel/react_v1.5.20",
+      "version": "1.5.20",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "9c0b1acf69a4645331d1623b1f0b5484ce5d2cc9",
+            "comment": "chore: bump to Nx@15.9.7"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "1a226dc4d52466d55e234e6ee7c4977845d8944b",
+            "comment": "chore: bump to Nx@16.10.0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 12 Jan 2024 11:08:40 GMT",
+      "tag": "@griffel/react_v1.5.20",
+      "version": "1.5.20",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "795246bca544bb3085a4488e93bcc9b2f3339a84",
+            "comment": "chore: add \"wyw-in-js\" field for tag processor"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.15.2",
+            "commit": "0d2e5506d6b9bc9d7e4a102b88c2bb25eff9a34d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 30 Nov 2023 16:42:15 GMT",
+      "tag": "@griffel/react_v1.5.19",
+      "version": "1.5.19",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.15.1",
+            "commit": "7d72d1eb3439ef8423fe958035a1525da1822750"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 09 Nov 2023 14:35:07 GMT",
+      "tag": "@griffel/react_v1.5.18",
+      "version": "1.5.18",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.15.0",
+            "commit": "8f213a0c040ee833b268cb2558adf976773ac14d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 30 Oct 2023 14:08:55 GMT",
+      "tag": "@griffel/react_v1.5.17",
+      "version": "1.5.17",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.14.4",
+            "commit": "f001ae503d75d7ddcf70d0633e2f51111b70ed45"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 03 Oct 2023 19:09:32 GMT",
+      "tag": "@griffel/react_v1.5.16",
+      "version": "1.5.16",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.14.3",
+            "commit": "1476e34bd093df1132181acfebbb8c51922d5c8b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 15 Sep 2023 08:08:43 GMT",
+      "tag": "@griffel/react_v1.5.15",
+      "version": "1.5.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.14.2",
+            "commit": "744403e2d046701dc82b02460a60e1680bb60f2e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 12:18:47 GMT",
+      "tag": "@griffel/react_v1.5.14",
+      "version": "1.5.14",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.14.1",
+            "commit": "fa5f0d726cbdca1cc583ccc7af4578a7f3f6599f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 31 Jul 2023 09:05:33 GMT",
+      "tag": "@griffel/react_v1.5.13",
+      "version": "1.5.13",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47",
+            "comment": "chore: improve React 18 support by using useInsertionEffect"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "c33da85cf8d176e47fd07012c41574a735753528",
+            "comment": "chore: add support for different buckets in makeResetStyles"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.14.0",
+            "commit": "1d0df068e80f3cb602651f1875edbd625d221c47"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 19 Jul 2023 07:32:54 GMT",
+      "tag": "@griffel/react_v1.5.12",
+      "version": "1.5.12",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "2ee1ee7305064beeb7a61fbf50d4fcbba4bb14ba",
+            "comment": "chore: use modern APIs in tests"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "c7fd5334a5486a305f19b3fbf81d9d13260ad51d",
+            "comment": "chore: cleanup bundle size fixtures"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.13.1",
+            "commit": "47f4df96449fc23545eab7c58ede2e55610c637c"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 13 Jul 2023 11:31:22 GMT",
+      "tag": "@griffel/react_v1.5.11",
+      "version": "1.5.11",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.13.0",
+            "commit": "2f75c38dada524264284c2a92c57437309dcf491"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 29 Jun 2023 12:49:54 GMT",
+      "tag": "@griffel/react_v1.5.10",
+      "version": "1.5.10",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.12.2",
+            "commit": "105857b021ee1d471efc29037a20601fb80bc72a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 28 Jun 2023 16:07:13 GMT",
+      "tag": "@griffel/react_v1.5.9",
+      "version": "1.5.9",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.12.1",
+            "commit": "d551a7f5a11b4123d1b353cab37e85058de17eb4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 27 Jun 2023 14:18:04 GMT",
+      "tag": "@griffel/react_v1.5.8",
+      "version": "1.5.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.12.0",
+            "commit": "02499fc94501e5f859aef982db3d9a23bc2a13bc"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 14 Apr 2023 07:58:49 GMT",
+      "tag": "@griffel/react_v1.5.7",
+      "version": "1.5.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.11.0",
+            "commit": "ff7edd54e829fbeb5453383fe6a19009e44b64b2"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 29 Mar 2023 12:45:13 GMT",
+      "tag": "@griffel/react_v1.5.6",
+      "version": "1.5.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.10.1",
+            "commit": "9ad8031fa6346e97d5d444b26d7bdf380f9c69c1"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 02 Mar 2023 14:51:11 GMT",
+      "tag": "@griffel/react_v1.5.5",
+      "version": "1.5.5",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "d8e62d7756c8bd3908e2ce5a95ee0a842fc7df9d",
+            "comment": "chore: bump Nx"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.10.0",
+            "commit": "3edb840d4139d81744620d8bded738d814cd71f5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 10 Feb 2023 10:23:25 GMT",
+      "tag": "@griffel/react_v1.5.4",
+      "version": "1.5.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.9.2",
+            "commit": "5837c739ee141a9099a031449870dbca46ce648d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 Jan 2023 14:06:28 GMT",
+      "tag": "@griffel/react_v1.5.3",
+      "version": "1.5.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.9.1",
+            "commit": "d87ba30b4f07fc759c0abb18ff86fd57dd79296f"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Dec 2022 11:48:33 GMT",
+      "tag": "@griffel/react_v1.5.2",
+      "version": "1.5.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.9.0",
+            "commit": "7d2e3ba8656afccb6cf0b56e7b7f6cce0ae9fd15"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 09 Dec 2022 11:15:19 GMT",
+      "tag": "@griffel/react_v1.5.1",
+      "version": "1.5.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.8.3",
+            "commit": "9b94a45ba5bd526460dd97aaea103cf64d9d5450"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 30 Nov 2022 09:32:24 GMT",
+      "tag": "@griffel/react_v1.5.0",
+      "version": "1.5.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "4f958be904861075f827812dc89d39665f249874",
+            "comment": "feat: re-export GriffelResetStyle type"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 24 Nov 2022 10:05:12 GMT",
+      "tag": "@griffel/react_v1.4.3",
+      "version": "1.4.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.8.2",
+            "commit": "fc3403a602d5dd0b206ceeb48ca689cb2fdf6d37"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 26 Oct 2022 11:06:03 GMT",
+      "tag": "@griffel/react_v1.4.2",
+      "version": "1.4.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "d37c4b57efacd1d878d9c93aa06707fe972b89a9",
+            "comment": "fix: add export for __resetCSS"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "f9fb5726c89abff0c7f5e07c6e1d1c8e0ebbcde6",
+            "comment": "chore: allow React 18 in peerDependencies"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.8.1",
+            "commit": "f9fb5726c89abff0c7f5e07c6e1d1c8e0ebbcde6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 13 Oct 2022 08:36:18 GMT",
+      "tag": "@griffel/react_v1.4.1",
+      "version": "1.4.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "4f7c10f9e057cf613deecc2b47cb1777f2a2dc3e",
+            "comment": "chore: add __resetStyles (internal function)"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "635096302c6e9a8b18e51745c1fadec5ab4674d5",
+            "comment": "chore: add __resetStyles (internal function)"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.8.0",
+            "commit": "32d9b0bfa4372343d710368b6bed1cc5185a6684"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 05 Oct 2022 14:28:43 GMT",
+      "tag": "@griffel/react_v1.4.0",
+      "version": "1.4.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "f9a70d8435481f58138eacd0a5035b73b6f93035",
+            "comment": "feat: add makeResetStyles to @griffel/react"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.7.0",
+            "commit": "9173966f4f1c69556f68351e6361d9302c674621"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 04 Oct 2022 08:44:33 GMT",
+      "tag": "@griffel/react_v1.3.2",
+      "version": "1.3.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "ebe44fdd9c34a87a4106c95c5b47f5719c215e8f",
+            "comment": "fix: Adding children to prop type definitions for React 18"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.6.1",
+            "commit": "6828b9b754d65621e12a8fbff54c9f486eab032e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 16 Aug 2022 11:16:00 GMT",
+      "tag": "@griffel/react_v1.3.1",
+      "version": "1.3.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.6.0",
+            "commit": "545253c7bd0c84f3c72803b6b88946e617922714"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 15:28:36 GMT",
+      "tag": "@griffel/react_v1.3.0",
+      "version": "1.3.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "5fe534790f489fc865785463f716b196d5db0cd1",
+            "comment": "feat: re-export GriffelRenderer type"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 27 Jul 2022 13:03:12 GMT",
+      "tag": "@griffel/react_v1.2.3",
+      "version": "1.2.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.5.1",
+            "commit": "2b80f0c1fae8d5dc0ae66d072f499e25bd6042c4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Jul 2022 10:20:09 GMT",
+      "tag": "@griffel/react_v1.2.2",
+      "version": "1.2.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "33f6914944cd6d3c895fac85e869b3586cbdfd98",
+            "comment": "feat: export `CreateDOMRendererOptions` from `@griffel/react`"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.5.0",
+            "commit": "9b1d23a654c1af9ccde3aa4807b70dff2cdf58d7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 28 Jun 2022 09:50:50 GMT",
+      "tag": "@griffel/react_v1.2.1",
+      "version": "1.2.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.4.1",
+            "commit": "604926fc2fdd4596cd122b92b82a3f5e5d40d23d"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 23 Jun 2022 08:37:05 GMT",
+      "tag": "@griffel/react_v1.2.0",
+      "version": "1.2.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "4e4c7c29deae40ae64bd3b6860356d0adeb05e8e",
+            "comment": "feat: update renderToStyleElement to use isomorphic stylesheets from renderer"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "5897290e8065eb7631770593944ea194cbced029",
+            "comment": "feat: update style rehydration to sort media queries"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.4.0",
+            "commit": "6b98eb67f7b4399bcc9bd66607e296640449ae98"
+          }
+        ],
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "d516a9aa3b52032ca3419ad5824109394643296b",
+            "comment": "chore: add __css() functions for upcoming CSS extraction"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "307d727163986ff0bb818a76b2186888622da985",
+            "comment": "chore: rename instances of styleElement to stylesheet where appropriate following [#137](https://github.com/microsoft/griffel/pull/137)"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 26 May 2022 15:06:34 GMT",
+      "tag": "@griffel/react_v1.1.0",
+      "version": "1.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "ef665ab8dbc42c4db6625144357041f55e78c46e",
+            "comment": "feat: export useRenderer_unstable"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 17 May 2022 08:34:48 GMT",
+      "tag": "@griffel/react_v1.0.5",
+      "version": "1.0.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.3.1",
+            "commit": "ca92d20c52389ce51f089c39b03f2838c8329a60"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 May 2022 16:15:22 GMT",
+      "tag": "@griffel/react_v1.0.4",
+      "version": "1.0.4",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "6a0f6e24af80afedf7b47c73f72c71a439b43aca",
+            "comment": "chore: integrate bundle size tooling"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "726ddd4397c6991fe1e4df61940e77f3da9f0c83",
+            "comment": "update babelrc with dev env presets"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "addc2c3922ef8b45d4a9028e84808b9a3eee6f9a",
+            "comment": "docs: add support for @layer"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "5b6cdf3ede6983eba5997b26f5696f2ea459606d",
+            "comment": "README update"
+          }
+        ],
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "2391de2b83ac11647fda47d71c6843df90890d25",
+            "comment": "fix: avoid errors with React 18"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a",
+            "comment": "fix: update isInsideComponent() check"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.3.0",
+            "commit": "dbf9adc8acedba645ee95f469353836d1ae5fa6a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 06 Apr 2022 13:28:28 GMT",
+      "tag": "@griffel/react_v1.0.3",
+      "version": "1.0.3",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "05635e139c200e609ddb531f40e144b65f9cdcf3",
+            "comment": "Fallback values stories"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "2bda4e578a4fcdd1751a3e7496ea9a6df7916012",
+            "comment": "docs: add docs for createDOMRenderer"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.2.0",
+            "commit": "995c356bc77272f6fe69a604db6485d57a9ba7c4"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 09 Mar 2022 13:56:06 GMT",
+      "tag": "@griffel/react_v1.0.2",
+      "version": "1.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "de373b3e85d3987a0b52b38df5f60d40ba9e6f22",
+            "comment": "chore: add dependencies explicitly to package.json"
+          },
+          {
+            "author": "beachball",
+            "package": "@griffel/react",
+            "comment": "Bump @griffel/core to v1.1.1",
+            "commit": "7e1846070ad96b71b2789fe76e37dcac4f6155e7"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 07 Mar 2022 09:08:08 GMT",
+      "tag": "@griffel/react_v1.0.1",
+      "version": "1.0.1",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "35ec68e5db45f33511b6091ad43eb2b3a316fa7b",
+            "comment": "chore: add \"type-check\" target to project.json"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "ff6078d3d9dac9a1d5310a027d41e7d6a75ce959",
+            "comment": "chore: enable pretty type-check output"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "2d95ec00fb3a24e94c5bc1444d9f35ed42fe947f",
+            "comment": "chore: add storybook to @griffel/react"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "ddcdb53a3d08613bda5a05d37720f36f42bcea7d",
+            "comment": "chore: add DOMRenderer filter story"
+          }
+        ],
+        "patch": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "225b54cb0f9ebcf2294e5a66b47dc45bfa13e813",
+            "comment": "chore: add sourcemaps to dist files"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 27 Jan 2022 13:47:55 GMT",
+      "tag": "@griffel/react_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "2d85e06323002984336d459bd36e0fa89cfa1b4e",
+            "comment": "fix typos in README"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 24 Jan 2022 09:32:24 GMT",
+      "tag": "@griffel/react_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "none": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "0a94e833bbc3a68276a52774d1de14d39a33635c",
+            "comment": "fix lint issues"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 20 Jan 2022 09:31:57 GMT",
+      "tag": "@griffel/react_v1.0.0",
+      "version": "1.0.0",
+      "comments": {
+        "major": [
+          {
+            "author": "[e-mail]",
+            "package": "@griffel/react",
+            "commit": "3557c746fdd2c297aebfd6203bb3350a8f45bcf1",
+            "comment": "initial release"
+          }
+        ]
+      }
+    }
+  ]
+}

CHANGELOG.md

+# Change Log - @griffel/react
+
+<!-- This log was last generated on Thu, 21 May 2026 08:10:29 GMT and should not be manually modified. -->
+
+<!-- Start content -->
+
+## 1.7.3
+
+Thu, 21 May 2026 08:10:29 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.21.1
+
+## 1.7.2
+
+Mon, 04 May 2026 12:34:39 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.21.0
+
+## 1.7.1
+
+Thu, 30 Apr 2026 08:33:37 GMT
+
+### Patches
+
+- fix: tag babel-emitted helpers as @private not @internal so they survive stripInternal and remain re-exportable from index.d.ts ([e-mail])
+- Bump @griffel/core to v1.20.3
+
+## 1.7.0
+
+Wed, 29 Apr 2026 17:05:15 GMT
+
+### Minor changes
+
+- feat(react): switch to modern JSX runtime, bump react peerDep to >=16.14.0 ([e-mail])
+
+### Patches
+
+- fix(react): emit interop-free types so consumers without esModuleInterop can compile ([e-mail])
+
+## 1.6.2
+
+Wed, 29 Apr 2026 08:41:14 GMT
+
+### Patches
+
+- refactor(build): switch from rollup to tsc + SWC ([e-mail])
+- Bump @griffel/core to v1.20.2
+
+## 1.6.1
+
+Fri, 06 Mar 2026 15:56:28 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.20.1
+
+## 1.6.0
+
+Fri, 06 Mar 2026 08:17:05 GMT
+
+### Minor changes
+
+- feat: add makeStaticStyles AOT/CSS extraction support ([e-mail])
+- Bump @griffel/core to v1.20.0
+
+## 1.5.32
+
+Thu, 06 Nov 2025 19:40:21 GMT
+
+### Patches
+
+- fix: renderToStyleElements() should handle shorthands ordering ([e-mail])
+
+## 1.5.31
+
+Mon, 03 Nov 2025 15:43:56 GMT
+
+### Patches
+
+- feat(react): add 'use client' directives ([e-mail])
+- fix: fix dev-only validation to work in React 19 ([e-mail])
+
+## 1.5.30
+
+Tue, 22 Apr 2025 10:05:48 GMT
+
+### Patches
+
+- chore: allow React 19 in "peerDependencies" ([e-mail])
+- Bump @griffel/core to v1.19.2
+
+## 1.5.29
+
+Thu, 23 Jan 2025 12:09:03 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.19.1
+
+## 1.5.28
+
+Wed, 22 Jan 2025 13:44:43 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.19.0
+
+## 1.5.27
+
+Tue, 12 Nov 2024 09:58:11 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.18.2
+
+## 1.5.26
+
+Thu, 31 Oct 2024 16:16:50 GMT
+
+### Patches
+
+- chore: add eslint-plugin-react-compiler and enable for React package. ([e-mail])
+- fix: make RendererProvider compatible with React Compiler ([e-mail])
+- Bump @griffel/core to v1.18.1
+
+## 1.5.25
+
+Mon, 29 Jul 2024 07:31:53 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.18.0
+
+## 1.5.24
+
+Wed, 10 Jul 2024 14:36:29 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.17.1
+
+## 1.5.23
+
+Wed, 22 May 2024 08:24:17 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.17.0
+
+## 1.5.22
+
+Thu, 02 May 2024 14:07:14 GMT
+
+### Patches
+
+- feat: add support for `RESET` ([e-mail])
+- Bump @griffel/core to v1.16.0
+
+## 1.5.21
+
+Tue, 19 Mar 2024 11:33:53 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.15.3
+
+## 1.5.20
+
+Fri, 12 Jan 2024 11:08:40 GMT
+
+### Patches
+
+- chore: add "wyw-in-js" field for tag processor ([e-mail])
+- Bump @griffel/core to v1.15.2
+
+## 1.5.19
+
+Thu, 30 Nov 2023 16:42:15 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.15.1
+
+## 1.5.18
+
+Thu, 09 Nov 2023 14:35:07 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.15.0
+
+## 1.5.17
+
+Mon, 30 Oct 2023 14:08:55 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.4
+
+## 1.5.16
+
+Tue, 03 Oct 2023 19:09:32 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.3
+
+## 1.5.15
+
+Fri, 15 Sep 2023 08:08:43 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.2
+
+## 1.5.14
+
+Mon, 31 Jul 2023 12:18:47 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.14.1
+
+## 1.5.13
+
+Mon, 31 Jul 2023 09:05:33 GMT
+
+### Patches
+
+- chore: improve React 18 support by using useInsertionEffect ([e-mail])
+- chore: add support for different buckets in makeResetStyles ([e-mail])
+- Bump @griffel/core to v1.14.0
+
+## 1.5.12
+
+Wed, 19 Jul 2023 07:32:54 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.13.1
+
+## 1.5.11
+
+Thu, 13 Jul 2023 11:31:22 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.13.0
+
+## 1.5.10
+
+Thu, 29 Jun 2023 12:49:54 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.12.2
+
+## 1.5.9
+
+Wed, 28 Jun 2023 16:07:13 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.12.1
+
+## 1.5.8
+
+Tue, 27 Jun 2023 14:18:04 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.12.0
+
+## 1.5.7
+
+Fri, 14 Apr 2023 07:58:49 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.11.0
+
+## 1.5.6
+
+Wed, 29 Mar 2023 12:45:13 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.10.1
+
+## 1.5.5
+
+Thu, 02 Mar 2023 14:51:11 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.10.0
+
+## 1.5.4
+
+Fri, 10 Feb 2023 10:23:25 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.9.2
+
+## 1.5.3
+
+Thu, 26 Jan 2023 14:06:28 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.9.1
+
+## 1.5.2
+
+Tue, 20 Dec 2022 11:48:33 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.9.0
+
+## 1.5.1
+
+Fri, 09 Dec 2022 11:15:19 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.8.3
+
+## 1.5.0
+
+Wed, 30 Nov 2022 09:32:24 GMT
+
+### Minor changes
+
+- feat: re-export GriffelResetStyle type ([e-mail])
+
+## 1.4.3
+
+Thu, 24 Nov 2022 10:05:12 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.8.2
+
+## 1.4.2
+
+Wed, 26 Oct 2022 11:06:03 GMT
+
+### Patches
+
+- fix: add export for __resetCSS ([e-mail])
+- chore: allow React 18 in peerDependencies ([e-mail])
+- Bump @griffel/core to v1.8.1
+
+## 1.4.1
+
+Thu, 13 Oct 2022 08:36:18 GMT
+
+### Patches
+
+- chore: add __resetStyles (internal function) ([e-mail])
+- chore: add __resetStyles (internal function) ([e-mail])
+- Bump @griffel/core to v1.8.0
+
+## 1.4.0
+
+Wed, 05 Oct 2022 14:28:43 GMT
+
+### Minor changes
+
+- feat: add makeResetStyles to @griffel/react ([e-mail])
+- Bump @griffel/core to v1.7.0
+
+## 1.3.2
+
+Tue, 04 Oct 2022 08:44:33 GMT
+
+### Patches
+
+- fix: Adding children to prop type definitions for React 18 ([e-mail])
+- Bump @griffel/core to v1.6.1
+
+## 1.3.1
+
+Tue, 16 Aug 2022 11:16:00 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.6.0
+
+## 1.3.0
+
+Wed, 03 Aug 2022 15:28:36 GMT
+
+### Minor changes
+
+- feat: re-export GriffelRenderer type ([e-mail])
+
+## 1.2.3
+
+Wed, 27 Jul 2022 13:03:12 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.5.1
+
+## 1.2.2
+
+Tue, 19 Jul 2022 10:20:09 GMT
+
+### Patches
+
+- feat: export `CreateDOMRendererOptions` from `@griffel/react` ([e-mail])
+- Bump @griffel/core to v1.5.0
+
+## 1.2.1
+
+Tue, 28 Jun 2022 09:50:50 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.4.1
+
+## 1.2.0
+
+Thu, 23 Jun 2022 08:37:05 GMT
+
+### Minor changes
+
+- feat: update renderToStyleElement to use isomorphic stylesheets from renderer ([e-mail])
+- feat: update style rehydration to sort media queries ([e-mail])
+- Bump @griffel/core to v1.4.0
+
+### Patches
+
+- chore: add __css() functions for upcoming CSS extraction ([e-mail])
+- chore: rename instances of styleElement to stylesheet where appropriate following [#137](https://github.com/microsoft/griffel/pull/137) ([e-mail])
+
+## 1.1.0
+
+Thu, 26 May 2022 15:06:34 GMT
+
+### Minor changes
+
+- feat: export useRenderer_unstable ([e-mail])
+
+## 1.0.5
+
+Tue, 17 May 2022 08:34:48 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.3.1
+
+## 1.0.4
+
+Wed, 04 May 2022 16:15:22 GMT
+
+### Patches
+
+- fix: avoid errors with React 18 ([e-mail])
+- fix: update isInsideComponent() check ([e-mail])
+- Bump @griffel/core to v1.3.0
+
+## 1.0.3
+
+Wed, 06 Apr 2022 13:28:28 GMT
+
+### Patches
+
+- Bump @griffel/core to v1.2.0
+
+## 1.0.2
+
+Wed, 09 Mar 2022 13:56:06 GMT
+
+### Patches
+
+- chore: add dependencies explicitly to package.json ([e-mail])
+- Bump @griffel/core to v1.1.1
+
+## 1.0.1
+
+Mon, 07 Mar 2022 09:08:08 GMT
+
+### Patches
+
+- chore: add sourcemaps to dist files ([e-mail])
+
+## 1.0.0
+
+Thu, 20 Jan 2022 09:31:57 GMT
+
+### Major changes
+
+- initial release ([e-mail])

eslint.config.mjs

+import baseConfig from '../../eslint.config.mjs';
+import eslintPluginReactCompiler from 'eslint-plugin-react-compiler';
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks';
+import eslintPluginReactX from 'eslint-plugin-react-x';
+
+export default [
+  {
+    ignores: ['**/dist', '**/out-tsc'],
+  },
+  ...baseConfig,
+  {
+    files: ['**/__*.ts', '**/__*.tsx'],
+    rules: {
+      '@typescript-eslint/naming-convention': 'off',
+    },
+  },
+  eslintPluginReactX.configs['recommended-typescript'],
+  eslintPluginReactHooks.configs.flat['recommended-latest'],
+  eslintPluginReactX.configs['disable-conflict-eslint-plugin-react-hooks'],
+  eslintPluginReactCompiler.configs.recommended,
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    // Override or add rules here
+    rules: {},
+  },
+  {
+    files: ['**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

project.json

+{
+  "name": "@griffel/react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/react/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/js:tsc",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/react",
+        "tsConfig": "packages/react/tsconfig.lib.json",
+        "skipTypeField": true,
+        "packageJson": "packages/react/package.json",
+        "main": "packages/react/src/index.ts",
+        "assets": [
+          "packages/react/README.md",
+          {
+            "glob": "LICENSE.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    },
+    "build-cjs": {
+      "dependsOn": ["build"],
+      "executor": "nx:run-commands",
+      "outputs": ["{workspaceRoot}/dist/packages/react/lib"],
+      "options": {
+        "command": "node tools/build-cjs.mjs dist/packages/react/src dist/packages/react/lib"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/vitest:test",
+      "outputs": ["{options.reportsDirectory}"],
+      "options": {
+        "reportsDirectory": "{projectRoot}/../../coverage/packages/react"
+      }
+    },
+    "bundle-size": {
+      "executor": "nx:run-commands",
+      "dependsOn": ["build"],
+      "options": {
+        "cwd": "packages/react",
+        "commands": [
+          {
+            "command": "monosize measure"
+          }
+        ]
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "packages/react/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "configDir": "packages/react/.storybook",
+        "outputDir": "dist/storybook/@griffel/react"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "type-check": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/react",
+        "commands": [
+          {
+            "command": "tsc -b --pretty"
+          }
+        ]
+      },
+      "outputs": []
+    }
+  }
+}

src/__css.ts

+'use client';
+
+import { __css as vanillaCSS } from '@griffel/core';
+import type { CSSClassesMapBySlot } from '@griffel/core';
+
+import { useTextDirection } from './TextDirectionContext.js';
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @private
+ */
+export function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>) {
+  const getStyles = vanillaCSS(classesMapBySlot);
+
+  return function useClasses(): Record<Slots, string> {
+    const dir = useTextDirection();
+
+    return getStyles({ dir });
+  };
+}

src/__resetCSS.ts

+'use client';
+
+import { __resetCSS as vanillaResetCSS } from '@griffel/core';
+import { useTextDirection } from './TextDirectionContext.js';
+
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @private
+ */
+export function __resetCSS(ltrClassName: string, rtlClassName: string | null) {
+  const getStyles = vanillaResetCSS(ltrClassName, rtlClassName);
+
+  return function useClasses(): string {
+    const dir = useTextDirection();
+
+    return getStyles({ dir });
+  };
+}

src/__resetStyles.ts

+'use client';
+
+import { __resetStyles as vanillaResetStyles } from '@griffel/core';
+import type { CSSRulesByBucket } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+
+/**
+ * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @private
+ */
+export function __resetStyles(
+  ltrClassName: string,
+  rtlClassName: string | null,
+  cssRules: CSSRulesByBucket | string[],
+) {
+  const getStyles = vanillaResetStyles(ltrClassName, rtlClassName, cssRules, insertionFactory);
+
+  return function useClasses(): string {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+
+    return getStyles({ dir, renderer });
+  };
+}

src/__staticCSS.ts

+'use client';
+
+import { __staticCSS as vanillaStaticCSS } from '@griffel/core';
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
+ *
+ * @private
+ */
+export function __staticCSS() {
+  const getStyles = vanillaStaticCSS();
+
+  return function useStaticStyles(): void {
+    return getStyles();
+  };
+}

src/__staticStyles.ts

+'use client';
+
+import { __staticStyles as vanillaStaticStyles } from '@griffel/core';
+import type { CSSRulesByBucket } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+
+/**
+ * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @private
+ */
+export function __staticStyles(cssRules: CSSRulesByBucket) {
+  const getStyles = vanillaStaticStyles(cssRules, insertionFactory);
+
+  return function useStaticStyles(): void {
+    const renderer = useRenderer();
+
+    return getStyles({ renderer });
+  };
+}

src/__styles.ts

+'use client';
+
+import { __styles as vanillaStyles } from '@griffel/core';
+import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useRenderer } from './RendererContext.js';
+import { useTextDirection } from './TextDirectionContext.js';
+
+/**
+ * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
+ *
+ * @private
+ */
+export function __styles<Slots extends string>(
+  classesMapBySlot: CSSClassesMapBySlot<Slots>,
+  cssRules: CSSRulesByBucket,
+) {
+  const getStyles = vanillaStyles(classesMapBySlot, cssRules, insertionFactory);
+
+  return function useClasses(): Record<Slots, string> {
+    const dir = useTextDirection();
+    const renderer = useRenderer();
+
+    return getStyles({ dir, renderer });
+  };
+}

src/createDOMRenderer.test.tsx

+import { describe, it, expect, vi } from 'vitest';
+import type { Mock } from 'vitest';
+import { createDOMRenderer, mergeClasses } from '@griffel/core';
+import * as React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { makeStyles } from './makeStyles.js';
+import { makeResetStyles } from './makeResetStyles.js';
+import { RendererProvider } from './RendererContext.js';
+import { renderToStyleElements } from './renderToStyleElements.js';
+import { useInsertionEffect as _useInsertionEffect } from './useInsertionEffect.js';
+
+vi.mock('./useInsertionEffect', () => ({
+  useInsertionEffect: vi.fn(),
+}));
+
+const useInsertionEffect = _useInsertionEffect as Mock<typeof React.useInsertionEffect>;
+
+describe('createDOMRenderer', () => {
+  it('rehydrateCache() avoids double insertion', () => {
+    // This test validates a scenario for Server-Side rendering
+
+    const clientRenderer = createDOMRenderer(document);
+    const serverRenderer = createDOMRenderer(
+      // we should use "null" as "undefined" will fall back to "document" which is present in this environment
+      null as unknown as undefined,
+    );
+
+    const useExampleClasses = makeStyles({
+      root: {
+        animationName: {
+          from: { height: '10px' },
+          to: { height: '20px' },
+        },
+
+        color: 'red',
+        '@media screen and (max-width: 992px)': { ':hover': { color: 'blue' } },
+      },
+    });
+    const useExampleClass = makeResetStyles({
+      color: 'red',
+      ':hover': { color: 'blue' },
+    });
+    const ExampleComponent: React.FC = () => {
+      const classes = useExampleClasses();
+      const className = useExampleClass();
+
+      return <div className={mergeClasses(className, classes.root)} />;
+    };
+
+    //
+    // Server
+    // A "server" renders components to static HTML that will be transferred to a client
+    //
+
+    // Heads up!
+    // Mock there is need as this test is executed in DOM environment and uses "useInsertionEffect".
+    // However, "useInsertionEffect" will not be called in "renderToStaticMarkup()".
+    useInsertionEffect.mockImplementation(fn => fn());
+
+    const componentHTML = renderToStaticMarkup(
+      <RendererProvider renderer={serverRenderer}>
+        <ExampleComponent />
+      </RendererProvider>,
+    );
+    const stylesHTML = renderToStaticMarkup(<>{renderToStyleElements(serverRenderer)}</>);
+
+    useInsertionEffect.mockImplementation(React.useInsertionEffect);
+
+    // Ensure that all styles are inserted into the cache
+    expect(serverRenderer.insertionCache).toMatchInlineSnapshot(`
+      {
+        ".f1p9cr64{animation-name:f1kgwxhb;}": "d",
+        ".fe3e8s9{color:red;}": "d",
+        ".rp2atum:hover{color:blue;}": "r",
+        ".rp2atum{color:red;}": "r",
+        "@keyframes f1kgwxhb{from{height:10px;}to{height:20px;}}": "k",
+        "@media screen and (max-width: 992px){.fzd6x39:hover{color:blue;}}": "m",
+      }
+    `);
+    // There is no DOM on a server, style nodes should not be present
+    expect(document.querySelector('style')).toBe(null);
+
+    //
+    // Client
+    // Creates an element to render components and inserts HTML rendered from a server
+    //
+
+    const container = document.createElement('div');
+
+    document.body.appendChild(container);
+
+    container.innerHTML = componentHTML;
+    document.head.innerHTML = stylesHTML;
+
+    // As all style came from a server, we should not insert any CSS on a client
+    // (this tests internal implementation, but there is no other way?)
+    const styleElementsBeforeHydration = document.querySelectorAll<HTMLStyleElement>('style');
+    const insertRules = [...(styleElementsBeforeHydration as unknown as HTMLStyleElement[])].map(styleEl =>
+      vi.spyOn(styleEl.sheet!, 'insertRule'),
+    );
+
+    React.act(() => {
+      hydrateRoot(
+        container,
+        // "RendererProvider" is not required there, we need it only for Jest spies
+        <RendererProvider renderer={clientRenderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+    });
+
+    const styleElementsAfterHydration = document.querySelectorAll<HTMLStyleElement>('style');
+
+    // We also would to ensure that new elements have not been inserted
+    expect(styleElementsBeforeHydration.length).toBe(styleElementsAfterHydration.length);
+
+    // Following rules are present in cache:
+    // - makeResetStyles
+    //   - color
+    //   - :hover + color
+    // - makeStyles
+    //   - "animationName"
+    //   - "color"
+    //   - @keyframes
+    //   - @media
+    expect(Object.keys(clientRenderer.insertionCache)).toHaveLength(6);
+    insertRules.forEach(insertRule => {
+      expect(insertRule).not.toHaveBeenCalled();
+    });
+  });
+});

src/index.ts

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

src/insertionFactory-node.test.ts

+/*
+ * @vitest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import { describe, it, expect, vi } from 'vitest';
+import type { GriffelRenderer } from '@griffel/core';
+
+const { useInsertionEffect } = vi.hoisted(() => ({
+  useInsertionEffect: vi.fn(),
+}));
+
+vi.mock('react', async importOriginal => {
+  const actual = await importOriginal<typeof import('react')>();
+  return { ...actual, useInsertionEffect };
+});
+
+import { insertionFactory } from './insertionFactory.js';
+
+describe('insertionFactory (node)', () => {
+  it('does not use insertionEffect', () => {
+    const renderer: Partial<GriffelRenderer> = { id: 'a', insertCSSRules: vi.fn() };
+    const insertStyles = insertionFactory();
+
+    insertStyles(renderer as GriffelRenderer, { d: ['a'] });
+
+    expect(useInsertionEffect).not.toHaveBeenCalled();
+    expect(renderer.insertCSSRules).toHaveBeenCalledTimes(1);
+  });
+});

src/insertionFactory.test.ts

+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import type { Mock } from 'vitest';
+import type { GriffelRenderer } from '@griffel/core';
+
+import { insertionFactory } from './insertionFactory.js';
+import { useInsertionEffect as _useInsertionEffect } from './useInsertionEffect.js';
+import type * as React from 'react';
+
+vi.mock('./useInsertionEffect', () => ({
+  useInsertionEffect: vi.fn().mockImplementation(fn => fn()),
+}));
+
+const useInsertionEffect = _useInsertionEffect as Mock<typeof React.useInsertionEffect>;
+
+describe('canUseDOM', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('uses "useInsertionEffect" when available', () => {
+    const renderer: Partial<GriffelRenderer> = { insertCSSRules: vi.fn() };
+    const insertStyles = insertionFactory();
+
+    insertStyles(renderer as GriffelRenderer, { d: ['a'] });
+
+    expect(useInsertionEffect).toHaveBeenCalledTimes(1);
+    expect(renderer.insertCSSRules).toHaveBeenCalledTimes(1);
+  });
+});

src/insertionFactory.ts

+'use client';
+
+import type { CSSRulesByBucket, GriffelInsertionFactory, GriffelRenderer } from '@griffel/core';
+
+import { canUseDOM } from './utils/canUseDOM.js';
+import { useInsertionEffect } from './useInsertionEffect.js';
+
+export const insertionFactory: GriffelInsertionFactory = () => {
+  const insertionCache: Record<string, boolean> = {};
+
+  return function insert(renderer: GriffelRenderer, cssRules: CSSRulesByBucket) {
+    // Even if `useInsertionEffect` is available, we can use it on a client only as it will not be executed in SSR
+    if (useInsertionEffect && canUseDOM()) {
+      // eslint-disable-next-line react-x/rules-of-hooks
+      useInsertionEffect(() => {
+        renderer.insertCSSRules(cssRules!);
+      }, [renderer, cssRules]);
+
+      return;
+    }
+
+    if (insertionCache[renderer.id] === undefined) {
+      renderer.insertCSSRules(cssRules!);
+      insertionCache[renderer.id] = true;
+    }
+  };
+};

src/makeResetStyles.test.tsx

+import { describe, it, expect, vi } from 'vitest';
+import type * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+import { makeResetStyles } from './makeResetStyles.js';
+
+describe('makeResetStyles', () => {
+  it('works outside of React components', () => {
+    expect(() => makeResetStyles({ root: { color: 'red' } })).not.toThrow();
+  });
+
+  it('throws inside React components', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const Example: React.FC = () => {
+      makeResetStyles({ color: 'red' });
+      return null;
+    };
+    const root = createRoot(document.createElement('div'));
+
+    expect(() => act(() => root.render(<Example />))).toThrow(/All makeResetStyles\(\) calls should be top level/);
+
+    // Should not throw outside React components after rendering
+    expect(() => makeResetStyles({ color: 'red' })).not.toThrow();
+  });
+});

src/makeResetStyles.ts

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

src/makeStaticStyles.ts

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

src/makeStyles.test.tsx

+import { describe, it, expect, vi } from 'vitest';
+import type * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+
+import { makeStyles } from './makeStyles.js';
+
+describe('makeStyles', () => {
+  it('works outside of React components', () => {
+    expect(() => makeStyles({ root: { color: 'red' } })).not.toThrow();
+  });
+
+  it('throws inside React components', () => {
+    vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const Example: React.FC = () => {
+      makeStyles({ root: { color: 'red' } });
+      return null;
+    };
+    const root = createRoot(document.createElement('div'));
+
+    expect(() => act(() => root.render(<Example />))).toThrow(/All makeStyles\(\) calls should be top level/);
+
+    // Should not throw outside React components after rendering
+    expect(() => makeStyles({ root: { color: 'red' } })).not.toThrow();
+  });
+});

src/makeStyles.ts

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

src/RendererContext.tsx

+'use client';
+
+import { createDOMRenderer, rehydrateRendererCache } from '@griffel/core';
+import type { GriffelRenderer } from '@griffel/core';
+import { createContext, useContext, useMemo, type FC, type ReactNode } from 'react';
+
+import { canUseDOM } from './utils/canUseDOM.js';
+
+export interface RendererProviderProps {
+  /** An instance of Griffel renderer. */
+  renderer: GriffelRenderer;
+
+  /**
+   * Document used to insert CSS variables to head
+   */
+  targetDocument?: Document;
+
+  /**
+   * Content wrapped by the RendererProvider
+   */
+  children: ReactNode;
+}
+
+/**
+ * @private
+ */
+const RendererContext = /*#__PURE__*/ createContext<GriffelRenderer>(/*#__PURE__*/ createDOMRenderer());
+
+/**
+ * @public
+ */
+export const RendererProvider: FC<RendererProviderProps> = ({ children, renderer, targetDocument }) => {
+  // "rehydrateCache()" can't be called in effects as it needs to be called before any component will be rendered to
+  // avoid double insertion of classes — useMemo runs synchronously before render, useEffect would be too late.
+  // eslint-disable-next-line react-x/use-memo, react-hooks/void-use-memo
+  useMemo(() => {
+    if (canUseDOM()) {
+      rehydrateRendererCache(renderer, targetDocument);
+    }
+  }, [renderer, targetDocument]);
+
+  return <RendererContext.Provider value={renderer}>{children}</RendererContext.Provider>;
+};
+
+/**
+ * Returns an instance of current makeStyles() renderer.
+ *
+ * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
+ */
+export function useRenderer(): GriffelRenderer {
+  return useContext(RendererContext);
+}

src/renderToStyleElements-node.test.tsx

+/*
+ * @vitest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import { describe, it, expect } from 'vitest';
+import { createDOMRenderer } from '@griffel/core';
+import * as prettier from 'prettier';
+import type * as React from 'react';
+import * as ReactDOM from 'react-dom/server';
+
+import { makeStyles } from './makeStyles.js';
+import { makeResetStyles } from './makeResetStyles.js';
+import { RendererProvider } from './RendererContext.js';
+import { renderToStyleElements } from './renderToStyleElements.js';
+
+async function formatHtml(value: string) {
+  return (await prettier.format(value, { parser: 'html' })).trim();
+}
+
+describe('renderToStyleElements (node)', () => {
+  describe('makeStyles', () => {
+    it('supports overrides', async () => {
+      const useExampleStyles = makeStyles({
+        root: {
+          color: 'red',
+          ':hover': { color: 'pink' },
+        },
+      });
+      const ExampleComponent: React.FC = () => {
+        const classes = useExampleStyles();
+
+        return <div className={classes.root} />;
+      };
+
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="d"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .fe3e8s9 {
+            color: red;
+          }</style
+        ><style
+          data-make-styles-bucket="h"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .f14hep94:hover {
+            color: pink;
+          }
+        </style>"
+      `);
+    });
+
+    it('supports overrides', async () => {
+      const useExampleStylesA = makeStyles({
+        root: {
+          paddingLeft: '10px',
+          margin: '10px',
+          ':hover': { paddingRight: '20px' },
+        },
+      });
+      const useExampleStylesB = makeStyles({
+        root: { padding: '10px', ':hover': { padding: '20px' } },
+      });
+      const useExampleStylesC = makeStyles({
+        root: { marginLeft: '10px' },
+      });
+      const ExampleComponent: React.FC = () => {
+        useExampleStylesA();
+        useExampleStylesB();
+        useExampleStylesC();
+
+        return null;
+      };
+
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="d"
+          data-priority="-1"
+          data-make-styles-rehydration="true"
+        >
+          .femlv54 {
+            margin: 10px;
+          }
+          .fbhmu18 {
+            padding: 10px;
+          }</style
+        ><style
+          data-make-styles-bucket="d"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .frdkuqy {
+            padding-left: 10px;
+          }
+          .f81rol6 {
+            padding-right: 10px;
+          }
+          .f1oou7ox {
+            margin-left: 10px;
+          }
+          .f1pxv85q {
+            margin-right: 10px;
+          }</style
+        ><style
+          data-make-styles-bucket="h"
+          data-priority="-1"
+          data-make-styles-rehydration="true"
+        >
+          .fp9hkdp:hover {
+            padding: 20px;
+          }</style
+        ><style
+          data-make-styles-bucket="h"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .f19vcps:hover {
+            padding-right: 20px;
+          }
+          .f1mr755h:hover {
+            padding-left: 20px;
+          }
+        </style>"
+      `);
+    });
+
+    it('handles @at rules', async () => {
+      const useExampleStyles = makeStyles({
+        media: {
+          '@media screen and (max-width: 992px)': {
+            ':hover': { color: 'blue' },
+          },
+        },
+
+        support: {
+          '@supports (display: grid)': {
+            color: 'red',
+          },
+        },
+      });
+      const ExampleComponent: React.FC = () => {
+        const classes = useExampleStyles();
+
+        return (
+          <>
+            <div className={classes.media} />
+            <div className={classes.support} />
+          </>
+        );
+      };
+
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="t"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @supports (display: grid) {
+            .fo1gfrc {
+              color: red;
+            }
+          }</style
+        ><style
+          media="screen and (max-width: 992px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media screen and (max-width: 992px) {
+            .fzd6x39:hover {
+              color: blue;
+            }
+          }
+        </style>"
+      `);
+    });
+
+    it('handles media query order', async () => {
+      const useExampleStyles = makeStyles({
+        media: {
+          color: 'red',
+          '@media (max-width: 4px)': {
+            ':hover': { color: 'blue' },
+          },
+          '@media (max-width: 2px)': {
+            ':hover': { color: 'blue' },
+          },
+          '@supports (display: grid)': {
+            color: 'green',
+          },
+          '@media (max-width: 3px)': {
+            ':hover': { color: 'blue' },
+          },
+          '@media (max-width: 1px)': {
+            ':hover': { color: 'blue' },
+          },
+        },
+      });
+      const ExampleComponent: React.FC = () => {
+        const classes = useExampleStyles();
+
+        return <div className={classes.media} />;
+      };
+
+      const mediaQueryOrder = ['(max-width: 1px)', '(max-width: 2px)', '(max-width: 3px)', '(max-width: 4px)'];
+      const renderer = createDOMRenderer(undefined, {
+        compareMediaQueries(a, b) {
+          return mediaQueryOrder.indexOf(a) - mediaQueryOrder.indexOf(b);
+        },
+      });
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="d"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .fe3e8s9 {
+            color: red;
+          }</style
+        ><style
+          data-make-styles-bucket="t"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @supports (display: grid) {
+            .fui0tgz {
+              color: green;
+            }
+          }</style
+        ><style
+          media="(max-width: 1px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media (max-width: 1px) {
+            .f13d6lhy:hover {
+              color: blue;
+            }
+          }</style
+        ><style
+          media="(max-width: 2px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media (max-width: 2px) {
+            .f1b07yzi:hover {
+              color: blue;
+            }
+          }</style
+        ><style
+          media="(max-width: 3px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media (max-width: 3px) {
+            .f1cy3850:hover {
+              color: blue;
+            }
+          }</style
+        ><style
+          media="(max-width: 4px)"
+          data-make-styles-bucket="m"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @media (max-width: 4px) {
+            .fyvg8w:hover {
+              color: blue;
+            }
+          }
+        </style>"
+      `);
+    });
+
+    it('handles keyframes', async () => {
+      const useExampleStyles = makeStyles({
+        keyframe: {
+          animationName: {
+            from: {
+              transform: 'rotate(0deg)',
+            },
+            to: {
+              transform: 'rotate(360deg)',
+            },
+          },
+        },
+      });
+      const ExampleComponent: React.FC = () => {
+        const classes = useExampleStyles();
+
+        return <div className={classes.keyframe} />;
+      };
+
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="d"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .f1g6ul6r {
+            animation-name: f1q8eu9e;
+          }
+          .f1fp4ujf {
+            animation-name: f55c0se;
+          }</style
+        ><style
+          data-make-styles-bucket="k"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          @keyframes f1q8eu9e {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+          @keyframes f55c0se {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(-360deg);
+            }
+          }
+        </style>"
+      `);
+    });
+  });
+
+  describe('makeResetStyles', () => {
+    it('renders styles', async () => {
+      const useClassName = makeResetStyles({
+        color: 'red',
+        ':hover': { color: 'pink' },
+      });
+      const ExampleComponent: React.FC = () => {
+        return <div className={useClassName()} />;
+      };
+      const renderer = createDOMRenderer();
+
+      ReactDOM.renderToStaticMarkup(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+
+      expect(await formatHtml(ReactDOM.renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>)))
+        .toMatchInlineSnapshot(`
+        "<style
+          data-make-styles-bucket="r"
+          data-priority="0"
+          data-make-styles-rehydration="true"
+        >
+          .r1tsu58y {
+            color: red;
+          }
+          .r1tsu58y:hover {
+            color: pink;
+          }
+        </style>"
+      `);
+    });
+  });
+});

src/renderToStyleElements.test.tsx

+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import type { GriffelRenderer } from '@griffel/core';
+import { createDOMRenderer } from '@griffel/core';
+import * as prettier from 'prettier';
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import { makeStyles } from './makeStyles.js';
+import { makeResetStyles } from './makeResetStyles.js';
+import { RendererProvider } from './RendererContext.js';
+import { renderToStyleElements } from './renderToStyleElements.js';
+
+async function formatHtml(value: string) {
+  return (await prettier.format(value, { parser: 'html' })).trim();
+}
+
+describe('renderToStyleElements (DOM)', () => {
+  let renderer: GriffelRenderer;
+
+  beforeEach(() => {
+    process.env.NODE_ENV = 'production';
+    renderer = createDOMRenderer(document);
+  });
+
+  afterEach(() => {
+    document.head.innerHTML = '';
+  });
+
+  it('makeStyles', async () => {
+    const useExampleStyles = makeStyles({
+      root: { color: 'red', ':hover': { color: 'green' } },
+    });
+    const ExampleComponent: React.FC = () => {
+      const classes = useExampleStyles();
+
+      return <div className={classes.root} />;
+    };
+    const root = createRoot(document.createElement('div'));
+
+    React.act(() => {
+      root.render(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+    });
+
+    expect(await formatHtml(renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>))).toMatchInlineSnapshot(`
+      "<style
+        data-make-styles-bucket="d"
+        data-priority="0"
+        data-make-styles-rehydration="true"
+      >
+        .fe3e8s9 {
+          color: red;
+        }</style
+      ><style
+        data-make-styles-bucket="h"
+        data-priority="0"
+        data-make-styles-rehydration="true"
+      >
+        .f1ej289o:hover {
+          color: green;
+        }
+      </style>"
+    `);
+  });
+
+  it('makeResetStyles', async () => {
+    const useClassName = makeResetStyles({
+      color: 'red',
+      ':hover': { color: 'pink' },
+    });
+    const ExampleComponent: React.FC = () => {
+      return <div className={useClassName()} />;
+    };
+    const root = createRoot(document.createElement('div'));
+
+    React.act(() => {
+      root.render(
+        <RendererProvider renderer={renderer}>
+          <ExampleComponent />
+        </RendererProvider>,
+      );
+    });
+
+    expect(await formatHtml(renderToStaticMarkup(<>{renderToStyleElements(renderer)}</>))).toMatchInlineSnapshot(`
+      "<style
+        data-make-styles-bucket="r"
+        data-priority="0"
+        data-make-styles-rehydration="true"
+      >
+        .r1tsu58y {
+          color: red;
+        }
+        .r1tsu58y:hover {
+          color: pink;
+        }
+      </style>"
+    `);
+  });
+});

src/renderToStyleElements.ts

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

src/stories/ComponentStyles.stories.tsx

+import type * as React from 'react';
+import type { StoryObj } from '@storybook/react-vite';
+
+import { makeStyles, mergeClasses, shorthands } from '../';
+
+const tokens = {
+  brandBackground: '#106ebe',
+  brandBackgroundHover: '#2899f5',
+};
+
+const useButtonStyles = makeStyles({
+  root: {
+    backgroundColor: 'transparent',
+    outlineStyle: 'none',
+    ...shorthands.borderRadius('.3em'),
+    ...shorthands.border('1px', 'solid', '#333'),
+    ...shorthands.padding('.3em', '1em'),
+    ':hover': {
+      cursor: 'pointer',
+      backgroundColor: '#ddd',
+    },
+  },
+
+  primary: {
+    backgroundColor: tokens.brandBackground,
+    color: '#eff6fc',
+    ':hover': {
+      backgroundColor: tokens.brandBackgroundHover,
+    },
+  },
+});
+
+const Button: React.FunctionComponent<{ className?: string; primary?: boolean }> = ({
+  className,
+  primary = false,
+  ...props
+}) => {
+  const classes = useButtonStyles();
+  const mergedClasses = mergeClasses(classes.root, primary && classes.primary, className);
+  return <button {...props} className={mergedClasses} />;
+};
+
+export const ComponentStyles: StoryObj<{ primary: boolean }> = {
+  render: args => {
+    return <Button {...args}>button</Button>;
+  },
+
+  args: {
+    primary: false,
+  },
+};
+
+export default {
+  title: 'Component styles',
+};

src/stories/DOMRendererFilter.stories.tsx

+import * as React from 'react';
+import type { StoryObj } from '@storybook/react-vite';
+
+import { createDOMRenderer } from '@griffel/core';
+import { makeStyles, RendererProvider, shorthands } from '../';
+
+const useStyles = makeStyles({
+  root: {
+    width: '200px',
+    height: '100px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    ...shorthands.border('1px', 'solid', '#333'),
+    backgroundColor: 'cornflowerblue',
+  },
+});
+
+const ColorBox: React.FC = () => {
+  const classes = useStyles();
+
+  return <div className={classes.root}>blue box</div>;
+};
+
+const CustomRendererProvider: React.FC<{ children: React.ReactNode; filterEnabled: boolean }> = ({
+  children,
+  filterEnabled,
+}) => {
+  const customDOMRenderer = React.useMemo(() => {
+    return createDOMRenderer(undefined, {
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      unstable_filterCSSRule: cssRule => {
+        // Filter out background-color
+        return !filterEnabled || cssRule.indexOf('{background-color:') === -1;
+      },
+    });
+  }, [filterEnabled]);
+
+  return <RendererProvider renderer={customDOMRenderer}>{children}</RendererProvider>;
+};
+
+export const DOMRendererFilter: StoryObj<{ filterEnabled: boolean }> = {
+  render: ({ filterEnabled }) => {
+    return (
+      <CustomRendererProvider filterEnabled={filterEnabled}>
+        <p>
+          It is possible to define a filter function in <code>DOMRenderer</code> to filter out CSS rules before adding
+          them to DOM. The classes are still applied to an element.
+        </p>
+        <p>Once the CSS rule is added, there is no way to remove it.</p>
+        <ol>
+          <li>Render this story with filter enabled &rarr; it renders the box without a background.</li>
+          <li>Disable the filter &rarr; story is re-rendered, blue background is added to the box.</li>
+          <li>
+            Enable the filter again &rarr; there is still the blue background, you need to refresh the page to get rid
+            of the background
+          </li>
+        </ol>
+        <p style={{ color: 'red' }}>
+          Filter is currently marked as unstable. This functionality can be changed or removed without considering it a
+          breaking change!
+        </p>
+
+        <ColorBox />
+      </CustomRendererProvider>
+    );
+  },
+
+  args: {
+    filterEnabled: true,
+  },
+};
+
+export default {
+  title: 'unstable_filterCSSRule',
+};

src/stories/FallbackValues.stories.tsx

+import type { StoryFn } from '@storybook/react-vite';
+
+import { makeStyles, shorthands, TextDirectionProvider } from '../';
+
+const useStyles = makeStyles({
+  shouldFallbackToRed: {
+    color: ['red', 'invalid'],
+    ...shorthands.border(['1px'], 'solid', ['red', 'invalid']),
+    ...shorthands.borderRight('40px', 'solid', ['green', 'invalid']),
+    borderTopStyle: ['hidden', 'dashed'],
+  },
+  shouldBeBlue: {
+    color: ['red', 'blue'],
+    ...shorthands.border('1px', 'solid', ['red', 'blue']),
+    ...shorthands.borderRight('40px', 'solid', ['green', 'grey']),
+    borderRightWidth: '100px',
+  },
+});
+
+const FallbackTest = ({ isRtl = false }: { isRtl?: boolean }) => {
+  const classes = useStyles();
+  return (
+    <>
+      <p className={classes.shouldBeBlue}>
+        Colour and border should be blue, {isRtl ? 'left' : 'right'} wide border grey.
+      </p>
+      <p className={classes.shouldFallbackToRed}>
+        Colour and border should fallback to red, {isRtl ? 'left' : 'right'} wide border to green.
+      </p>
+    </>
+  );
+};
+
+export const FallbackValues: StoryFn = () => {
+  return (
+    <div>
+      <FallbackTest />
+      <TextDirectionProvider dir="rtl">
+        <div dir="rtl">
+          <h2>RTL</h2>
+          <FallbackTest isRtl />
+        </div>
+      </TextDirectionProvider>
+    </div>
+  );
+};
+
+export default {
+  title: 'Fallback values',
+};

src/stories/makeStyles.stories.tsx

+import { makeStyles } from '../../src/index.js';
+
+const useStyles = makeStyles({
+  root: {
+    color: 'deeppink',
+  },
+});
+
+export const MakeStyles = () => {
+  const classes = useStyles();
+
+  return <div className={classes.root}>no stories yet</div>;
+};
+
+export default {
+  title: 'MakeStyles',
+};

src/TextDirectionContext.tsx

+'use client';
+
+import { createContext, useContext, type FC, type ReactNode } from 'react';
+
+export interface TextDirectionProviderProps {
+  /** Indicates the directionality of the element's text. */
+  dir: 'ltr' | 'rtl';
+
+  /**
+   * Content wrapped by the TextDirectionProvider.
+   */
+  children: ReactNode;
+}
+
+/**
+ * @private
+ */
+const TextDirectionContext = /*#__PURE__*/ createContext<'ltr' | 'rtl'>('ltr');
+
+/**
+ * @public
+ */
+export const TextDirectionProvider: FC<TextDirectionProviderProps> = ({ children, dir }) => {
+  return <TextDirectionContext.Provider value={dir}>{children}</TextDirectionContext.Provider>;
+};
+
+/**
+ * Returns current directionality of the element's text.
+ *
+ * @private
+ */
+export function useTextDirection() {
+  return useContext(TextDirectionContext);
+}

src/useInsertionEffect.ts

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

src/utils/canUseDOM-node.test.ts

+/*
+ * @vitest-environment node
+ */
+
+// 👆 this is intentionally to test in SSR like environment
+
+import { describe, it, expect } from 'vitest';
+import { canUseDOM } from './canUseDOM.js';
+
+describe('canUseDOM (node)', () => {
+  it('returns "false"', () => {
+    expect(canUseDOM()).toBe(false);
+  });
+});

src/utils/canUseDOM.test.tsx

+import { describe, it, expect } from 'vitest';
+import { canUseDOM } from './canUseDOM.js';
+
+describe('canUseDOM', () => {
+  it('returns "true"', () => {
+    expect(canUseDOM()).toBe(true);
+  });
+});

src/utils/canUseDOM.ts

+/**
+ * Verifies if an application can use DOM.
+ *
+ * @internal
+ */
+export function canUseDOM(): boolean {
+  return typeof window !== 'undefined' && !!(window.document && window.document.createElement);
+}

src/utils/isInsideComponent.ts

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

tsconfig.json

+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
+}

tsconfig.lib.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "stripInternal": true,
+    "types": ["node", "environment"]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx",
+    "jest.config.ts",
+    "vitest.config.ts"
+  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
+}

tsconfig.spec.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "allowSyntheticDefaultImports": true,
+    "typeRoots": ["../../node_modules", "../../node_modules/@types", "../../typings"],
+    "types": ["vitest/importMeta", "vite/client", "node", "vitest", "environment"]
+  },
+  "include": [
+    "vitest.config.ts",
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "**/*.d.ts"
+  ]
+}

tsconfig.storybook.json

+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true,
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "noEmit": true,
+    "outDir": ""
+  },
+  "exclude": ["src/**/*.spec.ts", "src/**/*.spec.js", "src/**/*.spec.tsx", "src/**/*.spec.jsx", "jest.config.ts"],
+  "include": ["src/**/*", ".storybook/*.js"]
+}

vitest.config.ts

+import { defineConfig } from 'vitest/config';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/react',
+  plugins: [nxViteTsPaths()],
+  define: {
+    IS_REACT_ACT_ENVIRONMENT: true,
+  },
+  test: {
+    watch: false,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/packages/react',
+      provider: 'v8',
+    },
+  },
+});

package.json

 {
   "name": "@griffel/react",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "description": "React implementation of Atomic CSS-in-JS",
@@ -30,3 +30,3 @@ "license": "MIT",
   "dependencies": {
-    "@griffel/core": "^1.21.0",
+    "@griffel/core": "^1.21.1",
     "tslib": "^2.1.0"
@@ -37,2 +37,2 @@ },
   }
-}
+}

lib/__css.cjs

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

lib/__resetCSS.cjs

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

lib/__resetStyles.cjs

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

lib/__staticCSS.cjs

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

lib/__staticStyles.cjs

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

lib/__styles.cjs

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

lib/index.cjs

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

lib/insertionFactory.cjs

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

lib/makeResetStyles.cjs

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

lib/makeStaticStyles.cjs

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

lib/makeStyles.cjs

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

lib/RendererContext.cjs

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

lib/renderToStyleElements.cjs

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

lib/TextDirectionContext.cjs

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

lib/useInsertionEffect.cjs

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

lib/utils/canUseDOM.cjs

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

lib/utils/isInsideComponent.cjs

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

LICENSE.md

-    MIT License
-
-    Copyright (c) Microsoft Corporation.
-
-    Permission is hereby granted, free of charge, to any person obtaining a copy
-    of this software and associated documentation files (the "Software"), to deal
-    in the Software without restriction, including without limitation the rights
-    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-    copies of the Software, and to permit persons to whom the Software is
-    furnished to do so, subject to the following conditions:
-
-    The above copyright notice and this permission notice shall be included in all
-    copies or substantial portions of the Software.
-
-    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-    SOFTWARE

src/__css.d.ts

-import type { CSSClassesMapBySlot } from '@griffel/core';
-/**
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @private
- */
-export declare function __css<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>): () => Record<Slots, string>;

src/__css.js

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

src/__css.js.map

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

src/__resetCSS.d.ts

-/**
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @private
- */
-export declare function __resetCSS(ltrClassName: string, rtlClassName: string | null): () => string;

src/__resetCSS.js

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

src/__resetCSS.js.map

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

src/__resetStyles.d.ts

-import type { CSSRulesByBucket } from '@griffel/core';
-/**
- * A version of makeResetStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @private
- */
-export declare function __resetStyles(ltrClassName: string, rtlClassName: string | null, cssRules: CSSRulesByBucket | string[]): () => string;

src/__resetStyles.js

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

src/__resetStyles.js.map

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

src/__staticCSS.d.ts

-/**
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms & DOM insertion.
- *
- * @private
- */
-export declare function __staticCSS(): () => void;

src/__staticCSS.js

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

src/__staticCSS.js.map

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

src/__staticStyles.d.ts

-import type { CSSRulesByBucket } from '@griffel/core';
-/**
- * A version of makeStaticStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @private
- */
-export declare function __staticStyles(cssRules: CSSRulesByBucket): () => void;

src/__staticStyles.js

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

src/__staticStyles.js.map

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

src/__styles.d.ts

-import type { CSSClassesMapBySlot, CSSRulesByBucket } from '@griffel/core';
-/**
- * A version of makeStyles() that accepts build output as an input and skips all runtime transforms.
- *
- * @private
- */
-export declare function __styles<Slots extends string>(classesMapBySlot: CSSClassesMapBySlot<Slots>, cssRules: CSSRulesByBucket): () => Record<Slots, string>;

src/__styles.js

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

src/__styles.js.map

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

src/index.d.ts

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

src/index.js

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

src/index.js.map

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

src/insertionFactory.d.ts

-import type { GriffelInsertionFactory } from '@griffel/core';
-export declare const insertionFactory: GriffelInsertionFactory;

src/insertionFactory.js

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

src/insertionFactory.js.map

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

src/makeResetStyles.d.ts

-import type { GriffelResetStyle } from '@griffel/core';
-export declare function makeResetStyles(styles: GriffelResetStyle): () => string;

src/makeResetStyles.js

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

src/makeResetStyles.js.map

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

src/makeStaticStyles.d.ts

-import type { GriffelStaticStyles } from '@griffel/core';
-export declare function makeStaticStyles(styles: GriffelStaticStyles | GriffelStaticStyles[]): () => void;

src/makeStaticStyles.js

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

src/makeStaticStyles.js.map

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

src/makeStyles.d.ts

-import type { GriffelStyle } from '@griffel/core';
-export declare function makeStyles<Slots extends string | number>(stylesBySlots: Record<Slots, GriffelStyle>): () => Record<Slots, string>;

src/makeStyles.js

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

src/makeStyles.js.map

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

src/RendererContext.d.ts

-import type { GriffelRenderer } from '@griffel/core';
-import { type FC, type ReactNode } from 'react';
-export interface RendererProviderProps {
-    /** An instance of Griffel renderer. */
-    renderer: GriffelRenderer;
-    /**
-     * Document used to insert CSS variables to head
-     */
-    targetDocument?: Document;
-    /**
-     * Content wrapped by the RendererProvider
-     */
-    children: ReactNode;
-}
-/**
- * @public
- */
-export declare const RendererProvider: FC<RendererProviderProps>;
-/**
- * Returns an instance of current makeStyles() renderer.
- *
- * @private Exported as "useRenderer_unstable" use it on own risk. Can be changed or removed without a notice.
- */
-export declare function useRenderer(): GriffelRenderer;

src/RendererContext.js

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

src/RendererContext.js.map

-{"version":3,"file":"RendererContext.js","sourceRoot":"","sources":["../../../../packages/react/src/RendererContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAA2B,MAAM,OAAO,CAAC;AAEpF,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAiBjD;;GAEG;AACH,MAAM,eAAe,GAAG,aAAa,CAAC,aAAa,CAAkB,aAAa,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAExG;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,EAAE;IACpG,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,kHAAkH;YAClH,oCAAoC;YACpC,sBAAsB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;QACnD,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC,CAAC;IAE/B,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAAG,QAAQ,GAA4B,CAAC;AAC1F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,WAAW;IACzB,OAAO,UAAU,CAAC,eAAe,CAAC,CAAC;AACrC,CAAC"}

src/renderToStyleElements.d.ts

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

src/renderToStyleElements.js

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

src/renderToStyleElements.js.map

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

src/TextDirectionContext.d.ts

-import { type FC, type ReactNode } from 'react';
-export interface TextDirectionProviderProps {
-    /** Indicates the directionality of the element's text. */
-    dir: 'ltr' | 'rtl';
-    /**
-     * Content wrapped by the TextDirectionProvider.
-     */
-    children: ReactNode;
-}
-/**
- * @public
- */
-export declare const TextDirectionProvider: FC<TextDirectionProviderProps>;
-/**
- * Returns current directionality of the element's text.
- *
- * @private
- */
-export declare function useTextDirection(): "rtl" | "ltr";

src/TextDirectionContext.js

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

src/TextDirectionContext.js.map

-{"version":3,"file":"TextDirectionContext.js","sourceRoot":"","sources":["../../../../packages/react/src/TextDirectionContext.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,UAAU,EAA2B,MAAM,OAAO,CAAC;AAY3E;;GAEG;AACH,MAAM,oBAAoB,GAAG,aAAa,CAAC,aAAa,CAAgB,KAAK,CAAC,CAAC;AAE/E;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAmC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE;IACzF,OAAO,KAAC,oBAAoB,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAAG,QAAQ,GAAiC,CAAC;AAC/F,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,UAAU,CAAC,oBAAoB,CAAC,CAAC;AAC1C,CAAC"}

src/useInsertionEffect.d.ts

-export {};

src/useInsertionEffect.js

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

src/useInsertionEffect.js.map

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

src/utils/canUseDOM.d.ts

-export {};

src/utils/canUseDOM.js

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

src/utils/canUseDOM.js.map

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

src/utils/isInsideComponent.d.ts

-export {};

src/utils/isInsideComponent.js

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

src/utils/isInsideComponent.js.map

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

New alerts

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Environment variable access

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

111311

72.1%

Lines of code

2799

173.07%

Worsened metrics

Number of package files

48

-32.39%

Number of medium maintenance alerts

1

Infinity%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• Updated

  @griffel/core@^1.21.1