diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 29b9c589..61f524d8 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -6,6 +6,7 @@
     "packages/pigment-css-core",
     "packages/pigment-css-nextjs-plugin",
     "packages/pigment-css-react",
+    "packages/pigment-css-react-new",
     "packages/pigment-css-theme",
     "packages/pigment-css-unplugin",
     "packages/pigment-css-utils",
diff --git a/.eslintignore b/.eslintignore
index 1a9209a1..3b7fdb07 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -11,6 +11,8 @@
 /packages/pigment-css-react/tests/**/fixtures
 /packages/pigment-css-core/exports/
 /packages/pigment-css-core/tests/**/fixtures
+/packages/pigment-css-react-new/exports/
+/packages/pigment-css-react-new/tests/**/fixtures
 /packages/pigment-css-nextjs-plugin/loader.js
 # Ignore fixtures
 /packages-internal/scripts/typescript-to-proptypes/test/*/*
diff --git a/.eslintrc.js b/.eslintrc.js
index d36b0c24..c8de7cfe 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -83,6 +83,8 @@ module.exports = {
     ],
     'no-use-before-define': 'off',
 
+    'react/react-in-jsx-scope': 'off',
+
     // disabled type-aware linting due to performance considerations
     '@typescript-eslint/dot-notation': 'off',
     'dot-notation': 'error',
diff --git a/packages/pigment-css-react-new/README.md b/packages/pigment-css-react-new/README.md
new file mode 100644
index 00000000..f00cca52
--- /dev/null
+++ b/packages/pigment-css-react-new/README.md
@@ -0,0 +1,29 @@
+# Pigment CSS
+
+Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
+
+## Getting started
+
+Pigment CSS supports Next.js and Vite with support for more bundlers in the future.
+
+### Why choose Pigment CSS
+
+Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system.
+
+Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components.
+
+Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components.
+Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment CSS in v6.
+
+### Installation
+
+<!-- #default-branch-switch -->
+
+```bash
+npm install @pigment-css/core
+npm install --save-dev @pigment-css/nextjs-plugin
+```
+
+<!-- Replace this with the documentation link once it is available. -->
+
+For more information and getting started guide, check the [repository README.md](https://github.com/mui/pigment-css).
diff --git a/packages/pigment-css-react-new/exports/css.js b/packages/pigment-css-react-new/exports/css.js
new file mode 100644
index 00000000..90873c69
--- /dev/null
+++ b/packages/pigment-css-react-new/exports/css.js
@@ -0,0 +1,5 @@
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+
+exports.default = require('../build/processors/css').StyledCssProcessor;
diff --git a/packages/pigment-css-react-new/exports/styled.js b/packages/pigment-css-react-new/exports/styled.js
new file mode 100644
index 00000000..88af3fd0
--- /dev/null
+++ b/packages/pigment-css-react-new/exports/styled.js
@@ -0,0 +1,5 @@
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+
+exports.default = require('../build/processors/styled').StyledProcessor;
diff --git a/packages/pigment-css-react-new/package.json b/packages/pigment-css-react-new/package.json
new file mode 100644
index 00000000..5e4cc0f3
--- /dev/null
+++ b/packages/pigment-css-react-new/package.json
@@ -0,0 +1,132 @@
+{
+  "name": "@pigment-css/react-new",
+  "version": "0.0.27",
+  "main": "build/index.js",
+  "module": "build/index.mjs",
+  "types": "build/index.d.ts",
+  "author": "MUI Team",
+  "description": "A zero-runtime CSS-in-JS library to be used with React.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mui/pigment-css.git",
+    "directory": "packages/pigment-css-react-new"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mui/pigment-css/issues"
+  },
+  "homepage": "https://github.com/mui/pigment-css/tree/master/README.md",
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/mui-org"
+  },
+  "scripts": {
+    "clean": "rimraf build",
+    "watch": "tsup --watch --clean false",
+    "copy-license": "node ../../scripts/pigment-license.mjs",
+    "build": "tsup",
+    "test": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=text mocha 'packages/pigment-css-react-new/**/*.test.{js,ts,tsx}'",
+    "test:update": "cd ../../ && cross-env NODE_ENV=test UPDATE_FIXTURES=true mocha 'packages/pigment-css-react-new/**/*.test.{js,ts,tsx}'",
+    "test:ci": "cd ../../ && cross-env NODE_ENV=test BABEL_ENV=coverage nyc --reporter=lcov --report-dir=./coverage/pigment-css-react-new mocha 'packages/pigment-css-react-new/**/*.test.{js,ts,tsx}'",
+    "typescript": "tsc --noEmit -p ."
+  },
+  "dependencies": {
+    "@babel/plugin-syntax-jsx": "^7.25.9",
+    "@babel/types": "^7.25.8",
+    "@pigment-css/core": "workspace:*",
+    "@pigment-css/utils": "workspace:*",
+    "@pigment-css/theme": "workspace:^",
+    "@wyw-in-js/processor-utils": "^0.5.5",
+    "@wyw-in-js/shared": "^0.5.5",
+    "@wyw-in-js/transform": "^0.5.5",
+    "csstype": "^3.1.3"
+  },
+  "peerDependencies": {
+    "react": "^17 || ^18 || ^19 || ^19.0.0-rc"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "@types/chai": "^4.3.14",
+    "chai": "^4.4.1",
+    "prettier": "^3.3.3",
+    "react": "^19.0.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "wyw-in-js": {
+    "tags": {
+      "styled": "./exports/styled.js",
+      "sx": "./exports/sx.js",
+      "keyframes": "@pigment-css/core/exports/keyframes",
+      "css": "./exports/css.js"
+    }
+  },
+  "files": [
+    "src",
+    "build",
+    "exports",
+    "package.json",
+    "styles.css",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./build/index.d.ts",
+      "import": {
+        "types": "./build/index.d.mts",
+        "default": "./build/index.mjs"
+      },
+      "require": "./build/index.js",
+      "default": "./build/index.js"
+    },
+    "./package.json": "./package.json",
+    "./styles.css": "./styles.css",
+    "./processors/css": {
+      "import": "./build/processors/css.mjs",
+      "require": "./build/processors/css.js",
+      "default": "./build/processors/css.js"
+    },
+    "./processors/styled": {
+      "import": "./build/processors/styled.mjs",
+      "require": "./build/processors/styled.js",
+      "default": "./build/processors/styled.js"
+    },
+    "./exports/*": {
+      "default": "./exports/*.js"
+    },
+    "./runtime": {
+      "import": "./build/runtime/index.mjs",
+      "require": "./build/runtime/index.js",
+      "default": "./build/runtime/index.js"
+    }
+  },
+  "nx": {
+    "targets": {
+      "test": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "test:update": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "test:ci": {
+        "cache": false,
+        "dependsOn": [
+          "build"
+        ]
+      },
+      "build": {
+        "outputs": [
+          "{projectRoot}/build"
+        ]
+      }
+    }
+  }
+}
diff --git a/packages/pigment-css-react-new/src/index.ts b/packages/pigment-css-react-new/src/index.ts
new file mode 100644
index 00000000..5cb0efb9
--- /dev/null
+++ b/packages/pigment-css-react-new/src/index.ts
@@ -0,0 +1,2 @@
+export * from '@pigment-css/core';
+export * from './styled';
diff --git a/packages/pigment-css-react-new/src/processors/css.ts b/packages/pigment-css-react-new/src/processors/css.ts
new file mode 100644
index 00000000..7d9832ae
--- /dev/null
+++ b/packages/pigment-css-react-new/src/processors/css.ts
@@ -0,0 +1,5 @@
+import { CssProcessor } from '@pigment-css/core/processors/css';
+
+export class StyledCssProcessor extends CssProcessor {
+  basePath = `${process.env.PACKAGE_NAME}/runtime`;
+}
diff --git a/packages/pigment-css-react-new/src/processors/styled.ts b/packages/pigment-css-react-new/src/processors/styled.ts
new file mode 100644
index 00000000..f4dd7e43
--- /dev/null
+++ b/packages/pigment-css-react-new/src/processors/styled.ts
@@ -0,0 +1,117 @@
+import { Identifier } from '@babel/types';
+import { evaluateClassNameArg } from '@pigment-css/utils';
+import {
+  type CallParam,
+  type Expression,
+  type MemberParam,
+  type Params,
+  type TailProcessorParams,
+  validateParams,
+} from '@wyw-in-js/processor-utils';
+import { ValueType } from '@wyw-in-js/shared';
+import { CssProcessor } from '@pigment-css/core/processors/css';
+import { BaseInterface } from '@pigment-css/core/css';
+
+export type TemplateCallback = (params: Record<string, unknown> | undefined) => string | number;
+
+type WrappedNode =
+  | string
+  | {
+      node: Identifier;
+      source: string;
+    };
+
+const REACT_COMPONENT = '$$reactComponent';
+
+export class StyledProcessor extends CssProcessor {
+  tagName: WrappedNode = '';
+
+  // eslint-disable-next-line class-methods-use-this
+  get packageName() {
+    return process.env.PACKAGE_NAME as string;
+  }
+
+  basePath = `${this.packageName}/runtime`;
+
+  constructor(params: Params, ...args: TailProcessorParams) {
+    const [callee, callOrMember, callOrTemplate] = params;
+    super([callee, callOrTemplate], ...args);
+
+    if (params.length === 3) {
+      validateParams(
+        params,
+        ['callee', ['call', 'member'], ['call', 'template']],
+        `Invalid use of ${this.tagSource.imported} function.`,
+      );
+
+      this.setTagName(callOrMember as CallParam | MemberParam);
+    } else {
+      throw new Error(`${this.packageName} Invalid call to ${this.tagSource.imported} function.`);
+    }
+  }
+
+  private setTagName(param: CallParam | MemberParam) {
+    if (param[0] === 'member') {
+      this.tagName = param[1];
+    } else {
+      const [, element, callOpt] = param;
+      switch (element.kind) {
+        case ValueType.CONST: {
+          if (typeof element.value === 'string') {
+            this.tagName = element.value;
+          }
+          break;
+        }
+        case ValueType.LAZY: {
+          this.tagName = {
+            node: element.ex,
+            source: element.source,
+          };
+          this.dependencies.push(element);
+          break;
+        }
+        case ValueType.FUNCTION: {
+          this.tagName = REACT_COMPONENT;
+          break;
+        }
+        default:
+          break;
+      }
+
+      if (callOpt) {
+        this.processor.staticClass = evaluateClassNameArg(callOpt.source) as BaseInterface;
+      }
+    }
+  }
+
+  getBaseClass(): string {
+    return this.className;
+  }
+
+  get asSelector(): string {
+    return this.processor.getBaseClass();
+  }
+
+  get value(): Expression {
+    return this.astService.stringLiteral(`.${this.processor.getBaseClass()}`);
+  }
+
+  createReplacement() {
+    const t = this.astService;
+    const callId = t.addNamedImport('styled', this.getImportPath());
+    const elementOrComponent = (() => {
+      if (typeof this.tagName === 'string') {
+        if (this.tagName === REACT_COMPONENT) {
+          return t.arrowFunctionExpression([], t.blockStatement([]));
+        }
+        return t.stringLiteral(this.tagName);
+      }
+      if (this.tagName?.node) {
+        return t.callExpression(t.identifier(this.tagName.node.name), []);
+      }
+      return t.nullLiteral();
+    })();
+    const firstCall = t.callExpression(callId, [elementOrComponent]);
+    return t.callExpression(firstCall, [this.getStyleArgs()]);
+  }
+}
diff --git a/packages/pigment-css-react-new/src/runtime/index.ts b/packages/pigment-css-react-new/src/runtime/index.ts
new file mode 100644
index 00000000..85fa192f
--- /dev/null
+++ b/packages/pigment-css-react-new/src/runtime/index.ts
@@ -0,0 +1,2 @@
+export * from '@pigment-css/core/runtime';
+export * from './styled';
diff --git a/packages/pigment-css-react-new/src/runtime/styled.js b/packages/pigment-css-react-new/src/runtime/styled.js
new file mode 100644
index 00000000..27a0892d
--- /dev/null
+++ b/packages/pigment-css-react-new/src/runtime/styled.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export function styled(component) {
+  function classWrapper({ displayName }) {
+    // eslint-disable-next-line react/prop-types
+    const WrappedComponent = React.forwardRef(function WrappedComponent({ as: asProp, ...rest }) {
+      const FinalComponent = asProp ?? component;
+      return <FinalComponent {...rest} />;
+    });
+    WrappedComponent.displayName = `Pigment(${displayName ?? 'Styled'})`;
+  }
+  return classWrapper;
+}
diff --git a/packages/pigment-css-react-new/src/styled.d.ts b/packages/pigment-css-react-new/src/styled.d.ts
new file mode 100644
index 00000000..fa6a253e
--- /dev/null
+++ b/packages/pigment-css-react-new/src/styled.d.ts
@@ -0,0 +1 @@
+export declare function styled(): void;
diff --git a/packages/pigment-css-react-new/src/styled.js b/packages/pigment-css-react-new/src/styled.js
new file mode 100644
index 00000000..9a82254a
--- /dev/null
+++ b/packages/pigment-css-react-new/src/styled.js
@@ -0,0 +1 @@
+export { styled } from './runtime/styled';
diff --git a/packages/pigment-css-react-new/src/sx.d.ts b/packages/pigment-css-react-new/src/sx.d.ts
new file mode 100644
index 00000000..ba4394ec
--- /dev/null
+++ b/packages/pigment-css-react-new/src/sx.d.ts
@@ -0,0 +1,10 @@
+import type { CSSObjectNoCallback, ThemeArgs } from '@pigment-css/core';
+
+type GetTheme<Argument> = Argument extends { theme: infer Theme } ? Theme : never;
+
+export type SxProp =
+  | CSSObjectNoCallback
+  | ((theme: GetTheme<ThemeArgs>) => CSSObjectNoCallback)
+  | ReadonlyArray<CSSObjectNoCallback | ((theme: GetTheme<ThemeArgs>) => CSSObjectNoCallback)>;
+
+export default function sx(arg: SxProp, componentClass?: string): string;
diff --git a/packages/pigment-css-react-new/styles.css b/packages/pigment-css-react-new/styles.css
new file mode 100644
index 00000000..87774e54
--- /dev/null
+++ b/packages/pigment-css-react-new/styles.css
@@ -0,0 +1,3 @@
+/**
+ * Placeholder css file where theme contents will be injected by the bundler
+ */
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.input.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.input.js
new file mode 100644
index 00000000..26a8765a
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.input.js
@@ -0,0 +1,37 @@
+import { styled, keyframes } from '@pigment-css/react-new';
+
+function TestComponent() {
+  return <h1>Hello World</h1>;
+}
+
+const rotateKeyframe = keyframes({
+  from: {
+    transform: 'translateX(0%)',
+  },
+  to: {
+    transform: 'translateX(100%)',
+  },
+});
+
+const Component = styled.div({
+  animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
+  marginLeft: 10,
+});
+
+export const SliderRail = styled(TestComponent, {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})`
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-top-left-radius: 3px;
+`;
+
+const SliderRail2 = styled.span`
+  ${SliderRail} {
+    padding-inline-start: none;
+    margin: 0px 10px 10px 30px;
+  }
+`;
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.css b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.css
new file mode 100644
index 00000000..ad7f38c2
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.css
@@ -0,0 +1,5 @@
+@layer pigment.base{@keyframes r1gkqk0p{from{transform:translateX(0%);}to{transform:translateX(100%);}}}
+@layer pigment.base{.cor4ri8{animation:r1gkqk0p 2s ease-out 0s infinite;margin-left:10px;}}
+@layer pigment.base{.sn659j3{display:block;position:absolute;left:0;top:0;border-top-left-radius:3px;}}
+@layer pigment.base{.s9z6p60 .sn659j3{padding-inline-start:none;margin:0px 10px 10px 30px;}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1pbXBvcnQtcmVwbGFjZW1lbnQuaW5wdXQuanMiXSwibmFtZXMiOlsiLnIxZ2txazBwIiwiLmNvcjRyaTgiLCIuc242NTlqMyIsIi5zOXo2cDYwIl0sIm1hcHBpbmdzIjoiQUFNaUNBO0FBU0pDO0FBS0hDO0FBV05DIiwiZmlsZSI6Ii9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1pbXBvcnQtcmVwbGFjZW1lbnQuaW5wdXQuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgc3R5bGVkLCBrZXlmcmFtZXMgfSBmcm9tICdAcGlnbWVudC1jc3MvcmVhY3QtbmV3JztcblxuZnVuY3Rpb24gVGVzdENvbXBvbmVudCgpIHtcbiAgcmV0dXJuIDxoMT5IZWxsbyBXb3JsZDwvaDE+O1xufVxuXG5jb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHtcbiAgICB0cmFuc2Zvcm06ICd0cmFuc2xhdGVYKDAlKScsXG4gIH0sXG4gIHRvOiB7XG4gICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgxMDAlKScsXG4gIH0sXG59KTtcblxuY29uc3QgQ29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gIGFuaW1hdGlvbjogYCR7cm90YXRlS2V5ZnJhbWV9IDJzIGVhc2Utb3V0IDBzIGluZmluaXRlYCxcbiAgbWFyZ2luTGVmdDogMTAsXG59KTtcblxuZXhwb3J0IGNvbnN0IFNsaWRlclJhaWwgPSBzdHlsZWQoVGVzdENvbXBvbmVudCwge1xuICBuYW1lOiAnTXVpU2xpZGVyJyxcbiAgc2xvdDogJ1JhaWwnLFxufSlgXG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGxlZnQ6IDA7XG4gIHRvcDogMDtcbiAgYm9yZGVyLXRvcC1sZWZ0LXJhZGl1czogM3B4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDIgPSBzdHlsZWQuc3BhbmBcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgcGFkZGluZy1pbmxpbmUtc3RhcnQ6IG5vbmU7XG4gICAgbWFyZ2luOiAwcHggMTBweCAxMHB4IDMwcHg7XG4gIH1cbmA7XG4iXX0=*/
\ No newline at end of file
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.js
new file mode 100644
index 00000000..784ed810
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.js
@@ -0,0 +1,14 @@
+import { styled as _styled, styled as _styled2, styled as _styled3 } from '@my-lib/react/styled';
+function TestComponent() {
+  return <h1>Hello World</h1>;
+}
+const Component = /*#__PURE__*/ _styled('div')({
+  classes: 'cor4ri8',
+});
+const _exp3 = /*#__PURE__*/ () => TestComponent;
+export const SliderRail = /*#__PURE__*/ _styled2(_exp3())({
+  classes: 'sn659j3',
+});
+const SliderRail2 = /*#__PURE__*/ _styled3('span')({
+  classes: 's9z6p60',
+});
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.input.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.input.js
new file mode 100644
index 00000000..cd06929d
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.input.js
@@ -0,0 +1,107 @@
+import { styled, keyframes } from '@pigment-css/react-new';
+
+const rotateKeyframe = keyframes({
+  from: {
+    transform: 'rotate(360deg)',
+  },
+  to: {
+    transform: 'rotate(0deg)',
+  },
+});
+
+function TestComponent() {
+  return <h1>Hello</h1>;
+}
+
+const StyledTest = styled(TestComponent)({
+  $$id: 0,
+  display: 'block',
+  position: 'absolute',
+  borderRadius: 'inherit',
+  color(props) {
+    return props.size === 'small' ? 'red' : 'blue';
+  },
+  variants: {
+    size: {
+      small: {
+        $$id: '01',
+        padding: 0,
+        margin: 0,
+        borderColor: 'red',
+      },
+      medium: {
+        $$id: '02',
+        padding: 5,
+      },
+      large: {
+        $$id: '03',
+        padding: 10,
+      },
+    },
+  },
+});
+
+export const SliderRail3 = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})({
+  $$id: 1,
+  display: 'block',
+  position: 'absolute',
+  borderRadius: 'inherit',
+  backgroundColor: 'currentColor',
+  opacity: 0.38,
+});
+
+export const SliderRail = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})`
+  ---id: 2;
+  display: block;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0.38;
+`;
+
+const SliderRail5 = styled.span({
+  display: 'block',
+  opacity: 0.38,
+  [SliderRail]: {
+    display: 'none',
+  },
+});
+
+const Component = styled.div({
+  $$id: 3,
+  color: '#ff5252',
+  animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
+});
+
+const SliderRail2 = styled('span')`
+  ---id: 4;
+  display: block;
+  opacity: 0.38;
+  ${SliderRail} {
+    display: none;
+  }
+`;
+
+const SliderRail4 = styled.span`
+  ---id: 5;
+  display: block;
+  opacity: 0.38;
+  ${SliderRail} {
+    display: none;
+  }
+`;
+
+export function App() {
+  return (
+    <Component>
+      <SliderRail />
+      <SliderRail2 />
+    </Component>
+  );
+}
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.css b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.css
new file mode 100644
index 00000000..d7a8cecf
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.css
@@ -0,0 +1,12 @@
+@keyframes rl9f3t2 {from{transform:rotate(360deg);}to{transform:rotate(0deg);}}
+.s1k22dj{---id:0;display:block;position:absolute;border-radius:inherit;color:var(--s1k22dj-1);}
+.s1k22dj-size-small{---id:01;padding:0;margin:0;border-color:red;}
+.s1k22dj-size-medium{---id:02;padding:5px;}
+.s1k22dj-size-large{---id:03;padding:10px;}
+.scx6lci{---id:1;display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;}
+.s1uutepx{---id:2;display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;}
+.s1czomkm{display:block;opacity:0.38;}.s1czomkm .s1uutepx{display:none;}
+.camj2o9{---id:3;color:#ff5252;animation:rl9f3t2 2s ease-out 0s infinite;}
+.s9jspa8{---id:4;display:block;opacity:0.38;}.s9jspa8 .s1uutepx{display:none;}
+.sg47azp{---id:5;display:block;opacity:0.38;}.sg47azp .s1uutepx{display:none;}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1uby1sYXllci5pbnB1dC5qcyJdLCJuYW1lcyI6WyIucmw5ZjN0MiIsIi5zMWsyMmRqIiwiLnMxazIyZGotc2l6ZS1zbWFsbCIsIi5zMWsyMmRqLXNpemUtbWVkaXVtIiwiLnMxazIyZGotc2l6ZS1sYXJnZSIsIi5zY3g2bGNpIiwiLnMxdXV0ZXB4IiwiLnMxY3pvbWttIiwiLmNhbWoybzkiLCIuczlqc3BhOCIsIi5zZzQ3YXpwIl0sIm1hcHBpbmdzIjoiQUFFaUNBO0FBYVFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBK0J0Q0M7QUFTdUJDO0FBWU1DO0FBUUhDO0FBTVRDO0FBU0FDIiwiZmlsZSI6Ii9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1uby1sYXllci5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdHlsZWQsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9yZWFjdC1uZXcnO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMzYwZGVnKScsXG4gIH0sXG4gIHRvOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgfSxcbn0pO1xuXG5mdW5jdGlvbiBUZXN0Q29tcG9uZW50KCkge1xuICByZXR1cm4gPGgxPkhlbGxvPC9oMT47XG59XG5cbmNvbnN0IFN0eWxlZFRlc3QgPSBzdHlsZWQoVGVzdENvbXBvbmVudCkoe1xuICAkJGlkOiAwLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIGNvbG9yKHByb3BzKSB7XG4gICAgcmV0dXJuIHByb3BzLnNpemUgPT09ICdzbWFsbCcgPyAncmVkJyA6ICdibHVlJztcbiAgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGlkOiAnMDEnLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncmVkJyxcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRpZDogJzAyJyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGlkOiAnMDMnLFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbDMgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KSh7XG4gICQkaWQ6IDEsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgYmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgb3BhY2l0eTogMC4zOCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbCA9IHN0eWxlZCgnc3BhbicsIHtcbiAgbmFtZTogJ011aVNsaWRlcicsXG4gIHNsb3Q6ICdSYWlsJyxcbn0pYFxuICAtLS1pZDogMjtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudENvbG9yO1xuICBvcGFjaXR5OiAwLjM4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDUgPSBzdHlsZWQuc3Bhbih7XG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIG9wYWNpdHk6IDAuMzgsXG4gIFtTbGlkZXJSYWlsXToge1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgJCRpZDogMyxcbiAgY29sb3I6ICcjZmY1MjUyJyxcbiAgYW5pbWF0aW9uOiBgJHtyb3RhdGVLZXlmcmFtZX0gMnMgZWFzZS1vdXQgMHMgaW5maW5pdGVgLFxufSk7XG5cbmNvbnN0IFNsaWRlclJhaWwyID0gc3R5bGVkKCdzcGFuJylgXG4gIC0tLWlkOiA0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2xpZGVyUmFpbDQgPSBzdHlsZWQuc3BhbmBcbiAgLS0taWQ6IDU7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvcGFjaXR5OiAwLjM4O1xuICAke1NsaWRlclJhaWx9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5gO1xuXG5leHBvcnQgZnVuY3Rpb24gQXBwKCkge1xuICByZXR1cm4gKFxuICAgIDxDb21wb25lbnQ+XG4gICAgICA8U2xpZGVyUmFpbCAvPlxuICAgICAgPFNsaWRlclJhaWwyIC8+XG4gICAgPC9Db21wb25lbnQ+XG4gICk7XG59XG4iXX0=*/
\ No newline at end of file
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.js
new file mode 100644
index 00000000..ca3e3e5c
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.js
@@ -0,0 +1,70 @@
+import {
+  styled as _styled,
+  styled as _styled2,
+  styled as _styled3,
+  styled as _styled4,
+  styled as _styled5,
+  styled as _styled6,
+  styled as _styled7,
+} from '@pigment-css/react-new/runtime';
+function TestComponent() {
+  return <h1>Hello</h1>;
+}
+const _exp2 = /*#__PURE__*/ () => TestComponent;
+const StyledTest = /*#__PURE__*/ _styled(_exp2())({
+  classes: 's1k22dj',
+  variants: [
+    {
+      $$cls: 's1k22dj-size-small',
+      props: {
+        size: 'small',
+      },
+    },
+    {
+      $$cls: 's1k22dj-size-medium',
+      props: {
+        size: 'medium',
+      },
+    },
+    {
+      $$cls: 's1k22dj-size-large',
+      props: {
+        size: 'large',
+      },
+    },
+  ],
+  vars: {
+    '--s1k22dj-1': [
+      (props) => {
+        return props.size === 'small' ? 'red' : 'blue';
+      },
+      0,
+    ],
+  },
+});
+export const SliderRail3 = /*#__PURE__*/ _styled2('span')({
+  classes: 'scx6lci',
+});
+export const SliderRail = /*#__PURE__*/ _styled3('span')({
+  classes: 's1uutepx',
+});
+const SliderRail5 = /*#__PURE__*/ _styled4('span')({
+  classes: 's1czomkm',
+});
+const Component = /*#__PURE__*/ _styled5('div')({
+  classes: 'camj2o9',
+});
+const SliderRail2 = /*#__PURE__*/ _styled6('span')({
+  classes: 's9jspa8',
+});
+const SliderRail4 = /*#__PURE__*/ _styled7('span')({
+  classes: 'sg47azp',
+});
+export function App() {
+  return (
+    <Component>
+      <SliderRail />
+      <SliderRail2 />
+    </Component>
+  );
+}
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js
new file mode 100644
index 00000000..e4689c85
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js
@@ -0,0 +1,116 @@
+import { styled, keyframes, css } from '@pigment-css/react-new';
+
+const cls1 = css({
+  color: 'red',
+});
+
+export const rotateKeyframe = keyframes({ className: 'rotate' })({
+  from: {
+    transform: 'rotate(360deg)',
+  },
+  to: {
+    transform: 'rotate(0deg)',
+  },
+});
+
+function TestComponent() {
+  return <h1>Hello</h1>;
+}
+
+const StyledTest = styled(TestComponent, {
+  className: 'StyledTest',
+})({
+  $$id: 0,
+  display: 'block',
+  position: 'absolute',
+  borderRadius: 'inherit',
+  [`.${cls1}`]: {
+    color: 'blue',
+  },
+  color(props) {
+    return props.size === 'small' ? 'red' : 'blue';
+  },
+  variants: {
+    size: {
+      small: {
+        $$id: '01',
+        padding: 0,
+        margin: 0,
+        borderColor: 'red',
+      },
+      medium: {
+        $$id: '02',
+        padding: 5,
+      },
+      large: {
+        $$id: '03',
+        padding: 10,
+      },
+    },
+  },
+});
+
+export const SliderRail3 = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})({
+  $$id: 1,
+  display: 'block',
+  position: 'absolute',
+  borderRadius: 'inherit',
+  backgroundColor: 'currentColor',
+  opacity: 0.38,
+});
+
+export const SliderRail = styled('span', {
+  name: 'MuiSlider',
+  slot: 'Rail',
+})`
+  ---id: 2;
+  display: block;
+  position: absolute;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0.38;
+`;
+
+const SliderRail5 = styled.span({
+  display: 'block',
+  opacity: 0.38,
+  [SliderRail]: {
+    display: 'none',
+  },
+});
+
+const Component = styled.div({
+  $$id: 3,
+  color: '#ff5252',
+  animation: `${rotateKeyframe} 2s ease-out 0s infinite`,
+});
+
+const SliderRail2 = styled('span')`
+  ---id: 4;
+  display: block;
+  opacity: 0.38;
+  ${SliderRail} {
+    display: none;
+  }
+`;
+
+const SliderRail4 = styled.span`
+  ---id: 5;
+  display: block;
+  opacity: 0.38;
+  ${SliderRail} {
+    display: none;
+  }
+`;
+
+export function App() {
+  return (
+    <Component>
+      <SliderRail />
+      <SliderRail2 />
+    </Component>
+  );
+}
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css
new file mode 100644
index 00000000..7b82483a
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css
@@ -0,0 +1,13 @@
+@layer pigment.base{.c1dgsgnh{color:red;}}
+@layer pigment.base{@keyframes rotate{from{transform:rotate(360deg);}to{transform:rotate(0deg);}}}
+@layer pigment.base{.StyledTest{---id:0;display:block;position:absolute;border-radius:inherit;color:var(--StyledTest-1);}.StyledTest .c1dgsgnh{color:blue;}}
+@layer pigment.variants{.StyledTest-size-small{---id:01;padding:0;margin:0;border-color:red;}}
+@layer pigment.variants{.StyledTest-size-medium{---id:02;padding:5px;}}
+@layer pigment.variants{.StyledTest-size-large{---id:03;padding:10px;}}
+@layer pigment.base{.s4ekdda{---id:1;display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;}}
+@layer pigment.base{.sqpzee{---id:2;display:block;position:absolute;border-radius:inherit;background-color:currentColor;opacity:0.38;}}
+@layer pigment.base{.s1o48m17{display:block;opacity:0.38;}.s1o48m17 .sqpzee{display:none;}}
+@layer pigment.base{.c13e7k7c{---id:3;color:#ff5252;animation:rotate 2s ease-out 0s infinite;}}
+@layer pigment.base{.sqzgjb7{---id:4;display:block;opacity:0.38;}.sqzgjb7 .sqpzee{display:none;}}
+@layer pigment.base{.sxcjuwu{---id:5;display:block;opacity:0.38;}.sxcjuwu .sqpzee{display:none;}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC5pbnB1dC5qcyJdLCJuYW1lcyI6WyIuYzFkZ3NnbmgiLCIucm90YXRlIiwiLlN0eWxlZFRlc3QiLCIuU3R5bGVkVGVzdC1zaXplLXNtYWxsIiwiLlN0eWxlZFRlc3Qtc2l6ZS1tZWRpdW0iLCIuU3R5bGVkVGVzdC1zaXplLWxhcmdlIiwiLnM0ZWtkZGEiLCIuc3FwemVlIiwiLnMxbzQ4bTE3IiwiLmMxM2U3azdjIiwiLnNxemdqYjciLCIuc3hjanV3dSJdLCJtYXBwaW5ncyI6IkFBRWlCQTtBQUlnREM7QUFlOURDO0FBQUFDO0FBQUFDO0FBQUFDO0FBa0NBQztBQVN1QkM7QUFZTUM7QUFRSEM7QUFNVEM7QUFTQUMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLXJlYWN0LW5ldy90ZXN0cy9zdHlsZWQvZml4dHVyZXMvc3R5bGVkLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZCwga2V5ZnJhbWVzLCBjc3MgfSBmcm9tICdAcGlnbWVudC1jc3MvcmVhY3QtbmV3JztcblxuY29uc3QgY2xzMSA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbn0pO1xuXG5leHBvcnQgY29uc3Qgcm90YXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pKHtcbiAgZnJvbToge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzNjBkZWcpJyxcbiAgfSxcbiAgdG86IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMGRlZyknLFxuICB9LFxufSk7XG5cbmZ1bmN0aW9uIFRlc3RDb21wb25lbnQoKSB7XG4gIHJldHVybiA8aDE+SGVsbG88L2gxPjtcbn1cblxuY29uc3QgU3R5bGVkVGVzdCA9IHN0eWxlZChUZXN0Q29tcG9uZW50LCB7XG4gIGNsYXNzTmFtZTogJ1N0eWxlZFRlc3QnLFxufSkoe1xuICAkJGlkOiAwLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIFtgLiR7Y2xzMX1gXToge1xuICAgIGNvbG9yOiAnYmx1ZScsXG4gIH0sXG4gIGNvbG9yKHByb3BzKSB7XG4gICAgcmV0dXJuIHByb3BzLnNpemUgPT09ICdzbWFsbCcgPyAncmVkJyA6ICdibHVlJztcbiAgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGlkOiAnMDEnLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncmVkJyxcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRpZDogJzAyJyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGlkOiAnMDMnLFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbDMgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KSh7XG4gICQkaWQ6IDEsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgYmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgb3BhY2l0eTogMC4zOCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbCA9IHN0eWxlZCgnc3BhbicsIHtcbiAgbmFtZTogJ011aVNsaWRlcicsXG4gIHNsb3Q6ICdSYWlsJyxcbn0pYFxuICAtLS1pZDogMjtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudENvbG9yO1xuICBvcGFjaXR5OiAwLjM4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDUgPSBzdHlsZWQuc3Bhbih7XG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIG9wYWNpdHk6IDAuMzgsXG4gIFtTbGlkZXJSYWlsXToge1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgJCRpZDogMyxcbiAgY29sb3I6ICcjZmY1MjUyJyxcbiAgYW5pbWF0aW9uOiBgJHtyb3RhdGVLZXlmcmFtZX0gMnMgZWFzZS1vdXQgMHMgaW5maW5pdGVgLFxufSk7XG5cbmNvbnN0IFNsaWRlclJhaWwyID0gc3R5bGVkKCdzcGFuJylgXG4gIC0tLWlkOiA0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2xpZGVyUmFpbDQgPSBzdHlsZWQuc3BhbmBcbiAgLS0taWQ6IDU7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvcGFjaXR5OiAwLjM4O1xuICAke1NsaWRlclJhaWx9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5gO1xuXG5leHBvcnQgZnVuY3Rpb24gQXBwKCkge1xuICByZXR1cm4gKFxuICAgIDxDb21wb25lbnQ+XG4gICAgICA8U2xpZGVyUmFpbCAvPlxuICAgICAgPFNsaWRlclJhaWwyIC8+XG4gICAgPC9Db21wb25lbnQ+XG4gICk7XG59XG4iXX0=*/
\ No newline at end of file
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js
new file mode 100644
index 00000000..ae6085e3
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js
@@ -0,0 +1,72 @@
+import {
+  css as _css,
+  styled as _styled,
+  styled as _styled2,
+  styled as _styled3,
+  styled as _styled4,
+  styled as _styled5,
+  styled as _styled6,
+  styled as _styled7,
+} from '@pigment-css/react-new/runtime';
+export const rotateKeyframe = 'rotate';
+function TestComponent() {
+  return <h1>Hello</h1>;
+}
+const _exp4 = /*#__PURE__*/ () => TestComponent;
+const StyledTest = /*#__PURE__*/ _styled(_exp4())({
+  classes: 'StyledTest',
+  variants: [
+    {
+      $$cls: 'StyledTest-size-small',
+      props: {
+        size: 'small',
+      },
+    },
+    {
+      $$cls: 'StyledTest-size-medium',
+      props: {
+        size: 'medium',
+      },
+    },
+    {
+      $$cls: 'StyledTest-size-large',
+      props: {
+        size: 'large',
+      },
+    },
+  ],
+  vars: {
+    '--StyledTest-1': [
+      (props) => {
+        return props.size === 'small' ? 'red' : 'blue';
+      },
+      0,
+    ],
+  },
+});
+export const SliderRail3 = /*#__PURE__*/ _styled2('span')({
+  classes: 's4ekdda',
+});
+export const SliderRail = /*#__PURE__*/ _styled3('span')({
+  classes: 'sqpzee',
+});
+const SliderRail5 = /*#__PURE__*/ _styled4('span')({
+  classes: 's1o48m17',
+});
+const Component = /*#__PURE__*/ _styled5('div')({
+  classes: 'c13e7k7c',
+});
+const SliderRail2 = /*#__PURE__*/ _styled6('span')({
+  classes: 'sqzgjb7',
+});
+const SliderRail4 = /*#__PURE__*/ _styled7('span')({
+  classes: 'sxcjuwu',
+});
+export function App() {
+  return (
+    <Component>
+      <SliderRail />
+      <SliderRail2 />
+    </Component>
+  );
+}
diff --git a/packages/pigment-css-react-new/tests/styled/styled.spec.tsx b/packages/pigment-css-react-new/tests/styled/styled.spec.tsx
new file mode 100644
index 00000000..8e2858f3
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/styled.spec.tsx
@@ -0,0 +1,20 @@
+// import { styled } from '../../src/styled';
+
+// const Button = styled('button')({
+//   color: 'red',
+//   variants: {
+//     hue: {
+//       primary: {
+//         color: 'red',
+//         backgroundColor: 'blue',
+//       },
+//     },
+//   },
+// });
+
+// // @ts-expect-error `download` does not exist on button
+// <Button download>Hello</Button>;
+
+// <Button as="a" download>
+//   Hello
+// </Button>;
diff --git a/packages/pigment-css-react-new/tests/styled/styled.test.tsx b/packages/pigment-css-react-new/tests/styled/styled.test.tsx
new file mode 100644
index 00000000..324de6ad
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/styled.test.tsx
@@ -0,0 +1,44 @@
+import path from 'node:path';
+import { runTransformation, expect } from '../testUtils';
+
+describe('Pigment CSS - styled', () => {
+  it('basics', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled.input.js'),
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+
+  it('should replace the import paths to the ones specified in config', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled-import-replacement.input.js'),
+      {
+        runtimeReplacementPath(tag) {
+          if (tag === 'styled') {
+            return `@my-lib/react/styled`;
+          }
+          return null;
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+
+  it('should not use css layers if the feature is disabled', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled-no-layer.input.js'),
+      {
+        features: {
+          useLayer: false,
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
+});
diff --git a/packages/pigment-css-react-new/tests/testUtils.ts b/packages/pigment-css-react-new/tests/testUtils.ts
new file mode 100644
index 00000000..24ac2236
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/testUtils.ts
@@ -0,0 +1,136 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { expect as chaiExpect } from 'chai';
+import { asyncResolveFallback } from '@wyw-in-js/shared';
+import { TransformCacheCollection, createFileReporter, transform } from '@wyw-in-js/transform';
+import * as prettier from 'prettier';
+import { PigmentConfig, preprocessor, transformPigmentConfig } from '@pigment-css/utils';
+
+import pkgJson from '../package.json';
+
+type TransformOptions = {
+  outputDir?: string;
+} & PigmentConfig;
+
+const shouldUpdateOutput = process.env.UPDATE_FIXTURES === 'true';
+
+function replaceAbsolutePathInSourceMap(sourcemap: string) {
+  const sourceMapJson = JSON.parse(sourcemap) as { sources: string[]; file: string };
+  sourceMapJson.sources = sourceMapJson.sources.map((absPath) =>
+    absPath.replace(process.cwd(), ''),
+  );
+  sourceMapJson.file = sourceMapJson.file.replace(process.cwd(), '');
+  return JSON.stringify(sourceMapJson);
+}
+
+export async function runTransformation(absolutePath: string, options?: TransformOptions) {
+  const cache = new TransformCacheCollection();
+  const { emitter: eventEmitter } = createFileReporter(false);
+  const inputFilePath = absolutePath;
+  const { outputDir, ...restOptions } = options ?? {};
+  let outputFilePath = (
+    outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath
+  ).replace('.input.', '.output.');
+  let outputCssFilePath = (
+    outputDir ? path.join(outputDir, inputFilePath.split(path.sep).pop() as string) : absolutePath
+  )
+    .replace('.input.js', '.output.css')
+    .replace('.input.jsx', '.output.css');
+
+  if (!outputFilePath.includes('output')) {
+    outputFilePath = outputFilePath.replace(path.extname(outputFilePath), '.output.js');
+  }
+
+  if (!outputCssFilePath.includes('output')) {
+    outputCssFilePath = outputCssFilePath.replace(path.extname(outputCssFilePath), '.output.css');
+  }
+
+  const inputContent = fs.readFileSync(inputFilePath, 'utf8');
+  let outputContent = fs.existsSync(outputFilePath) ? fs.readFileSync(outputFilePath, 'utf8') : '';
+  let outputCssContent = fs.existsSync(outputCssFilePath)
+    ? fs.readFileSync(outputCssFilePath, 'utf8')
+    : '';
+
+  const pluginOptions = transformPigmentConfig({
+    babelOptions: {
+      configFile: false,
+      babelrc: false,
+      plugins: ['@babel/plugin-syntax-jsx'],
+    },
+    tagResolver(source: string, tag: string) {
+      if (source !== '@pigment-css/react-new') {
+        return null;
+      }
+      const tagPath = pkgJson['wyw-in-js'].tags[tag] as string | undefined;
+      if (!tagPath) {
+        return null;
+      }
+      const res = tagPath.startsWith('.')
+        ? require.resolve(`../${tagPath}`)
+        : require.resolve(tagPath);
+      return res;
+    },
+    ...restOptions,
+  });
+
+  const result = await transform(
+    {
+      options: {
+        filename: inputFilePath,
+        // preprocessor: (selector, css) => preprocessor(selector, css, options?.css),
+        preprocessor,
+        pluginOptions,
+      },
+      cache,
+      eventEmitter,
+    },
+    inputContent,
+    asyncResolveFallback,
+  );
+
+  const prettierConfig = await prettier.resolveConfig(
+    path.join(process.cwd(), 'prettier.config.js'),
+  );
+  const formattedJs = await prettier.format(result.code, {
+    ...prettierConfig,
+    parser: 'babel',
+  });
+  // let formattedCss = await prettier.format(result.cssText ?? '', {
+  //   ...prettierConfig,
+  //   parser: 'css',
+  // });
+  const formattedCss =
+    (result.cssText ?? '') +
+    (result.cssSourceMapText
+      ? `/*# sourceMappingURL=data:application/json;base64,${Buffer.from(replaceAbsolutePathInSourceMap(result.cssSourceMapText)).toString('base64')}*/`
+      : '');
+
+  if (!outputContent || shouldUpdateOutput) {
+    fs.mkdirSync(path.dirname(outputFilePath), { recursive: true });
+    fs.writeFileSync(outputFilePath, formattedJs, 'utf-8');
+    outputContent = formattedJs;
+  }
+
+  if (!outputCssContent || shouldUpdateOutput) {
+    fs.mkdirSync(path.dirname(outputCssFilePath), { recursive: true });
+    fs.writeFileSync(outputCssFilePath, formattedCss, 'utf-8');
+    outputCssContent = formattedCss;
+  }
+
+  return {
+    output: {
+      js: formattedJs,
+      css: formattedCss,
+    },
+    fixture: {
+      js: outputContent,
+      css: outputCssContent,
+    },
+  };
+}
+
+export function expect(val: any): ReturnType<typeof chaiExpect> {
+  const CUSTOM_ERROR =
+    'The file contents have changed. Run "test:update" command to update the file if this is expected.';
+  return chaiExpect(val, CUSTOM_ERROR);
+}
diff --git a/packages/pigment-css-react-new/tsconfig.build.json b/packages/pigment-css-react-new/tsconfig.build.json
new file mode 100644
index 00000000..2639ca1b
--- /dev/null
+++ b/packages/pigment-css-react-new/tsconfig.build.json
@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "composite": false
+  },
+  "exclude": ["./tsup.config.ts", "src/**/*.d.ts"]
+}
diff --git a/packages/pigment-css-react-new/tsconfig.json b/packages/pigment-css-react-new/tsconfig.json
new file mode 100644
index 00000000..e851de14
--- /dev/null
+++ b/packages/pigment-css-react-new/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "src/**/*.tsx",
+    "src/**/*.js",
+    "src/**/*.ts",
+    "tests/**/*.spec.ts",
+    "tests/**/*.spec.tsx",
+    "src/exports/css.cjs"
+  ],
+  "exclude": ["./tsup.config.ts"]
+}
diff --git a/packages/pigment-css-react-new/tsup.config.ts b/packages/pigment-css-react-new/tsup.config.ts
new file mode 100644
index 00000000..6509ad28
--- /dev/null
+++ b/packages/pigment-css-react-new/tsup.config.ts
@@ -0,0 +1,29 @@
+import { Options, defineConfig } from 'tsup';
+import config from '../../tsup.config';
+
+const processors = ['styled', 'css'];
+
+const baseConfig: Options = {
+  ...(config as Options),
+  tsconfig: './tsconfig.build.json',
+};
+
+const BASE_FILES = ['index.ts'];
+
+export default defineConfig([
+  {
+    ...baseConfig,
+    entry: BASE_FILES.map((file) => `./src/${file}`),
+  },
+  {
+    ...baseConfig,
+    entry: ['./src/runtime/index.ts'],
+    outDir: 'build/runtime',
+  },
+  {
+    ...baseConfig,
+    entry: processors.map((file) => `./src/processors/${file}.ts`),
+    outDir: 'build/processors',
+    cjsInterop: true,
+  },
+]);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b63d5cbf..188a7daa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -131,7 +131,7 @@ importers:
         version: 9.1.0(eslint@8.57.0)
       eslint-import-resolver-webpack:
         specifier: ^0.13.8
-        version: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0))
+        version: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0))
       eslint-plugin-babel:
         specifier: ^5.3.1
         version: 5.3.1(eslint@8.57.0)
@@ -164,7 +164,7 @@ importers:
         version: 11.2.0
       lerna:
         specifier: ^8.1.2
-        version: 8.1.2(encoding@0.1.13)
+        version: 8.1.2(@swc/core@1.10.3(@swc/helpers@0.5.15))(encoding@0.1.13)
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
@@ -176,7 +176,7 @@ importers:
         version: 10.8.2
       nx:
         specifier: ^18.2.3
-        version: 18.2.4
+        version: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))
       nyc:
         specifier: ^15.1.0
         version: 15.1.0
