@compiled/react 0.18.5 → 0.19.0

package/dist/browser/jsx/jsx-dev-runtime.d.ts

@@ -1,2 +1,7 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsxDEV: typeof ReactJSXRuntimeDev.jsxDEV;

package/dist/browser/jsx/jsx-dev-runtime.js

@@ -1,4 +1,4 @@
-// Pass through the (automatic) jsx dev runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export const Fragment = ReactJSXRuntimeDev.Fragment;
+export const jsxDEV = ReactJSXRuntimeDev.jsxDEV;
 //# sourceMappingURL=jsx-dev-runtime.js.map

package/dist/browser/jsx/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAEA,gDAAgD;AAChD,kGAAkG;AAClG,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,CAAC"}

package/dist/browser/jsx/jsx-runtime.d.ts

@@ -1,2 +1,8 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsx: typeof ReactJSXRuntime.jsx;
+export declare const jsxs: typeof ReactJSXRuntime.jsxs;

package/dist/browser/jsx/jsx-runtime.js

@@ -1,4 +1,5 @@
-// Pass through the (automatic) jsx runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export const Fragment = ReactJSXRuntime.Fragment;
+export const jsx = ReactJSXRuntime.jsx;
+export const jsxs = ReactJSXRuntime.jsxs;
 //# sourceMappingURL=jsx-runtime.js.map

package/dist/browser/jsx/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,mBAAmB,CAAC;AACrD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;AACjD,MAAM,CAAC,MAAM,GAAG,GAA+B,eAAe,CAAC,GAAG,CAAC;AACnE,MAAM,CAAC,MAAM,IAAI,GAAgC,eAAe,CAAC,IAAI,CAAC"}

package/dist/browser/types.d.ts

@@ -19,9 +19,9 @@ export type CssObject<TProps> = Readonly<{
 }>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
 export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition';
-export type FlattenedChainedCSSPseudosClasses = '&:visited:active' | '&:visited:hover' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus:not(:focus-visible)';
+export type CSSFlattenedChainedPsuedos = '&:visited:active' | '&:visited:hover' | '&:visited:focus' | '&:visited:focus-visible' | '&:visited:focus-within' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus::before' | '&:focus::after' | '&:focus-within::before' | '&:focus-within::after' | '&:focus:not(:focus-visible)';
 export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
