From 4ab24221687563eec911fce9bc49b9d9100a79e0 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Thu, 26 Dec 2024 14:03:52 +0530
Subject: [PATCH 01/12] First working version of pigment-css/react@v1

---
 .codesandbox/ci.json                          |   1 +
 .eslintignore                                 |   2 +
 .eslintrc.js                                  |   2 +
 packages/pigment-css-react-new/README.md      |  29 +
 packages/pigment-css-react-new/exports/css.js |   5 +
 .../pigment-css-react-new/exports/styled.js   |   5 +
 packages/pigment-css-react-new/package.json   | 132 ++++
 packages/pigment-css-react-new/src/index.ts   |   2 +
 .../src/processors/css.ts                     |   5 +
 .../src/processors/styled.ts                  | 117 ++++
 .../src/runtime/index.ts                      |   2 +
 .../src/runtime/styled.js                     |  13 +
 .../pigment-css-react-new/src/styled.d.ts     |   1 +
 packages/pigment-css-react-new/src/styled.js  |   1 +
 packages/pigment-css-react-new/src/sx.d.ts    |  10 +
 packages/pigment-css-react-new/styles.css     |   3 +
 .../styled-import-replacement.input.js        |  37 ++
 .../styled-import-replacement.output.css      |   5 +
 .../styled-import-replacement.output.js       |  14 +
 .../styled/fixtures/styled-no-layer.input.js  | 107 +++
 .../fixtures/styled-no-layer.output.css       |  12 +
 .../styled/fixtures/styled-no-layer.output.js |  70 ++
 .../tests/styled/fixtures/styled.input.js     | 116 ++++
 .../tests/styled/fixtures/styled.output.css   |  13 +
 .../tests/styled/fixtures/styled.output.js    |  72 ++
 .../tests/styled/styled.spec.tsx              |  20 +
 .../tests/styled/styled.test.tsx              |  44 ++
 .../pigment-css-react-new/tests/testUtils.ts  | 136 ++++
 .../pigment-css-react-new/tsconfig.build.json |   7 +
 packages/pigment-css-react-new/tsconfig.json  |  12 +
 packages/pigment-css-react-new/tsup.config.ts |  29 +
 pnpm-lock.yaml                                | 615 +++++++++++++++---
 tsconfig.json                                 |   8 +-
 33 files changed, 1566 insertions(+), 81 deletions(-)
 create mode 100644 packages/pigment-css-react-new/README.md
 create mode 100644 packages/pigment-css-react-new/exports/css.js
 create mode 100644 packages/pigment-css-react-new/exports/styled.js
 create mode 100644 packages/pigment-css-react-new/package.json
 create mode 100644 packages/pigment-css-react-new/src/index.ts
 create mode 100644 packages/pigment-css-react-new/src/processors/css.ts
 create mode 100644 packages/pigment-css-react-new/src/processors/styled.ts
 create mode 100644 packages/pigment-css-react-new/src/runtime/index.ts
 create mode 100644 packages/pigment-css-react-new/src/runtime/styled.js
 create mode 100644 packages/pigment-css-react-new/src/styled.d.ts
 create mode 100644 packages/pigment-css-react-new/src/styled.js
 create mode 100644 packages/pigment-css-react-new/src/sx.d.ts
 create mode 100644 packages/pigment-css-react-new/styles.css
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.input.js
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.css
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-import-replacement.output.js
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.input.js
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.css
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-no-layer.output.js
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js
 create mode 100644 packages/pigment-css-react-new/tests/styled/styled.spec.tsx
 create mode 100644 packages/pigment-css-react-new/tests/styled/styled.test.tsx
 create mode 100644 packages/pigment-css-react-new/tests/testUtils.ts
 create mode 100644 packages/pigment-css-react-new/tsconfig.build.json
 create mode 100644 packages/pigment-css-react-new/tsconfig.json
 create mode 100644 packages/pigment-css-react-new/tsup.config.ts

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..c508d437
--- /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.6.0",
+    "@wyw-in-js/shared": "^0.6.0",
+    "@wyw-in-js/transform": "^0.6.0",
+    "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 0435a9f1..76bb728a 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.49)(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.49)(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:
@@ -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.6.0
+        version: 0.6.0
+      '@wyw-in-js/shared':
+        specifier: ^0.6.0
+        version: 0.6.0
+      '@wyw-in-js/transform':
+        specifier: ^0.6.0
+        version: 0.6.0(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:
@@ -1903,18 +1949,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==}
 
@@ -1953,6 +2023,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'}
@@ -1966,6 +2044,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'}
@@ -2205,7 +2291,7 @@ packages:
       '@emotion/react': ^11.5.0
       '@emotion/styled': ^11.3.0
       '@mui/material-pigment-css': ^6.1.6
-      '@types/react': 19.0.8
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
       react: ^17.0.0 || ^18.0.0 || ^19.0.0
       react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
@@ -2265,7 +2351,7 @@ packages:
   '@mui/types@7.2.19':
     resolution: {integrity: sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==}
     peerDependencies:
-      '@types/react': 19.0.8
+      '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -2901,6 +2987,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==}
 
@@ -2910,6 +3065,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'}
@@ -4129,8 +4287,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:
@@ -4707,6 +4865,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}
@@ -4721,12 +4883,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}
@@ -5200,6 +5380,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'}
@@ -10284,7 +10468,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:
@@ -10300,8 +10501,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
@@ -10357,6 +10580,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
@@ -10369,6 +10599,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':
@@ -10491,10 +10725,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
@@ -10531,7 +10765,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
@@ -11005,28 +11239,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.8.1
     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.8.1
@@ -11538,6 +11772,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':
@@ -11548,6 +11830,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
@@ -11816,7 +12103,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)
@@ -11834,10 +12121,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
@@ -11855,6 +12162,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
@@ -11877,6 +12197,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': {}
@@ -11910,15 +12242,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:
@@ -11939,6 +12271,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
@@ -12999,9 +13345,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
@@ -13586,19 +13932,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:
@@ -13618,26 +13964,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
@@ -13651,19 +13997,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
 
@@ -13680,7 +14037,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
@@ -13691,7 +14048,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
@@ -13709,7 +14066,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
@@ -13718,9 +14075,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
@@ -13732,7 +14089,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
@@ -13757,6 +14114,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
@@ -13768,9 +14144,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:
@@ -13794,6 +14170,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:
@@ -13806,6 +14204,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
@@ -13815,10 +14218,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
@@ -13827,7 +14232,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
@@ -13858,6 +14263,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
@@ -13945,7 +14397,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
@@ -13957,7 +14409,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
@@ -13970,7 +14422,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
@@ -14179,12 +14631,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:
@@ -14428,6 +14880,8 @@ snapshots:
     dependencies:
       type-fest: 0.20.2
 
+  globals@14.0.0: {}
+
   globalthis@1.0.4:
     dependencies:
       define-properties: 1.2.1
@@ -15108,7 +15562,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
@@ -15320,11 +15774,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
@@ -15367,7 +15821,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
@@ -16621,9 +17075,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
@@ -16668,6 +17122,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
 
@@ -18406,15 +18861,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:
@@ -18530,7 +18986,7 @@ snapshots:
 
   tsscmp@1.0.6: {}
 