@@ -218,7 +218,7 @@ importers:
         version: 36.0.0(stylelint@16.3.1(typescript@5.6.3))
       tsup:
         specifier: ^8.3.5
-        version: 8.3.5(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0)
+        version: 8.3.5(@swc/core@1.10.3(@swc/helpers@0.5.15))(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0)
       tsx:
         specifier: ^4.19.2
         version: 4.19.2
@@ -431,7 +431,7 @@ importers:
         version: 18.3.1
       eslint-config-next:
         specifier: 15.0.2
-        version: 15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)(typescript@5.6.3)
+        version: 15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
       serve:
         specifier: 14.2.4
         version: 14.2.4
@@ -446,10 +446,10 @@ importers:
         version: 8.56.7
       '@typescript-eslint/experimental-utils':
         specifier: ^5.62.0
-        version: 5.62.0(eslint@8.57.0)(typescript@5.6.3)
+        version: 5.62.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
       '@typescript-eslint/parser':
         specifier: ^7.5.0
-        version: 7.6.0(eslint@8.57.0)(typescript@5.6.3)
+        version: 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
 
   packages/pigment-css-core:
     dependencies:
@@ -514,7 +514,7 @@ importers:
         version: 7.25.9
       '@babel/parser':
         specifier: ^7.26.2