-export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+export type AllCSSPseudoClasses = CSSPseudoClasses | CSSFlattenedChainedPsuedos;
 export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
 /**
  * The XCSSProp must be given all known available properties even

package/dist/cjs/jsx/jsx-dev-runtime.d.ts

@@ -1,2 +1,7 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsxDEV: typeof ReactJSXRuntimeDev.jsxDEV;

package/dist/cjs/jsx/jsx-dev-runtime.js

@@ -10,11 +10,21 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// Pass through the (automatic) jsx dev runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-__exportStar(require("react/jsx-dev-runtime"), exports);
+exports.jsxDEV = exports.Fragment = void 0;
+const ReactJSXRuntimeDev = __importStar(require("react/jsx-dev-runtime"));
+exports.Fragment = ReactJSXRuntimeDev.Fragment;
+exports.jsxDEV = ReactJSXRuntimeDev.jsxDEV;
 //# sourceMappingURL=jsx-dev-runtime.js.map

package/dist/cjs/jsx/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAEA,gDAAgD;AAChD,kGAAkG;AAClG,wDAAsC"}
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,0EAA4D;AAC/C,QAAA,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AACvC,QAAA,MAAM,GAAG,kBAAkB,CAAC,MAAM,CAAC"}

package/dist/cjs/jsx/jsx-runtime.d.ts

@@ -1,2 +1,8 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsx: typeof ReactJSXRuntime.jsx;
+export declare const jsxs: typeof ReactJSXRuntime.jsxs;

package/dist/cjs/jsx/jsx-runtime.js

@@ -10,11 +10,22 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
 }));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-// Pass through the (automatic) jsx runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-__exportStar(require("react/jsx-runtime"), exports);
+exports.jsxs = exports.jsx = exports.Fragment = void 0;
+const ReactJSXRuntime = __importStar(require("react/jsx-runtime"));
+exports.Fragment = ReactJSXRuntime.Fragment;
+exports.jsx = ReactJSXRuntime.jsx;
+exports.jsxs = ReactJSXRuntime.jsxs;
 //# sourceMappingURL=jsx-runtime.js.map

package/dist/cjs/jsx/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,oDAAkC"}
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,mEAAqD;AACxC,QAAA,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;AACpC,QAAA,GAAG,GAA+B,eAAe,CAAC,GAAG,CAAC;AACtD,QAAA,IAAI,GAAgC,eAAe,CAAC,IAAI,CAAC"}

package/dist/cjs/types.d.ts

@@ -19,9 +19,9 @@ export type CssObject<TProps> = Readonly<{
 }>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
 export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition';
-export type FlattenedChainedCSSPseudosClasses = '&:visited:active' | '&:visited:hover' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus:not(:focus-visible)';
+export type CSSFlattenedChainedPsuedos = '&:visited:active' | '&:visited:hover' | '&:visited:focus' | '&:visited:focus-visible' | '&:visited:focus-within' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus::before' | '&:focus::after' | '&:focus-within::before' | '&:focus-within::after' | '&:focus:not(:focus-visible)';
 export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
-export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+export type AllCSSPseudoClasses = CSSPseudoClasses | CSSFlattenedChainedPsuedos;
 export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
 /**
  * The XCSSProp must be given all known available properties even

package/dist/esm/jsx/jsx-dev-runtime.d.ts

@@ -1,2 +1,7 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsxDEV: typeof ReactJSXRuntimeDev.jsxDEV;

package/dist/esm/jsx/jsx-dev-runtime.js

@@ -1,4 +1,4 @@
-// Pass through the (automatic) jsx dev runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export const Fragment = ReactJSXRuntimeDev.Fragment;
+export const jsxDEV = ReactJSXRuntimeDev.jsxDEV;
 //# sourceMappingURL=jsx-dev-runtime.js.map

package/dist/esm/jsx/jsx-dev-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAEA,gDAAgD;AAChD,kGAAkG;AAClG,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"jsx-dev-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-dev-runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,uBAAuB,CAAC;AAC5D,MAAM,CAAC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,QAAQ,CAAC;AACpD,MAAM,CAAC,MAAM,MAAM,GAAG,kBAAkB,CAAC,MAAM,CAAC"}

package/dist/esm/jsx/jsx-runtime.d.ts

@@ -1,2 +1,8 @@
+/// <reference types="react" />
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export declare const Fragment: import("react").ExoticComponent<{
+    children?: import("react").ReactNode;
+}>;
+export declare const jsx: typeof ReactJSXRuntime.jsx;
+export declare const jsxs: typeof ReactJSXRuntime.jsxs;

package/dist/esm/jsx/jsx-runtime.js

@@ -1,4 +1,5 @@
-// Pass through the (automatic) jsx runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export const Fragment = ReactJSXRuntime.Fragment;
+export const jsx = ReactJSXRuntime.jsx;
+export const jsxs = ReactJSXRuntime.jsxs;
 //# sourceMappingURL=jsx-runtime.js.map

package/dist/esm/jsx/jsx-runtime.js.map

@@ -1 +1 @@
-{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAEA,4CAA4C;AAC5C,kGAAkG;AAClG,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"jsx-runtime.js","sourceRoot":"","sources":["../../../src/jsx/jsx-runtime.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,mBAAmB,CAAC;AACrD,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC,QAAQ,CAAC;AACjD,MAAM,CAAC,MAAM,GAAG,GAA+B,eAAe,CAAC,GAAG,CAAC;AACnE,MAAM,CAAC,MAAM,IAAI,GAAgC,eAAe,CAAC,IAAI,CAAC"}

package/dist/esm/types.d.ts

@@ -19,9 +19,9 @@ export type CssObject<TProps> = Readonly<{
 }>;
 export type CssFunction<TProps = unknown> = CssType<TProps> | BasicTemplateInterpolations | null | boolean | undefined;
 export type CSSPseudoElements = '&::after' | '&::backdrop' | '&::before' | '&::cue' | '&::cue-region' | '&::first-letter' | '&::first-line' | '&::grammar-error' | '&::marker' | '&::placeholder' | '&::selection' | '&::spelling-error' | '&::target-text' | '&::view-transition';
-export type FlattenedChainedCSSPseudosClasses = '&:visited:active' | '&:visited:hover' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus:not(:focus-visible)';
+export type CSSFlattenedChainedPsuedos = '&:visited:active' | '&:visited:hover' | '&:visited:focus' | '&:visited:focus-visible' | '&:visited:focus-within' | '&:active:visited' | '&:hover::before' | '&:hover::after' | '&:focus-visible::before' | '&:focus-visible::after' | '&:focus::before' | '&:focus::after' | '&:focus-within::before' | '&:focus-within::after' | '&:focus:not(:focus-visible)';
 export type CSSPseudoClasses = '&:active' | '&:autofill' | '&:blank' | '&:checked' | '&:default' | '&:defined' | '&:disabled' | '&:empty' | '&:enabled' | '&:first' | '&:focus' | '&:focus-visible' | '&:focus-within' | '&:fullscreen' | '&:hover' | '&:in-range' | '&:indeterminate' | '&:invalid' | '&:left' | '&:link' | '&:local-link' | '&:optional' | '&:out-of-range' | '&:paused' | '&:picture-in-picture' | '&:placeholder-shown' | '&:playing' | '&:read-only' | '&:read-write' | '&:required' | '&:right' | '&:target' | '&:user-invalid' | '&:user-valid' | '&:valid' | '&:visited';
-export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+export type AllCSSPseudoClasses = CSSPseudoClasses | CSSFlattenedChainedPsuedos;
 export type CSSPseudos = CSSPseudoElements | AllCSSPseudoClasses;
 /**
  * The XCSSProp must be given all known available properties even

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compiled/react",
-  "version": "0.18.5",
+  "version": "0.19.0",
   "description": "A familiar and performant compile time CSS-in-JS library for React.",
   "keywords": [
     "compiled",
@@ -78,15 +78,15 @@
     "@compiled/benchmark": "^1.1.0",
     "@compiled/utils": "^0.13.0",
     "@fixture/strict-api-test": "*",
-    "@testing-library/react": "^12.1.5",
+    "@testing-library/react": "^16.1.0",
     "@types/jsdom": "^16.2.15",
-    "@types/react-dom": "^17.0.22",
+    "@types/react-dom": "^18.3.1",
     "expect-type": "^0.20.0",
     "jsdom": "^19.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "peerDependencies": {
-    "react": ">= 16.12.0"
+    "react": ">=18.0.0"
   }
 }

package/src/__tests__/server-side-hydrate.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { hydrate } from 'react-dom';
+import { hydrateRoot } from 'react-dom/client';
 
 import { CC, CS } from '../runtime';
 
@@ -34,12 +34,12 @@ describe('server side hydrate', () => {
     );
 
     flushRuntimeModule();
-    hydrate(
+    hydrateRoot(
+      elem,
       <CC>
         <CS>{['.foo { color: blue; }', '.foo { color: blue; }']}</CS>
         <div className="foo">hello world</div>
-      </CC>,
-      elem
+      </CC>
     );
 
     expect(console.error).not.toHaveBeenCalled();

package/src/jsx/jsx-dev-runtime.ts

@@ -1,5 +1,5 @@
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
 
-// Pass through the (automatic) jsx dev runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-dev-runtime';
+import * as ReactJSXRuntimeDev from 'react/jsx-dev-runtime';
+export const Fragment = ReactJSXRuntimeDev.Fragment;
+export const jsxDEV = ReactJSXRuntimeDev.jsxDEV;

package/src/jsx/jsx-runtime.ts

@@ -1,5 +1,6 @@
 export type { CompiledJSX as JSX } from './jsx-local-namespace';
 
-// Pass through the (automatic) jsx runtime.
-// Compiled currently doesn't define its own and uses this purely to enable a local jsx namespace.
-export * from 'react/jsx-runtime';
+import * as ReactJSXRuntime from 'react/jsx-runtime';
+export const Fragment = ReactJSXRuntime.Fragment;
+export const jsx: typeof ReactJSXRuntime.jsx = ReactJSXRuntime.jsx;
+export const jsxs: typeof ReactJSXRuntime.jsxs = ReactJSXRuntime.jsxs;

package/src/runtime/__perf__/cs.test.tsx

@@ -2,7 +2,7 @@ import { runBenchmark } from '@compiled/benchmark';
 import { JSDOM } from 'jsdom';
 import * as React from 'react';
 import { memo } from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { renderToString } from 'react-dom/server';
 
 import { CC, CS } from '../index';
@@ -66,9 +66,8 @@ describe('CS benchmark', () => {
               renderToString(<>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>);
             }
           : (jsx: (key: number) => JSX.Element) => {
-              render(
-                <>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>,
-                globalThis.document.getElementById('root')
+              createRoot(globalThis.document.getElementById('root')!).render(
+                <>{Array.from({ length: 10 }).map((_, i) => jsx(i))}</>
               );
             };
 

package/src/runtime/__tests__/style.test.tsx

@@ -19,7 +19,7 @@ describe('<Style />', () => {
   });
 
   // We want to isolate the test to correctly mimic the environment being loaded in once
-  const createIsolatedTest = (callback: (Style: ComponentType) => void) => {
+  const createIsolatedTest = (callback: (Style: ComponentType<{ children: string[] }>) => void) => {
     jest.isolateModules(() => {
       // eslint-disable-next-line @typescript-eslint/no-var-requires
       const Style = require('../style');

package/src/styled/__tests__/index.test.tsx

@@ -236,7 +236,7 @@ describe('styled component', () => {
   });
 
   it('should inherit types from composed component', () => {
-    const Link = (props: { href: string }) => <a {...props} />;
+    const Link = (props: React.PropsWithChildren<{ href: string }>) => <a {...props} />;
     const StyledLink = styled(Link)({
       fontSize: 12,
     });

package/src/types.ts

@@ -51,14 +51,21 @@ export type CSSPseudoElements =
   | '&::target-text'
   | '&::view-transition';
 
-export type FlattenedChainedCSSPseudosClasses =
+export type CSSFlattenedChainedPsuedos =
   | '&:visited:active'
   | '&:visited:hover'
+  | '&:visited:focus'
+  | '&:visited:focus-visible'
+  | '&:visited:focus-within'
   | '&:active:visited'
   | '&:hover::before'
   | '&:hover::after'
   | '&:focus-visible::before'
   | '&:focus-visible::after'
+  | '&:focus::before'
+  | '&:focus::after'
+  | '&:focus-within::before'
+  | '&:focus-within::after'
   | '&:focus:not(:focus-visible)';
 
 export type CSSPseudoClasses =
@@ -99,7 +106,7 @@ export type CSSPseudoClasses =
   | '&:valid'
   | '&:visited';
 
-export type AllCSSPseudoClasses = CSSPseudoClasses | FlattenedChainedCSSPseudosClasses;
+export type AllCSSPseudoClasses = CSSPseudoClasses | CSSFlattenedChainedPsuedos;
 
 /*
  * This list of pseudo-classes, chained pseudo-classes, and pseudo-elements are from csstype