-  tsup@8.3.5(jiti@1.21.6)(postcss@8.4.49)(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.49)(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
@@ -18549,6 +19005,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.49
       typescript: 5.6.3
     transitivePeerDependencies:
@@ -18955,7 +19412,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
@@ -18978,7 +19435,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"]

From 841238df5a38550b99ccb1d6d1278373da6c9fb0 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Mon, 3 Feb 2025 10:36:46 +0530
Subject: [PATCH 02/12] Implement styled runtime

---
 packages/pigment-css-react-new/package.json   |   1 +
 .../src/runtime/styled.js                     |  13 --
 .../src/runtime/styled.tsx                    | 119 ++++++++++++++++++
 .../pigment-css-react-new/src/styled.d.ts     |  76 ++++++++++-
 .../fixtures/dummy-component.fixture.js       |   3 +
 .../tests/styled/fixtures/styled.input.js     |   5 +-
 .../tests/styled/fixtures/styled.output.css   |   2 +-
 .../tests/styled/fixtures/styled.output.js    |   4 +-
 .../tests/styled/styled.spec.tsx              |  72 ++++++++---
 pnpm-lock.yaml                                |   3 +
 10 files changed, 256 insertions(+), 42 deletions(-)
 delete mode 100644 packages/pigment-css-react-new/src/runtime/styled.js
 create mode 100644 packages/pigment-css-react-new/src/runtime/styled.tsx
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/dummy-component.fixture.js

diff --git a/packages/pigment-css-react-new/package.json b/packages/pigment-css-react-new/package.json
index c508d437..d3ee00d4 100644
--- a/packages/pigment-css-react-new/package.json
+++ b/packages/pigment-css-react-new/package.json
@@ -33,6 +33,7 @@
   "dependencies": {
     "@babel/plugin-syntax-jsx": "^7.25.9",
     "@babel/types": "^7.25.8",
+    "@emotion/is-prop-valid": "^1.3.1",
     "@pigment-css/core": "workspace:*",
     "@pigment-css/utils": "workspace:*",
     "@pigment-css/theme": "workspace:^",
diff --git a/packages/pigment-css-react-new/src/runtime/styled.js b/packages/pigment-css-react-new/src/runtime/styled.js
deleted file mode 100644
index 27a0892d..00000000
--- a/packages/pigment-css-react-new/src/runtime/styled.js
+++ /dev/null
@@ -1,13 +0,0 @@
-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/runtime/styled.tsx b/packages/pigment-css-react-new/src/runtime/styled.tsx
new file mode 100644
index 00000000..19c9f127
--- /dev/null
+++ b/packages/pigment-css-react-new/src/runtime/styled.tsx
@@ -0,0 +1,119 @@
+import { Primitive } from '@pigment-css/core';
+import { ClassInfo, css } from '@pigment-css/core/runtime';
+import * as React from 'react';
+import isPropValid from '@emotion/is-prop-valid';
+
+type StyledInfo = ClassInfo & {
+  displayName?: string;
+  vars?: Record<string, [(...args: unknown[]) => Primitive, boolean]>;
+};
+
+function defaultShouldForwardProp(propName: string): boolean {
+  // if first character is $
+  if (propName.charCodeAt(0) === 36) {
+    return false;
+  }
+  if (propName === 'as') {
+    return false;
+  }
+  return true;
+}
+
+function shouldForwardProp(propName: string) {
+  if (defaultShouldForwardProp(propName)) {
+    return isPropValid(propName);
+  }
+  return false;
+}
+
+function getStyle(props: ClassInfo['defaultVariants'], vars: StyledInfo['vars']) {
+  const newStyle: Record<string, Primitive> = {};
+  if (!props || !vars) {
+    return newStyle;
+  }
+  // eslint-disable-next-line no-restricted-syntax
+  for (const key in vars) {
+    if (!vars.hasOwnProperty(key)) {
+      continue;
+    }
+    const [variableFunction, isUnitLess] = vars[key];
+    const value = variableFunction(props);
+    if (typeof value === 'undefined') {
+      continue;
+    }
+    if (typeof value === 'string' || isUnitLess) {
+      newStyle[key] = value;
+    } else {
+      newStyle[key] = `${value}px`;
+    }
+  }
+  return newStyle;
+}
+
+export function styled<T extends React.ElementType>(tag: T) {
+  if (process.env.NODE_ENV === 'development') {
+    if (tag === undefined) {
+      throw new Error(
+        'You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.',
+      );
+    }
+  }
+  const shouldForwardPropLocal =
+    typeof tag === 'string' ? shouldForwardProp : defaultShouldForwardProp;
+
+  function scopedStyled({
+    classes,
+    variants = [],
+    defaultVariants = {},
+    vars,
+    displayName = '',
+  }: StyledInfo) {
+    const cssFn = css({
+      classes,
+      variants,
+      defaultVariants,
+    });
+    const baseClasses = cssFn();
+
+    const StyledComponent = React.forwardRef<
+      React.ComponentRef<T>,
+      React.ComponentPropsWithoutRef<T> & {
+        as?: React.ElementType;
+        className?: string;
+        style?: React.CSSProperties;
+      }
+    >(function render(props, ref) {
+      const newProps: Record<string, unknown> = {};
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const key in props) {
+        // if first char is $
+        if (shouldForwardPropLocal(key)) {
+          newProps[key] = props[key];
+        }
+      }
+      newProps.className = variants.length === 0 ? baseClasses : baseClasses;
+      newProps.style = {
+        ...props.style,
+        ...getStyle(props, vars),
+      };
+
+      const Component = props.as ?? tag;
+      return <Component ref={ref} {...newProps} />;
+    });
+
+    if (displayName) {
+      StyledComponent.displayName = displayName;
+    } else {
+      StyledComponent.displayName = 'Styled(Pigment)';
+    }
+
+    // @ts-expect-error No TS check required
+    // eslint-disable-next-line no-underscore-dangle
+    StyledComponent.__styled_by_pigment_css = true;
+
+    return StyledComponent;
+  }
+
+  return scopedStyled;
+}
diff --git a/packages/pigment-css-react-new/src/styled.d.ts b/packages/pigment-css-react-new/src/styled.d.ts
index fa6a253e..8fa73427 100644
--- a/packages/pigment-css-react-new/src/styled.d.ts
+++ b/packages/pigment-css-react-new/src/styled.d.ts
@@ -1 +1,75 @@
-export declare function styled(): void;
+import type * as React from 'react';
+import { Variants, BaseInterface, CssArg, VariantNames, Primitive } from '@pigment-css/core';
+
+export type NoInfer<T> = [T][T extends any ? 0 : never];
+type FastOmit<T extends object, U extends string | number | symbol> = {
+  [K in keyof T as K extends U ? never : K]: T[K];
+};
+
+export type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
+
+interface RequiredProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export type PolymorphicComponentProps<
+  Props extends {},
+  AsTarget extends React.ElementType | undefined,
+  AsTargetProps extends object = AsTarget extends React.ElementType
+    ? React.ComponentPropsWithRef<AsTarget>
+    : {},
+> = NoInfer<Omit<Substitute<Props, AsTargetProps>, 'as'>> & {
+  as?: AsTarget;
+  children?: React.ReactNode;
+};
+
+export interface PolymorphicComponent<Props extends {}>
+  extends React.ForwardRefExoticComponent<Props> {
+  <AsTarget extends React.ElementType | undefined = undefined>(
+    props: PolymorphicComponentProps<Props, AsTarget>,
+  ): React.JSX.Element;
+}
+
+type StyledArgument<V extends Variants> = CssArg<V>;
+
+interface StyledComponent<Props extends {}> extends PolymorphicComponent<Props> {
+  defaultProps?: Partial<Props> | undefined;
+  toString: () => string;
+}
+
+interface StyledOptions extends BaseInterface {}
+
+export interface CreateStyledComponent<
+  Component extends React.ElementType,
+  OuterProps extends object,
+> {
+  <Props extends {} = {}>(
+    arg: TemplateStringsArray,
+    ...templateArgs: (Primitive | ((props: Props) => Primitive))[]
+  ): StyledComponent<Substitute<OuterProps, Props>> & (Component extends string ? {} : Component);
+
+  <V extends {}>(
+    ...styles: Array<StyledArgument<V>>
+  ): StyledComponent<Substitute<OuterProps, V extends Variants ? VariantNames<V> : V>> &
+    (Component extends string ? {} : Component);
+}
+
+export interface CreateStyled {
+  <
+    TagOrComponent extends React.ElementType,
+    FinalProps extends {} = React.ComponentPropsWithRef<TagOrComponent>,
+  >(
+    tag: TagOrComponent,
+    options?: StyledOptions,
+  ): CreateStyledComponent<TagOrComponent, FinalProps>;
+}
+
+export type CreateStyledIndex = {
+  [Key in keyof React.JSX.IntrinsicElements]: CreateStyledComponent<
+    Key,
+    React.JSX.IntrinsicElements[Key]
+  >;
+};
+
+export declare const styled: CreateStyled & CreateStyledIndex;
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/dummy-component.fixture.js b/packages/pigment-css-react-new/tests/styled/fixtures/dummy-component.fixture.js
new file mode 100644
index 00000000..ade8d673
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/dummy-component.fixture.js
@@ -0,0 +1,3 @@
+export function TestComponent() {
+  return <h1>Hello</h1>;
+}
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
index e4689c85..58d8415c 100644
--- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js
@@ -1,4 +1,5 @@
 import { styled, keyframes, css } from '@pigment-css/react-new';
+import { TestComponent } from './dummy-component.fixture';
 
 const cls1 = css({
   color: 'red',
@@ -13,10 +14,6 @@ export const rotateKeyframe = keyframes({ className: 'rotate' })({
   },
 });
 
-function TestComponent() {
-  return <h1>Hello</h1>;
-}
-
 const StyledTest = styled(TestComponent, {
   className: 'StyledTest',
 })({
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
index 7b82483a..b7a759ad 100644
--- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css
@@ -10,4 +10,4 @@
 @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
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC5pbnB1dC5qcyJdLCJuYW1lcyI6WyIuYzFkZ3NnbmgiLCIucm90YXRlIiwiLlN0eWxlZFRlc3QiLCIuU3R5bGVkVGVzdC1zaXplLXNtYWxsIiwiLlN0eWxlZFRlc3Qtc2l6ZS1tZWRpdW0iLCIuU3R5bGVkVGVzdC1zaXplLWxhcmdlIiwiLnM0ZWtkZGEiLCIuc3FwemVlIiwiLnMxbzQ4bTE3IiwiLmMxM2U3azdjIiwiLnNxemdqYjciLCIuc3hjanV3dSJdLCJtYXBwaW5ncyI6IkFBR2lCQTtBQUlnREM7QUFXOURDO0FBQUFDO0FBQUFDO0FBQUFDO0FBa0NBQztBQVN1QkM7QUFZTUM7QUFRSEM7QUFNVEM7QUFTQUMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLXJlYWN0LW5ldy90ZXN0cy9zdHlsZWQvZml4dHVyZXMvc3R5bGVkLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZCwga2V5ZnJhbWVzLCBjc3MgfSBmcm9tICdAcGlnbWVudC1jc3MvcmVhY3QtbmV3JztcbmltcG9ydCB7IFRlc3RDb21wb25lbnQgfSBmcm9tICcuL2R1bW15LWNvbXBvbmVudC5maXh0dXJlJztcblxuY29uc3QgY2xzMSA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbn0pO1xuXG5leHBvcnQgY29uc3Qgcm90YXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pKHtcbiAgZnJvbToge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzNjBkZWcpJyxcbiAgfSxcbiAgdG86IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMGRlZyknLFxuICB9LFxufSk7XG5cbmNvbnN0IFN0eWxlZFRlc3QgPSBzdHlsZWQoVGVzdENvbXBvbmVudCwge1xuICBjbGFzc05hbWU6ICdTdHlsZWRUZXN0Jyxcbn0pKHtcbiAgJCRpZDogMCxcbiAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBbYC4ke2NsczF9YF06IHtcbiAgICBjb2xvcjogJ2JsdWUnLFxuICB9LFxuICBjb2xvcihwcm9wcykge1xuICAgIHJldHVybiBwcm9wcy5zaXplID09PSAnc21hbGwnID8gJ3JlZCcgOiAnYmx1ZSc7XG4gIH0sXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRpZDogJzAxJyxcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogJ3JlZCcsXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkaWQ6ICcwMicsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRpZDogJzAzJyxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFNsaWRlclJhaWwzID0gc3R5bGVkKCdzcGFuJywge1xuICBuYW1lOiAnTXVpU2xpZGVyJyxcbiAgc2xvdDogJ1JhaWwnLFxufSkoe1xuICAkJGlkOiAxLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG4gIG9wYWNpdHk6IDAuMzgsXG59KTtcblxuZXhwb3J0IGNvbnN0IFNsaWRlclJhaWwgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KWBcbiAgLS0taWQ6IDI7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJvcmRlci1yYWRpdXM6IGluaGVyaXQ7XG4gIGJhY2tncm91bmQtY29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgb3BhY2l0eTogMC4zODtcbmA7XG5cbmNvbnN0IFNsaWRlclJhaWw1ID0gc3R5bGVkLnNwYW4oe1xuICBkaXNwbGF5OiAnYmxvY2snLFxuICBvcGFjaXR5OiAwLjM4LFxuICBbU2xpZGVyUmFpbF06IHtcbiAgICBkaXNwbGF5OiAnbm9uZScsXG4gIH0sXG59KTtcblxuY29uc3QgQ29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gICQkaWQ6IDMsXG4gIGNvbG9yOiAnI2ZmNTI1MicsXG4gIGFuaW1hdGlvbjogYCR7cm90YXRlS2V5ZnJhbWV9IDJzIGVhc2Utb3V0IDBzIGluZmluaXRlYCxcbn0pO1xuXG5jb25zdCBTbGlkZXJSYWlsMiA9IHN0eWxlZCgnc3BhbicpYFxuICAtLS1pZDogNDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG9wYWNpdHk6IDAuMzg7XG4gICR7U2xpZGVyUmFpbH0ge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IFNsaWRlclJhaWw0ID0gc3R5bGVkLnNwYW5gXG4gIC0tLWlkOiA1O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGZ1bmN0aW9uIEFwcCgpIHtcbiAgcmV0dXJuIChcbiAgICA8Q29tcG9uZW50PlxuICAgICAgPFNsaWRlclJhaWwgLz5cbiAgICAgIDxTbGlkZXJSYWlsMiAvPlxuICAgIDwvQ29tcG9uZW50PlxuICApO1xufVxuIl19*/
\ 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
index ae6085e3..4e921e30 100644
--- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js
@@ -8,10 +8,8 @@ import {
   styled as _styled6,
   styled as _styled7,
 } from '@pigment-css/react-new/runtime';
+import { TestComponent } from './dummy-component.fixture';
 export const rotateKeyframe = 'rotate';
-function TestComponent() {
-  return <h1>Hello</h1>;
-}
 const _exp4 = /*#__PURE__*/ () => TestComponent;
 const StyledTest = /*#__PURE__*/ _styled(_exp4())({
   classes: 'StyledTest',
diff --git a/packages/pigment-css-react-new/tests/styled/styled.spec.tsx b/packages/pigment-css-react-new/tests/styled/styled.spec.tsx
index 8e2858f3..86f4acb8 100644
--- a/packages/pigment-css-react-new/tests/styled/styled.spec.tsx
+++ b/packages/pigment-css-react-new/tests/styled/styled.spec.tsx
@@ -1,20 +1,52 @@
-// 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>;
+import { t } from '@pigment-css/theme';
+import { styled } from '../../src/styled';
+
+declare module '@pigment-css/theme' {
+  interface Theme {
+    palette: {
+      main: string;
+    };
+  }
+}
+
+const Button = styled('button')({
+  color: 'red',
+  variants: {
+    btnSize: {
+      small: {
+        padding: 0,
+      },
+      medium: {
+        padding: '1rem',
+      },
+      large: {
+        padding: '2rem',
+      },
+    },
+  },
+});
+
+const Div1 = styled.div<{ $size?: 'small' | 'medium' | 'large' }>`
+  color: red;
+  padding: ${({ $size }) => ($size === 'small' ? 2 : 4)};
+`;
+
+<Div1 onClick={() => undefined}>
+  <Button type="button" btnSize="medium" />;
+</Div1>;
+
+const Button2 = styled('button')<{ $isRed: boolean }>({
+  color: 'red',
+  backgroundColor: 'red',
+});
+
+<Button2 $isRed className="" />;
+
+function TestComponent({}: { className?: string; style?: React.CSSProperties; hello: string }) {
+  return <div>Hello</div>;
+}
+
+styled(TestComponent)`
+  color: red;
+  background-color: ${t('$palette.main')};
+`;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 76bb728a..cb2fd2c2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -630,6 +630,9 @@ importers:
       '@babel/types':
         specifier: ^7.25.8
         version: 7.26.5
+      '@emotion/is-prop-valid':
+        specifier: ^1.3.1
+        version: 1.3.1
       '@pigment-css/core':
         specifier: workspace:*
         version: link:../pigment-css-core

From 8275455995436e1bcb7c827c3cec5648aea11dfc Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Thu, 6 Feb 2025 09:30:01 +0530
Subject: [PATCH 03/12] Implement runtime and add tests

---
 package.json                                  |   3 -
 packages/pigment-css-react-new/package.json   |   2 +
 .../src/runtime/styled.tsx                    |  34 +++-
 .../tests/styled/styled-runtime.test.tsx      | 172 ++++++++++++++++++
 packages/pigment-css-react-new/tsconfig.json  |   9 +-
 packages/pigment-css-react/package.json       |   2 +-
 pnpm-lock.yaml                                | 166 +++++++++++++----
 7 files changed, 339 insertions(+), 49 deletions(-)
 create mode 100644 packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx

diff --git a/package.json b/package.json
index 8416d2c2..9ffa5b60 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,6 @@
     "validate-declarations": "tsx scripts/validateTypescriptDeclarations.mts"
   },
   "dependencies": {
-    "@pigment-css/react": "workspace:^",
     "globby": "^14.0.1"
   },
   "devDependencies": {
@@ -108,8 +107,6 @@
     "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
     "react-docgen": "^5.4.3",
     "remark": "^13.0.0",
     "rimraf": "^6.0.1",
diff --git a/packages/pigment-css-react-new/package.json b/packages/pigment-css-react-new/package.json
index d3ee00d4..c1f30721 100644
--- a/packages/pigment-css-react-new/package.json
+++ b/packages/pigment-css-react-new/package.json
@@ -46,8 +46,10 @@
     "react": "^17 || ^18 || ^19 || ^19.0.0-rc"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.2",
     "@types/chai": "^4.3.14",
+    "@types/mocha": "^10.0.6",
     "chai": "^4.4.1",
     "prettier": "^3.3.3",
     "react": "^19.0.0"
diff --git a/packages/pigment-css-react-new/src/runtime/styled.tsx b/packages/pigment-css-react-new/src/runtime/styled.tsx
index 19c9f127..60ddc506 100644
--- a/packages/pigment-css-react-new/src/runtime/styled.tsx
+++ b/packages/pigment-css-react-new/src/runtime/styled.tsx
@@ -8,6 +8,16 @@ type StyledInfo = ClassInfo & {
   vars?: Record<string, [(...args: unknown[]) => Primitive, boolean]>;
 };
 
+function isHtmlTag(tag: unknown): tag is string {
+  return (
+    typeof tag === 'string' &&
+    // 96 is one less than the char code
+    // for "a" so this is checking that
+    // it's a lowercase character
+    tag.charCodeAt(0) > 96
+  );
+}
+
 function defaultShouldForwardProp(propName: string): boolean {
   // if first character is $
   if (propName.charCodeAt(0) === 36) {
@@ -60,6 +70,15 @@ export function styled<T extends React.ElementType>(tag: T) {
   }
   const shouldForwardPropLocal =
     typeof tag === 'string' ? shouldForwardProp : defaultShouldForwardProp;
+  let shouldUseAs = !shouldForwardPropLocal('as');
+
+  // @ts-expect-error
+  // eslint-disable-next-line no-underscore-dangle
+  if (typeof tag !== 'string' && tag.__styled_by_pigment_css) {
+    // If the tag is a Pigment styled component,
+    // render the styled component and pass the `as` prop down
+    shouldUseAs = false;
+  }
 
   function scopedStyled({
     classes,
@@ -84,28 +103,33 @@ export function styled<T extends React.ElementType>(tag: T) {
       }
     >(function render(props, ref) {
       const newProps: Record<string, unknown> = {};
+      const Component = (shouldUseAs && props.as) || tag;
+      let shouldForwardPropComponent = shouldForwardPropLocal;
+
+      // Reassign `shouldForwardProp` if incoming `as` prop is a React component
+      if (!isHtmlTag(Component)) {
+        shouldForwardPropComponent = defaultShouldForwardProp;
+      }
 
       // eslint-disable-next-line no-restricted-syntax
       for (const key in props) {
-        // if first char is $
-        if (shouldForwardPropLocal(key)) {
+        if (shouldForwardPropComponent(key)) {
           newProps[key] = props[key];
         }
       }
-      newProps.className = variants.length === 0 ? baseClasses : baseClasses;
+      newProps.className = variants.length ? cssFn(props) : baseClasses;
       newProps.style = {
         ...props.style,
         ...getStyle(props, vars),
       };
 
-      const Component = props.as ?? tag;
       return <Component ref={ref} {...newProps} />;
     });
 
     if (displayName) {
       StyledComponent.displayName = displayName;
     } else {
-      StyledComponent.displayName = 'Styled(Pigment)';
+      StyledComponent.displayName = `Styled(${typeof tag === 'string' ? tag : 'Pigment'})`;
     }
 
     // @ts-expect-error No TS check required
diff --git a/packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx b/packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx
new file mode 100644
index 00000000..c1e2586c
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx
@@ -0,0 +1,172 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { render } from '@testing-library/react';
+
+import { styled } from '../../src/runtime';
+
+describe('styled - runtime', () => {
+  it('should return base classes when there are no variants or runtime props', async () => {
+    const Component = styled('div')({
+      classes: 'hello world',
+    });
+    const screen = render(<Component data-testid="component">Hello</Component>);
+    const component = await screen.findByTestId('component');
+    expect(component.className).to.equal('hello world');
+  });
+
+  it('should return base and variant classes as per prop value', async () => {
+    const Component = styled('div')({
+      classes: 'hello',
+      defaultVariants: {
+        variant: 'primary',
+        size: 'medium',
+      },
+      variants: [
+        {
+          $$cls: 'v-primary',
+          props: {
+            variant: 'primary',
+          },
+        },
+        {
+          $$cls: 'v-secondary',
+          props: {
+            variant: 'secondary',
+          },
+        },
+        {
+          $$cls: 's-small',
+          props: {
+            size: 'small',
+          },
+        },
+        {
+          $$cls: 's-medium',
+          props: {
+            size: 'medium',
+          },
+        },
+        {
+          $$cls: 's-large',
+          props: {
+            size: 'large',
+          },
+        },
+      ],
+    }) as React.FC<
+      { size?: string; variant?: string; as?: string } & React.JSX.IntrinsicElements['div']
+    >;
+    const screen = render(<Component data-testid="component">Hello</Component>);
+    let component = await screen.findByTestId('component');
+    expect(component.className).to.equal('hello v-primary s-medium');
+
+    screen.rerender(
+      <Component data-testid="component" size="medium">
+        Hello
+      </Component>,
+    );
+    expect(component.className).to.equal('hello v-primary s-medium');
+
+    screen.rerender(
+      <Component data-testid="component" size="small">
+        Hello
+      </Component>,
+    );
+    expect(component.className).to.equal('hello v-primary s-small');
+
+    screen.rerender(
+      <Component data-testid="component" variant="secondary">
+        Hello
+      </Component>,
+    );
+    expect(component.className).to.equal('hello v-secondary s-medium');
+
+    screen.rerender(
+      <Component data-testid="component" variant="secondary" size="large" data-red="">
+        Hello
+      </Component>,
+    );
+    expect(component.className).to.equal('hello v-secondary s-large');
+
+    screen.rerender(
+      // @ts-expect-error type is forwardable to button
+      <Component as="button" data-testid="component" variant="secondary" size="large" type="button">
+        Hello
+      </Component>,
+    );
+    component = await screen.findByRole('button');
+    expect(component.tagName).to.equal('BUTTON');
+    expect(component.getAttribute('type')).to.equal('button');
+  });
+
+  it('default prop filtering for native html tag', async () => {
+    const Link = styled('a')({
+      classes: 'green',
+    });
+    const other = { m: [3], pt: [4] };
+
+    const screen = render(
+      <Link
+        data-testid="component"
+        // @ts-expect-error
+        a="true"
+        b="true"
+        wow="true"
+        prop="true"
+        filtering="true"
+        is="true"
+        cool="true"
+        aria-label="some label"
+        data-wow="value"
+        href="link"
+        {...other}
+      >
+        hello world
+      </Link>,
+    );
+    const component = await screen.findByTestId('component');
+    expect(component.getAttribute('href')).to.equal('link');
+    expect(component.getAttribute('aria-label')).to.equal('some label');
+    expect(component.getAttribute('data-wow')).to.equal('value');
+    expect(component.getAttribute('is')).to.equal('true');
+
+    expect(component.hasAttribute('a')).to.equal(false);
+    expect(component.hasAttribute('b')).to.equal(false);
+    expect(component.hasAttribute('wow')).to.equal(false);
+    expect(component.hasAttribute('prop')).to.equal(false);
+    expect(component.hasAttribute('cool')).to.equal(false);
+    expect(component.hasAttribute('filtering')).to.equal(false);
+  });
+
+  describe('as', () => {
+    it("child's classes still propagate to its parent", () => {
+      const StyledChild = styled('span')({
+        classes: 'child',
+      });
+
+      const StyledParent = styled(StyledChild)({
+        classes: 'parent',
+      });
+
+      const { getByTestId } = render(<StyledParent as="div" data-testid="component" />);
+      expect(getByTestId('component').className).to.equal('child');
+    });
+
+    it('use component forward prop if provided `as` is a component', () => {
+      const StyledDiv = styled('div')({
+        classes: 'root',
+      });
+
+      function Component({ TagComponent = 'span', ...props }) {
+        return <TagComponent {...props} />;
+      }
+
+      const { getByTestId } = render(
+        // @ts-expect-error
+        <StyledDiv as={Component} data-testid="component" TagComponent="button" disabled />,
+      );
+
+      expect(getByTestId('component').tagName).to.equal('BUTTON');
+    });
+  });
+});
diff --git a/packages/pigment-css-react-new/tsconfig.json b/packages/pigment-css-react-new/tsconfig.json
index e851de14..1f711196 100644
--- a/packages/pigment-css-react-new/tsconfig.json
+++ b/packages/pigment-css-react-new/tsconfig.json
@@ -1,12 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": [
-    "src/**/*.tsx",
-    "src/**/*.js",
-    "src/**/*.ts",
-    "tests/**/*.spec.ts",
-    "tests/**/*.spec.tsx",
-    "src/exports/css.cjs"
-  ],
+  "include": ["src/**/*.tsx", "src/**/*.ts", "tests/**/*.spec.ts", "tests/**/*.spec.tsx"],
   "exclude": ["./tsup.config.ts"]
 }
diff --git a/packages/pigment-css-react/package.json b/packages/pigment-css-react/package.json
index a3854c44..8244bbfe 100644
--- a/packages/pigment-css-react/package.json
+++ b/packages/pigment-css-react/package.json
@@ -70,7 +70,7 @@
     "@types/stylis": "^4.2.5",
     "chai": "^4.4.1",
     "prettier": "^3.2.5",
-    "react": "^18.3.1"
+    "react": "^19.0.0"
   },
   "peerDependencies": {
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cb2fd2c2..04d3c92e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,9 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@pigment-css/react':
-        specifier: workspace:^
-        version: link:packages/pigment-css-react
       globby:
         specifier: ^14.0.1
         version: 14.0.1
@@ -53,7 +50,7 @@ importers:
         version: 1.0.26
       '@mui/internal-test-utils':
         specifier: 1.0.19
-        version: 1.0.19(@babel/core@7.26.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.0.19(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@18.3.12))(@types/react@18.3.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@mui/monorepo':
         specifier: github:mui/material-ui#ae455647016fe5dee968b017aa191e176bc113dd
         version: https://codeload.github.com/mui/material-ui/tar.gz/ae455647016fe5dee968b017aa191e176bc113dd(encoding@0.1.13)
@@ -192,15 +189,9 @@ importers:
       process:
         specifier: ^0.11.10
         version: 0.11.10
-      react:
-        specifier: 18.3.1
-        version: 18.3.1
       react-docgen:
         specifier: ^5.4.3
         version: 5.4.3
-      react-dom:
-        specifier: 18.3.1
-        version: 18.3.1(react@18.3.1)
       remark:
         specifier: ^13.0.0
         version: 13.0.0
@@ -526,19 +517,19 @@ importers:
         version: 1.3.1
       '@emotion/react':
         specifier: ^11.13.3
-        version: 11.13.3(@types/react@18.3.12)(react@18.3.1)
+        version: 11.13.3(@types/react@18.3.12)(react@19.0.0)
       '@emotion/serialize':
         specifier: ^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)
+        version: 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0)
       '@mui/system':
         specifier: ^6.1.6
-        version: 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@18.3.1))(@emotion/styled@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))(@types/react@18.3.12)(react@18.3.1)
+        version: 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0)
       '@mui/utils':
         specifier: ^6.1.6
-        version: 6.1.6(@types/react@18.3.12)(react@18.3.1)
+        version: 6.1.6(@types/react@18.3.12)(react@19.0.0)
       '@wyw-in-js/processor-utils':
         specifier: ^0.6.0
         version: 0.6.0
@@ -565,7 +556,7 @@ importers:
         version: 15.8.1
       react-dom:
         specifier: ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc
-        version: 18.3.1(react@18.3.1)
+        version: 18.3.1(react@19.0.0)
       stylis:
         specifier: ^4.3.4
         version: 4.3.4
@@ -619,8 +610,8 @@ importers:
         specifier: ^3.2.5
         version: 3.3.3
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
+        specifier: ^19.0.0
+        version: 19.0.0
 
   packages/pigment-css-react-new:
     dependencies:
@@ -655,9 +646,15 @@ importers:
         specifier: ^3.1.3
         version: 3.1.3
     devDependencies:
+      '@testing-library/react':
+        specifier: ^16.2.0
+        version: 16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@types/chai':
         specifier: ^4.3.14
         version: 4.3.14
+      '@types/mocha':
+        specifier: ^10.0.6
+        version: 10.0.6
       '@types/react':
         specifier: ^19.0.2
         version: 19.0.2
@@ -3079,15 +3076,15 @@ packages:
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
 
-  '@testing-library/react@16.0.1':
-    resolution: {integrity: sha512-dSmwJVtJXmku+iocRhWOUFbrERC76TX2Mnf0ATODz8brzAZrMBbzLwQixlBSanZxR6LddK3eiwpSFZgDET1URg==}
+  '@testing-library/react@16.2.0':
+    resolution: {integrity: sha512-2cSskAvA1QNtKc8Y9VJQRv0tm3hLVgxRGDB+KYhIaPQJ1I+RHbhIXcM+zClKXzMes/wshsMVzf4B9vS4IZpqDQ==}
     engines: {node: '>=18'}
     peerDependencies:
       '@testing-library/dom': ^10.0.0
-      '@types/react': ^18.0.0
-      '@types/react-dom': ^18.0.0
-      react: ^18.0.0
-      react-dom: ^18.0.0
+      '@types/react': ^18.0.0 || ^19.0.0
+      '@types/react-dom': ^18.0.0 || ^19.0.0
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
     peerDependenciesMeta:
       '@types/react':
         optional: true
@@ -10181,6 +10178,23 @@ snapshots:
       '@types/react': 18.3.12
     transitivePeerDependencies:
       - supports-color
+    optional: true
+
+  '@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@emotion/babel-plugin': 11.12.0
+      '@emotion/cache': 11.13.1
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@19.0.0)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.12
+    transitivePeerDependencies:
+      - supports-color
 
   '@emotion/react@11.13.3(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
@@ -10222,6 +10236,22 @@ snapshots:
       '@types/react': 18.3.12
     transitivePeerDependencies:
       - supports-color
+    optional: true
+
+  '@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@emotion/babel-plugin': 11.12.0
+      '@emotion/is-prop-valid': 1.3.1
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@19.0.0)
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.1.0(react@19.0.0)
+      '@emotion/utils': 1.4.2
+      react: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.12
+    transitivePeerDependencies:
+      - supports-color
 
   '@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
@@ -10244,6 +10274,7 @@ snapshots:
   '@emotion/use-insertion-effect-with-fallbacks@1.1.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
+    optional: true
 
   '@emotion/use-insertion-effect-with-fallbacks@1.1.0(react@19.0.0)':
     dependencies:
@@ -10884,16 +10915,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@mui/internal-test-utils@1.0.19(@babel/core@7.26.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@mui/internal-test-utils@1.0.19(@babel/core@7.26.0)(@types/react-dom@19.0.2(@types/react@18.3.12))(@types/react@18.3.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/plugin-transform-modules-commonjs': 7.25.9(@babel/core@7.26.0)
       '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0)
       '@babel/register': 7.25.9(@babel/core@7.26.0)
       '@babel/runtime': 7.26.0
       '@emotion/cache': 11.13.1
-      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@19.0.0)
       '@testing-library/dom': 10.4.0
-      '@testing-library/react': 16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@testing-library/react': 16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@18.3.12))(@types/react@18.3.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
       chai: 4.5.0
       chai-dom: 1.12.0(chai@4.5.0)
@@ -10905,8 +10936,8 @@ snapshots:
       mocha: 10.8.2
       playwright: 1.48.2
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
       sinon: 18.0.1
     transitivePeerDependencies:
       - '@babel/core'
@@ -11009,6 +11040,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/private-theming@6.1.6(@types/react@18.3.12)(react@19.0.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/utils': 6.1.6(@types/react@18.3.12)(react@19.0.0)
+      prop-types: 15.8.1
+      react: 19.0.0
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@mui/private-theming@6.1.6(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -11031,6 +11071,19 @@ snapshots:
       '@emotion/react': 11.13.3(@types/react@18.3.12)(react@18.3.1)
       '@emotion/styled': 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)
 
+  '@mui/styled-engine@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@emotion/cache': 11.13.1
+      '@emotion/serialize': 1.3.3
+      '@emotion/sheet': 1.4.0
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 19.0.0
+    optionalDependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@19.0.0)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0)
+
   '@mui/styled-engine@6.1.6(@emotion/react@11.13.3(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -11060,6 +11113,22 @@ snapshots:
       '@emotion/styled': 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)
       '@types/react': 18.3.12
 
+  '@mui/system@6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/private-theming': 6.1.6(@types/react@18.3.12)(react@19.0.0)
+      '@mui/styled-engine': 6.1.6(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0))(react@19.0.0)
+      '@mui/types': 7.2.19(@types/react@18.3.12)
+      '@mui/utils': 6.1.6(@types/react@18.3.12)(react@19.0.0)
+      clsx: 2.1.1
+      csstype: 3.1.3
+      prop-types: 15.8.1
+      react: 19.0.0
+    optionalDependencies:
+      '@emotion/react': 11.13.3(@types/react@18.3.12)(react@19.0.0)
+      '@emotion/styled': 11.13.0(@emotion/react@11.13.3(@types/react@18.3.12)(react@19.0.0))(@types/react@18.3.12)(react@19.0.0)
+      '@types/react': 18.3.12
+
   '@mui/system@6.1.6(@emotion/react@11.13.3(@types/react@19.0.2)(react@19.0.0))(@emotion/styled@11.13.0(@emotion/react@11.13.3(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0))(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -11096,6 +11165,18 @@ snapshots:
     optionalDependencies:
       '@types/react': 18.3.12
 