-        version: 7.26.2
+        version: 7.26.3
       '@babel/types':
         specifier: ^7.26.5
         version: 7.26.5
@@ -529,7 +529,7 @@ importers:
         version: 11.13.3(@types/react@18.3.12)(react@18.3.1)
       '@emotion/serialize':
         specifier: ^1.3.2
-        version: 1.3.2
+        version: 1.3.3
       '@emotion/styled':
         specifier: ^11.13.0
         version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@types/react@18.3.12)(react@18.3.1)
@@ -611,7 +611,7 @@ importers:
         version: 18.3.12
       '@types/stylis':
         specifier: ^4.2.5
-        version: 4.2.5
+        version: 4.2.7
       chai:
         specifier: ^4.4.1
         version: 4.5.0
@@ -622,6 +622,52 @@ importers:
         specifier: ^18.3.1
         version: 18.3.1
 
+  packages/pigment-css-react-new:
+    dependencies:
+      '@babel/plugin-syntax-jsx':
+        specifier: ^7.25.9
+        version: 7.25.9(@babel/core@7.26.0)
+      '@babel/types':
+        specifier: ^7.25.8
+        version: 7.26.5
+      '@pigment-css/core':
+        specifier: workspace:*
+        version: link:../pigment-css-core
+      '@pigment-css/theme':
+        specifier: workspace:^
+        version: link:../pigment-css-theme
+      '@pigment-css/utils':
+        specifier: workspace:*
+        version: link:../pigment-css-utils
+      '@wyw-in-js/processor-utils':
+        specifier: ^0.5.5
+        version: 0.5.5
+      '@wyw-in-js/shared':
+        specifier: ^0.5.5
+        version: 0.5.5
+      '@wyw-in-js/transform':
+        specifier: ^0.5.5
+        version: 0.5.5(typescript@5.6.3)
+      csstype:
+        specifier: ^3.1.3
+        version: 3.1.3
+    devDependencies:
+      '@types/chai':
+        specifier: ^4.3.14
+        version: 4.3.14
+      '@types/react':
+        specifier: ^19.0.2
+        version: 19.0.2
+      chai:
+        specifier: ^4.4.1
+        version: 4.5.0
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
+      react:
+        specifier: ^19.0.0
+        version: 19.0.0
+
   packages/pigment-css-theme:
     devDependencies:
       '@types/chai':
@@ -666,7 +712,7 @@ importers:
         version: 4.5.0
       webpack:
         specifier: ^5.91.0
-        version: 5.91.0(esbuild@0.24.0)
+        version: 5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)
 
   packages/pigment-css-utils:
     dependencies:
@@ -787,10 +833,6 @@ packages:
     resolution: {integrity: sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/generator@7.26.2':
-    resolution: {integrity: sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/generator@7.26.3':
     resolution: {integrity: sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==}
     engines: {node: '>=6.9.0'}
@@ -893,8 +935,8 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@babel/parser@7.26.2':
-    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+  '@babel/parser@7.26.3':
+    resolution: {integrity: sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==}
     engines: {node: '>=6.0.0'}
     hasBin: true
 
@@ -1371,10 +1413,6 @@ packages:
     resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.25.9':
-    resolution: {integrity: sha512-ZCuvfwOwlz/bawvAuvcj8rrithP2/N55Tzz342AkTvq4qaWbGfmCk/tKhNaV2cthijKrPAA8SRJV5WWe7IBMJw==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/traverse@7.26.4':
     resolution: {integrity: sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==}
     engines: {node: '>=6.9.0'}
@@ -1386,6 +1424,7 @@ packages:
   '@base_ui/react@1.0.0-alpha.3':
     resolution: {integrity: sha512-3k3zlFDjYPrwb8IWShBHrZLM0Rs0c2W2VFKWTF9XdqkijvI0PFBTqEGBpG+cASsjPoNiJ9WKYYsPICEn40UCgg==}
     engines: {node: '>=12.0.0'}
+    deprecated: Base UI npm package name changed. It's now published under @base-ui-components/react.
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0
       react: ^17.0.0 || ^18.0.0
@@ -1453,9 +1492,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@emotion/serialize@1.3.2':
-    resolution: {integrity: sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==}
-
   '@emotion/serialize@1.3.3':
     resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
 
@@ -1480,9 +1516,6 @@ packages:
     peerDependencies:
       react: '>=16.8.0'
 
-  '@emotion/utils@1.4.1':
-    resolution: {integrity: sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==}
-
   '@emotion/utils@1.4.2':
     resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
 
@@ -1921,18 +1954,42 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/regexpp@4.10.0':
-    resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==}
+  '@eslint-community/regexpp@4.12.1':
+    resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
 
+  '@eslint/config-array@0.19.1':
+    resolution: {integrity: sha512-fo6Mtm5mWyKjA/Chy1BYTdn5mGJoDNjC7C64ug20ADsRDGrA85bN3uK3MaKbeRkRuuIEAR5N33Jr1pbm411/PA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/core@0.9.1':
+    resolution: {integrity: sha512-GuUdqkyyzQI5RMIWkHhvTWLCyLo1jNK3vzkSyaExH5kHPDHcuL2VOpHjmMY+y3+NC69qAKToBqldTBgYeLSr9Q==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/eslintrc@2.1.4':
     resolution: {integrity: sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@eslint/eslintrc@3.2.0':
+    resolution: {integrity: sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@eslint/js@8.57.0':
     resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@eslint/js@9.17.0':
+    resolution: {integrity: sha512-Sxc4hqcs1kTu0iID3kcZDW3JHq2a77HO9P8CP6YEA/FpH3Ll8UXE2r/86Rz9YJLKme39S9vU5OWNjC6Xl0Cr3w==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/object-schema@2.1.5':
+    resolution: {integrity: sha512-o0bhxnL89h5Bae5T318nFoFzGy+YE5i/gGkoPAgkmTVdRKTiv3p8JHevPiPaMwoloKfEiiaHlawCqaZMqRm+XQ==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
+  '@eslint/plugin-kit@0.2.4':
+    resolution: {integrity: sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   '@floating-ui/core@1.6.0':
     resolution: {integrity: sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==}
 
@@ -1971,6 +2028,14 @@ packages:
     resolution: {integrity: sha512-nPgzOiDs/FSFhE+dX2KfkmsmkXM3WfXYP06FoW8cXvHshwxHSI3FbXwe5XJYstDAWXP9YA7AMSvmwnuD4OAl2w==}
     engines: {node: '>=12.0.0'}
 
+  '@humanfs/core@0.19.1':
+    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
+    engines: {node: '>=18.18.0'}
+
+  '@humanfs/node@0.16.6':
+    resolution: {integrity: sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==}
+    engines: {node: '>=18.18.0'}
+
   '@humanwhocodes/config-array@0.11.14':
     resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==}
     engines: {node: '>=10.10.0'}
@@ -1984,6 +2049,14 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@humanwhocodes/retry@0.3.1':
+    resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
+    engines: {node: '>=18.18'}
+
+  '@humanwhocodes/retry@0.4.1':
+    resolution: {integrity: sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==}
+    engines: {node: '>=18.18'}
+
   '@hutson/parse-repository-url@3.0.2':
     resolution: {integrity: sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==}
     engines: {node: '>=6.9.0'}
@@ -2919,6 +2992,75 @@ packages:
     resolution: {integrity: sha512-/4UjstX8ploZklY8MmlOQoXB1jWIo3Go4MP0R39sbkoWuN6rJ7Zt6l4bjkDPM4hKsjoODh9SSKn2otlp3XL3/A==}
     engines: {node: '>=14.17'}
 
+  '@swc/core-darwin-arm64@1.10.3':
+    resolution: {integrity: sha512-LFFCxAUKBy69AUE+01rgazQcafIXrYs6tBa9SyKPR51ft6Tp66dAVrWg9MTykaWskuXEe80LPUvUw1ga3bOH3A==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@swc/core-darwin-x64@1.10.3':
+    resolution: {integrity: sha512-yZNv1+yPg0GvYdThsMI8WpaPRAPuw2gQDMdgijLFfRcRlr2l1sTWsDHqGd7QMTx+acYM3uB537gyd31WjUAwlQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@swc/core-linux-arm-gnueabihf@1.10.3':
+    resolution: {integrity: sha512-Qa6hu5ASoKV4rcYUBGG3y3z+9UT042KAG4A7ivqqYQFcMfkB4NbZb5So2YWOpUc0/5YlSVkgL22h3Mbj5EXy7A==}
+    engines: {node: '>=10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@swc/core-linux-arm64-gnu@1.10.3':
+    resolution: {integrity: sha512-BGnoZrmo0nlkXrOxVHk5U3j9u4BuquFviC+LvMe+HrDc5YLVe1gSXMUSBKhIz9MY9uFgxXW977TnB1XjLSKe5Q==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-arm64-musl@1.10.3':
+    resolution: {integrity: sha512-L07/4zKnIY2S/00bE+Yn3oEHkyGjWmGGE8Ta4luVCL+00s04EIwMoE1Hc8E8xFB5zLew5ViKFc5kNb5YZ/tRFQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@swc/core-linux-x64-gnu@1.10.3':
+    resolution: {integrity: sha512-cvTCekY4u0fBIDNfhv/2UxcOXqH4XJE2iNxKuQejS5KIapFJwrZ+fRQ2lha3+yopI/d2p96BlBEWTAcBzeTntw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-linux-x64-musl@1.10.3':
+    resolution: {integrity: sha512-h9kUOTrSSpY9JNc41a+NMAwK62USk/pvNE9Fi/Pfoklmlf9j9j8gRCitqvHpmZcEF4PPIsoMdiGetDipTwvWlw==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@swc/core-win32-arm64-msvc@1.10.3':
+    resolution: {integrity: sha512-iHOmLYkZYn3r1Ff4rfyczdrYGt/wVIWyY0t8swsO9o1TE+zmucGFZuYZzgj3ng8Kp4sojJrydAGz8TINQZDBzQ==}
+    engines: {node: '>=10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@swc/core-win32-ia32-msvc@1.10.3':
+    resolution: {integrity: sha512-4SqLSE4Ozh8SxuVuHIZhkSyJQru5+WbQMRs5ggLRqeUy3vkUPHOAFAY3oMwDJUN6BwbAr8+664TmdrMwaWh8Ng==}
+    engines: {node: '>=10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@swc/core-win32-x64-msvc@1.10.3':
+    resolution: {integrity: sha512-jTyf/IbNq7NVyqqDIEDzgjALjWu1IMfXKLXXAJArreklIMzkfHU1sV32ZJLOBmRKPyslCoalxIAU+hTx4reUTQ==}
+    engines: {node: '>=10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@swc/core@1.10.3':
+    resolution: {integrity: sha512-2yjqCcsBx6SNBQZIYNlwxED9aYXW/7QBZyr8LYAxTx5bzmoNhKiClYbsNLe1NJ6ccf5uSbcInw12PjXLduNEdQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@swc/helpers': '*'
+    peerDependenciesMeta:
+      '@swc/helpers':
+        optional: true
+
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
@@ -2928,6 +3070,9 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@swc/types@0.1.17':
+    resolution: {integrity: sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==}
+
   '@szmarczak/http-timer@4.0.6':
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
     engines: {node: '>=10'}
@@ -3150,9 +3295,6 @@ packages:
   '@types/serve-static@1.15.7':
     resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==}
 
-  '@types/stylis@4.2.5':
-    resolution: {integrity: sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==}
-
   '@types/stylis@4.2.7':
     resolution: {integrity: sha512-VgDNokpBoKF+wrdvhAAfS55OMQpL6QRglwTwNC3kIgBrzZxA4WsFj+2eLfEA/uMUDzBcEhYmjSbwQakn/i3ajA==}
 
@@ -4150,8 +4292,8 @@ packages:
     engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
     hasBin: true
 
-  cross-spawn@7.0.3:
-    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
+  cross-spawn@7.0.6:
+    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
   css-functions-list@3.2.1:
@@ -4728,6 +4870,10 @@ packages:
     resolution: {integrity: sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  eslint-scope@8.2.0:
+    resolution: {integrity: sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   eslint-utils@3.0.0:
     resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==}
     engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0}
@@ -4742,12 +4888,30 @@ packages:
     resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  eslint-visitor-keys@4.2.0:
+    resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   eslint@8.57.0:
     resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     deprecated: This version is no longer supported. Please see https://eslint.org/version-support for other options.
     hasBin: true
 
+  eslint@9.17.0:
+    resolution: {integrity: sha512-evtlNcpJg+cZLcnVKwsai8fExnqjGPicK7gnUtlNuzu+Fv9bI0aLpND5T44VLQtoMEnI57LoXO9XAkIXwohKrA==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+    hasBin: true
+    peerDependencies:
+      jiti: '*'
+    peerDependenciesMeta:
+      jiti:
+        optional: true
+
+  espree@10.3.0:
+    resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
+    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
+
   espree@9.6.1:
     resolution: {integrity: sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -5221,6 +5385,10 @@ packages:
     resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
     engines: {node: '>=8'}
 
+  globals@14.0.0:
+    resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
+    engines: {node: '>=18'}
+
   globalthis@1.0.4:
     resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==}
     engines: {node: '>= 0.4'}
@@ -9149,13 +9317,13 @@ snapshots:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@babel/code-frame': 7.26.2
-      '@babel/generator': 7.26.2
+      '@babel/generator': 7.26.3
       '@babel/helper-compilation-targets': 7.25.9
       '@babel/helper-module-transforms': 7.26.0(@babel/core@7.26.0)
       '@babel/helpers': 7.26.0
-      '@babel/parser': 7.26.2
+      '@babel/parser': 7.26.3
       '@babel/template': 7.25.9
-      '@babel/traverse': 7.25.9
+      '@babel/traverse': 7.26.4
       '@babel/types': 7.26.5
       convert-source-map: 2.0.0
       debug: 4.3.7(supports-color@8.1.1)
@@ -9165,14 +9333,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@babel/generator@7.26.2':
-    dependencies:
-      '@babel/parser': 7.26.5
-      '@babel/types': 7.26.5
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-      jsesc: 3.0.2
-
   '@babel/generator@7.26.3':
     dependencies:
       '@babel/parser': 7.26.5
@@ -9240,7 +9400,7 @@ snapshots:
 
   '@babel/helper-module-imports@7.25.9':
     dependencies:
-      '@babel/traverse': 7.25.9
+      '@babel/traverse': 7.26.4
       '@babel/types': 7.26.5
     transitivePeerDependencies:
       - supports-color
@@ -9321,7 +9481,7 @@ snapshots:
       regenerator-runtime: 0.14.1
       v8flags: 3.2.0
 
-  '@babel/parser@7.26.2':
+  '@babel/parser@7.26.3':
     dependencies:
       '@babel/types': 7.26.5
 
@@ -9918,18 +10078,6 @@ snapshots:
       '@babel/parser': 7.26.5
       '@babel/types': 7.26.5
 
-  '@babel/traverse@7.25.9':
-    dependencies:
-      '@babel/code-frame': 7.26.2
-      '@babel/generator': 7.26.2
-      '@babel/parser': 7.26.5
-      '@babel/template': 7.25.9
-      '@babel/types': 7.26.5
-      debug: 4.3.7(supports-color@8.1.1)
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/traverse@7.26.4':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -10007,7 +10155,7 @@ snapshots:
     dependencies:
       '@emotion/memoize': 0.9.0
       '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.1
+      '@emotion/utils': 1.4.2
       '@emotion/weak-memoize': 0.4.0
       stylis: 4.2.0
 
@@ -10015,9 +10163,9 @@ snapshots:
     dependencies:
       '@emotion/babel-plugin': 11.12.0
       '@emotion/cache': 11.13.1
-      '@emotion/serialize': 1.3.2
+      '@emotion/serialize': 1.3.3
       '@emotion/sheet': 1.4.0
-      '@emotion/utils': 1.4.1
+      '@emotion/utils': 1.4.2
     transitivePeerDependencies:
       - supports-color
 
@@ -10034,9 +10182,9 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@emotion/babel-plugin': 11.12.0
       '@emotion/cache': 11.13.1
-      '@emotion/serialize': 1.3.2
+      '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1)
-      '@emotion/utils': 1.4.1
+      '@emotion/utils': 1.4.2
       '@emotion/weak-memoize': 0.4.0
       hoist-non-react-statics: 3.3.2
       react: 18.3.1
@@ -10050,9 +10198,9 @@ snapshots:
       '@babel/runtime': 7.26.0
       '@emotion/babel-plugin': 11.12.0
       '@emotion/cache': 11.13.1
-      '@emotion/serialize': 1.3.2
+      '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@19.0.0)
-      '@emotion/utils': 1.4.1
+      '@emotion/utils': 1.4.2
       '@emotion/weak-memoize': 0.4.0
       hoist-non-react-statics: 3.3.2
       react: 19.0.0
@@ -10061,14 +10209,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@emotion/serialize@1.3.2':
-    dependencies:
-      '@emotion/hash': 0.9.2
-      '@emotion/memoize': 0.9.0
-      '@emotion/unitless': 0.10.0
-      '@emotion/utils': 1.4.1
-      csstype: 3.1.3
-
   '@emotion/serialize@1.3.3':
     dependencies:
       '@emotion/hash': 0.9.2
@@ -10085,9 +10225,9 @@ snapshots:
       '@emotion/babel-plugin': 11.12.0
       '@emotion/is-prop-valid': 1.3.1
       '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
-      '@emotion/serialize': 1.3.2
+      '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@18.3.1)
-      '@emotion/utils': 1.4.1
+      '@emotion/utils': 1.4.2
       react: 18.3.1
     optionalDependencies:
       '@types/react': 18.3.12
@@ -10100,9 +10240,9 @@ snapshots:
       '@emotion/babel-plugin': 11.12.0
       '@emotion/is-prop-valid': 1.3.1
       '@emotion/react': 11.13.3(@types/react@19.0.2)(react@19.0.0)
-      '@emotion/serialize': 1.3.2
+      '@emotion/serialize': 1.3.3
       '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@19.0.0)
-      '@emotion/utils': 1.4.1
+      '@emotion/utils': 1.4.2
       react: 19.0.0
     optionalDependencies:
       '@types/react': 19.0.2
@@ -10120,8 +10260,6 @@ snapshots:
     dependencies:
       react: 19.0.0
 
-  '@emotion/utils@1.4.1': {}
-
   '@emotion/utils@1.4.2': {}
 
   '@emotion/weak-memoize@0.4.0': {}
@@ -10344,7 +10482,24 @@ snapshots:
       eslint: 8.57.0
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/regexpp@4.10.0': {}
+  '@eslint-community/eslint-utils@4.4.0(eslint@9.17.0(jiti@1.21.6))':
+    dependencies:
+      eslint: 9.17.0(jiti@1.21.6)
+      eslint-visitor-keys: 3.4.3
+
+  '@eslint-community/regexpp@4.12.1': {}
+
+  '@eslint/config-array@0.19.1':
+    dependencies:
+      '@eslint/object-schema': 2.1.5
+      debug: 4.3.7(supports-color@8.1.1)
+      minimatch: 3.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  '@eslint/core@0.9.1':
+    dependencies:
+      '@types/json-schema': 7.0.15
 
   '@eslint/eslintrc@2.1.4':
     dependencies:
@@ -10360,8 +10515,30 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@eslint/eslintrc@3.2.0':
+    dependencies:
+      ajv: 6.12.6
+      debug: 4.3.7(supports-color@8.1.1)
+      espree: 10.3.0
+      globals: 14.0.0
+      ignore: 5.3.1
+      import-fresh: 3.3.0
+      js-yaml: 4.1.0
+      minimatch: 3.1.2
+      strip-json-comments: 3.1.1
+    transitivePeerDependencies:
+      - supports-color
+
   '@eslint/js@8.57.0': {}
 
+  '@eslint/js@9.17.0': {}
+
+  '@eslint/object-schema@2.1.5': {}
+
+  '@eslint/plugin-kit@0.2.4':
+    dependencies:
+      levn: 0.4.1
+
   '@floating-ui/core@1.6.0':
     dependencies:
       '@floating-ui/utils': 0.2.8
@@ -10417,6 +10594,13 @@ snapshots:
       - encoding
       - supports-color
 
+  '@humanfs/core@0.19.1': {}
+
+  '@humanfs/node@0.16.6':
+    dependencies:
+      '@humanfs/core': 0.19.1
+      '@humanwhocodes/retry': 0.3.1
+
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.3
@@ -10429,6 +10613,10 @@ snapshots:
 
   '@humanwhocodes/object-schema@2.0.3': {}
 
+  '@humanwhocodes/retry@0.3.1': {}
+
+  '@humanwhocodes/retry@0.4.1': {}
+
   '@hutson/parse-repository-url@3.0.2': {}
 
   '@img/sharp-darwin-arm64@0.33.5':
@@ -10551,10 +10739,10 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  '@lerna/create@8.1.2(encoding@0.1.13)(typescript@5.6.3)':
+  '@lerna/create@8.1.2(@swc/core@1.10.3(@swc/helpers@0.5.15))(encoding@0.1.13)(typescript@5.6.3)':
     dependencies:
       '@npmcli/run-script': 7.0.2
-      '@nx/devkit': 18.2.4(nx@18.2.4)
+      '@nx/devkit': 18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)))
       '@octokit/plugin-enterprise-rest': 6.0.1
       '@octokit/rest': 19.0.11(encoding@0.1.13)
       byte-size: 8.1.1
@@ -10591,7 +10779,7 @@ snapshots:
       npm-packlist: 5.1.1
       npm-registry-fetch: 14.0.5
       npmlog: 6.0.2
-      nx: 18.2.4
+      nx: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))
       p-map: 4.0.0
       p-map-series: 2.1.0
       p-queue: 6.6.2
@@ -11065,28 +11253,28 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@nrwl/devkit@18.2.4(nx@18.2.4)':
+  '@nrwl/devkit@18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)))':
     dependencies:
-      '@nx/devkit': 18.2.4(nx@18.2.4)
+      '@nx/devkit': 18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)))
     transitivePeerDependencies:
       - nx
 
-  '@nrwl/tao@18.2.4':
+  '@nrwl/tao@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))':
     dependencies:
-      nx: 18.2.4
+      nx: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))
       tslib: 2.6.2
     transitivePeerDependencies:
       - '@swc-node/register'
       - '@swc/core'
       - debug
 
-  '@nx/devkit@18.2.4(nx@18.2.4)':
+  '@nx/devkit@18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)))':
     dependencies:
-      '@nrwl/devkit': 18.2.4(nx@18.2.4)
+      '@nrwl/devkit': 18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)))
       ejs: 3.1.9
       enquirer: 2.3.6
       ignore: 5.3.1
-      nx: 18.2.4
+      nx: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))
       semver: 7.6.3
       tmp: 0.2.3
       tslib: 2.6.2
@@ -11598,6 +11786,54 @@ snapshots:
       hast-util-to-string: 2.0.0
       unist-util-visit: 4.1.2
 
+  '@swc/core-darwin-arm64@1.10.3':
+    optional: true
+
+  '@swc/core-darwin-x64@1.10.3':
+    optional: true
+
+  '@swc/core-linux-arm-gnueabihf@1.10.3':
+    optional: true
+
+  '@swc/core-linux-arm64-gnu@1.10.3':
+    optional: true
+
+  '@swc/core-linux-arm64-musl@1.10.3':
+    optional: true
+
+  '@swc/core-linux-x64-gnu@1.10.3':
+    optional: true
+
+  '@swc/core-linux-x64-musl@1.10.3':
+    optional: true
+
+  '@swc/core-win32-arm64-msvc@1.10.3':
+    optional: true
+
+  '@swc/core-win32-ia32-msvc@1.10.3':
+    optional: true
+
+  '@swc/core-win32-x64-msvc@1.10.3':
+    optional: true
+
+  '@swc/core@1.10.3(@swc/helpers@0.5.15)':
+    dependencies:
+      '@swc/counter': 0.1.3
+      '@swc/types': 0.1.17
+    optionalDependencies:
+      '@swc/core-darwin-arm64': 1.10.3
+      '@swc/core-darwin-x64': 1.10.3
+      '@swc/core-linux-arm-gnueabihf': 1.10.3
+      '@swc/core-linux-arm64-gnu': 1.10.3
+      '@swc/core-linux-arm64-musl': 1.10.3
+      '@swc/core-linux-x64-gnu': 1.10.3
+      '@swc/core-linux-x64-musl': 1.10.3
+      '@swc/core-win32-arm64-msvc': 1.10.3
+      '@swc/core-win32-ia32-msvc': 1.10.3
+      '@swc/core-win32-x64-msvc': 1.10.3
+      '@swc/helpers': 0.5.15
+    optional: true
+
   '@swc/counter@0.1.3': {}
 
   '@swc/helpers@0.5.13':
@@ -11608,6 +11844,11 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@swc/types@0.1.17':
+    dependencies:
+      '@swc/counter': 0.1.3
+    optional: true
+
   '@szmarczak/http-timer@4.0.6':
     dependencies:
       defer-to-connect: 2.0.1
@@ -11661,7 +11902,7 @@ snapshots:
 
   '@types/babel__core@7.20.5':
     dependencies:
-      '@babel/parser': 7.26.2
+      '@babel/parser': 7.26.3
       '@babel/types': 7.26.5
       '@types/babel__generator': 7.6.8
       '@types/babel__template': 7.4.4
@@ -11858,8 +12099,6 @@ snapshots:
       '@types/node': 20.17.10
       '@types/send': 0.17.4
 
-  '@types/stylis@4.2.5': {}
-
   '@types/stylis@4.2.7': {}
 
   '@types/unist@2.0.10': {}
@@ -11878,7 +12117,7 @@ snapshots:
 
   '@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/regexpp': 4.10.0
+      '@eslint-community/regexpp': 4.12.1
       '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3)
       '@typescript-eslint/scope-manager': 7.6.0
       '@typescript-eslint/type-utils': 7.6.0(eslint@8.57.0)(typescript@5.6.3)
@@ -11896,10 +12135,30 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/experimental-utils@5.62.0(eslint@8.57.0)(typescript@5.6.3)':
+  '@typescript-eslint/eslint-plugin@7.6.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)':
     dependencies:
-      '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@5.6.3)
-      eslint: 8.57.0
+      '@eslint-community/regexpp': 4.12.1
+      '@typescript-eslint/parser': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/scope-manager': 7.6.0
+      '@typescript-eslint/type-utils': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/utils': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 7.6.0
+      debug: 4.3.7(supports-color@8.1.1)
+      eslint: 9.17.0(jiti@1.21.6)
+      graphemer: 1.4.0
+      ignore: 5.3.1
+      natural-compare: 1.4.0
+      semver: 7.6.3
+      ts-api-utils: 1.3.0(typescript@5.6.3)
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@typescript-eslint/experimental-utils@5.62.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/utils': 5.62.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
+      eslint: 9.17.0(jiti@1.21.6)
     transitivePeerDependencies:
       - supports-color
       - typescript
@@ -11917,6 +12176,19 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/scope-manager': 7.6.0
+      '@typescript-eslint/types': 7.6.0
+      '@typescript-eslint/typescript-estree': 7.6.0(typescript@5.6.3)
+      '@typescript-eslint/visitor-keys': 7.6.0
+      debug: 4.3.7(supports-color@8.1.1)
+      eslint: 9.17.0(jiti@1.21.6)
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/scope-manager@5.62.0':
     dependencies:
       '@typescript-eslint/types': 5.62.0
@@ -11939,6 +12211,18 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@typescript-eslint/type-utils@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)':
+    dependencies:
+      '@typescript-eslint/typescript-estree': 7.6.0(typescript@5.6.3)
+      '@typescript-eslint/utils': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
+      debug: 4.3.7(supports-color@8.1.1)
+      eslint: 9.17.0(jiti@1.21.6)
+      ts-api-utils: 1.3.0(typescript@5.6.3)
+    optionalDependencies:
+      typescript: 5.6.3
+    transitivePeerDependencies:
+      - supports-color
+
   '@typescript-eslint/types@5.62.0': {}
 
   '@typescript-eslint/types@7.6.0': {}
@@ -11972,15 +12256,15 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@5.6.3)':
+  '@typescript-eslint/utils@5.62.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)':
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.17.0(jiti@1.21.6))
       '@types/json-schema': 7.0.15
       '@types/semver': 7.5.8
       '@typescript-eslint/scope-manager': 5.62.0
       '@typescript-eslint/types': 5.62.0
       '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.6.3)
-      eslint: 8.57.0
+      eslint: 9.17.0(jiti@1.21.6)
       eslint-scope: 5.1.1
       semver: 7.6.3
     transitivePeerDependencies:
@@ -12001,6 +12285,20 @@ snapshots:
       - supports-color
       - typescript
 
+  '@typescript-eslint/utils@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.17.0(jiti@1.21.6))
+      '@types/json-schema': 7.0.15
+      '@types/semver': 7.5.8
+      '@typescript-eslint/scope-manager': 7.6.0
+      '@typescript-eslint/types': 7.6.0
+      '@typescript-eslint/typescript-estree': 7.6.0(typescript@5.6.3)
+      eslint: 9.17.0(jiti@1.21.6)
+      semver: 7.6.3
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
   '@typescript-eslint/visitor-keys@5.62.0':
     dependencies:
       '@typescript-eslint/types': 5.62.0
@@ -12102,7 +12400,7 @@ snapshots:
 
   '@wyw-in-js/processor-utils@0.5.5':
     dependencies:
-      '@babel/generator': 7.26.2
+      '@babel/generator': 7.26.3
       '@wyw-in-js/shared': 0.5.5
     transitivePeerDependencies:
       - supports-color
@@ -12118,11 +12416,11 @@ snapshots:
   '@wyw-in-js/transform@0.5.5(typescript@5.6.3)':
     dependencies:
       '@babel/core': 7.26.0
-      '@babel/generator': 7.26.2
+      '@babel/generator': 7.26.3
       '@babel/helper-module-imports': 7.25.9
       '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0)
       '@babel/template': 7.25.9
-      '@babel/traverse': 7.25.9
+      '@babel/traverse': 7.26.4
       '@babel/types': 7.26.5
       '@wyw-in-js/processor-utils': 0.5.5
       '@wyw-in-js/shared': 0.5.5
@@ -12901,7 +13199,7 @@ snapshots:
 
   compressible@2.0.18:
     dependencies:
-      mime-db: 1.52.0
+      mime-db: 1.53.0
 
   compression@1.7.4:
     dependencies:
@@ -13061,9 +13359,9 @@ snapshots:
 
   cross-env@7.0.3:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
 
-  cross-spawn@7.0.3:
+  cross-spawn@7.0.6:
     dependencies:
       path-key: 3.1.1
       shebang-command: 2.0.0
@@ -13648,19 +13946,19 @@ snapshots:
       object.assign: 4.1.5
       object.entries: 1.1.8
 
-  eslint-config-next@15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)(typescript@5.6.3):
+  eslint-config-next@15.0.2(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3):
     dependencies:
       '@next/eslint-plugin-next': 15.0.2
       '@rushstack/eslint-patch': 1.10.4