+  '@mui/utils@6.1.6(@types/react@18.3.12)(react@19.0.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@mui/types': 7.2.19(@types/react@18.3.12)
+      '@types/prop-types': 15.7.13
+      clsx: 2.1.1
+      prop-types: 15.8.1
+      react: 19.0.0
+      react-is: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.3.12
+
   '@mui/utils@6.1.6(@types/react@19.0.2)(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
@@ -11853,15 +11934,25 @@ snapshots:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  '@testing-library/react@16.0.1(@testing-library/dom@10.4.0)(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@18.3.12))(@types/react@18.3.12)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
     dependencies:
       '@babel/runtime': 7.26.0
       '@testing-library/dom': 10.4.0
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
     optionalDependencies:
       '@types/react': 18.3.12
-      '@types/react-dom': 18.3.1
+      '@types/react-dom': 19.0.2(@types/react@18.3.12)
+
+  '@testing-library/react@16.2.0(@testing-library/dom@10.4.0)(@types/react-dom@19.0.2(@types/react@19.0.2))(@types/react@19.0.2)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)':
+    dependencies:
+      '@babel/runtime': 7.26.0
+      '@testing-library/dom': 10.4.0
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+    optionalDependencies:
+      '@types/react': 19.0.2
+      '@types/react-dom': 19.0.2(@types/react@19.0.2)
 
   '@testing-library/user-event@14.5.2(@testing-library/dom@10.4.0)':
     dependencies:
@@ -12052,6 +12143,11 @@ snapshots:
     dependencies:
       '@types/react': 18.3.12
 
+  '@types/react-dom@19.0.2(@types/react@18.3.12)':
+    dependencies:
+      '@types/react': 18.3.12
+    optional: true
+
   '@types/react-dom@19.0.2(@types/react@19.0.2)':
     dependencies:
       '@types/react': 19.0.2
@@ -17806,6 +17902,12 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-dom@18.3.1(react@19.0.0):
+    dependencies:
+      loose-envify: 1.4.0
+      react: 19.0.0
+      scheduler: 0.23.2
+
   react-dom@19.0.0(react@19.0.0):
     dependencies:
       react: 19.0.0

From 2dc2085da10adf8196fbe813a147d35534f52f13 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Fri, 7 Feb 2025 09:18:17 +0530
Subject: [PATCH 04/12] Propagate className from prop to the target component

---
 packages/pigment-css-react-new/package.json           |  2 +-
 packages/pigment-css-react-new/src/runtime/styled.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/pigment-css-react-new/package.json b/packages/pigment-css-react-new/package.json