-      '@typescript-eslint/eslint-plugin': 7.6.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint@8.57.0)(typescript@5.6.3)
-      '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3)
-      eslint: 8.57.0
+      '@typescript-eslint/eslint-plugin': 7.6.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
+      eslint: 9.17.0(jiti@1.21.6)
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0)
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@8.57.0)
-      eslint-plugin-react: 7.37.2(eslint@8.57.0)
-      eslint-plugin-react-hooks: 5.0.0(eslint@8.57.0)
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6))
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6))
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.17.0(jiti@1.21.6))
+      eslint-plugin-react: 7.37.2(eslint@9.17.0(jiti@1.21.6))
+      eslint-plugin-react-hooks: 5.0.0(eslint@9.17.0(jiti@1.21.6))
     optionalDependencies:
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -13680,26 +13978,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0):
+  eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.3.7(supports-color@8.1.1)
       enhanced-resolve: 5.16.0
-      eslint: 8.57.0
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)
+      eslint: 9.17.0(jiti@1.21.6)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6))
       fast-glob: 3.3.2
       get-tsconfig: 4.8.1
       is-bun-module: 1.2.1
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)
+      eslint-plugin-import: 2.31.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6))
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)):
+  eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)):
     dependencies:
       array.prototype.find: 2.2.3
       debug: 3.2.7
@@ -13713,19 +14011,30 @@ snapshots:
       lodash: 4.17.21
       resolve: 2.0.0-next.5
       semver: 5.7.2
-      webpack: 5.91.0(esbuild@0.24.0)
+      webpack: 5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0):
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@8.57.0):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3)
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0)
-      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0))
+      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0))
+    transitivePeerDependencies:
+      - supports-color
+
+  eslint-module-utils@2.12.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6)):
+    dependencies:
+      debug: 3.2.7
+    optionalDependencies:
+      '@typescript-eslint/parser': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
+      eslint: 9.17.0(jiti@1.21.6)
+      eslint-import-resolver-node: 0.3.9
+      eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6))
+      eslint-import-resolver-webpack: 0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -13742,7 +14051,7 @@ snapshots:
       lodash.snakecase: 4.1.1
       lodash.upperfirst: 4.3.1
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13753,7 +14062,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@8.57.0)
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -13771,7 +14080,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-webpack@0.13.8)(eslint@8.57.0):
+  eslint-plugin-import@2.31.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-typescript@3.6.3)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.8
@@ -13780,9 +14089,9 @@ snapshots:
       array.prototype.flatmap: 1.3.2
       debug: 3.2.7
       doctrine: 2.1.0
-      eslint: 8.57.0
+      eslint: 9.17.0(jiti@1.21.6)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@8.57.0)(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@8.57.0))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(esbuild@0.24.0)))(eslint@8.57.0)
+      eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint-plugin-import@2.31.0)(eslint@9.17.0(jiti@1.21.6)))(eslint-import-resolver-webpack@0.13.8(eslint-plugin-import@2.31.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)))(eslint@9.17.0(jiti@1.21.6))
       hasown: 2.0.2
       is-core-module: 2.15.1
       is-glob: 4.0.3