index c1f30721..52dccef4 100644
--- a/packages/pigment-css-react-new/package.json
+++ b/packages/pigment-css-react-new/package.json
@@ -61,7 +61,6 @@
   "wyw-in-js": {
     "tags": {
       "styled": "./exports/styled.js",
-      "sx": "./exports/sx.js",
       "keyframes": "@pigment-css/core/exports/keyframes",
       "css": "./exports/css.js"
     }
@@ -100,6 +99,7 @@
       "default": "./exports/*.js"
     },
     "./runtime": {
+      "types": "./build/runtime/index.d.ts",
       "import": "./build/runtime/index.mjs",
       "require": "./build/runtime/index.js",
       "default": "./build/runtime/index.js"
diff --git a/packages/pigment-css-react-new/src/runtime/styled.tsx b/packages/pigment-css-react-new/src/runtime/styled.tsx
index 60ddc506..14afbdca 100644
--- a/packages/pigment-css-react-new/src/runtime/styled.tsx
+++ b/packages/pigment-css-react-new/src/runtime/styled.tsx
@@ -1,5 +1,5 @@
-import { Primitive } from '@pigment-css/core';
-import { ClassInfo, css } from '@pigment-css/core/runtime';
+import type { Primitive } from '@pigment-css/core';
+import { type ClassInfo, css } from '@pigment-css/core/runtime';
 import * as React from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 
@@ -104,6 +104,8 @@ export function styled<T extends React.ElementType>(tag: T) {
     >(function render(props, ref) {
       const newProps: Record<string, unknown> = {};
       const Component = (shouldUseAs && props.as) || tag;
+      const propClass = props.className;
+      const propStyle = props.style;
       let shouldForwardPropComponent = shouldForwardPropLocal;
 
       // Reassign `shouldForwardProp` if incoming `as` prop is a React component
@@ -118,8 +120,11 @@ export function styled<T extends React.ElementType>(tag: T) {
         }
       }
       newProps.className = variants.length ? cssFn(props) : baseClasses;
+      if (propClass) {
+        newProps.className = `${newProps.className} ${propClass}`;
+      }
       newProps.style = {
-        ...props.style,
+        ...propStyle,
         ...getStyle(props, vars),
       };
 

From 074a18293b545cd1328c2adea65884dbf5ca21f9 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Fri, 7 Feb 2025 12:16:46 +0530
Subject: [PATCH 05/12] Allow react components in tagged template

---
 packages/pigment-css-react-new/src/styled.d.ts                  | 2 +-
 .../pigment-css-react-new/tests/styled/styled-runtime.test.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pigment-css-react-new/src/styled.d.ts b/packages/pigment-css-react-new/src/styled.d.ts
index 8fa73427..54e9d33c 100644
--- a/packages/pigment-css-react-new/src/styled.d.ts
+++ b/packages/pigment-css-react-new/src/styled.d.ts
@@ -46,7 +46,7 @@ export interface CreateStyledComponent<
 > {
   <Props extends {} = {}>(
     arg: TemplateStringsArray,
-    ...templateArgs: (Primitive | ((props: Props) => Primitive))[]
+    ...templateArgs: (StyledComponent<any> | Primitive | ((props: Props) => Primitive))[]
   ): StyledComponent<Substitute<OuterProps, Props>> & (Component extends string ? {} : Component);
 
   <V extends {}>(
diff --git a/packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx b/packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx
index c1e2586c..241f538d 100644
--- a/packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx
+++ b/packages/pigment-css-react-new/tests/styled/styled-runtime.test.tsx
@@ -149,7 +149,7 @@ describe('styled - runtime', () => {
       });
 
       const { getByTestId } = render(<StyledParent as="div" data-testid="component" />);
-      expect(getByTestId('component').className).to.equal('child');
+      expect(getByTestId('component').className).to.equal('child parent');
     });
 
     it('use component forward prop if provided `as` is a component', () => {

From f30fca78e50c4eaa8958a072ab86d1bcbc5712b1 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Sat, 8 Feb 2025 11:26:09 +0530
Subject: [PATCH 06/12] Handle pre-transformed tagged-template literal by swc

---
 .../pigment-css-core/src/processors/css.ts    | 196 +++++++++++-------
 ...led-swc-transformed-tagged-string.input.js | 118 +++++++++++
 ...d-swc-transformed-tagged-string.output.css |  36 ++++
 ...ed-swc-transformed-tagged-string.output.js |  14 ++
 .../tests/styled/fixtures/styled.input.js     |  28 +++
 .../tests/styled/fixtures/styled.output.css   |   6 +-
 .../tests/styled/fixtures/styled.output.js    |   6 +
 .../tests/styled/styled.test.tsx              |  35 ++++
 .../src/utils/processStyle.ts                 |   4 +-
 9 files changed, 361 insertions(+), 82 deletions(-)
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.input.js
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.output.css
 create mode 100644 packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.output.js

diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts
index 54a83e6f..7581f381 100644
--- a/packages/pigment-css-core/src/processors/css.ts
+++ b/packages/pigment-css-core/src/processors/css.ts
@@ -10,7 +10,7 @@
  * CssProcessor.
  */
 
-import { SourceLocation } from '@babel/types';
+import { SourceLocation, TemplateElement } from '@babel/types';
 import {
   type TransformedInternalConfig,
   type StyleObjectReturn,
@@ -21,7 +21,7 @@ import {
   serializeStyles,
   valueToLiteral,
   evaluateClassNameArg,
-  getCSSVar,
+  transformProbableCssVar,
 } from '@pigment-css/utils';
 import {
   CallParam,
@@ -119,6 +119,99 @@ export type CssTailProcessorParams = BaseCssProcessorConstructorParams extends [
   ? T
   : never;
 
+function handleTemplateElementOrSimilar(
+  templateParams: (TemplateElement | ExpressionValue)[],
+  values: ValueCache,
+  processor: BaseCssProcessor,
+) {
+  const { themeArgs = {}, pigmentFeatures: { useLayer = true } = {} } =
+    processor.options as TransformedInternalConfig;
+  // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array.
+  const templateStrs: string[] = [];
+  // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array.
+  templateStrs.raw = [];
+  const templateExpressions: Primitive[] = [];
+  let paramsToIterate = templateParams;
+  const [firstArg, ...restArgs] = templateParams;
+  if ('kind' in firstArg && firstArg.kind === ValueType.LAZY) {
+    const value = values.get(firstArg.ex.name) as string[];
+    templateStrs.push(...value);
+    // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array.
+    templateStrs.raw.push(...value);
+    paramsToIterate = restArgs;
+  }
+  paramsToIterate.forEach((param) => {
+    if ('kind' in param) {
+      switch (param.kind) {
+        case ValueType.FUNCTION: {
+          const value = values.get(param.ex.name) as TemplateCallback;
+          templateExpressions.push(value(themeArgs));
+          break;
+        }
+        case ValueType.CONST: {
+          if (typeof param.value === 'string') {
+            templateExpressions.push(transformProbableCssVar(param.value));
+          } else {
+            templateExpressions.push(param.value);
+          }
+          break;
+        }
+        case ValueType.LAZY: {
+          const evaluatedValue = values.get(param.ex.name);
+          if (typeof evaluatedValue === 'function') {
+            templateExpressions.push(evaluatedValue(themeArgs));
+          } else if (typeof evaluatedValue === 'string') {
+            templateExpressions.push(transformProbableCssVar(evaluatedValue));
+          } else {
+            templateExpressions.push(evaluatedValue as Primitive);
+          }
+          break;
+        }
+        default:
+          break;
+      }
+    } else if ('type' in param && param.type === 'TemplateElement') {
+      templateStrs.push(param.value.cooked as string);
+      // @ts-ignore
+      templateStrs.raw.push(param.value.raw);
+    }
+  });
+  const { styles } = serializeStyles(
+    templateExpressions.length > 0 ? [templateStrs, ...templateExpressions] : [templateStrs],
+  );
+
+  const cssText = useLayer
+    ? `@layer pigment.base{${processor.wrapStyle(styles, '')}}`
+    : processor.wrapStyle(styles, '');
+  const className = processor.getClassName();
+  const rules: Rules = {
+    [`.${className}`]: {
+      className,
+      cssText,
+      displayName: processor.displayName,
+      start: processor.location?.start ?? null,
+    },
+  };
+  const location = processor.location;
+  const sourceMapReplacements: Replacements = [
+    {
+      length: cssText.length,
+      original: {
+        start: {
+          column: location?.start.column ?? 0,
+          line: location?.start.line ?? 0,
+        },
+        end: {
+          column: location?.end.column ?? 0,
+          line: location?.end.line ?? 0,
+        },
+      },
+    },
+  ];
+  processor.classNames.push(className);
+  processor.artifacts.push(['css', [rules, sourceMapReplacements]]);
+}
+
 /**
  * Only deals with css`` or css(metadata)`` calls.
  */
@@ -138,84 +231,8 @@ export class CssTaggedTemplateProcessor extends BaseCssProcessor {
   }
 
   build(values: ValueCache): void {
-    const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this
-      .options as TransformedInternalConfig;
     const [, templateParams] = this.templateParam;
-    // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array.
-    const templateStrs: string[] = [];
-    // @ts-ignore @TODO - Fix this. No idea how to initialize a Tagged String array.
-    templateStrs.raw = [];
-    const templateExpressions: Primitive[] = [];
-    templateParams.forEach((param) => {
-      if ('kind' in param) {
-        switch (param.kind) {
-          case ValueType.FUNCTION: {
-            const value = values.get(param.ex.name) as TemplateCallback;
-            templateExpressions.push(value(themeArgs));
-            break;
-          }
-          case ValueType.CONST: {
-            templateExpressions.push(param.value);
-            break;
-          }
-          case ValueType.LAZY: {
-            const evaluatedValue = values.get(param.ex.name);
-            if (typeof evaluatedValue === 'function') {
-              templateExpressions.push(evaluatedValue(themeArgs));
-            } else if (
-              typeof evaluatedValue === 'object' &&
-              evaluatedValue &&
-              (evaluatedValue as unknown as Record<string, boolean>).isThemeVar
-            ) {
-              templateExpressions.push(getCSSVar(evaluatedValue.toString(), true));
-            } else {
-              templateExpressions.push(evaluatedValue as Primitive);
-            }
-            break;
-          }
-          default:
-            break;
-        }
-      } else if ('type' in param && param.type === 'TemplateElement') {
-        templateStrs.push(param.value.cooked as string);
-        // @ts-ignore
-        templateStrs.raw.push(param.value.raw);
-      }
-    });
-    const { styles } = serializeStyles(
-      templateExpressions.length > 0 ? [templateStrs, ...templateExpressions] : [templateStrs],
-    );
-
-    const cssText = useLayer
-      ? `@layer pigment.base{${this.wrapStyle(styles, '')}}`
-      : this.wrapStyle(styles, '');
-    const className = this.getClassName();
-    const rules: Rules = {
-      [`.${className}`]: {
-        className,
-        cssText,
-        displayName: this.displayName,
-        start: this.location?.start ?? null,
-      },
-    };
-    const location = this.location;
-    const sourceMapReplacements: Replacements = [
-      {
-        length: cssText.length,
-        original: {
-          start: {
-            column: location?.start.column ?? 0,
-            line: location?.start.line ?? 0,
-          },
-          end: {
-            column: location?.end.column ?? 0,
-            line: location?.end.line ?? 0,
-          },
-        },
-      },
-    ];
-    this.classNames.push(className);
-    this.artifacts.push(['css', [rules, sourceMapReplacements]]);
+    handleTemplateElementOrSimilar(templateParams, values, this);
   }
 }
 
@@ -235,7 +252,28 @@ export class CssObjectProcessor extends BaseCssProcessor {
     return params.flat().filter((param) => 'kind' in param);
   }
 
+  isMaybeTransformedTemplateLiteral(values: ValueCache): boolean {
+    const [, firstArg, ...restArgs] = this.callParam;
+    if (!('kind' in firstArg) || firstArg.kind === ValueType.CONST) {
+      return false;
+    }
+    const firstArgVal = values.get(firstArg.ex.name);
+    if (Array.isArray(firstArgVal) && restArgs.length === firstArgVal.length - 1) {
+      return true;
+    }
+    return false;
+  }
+
+  private buildForTransformedTemplateTag(values: ValueCache) {
+    const [, ...templateParams] = this.callParam;
+    handleTemplateElementOrSimilar(templateParams, values, this);
+  }
+
   build(values: ValueCache): void {
+    if (this.isMaybeTransformedTemplateLiteral(values)) {
+      this.buildForTransformedTemplateTag(values);
+      return;
+    }
     const [, ...callParams] = this.callParam;
     const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this
       .options as TransformedInternalConfig;
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.input.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.input.js
new file mode 100644
index 00000000..47723d4b
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.input.js
@@ -0,0 +1,118 @@
+/**
+ * This is a pre-transformed file for testing.
+ */
+import { _ as _tagged_template_literal } from '@swc/helpers/_/_tagged_template_literal';
+import { styled, keyframes } from '@pigment-css/react-new';
+
+function _templateObject() {
+  const data = _tagged_template_literal([
+    '\n  0% {\n    transform: scale(0);\n    opacity: 0.1;\n  }\n\n  100% {\n    transform: scale(1);\n    opacity: 0.3;\n  }\n',
+  ]);
+  _templateObject = function () {
+    return data;
+  };
+  return data;
+}
+function _templateObject1() {
+  const data = _tagged_template_literal([
+    '\n  0% {\n    opacity: 1;\n  }\n\n  100% {\n    opacity: 0;\n  }\n',
+  ]);
+  _templateObject1 = function () {
+    return data;
+  };
+  return data;
+}
+function _templateObject2() {
+  const data = _tagged_template_literal([
+    '\n  0% {\n    transform: scale(1);\n  }\n\n  50% {\n    transform: scale(0.92);\n  }\n\n  100% {\n    transform: scale(1);\n  }\n',
+  ]);
+  _templateObject2 = function () {
+    return data;
+  };
+  return data;
+}
+function _templateObject3() {
+  const data = _tagged_template_literal([
+    '\n  opacity: 0;\n  position: absolute;\n\n  &.',
+    ' {\n    opacity: 0.3;\n    transform: scale(1);\n    animation-name: ',
+    ';\n    animation-duration: ',
+    'ms;\n    animation-timing-function: ',
+    ';\n  }\n\n  &.',
+    ' {\n    animation-duration: ',
+    'ms;\n  }\n\n  & .',
+    ' {\n    opacity: 1;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    background-color: currentColor;\n  }\n\n  & .',
+    ' {\n    opacity: 0;\n    animation-name: ',
+    ';\n    animation-duration: ',
+    'ms;\n    animation-timing-function: ',
+    ';\n  }\n\n  & .',
+    ' {\n    position: absolute;\n    /* @noflip */\n    left: 0px;\n    top: 0;\n    animation-name: ',
+    ';\n    animation-duration: 2500ms;\n    animation-timing-function: ',
+    ';\n    animation-iteration-count: infinite;\n    animation-delay: 200ms;\n  }\n',
+  ]);
+  _templateObject3 = function () {
+    return data;
+  };
+  return data;
+}
+
+const touchRippleClasses = {
+  rippleVisible: 'MuiTouchRipple.rippleVisible',
+  ripplePulsate: 'MuiTouchRipple.ripplePulsate',
+  child: 'MuiTouchRipple.child',
+  childLeaving: 'MuiTouchRipple.childLeaving',
+  childPulsate: 'MuiTouchRipple.childPulsate',
+};
+
+const enterKeyframe = keyframes(_templateObject());
+const exitKeyframe = keyframes(_templateObject1());
+const pulsateKeyframe = keyframes(_templateObject2());
+
+export const TouchRippleRoot = styled('span', {
+  name: 'MuiTouchRipple',
+  slot: 'Root',
+})({
+  overflow: 'hidden',
+  pointerEvents: 'none',
+  position: 'absolute',
+  zIndex: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  borderRadius: 'inherit',
+});
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+export const TouchRippleRipple = styled(Ripple, {
+  name: 'MuiTouchRipple',
+  slot: 'Ripple',
+})(
+  _templateObject3(),
+  touchRippleClasses.rippleVisible,
+  enterKeyframe,
+  DURATION,
+  (param) => {
+    let { theme } = param;
+    return theme.transitions.easing.easeInOut;
+  },
+  touchRippleClasses.ripplePulsate,
+  (param) => {
+    let { theme } = param;
+    return theme.transitions.duration.shorter;
+  },
+  touchRippleClasses.child,
+  touchRippleClasses.childLeaving,
+  exitKeyframe,
+  DURATION,
+  (param) => {
+    let { theme } = param;
+    return theme.transitions.easing.easeInOut;
+  },
+  touchRippleClasses.childPulsate,
+  pulsateKeyframe,
+  (param) => {
+    let { theme } = param;
+    return theme.transitions.easing.easeInOut;
+  },
+);
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.output.css b/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.output.css
new file mode 100644
index 00000000..fa309eab
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.output.css
@@ -0,0 +1,36 @@
+@keyframes edi25uv {
+  0% {
+    transform: scale(0);
+    opacity: 0.1;
+  }
+
+  100% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+}
+@keyframes elx6tt {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes prw41fh {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.92);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+.tcavtwv{overflow:hidden;pointer-events:none;position:absolute;z-index:0;top:0;right:0;bottom:0;left:0;border-radius:inherit;}
+.tblmtgc{opacity:0;position:absolute;}.tblmtgc.MuiTouchRipple.rippleVisible{opacity:0.3;transform:scale(1);animation-name:edi25uv;animation-duration:ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.tblmtgc.MuiTouchRipple.ripplePulsate{animation-duration:200ms;}.tblmtgc .MuiTouchRipple.child{opacity:1;display:block;width:100%;height:100%;border-radius:50%;background-color:currentColor;}.tblmtgc .MuiTouchRipple.childLeaving{opacity:0;animation-name:elx6tt;animation-duration:ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}.tblmtgc .MuiTouchRipple.childPulsate{position:absolute;left:0px;top:0;animation-name:prw41fh;animation-duration:2500ms;animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-iteration-count:infinite;animation-delay:200ms;}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1zd2MtdHJhbnNmb3JtZWQtdGFnZ2VkLXN0cmluZy5pbnB1dC5qcyJdLCJuYW1lcyI6WyIuZWRpMjV1diIsIi5lbHg2dHQiLCIucHJ3NDFmaCIsIi50Y2F2dHd2IiwiLnRibG10Z2MiXSwibWFwcGluZ3MiOiJBQWlFc0JBO0FBQ0RDO0FBQ0dDO0FBS3JCQztBQWM4QkMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLXJlYWN0LW5ldy90ZXN0cy9zdHlsZWQvZml4dHVyZXMvc3R5bGVkLXN3Yy10cmFuc2Zvcm1lZC10YWdnZWQtc3RyaW5nLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogVGhpcyBpcyBhIHByZS10cmFuc2Zvcm1lZCBmaWxlIGZvciB0ZXN0aW5nLlxuICovXG5pbXBvcnQgeyBfIGFzIF90YWdnZWRfdGVtcGxhdGVfbGl0ZXJhbCB9IGZyb20gJ0Bzd2MvaGVscGVycy9fL190YWdnZWRfdGVtcGxhdGVfbGl0ZXJhbCc7XG5pbXBvcnQgeyBzdHlsZWQsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9yZWFjdC1uZXcnO1xuXG5mdW5jdGlvbiBfdGVtcGxhdGVPYmplY3QoKSB7XG4gIGNvbnN0IGRhdGEgPSBfdGFnZ2VkX3RlbXBsYXRlX2xpdGVyYWwoW1xuICAgICdcXG4gIDAlIHtcXG4gICAgdHJhbnNmb3JtOiBzY2FsZSgwKTtcXG4gICAgb3BhY2l0eTogMC4xO1xcbiAgfVxcblxcbiAgMTAwJSB7XFxuICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XFxuICAgIG9wYWNpdHk6IDAuMztcXG4gIH1cXG4nLFxuICBdKTtcbiAgX3RlbXBsYXRlT2JqZWN0ID0gZnVuY3Rpb24gKCkge1xuICAgIHJldHVybiBkYXRhO1xuICB9O1xuICByZXR1cm4gZGF0YTtcbn1cbmZ1bmN0aW9uIF90ZW1wbGF0ZU9iamVjdDEoKSB7XG4gIGNvbnN0IGRhdGEgPSBfdGFnZ2VkX3RlbXBsYXRlX2xpdGVyYWwoW1xuICAgICdcXG4gIDAlIHtcXG4gICAgb3BhY2l0eTogMTtcXG4gIH1cXG5cXG4gIDEwMCUge1xcbiAgICBvcGFjaXR5OiAwO1xcbiAgfVxcbicsXG4gIF0pO1xuICBfdGVtcGxhdGVPYmplY3QxID0gZnVuY3Rpb24gKCkge1xuICAgIHJldHVybiBkYXRhO1xuICB9O1xuICByZXR1cm4gZGF0YTtcbn1cbmZ1bmN0aW9uIF90ZW1wbGF0ZU9iamVjdDIoKSB7XG4gIGNvbnN0IGRhdGEgPSBfdGFnZ2VkX3RlbXBsYXRlX2xpdGVyYWwoW1xuICAgICdcXG4gIDAlIHtcXG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcXG4gIH1cXG5cXG4gIDUwJSB7XFxuICAgIHRyYW5zZm9ybTogc2NhbGUoMC45Mik7XFxuICB9XFxuXFxuICAxMDAlIHtcXG4gICAgdHJhbnNmb3JtOiBzY2FsZSgxKTtcXG4gIH1cXG4nLFxuICBdKTtcbiAgX3RlbXBsYXRlT2JqZWN0MiA9IGZ1bmN0aW9uICgpIHtcbiAgICByZXR1cm4gZGF0YTtcbiAgfTtcbiAgcmV0dXJuIGRhdGE7XG59XG5mdW5jdGlvbiBfdGVtcGxhdGVPYmplY3QzKCkge1xuICBjb25zdCBkYXRhID0gX3RhZ2dlZF90ZW1wbGF0ZV9saXRlcmFsKFtcbiAgICAnXFxuICBvcGFjaXR5OiAwO1xcbiAgcG9zaXRpb246IGFic29sdXRlO1xcblxcbiAgJi4nLFxuICAgICcge1xcbiAgICBvcGFjaXR5OiAwLjM7XFxuICAgIHRyYW5zZm9ybTogc2NhbGUoMSk7XFxuICAgIGFuaW1hdGlvbi1uYW1lOiAnLFxuICAgICc7XFxuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogJyxcbiAgICAnbXM7XFxuICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246ICcsXG4gICAgJztcXG4gIH1cXG5cXG4gICYuJyxcbiAgICAnIHtcXG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAnLFxuICAgICdtcztcXG4gIH1cXG5cXG4gICYgLicsXG4gICAgJyB7XFxuICAgIG9wYWNpdHk6IDE7XFxuICAgIGRpc3BsYXk6IGJsb2NrO1xcbiAgICB3aWR0aDogMTAwJTtcXG4gICAgaGVpZ2h0OiAxMDAlO1xcbiAgICBib3JkZXItcmFkaXVzOiA1MCU7XFxuICAgIGJhY2tncm91bmQtY29sb3I6IGN1cnJlbnRDb2xvcjtcXG4gIH1cXG5cXG4gICYgLicsXG4gICAgJyB7XFxuICAgIG9wYWNpdHk6IDA7XFxuICAgIGFuaW1hdGlvbi1uYW1lOiAnLFxuICAgICc7XFxuICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogJyxcbiAgICAnbXM7XFxuICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246ICcsXG4gICAgJztcXG4gIH1cXG5cXG4gICYgLicsXG4gICAgJyB7XFxuICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTtcXG4gICAgLyogQG5vZmxpcCAqL1xcbiAgICBsZWZ0OiAwcHg7XFxuICAgIHRvcDogMDtcXG4gICAgYW5pbWF0aW9uLW5hbWU6ICcsXG4gICAgJztcXG4gICAgYW5pbWF0aW9uLWR1cmF0aW9uOiAyNTAwbXM7XFxuICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246ICcsXG4gICAgJztcXG4gICAgYW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDogaW5maW5pdGU7XFxuICAgIGFuaW1hdGlvbi1kZWxheTogMjAwbXM7XFxuICB9XFxuJyxcbiAgXSk7XG4gIF90ZW1wbGF0ZU9iamVjdDMgPSBmdW5jdGlvbiAoKSB7XG4gICAgcmV0dXJuIGRhdGE7XG4gIH07XG4gIHJldHVybiBkYXRhO1xufVxuXG5jb25zdCB0b3VjaFJpcHBsZUNsYXNzZXMgPSB7XG4gIHJpcHBsZVZpc2libGU6ICdNdWlUb3VjaFJpcHBsZS5yaXBwbGVWaXNpYmxlJyxcbiAgcmlwcGxlUHVsc2F0ZTogJ011aVRvdWNoUmlwcGxlLnJpcHBsZVB1bHNhdGUnLFxuICBjaGlsZDogJ011aVRvdWNoUmlwcGxlLmNoaWxkJyxcbiAgY2hpbGRMZWF2aW5nOiAnTXVpVG91Y2hSaXBwbGUuY2hpbGRMZWF2aW5nJyxcbiAgY2hpbGRQdWxzYXRlOiAnTXVpVG91Y2hSaXBwbGUuY2hpbGRQdWxzYXRlJyxcbn07XG5cbmNvbnN0IGVudGVyS2V5ZnJhbWUgPSBrZXlmcmFtZXMoX3RlbXBsYXRlT2JqZWN0KCkpO1xuY29uc3QgZXhpdEtleWZyYW1lID0ga2V5ZnJhbWVzKF90ZW1wbGF0ZU9iamVjdDEoKSk7XG5jb25zdCBwdWxzYXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoX3RlbXBsYXRlT2JqZWN0MigpKTtcblxuZXhwb3J0IGNvbnN0IFRvdWNoUmlwcGxlUm9vdCA9IHN0eWxlZCgnc3BhbicsIHtcbiAgbmFtZTogJ011aVRvdWNoUmlwcGxlJyxcbiAgc2xvdDogJ1Jvb3QnLFxufSkoe1xuICBvdmVyZmxvdzogJ2hpZGRlbicsXG4gIHBvaW50ZXJFdmVudHM6ICdub25lJyxcbiAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIHpJbmRleDogMCxcbiAgdG9wOiAwLFxuICByaWdodDogMCxcbiAgYm90dG9tOiAwLFxuICBsZWZ0OiAwLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0Jyxcbn0pO1xuXG4vLyBUaGlzIGBzdHlsZWQoKWAgZnVuY3Rpb24gaW52b2tlcyBrZXlmcmFtZXMuIGBzdHlsZWQtY29tcG9uZW50c2Agb25seSBzdXBwb3J0cyBrZXlmcmFtZXNcbi8vIGluIHN0cmluZyB0ZW1wbGF0ZXMuIERvIG5vdCBjb252ZXJ0IHRoZXNlIHN0eWxlcyBpbiBKUyBvYmplY3QgYXMgaXQgd2lsbCBicmVhay5cbmV4cG9ydCBjb25zdCBUb3VjaFJpcHBsZVJpcHBsZSA9IHN0eWxlZChSaXBwbGUsIHtcbiAgbmFtZTogJ011aVRvdWNoUmlwcGxlJyxcbiAgc2xvdDogJ1JpcHBsZScsXG59KShcbiAgX3RlbXBsYXRlT2JqZWN0MygpLFxuICB0b3VjaFJpcHBsZUNsYXNzZXMucmlwcGxlVmlzaWJsZSxcbiAgZW50ZXJLZXlmcmFtZSxcbiAgRFVSQVRJT04sXG4gIChwYXJhbSkgPT4ge1xuICAgIGxldCB7IHRoZW1lIH0gPSBwYXJhbTtcbiAgICByZXR1cm4gdGhlbWUudHJhbnNpdGlvbnMuZWFzaW5nLmVhc2VJbk91dDtcbiAgfSxcbiAgdG91Y2hSaXBwbGVDbGFzc2VzLnJpcHBsZVB1bHNhdGUsXG4gIChwYXJhbSkgPT4ge1xuICAgIGxldCB7IHRoZW1lIH0gPSBwYXJhbTtcbiAgICByZXR1cm4gdGhlbWUudHJhbnNpdGlvbnMuZHVyYXRpb24uc2hvcnRlcjtcbiAgfSxcbiAgdG91Y2hSaXBwbGVDbGFzc2VzLmNoaWxkLFxuICB0b3VjaFJpcHBsZUNsYXNzZXMuY2hpbGRMZWF2aW5nLFxuICBleGl0S2V5ZnJhbWUsXG4gIERVUkFUSU9OLFxuICAocGFyYW0pID0+IHtcbiAgICBsZXQgeyB0aGVtZSB9ID0gcGFyYW07XG4gICAgcmV0dXJuIHRoZW1lLnRyYW5zaXRpb25zLmVhc2luZy5lYXNlSW5PdXQ7XG4gIH0sXG4gIHRvdWNoUmlwcGxlQ2xhc3Nlcy5jaGlsZFB1bHNhdGUsXG4gIHB1bHNhdGVLZXlmcmFtZSxcbiAgKHBhcmFtKSA9PiB7XG4gICAgbGV0IHsgdGhlbWUgfSA9IHBhcmFtO1xuICAgIHJldHVybiB0aGVtZS50cmFuc2l0aW9ucy5lYXNpbmcuZWFzZUluT3V0O1xuICB9LFxuKTtcbiJdfQ==*/
\ No newline at end of file
diff --git a/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.output.js b/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.output.js
new file mode 100644
index 00000000..ce6a834c
--- /dev/null
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled-swc-transformed-tagged-string.output.js
@@ -0,0 +1,14 @@
+import { styled as _styled, styled as _styled2 } from '@pigment-css/react-new/runtime';
+/**
+ * This is a pre-transformed file for testing.
+ */
+export const TouchRippleRoot = /*#__PURE__*/ _styled('span')({
+  classes: 'tcavtwv',
+});
+
+// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
+// in string templates. Do not convert these styles in JS object as it will break.
+const _exp6 = /*#__PURE__*/ () => Ripple;
+export const TouchRippleRipple = /*#__PURE__*/ _styled2(_exp6())({
+  classes: 'tblmtgc',
+});
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
index 58d8415c..1255e9d7 100644
--- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.input.js
@@ -1,3 +1,4 @@
+import { t } from '@pigment-css/theme';
 import { styled, keyframes, css } from '@pigment-css/react-new';
 import { TestComponent } from './dummy-component.fixture';
 
@@ -103,6 +104,31 @@ const SliderRail4 = styled.span`
   }
 `;
 
+const ViewPort = styled(SliderRail4)`
+  max-height: 100vh;
+  padding-top: 0.75rem;
+  padding-bottom: 3rem;
+  padding-left: 1.5rem;
+  padding-right: calc(
+    var(--sideNavScrollbarGapLeft) + var(--sideNavScrollbarWidth) / 2 +
+      var(--sideNavScrollbarThumbWidth) / 2
+  );
+
+  /* Scroll containers are focusable */
+  outline: 0;
+
+  .Root:has(&:focus-visible)::before {
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    outline: 2px solid ${t('$color.blue')};
+    outline-offset: -2px;
+    /* Don't inset the outline on the right */
+    right: -2px;
+  }
+`;
+
 export function App() {
   return (
     <Component>
@@ -111,3 +137,5 @@ export function App() {
     </Component>
   );
 }
+
+App.displayName = 'App';
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
index b7a759ad..aac9e230 100644
--- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.css
@@ -10,4 +10,8 @@
 @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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC5pbnB1dC5qcyJdLCJuYW1lcyI6WyIuYzFkZ3NnbmgiLCIucm90YXRlIiwiLlN0eWxlZFRlc3QiLCIuU3R5bGVkVGVzdC1zaXplLXNtYWxsIiwiLlN0eWxlZFRlc3Qtc2l6ZS1tZWRpdW0iLCIuU3R5bGVkVGVzdC1zaXplLWxhcmdlIiwiLnM0ZWtkZGEiLCIuc3FwemVlIiwiLnMxbzQ4bTE3IiwiLmMxM2U3azdjIiwiLnNxemdqYjciLCIuc3hjanV3dSJdLCJtYXBwaW5ncyI6IkFBR2lCQTtBQUlnREM7QUFXOURDO0FBQUFDO0FBQUFDO0FBQUFDO0FBa0NBQztBQVN1QkM7QUFZTUM7QUFRSEM7QUFNVEM7QUFTQUMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLXJlYWN0LW5ldy90ZXN0cy9zdHlsZWQvZml4dHVyZXMvc3R5bGVkLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHN0eWxlZCwga2V5ZnJhbWVzLCBjc3MgfSBmcm9tICdAcGlnbWVudC1jc3MvcmVhY3QtbmV3JztcbmltcG9ydCB7IFRlc3RDb21wb25lbnQgfSBmcm9tICcuL2R1bW15LWNvbXBvbmVudC5maXh0dXJlJztcblxuY29uc3QgY2xzMSA9IGNzcyh7XG4gIGNvbG9yOiAncmVkJyxcbn0pO1xuXG5leHBvcnQgY29uc3Qgcm90YXRlS2V5ZnJhbWUgPSBrZXlmcmFtZXMoeyBjbGFzc05hbWU6ICdyb3RhdGUnIH0pKHtcbiAgZnJvbToge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgzNjBkZWcpJyxcbiAgfSxcbiAgdG86IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMGRlZyknLFxuICB9LFxufSk7XG5cbmNvbnN0IFN0eWxlZFRlc3QgPSBzdHlsZWQoVGVzdENvbXBvbmVudCwge1xuICBjbGFzc05hbWU6ICdTdHlsZWRUZXN0Jyxcbn0pKHtcbiAgJCRpZDogMCxcbiAgZGlzcGxheTogJ2Jsb2NrJyxcbiAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gIGJvcmRlclJhZGl1czogJ2luaGVyaXQnLFxuICBbYC4ke2NsczF9YF06IHtcbiAgICBjb2xvcjogJ2JsdWUnLFxuICB9LFxuICBjb2xvcihwcm9wcykge1xuICAgIHJldHVybiBwcm9wcy5zaXplID09PSAnc21hbGwnID8gJ3JlZCcgOiAnYmx1ZSc7XG4gIH0sXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRpZDogJzAxJyxcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogJ3JlZCcsXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkaWQ6ICcwMicsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRpZDogJzAzJyxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG59KTtcblxuZXhwb3J0IGNvbnN0IFNsaWRlclJhaWwzID0gc3R5bGVkKCdzcGFuJywge1xuICBuYW1lOiAnTXVpU2xpZGVyJyxcbiAgc2xvdDogJ1JhaWwnLFxufSkoe1xuICAkJGlkOiAxLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIGJhY2tncm91bmRDb2xvcjogJ2N1cnJlbnRDb2xvcicsXG4gIG9wYWNpdHk6IDAuMzgsXG59KTtcblxuZXhwb3J0IGNvbnN0IFNsaWRlclJhaWwgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KWBcbiAgLS0taWQ6IDI7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBwb3NpdGlvbjogYWJzb2x1dGU7XG4gIGJvcmRlci1yYWRpdXM6IGluaGVyaXQ7XG4gIGJhY2tncm91bmQtY29sb3I6IGN1cnJlbnRDb2xvcjtcbiAgb3BhY2l0eTogMC4zODtcbmA7XG5cbmNvbnN0IFNsaWRlclJhaWw1ID0gc3R5bGVkLnNwYW4oe1xuICBkaXNwbGF5OiAnYmxvY2snLFxuICBvcGFjaXR5OiAwLjM4LFxuICBbU2xpZGVyUmFpbF06IHtcbiAgICBkaXNwbGF5OiAnbm9uZScsXG4gIH0sXG59KTtcblxuY29uc3QgQ29tcG9uZW50ID0gc3R5bGVkLmRpdih7XG4gICQkaWQ6IDMsXG4gIGNvbG9yOiAnI2ZmNTI1MicsXG4gIGFuaW1hdGlvbjogYCR7cm90YXRlS2V5ZnJhbWV9IDJzIGVhc2Utb3V0IDBzIGluZmluaXRlYCxcbn0pO1xuXG5jb25zdCBTbGlkZXJSYWlsMiA9IHN0eWxlZCgnc3BhbicpYFxuICAtLS1pZDogNDtcbiAgZGlzcGxheTogYmxvY2s7XG4gIG9wYWNpdHk6IDAuMzg7XG4gICR7U2xpZGVyUmFpbH0ge1xuICAgIGRpc3BsYXk6IG5vbmU7XG4gIH1cbmA7XG5cbmNvbnN0IFNsaWRlclJhaWw0ID0gc3R5bGVkLnNwYW5gXG4gIC0tLWlkOiA1O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuZXhwb3J0IGZ1bmN0aW9uIEFwcCgpIHtcbiAgcmV0dXJuIChcbiAgICA8Q29tcG9uZW50PlxuICAgICAgPFNsaWRlclJhaWwgLz5cbiAgICAgIDxTbGlkZXJSYWlsMiAvPlxuICAgIDwvQ29tcG9uZW50PlxuICApO1xufVxuIl19*/
\ No newline at end of file
+@layer pigment.base{.v1x90zfp{max-height:100vh;padding-top:0.75rem;padding-bottom:3rem;padding-left:1.5rem;padding-right:calc(
+    var(--sideNavScrollbarGapLeft) + var(--sideNavScrollbarWidth) / 2 +
+      var(--sideNavScrollbarThumbWidth) / 2
+  );outline:0;}.Root:has(.v1x90zfp:focus-visible)::before{content:'';inset:0;pointer-events:none;position:absolute;outline:2px solid var(--color-blue);outline-offset:-2px;right:-2px;}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC5pbnB1dC5qcyJdLCJuYW1lcyI6WyIuYzFkZ3NnbmgiLCIucm90YXRlIiwiLlN0eWxlZFRlc3QiLCIuU3R5bGVkVGVzdC1zaXplLXNtYWxsIiwiLlN0eWxlZFRlc3Qtc2l6ZS1tZWRpdW0iLCIuU3R5bGVkVGVzdC1zaXplLWxhcmdlIiwiLnM0ZWtkZGEiLCIuc3FwemVlIiwiLnMxbzQ4bTE3IiwiLmMxM2U3azdjIiwiLnNxemdqYjciLCIuc3hjanV3dSIsIi52MXg5MHpmcCJdLCJtYXBwaW5ncyI6IkFBSWlCQTtBQUlnREM7QUFXOURDO0FBQUFDO0FBQUFDO0FBQUFDO0FBa0NBQztBQVN1QkM7QUFZTUM7QUFRSEM7QUFNVEM7QUFTQUM7QUFTSEMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLXJlYWN0LW5ldy90ZXN0cy9zdHlsZWQvZml4dHVyZXMvc3R5bGVkLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IHQgfSBmcm9tICdAcGlnbWVudC1jc3MvdGhlbWUnO1xuaW1wb3J0IHsgc3R5bGVkLCBrZXlmcmFtZXMsIGNzcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9yZWFjdC1uZXcnO1xuaW1wb3J0IHsgVGVzdENvbXBvbmVudCB9IGZyb20gJy4vZHVtbXktY29tcG9uZW50LmZpeHR1cmUnO1xuXG5jb25zdCBjbHMxID0gY3NzKHtcbiAgY29sb3I6ICdyZWQnLFxufSk7XG5cbmV4cG9ydCBjb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7IGNsYXNzTmFtZTogJ3JvdGF0ZScgfSkoe1xuICBmcm9tOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDM2MGRlZyknLFxuICB9LFxuICB0bzoge1xuICAgIHRyYW5zZm9ybTogJ3JvdGF0ZSgwZGVnKScsXG4gIH0sXG59KTtcblxuY29uc3QgU3R5bGVkVGVzdCA9IHN0eWxlZChUZXN0Q29tcG9uZW50LCB7XG4gIGNsYXNzTmFtZTogJ1N0eWxlZFRlc3QnLFxufSkoe1xuICAkJGlkOiAwLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIFtgLiR7Y2xzMX1gXToge1xuICAgIGNvbG9yOiAnYmx1ZScsXG4gIH0sXG4gIGNvbG9yKHByb3BzKSB7XG4gICAgcmV0dXJuIHByb3BzLnNpemUgPT09ICdzbWFsbCcgPyAncmVkJyA6ICdibHVlJztcbiAgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGlkOiAnMDEnLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncmVkJyxcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRpZDogJzAyJyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGlkOiAnMDMnLFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbDMgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KSh7XG4gICQkaWQ6IDEsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgYmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgb3BhY2l0eTogMC4zOCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbCA9IHN0eWxlZCgnc3BhbicsIHtcbiAgbmFtZTogJ011aVNsaWRlcicsXG4gIHNsb3Q6ICdSYWlsJyxcbn0pYFxuICAtLS1pZDogMjtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudENvbG9yO1xuICBvcGFjaXR5OiAwLjM4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDUgPSBzdHlsZWQuc3Bhbih7XG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIG9wYWNpdHk6IDAuMzgsXG4gIFtTbGlkZXJSYWlsXToge1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgJCRpZDogMyxcbiAgY29sb3I6ICcjZmY1MjUyJyxcbiAgYW5pbWF0aW9uOiBgJHtyb3RhdGVLZXlmcmFtZX0gMnMgZWFzZS1vdXQgMHMgaW5maW5pdGVgLFxufSk7XG5cbmNvbnN0IFNsaWRlclJhaWwyID0gc3R5bGVkKCdzcGFuJylgXG4gIC0tLWlkOiA0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2xpZGVyUmFpbDQgPSBzdHlsZWQuc3BhbmBcbiAgLS0taWQ6IDU7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvcGFjaXR5OiAwLjM4O1xuICAke1NsaWRlclJhaWx9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5gO1xuXG5jb25zdCBWaWV3UG9ydCA9IHN0eWxlZChTbGlkZXJSYWlsNClgXG4gIG1heC1oZWlnaHQ6IDEwMHZoO1xuICBwYWRkaW5nLXRvcDogMC43NXJlbTtcbiAgcGFkZGluZy1ib3R0b206IDNyZW07XG4gIHBhZGRpbmctbGVmdDogMS41cmVtO1xuICBwYWRkaW5nLXJpZ2h0OiBjYWxjKFxuICAgIHZhcigtLXNpZGVOYXZTY3JvbGxiYXJHYXBMZWZ0KSArIHZhcigtLXNpZGVOYXZTY3JvbGxiYXJXaWR0aCkgLyAyICtcbiAgICAgIHZhcigtLXNpZGVOYXZTY3JvbGxiYXJUaHVtYldpZHRoKSAvIDJcbiAgKTtcblxuICAvKiBTY3JvbGwgY29udGFpbmVycyBhcmUgZm9jdXNhYmxlICovXG4gIG91dGxpbmU6IDA7XG5cbiAgLlJvb3Q6aGFzKCY6Zm9jdXMtdmlzaWJsZSk6OmJlZm9yZSB7XG4gICAgY29udGVudDogJyc7XG4gICAgaW5zZXQ6IDA7XG4gICAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIG91dGxpbmU6IDJweCBzb2xpZCAke3QoJyRjb2xvci5ibHVlJyl9O1xuICAgIG91dGxpbmUtb2Zmc2V0OiAtMnB4O1xuICAgIC8qIERvbid0IGluc2V0IHRoZSBvdXRsaW5lIG9uIHRoZSByaWdodCAqL1xuICAgIHJpZ2h0OiAtMnB4O1xuICB9XG5gO1xuXG5leHBvcnQgZnVuY3Rpb24gQXBwKCkge1xuICByZXR1cm4gKFxuICAgIDxDb21wb25lbnQ+XG4gICAgICA8U2xpZGVyUmFpbCAvPlxuICAgICAgPFNsaWRlclJhaWwyIC8+XG4gICAgPC9Db21wb25lbnQ+XG4gICk7XG59XG5cbkFwcC5kaXNwbGF5TmFtZSA9ICdBcHAnO1xuIl19*/
\ 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
index 4e921e30..2c4031f3 100644
--- a/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js
+++ b/packages/pigment-css-react-new/tests/styled/fixtures/styled.output.js
@@ -7,6 +7,7 @@ import {
   styled as _styled5,
   styled as _styled6,
   styled as _styled7,
+  styled as _styled8,
 } from '@pigment-css/react-new/runtime';
 import { TestComponent } from './dummy-component.fixture';
 export const rotateKeyframe = 'rotate';
@@ -60,6 +61,10 @@ const SliderRail2 = /*#__PURE__*/ _styled6('span')({
 const SliderRail4 = /*#__PURE__*/ _styled7('span')({
   classes: 'sxcjuwu',
 });
+const _exp14 = /*#__PURE__*/ () => SliderRail4;
+const ViewPort = /*#__PURE__*/ _styled8(_exp14())({
+  classes: 'v1x90zfp',
+});
 export function App() {
   return (
     <Component>
@@ -68,3 +73,4 @@ export function App() {
     </Component>
   );
 }
+App.displayName = 'App';
diff --git a/packages/pigment-css-react-new/tests/styled/styled.test.tsx b/packages/pigment-css-react-new/tests/styled/styled.test.tsx
index 324de6ad..498de07e 100644
--- a/packages/pigment-css-react-new/tests/styled/styled.test.tsx
+++ b/packages/pigment-css-react-new/tests/styled/styled.test.tsx
@@ -41,4 +41,39 @@ describe('Pigment CSS - styled', () => {
     expect(output.js).to.equal(fixture.js);
     expect(output.css).to.equal(fixture.css);
   });
+
+  it('should handled pre-transformed tagged template literal', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/styled-swc-transformed-tagged-string.input.js'),
+      {
+        features: {
+          useLayer: false,
+        },
+        themeArgs: {
+          theme: {
+            transitions: {
+              easing: {
+                easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+                easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+                easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
+                sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
+              },
+              duration: {
+                shortest: 150,
+                shorter: 200,
+                short: 250,
+                standard: 300,
+                complex: 375,
+                enteringScreen: 225,
+                leavingScreen: 195,
+              },
+            },
+          },
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
 });
diff --git a/packages/pigment-css-utils/src/utils/processStyle.ts b/packages/pigment-css-utils/src/utils/processStyle.ts
index 90528b3d..cbf94583 100644
--- a/packages/pigment-css-utils/src/utils/processStyle.ts
+++ b/packages/pigment-css-utils/src/utils/processStyle.ts
@@ -78,7 +78,7 @@ export function getCSSVar(key: string, wrapInVar = false): string {
   return result;
 }
 
-function transformProbableCssVar(value: string): string {
+export function transformProbableCssVar(value: string): string {
   const variableRegex = /(\$\$?\w[\d+\w+.]{0,})/g;
   return value.replaceAll(variableRegex, (sub) => {
     return getCSSVar(sub, true);
@@ -157,7 +157,7 @@ function getCss(
   delete style.defaultVariants;
 
   const { result: baseObj, variables } = processStyle(style, { getVariableName });
-  const cssText = serializeStyles([baseObj as any]).styles;
+  const { styles: cssText } = serializeStyles([baseObj as any]);
   result.base.push({
     className: getClassName(),
     cssText,

From 04d8b61369ad6bf72a01f1776004d2e7ec4f7797 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Thu, 27 Feb 2025 17:41:27 +0530
Subject: [PATCH 07/12] Make the package exports work with node10 resolution

---
 packages/pigment-css-react-new/.gitignore     |  2 +
 packages/pigment-css-react-new/exports/css.js |  2 +-
 .../pigment-css-react-new/exports/styled.js   |  2 +-
 packages/pigment-css-react-new/package.json   | 45 +++++++++++++------
 packages/pigment-css-react-new/tsup.config.ts |  4 +-
 packages/pigment-css-utils/package.json       |  9 ++--
 6 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 packages/pigment-css-react-new/.gitignore

diff --git a/packages/pigment-css-react-new/.gitignore b/packages/pigment-css-react-new/.gitignore
new file mode 100644
index 00000000..5a1c9bc1
--- /dev/null
+++ b/packages/pigment-css-react-new/.gitignore
@@ -0,0 +1,2 @@
+processors/
+runtime/
diff --git a/packages/pigment-css-react-new/exports/css.js b/packages/pigment-css-react-new/exports/css.js
index 90873c69..4707c749 100644
--- a/packages/pigment-css-react-new/exports/css.js
+++ b/packages/pigment-css-react-new/exports/css.js
@@ -2,4 +2,4 @@ Object.defineProperty(exports, '__esModule', {
   value: true,
 });
 
-exports.default = require('../build/processors/css').StyledCssProcessor;
+exports.default = require('../processors/css').StyledCssProcessor;
diff --git a/packages/pigment-css-react-new/exports/styled.js b/packages/pigment-css-react-new/exports/styled.js
index 88af3fd0..937d484a 100644
--- a/packages/pigment-css-react-new/exports/styled.js
+++ b/packages/pigment-css-react-new/exports/styled.js
@@ -2,4 +2,4 @@ Object.defineProperty(exports, '__esModule', {
   value: true,
 });
 
-exports.default = require('../build/processors/styled').StyledProcessor;
+exports.default = require('../processors/styled').StyledProcessor;
diff --git a/packages/pigment-css-react-new/package.json b/packages/pigment-css-react-new/package.json
index 52dccef4..9210ec4e 100644
--- a/packages/pigment-css-react-new/package.json
+++ b/packages/pigment-css-react-new/package.json
@@ -69,40 +69,57 @@
     "src",
     "build",
     "exports",
+    "processors",
+    "runtime",
     "package.json",
     "styles.css",
     "LICENSE"
   ],
   "exports": {
     ".": {
-      "types": "./build/index.d.ts",
+      "require": {
+        "types": "./build/index.d.ts",
+        "default": "./build/index.js"
+      },
       "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"
+      "require": {
+        "types": "./processors/css.d.ts",
+        "default": "./processors/css.js"
+      },
+      "import": {
+        "types": "./processors/css.d.mts",
+        "default": "./processors/css.mjs"
+      }
     },
     "./processors/styled": {
-      "import": "./build/processors/styled.mjs",
-      "require": "./build/processors/styled.js",
-      "default": "./build/processors/styled.js"
+      "require": {
+        "types": "./processors/styled.d.ts",
+        "default": "./processors/styled.js"
+      },
+      "import": {
+        "types": "./processors/styled.d.mts",
+        "default": "./processors/styled.mjs"
+      }
     },
     "./exports/*": {
       "default": "./exports/*.js"
     },
     "./runtime": {
-      "types": "./build/runtime/index.d.ts",
-      "import": "./build/runtime/index.mjs",
-      "require": "./build/runtime/index.js",
-      "default": "./build/runtime/index.js"
+      "require": {
+        "types": "./runtime/index.d.ts",
+        "default": "./runtime/index.js"
+      },
+      "import": {
+        "types": "./runtime/index.d.mts",
+        "default": "./runtime/index.mjs"
+      }
     }
   },
   "nx": {
diff --git a/packages/pigment-css-react-new/tsup.config.ts b/packages/pigment-css-react-new/tsup.config.ts
index 6509ad28..ee327263 100644
--- a/packages/pigment-css-react-new/tsup.config.ts
+++ b/packages/pigment-css-react-new/tsup.config.ts
@@ -18,12 +18,12 @@ export default defineConfig([
   {
     ...baseConfig,
     entry: ['./src/runtime/index.ts'],
-    outDir: 'build/runtime',
+    outDir: 'runtime',
   },
   {
     ...baseConfig,
     entry: processors.map((file) => `./src/processors/${file}.ts`),
-    outDir: 'build/processors',
+    outDir: 'processors',
     cjsInterop: true,
   },
 ]);
diff --git a/packages/pigment-css-utils/package.json b/packages/pigment-css-utils/package.json
index 261439da..e6dd8f88 100644
--- a/packages/pigment-css-utils/package.json
+++ b/packages/pigment-css-utils/package.json
@@ -60,13 +60,14 @@
   ],
   "exports": {
     ".": {
-      "types": "./build/index.d.ts",
+      "require": {
+        "types": "./build/index.d.ts",
+        "default": "./build/index.js"
+      },
       "import": {
         "types": "./build/index.d.mts",
         "default": "./build/index.mjs"
-      },
-      "require": "./build/index.js",
-      "default": "./build/index.js"
+      }
     },
     "./package.json": "./package.json"
   },

From 8e9c8ec6ead91eaadc7babccd377e5c653db2bb1 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Thu, 27 Feb 2025 18:08:46 +0530
Subject: [PATCH 08/12] Throw error instead of warning when transform fails

---
 packages/pigment-css-react-new/src/styled.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/pigment-css-react-new/src/styled.js b/packages/pigment-css-react-new/src/styled.js
index 9a82254a..16d49821 100644
--- a/packages/pigment-css-react-new/src/styled.js
+++ b/packages/pigment-css-react-new/src/styled.js
@@ -1 +1,5 @@
-export { styled } from './runtime/styled';
+import { generateErrorMessage } from '@pigment-css/core';
+
+export function styled() {
+  throw new Error(generateErrorMessage('styled'));
+}

From fdf6245122cc8e4db898149f9a94d85b502d3c0c Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Thu, 27 Feb 2025 18:38:40 +0530
Subject: [PATCH 09/12] Consolidate exports to single ts file

---
 packages/pigment-css-react-new/src/styled.js     |  5 -----
 .../src/{styled.d.ts => styled.ts}               | 16 +++++++++++++---
 .../styled/fixtures/styled-no-layer.input.js     |  1 +
 .../styled/fixtures/styled-no-layer.output.css   |  2 +-
 4 files changed, 15 insertions(+), 9 deletions(-)
 delete mode 100644 packages/pigment-css-react-new/src/styled.js
 rename packages/pigment-css-react-new/src/{styled.d.ts => styled.ts} (86%)

diff --git a/packages/pigment-css-react-new/src/styled.js b/packages/pigment-css-react-new/src/styled.js
deleted file mode 100644
index 16d49821..00000000
--- a/packages/pigment-css-react-new/src/styled.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { generateErrorMessage } from '@pigment-css/core';
-
-export function styled() {
-  throw new Error(generateErrorMessage('styled'));
-}
diff --git a/packages/pigment-css-react-new/src/styled.d.ts b/packages/pigment-css-react-new/src/styled.ts
similarity index 86%
rename from packages/pigment-css-react-new/src/styled.d.ts
rename to packages/pigment-css-react-new/src/styled.ts
index 54e9d33c..701b8987 100644
--- a/packages/pigment-css-react-new/src/styled.d.ts
+++ b/packages/pigment-css-react-new/src/styled.ts
@@ -1,5 +1,12 @@
 import type * as React from 'react';
-import { Variants, BaseInterface, CssArg, VariantNames, Primitive } from '@pigment-css/core';
+import {
+  Variants,
+  BaseInterface,
+  CssArg,
+  VariantNames,
+  Primitive,
+  generateErrorMessage,
+} from '@pigment-css/core';
 
 export type NoInfer<T> = [T][T extends any ? 0 : never];
 type FastOmit<T extends object, U extends string | number | symbol> = {
@@ -8,7 +15,7 @@ type FastOmit<T extends object, U extends string | number | symbol> = {
 
 export type Substitute<A extends object, B extends object> = FastOmit<A, keyof B> & B;
 
-interface RequiredProps {
+export interface RequiredProps {
   className?: string;
   style?: React.CSSProperties;
 }
@@ -72,4 +79,7 @@ export type CreateStyledIndex = {
   >;
 };
 
-export declare const styled: CreateStyled & CreateStyledIndex;
+// @ts-expect-error The implementation is is different than the user API
+export const styled: CreateStyled & CreateStyledIndex = () => {
+  throw new Error(generateErrorMessage('styled'));
+};
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
index cd06929d..a538e091 100644
--- 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
@@ -14,6 +14,7 @@ function TestComponent() {
 }
 
 const StyledTest = styled(TestComponent)({
+  // gets converted to css variable -> ---id: 0px
   $$id: 0,
   display: 'block',
   position: 'absolute',
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
index d7a8cecf..748f1f76 100644
--- 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
@@ -9,4 +9,4 @@
 .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
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1uby1sYXllci5pbnB1dC5qcyJdLCJuYW1lcyI6WyIucmw5ZjN0MiIsIi5zMWsyMmRqIiwiLnMxazIyZGotc2l6ZS1zbWFsbCIsIi5zMWsyMmRqLXNpemUtbWVkaXVtIiwiLnMxazIyZGotc2l6ZS1sYXJnZSIsIi5zY3g2bGNpIiwiLnMxdXV0ZXB4IiwiLnMxY3pvbWttIiwiLmNhbWoybzkiLCIuczlqc3BhOCIsIi5zZzQ3YXpwIl0sIm1hcHBpbmdzIjoiQUFFaUNBO0FBYVFDO0FBQUFDO0FBQUFDO0FBQUFDO0FBZ0N0Q0M7QUFTdUJDO0FBWU1DO0FBUUhDO0FBTVRDO0FBU0FDIiwiZmlsZSI6Ii9wYWNrYWdlcy9waWdtZW50LWNzcy1yZWFjdC1uZXcvdGVzdHMvc3R5bGVkL2ZpeHR1cmVzL3N0eWxlZC1uby1sYXllci5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBzdHlsZWQsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9yZWFjdC1uZXcnO1xuXG5jb25zdCByb3RhdGVLZXlmcmFtZSA9IGtleWZyYW1lcyh7XG4gIGZyb206IHtcbiAgICB0cmFuc2Zvcm06ICdyb3RhdGUoMzYwZGVnKScsXG4gIH0sXG4gIHRvOiB7XG4gICAgdHJhbnNmb3JtOiAncm90YXRlKDBkZWcpJyxcbiAgfSxcbn0pO1xuXG5mdW5jdGlvbiBUZXN0Q29tcG9uZW50KCkge1xuICByZXR1cm4gPGgxPkhlbGxvPC9oMT47XG59XG5cbmNvbnN0IFN0eWxlZFRlc3QgPSBzdHlsZWQoVGVzdENvbXBvbmVudCkoe1xuICAvLyBnZXRzIGNvbnZlcnRlZCB0byBjc3MgdmFyaWFibGUgLT4gLS0taWQ6IDBweFxuICAkJGlkOiAwLFxuICBkaXNwbGF5OiAnYmxvY2snLFxuICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcsXG4gIGNvbG9yKHByb3BzKSB7XG4gICAgcmV0dXJuIHByb3BzLnNpemUgPT09ICdzbWFsbCcgPyAncmVkJyA6ICdibHVlJztcbiAgfSxcbiAgdmFyaWFudHM6IHtcbiAgICBzaXplOiB7XG4gICAgICBzbWFsbDoge1xuICAgICAgICAkJGlkOiAnMDEnLFxuICAgICAgICBwYWRkaW5nOiAwLFxuICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncmVkJyxcbiAgICAgIH0sXG4gICAgICBtZWRpdW06IHtcbiAgICAgICAgJCRpZDogJzAyJyxcbiAgICAgICAgcGFkZGluZzogNSxcbiAgICAgIH0sXG4gICAgICBsYXJnZToge1xuICAgICAgICAkJGlkOiAnMDMnLFxuICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbDMgPSBzdHlsZWQoJ3NwYW4nLCB7XG4gIG5hbWU6ICdNdWlTbGlkZXInLFxuICBzbG90OiAnUmFpbCcsXG59KSh7XG4gICQkaWQ6IDEsXG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICBib3JkZXJSYWRpdXM6ICdpbmhlcml0JyxcbiAgYmFja2dyb3VuZENvbG9yOiAnY3VycmVudENvbG9yJyxcbiAgb3BhY2l0eTogMC4zOCxcbn0pO1xuXG5leHBvcnQgY29uc3QgU2xpZGVyUmFpbCA9IHN0eWxlZCgnc3BhbicsIHtcbiAgbmFtZTogJ011aVNsaWRlcicsXG4gIHNsb3Q6ICdSYWlsJyxcbn0pYFxuICAtLS1pZDogMjtcbiAgZGlzcGxheTogYmxvY2s7XG4gIHBvc2l0aW9uOiBhYnNvbHV0ZTtcbiAgYm9yZGVyLXJhZGl1czogaW5oZXJpdDtcbiAgYmFja2dyb3VuZC1jb2xvcjogY3VycmVudENvbG9yO1xuICBvcGFjaXR5OiAwLjM4O1xuYDtcblxuY29uc3QgU2xpZGVyUmFpbDUgPSBzdHlsZWQuc3Bhbih7XG4gIGRpc3BsYXk6ICdibG9jaycsXG4gIG9wYWNpdHk6IDAuMzgsXG4gIFtTbGlkZXJSYWlsXToge1xuICAgIGRpc3BsYXk6ICdub25lJyxcbiAgfSxcbn0pO1xuXG5jb25zdCBDb21wb25lbnQgPSBzdHlsZWQuZGl2KHtcbiAgJCRpZDogMyxcbiAgY29sb3I6ICcjZmY1MjUyJyxcbiAgYW5pbWF0aW9uOiBgJHtyb3RhdGVLZXlmcmFtZX0gMnMgZWFzZS1vdXQgMHMgaW5maW5pdGVgLFxufSk7XG5cbmNvbnN0IFNsaWRlclJhaWwyID0gc3R5bGVkKCdzcGFuJylgXG4gIC0tLWlkOiA0O1xuICBkaXNwbGF5OiBibG9jaztcbiAgb3BhY2l0eTogMC4zODtcbiAgJHtTbGlkZXJSYWlsfSB7XG4gICAgZGlzcGxheTogbm9uZTtcbiAgfVxuYDtcblxuY29uc3QgU2xpZGVyUmFpbDQgPSBzdHlsZWQuc3BhbmBcbiAgLS0taWQ6IDU7XG4gIGRpc3BsYXk6IGJsb2NrO1xuICBvcGFjaXR5OiAwLjM4O1xuICAke1NsaWRlclJhaWx9IHtcbiAgICBkaXNwbGF5OiBub25lO1xuICB9XG5gO1xuXG5leHBvcnQgZnVuY3Rpb24gQXBwKCkge1xuICByZXR1cm4gKFxuICAgIDxDb21wb25lbnQ+XG4gICAgICA8U2xpZGVyUmFpbCAvPlxuICAgICAgPFNsaWRlclJhaWwyIC8+XG4gICAgPC9Db21wb25lbnQ+XG4gICk7XG59XG4iXX0=*/
\ No newline at end of file

From 4261fc9d35f053840ef0366daaa0bb4296bec2fd Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Thu, 6 Mar 2025 14:57:43 +0530
Subject: [PATCH 10/12] Update nx build outputs

---
 nx.json                                     | 9 ++++++++-
 packages/pigment-css-core/package.json      | 2 +-
 packages/pigment-css-react-new/package.json | 2 +-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/nx.json b/nx.json
index 4734b4e6..9009a8ec 100644
--- a/nx.json
+++ b/nx.json
@@ -9,7 +9,14 @@
     "build": {
       "cache": true,
       "dependsOn": ["copy-license", "^build"],
-      "outputs": ["{projectRoot}/build", "{projectRoot}/dist", "{projectRoot}/.next"]
+      "outputs": [
+        "{projectRoot}/build",
+        "{projectRoot}/processors",
+        "{projectRoot}/runtime",
+        "{projectRoot}/dist",
+        "{projectRoot}/.next",
+        "{projectRoot}/exports"
+      ]
     },
     "preview": {
       "dependsOn": ["^build"]
diff --git a/packages/pigment-css-core/package.json b/packages/pigment-css-core/package.json
index 3f6adae3..747b9afa 100644
--- a/packages/pigment-css-core/package.json
+++ b/packages/pigment-css-core/package.json
@@ -55,11 +55,11 @@
     }
   },
   "files": [
-    "src",
     "build",
     "exports",
     "processors",
     "runtime",
+    "src",
     "package.json",
     "styles.css",
     "LICENSE"
diff --git a/packages/pigment-css-react-new/package.json b/packages/pigment-css-react-new/package.json
index 9210ec4e..b7f59d0a 100644
--- a/packages/pigment-css-react-new/package.json
+++ b/packages/pigment-css-react-new/package.json
@@ -66,11 +66,11 @@
     }
   },
   "files": [
-    "src",
     "build",
     "exports",
     "processors",
     "runtime",
+    "src",
     "package.json",
     "styles.css",
     "LICENSE"

From 5e57953b427af0d8d995a37bb197fae836a39d5b Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Thu, 6 Mar 2025 17:07:51 +0530
Subject: [PATCH 11/12] Fix argument processing for constant string css

---
 packages/pigment-css-core/src/processors/css.ts           | 8 +++++---
 packages/pigment-css-core/tests/css/fixtures/css.input.js | 7 +++++++
 .../pigment-css-core/tests/css/fixtures/css.output.css    | 4 +++-
 .../pigment-css-core/tests/css/fixtures/css.output.js     | 4 ++++
 4 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/pigment-css-core/src/processors/css.ts b/packages/pigment-css-core/src/processors/css.ts
index 7581f381..3e50bae3 100644
--- a/packages/pigment-css-core/src/processors/css.ts
+++ b/packages/pigment-css-core/src/processors/css.ts
@@ -249,7 +249,7 @@ export class CssObjectProcessor extends BaseCssProcessor {
 
   getDependencies(): ExpressionValue[] {
     const [, ...params] = this.callParam;
-    return params.flat().filter((param) => 'kind' in param);
+    return params.flat().filter((param) => 'kind' in param && param.kind !== ValueType.CONST);
   }
 
   isMaybeTransformedTemplateLiteral(values: ValueCache): boolean {
@@ -278,13 +278,15 @@ export class CssObjectProcessor extends BaseCssProcessor {
     const { themeArgs, pigmentFeatures: { useLayer = true } = {} } = this
       .options as TransformedInternalConfig;
 
-    const evaluatedValues = (callParams as (LazyValue | FunctionValue)[]).map((param) =>
-      values.get(param.ex.name),
+    const evaluatedValues = (callParams as ExpressionValue[]).map((param) =>
+      param.kind === ValueType.CONST ? param.value : values.get(param.ex.name),
     );
     let stylesList: (object | Function)[];
     // let metadata: any;
     // check for css(metadata, [styles]) or css(metadata, style) call
     const locations: (SourceLocation | null | undefined)[] = [];
+    // Remove this condition as this supports an older API that has since been
+    // removed from TS support.
     if (
       evaluatedValues.length === 2 &&
       evaluatedValues[0] &&
diff --git a/packages/pigment-css-core/tests/css/fixtures/css.input.js b/packages/pigment-css-core/tests/css/fixtures/css.input.js
index 7780b281..c9641849 100644
--- a/packages/pigment-css-core/tests/css/fixtures/css.input.js
+++ b/packages/pigment-css-core/tests/css/fixtures/css.input.js
@@ -165,3 +165,10 @@ export const cls6 = css(({ theme }) => ({
     },
   ],
 }));
+
+export const cls7 = css(
+  {
+    color: '$palette.main',
+  },
+  `display: black`,
+);
diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.css b/packages/pigment-css-core/tests/css/fixtures/css.output.css
index e4b08084..f5e61021 100644
--- a/packages/pigment-css-core/tests/css/fixtures/css.output.css
+++ b/packages/pigment-css-core/tests/css/fixtures/css.output.css
@@ -22,4 +22,6 @@
 @layer pigment.variants{.c1qxs0o9-palette-primary{color:red;border-color:pink;}}
 @layer pigment.variants{.c1qxs0o9-palette-secondary{color:red;border-color:pink;}}
 @layer pigment.compoundvariants{.c1qxs0o9-cv{border-width:1px;}}
-/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIiwiLmMxcXhzMG85IiwiLmMxcXhzMG85LXBhbGV0dGUtcHJpbWFyeSIsIi5jMXF4czBvOS1wYWxldHRlLXNlY29uZGFyeSIsIi5jMXF4czBvOS1jdiJdLCJtYXBwaW5ncyI6IkFBS21DQTtBQU1mQztBQVNsQkM7QUFLQUM7QUFPa0JDO0FBVWxCQztBQU1BQztBQTJCQUM7QUFNQUM7QUF2Q0FDO0FBTUFDO0FBMkJBQztBQWNvREM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFBQUM7QUFxRDlCQztBQUFBQztBQUFBQztBQUFBQyIsImZpbGUiOiIvcGFja2FnZXMvcGlnbWVudC1jc3MtY29yZS90ZXN0cy9jc3MvZml4dHVyZXMvY3NzLmlucHV0LmNzcyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQHBpZ21lbnQtY3NzL2NvcmUnO1xuaW1wb3J0IHsgdCB9IGZyb20gJ0BwaWdtZW50LWNzcy90aGVtZSc7XG5cbmNvbnN0IGFiID0gJ2FsaWNlYmx1ZSc7XG5cbmNvbnN0IGdyYWRpZW50S2V5ZnJhbWUgPSBrZXlmcmFtZXMoKHsgdGhlbWUgfSkgPT4gKHtcbiAgJzUwJSc6IHtcbiAgICBiYWNrZ3JvdW5kOiAnZ3JlZW4nLFxuICB9LFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzMSA9IGNzc2BcbiAgLS0tZmxleDogMTtcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYW5pbWF0aW9uLW5hbWU6ICR7Z3JhZGllbnRLZXlmcmFtZX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczIgPSBjc3MoXG4gIHtcbiAgICAkJGZsZXg6IDIxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYm9yZGVyOiAnMXB4IHNvbGlkICQkdGVzdFZhcicsXG4gIH0sXG4gIHtcbiAgICAkJGZsZXg6IDIyLFxuICAgICQkdGVzdFZhcjE6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXIxJyxcbiAgfSxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHMzID0gY3NzKHtcbiAgY2xhc3NOYW1lOiAnVGVzdC1jbGFzcycsXG59KWBcbiAgLS0tZmxleDogMztcbiAgY29sb3I6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICBmb250LXNpemU6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuc2l6ZS5mb250LmgxfTtcbiAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG5gO1xuXG5leHBvcnQgY29uc3QgY2xzNCA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MyJyB9KShcbiAge1xuICAgICQkZmxleDogNDEsXG4gICAgJCR0ZXN0VmFyOiAncmVkJyxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICAgIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIH0sXG4gICh7IHRoZW1lIH0pID0+ICh7XG4gICAgJCRmbGV4OiA0MixcbiAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgZm9udFNpemU6IHRoZW1lLnNpemUuZm9udC5oMSxcbiAgICBiYWNrZ3JvdW5kQ29sb3I6IGFiLFxuICAgIHZhcmlhbnRzOiB7XG4gICAgICBzaXplOiB7XG4gICAgICAgIHNtYWxsOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjEsXG4gICAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgICBtYXJnaW46IDAsXG4gICAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgICB9LFxuICAgICAgICBtZWRpdW06IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMixcbiAgICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgICB9LFxuICAgICAgICBsYXJnZToge1xuICAgICAgICAgICQkZmxleDogNDIzLFxuICAgICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgICB9LFxuICAgICAgfSxcbiAgICB9LFxuICAgIGRlZmF1bHRWYXJpYW50czoge1xuICAgICAgc2l6ZTogJ21lZGl1bScsXG4gICAgfSxcbiAgfSksXG4gICh7IHRoZW1lIH0pID0+IGBcbiAgICAtLS1mbGV4OiA0MztcbiAgICBjb2xvcjogJHt0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbn07XG4gICAgZm9udC1zaXplOiAke3RoZW1lLnNpemUuZm9udC5oMX07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG4gIGAsXG4gIGBcbiAgICAtLS1mbGV4OiA0NDtcbiAgICBjb2xvcjogcmVkO1xuICAgIGZvbnQtc2l6ZTogMXJlbTtcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbiAgYCxcbik7XG5cbmV4cG9ydCBjb25zdCBjbHM1ID0gY3NzKHsgY2xhc3NOYW1lOiAnVGVzdC1jbGFzczMnIH0pKCh7IHRoZW1lIH0pID0+ICh7XG4gICQkZmxleDogNTEsXG4gICQkdGVzdFZhcjogJ3JlZCcsXG4gIGJhY2tncm91bmRDb2xvcjogJyQkdGVzdFZhcicsXG4gIGJvcmRlcjogYDFweCBzb2xpZCAke3QoJyRwYWxldHRlLnByaW1hcnkubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgc2l6ZToge1xuICAgICAgc21hbGw6IHtcbiAgICAgICAgJCRmbGV4OiA1MixcbiAgICAgICAgcGFkZGluZzogMCxcbiAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW4sXG4gICAgICB9LFxuICAgICAgbWVkaXVtOiB7XG4gICAgICAgICQkZmxleDogNTMsXG4gICAgICAgIHBhZGRpbmc6IDUsXG4gICAgICB9LFxuICAgICAgbGFyZ2U6IHtcbiAgICAgICAgJCRmbGV4OiA1NCxcbiAgICAgICAgcGFkZGluZzogMTAsXG4gICAgICB9LFxuICAgIH0sXG4gICAgY29sb3I6IHtcbiAgICAgIHByaW1hcnk6IHtcbiAgICAgICAgJCRmbGV4OiA1NSxcbiAgICAgICAgY29sb3I6ICdncmVlbicsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgICQkZmxleDogNTYsXG4gICAgICAgIGNvbG9yOiAnYmx1ZScsXG4gICAgICB9LFxuICAgIH0sXG4gIH0sXG4gIGNvbXBvdW5kVmFyaWFudHM6IFtcbiAgICB7XG4gICAgICBzaXplOiAnc21hbGwnLFxuICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIGNzczoge1xuICAgICAgICAkJGZsZXg6IDU3LFxuICAgICAgICBib3JkZXJSYWRpdXM6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgICB7XG4gICAgICBzaXplOiAnbGFyZ2UnLFxuICAgICAgY29sb3I6ICdwcmltYXJ5JyxcbiAgICAgIGNzczoge1xuICAgICAgICAkJGZsZXg6IDU4LFxuICAgICAgICBib3JkZXJSYWRpdXM6ICcxMDAlJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgXSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczYgPSBjc3MoKHsgdGhlbWUgfSkgPT4gKHtcbiAgY29sb3I6ICckcGFsZXR0ZS5tYWluJyxcbiAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLm1haW4xLFxuICBib3JkZXI6IGAxcHggc29saWQgJHt0KCckcGFsZXR0ZS5tYWluJyl9YCxcbiAgdmFyaWFudHM6IHtcbiAgICBwYWxldHRlOiB7XG4gICAgICBwcmltYXJ5OiB7XG4gICAgICAgIGNvbG9yOiAncmVkJyxcbiAgICAgICAgYm9yZGVyQ29sb3I6ICdwaW5rJyxcbiAgICAgIH0sXG4gICAgICBzZWNvbmRhcnk6IHtcbiAgICAgICAgY29sb3I6ICdyZWQnLFxuICAgICAgICBib3JkZXJDb2xvcjogJ3BpbmsnLFxuICAgICAgfSxcbiAgICB9LFxuICB9LFxuICBjb21wb3VuZFZhcmlhbnRzOiBbXG4gICAge1xuICAgICAgcGFsZXR0ZTogJ3NlY29uZGFyeScsXG4gICAgICBjc3M6IHtcbiAgICAgICAgYm9yZGVyV2lkdGg6IDEsXG4gICAgICB9LFxuICAgIH0sXG4gIF0sXG59KSk7XG4iXX0=*/
\ No newline at end of file
+@layer pigment.base{.c10qevxu{color:var(--palette-main);}}
+@layer pigment.base{.c10qevxu-1{display:black;}}
+/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9wYWNrYWdlcy9waWdtZW50LWNzcy1jb3JlL3Rlc3RzL2Nzcy9maXh0dXJlcy9jc3MuaW5wdXQuanMiXSwibmFtZXMiOlsiLmdxdmMzd2UiLCIuY3gzenRwZSIsIi5jMWFxOTlvNiIsIi5jMWFxOTlvNi0xIiwiLlRlc3QtY2xhc3MiLCIuVGVzdC1jbGFzczIiLCIuVGVzdC1jbGFzczItMSIsIi5UZXN0LWNsYXNzMi0yIiwiLlRlc3QtY2xhc3MyLTMiLCIuVGVzdC1jbGFzczItc2l6ZS1zbWFsbC0xIiwiLlRlc3QtY2xhc3MyLXNpemUtbWVkaXVtLTEiLCIuVGVzdC1jbGFzczItc2l6ZS1sYXJnZS0xIiwiLlRlc3QtY2xhc3MzIiwiLlRlc3QtY2xhc3MzLXNpemUtc21hbGwiLCIuVGVzdC1jbGFzczMtc2l6ZS1tZWRpdW0iLCIuVGVzdC1jbGFzczMtc2l6ZS1sYXJnZSIsIi5UZXN0LWNsYXNzMy1jb2xvci1wcmltYXJ5IiwiLlRlc3QtY2xhc3MzLWNvbG9yLXNlY29uZGFyeSIsIi5UZXN0LWNsYXNzMy1jdiIsIi5UZXN0LWNsYXNzMy1jdi0xIiwiLmMxcXhzMG85IiwiLmMxcXhzMG85LXBhbGV0dGUtcHJpbWFyeSIsIi5jMXF4czBvOS1wYWxldHRlLXNlY29uZGFyeSIsIi5jMXF4czBvOS1jdiIsIi5jMTBxZXZ4dSIsIi5jMTBxZXZ4dS0xIl0sIm1hcHBpbmdzIjoiQUFLbUNBO0FBTWZDO0FBU2xCQztBQUtBQztBQU9rQkM7QUFVbEJDO0FBTUFDO0FBMkJBQztBQU1BQztBQXZDQUM7QUFNQUM7QUEyQkFDO0FBY29EQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQUFBQztBQXFEOUJDO0FBQUFDO0FBQUFDO0FBQUFDO0FBMkJ0QkM7QUFHQUMiLCJmaWxlIjoiL3BhY2thZ2VzL3BpZ21lbnQtY3NzLWNvcmUvdGVzdHMvY3NzL2ZpeHR1cmVzL2Nzcy5pbnB1dC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIGtleWZyYW1lcyB9IGZyb20gJ0BwaWdtZW50LWNzcy9jb3JlJztcbmltcG9ydCB7IHQgfSBmcm9tICdAcGlnbWVudC1jc3MvdGhlbWUnO1xuXG5jb25zdCBhYiA9ICdhbGljZWJsdWUnO1xuXG5jb25zdCBncmFkaWVudEtleWZyYW1lID0ga2V5ZnJhbWVzKCh7IHRoZW1lIH0pID0+ICh7XG4gICc1MCUnOiB7XG4gICAgYmFja2dyb3VuZDogJ2dyZWVuJyxcbiAgfSxcbn0pKTtcblxuZXhwb3J0IGNvbnN0IGNsczEgPSBjc3NgXG4gIC0tLWZsZXg6IDE7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGFuaW1hdGlvbi1uYW1lOiAke2dyYWRpZW50S2V5ZnJhbWV9O1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAke2FifTtcbmA7XG5cbmV4cG9ydCBjb25zdCBjbHMyID0gY3NzKFxuICB7XG4gICAgJCRmbGV4OiAyMSxcbiAgICAkJHRlc3RWYXI6ICdyZWQnLFxuICAgIGJvcmRlcjogJzFweCBzb2xpZCAkJHRlc3RWYXInLFxuICB9LFxuICB7XG4gICAgJCRmbGV4OiAyMixcbiAgICAkJHRlc3RWYXIxOiAncmVkJyxcbiAgICBib3JkZXI6ICcxcHggc29saWQgJCR0ZXN0VmFyMScsXG4gIH0sXG4pO1xuXG5leHBvcnQgY29uc3QgY2xzMyA9IGNzcyh7XG4gIGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MnLFxufSlgXG4gIC0tLWZsZXg6IDM7XG4gIGNvbG9yOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWlufTtcbiAgZm9udC1zaXplOiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNpemUuZm9udC5oMX07XG4gIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuYDtcblxuZXhwb3J0IGNvbnN0IGNsczQgPSBjc3MoeyBjbGFzc05hbWU6ICdUZXN0LWNsYXNzMicgfSkoXG4gIHtcbiAgICAkJGZsZXg6IDQxLFxuICAgICQkdGVzdFZhcjogJ3JlZCcsXG4gICAgYmFja2dyb3VuZENvbG9yOiAnJCR0ZXN0VmFyJyxcbiAgICBib3JkZXI6IGAxcHggc29saWQgJHt0KCckcGFsZXR0ZS5wcmltYXJ5Lm1haW4nKX1gLFxuICB9LFxuICAoeyB0aGVtZSB9KSA9PiAoe1xuICAgICQkZmxleDogNDIsXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgIGZvbnRTaXplOiB0aGVtZS5zaXplLmZvbnQuaDEsXG4gICAgYmFja2dyb3VuZENvbG9yOiBhYixcbiAgICB2YXJpYW50czoge1xuICAgICAgc2l6ZToge1xuICAgICAgICBzbWFsbDoge1xuICAgICAgICAgICQkZmxleDogNDIxLFxuICAgICAgICAgIHBhZGRpbmc6IDAsXG4gICAgICAgICAgbWFyZ2luOiAwLFxuICAgICAgICAgIGJvcmRlckNvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnkubWFpbixcbiAgICAgICAgfSxcbiAgICAgICAgbWVkaXVtOiB7XG4gICAgICAgICAgJCRmbGV4OiA0MjIsXG4gICAgICAgICAgcGFkZGluZzogNSxcbiAgICAgICAgfSxcbiAgICAgICAgbGFyZ2U6IHtcbiAgICAgICAgICAkJGZsZXg6IDQyMyxcbiAgICAgICAgICBwYWRkaW5nOiAxMCxcbiAgICAgICAgfSxcbiAgICAgIH0sXG4gICAgfSxcbiAgICBkZWZhdWx0VmFyaWFudHM6IHtcbiAgICAgIHNpemU6ICdtZWRpdW0nLFxuICAgIH0sXG4gIH0pLFxuICAoeyB0aGVtZSB9KSA9PiBgXG4gICAgLS0tZmxleDogNDM7XG4gICAgY29sb3I6ICR7dGhlbWUucGFsZXR0ZS5wcmltYXJ5Lm1haW59O1xuICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5zaXplLmZvbnQuaDF9O1xuICAgIGJhY2tncm91bmQtY29sb3I6ICR7YWJ9O1xuICBgLFxuICBgXG4gICAgLS0tZmxleDogNDQ7XG4gICAgY29sb3I6IHJlZDtcbiAgICBmb250LXNpemU6IDFyZW07XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJHthYn07XG4gIGAsXG4pO1xuXG5leHBvcnQgY29uc3QgY2xzNSA9IGNzcyh7IGNsYXNzTmFtZTogJ1Rlc3QtY2xhc3MzJyB9KSgoeyB0aGVtZSB9KSA9PiAoe1xuICAkJGZsZXg6IDUxLFxuICAkJHRlc3RWYXI6ICdyZWQnLFxuICBiYWNrZ3JvdW5kQ29sb3I6ICckJHRlc3RWYXInLFxuICBib3JkZXI6IGAxcHggc29saWQgJHt0KCckcGFsZXR0ZS5wcmltYXJ5Lm1haW4nKX1gLFxuICB2YXJpYW50czoge1xuICAgIHNpemU6IHtcbiAgICAgIHNtYWxsOiB7XG4gICAgICAgICQkZmxleDogNTIsXG4gICAgICAgIHBhZGRpbmc6IDAsXG4gICAgICAgIG1hcmdpbjogMCxcbiAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeS5tYWluLFxuICAgICAgfSxcbiAgICAgIG1lZGl1bToge1xuICAgICAgICAkJGZsZXg6IDUzLFxuICAgICAgICBwYWRkaW5nOiA1LFxuICAgICAgfSxcbiAgICAgIGxhcmdlOiB7XG4gICAgICAgICQkZmxleDogNTQsXG4gICAgICAgIHBhZGRpbmc6IDEwLFxuICAgICAgfSxcbiAgICB9LFxuICAgIGNvbG9yOiB7XG4gICAgICBwcmltYXJ5OiB7XG4gICAgICAgICQkZmxleDogNTUsXG4gICAgICAgIGNvbG9yOiAnZ3JlZW4nLFxuICAgICAgfSxcbiAgICAgIHNlY29uZGFyeToge1xuICAgICAgICAkJGZsZXg6IDU2LFxuICAgICAgICBjb2xvcjogJ2JsdWUnLFxuICAgICAgfSxcbiAgICB9LFxuICB9LFxuICBjb21wb3VuZFZhcmlhbnRzOiBbXG4gICAge1xuICAgICAgc2l6ZTogJ3NtYWxsJyxcbiAgICAgIGNvbG9yOiAncHJpbWFyeScsXG4gICAgICBjc3M6IHtcbiAgICAgICAgJCRmbGV4OiA1NyxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAnMTAwJScsXG4gICAgICB9LFxuICAgIH0sXG4gICAge1xuICAgICAgc2l6ZTogJ2xhcmdlJyxcbiAgICAgIGNvbG9yOiAncHJpbWFyeScsXG4gICAgICBjc3M6IHtcbiAgICAgICAgJCRmbGV4OiA1OCxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAnMTAwJScsXG4gICAgICB9LFxuICAgIH0sXG4gIF0sXG59KSk7XG5cbmV4cG9ydCBjb25zdCBjbHM2ID0gY3NzKCh7IHRoZW1lIH0pID0+ICh7XG4gIGNvbG9yOiAnJHBhbGV0dGUubWFpbicsXG4gIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5tYWluMSxcbiAgYm9yZGVyOiBgMXB4IHNvbGlkICR7dCgnJHBhbGV0dGUubWFpbicpfWAsXG4gIHZhcmlhbnRzOiB7XG4gICAgcGFsZXR0ZToge1xuICAgICAgcHJpbWFyeToge1xuICAgICAgICBjb2xvcjogJ3JlZCcsXG4gICAgICAgIGJvcmRlckNvbG9yOiAncGluaycsXG4gICAgICB9LFxuICAgICAgc2Vjb25kYXJ5OiB7XG4gICAgICAgIGNvbG9yOiAncmVkJyxcbiAgICAgICAgYm9yZGVyQ29sb3I6ICdwaW5rJyxcbiAgICAgIH0sXG4gICAgfSxcbiAgfSxcbiAgY29tcG91bmRWYXJpYW50czogW1xuICAgIHtcbiAgICAgIHBhbGV0dGU6ICdzZWNvbmRhcnknLFxuICAgICAgY3NzOiB7XG4gICAgICAgIGJvcmRlcldpZHRoOiAxLFxuICAgICAgfSxcbiAgICB9LFxuICBdLFxufSkpO1xuXG5leHBvcnQgY29uc3QgY2xzNyA9IGNzcyhcbiAge1xuICAgIGNvbG9yOiAnJHBhbGV0dGUubWFpbicsXG4gIH0sXG4gIGBkaXNwbGF5OiBibGFja2AsXG4pO1xuIl19*/
\ No newline at end of file
diff --git a/packages/pigment-css-core/tests/css/fixtures/css.output.js b/packages/pigment-css-core/tests/css/fixtures/css.output.js
index b8325619..e295ff5c 100644
--- a/packages/pigment-css-core/tests/css/fixtures/css.output.js
+++ b/packages/pigment-css-core/tests/css/fixtures/css.output.js
@@ -5,6 +5,7 @@ import {
   css as _css4,
   css as _css5,
   css as _css6,
+  css as _css7,
 } from '@pigment-css/core/runtime';
 export const cls1 = /*#__PURE__*/ _css({
   classes: 'cx3ztpe',
@@ -113,3 +114,6 @@ export const cls6 = /*#__PURE__*/ _css6({
     },
   ],
 });
+export const cls7 = /*#__PURE__*/ _css7({
+  classes: 'c10qevxu c10qevxu-1',
+});

From 205f0552ea6cf677dff21e2d01a9db98b72aef00 Mon Sep 17 00:00:00 2001
From: Brijesh Bittu <brijesh42@gmail.com>
Date: Tue, 25 Mar 2025 17:52:17 +0530
Subject: [PATCH 12/12] Add docs links

---
 packages/pigment-css-core/src/css.ts         | 12 ++++++++++++
 packages/pigment-css-core/src/keyframes.ts   |  3 +++
 packages/pigment-css-react-new/src/styled.ts |  3 +++
 packages/pigment-css-theme/src/theme.ts      |  2 ++
 4 files changed, 20 insertions(+)

diff --git a/packages/pigment-css-core/src/css.ts b/packages/pigment-css-core/src/css.ts
index 3086cb16..c4bb9161 100644
--- a/packages/pigment-css-core/src/css.ts
+++ b/packages/pigment-css-core/src/css.ts
@@ -19,8 +19,17 @@ export type CompoundVariant<T extends Variants> = VariantNames<T> & {
 };
 
 type CVAConfig<V extends Variants> = {
+  /**
+   * Documentation: https://pigment-css.com/features/styling#variants
+   */
   variants?: V;
+  /**
+   * Documentation: https://pigment-css.com/features/styling#compound-variants
+   */
   compoundVariants?: CompoundVariant<V>[];
+  /**
+   * Documentation: https://pigment-css.com/features/styling#default-variants
+   */
   defaultVariants?: VariantNames<V>;
 };
 
@@ -68,6 +77,9 @@ interface CssWithOption {
   <M extends BaseInterface>(metadata: M): CssNoOption;
 }
 
+/**
+ * Documentation: https://pigment-css.com/features/styling#css
+ */
 const css: CssNoOption & CssWithOption = () => {
   throw new Error(generateErrorMessage('css'));
 };
diff --git a/packages/pigment-css-core/src/keyframes.ts b/packages/pigment-css-core/src/keyframes.ts
index 4c2baf75..52209c1c 100644
--- a/packages/pigment-css-core/src/keyframes.ts
+++ b/packages/pigment-css-core/src/keyframes.ts
@@ -18,6 +18,9 @@ interface KeyframesWithOption {
   <M extends BaseInterface>(metadata: M): KeyframesNoOption;
 }
 
+/**
+ * Documentation: https://pigment-css.com/features/styling#keyframes
+ */
 const keyframes: KeyframesWithOption & KeyframesNoOption = () => {
   throw new Error(generateErrorMessage('keyframes'));
 };
diff --git a/packages/pigment-css-react-new/src/styled.ts b/packages/pigment-css-react-new/src/styled.ts
index 701b8987..74acd83d 100644
--- a/packages/pigment-css-react-new/src/styled.ts
+++ b/packages/pigment-css-react-new/src/styled.ts
@@ -79,6 +79,9 @@ export type CreateStyledIndex = {
   >;
 };
 
+/**
+ * Documentation: https://pigment-css.com/features/styling#styled
+ */
 // @ts-expect-error The implementation is is different than the user API
 export const styled: CreateStyled & CreateStyledIndex = () => {
   throw new Error(generateErrorMessage('styled'));
diff --git a/packages/pigment-css-theme/src/theme.ts b/packages/pigment-css-theme/src/theme.ts
index d023936d..6eaf3dcf 100644
--- a/packages/pigment-css-theme/src/theme.ts
+++ b/packages/pigment-css-theme/src/theme.ts
@@ -25,6 +25,8 @@ export type ThemeKey = `$${PathsToLeaves<Theme>}`;
  * separately.
  * It is there to strictly type first argument as per the overridden `Theme`.
  *
+ * Documentation: https://pigment-css.com/features/theming#the-t-function
+ *
  * @example Usage in application
  *
  * ```js