@@ -13794,7 +14103,7 @@ snapshots:
       string.prototype.trimend: 1.0.8
       tsconfig-paths: 3.15.0
     optionalDependencies:
-      '@typescript-eslint/parser': 7.6.0(eslint@8.57.0)(typescript@5.6.3)
+      '@typescript-eslint/parser': 7.6.0(eslint@9.17.0(jiti@1.21.6))(typescript@5.6.3)
     transitivePeerDependencies:
       - eslint-import-resolver-typescript
       - eslint-import-resolver-webpack
@@ -13819,6 +14128,25 @@ snapshots:
       safe-regex-test: 1.0.3
       string.prototype.includes: 2.0.1
 
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.17.0(jiti@1.21.6)):
+    dependencies:
+      aria-query: 5.3.2
+      array-includes: 3.1.8
+      array.prototype.flatmap: 1.3.2
+      ast-types-flow: 0.0.8
+      axe-core: 4.10.2
+      axobject-query: 4.1.0
+      damerau-levenshtein: 1.0.8
+      emoji-regex: 9.2.2
+      eslint: 9.17.0(jiti@1.21.6)
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      language-tags: 1.0.9
+      minimatch: 3.1.2
+      object.fromentries: 2.0.8
+      safe-regex-test: 1.0.3
+      string.prototype.includes: 2.0.1
+
   eslint-plugin-mocha@10.4.1(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -13830,9 +14158,9 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
-  eslint-plugin-react-hooks@5.0.0(eslint@8.57.0):
+  eslint-plugin-react-hooks@5.0.0(eslint@9.17.0(jiti@1.21.6)):
     dependencies:
-      eslint: 8.57.0
+      eslint: 9.17.0(jiti@1.21.6)
 
   eslint-plugin-react@7.37.2(eslint@8.57.0):
     dependencies:
@@ -13856,6 +14184,28 @@ snapshots:
       string.prototype.matchall: 4.0.11
       string.prototype.repeat: 1.0.0
 
+  eslint-plugin-react@7.37.2(eslint@9.17.0(jiti@1.21.6)):
+    dependencies:
+      array-includes: 3.1.8
+      array.prototype.findlast: 1.2.5
+      array.prototype.flatmap: 1.3.2
+      array.prototype.tosorted: 1.1.4
+      doctrine: 2.1.0
+      es-iterator-helpers: 1.1.0
+      eslint: 9.17.0(jiti@1.21.6)
+      estraverse: 5.3.0
+      hasown: 2.0.2
+      jsx-ast-utils: 3.3.5
+      minimatch: 3.1.2
+      object.entries: 1.1.8
+      object.fromentries: 2.0.8
+      object.values: 1.2.0
+      prop-types: 15.8.1
+      resolve: 2.0.0-next.5
+      semver: 6.3.1
+      string.prototype.matchall: 4.0.11
+      string.prototype.repeat: 1.0.0
+
   eslint-rule-composer@0.3.0: {}
 
   eslint-scope@5.1.1:
@@ -13868,6 +14218,11 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
+  eslint-scope@8.2.0:
+    dependencies:
+      esrecurse: 4.3.0
+      estraverse: 5.3.0
+
   eslint-utils@3.0.0(eslint@8.57.0):
     dependencies:
       eslint: 8.57.0
@@ -13877,10 +14232,12 @@ snapshots:
 
   eslint-visitor-keys@3.4.3: {}
 
+  eslint-visitor-keys@4.2.0: {}
+
   eslint@8.57.0:
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0)
-      '@eslint-community/regexpp': 4.10.0
+      '@eslint-community/regexpp': 4.12.1
       '@eslint/eslintrc': 2.1.4
       '@eslint/js': 8.57.0
       '@humanwhocodes/config-array': 0.11.14
@@ -13889,7 +14246,7 @@ snapshots:
       '@ungap/structured-clone': 1.2.0
       ajv: 6.12.6
       chalk: 4.1.2
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       debug: 4.3.7(supports-color@8.1.1)
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
@@ -13920,6 +14277,53 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint@9.17.0(jiti@1.21.6):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.0(eslint@9.17.0(jiti@1.21.6))
+      '@eslint-community/regexpp': 4.12.1
+      '@eslint/config-array': 0.19.1
+      '@eslint/core': 0.9.1
+      '@eslint/eslintrc': 3.2.0
+      '@eslint/js': 9.17.0
+      '@eslint/plugin-kit': 0.2.4
+      '@humanfs/node': 0.16.6
+      '@humanwhocodes/module-importer': 1.0.1
+      '@humanwhocodes/retry': 0.4.1
+      '@types/estree': 1.0.6
+      '@types/json-schema': 7.0.15
+      ajv: 6.12.6
+      chalk: 4.1.2
+      cross-spawn: 7.0.6
+      debug: 4.3.7(supports-color@8.1.1)
+      escape-string-regexp: 4.0.0
+      eslint-scope: 8.2.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
+      esquery: 1.5.0
+      esutils: 2.0.3
+      fast-deep-equal: 3.1.3
+      file-entry-cache: 8.0.0
+      find-up: 5.0.0
+      glob-parent: 6.0.2
+      ignore: 5.3.1
+      imurmurhash: 0.1.4
+      is-glob: 4.0.3
+      json-stable-stringify-without-jsonify: 1.0.1
+      lodash.merge: 4.6.2
+      minimatch: 3.1.2
+      natural-compare: 1.4.0
+      optionator: 0.9.3
+    optionalDependencies:
+      jiti: 1.21.6
+    transitivePeerDependencies:
+      - supports-color
+
+  espree@10.3.0:
+    dependencies:
+      acorn: 8.14.0
+      acorn-jsx: 5.3.2(acorn@8.14.0)
+      eslint-visitor-keys: 4.2.0
+
   espree@9.6.1:
     dependencies:
       acorn: 8.14.0
@@ -14007,7 +14411,7 @@ snapshots:
 
   execa@5.0.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 2.1.0
       is-stream: 2.0.1
@@ -14019,7 +14423,7 @@ snapshots:
 
   execa@5.1.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       get-stream: 6.0.1
       human-signals: 2.1.0
       is-stream: 2.0.1
@@ -14032,7 +14436,7 @@ snapshots:
   execa@9.5.1:
     dependencies:
       '@sindresorhus/merge-streams': 4.0.0
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       figures: 6.1.0
       get-stream: 9.0.1
       human-signals: 8.0.0
@@ -14241,12 +14645,12 @@ snapshots:
 
   foreground-child@2.0.0:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 3.0.7
 
   foreground-child@3.1.1:
     dependencies:
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
   form-data@4.0.0:
@@ -14490,6 +14894,8 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
+  globals@14.0.0: {}
+
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
@@ -15170,7 +15576,7 @@ snapshots:
   istanbul-lib-processinfo@2.0.3:
     dependencies:
       archy: 1.0.0
-      cross-spawn: 7.0.3
+      cross-spawn: 7.0.6
       istanbul-lib-coverage: 3.2.2
       p-map: 3.0.0
       rimraf: 3.0.2
@@ -15382,11 +15788,11 @@ snapshots:
     dependencies:
       language-subtag-registry: 0.3.22
 
-  lerna@8.1.2(encoding@0.1.13):
+  lerna@8.1.2(@swc/core@1.10.3(@swc/helpers@0.5.15))(encoding@0.1.13):
     dependencies:
-      '@lerna/create': 8.1.2(encoding@0.1.13)(typescript@5.6.3)
+      '@lerna/create': 8.1.2(@swc/core@1.10.3(@swc/helpers@0.5.15))(encoding@0.1.13)(typescript@5.6.3)
       '@npmcli/run-script': 7.0.2
-      '@nx/devkit': 18.2.4(nx@18.2.4)
+      '@nx/devkit': 18.2.4(nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)))
       '@octokit/plugin-enterprise-rest': 6.0.1
       '@octokit/rest': 19.0.11(encoding@0.1.13)
       byte-size: 8.1.1
@@ -15429,7 +15835,7 @@ snapshots:
       npm-packlist: 5.1.1
       npm-registry-fetch: 14.0.5
       npmlog: 6.0.2
-      nx: 18.2.4
+      nx: 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))
       p-map: 4.0.0
       p-map-series: 2.1.0
       p-pipe: 3.1.0
@@ -16683,9 +17089,9 @@ snapshots:
 
   nwsapi@2.2.7: {}
 
-  nx@18.2.4:
+  nx@18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15)):
     dependencies:
-      '@nrwl/tao': 18.2.4
+      '@nrwl/tao': 18.2.4(@swc/core@1.10.3(@swc/helpers@0.5.15))
       '@yarnpkg/lockfile': 1.1.0
       '@yarnpkg/parsers': 3.0.0-rc.46
       '@zkochan/js-yaml': 0.0.6
@@ -16730,6 +17136,7 @@ snapshots:
       '@nx/nx-linux-x64-musl': 18.2.4
       '@nx/nx-win32-arm64-msvc': 18.2.4
       '@nx/nx-win32-x64-msvc': 18.2.4
+      '@swc/core': 1.10.3(@swc/helpers@0.5.15)
     transitivePeerDependencies:
       - debug
 
@@ -17398,7 +17805,7 @@ snapshots:
   react-docgen@5.4.3:
     dependencies:
       '@babel/core': 7.26.0
-      '@babel/generator': 7.26.2
+      '@babel/generator': 7.26.3
       '@babel/runtime': 7.26.0
       ast-types: 0.14.2
       commander: 2.20.3
@@ -18474,15 +18881,16 @@ snapshots:
 
   temp-dir@1.0.0: {}
 
-  terser-webpack-plugin@5.3.10(esbuild@0.24.0)(webpack@5.91.0(esbuild@0.24.0)):
+  terser-webpack-plugin@5.3.10(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.30.3
-      webpack: 5.91.0(esbuild@0.24.0)
+      webpack: 5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)
     optionalDependencies:
+      '@swc/core': 1.10.3(@swc/helpers@0.5.15)
       esbuild: 0.24.0
 
   terser@5.30.3:
@@ -18600,7 +19008,7 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
-  tsup@8.3.5(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0):
+  tsup@8.3.5(@swc/core@1.10.3(@swc/helpers@0.5.15))(jiti@1.21.6)(postcss@8.4.47)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.0):
     dependencies:
       bundle-require: 5.0.0(esbuild@0.24.0)
       cac: 6.7.14
@@ -18619,6 +19027,7 @@ snapshots:
       tinyglobby: 0.2.10
       tree-kill: 1.2.2
     optionalDependencies:
+      '@swc/core': 1.10.3(@swc/helpers@0.5.15)
       postcss: 8.4.47
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -19025,7 +19434,7 @@ snapshots:
 
   webpack-virtual-modules@0.6.2: {}
 
-  webpack@5.91.0(esbuild@0.24.0):
+  webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.6
@@ -19048,7 +19457,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(esbuild@0.24.0)(webpack@5.91.0(esbuild@0.24.0))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0)(webpack@5.91.0(@swc/core@1.10.3(@swc/helpers@0.5.15))(esbuild@0.24.0))
       watchpack: 2.4.1
       webpack-sources: 3.2.3
     transitivePeerDependencies:
diff --git a/tsconfig.json b/tsconfig.json
index 5c4728e4..37b3cc7a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     // aligning with Node18 recommendation: https://www.npmjs.com/package/@tsconfig/node18
     "target": "es2022",
     "lib": ["es2020", "dom", "ES2021.String"],
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "moduleResolution": "bundler",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
@@ -31,7 +31,11 @@
       "@pigment-css/theme": ["./packages/pigment-css-theme/src"],
       "@pigment-css/theme/*": ["./packages/pigment-css-theme/src/*"],
       "@pigment-css/utils": ["./packages/pigment-css-utils/src"],
-      "@pigment-css/utils/*": ["./packages/pigment-css-utils/src/*"]
+      "@pigment-css/utils/*": ["./packages/pigment-css-utils/src/*"],
+      "@pigment-css/core": ["./packages/pigment-css-core/src"],
+      "@pigment-css/core/*": ["./packages/pigment-css-core/src/*"],
+      "@pigment-css/react-new": ["./packages/pigment-css-react-new/src"],
+      "@pigment-css/react-new/*": ["./packages/pigment-css-react-new/src/*"]
     },
     // Otherwise we get react-native typings which conflict with dom.lib.
     "types": ["node", "react", "mocha"]