From c597abbfe9dfeb6b878b454cbe5ef7afd7e1ce65 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Mon, 12 Oct 2026 20:34:41 +0900
Subject: [PATCH 1/2] fix(extractor): filter every transient prop from styled
 rest spreads

Refs #689, #682

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../extractor/extract_style_from_styled.rs    |   5 +-
 libs/extractor/src/extractor/mod.rs           |   1 +
 .../src/extractor/styled_transient.rs         | 100 +++++++
 libs/extractor/src/lib.rs                     |  26 +-
 ...tests__compiled_bindings_never_dangle.snap |   2 +-
 ...ts__compose_rules_the_module_computes.snap |   2 +-
 ...what_elements_and_styled_objects_take.snap |   2 +-
 ...actor__tests__conditional_composition.snap |   2 +-
 ...ts__constant_objects_arrays_and_enums.snap |   2 +-
 ...l_style_collapses_to_a_null_component.snap |   2 +-
 ...and_styled_components_object_styles-2.snap |   2 +-
 ...n_and_styled_components_object_styles.snap |   2 +-
 ...n_global_component_and_import_surface.snap |   2 +-
 ...sts__import_alias_custom_named_export.snap |   2 +-
 ...r__tests__import_alias_emotion_styled.snap |   2 +-
 ..._tests__import_alias_multiple_aliases.snap |   2 +-
 ...r__tests__import_alias_renamed_import.snap |   2 +-
 ...tests__import_alias_styled_components.snap |   2 +-
 ...tor__tests__inline_imported_constants.snap |   2 +-
 ...layer_record_places_every_declaration.snap |   2 +-
 ...t_of_a_default_only_package_redirects.snap |   2 +-
 ...ractor__tests__package_imported_whole.snap |   4 +-
 ...__tests__style_results_read_as_values.snap |   2 +-
 .../extractor__tests__styled-10.snap          |   2 +-
 .../extractor__tests__styled-11.snap          |   2 +-
 .../snapshots/extractor__tests__styled-2.snap |   2 +-
 .../snapshots/extractor__tests__styled-3.snap |   2 +-
 .../snapshots/extractor__tests__styled-4.snap |   2 +-
 .../snapshots/extractor__tests__styled-5.snap |   2 +-
 .../snapshots/extractor__tests__styled-6.snap |   2 +-
 .../snapshots/extractor__tests__styled-7.snap |   2 +-
 .../snapshots/extractor__tests__styled-8.snap |   2 +-
 .../snapshots/extractor__tests__styled-9.snap |   2 +-
 .../snapshots/extractor__tests__styled.snap   |   2 +-
 ...tests__styled_accepts_both_call_forms.snap |   2 +-
 ...ponents_attrs_and_every_styled_import.snap |   2 +-
 ...onents_import_surface_fully_redirects.snap |   2 +-
 ..._tests__styled_components_of_any_base.snap |  10 +-
 ...nents_theme_resolves_to_css_variables.snap |   2 +-
 ...tyled_object_form_theme_interpolation.snap |   2 +-
 ...or__tests__styled_typescript_wrappers.snap |   2 +-
 .../extractor__tests__styled_with_spread.snap |   2 +-
 ...ractor__tests__styled_with_variable-2.snap |   2 +-
 ...ractor__tests__styled_with_variable-3.snap |   2 +-
 ...ractor__tests__styled_with_variable-4.snap |   2 +-
 ...ractor__tests__styled_with_variable-5.snap |   2 +-
 ...xtractor__tests__styled_with_variable.snap |   2 +-
 ...__styled_with_variable_like_emotion-2.snap |   2 +-
 ...__styled_with_variable_like_emotion-3.snap |   2 +-
 ...__styled_with_variable_like_emotion-4.snap |   2 +-
 ...__styled_with_variable_like_emotion-5.snap |   2 +-
 ...__styled_with_variable_like_emotion-6.snap |   2 +-
 ...__styled_with_variable_like_emotion-7.snap |   2 +-
 ...ts__styled_with_variable_like_emotion.snap |   2 +-
 ...ed_with_variable_like_emotion_props-2.snap |   2 +-
 ...ed_with_variable_like_emotion_props-3.snap |   2 +-
 ...ed_with_variable_like_emotion_props-4.snap |   2 +-
 ...yled_with_variable_like_emotion_props.snap |   2 +-
 ...__tests__styles_the_build_cannot_read.snap |   2 +-
 ...actor__tests__template_interpolations.snap |   2 +-
 ...ed_with_variable_like_emotion_props-2.snap |   2 +-
 ...yled_with_variable_like_emotion_props.snap |   2 +-
 .../src/tests/styled_transient_tests.rs       | 260 ++++++++++++++++++
 .../fixtures/styled-transient-props.jsx       |  72 +++++
 .../__tests__/styled-transient-props.test.jsx |  80 ++++++
 65 files changed, 594 insertions(+), 76 deletions(-)
 create mode 100644 libs/extractor/src/extractor/styled_transient.rs
 create mode 100644 libs/extractor/src/tests/styled_transient_tests.rs
 create mode 100644 packages/react/src/utils/__tests__/fixtures/styled-transient-props.jsx
 create mode 100644 packages/react/src/utils/__tests__/styled-transient-props.test.jsx

diff --git a/libs/extractor/src/extractor/extract_style_from_styled.rs b/libs/extractor/src/extractor/extract_style_from_styled.rs
index 328abc44d..197658511 100644
--- a/libs/extractor/src/extractor/extract_style_from_styled.rs
+++ b/libs/extractor/src/extractor/extract_style_from_styled.rs
@@ -1267,7 +1267,10 @@ fn create_styled_component<'a>(
                 vec![
                     JSXAttributeItem::new_spread_attribute(
                         SPAN,
-                        without_props(ast_builder, withheld),
+                        super::styled_transient::filter(
+                            ast_builder,
+                            without_props(ast_builder, withheld),
+                        ),
                         ast_builder,
                     ),
                     JSXAttributeItem::new_attribute(
diff --git a/libs/extractor/src/extractor/mod.rs b/libs/extractor/src/extractor/mod.rs
index 1b47b9788..5f1caee42 100644
--- a/libs/extractor/src/extractor/mod.rs
+++ b/libs/extractor/src/extractor/mod.rs
@@ -9,6 +9,7 @@ pub(super) mod extract_style_from_jsx;
 pub(super) mod extract_style_from_member_expression;
 pub(super) mod extract_style_from_styled;
 pub(super) mod extract_style_from_stylex;
+mod styled_transient;
 
 /**
  * type
diff --git a/libs/extractor/src/extractor/styled_transient.rs b/libs/extractor/src/extractor/styled_transient.rs
new file mode 100644
index 000000000..8136603bd
--- /dev/null
+++ b/libs/extractor/src/extractor/styled_transient.rs
@@ -0,0 +1,100 @@
+use oxc_allocator::Vec;
+use oxc_ast::{
+    ast::{
+        BindingPattern, Expression, FormalParameter, FormalParameterKind, FormalParameters,
+        IdentifierName, StaticMemberExpression,
+    },
+    builder::AstBuilder,
+};
+use oxc_span::SPAN;
+use oxc_syntax::{number::NumberBase, operator::BinaryOperator};
+
+/// Filter only the forwarded copy, leaving styled reads on the original rest object.
+pub(super) fn filter<'a>(builder: &AstBuilder<'a>, props: Expression<'a>) -> Expression<'a> {
+    let key = Expression::new_computed_member_expression(
+        SPAN,
+        Expression::new_identifier(SPAN, "k", builder),
+        Expression::new_numeric_literal(SPAN, 0.0, None, NumberBase::Decimal, builder),
+        false,
+        builder,
+    );
+    let body = Expression::new_binary_expression(
+        SPAN,
+        key,
+        BinaryOperator::StrictInequality,
+        Expression::new_string_literal(SPAN, "$", None, builder),
+        builder,
+    );
+    let pattern = BindingPattern::new_array_pattern(
+        SPAN,
+        Vec::from_array_in(
+            [Some(BindingPattern::new_binding_identifier(
+                SPAN, "k", builder,
+            ))],
+            builder,
+        ),
+        None,
+        builder,
+    );
+    let parameter = FormalParameter::new(
+        SPAN,
+        Vec::new_in(builder),
+        pattern,
+        None::<oxc_allocator::Box<oxc_ast::ast::TSTypeAnnotation<'a>>>,
+        None::<oxc_allocator::Box<Expression<'a>>>,
+        false,
+        None,
+        false,
+        false,
+        builder,
+    );
+    let params = FormalParameters::boxed(
+        SPAN,
+        FormalParameterKind::ArrowFormalParameters,
+        Vec::from_array_in([parameter], builder),
+        None::<oxc_allocator::Box<oxc_ast::ast::FormalParameterRest<'a>>>,
+        builder,
+    );
+    let predicate = Expression::new_arrow_function_expression(
+        SPAN,
+        false,
+        None::<oxc_allocator::Box<oxc_ast::ast::TSTypeParameterDeclaration<'a>>>,
+        params,
+        None::<oxc_allocator::Box<oxc_ast::ast::TSTypeAnnotation<'a>>>,
+        body.into(),
+        builder,
+    );
+    let object = || Expression::new_identifier(SPAN, "Object", builder);
+    let entries = call(builder, member(builder, object(), "entries"), props);
+    let filtered = call(builder, member(builder, entries, "filter"), predicate);
+    call(builder, member(builder, object(), "fromEntries"), filtered)
+}
+
+fn member<'a>(
+    builder: &AstBuilder<'a>,
+    object: Expression<'a>,
+    name: &'static str,
+) -> Expression<'a> {
+    Expression::StaticMemberExpression(StaticMemberExpression::boxed(
+        SPAN,
+        object,
+        IdentifierName::new(SPAN, name, builder),
+        false,
+        builder,
+    ))
+}
+
+fn call<'a>(
+    builder: &AstBuilder<'a>,
+    callee: Expression<'a>,
+    argument: Expression<'a>,
+) -> Expression<'a> {
+    Expression::new_call_expression(
+        SPAN,
+        callee,
+        None::<oxc_allocator::Box<oxc_ast::ast::TSTypeParameterInstantiation<'a>>>,
+        Vec::from_array_in([argument.into()], builder),
+        false,
+        builder,
+    )
+}
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index e4f178a8d..3b5bde87c 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -741,6 +741,8 @@ pub fn has_devup_ui(filename: &str, code: &str, package: &str) -> bool {
 #[cfg(test)]
 #[allow(clippy::expect_used, clippy::unwrap_used)]
 mod tests {
+    mod styled_transient_tests;
+
     use std::collections::BTreeSet;
 
     use super::*;
@@ -14755,12 +14757,12 @@ const FromChanging = styled(Changing)({ color: 'blue' })
 const Ordered = styled.div({ color: 'red', styleOrder: 3 })",
         );
         for expected in [
-            "const Ext = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"color-0-blue-_a__c_hover-255 color-0-blue--255 background-0-white--255\", className]",
-            "const ObjExt = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"color-0-blue--255 padding-0-8px--255\", className]",
-            "const Twice = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"margin-0-4px--255 color-0-blue--255 padding-0-8px--255\", className]",
-            "const FromRuntime = ({ style, className, as: DevupAs = Runtime, forwardedAs, ...rest }) => <DevupAs {...rest}",
-            "const FromChanging = ({ style, className, as: DevupAs = Changing, forwardedAs, ...rest }) => <DevupAs {...rest}",
-            "const Ordered = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"color-0-red--3\", className]",
+            "const Ext = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"color-0-blue-_a__c_hover-255 color-0-blue--255 background-0-white--255\", className]",
+            "const ObjExt = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"color-0-blue--255 padding-0-8px--255\", className]",
+            "const Twice = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"margin-0-4px--255 color-0-blue--255 padding-0-8px--255\", className]",
+            "const FromRuntime = ({ style, className, as: DevupAs = Runtime, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))}",
+            "const FromChanging = ({ style, className, as: DevupAs = Changing, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))}",
+            "const Ordered = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"color-0-red--3\", className]",
         ] {
             assert!(code.contains(expected), "{expected}\n{code}");
         }
@@ -14783,7 +14785,7 @@ export const Other = other.withComponent('aside')
 export const a = <Section as=\"a\" forwardedAs=\"b\" />",
         );
         for expected in [
-            "export const Aside = (__devupProps) => (({ style, className, as: DevupAs = \"aside\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"color-0-red--255\", className]",
+            "export const Aside = (__devupProps) => (({ style, className, as: DevupAs = \"aside\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"color-0-red--255\", className]",
             "as: DevupAs = Link,",
             "as: DevupAs = motion.div,",
             "export const Again = (__devupProps) => (({ style, className, as: DevupAs = \"nav\",",
@@ -14825,16 +14827,16 @@ export const f = <F junk=\"j\" xlink:href=\"#a\" />
 export const k = <K title=\"t\" tone=\"x\" />",
         );
         for expected in [
-            "{...(({ \"tone\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)}",
-            "{...(({ \"$c\": __devupOmit0, \"tone\": __devupOmit1, \"theme\": __devupOmit2, ...__devupDom }) => __devupDom)(rest)}",
-            "{...(({ \"x\": __devupOmit0, \"y\": __devupOmit1, \"theme\": __devupOmit2, ...__devupDom }) => __devupDom)(rest)}",
-            "{...(({ \"$c\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)}",
+            "{...Object.fromEntries(Object.entries((({ \"tone\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))}",
+            "{...Object.fromEntries(Object.entries((({ \"$c\": __devupOmit0, \"tone\": __devupOmit1, \"theme\": __devupOmit2, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))}",
+            "{...Object.fromEntries(Object.entries((({ \"x\": __devupOmit0, \"y\": __devupOmit1, \"theme\": __devupOmit2, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))}",
+            "{...Object.fromEntries(Object.entries((({ \"$c\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))}",
             "export const a = <A invalidThing=\"x\" data-ok=\"yes\" />",
             "export const b = <B tone=\"x\" $c=\"red\" aria-label=\"ok\" {...rest} />",
             "export const j = <J junk=\"j\" />",
             "export const f = <F junk=\"j\" xlink:href=\"#a\" />",
             "export const k = <K title=\"t\" />",
-            "{...(({ \"level\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)}",
+            "{...Object.fromEntries(Object.entries((({ \"level\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))}",
         ] {
             assert!(code.contains(expected), "{expected}\n{code}");
         }
diff --git a/libs/extractor/src/snapshots/extractor__tests__compiled_bindings_never_dangle.snap b/libs/extractor/src/snapshots/extractor__tests__compiled_bindings_never_dangle.snap
index dbc29d3ae..70a702afc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__compiled_bindings_never_dangle.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__compiled_bindings_never_dangle.snap
@@ -5,7 +5,7 @@ expression: outputs
 [
     (
         "import { css, styled, Box } from '@devup-ui/react';\nconst myCss = css;\nconst again = myCss;\nconst S = styled;\nconst B = Box;\nexport const a = again({ color: 'red' });\nexport const s = S.div({ color: 'blue' });\nexport const b = <B p={1} />;",
-        "export const a = \"a-a\";\nexport const s = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-b\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const b = <div className=\"a-c\" />;",
+        "export const a = \"a-a\";\nexport const s = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-b\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const b = <div className=\"a-c\" />;",
     ),
     (
         "import { css } from '@devup-ui/react';\nexport function f(css) { return css; }\nexport const a = css({ color: 'red' });",
diff --git a/libs/extractor/src/snapshots/extractor__tests__compose_rules_the_module_computes.snap b/libs/extractor/src/snapshots/extractor__tests__compose_rules_the_module_computes.snap
index 19800dc8f..6c5c65ddc 100644
--- a/libs/extractor/src/snapshots/extractor__tests__compose_rules_the_module_computes.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__compose_rules_the_module_computes.snap
@@ -75,5 +75,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport * as Devup from \"@devup-ui/react\";\nimport * as tokens from \"./styles\";\nimport { card, rules } from \"./styles\";\nimport { emotionClass } from \"./emotion\";\nconst make = (n: number) => ({ m: n });\nconst local = make(2);\nconst computed = make(3);\nconst name = String(\"named\");\nconst shared = {\n\trules: make(4),\n\tfixed: { p: 5 }\n};\nexport const a = \"a-e\";\nexport const b = \"a-a a-f\";\nexport const c = `named x ${`y`}`;\nexport const d = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-e\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const e = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-f\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const f = (__devupProps) => (({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-g\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ role: \"note\" }\n});\nexport const g = (on) => `a-e a-b ${on ? typeof on === \"string\" ? on : \"\" : \"\"}`;\nexport const h = \"a-c\";\nexport const i = \"a-e\";\nexport const k = `k ${tokens.card}`;\nexport const l = `a-d ${emotionClass}`;\nexport const n = <Devup.Layout.Box {...{ \"m\": 2 }} />;\n",
+    code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport * as Devup from \"@devup-ui/react\";\nimport * as tokens from \"./styles\";\nimport { card, rules } from \"./styles\";\nimport { emotionClass } from \"./emotion\";\nconst make = (n: number) => ({ m: n });\nconst local = make(2);\nconst computed = make(3);\nconst name = String(\"named\");\nconst shared = {\n\trules: make(4),\n\tfixed: { p: 5 }\n};\nexport const a = \"a-e\";\nexport const b = \"a-a a-f\";\nexport const c = `named x ${`y`}`;\nexport const d = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-e\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const e = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-f\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const f = (__devupProps) => (({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-g\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ role: \"note\" }\n});\nexport const g = (on) => `a-e a-b ${on ? typeof on === \"string\" ? on : \"\" : \"\"}`;\nexport const h = \"a-c\";\nexport const i = \"a-e\";\nexport const k = `k ${tokens.card}`;\nexport const l = `a-d ${emotionClass}`;\nexport const n = <Devup.Layout.Box {...{ \"m\": 2 }} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__compute_what_elements_and_styled_objects_take.snap b/libs/extractor/src/snapshots/extractor__tests__compute_what_elements_and_styled_objects_take.snap
index dec9af7a1..e59dd6ea2 100644
--- a/libs/extractor/src/snapshots/extractor__tests__compute_what_elements_and_styled_objects_take.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__compute_what_elements_and_styled_objects_take.snap
@@ -99,5 +99,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport * as Devup from \"@devup-ui/react\";\nimport { PRIMARY } from \"./tokens\";\nconst make = (n: number) => ({ m: n });\nconst KEY = [\"co\", \"lor\"].join(\"\");\nfunction darken(amount: number, color: string) {\n\treturn color === PRIMARY ? \"#112233\" : color;\n}\nconst card = make(2);\nconst hover = make(3);\nconst parts = [make(4), { p: 1 }];\nexport const a = <div onClick={() => 1} className=\"a-c\" />;\nexport const b = <div className=\"a-d\" />;\nexport const c = <div className=\"a-e\" />;\nexport const d = <div className=\"a-a a-c\" />;\nexport const e = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-f a-e a-g\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const f = \"a-h a-a\";\nexport const g = \"a-i\";\nexport const h = <div {...card} />;\nfunction local() {\n\treturn { p: 7 };\n}\nexport const i = <div className=\"a-j\" />;\nexport const j = (register) => ((__devupSpread0) => <div {...__devupSpread0} className={__devupSpread0?.className || \"\"} style={__devupSpread0?.style} />)(register(\"email\"));\n",
+    code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport * as Devup from \"@devup-ui/react\";\nimport { PRIMARY } from \"./tokens\";\nconst make = (n: number) => ({ m: n });\nconst KEY = [\"co\", \"lor\"].join(\"\");\nfunction darken(amount: number, color: string) {\n\treturn color === PRIMARY ? \"#112233\" : color;\n}\nconst card = make(2);\nconst hover = make(3);\nconst parts = [make(4), { p: 1 }];\nexport const a = <div onClick={() => 1} className=\"a-c\" />;\nexport const b = <div className=\"a-d\" />;\nexport const c = <div className=\"a-e\" />;\nexport const d = <div className=\"a-a a-c\" />;\nexport const e = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-f a-e a-g\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const f = \"a-h a-a\";\nexport const g = \"a-i\";\nexport const h = <div {...card} />;\nfunction local() {\n\treturn { p: 7 };\n}\nexport const i = <div className=\"a-j\" />;\nexport const j = (register) => ((__devupSpread0) => <div {...__devupSpread0} className={__devupSpread0?.className || \"\"} style={__devupSpread0?.style} />)(register(\"email\"));\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__conditional_composition.snap b/libs/extractor/src/snapshots/extractor__tests__conditional_composition.snap
index 060a26494..0630f2cba 100644
--- a/libs/extractor/src/snapshots/extractor__tests__conditional_composition.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__conditional_composition.snap
@@ -117,5 +117,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const a = `a ${cond ? \"b\" : \"c\"} ${cond ? \"d\" : \"\"}`;\nexport const b = `${flag ? \"e\" : \"f\"} ${flag ? \"\" : \"g\"}`;\nexport const c = `c ${cond ? other : \"\"} ${flag ? \"x\" : \"\"}`;\nexport const d = `i ${cond ? \"h\" : \"\"}`;\nexport const e = `${flag ? other : \"\"} ${flag ? \"c\" : \"b\"}`;\nexport const h = `${cond ? typeof cond === \"string\" ? cond : \"\" : \"\"} ${cond ? \"c\" : \"b\"}`;\nexport const i = \"c\";\nexport const j = `${value != null ? typeof value === \"string\" ? value : \"\" : \"\"} ${value != null ? \"c\" : \"b\"}`;\nexport const K = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`${base} ${`j ${cond ? \"b\" : \"\"}`}`, className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const a = `a ${cond ? \"b\" : \"c\"} ${cond ? \"d\" : \"\"}`;\nexport const b = `${flag ? \"e\" : \"f\"} ${flag ? \"\" : \"g\"}`;\nexport const c = `c ${cond ? other : \"\"} ${flag ? \"x\" : \"\"}`;\nexport const d = `i ${cond ? \"h\" : \"\"}`;\nexport const e = `${flag ? other : \"\"} ${flag ? \"c\" : \"b\"}`;\nexport const h = `${cond ? typeof cond === \"string\" ? cond : \"\" : \"\"} ${cond ? \"c\" : \"b\"}`;\nexport const i = \"c\";\nexport const j = `${value != null ? typeof value === \"string\" ? value : \"\" : \"\"} ${value != null ? \"c\" : \"b\"}`;\nexport const K = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[`${base} ${`j ${cond ? \"b\" : \"\"}`}`, className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__constant_objects_arrays_and_enums.snap b/libs/extractor/src/snapshots/extractor__tests__constant_objects_arrays_and_enums.snap
index f7732a86a..2e697926b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__constant_objects_arrays_and_enums.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__constant_objects_arrays_and_enums.snap
@@ -305,6 +305,6 @@ Ok(
                 },
             ),
         },
-        code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport * as Devup from \"@devup-ui/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { space, Size, Local, focus } from \"./tokens\";\nconst base = {\n\tp: 4,\n\tcolor: \"red\",\n\tcolor: \"blue\"\n};\nconst hover = { opacity: .5 };\nconst merged = {\n\t...base,\n\tm: 1\n};\nconst partial = {\n\t...unknown,\n\tm: 1\n};\nconst proto = {\n\t__proto__: null,\n\ta: 1\n};\nconst getter = { get a() {\n\treturn 1;\n} };\nexport const withGetter = <div className=\"a-a\" style={{ \"--a\": getter.a }} />;\nconst NONE = null;\nconst MEDIA = \"@media (min-width: 1px)\";\nconst keyed = { [MEDIA]: { color: \"green\" } };\nconst widths = [\n\t10,\n\tnull,\n\t20\n];\nconst more = [...widths, 30];\nconst bad = [...unknown];\nenum Level {\n\tLow = 1,\n\tHigh,\n\tName = \"n\",\n\tComputed = Math.max(1, 2),\n\tLast = 9\n}\ndeclare enum Ambient {\n\tX = 1\n}\nconst sx = { color: \"red\" };\nexport const a = \"a-b a-c\";\nexport const b = \"a-b a-d a-e a-f\";\nexport const c = \"a-b a-c a-g\";\nexport const d = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-b a-c\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const e = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-b a-c a-e\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const f = (Comp, handler) => <Comp onClick={handler} className=\"a-c a-e a-h a-i a-j a-k a-l a-m a-n a-o a-p a-q a-r\" {...base} />;\nexport const g = <div className=\"a-e\" />;\nexport const h = \"a-b a-c\";\nexport const i = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-b a-c\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const j = (__devupProps) => (({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-b a-c\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ role: \"button\" }\n});\nexport const k = { \"x\": \"a-s\" };\n;\nexport const l = \"a-t\";\nexport const m = \"a-u a-v a-y a-z\";\n",
+        code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport * as Devup from \"@devup-ui/react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { space, Size, Local, focus } from \"./tokens\";\nconst base = {\n\tp: 4,\n\tcolor: \"red\",\n\tcolor: \"blue\"\n};\nconst hover = { opacity: .5 };\nconst merged = {\n\t...base,\n\tm: 1\n};\nconst partial = {\n\t...unknown,\n\tm: 1\n};\nconst proto = {\n\t__proto__: null,\n\ta: 1\n};\nconst getter = { get a() {\n\treturn 1;\n} };\nexport const withGetter = <div className=\"a-a\" style={{ \"--a\": getter.a }} />;\nconst NONE = null;\nconst MEDIA = \"@media (min-width: 1px)\";\nconst keyed = { [MEDIA]: { color: \"green\" } };\nconst widths = [\n\t10,\n\tnull,\n\t20\n];\nconst more = [...widths, 30];\nconst bad = [...unknown];\nenum Level {\n\tLow = 1,\n\tHigh,\n\tName = \"n\",\n\tComputed = Math.max(1, 2),\n\tLast = 9\n}\ndeclare enum Ambient {\n\tX = 1\n}\nconst sx = { color: \"red\" };\nexport const a = \"a-b a-c\";\nexport const b = \"a-b a-d a-e a-f\";\nexport const c = \"a-b a-c a-g\";\nexport const d = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-b a-c\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const e = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-b a-c a-e\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const f = (Comp, handler) => <Comp onClick={handler} className=\"a-c a-e a-h a-i a-j a-k a-l a-m a-n a-o a-p a-q a-r\" {...base} />;\nexport const g = <div className=\"a-e\" />;\nexport const h = \"a-b a-c\";\nexport const i = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-b a-c\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const j = (__devupProps) => (({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-b a-c\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ role: \"button\" }\n});\nexport const k = { \"x\": \"a-s\" };\n;\nexport const l = \"a-t\";\nexport const m = \"a-u a-v a-y a-z\";\n",
     },
 )
diff --git a/libs/extractor/src/snapshots/extractor__tests__create_global_style_collapses_to_a_null_component.snap b/libs/extractor/src/snapshots/extractor__tests__create_global_style_collapses_to_a_null_component.snap
index fcdee0190..53e91efdd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__create_global_style_collapses_to_a_null_component.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__create_global_style_collapses_to_a_null_component.snap
@@ -38,5 +38,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst GlobalStyle = () => null;\nconst FromObject = () => null;\nconst S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const App = () => <><GlobalStyle /><FromObject /><S /></>;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst GlobalStyle = () => null;\nconst FromObject = () => null;\nconst S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const App = () => <><GlobalStyle /><FromObject /><S /></>;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__emotion_and_styled_components_object_styles-2.snap b/libs/extractor/src/snapshots/extractor__tests__emotion_and_styled_components_object_styles-2.snap
index 218cb95f8..2a58322f7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__emotion_and_styled_components_object_styles-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__emotion_and_styled_components_object_styles-2.snap
@@ -45,5 +45,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const G = (__devupProps) => (({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ type: \"button\" }\n});\nexport const H = ({ style, className, as: DevupAs = Base, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const I = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const j = \"d\";\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const G = (__devupProps) => (({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ type: \"button\" }\n});\nexport const H = ({ style, className, as: DevupAs = Base, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const I = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const j = \"d\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__emotion_and_styled_components_object_styles.snap b/libs/extractor/src/snapshots/extractor__tests__emotion_and_styled_components_object_styles.snap
index 189d5dbb0..433a1b687 100644
--- a/libs/extractor/src/snapshots/extractor__tests__emotion_and_styled_components_object_styles.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__emotion_and_styled_components_object_styles.snap
@@ -166,5 +166,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { Global } from \"@devup-ui/react/compat\";\nexport const a = \"a b c d\";\nexport const B = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"x\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const C = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"f\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const D = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"f g h i\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const E = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`j ${cond ? \"k\" : \"\"}`, className].filter(Boolean).join(\" \")} style={style} />;\nexport const F = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"l\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const spin = \"m\";\nexport const App = () => <><Global /><Other styles={{ top: 1 }} /><Global /></>;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { Global } from \"@devup-ui/react/compat\";\nexport const a = \"a b c d\";\nexport const B = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"x\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const C = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"f\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const D = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"f g h i\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const E = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[`j ${cond ? \"k\" : \"\"}`, className].filter(Boolean).join(\" \")} style={style} />;\nexport const F = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"l\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const spin = \"m\";\nexport const App = () => <><Global /><Other styles={{ top: 1 }} /><Global /></>;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__emotion_global_component_and_import_surface.snap b/libs/extractor/src/snapshots/extractor__tests__emotion_global_component_and_import_surface.snap
index c323aa329..223433cad 100644
--- a/libs/extractor/src/snapshots/extractor__tests__emotion_global_component_and_import_surface.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__emotion_global_component_and_import_surface.snap
@@ -32,5 +32,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { Global, ThemeProvider, useTheme } from \"@devup-ui/react/compat\";\nimport { ClassNames } from \"@emotion/react\";\nconst S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const App = () => <><Global /><S /></>;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { Global, ThemeProvider, useTheme } from \"@devup-ui/react/compat\";\nimport { ClassNames } from \"@emotion/react\";\nconst S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const App = () => <><Global /><S /></>;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap
index 83996f999..694121d63 100644
--- a/libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_custom_named_export.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap
index 88b1c544f..36575061c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_emotion_styled.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap
index 54635e5c5..544825143 100644
--- a/libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_multiple_aliases.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap
index e3a466e04..8b5b46622 100644
--- a/libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_renamed_import.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Button = ({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap b/libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap
index 595517cc5..7b93f36df 100644
--- a/libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__import_alias_styled_components.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Card = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Card = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__inline_imported_constants.snap b/libs/extractor/src/snapshots/extractor__tests__inline_imported_constants.snap
index e94c310a9..23c9a16dd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__inline_imported_constants.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__inline_imported_constants.snap
@@ -475,5 +475,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nimport * as Devup from \"@devup-ui/react\";\nimport { PRIMARY, SIZE, NEG, TEMPLATE, colors, ALIAS, MUTABLE, DYNAMIC, renamed, alsoMutable, reBase, notThere, gone, value, ns, NEG_STRING, TEMPLATE_EXPRESSION, SPACED, NOT_OBJECT, helper, looped } from \"./tokens\";\nimport orange from \"./tokens\";\nimport * as tokens from \"./tokens\";\nimport named from \"./named\";\nimport { handler } from \"./handler\";\nimport cjs, { COMPILED, FROM_REQUIRE, DESTRUCTURED, MUTATED, DYNAMIC } from \"./cjs-tokens\";\nimport cjsObject, { OBJ, OVERRIDDEN, LATER } from \"./cjs-object\";\nimport twelve from \"./cjs-value\";\nimport twice from \"./cjs-twice\";\nimport marker, { named as markerNamed } from \"./cjs-marker\";\nimport { unused } from \"./unused\";\nimport missing from \"./missing\";\nexport const a = <div {...colors} onClick={handler} className={`${colors?.className || \"\"} a b c d e f g h i k m n o p q r s t v x y z aa ac ae ag ai ak am ao`} style={{\n\t...{\n\t\t\"--j\": MUTABLE,\n\t\t\"--l\": DYNAMIC,\n\t\t\"--u\": missing,\n\t\t\"--w\": NEG_STRING,\n\t\t\"--_\": NOT_OBJECT,\n\t\t\"--ab\": colors.skip,\n\t\t\"--a-d\": colors.nope,\n\t\t\"--af\": colors[key],\n\t\t\"--ah\": alsoMutable,\n\t\t\"--aj\": notThere,\n\t\t\"--al\": gone,\n\t\t\"--an\": helper,\n\t\t\"--ap\": looped\n\t},\n\t...colors?.style\n}} />;\nexport const b = \"a\";\nexport const c = <div className=\"aq\" />;\nexport const d = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const e = (PRIMARY) => <div className=\"ar\" style={{ \"--as\": PRIMARY }} />;\nexport const f = {\n\tPRIMARY,\n\tunused,\n\tSIZE: tokens.SIZE\n};\nexport const g = <div color={PRIMARY} />;\nexport const h = <Devup.Inner.Box color={4} />;\nexport const i = Devup[\"css\"]({ color: SIZE });\nexport const l = <div className=\"at au av aw ay az a0 a1 a2 a3 a4 a6 a8 a_\" style={{\n\t\"--ax\": MUTATED,\n\t\"--a5\": twice.A,\n\t\"--a7\": DYNAMIC,\n\t\"--a9\": marker\n}} />;\nexport const j = <div className=\"z ag\" style={{\n\t\"--_\": `red`.length,\n\t\"--ah\": `red`[`length`]\n}} />;\nexport const k = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"ba\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nimport * as Devup from \"@devup-ui/react\";\nimport { PRIMARY, SIZE, NEG, TEMPLATE, colors, ALIAS, MUTABLE, DYNAMIC, renamed, alsoMutable, reBase, notThere, gone, value, ns, NEG_STRING, TEMPLATE_EXPRESSION, SPACED, NOT_OBJECT, helper, looped } from \"./tokens\";\nimport orange from \"./tokens\";\nimport * as tokens from \"./tokens\";\nimport named from \"./named\";\nimport { handler } from \"./handler\";\nimport cjs, { COMPILED, FROM_REQUIRE, DESTRUCTURED, MUTATED, DYNAMIC } from \"./cjs-tokens\";\nimport cjsObject, { OBJ, OVERRIDDEN, LATER } from \"./cjs-object\";\nimport twelve from \"./cjs-value\";\nimport twice from \"./cjs-twice\";\nimport marker, { named as markerNamed } from \"./cjs-marker\";\nimport { unused } from \"./unused\";\nimport missing from \"./missing\";\nexport const a = <div {...colors} onClick={handler} className={`${colors?.className || \"\"} a b c d e f g h i k m n o p q r s t v x y z aa ac ae ag ai ak am ao`} style={{\n\t...{\n\t\t\"--j\": MUTABLE,\n\t\t\"--l\": DYNAMIC,\n\t\t\"--u\": missing,\n\t\t\"--w\": NEG_STRING,\n\t\t\"--_\": NOT_OBJECT,\n\t\t\"--ab\": colors.skip,\n\t\t\"--a-d\": colors.nope,\n\t\t\"--af\": colors[key],\n\t\t\"--ah\": alsoMutable,\n\t\t\"--aj\": notThere,\n\t\t\"--al\": gone,\n\t\t\"--an\": helper,\n\t\t\"--ap\": looped\n\t},\n\t...colors?.style\n}} />;\nexport const b = \"a\";\nexport const c = <div className=\"aq\" />;\nexport const d = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const e = (PRIMARY) => <div className=\"ar\" style={{ \"--as\": PRIMARY }} />;\nexport const f = {\n\tPRIMARY,\n\tunused,\n\tSIZE: tokens.SIZE\n};\nexport const g = <div color={PRIMARY} />;\nexport const h = <Devup.Inner.Box color={4} />;\nexport const i = Devup[\"css\"]({ color: SIZE });\nexport const l = <div className=\"at au av aw ay az a0 a1 a2 a3 a4 a6 a8 a_\" style={{\n\t\"--ax\": MUTATED,\n\t\"--a5\": twice.A,\n\t\"--a7\": DYNAMIC,\n\t\"--a9\": marker\n}} />;\nexport const j = <div className=\"z ag\" style={{\n\t\"--_\": `red`.length,\n\t\"--ah\": `red`[`length`]\n}} />;\nexport const k = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"ba\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__layer_record_places_every_declaration.snap b/libs/extractor/src/snapshots/extractor__tests__layer_record_places_every_declaration.snap
index ddffc5e78..7b41b3038 100644
--- a/libs/extractor/src/snapshots/extractor__tests__layer_record_places_every_declaration.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__layer_record_places_every_declaration.snap
@@ -147,5 +147,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst A = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`i k l m ${cond ? \"a\" : \"b\"} ${{\n\t\"bottom\": \"c\",\n\t\"bottom-left\": \"c d\",\n\t\"bottom-right\": \"c e\",\n\t\"left\": \"d\",\n\t\"right\": \"e\",\n\t\"top\": \"f\",\n\t\"top-left\": \"d f\",\n\t\"top-right\": \"e f\"\n}[pos] || \"\"} ${{\n\t\"a\": \"g\",\n\t\"b\": \"h\"\n}[key] || \"\"} ${typo ? `typo-${typo}` : \"\"}`, className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--j\": w },\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst A = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[`i k l m ${cond ? \"a\" : \"b\"} ${{\n\t\"bottom\": \"c\",\n\t\"bottom-left\": \"c d\",\n\t\"bottom-right\": \"c e\",\n\t\"left\": \"d\",\n\t\"right\": \"e\",\n\t\"top\": \"f\",\n\t\"top-left\": \"d f\",\n\t\"top-right\": \"e f\"\n}[pos] || \"\"} ${{\n\t\"a\": \"g\",\n\t\"b\": \"h\"\n}[key] || \"\"} ${typo ? `typo-${typo}` : \"\"}`, className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--j\": w },\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__namespace_import_of_a_default_only_package_redirects.snap b/libs/extractor/src/snapshots/extractor__tests__namespace_import_of_a_default_only_package_redirects.snap
index 320eae156..5ee515390 100644
--- a/libs/extractor/src/snapshots/extractor__tests__namespace_import_of_a_default_only_package_redirects.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__namespace_import_of_a_default_only_package_redirects.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Member = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nconst Tagged = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Member = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nconst Tagged = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__package_imported_whole.snap b/libs/extractor/src/snapshots/extractor__tests__package_imported_whole.snap
index d95307aff..1fffdfd3b 100644
--- a/libs/extractor/src/snapshots/extractor__tests__package_imported_whole.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__package_imported_whole.snap
@@ -9,10 +9,10 @@ expression: outputs
     ),
     (
         "import Devup from '@devup-ui/react';\nexport const S = Devup.styled.div({ color: 'red' });\nexport const T = Devup.styled('span', { color: 'blue' });\nexport const U = Devup.styled.p.attrs({ role: 'note' })({ m: 1 });\nexport const g = <Devup.Global styles={{ body: { p: 0 } }} />;",
-        "import \"@devup-ui/react/devup-ui-0.css\";\nimport Devup from \"@devup-ui/react\";\nexport const S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const T = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-b\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const U = (__devupProps) => (({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-c\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ role: \"note\" }\n});\nexport const g = <Devup.Global />;\n",
+        "import \"@devup-ui/react/devup-ui-0.css\";\nimport Devup from \"@devup-ui/react\";\nexport const S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const T = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-b\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const U = (__devupProps) => (({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-c\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ role: \"note\" }\n});\nexport const g = <Devup.Global />;\n",
     ),
     (
         "import * as Devup from '@devup-ui/react';\nimport { styled } from '@devup-ui/react';\nexport const S = styled.div({ p: 1 });\nexport const o = other.styled.div({ p: 1 });\nexport const m = <motion.div />;",
-        "import \"@devup-ui/react/devup-ui-0.css\";\nimport * as Devup from \"@devup-ui/react\";\nexport const S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const o = other.styled.div({ p: 1 });\nexport const m = <motion.div />;\n",
+        "import \"@devup-ui/react/devup-ui-0.css\";\nimport * as Devup from \"@devup-ui/react\";\nexport const S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const o = other.styled.div({ p: 1 });\nexport const m = <motion.div />;\n",
     ),
 ]
diff --git a/libs/extractor/src/snapshots/extractor__tests__style_results_read_as_values.snap b/libs/extractor/src/snapshots/extractor__tests__style_results_read_as_values.snap
index 6e0cac2b6..4d5e1bc52 100644
--- a/libs/extractor/src/snapshots/extractor__tests__style_results_read_as_values.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__style_results_read_as_values.snap
@@ -141,5 +141,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport { Global } from \"@devup-ui/react/compat\";\nconst fadeIn = \"a-a\";\nconst slide = \"a-b\";\nconst card = \"a-c\";\nexport const a = \"a-d a-e\";\nexport const b = \"a-c a-f\";\nexport const c = \"a-g\";\nexport const d = <div className=\"a-d a-h\" />;\nexport const E = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-i\", className].filter(Boolean).join(\" \")} style={style} />;\n;\nexport const g = <Global />;\n",
+    code: "import \"@devup-ui/react/devup-ui-0.css\";\nimport { Global } from \"@devup-ui/react/compat\";\nconst fadeIn = \"a-a\";\nconst slide = \"a-b\";\nconst card = \"a-c\";\nexport const a = \"a-d a-e\";\nexport const b = \"a-c a-f\";\nexport const c = \"a-g\";\nexport const d = <div className=\"a-d a-h\" />;\nexport const E = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-i\", className].filter(Boolean).join(\" \")} style={style} />;\n;\nexport const g = <Global />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-10.snap b/libs/extractor/src/snapshots/extractor__tests__styled-10.snap
index 063c11f76..c28fd8095 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-10.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-10.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = CustomComponent, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = CustomComponent, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-11.snap b/libs/extractor/src/snapshots/extractor__tests__styled-11.snap
index f2cdee5e9..c93ce180d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-11.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-11.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"aside\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"aside\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-2.snap b/libs/extractor/src/snapshots/extractor__tests__styled-2.snap
index 33b0993a0..f6ef344a7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-2.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"article\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"article\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-3.snap b/libs/extractor/src/snapshots/extractor__tests__styled-3.snap
index 7f5c94042..775db0e0f 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-3.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"footer\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"footer\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-4.snap b/libs/extractor/src/snapshots/extractor__tests__styled-4.snap
index 35cf3a7f4..72d7b78a6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-4.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"aside\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"aside\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-5.snap b/libs/extractor/src/snapshots/extractor__tests__styled-5.snap
index 5fbf115c2..bddab10f7 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-5.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-6.snap b/libs/extractor/src/snapshots/extractor__tests__styled-6.snap
index 31868134e..02247e0ef 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-6.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-7.snap b/libs/extractor/src/snapshots/extractor__tests__styled-7.snap
index 9169f89b8..619c9e387 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-7.snap
@@ -39,5 +39,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-8.snap b/libs/extractor/src/snapshots/extractor__tests__styled-8.snap
index 808e79d17..f4491959a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-8.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-8.snap
@@ -49,5 +49,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b a b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled-9.snap b/libs/extractor/src/snapshots/extractor__tests__styled-9.snap
index 75cb4583d..3bc32524d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled-9.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = CustomComponent, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = CustomComponent, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled.snap b/libs/extractor/src/snapshots/extractor__tests__styled.snap
index 1f319a6d2..dff273ebd 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"section\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"section\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_accepts_both_call_forms.snap b/libs/extractor/src/snapshots/extractor__tests__styled_accepts_both_call_forms.snap
index 0f86011e6..019897cf6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_accepts_both_call_forms.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_accepts_both_call_forms.snap
@@ -45,5 +45,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst twoArg = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nconst twoArgComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nconst curried = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />;\nconst member = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"d\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst twoArg = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nconst twoArgComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nconst curried = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />;\nconst member = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"d\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_components_attrs_and_every_styled_import.snap b/libs/extractor/src/snapshots/extractor__tests__styled_components_attrs_and_every_styled_import.snap
index 3af379477..b398d2c9d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_components_attrs_and_every_styled_import.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_components_attrs_and_every_styled_import.snap
@@ -55,5 +55,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const A = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const B = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const C = (__devupProps) => (({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ type: \"button\" }\n});\nexport const D = ({ style, className, as: DevupAs = Base, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"d\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const E = (__devupProps) => (({ style, className, as: DevupAs = \"input\", forwardedAs, ...rest }) => <DevupAs {...(({ \"small\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={style} />)(((__devupContext) => ({\n\t...__devupContext,\n\tclassName: [__devupContext.className, __devupProps.className].filter(Boolean).join(\" \") || undefined\n}))(((__devupContext) => ((__devupAttrs) => ({\n\t...__devupContext,\n\t...__devupAttrs,\n\tclassName: [__devupContext.className, __devupAttrs.className].filter(Boolean).join(\" \") || undefined,\n\tstyle: {\n\t\t...__devupContext.style,\n\t\t...__devupAttrs.style\n\t}\n}))({\n\t...{},\n\t...typeof extra === \"function\" ? extra(__devupContext) : extra\n}))(((__devupContext) => ((__devupAttrs) => ({\n\t...__devupContext,\n\t...__devupAttrs,\n\tclassName: [__devupContext.className, __devupAttrs.className].filter(Boolean).join(\" \") || undefined,\n\tstyle: {\n\t\t...__devupContext.style,\n\t\t...__devupAttrs.style\n\t}\n}))({\n\t...{},\n\t...((props) => ({ size: props.small ? 5 : 10 }))(__devupContext)\n}))({\n\t...__devupProps,\n\tclassName: undefined\n}))));\nexport const G = other.div.attrs({ role: \"note\" })({ margin: 1 });\nexport const I = factory.attrs({ id: \"i\" })({ margin: 3 });\nexport const J = other(Base).attrs({ id: \"j\" })({ margin: 4 });\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nexport const A = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const B = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const C = (__devupProps) => (({ style, className, as: DevupAs = \"button\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ type: \"button\" }\n});\nexport const D = ({ style, className, as: DevupAs = Base, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"d\", className].filter(Boolean).join(\" \")} style={style} />;\nexport const E = (__devupProps) => (({ style, className, as: DevupAs = \"input\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"small\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={style} />)(((__devupContext) => ({\n\t...__devupContext,\n\tclassName: [__devupContext.className, __devupProps.className].filter(Boolean).join(\" \") || undefined\n}))(((__devupContext) => ((__devupAttrs) => ({\n\t...__devupContext,\n\t...__devupAttrs,\n\tclassName: [__devupContext.className, __devupAttrs.className].filter(Boolean).join(\" \") || undefined,\n\tstyle: {\n\t\t...__devupContext.style,\n\t\t...__devupAttrs.style\n\t}\n}))({\n\t...{},\n\t...typeof extra === \"function\" ? extra(__devupContext) : extra\n}))(((__devupContext) => ((__devupAttrs) => ({\n\t...__devupContext,\n\t...__devupAttrs,\n\tclassName: [__devupContext.className, __devupAttrs.className].filter(Boolean).join(\" \") || undefined,\n\tstyle: {\n\t\t...__devupContext.style,\n\t\t...__devupAttrs.style\n\t}\n}))({\n\t...{},\n\t...((props) => ({ size: props.small ? 5 : 10 }))(__devupContext)\n}))({\n\t...__devupProps,\n\tclassName: undefined\n}))));\nexport const G = other.div.attrs({ role: \"note\" })({ margin: 1 });\nexport const I = factory.attrs({ id: \"i\" })({ margin: 3 });\nexport const J = other(Base).attrs({ id: \"j\" })({ margin: 4 });\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_components_import_surface_fully_redirects.snap b/libs/extractor/src/snapshots/extractor__tests__styled_components_import_surface_fully_redirects.snap
index a8fa72fcf..fd53f0c2c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_components_import_surface_fully_redirects.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_components_import_surface_fully_redirects.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { ThemeProvider, useTheme, withTheme, ServerStyleSheet, StyleSheetManager, isStyledComponent } from \"@devup-ui/react/compat\";\nconst S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nimport { ThemeProvider, useTheme, withTheme, ServerStyleSheet, StyleSheetManager, isStyledComponent } from \"@devup-ui/react/compat\";\nconst S = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_components_of_any_base.snap b/libs/extractor/src/snapshots/extractor__tests__styled_components_of_any_base.snap
index 21f0d0322..7382b9c50 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_components_of_any_base.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_components_of_any_base.snap
@@ -5,22 +5,22 @@ expression: outputs
 [
     (
         "export const A = styled(motion.div)`color: red;`;",
-        "export const A = ({ style, className, as: DevupAs = motion.div, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;",
+        "export const A = ({ style, className, as: DevupAs = motion.div, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;",
     ),
     (
         "export const B = styled((Motion as any).Div.Inner)({ color: 'red' });",
-        "export const B = ({ style, className, as: DevupAs = Motion.Div.Inner, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;",
+        "export const B = ({ style, className, as: DevupAs = Motion.Div.Inner, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;",
     ),
     (
         "export const C = styled(forwardRef((p, r) => <div ref={r} {...p} />)).attrs({ role: 'x' })`color: red;`;",
-        "export const C = ((DevupStyled) => (__devupProps) => (({ style, className, as: DevupAs = DevupStyled, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ role: \"x\" }\n}))(forwardRef((p, r) => <div ref={r} {...p} />));",
+        "export const C = ((DevupStyled) => (__devupProps) => (({ style, className, as: DevupAs = DevupStyled, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />)({\n\t...__devupProps,\n\t...{ role: \"x\" }\n}))(forwardRef((p, r) => <div ref={r} {...p} />));",
     ),
     (
         "export const D = (tag) => styled(tag, { color: 'red' });",
-        "export const D = (tag) => ((DevupStyled) => ({ style, className, as: DevupAs = DevupStyled, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />)(tag);",
+        "export const D = (tag) => ((DevupStyled) => ({ style, className, as: DevupAs = DevupStyled, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />)(tag);",
     ),
     (
         "export const E = styled(getThing().div)`color: red;`;",
-        "export const E = ((DevupStyled) => ({ style, className, as: DevupAs = DevupStyled, forwardedAs, ...rest }) => <DevupAs {...rest} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />)(getThing().div);",
+        "export const E = ((DevupStyled) => ({ style, className, as: DevupAs = DevupStyled, forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries(rest).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />)(getThing().div);",
     ),
 ]
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_components_theme_resolves_to_css_variables.snap b/libs/extractor/src/snapshots/extractor__tests__styled_components_theme_resolves_to_css_variables.snap
index c21a78f64..4151c1c52 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_components_theme_resolves_to_css_variables.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_components_theme_resolves_to_css_variables.snap
@@ -99,5 +99,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Flat = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nconst Nested = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nconst Destructured = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />;\nconst Surrounded = ({ style, className, as: DevupAs = \"b\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"d\", className].filter(Boolean).join(\" \")} style={style} />;\nconst NotTheme = ({ style, className, as: DevupAs = \"i\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (p=>p.color)(rest) },\n\t...style\n}} />;\nconst BareTheme = ({ style, className, as: DevupAs = \"u\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (p=>p.theme)(rest) },\n\t...style\n}} />;\nconst OtherRoot = ({ style, className, as: DevupAs = \"s\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (p=>q.theme.brand)(rest) },\n\t...style\n}} />;\nconst ArrayParam = ({ style, className, as: DevupAs = \"q\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (([p])=>p.theme.brand)(rest) },\n\t...style\n}} />;\nconst NoParam = ({ style, className, as: DevupAs = \"em\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (()=>`red`)(rest) },\n\t...style\n}} />;\nconst CallBody = ({ style, className, as: DevupAs = \"strong\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (p=>p.theme.brand())(rest) },\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Flat = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nconst Nested = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nconst Destructured = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />;\nconst Surrounded = ({ style, className, as: DevupAs = \"b\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"d\", className].filter(Boolean).join(\" \")} style={style} />;\nconst NotTheme = ({ style, className, as: DevupAs = \"i\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (p=>p.color)(rest) },\n\t...style\n}} />;\nconst BareTheme = ({ style, className, as: DevupAs = \"u\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (p=>p.theme)(rest) },\n\t...style\n}} />;\nconst OtherRoot = ({ style, className, as: DevupAs = \"s\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (p=>q.theme.brand)(rest) },\n\t...style\n}} />;\nconst ArrayParam = ({ style, className, as: DevupAs = \"q\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (([p])=>p.theme.brand)(rest) },\n\t...style\n}} />;\nconst NoParam = ({ style, className, as: DevupAs = \"em\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (()=>`red`)(rest) },\n\t...style\n}} />;\nconst CallBody = ({ style, className, as: DevupAs = \"strong\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--f\": (p=>p.theme.brand())(rest) },\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_object_form_theme_interpolation.snap b/libs/extractor/src/snapshots/extractor__tests__styled_object_form_theme_interpolation.snap
index b5b44ebe4..7e4b2fb37 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_object_form_theme_interpolation.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_object_form_theme_interpolation.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Themed = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst Themed = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_typescript_wrappers.snap b/libs/extractor/src/snapshots/extractor__tests__styled_typescript_wrappers.snap
index 54a22a865..6a61617db 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_typescript_wrappers.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_typescript_wrappers.snap
@@ -75,5 +75,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui.css\";\nconst A = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nconst B = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nconst C = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />;\nconst D = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"d\", className].filter(Boolean).join(\" \")} style={style} />;\nconst E = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={style} />;\nconst F = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"f\", className].filter(Boolean).join(\" \")} style={style} />;\nconst G = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"g\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui.css\";\nconst A = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a\", className].filter(Boolean).join(\" \")} style={style} />;\nconst B = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"b\", className].filter(Boolean).join(\" \")} style={style} />;\nconst C = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"c\", className].filter(Boolean).join(\" \")} style={style} />;\nconst D = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"d\", className].filter(Boolean).join(\" \")} style={style} />;\nconst E = ({ style, className, as: DevupAs = \"span\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"e\", className].filter(Boolean).join(\" \")} style={style} />;\nconst F = ({ style, className, as: DevupAs = \"p\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"f\", className].filter(Boolean).join(\" \")} style={style} />;\nconst G = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"g\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_spread.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_spread.snap
index 098ea2e10..7dee6e5f8 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_spread.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_spread.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst baseStyles = { bg: \"red\" };\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst baseStyles = { bg: \"red\" };\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap
index ae339fbcf..16a126b16 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-2.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap
index 5d1caaf6f..33b6d0c7d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-3.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap
index dca81c002..88108f9c9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-4.snap
@@ -29,5 +29,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap
index ee26de767..5f6f80166 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable-5.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap
index 357fba1ba..7ec1c1c08 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap
index cd82e3020..10d1cd3d9 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-2.snap
@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet primaryColor = \"blue\";\nlet padding = \"16px\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": padding,\n\t\t\"--b\": primaryColor\n\t},\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet primaryColor = \"blue\";\nlet padding = \"16px\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": padding,\n\t\t\"--b\": primaryColor\n\t},\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap
index 530a12f90..f8501a92c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-3.snap
@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet primaryColor = \"blue\";\nlet padding = \"16px\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": primaryColor,\n\t\t\"--b\": padding\n\t},\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet primaryColor = \"blue\";\nlet padding = \"16px\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": primaryColor,\n\t\t\"--b\": padding\n\t},\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap
index 943c933b6..b0164f555 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-4.snap
@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet primaryColor = \"blue\";\nlet padding = \"16px\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": primaryColor,\n\t\t\"--b\": padding\n\t},\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet primaryColor = \"blue\";\nlet padding = \"16px\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": primaryColor,\n\t\t\"--b\": padding\n\t},\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap
index 3a58b76e0..80ba6c524 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-5.snap
@@ -32,5 +32,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": func(),\n\t\t\"--b\": obj.color,\n\t\t\"--c\": obj.func()\n\t},\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": func(),\n\t\t\"--b\": obj.color,\n\t\t\"--c\": obj.func()\n\t},\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap
index 17443e9c4..0c04d7749 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-6.snap
@@ -32,5 +32,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": obj.bg,\n\t\t\"--b\": func(),\n\t\t\"--c\": obj.color()\n\t},\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": obj.bg,\n\t\t\"--b\": func(),\n\t\t\"--c\": obj.color()\n\t},\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap
index a18b7fffb..51c4d525d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion-7.snap
@@ -32,5 +32,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": obj.bg,\n\t\t\"--b\": func(),\n\t\t\"--c\": obj.color()\n\t},\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": obj.bg,\n\t\t\"--b\": func(),\n\t\t\"--c\": obj.color()\n\t},\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
index cbce1ce3e..2db8da3da 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion.snap
@@ -24,5 +24,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet color = \"red\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--a\": color },\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet color = \"red\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--a\": color },\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap
index 1c3119770..6e78f2cab 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-2.snap
@@ -23,5 +23,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet fontSize = \"18px\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": fontSize,\n\t\t\"--b\": (props=>props.color||`black`)(rest)\n\t},\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet fontSize = \"18px\";\nconst StyledComponent = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": fontSize,\n\t\t\"--b\": (props=>props.color||`black`)(rest)\n\t},\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap
index 46bd24fd9..a7536c8b6 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-3.snap
@@ -32,5 +32,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet margin = \"10px\";\nlet padding = \"20px\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"bg\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": padding,\n\t\t\"--b\": margin,\n\t\t\"--c\": (props=>props.bg||`white`)(rest)\n\t},\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nlet margin = \"10px\";\nlet padding = \"20px\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"bg\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b a-c\", className].filter(Boolean).join(\" \")} style={{\n\t...{\n\t\t\"--a\": padding,\n\t\t\"--b\": margin,\n\t\t\"--c\": (props=>props.bg||`white`)(rest)\n\t},\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap
index f9014fe29..1e3890291 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props-4.snap
@@ -25,5 +25,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst isActive = true;\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst isActive = true;\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
index f37f6b259..b98038f37 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styled_with_variable_like_emotion_props.snap
@@ -24,5 +24,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"bg\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--a\": (props=>props.bg)(rest) },\n\t...style\n}} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"bg\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a a-b\", className].filter(Boolean).join(\" \")} style={{\n\t...{ \"--a\": (props=>props.bg)(rest) },\n\t...style\n}} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__styles_the_build_cannot_read.snap b/libs/extractor/src/snapshots/extractor__tests__styles_the_build_cannot_read.snap
index 1ddf31a2b..5d3858260 100644
--- a/libs/extractor/src/snapshots/extractor__tests__styles_the_build_cannot_read.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__styles_the_build_cannot_read.snap
@@ -99,5 +99,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui-0.css\";\nexport const a = (base) => base;\nexport const b = (on) => on ? \"a-a\" : \"\";\nexport const c = \"a-b a-c\";\nexport const d = (on, base) => `${on ? base : \"\"} ${on ? \"\" : \"a-d\"}`;\nexport const e = \"a-e\";\nexport const f = (rest, handler, k) => <div {...rest} {...{\n\tonClick: handler,\n\t[k]: 1\n}} className={`${(\"className\" in Object({\n\tonClick: handler,\n\t[k]: 1\n}) ? {\n\tonClick: handler,\n\t[k]: 1\n}.className : rest?.className) || \"\"} a-e`} style={\"style\" in Object({\n\tonClick: handler,\n\t[k]: 1\n}) ? {\n\tonClick: handler,\n\t[k]: 1\n}.style : rest?.style} />;\nexport const g = (theme, key) => <div className=\"a-f a-g\" style={{\n\t\"--a\": theme.colors[key],\n\t\"--b\": ({a:`red`,...theme.more})[`b`]\n}} />;\nexport const h = (Base) => ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[Base, className].filter(Boolean).join(\" \")} style={style} />;\nexport const i = \"a-h\";\nexport const j = \"a-i\";\n",
+    code: "import \"@devup-ui/react/devup-ui-0.css\";\nexport const a = (base) => base;\nexport const b = (on) => on ? \"a-a\" : \"\";\nexport const c = \"a-b a-c\";\nexport const d = (on, base) => `${on ? base : \"\"} ${on ? \"\" : \"a-d\"}`;\nexport const e = \"a-e\";\nexport const f = (rest, handler, k) => <div {...rest} {...{\n\tonClick: handler,\n\t[k]: 1\n}} className={`${(\"className\" in Object({\n\tonClick: handler,\n\t[k]: 1\n}) ? {\n\tonClick: handler,\n\t[k]: 1\n}.className : rest?.className) || \"\"} a-e`} style={\"style\" in Object({\n\tonClick: handler,\n\t[k]: 1\n}) ? {\n\tonClick: handler,\n\t[k]: 1\n}.style : rest?.style} />;\nexport const g = (theme, key) => <div className=\"a-f a-g\" style={{\n\t\"--a\": theme.colors[key],\n\t\"--b\": ({a:`red`,...theme.more})[`b`]\n}} />;\nexport const h = (Base) => ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[Base, className].filter(Boolean).join(\" \")} style={style} />;\nexport const i = \"a-h\";\nexport const j = \"a-i\";\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__template_interpolations.snap b/libs/extractor/src/snapshots/extractor__tests__template_interpolations.snap
index 1de61d4f1..5b3972c5c 100644
--- a/libs/extractor/src/snapshots/extractor__tests__template_interpolations.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__template_interpolations.snap
@@ -97,5 +97,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/react/devup-ui-0.css\";\nconst C = \"red\";\nconst O = .5;\nconst SEL = \".x\";\nconst SNIPPET = \"display: flex;\";\nconst mixin = \"a-a\";\n;\n;\nexport const k = \"a-b\";\nexport const c = \"a-c a-d\";\nexport const d = `a-e ${mixin}`;\nexport const A = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"active\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[`a-d ${mixin} ${((p) => p.active && mixin)(rest) || \"\"}`, className].filter(Boolean).join(\" \")} style={style} />;\nexport const B = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-f\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/react/devup-ui-0.css\";\nconst C = \"red\";\nconst O = .5;\nconst SEL = \".x\";\nconst SNIPPET = \"display: flex;\";\nconst mixin = \"a-a\";\n;\n;\nexport const k = \"a-b\";\nexport const c = \"a-c a-d\";\nexport const d = `a-e ${mixin}`;\nexport const A = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"active\": __devupOmit0, \"theme\": __devupOmit1, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[`a-d ${mixin} ${((p) => p.active && mixin)(rest) || \"\"}`, className].filter(Boolean).join(\" \")} style={style} />;\nexport const B = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-f\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap
index d0b32f159..ac93daa9a 100644
--- a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props-2.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = (({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />)``;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = (({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />)``;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap b/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap
index 97028551d..835b2952d 100644
--- a/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__wrong_styled_with_variable_like_emotion_props.snap
@@ -15,5 +15,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...(({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, as: DevupAs = \"div\", forwardedAs, ...rest }) => <DevupAs {...Object.fromEntries(Object.entries((({ \"theme\": __devupOmit0, ...__devupDom }) => __devupDom)(rest)).filter(([k]) => k[0] !== \"$\"))} as={forwardedAs} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
 }
diff --git a/libs/extractor/src/tests/styled_transient_tests.rs b/libs/extractor/src/tests/styled_transient_tests.rs
new file mode 100644
index 000000000..8535bd155
--- /dev/null
+++ b/libs/extractor/src/tests/styled_transient_tests.rs
@@ -0,0 +1,260 @@
+//! Runtime-only transient props at the generated styled forwarding boundary.
+
+use boa_engine::{Context, Source};
+use oxc_allocator::Allocator;
+use oxc_ast::ast::{JSXAttributeItem, JSXAttributeName, JSXAttributeValue, JSXElement};
+use oxc_ast_visit::Visit;
+use oxc_parser::Parser;
+use oxc_span::{GetSpan, SourceType, Span};
+use rstest::rstest;
+use serial_test::serial;
+
+use super::readable_code;
+
+/// Replace only the generated JSX renderer with an observable target/props record.
+/// All generated forwarding, style reads and attrs expressions execute unchanged.
+#[derive(Default)]
+struct Renderer {
+    replacement: Option<(Span, String)>,
+}
+
+impl<'a> Visit<'a> for Renderer {
+    fn visit_jsx_element(&mut self, element: &JSXElement<'a>) {
+        assert_eq!(self.replacement, None, "fixture must generate one renderer");
+        assert_eq!(element.children.len(), 0);
+        let mut properties = Vec::new();
+        for attribute in &element.opening_element.attributes {
+            match attribute {
+                JSXAttributeItem::SpreadAttribute(spread) => properties.push(format!(
+                    "...({})",
+                    crate::utils::readable_code(&spread.argument)
+                )),
+                JSXAttributeItem::Attribute(attribute) => {
+                    let JSXAttributeName::Identifier(name) = &attribute.name else {
+                        panic!("generated renderer must use named attributes");
+                    };
+                    let Some(JSXAttributeValue::ExpressionContainer(value)) = &attribute.value
+                    else {
+                        panic!("generated renderer must use expression attributes");
+                    };
+                    let expression = value.expression.as_expression().unwrap();
+                    properties.push(format!(
+                        "\"{}\": ({})",
+                        name.name,
+                        crate::utils::readable_code(expression)
+                    ));
+                }
+            }
+        }
+        self.replacement = Some((
+            element.span(),
+            format!(
+                "({{ target: DevupAs, props: {{ {} }} }})",
+                properties.join(", ")
+            ),
+        ));
+    }
+}
+
+fn executable_component(code: String) -> String {
+    let mut code = code
+        .strip_prefix("import \"@devup-ui/core/devup-ui.css\";\n")
+        .unwrap_or(&code)
+        .to_owned();
+    assert!(
+        !code.contains("import "),
+        "unexpected generated import: {code}"
+    );
+    let allocator = Allocator::default();
+    let parsed = Parser::new(&allocator, &code, SourceType::tsx()).parse();
+    assert_eq!(parsed.diagnostics.len(), 0, "{code}");
+    let mut renderer = Renderer::default();
+    renderer.visit_program(&parsed.program);
+    let (span, replacement) = renderer.replacement.expect("generated styled renderer");
+    code.replace_range(
+        usize::try_from(span.start).unwrap()..usize::try_from(span.end).unwrap(),
+        &replacement,
+    );
+    code
+}
+
+#[rstest]
+#[case::tag_default("styled('div')", (false, false))]
+#[case::component_default("styled(Link)", (true, true))]
+#[case::tag_predicate(
+    "styled('div', { shouldForwardProp: (prop) => prop !== 'tone' })",
+    (true, false)
+)]
+#[case::component_predicate(
+    "styled(Link, { shouldForwardProp: (prop) => prop !== 'tone' })",
+    (true, false)
+)]
+#[case::tag_always_true("styled('div', { shouldForwardProp: () => true })", (true, true))]
+#[case::component_always_true("styled(Link, { shouldForwardProp: () => true })", (true, true))]
+#[serial]
+fn filters_runtime_transients_when_forwarding_styled_rest(
+    #[case] factory: &str,
+    #[case] forwarded: (bool, bool),
+    #[values("", ".attrs((p) => ({ ...p.extra, id: p.$attrs }))")] attrs: &str,
+) {
+    // Given: transient keys supplied only at execution time, never in styled source.
+    let source = format!(
+        "import {{styled}} from '@devup-ui/core'\n\
+         const Subject = {factory}{attrs}`color: ${{(p) => p.$tone}}; background: ${{(p) => p.tone}};`"
+    );
+    let code = readable_code(&source);
+    for runtime_key in ["$runtimeOnly", "$🦀", "$fromAttrs"] {
+        assert!(
+            !code.contains(runtime_key),
+            "runtime key enumerated: {code}"
+        );
+    }
+    let component = executable_component(code);
+    let script = format!(
+        r"
+        const Link = 'component';
+        {component}
+        const input = {{
+            $runtimeOnly: 'secret', '$': 1, '$🦀': 2,
+            $tone: 'orchid', $attrs: 'attrs-id', tone: 'navy',
+            theme: {{ marker: true }}, id: 'caller-id',
+            'data-ok': 'yes', 'aria-label': 'label',
+            customPayload: 42, children: 'child',
+            className: 'caller', style: {{ opacity: 0.25 }},
+            forwardedAs: 'forwarded-target',
+            extra: {{ $fromAttrs: 'secret', title: 'attrs-title' }}
+        }};
+        const before = JSON.stringify(input);
+        const rendered = [Subject(input), Subject({{ ...input, as: 'override' }})];
+        JSON.stringify({{
+            transients: rendered.map((r) => Object.keys(r.props).filter((k) => k.startsWith('$'))),
+            styleValues: rendered.map((r) => Object.values(r.props.style)),
+            targets: rendered.map((r) => r.target),
+            preserved: rendered.map((r) => [
+                r.props.id, r.props['data-ok'], r.props['aria-label'],
+                r.props.customPayload, r.props.children, r.props.as,
+                r.props.className.includes('caller'), r.props.style.opacity,
+                'theme' in r.props, 'tone' in r.props, r.props.title || null
+            ]),
+            unchanged: before === JSON.stringify(input)
+        }})
+        "
+    );
+
+    // When: execute the Rust-produced component, including attrs and both as paths.
+    let value = Context::default()
+        .eval(Source::from_bytes(&script))
+        .expect("generated component must execute");
+    let result: serde_json::Value = serde_json::from_str(
+        &value
+            .as_string()
+            .expect("JSON result")
+            .to_std_string_escaped(),
+    )
+    .unwrap();
+
+    // Then: no transient reaches either target, while style reads retain its value.
+    assert_eq!(result["transients"], serde_json::json!([[], []]));
+    for values in result["styleValues"].as_array().unwrap() {
+        assert!(
+            values
+                .as_array()
+                .unwrap()
+                .contains(&serde_json::json!("orchid"))
+        );
+        assert!(
+            values
+                .as_array()
+                .unwrap()
+                .contains(&serde_json::json!("navy"))
+        );
+    }
+    let target = if factory.starts_with("styled(Link") {
+        "component"
+    } else {
+        "div"
+    };
+    assert_eq!(result["targets"], serde_json::json!([target, "override"]));
+    let (id, title) = if attrs.is_empty() {
+        ("caller-id", None)
+    } else {
+        ("attrs-id", Some("attrs-title"))
+    };
+    let preserved = serde_json::json!([
+        id,
+        "yes",
+        "label",
+        42,
+        "child",
+        "forwarded-target",
+        true,
+        0.25,
+        forwarded.0,
+        forwarded.1,
+        title
+    ]);
+    assert_eq!(
+        result["preserved"],
+        serde_json::json!([preserved, preserved])
+    );
+    assert_eq!(result["unchanged"], true);
+}
+
+#[rstest]
+#[case::component("styled(Link)")]
+#[case::tag_always_true("styled('div', { shouldForwardProp: () => true })")]
+#[serial]
+fn filters_runtime_transients_when_no_props_are_statically_withheld(#[case] factory: &str) {
+    // Given: no style or attrs reads to populate the named withholding list.
+    let component = executable_component(readable_code(&format!(
+        "import {{styled}} from '@devup-ui/core'\nconst Subject = {factory}({{ color: 'red' }})"
+    )));
+    let script = format!(
+        r"
+        const Link = 'component';
+        {component}
+        const input = {{ $runtimeOnly: 1, '$': 2, '$🦀': 3, id: 'kept', 'x$y': 4, '': 5 }};
+        const before = JSON.stringify(input);
+        const props = Subject(input).props;
+        JSON.stringify({{
+            transients: Object.keys(props).filter((k) => k.startsWith('$')),
+            kept: [props.id, props['x$y'], props['']],
+            unchanged: before === JSON.stringify(input)
+        }})
+        "
+    );
+
+    // When: execute the generated component's raw-rest forwarding branch.
+    let value = Context::default()
+        .eval(Source::from_bytes(&script))
+        .expect("generated component must execute");
+    let result: serde_json::Value = serde_json::from_str(
+        &value
+            .as_string()
+            .expect("JSON result")
+            .to_std_string_escaped(),
+    )
+    .unwrap();
+
+    // Then: only prefix-$ keys are omitted and caller input is untouched.
+    assert_eq!(
+        result,
+        serde_json::json!({
+            "transients": [], "kept": ["kept", 4, 5], "unchanged": true
+        })
+    );
+}
+
+#[test]
+#[serial]
+fn keeps_ordinary_jsx_spreads_when_no_styled_rest_is_generated() {
+    // Given: an ordinary JSX spread, not a styled component definition.
+    let source = "export const node = <div {...props} />;";
+
+    // When: extract the ordinary JSX module.
+    let code = readable_code(source);
+
+    // Then: forwarding is unchanged and no transient filter is generated.
+    assert!(code.contains("<div {...props} />"), "{code}");
+    assert!(!code.contains("Object.fromEntries"), "{code}");
+}
diff --git a/packages/react/src/utils/__tests__/fixtures/styled-transient-props.jsx b/packages/react/src/utils/__tests__/fixtures/styled-transient-props.jsx
new file mode 100644
index 000000000..4abfbeae7
--- /dev/null
+++ b/packages/react/src/utils/__tests__/fixtures/styled-transient-props.jsx
@@ -0,0 +1,72 @@
+import { createRequire } from 'node:module'
+import process from 'node:process'
+
+import { styled } from '@devup-ui/react'
+
+// Bun's isolated install lets a package resolve only what it declares, and
+// `react-dom` is a peer of the DOM preload's `@testing-library/react`
+const domPreload = createRequire(import.meta.url).resolve('bun-test-env-dom')
+const testingLib = createRequire(domPreload).resolve('@testing-library/react')
+const server = createRequire(testingLib)('react-dom/server')
+
+const recorded = []
+
+function Recorder(props) {
+  recorded.push(props)
+  return null
+}
+
+/**
+ * Server-renders `Component` with `props` spread at runtime by a caller the
+ * build cannot tie to it, like one in another module, giving the markup, what
+ * React wrote to `console.error` and the props `Recorder` received. React
+ * warns about an invalid attribute name once per process, so each tag
+ * scenario uses its own `$` names.
+ */
+function renderWith(Component, props) {
+  const warnings = []
+  const { error } = console
+  console.error = (...args) => {
+    warnings.push(args.join(' '))
+  }
+  recorded.length = 0
+  try {
+    return {
+      html: server.renderToStaticMarkup(<Component {...props} />),
+      received: [...recorded],
+      warnings,
+    }
+  } finally {
+    console.error = error
+  }
+}
+
+const ordinary = { 'data-testid': 'target', id: 'target', title: 'Target' }
+const transient = { $: 'bare', $id: 'transient-id', $other: 'other' }
+
+const Title = styled.h1`
+  color: ${(p) => p.$tone};
+`
+const Wrapped = styled(Recorder)`
+  color: red;
+`
+const Forwarding = styled.h1.withConfig({ shouldForwardProp: () => true })`
+  color: red;
+`
+const Attributed = styled.h1.attrs({ $fromAttrs: 'attrs' })`
+  color: red;
+`
+const Heading = styled.h1`
+  color: red;
+`
+
+// What each scenario observed, for the test that runs this script
+process.stdout.write(
+  JSON.stringify({
+    tag: renderWith(Title, { ...ordinary, ...transient, $tone: 'teal' }),
+    component: renderWith(Wrapped, { ...ordinary, ...transient }),
+    forwarding: renderWith(Forwarding, { ...ordinary, $forced: 'forced' }),
+    attrs: renderWith(Attributed, ordinary),
+    as: renderWith(Heading, { ...ordinary, ...transient, as: Recorder }),
+  }),
+)
diff --git a/packages/react/src/utils/__tests__/styled-transient-props.test.jsx b/packages/react/src/utils/__tests__/styled-transient-props.test.jsx
new file mode 100644
index 000000000..fdf7dba00
--- /dev/null
+++ b/packages/react/src/utils/__tests__/styled-transient-props.test.jsx
@@ -0,0 +1,80 @@
+import { spawnSync } from 'node:child_process'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+
+import { describe, expect, it } from 'bun:test'
+
+/** The ordinary props the fixture spreads beside its `$` props */
+const ordinary = { 'data-testid': 'target', id: 'target', title: 'Target' }
+
+const root = new URL('../../../../../', import.meta.url)
+const fixture = new URL('fixtures/styled-transient-props.jsx', import.meta.url)
+
+// The fixture renders in a fresh Bun process: in the suite's process, earlier
+// test files leave `console.error` replaced by a mock that keeps their calls.
+// A script gets no test preload, so the Devup UI plugin is preloaded here.
+const child = spawnSync(
+  process.execPath,
+  [
+    '--preload',
+    fileURLToPath(new URL('packages/bun-plugin/src/index.ts', root)),
+    fileURLToPath(fixture),
+  ],
+  { cwd: fileURLToPath(root), encoding: 'utf8' },
+)
+
+/** What the fixture observed in `scenario`, once its process exited cleanly */
+function observation(scenario) {
+  expect({ status: child.status, stderr: child.stderr }).toEqual({
+    status: 0,
+    stderr: '',
+  })
+  return JSON.parse(child.stdout)[scenario]
+}
+
+function transientKeys(props) {
+  return Object.keys(props).filter((key) => key.startsWith('$'))
+}
+
+describe('styled transient props', () => {
+  it('keeps unread $ props of a runtime spread off the tag while its styles read $tone into a CSS variable', () => {
+    const { html, warnings } = observation('tag')
+
+    expect(warnings).toEqual([])
+    expect(html).not.toMatch(/ \$[^\s=]*=/)
+    expect(html).toContain(' data-testid="target"')
+    expect(html).toContain(' id="target"')
+    expect(html).toContain(' title="Target"')
+    expect(html).toMatch(/ style="--[^"]*:teal"/)
+  })
+
+  it('passes a component target the ordinary props of a runtime spread but no $ props', () => {
+    const { received } = observation('component')
+
+    expect(received).toEqual([expect.objectContaining(ordinary)])
+    expect(received.map(transientKeys)).toEqual([[]])
+  })
+
+  it('keeps $ props off the tag even when shouldForwardProp forwards every prop', () => {
+    const { html, warnings } = observation('forwarding')
+
+    expect(warnings).toEqual([])
+    expect(html).not.toMatch(/ \$[^\s=]*=/)
+    expect(html).toContain(' id="target"')
+  })
+
+  it('keeps $ props that attrs create off the tag', () => {
+    const { html, warnings } = observation('attrs')
+
+    expect(warnings).toEqual([])
+    expect(html).not.toMatch(/ \$[^\s=]*=/)
+    expect(html).toContain(' id="target"')
+  })
+
+  it('passes the component `as` names the ordinary props of a runtime spread but no $ props', () => {
+    const { received } = observation('as')
+
+    expect(received).toEqual([expect.objectContaining(ordinary)])
+    expect(received.map(transientKeys)).toEqual([[]])
+  })
+})

From b77cc5d17c1a221babe73f3b0c4573dae8a1bc25 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@gmail.com>
Date: Mon, 12 Oct 2026 20:50:04 +0900
Subject: [PATCH 2/2] docs(migration): document transient props and
 compile-time forwarding

Refs #689, #682

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 .../changepack_log_transient_props.json       |  9 ++++++++
 .../docs/migration/styled-components/page.mdx | 23 ++++++++++++++++---
 2 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 .changepacks/changepack_log_transient_props.json

diff --git a/.changepacks/changepack_log_transient_props.json b/.changepacks/changepack_log_transient_props.json
new file mode 100644
index 000000000..cbe2e2dd9
--- /dev/null
+++ b/.changepacks/changepack_log_transient_props.json
@@ -0,0 +1,9 @@
+{
+  "changes": {
+    "apps/landing/package.json": "Patch",
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/react/package.json": "Patch"
+  },
+  "note": "Styled components now remove every runtime prop whose name starts with `$` before forwarding a rest spread to a tag or component, including props supplied by callers or attrs. Style and attrs functions can still read transient props, and all other build-time forwarding policies remain unchanged. The styled-components migration guide documents transient prop support. No new build errors",
+  "date": "2026-10-01T00:00:00.000Z"
+}
diff --git a/apps/landing/src/app/(detail)/docs/migration/styled-components/page.mdx b/apps/landing/src/app/(detail)/docs/migration/styled-components/page.mdx
index 0cb08360b..f3f4f17da 100644
--- a/apps/landing/src/app/(detail)/docs/migration/styled-components/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/migration/styled-components/page.mdx
@@ -34,7 +34,7 @@ Any base renders: a tag, a component, a member such as `motion.div`, or any othe
 
 A `keyframes` or `css` result held in a `const` of the same file is a build-time value, so `` css`animation: ${fadeIn} 1s;` `` and `styled.div({ ['.' + card + ':hover &']: { margin: 0 } })` work. In CSS text a class standing where a declaration would is a mixin, composed with the component's class. One imported from another module is not: its name is only known once that file is built, so declare it where it is used.
 
-Object styles follow the libraries: several style arguments, or an array of them, merge into one rule set where a later declaration replaces an earlier one and nested rules merge; Emotion's options argument (`styled('div', { shouldForwardProp })(...)`) is accepted, and every prop is forwarded. Numbers mean pixels as they do in Emotion and styled-components — `padding: 8` is `8px`, unitless properties such as `lineHeight` stay as written — while Devup UI shorthands such as `p` keep the spacing scale.
+Object styles follow the libraries: several style arguments, or an array of them, merge into one rule set where a later declaration replaces an earlier one and nested rules merge; Emotion's options argument (`styled('div', { shouldForwardProp })(...)`) is accepted, and its `shouldForwardProp` is evaluated at build time. Numbers mean pixels as they do in Emotion and styled-components — `padding: 8` is `8px`, unitless properties such as `lineHeight` stay as written — while Devup UI shorthands such as `p` keep the spacing scale.
 
 A style argument can be conditional — `cond && { ... }`, `cond ? { ... } : { ... }`, `value || { ... }` or `value ?? { ... }`, in `styled` as in `css`. Each property it sets becomes a per-property ternary over what came before (`color: cond ? 'blue' : 'red'`), so the result does not depend on the order atomic classes land in the stylesheet; a conditional class joins as `cond ? cls : ''`, and the left side of `||` / `??` joins only when it is a string, as the libraries skip other values. Classes passed beside rule objects compose in `styled` as in `css`.
 
@@ -42,7 +42,7 @@ A style argument that cannot be known at build time — a function call the buil
 
 Inside a template, an interpolation standing where a declaration would is a mixin: `${mixin}` and `${(p) => p.active && mixin}` compose their class with the component's. A literal or constant is written into the CSS wherever it stands — a value, a CSS snippet, a selector. Any other interpolation in a selector or a property name is a build error, as are runtime values in `css`, `keyframes` and global styles, which have no element to set a CSS variable on.
 
-`.attrs()` and `.withConfig()` chain onto any factory. Attrs are merged over the props in order, as styled-components does — an object is spread, a function is called with the props; `.withConfig()` only tunes runtime behavior, so it is dropped:
+`.attrs()` and `.withConfig()` chain onto any factory. Attrs are merged over the props in order, as styled-components does — an object is spread, a function is called with the props. In `.withConfig()`, `shouldForwardProp` is evaluated at build time; `displayName`, `componentId` and the other options are ignored and add no runtime behavior:
 
 ```tsx
 const Button = styled.button
@@ -64,6 +64,23 @@ import * as Emotion from '@emotion/styled'
 const Card = Emotion.div`color: red;`
 ```
 
+## Transient props
+
+Props whose names start with `$` are transient, as in styled-components: style functions read them, but a styled component never passes them on to what it renders — a tag, a component or what `as` names. That includes `$` props a runtime spread brings and those attrs create, even when `shouldForwardProp` allows them:
+
+```tsx
+const Title = styled.h1`
+  color: ${(p) => p.$tone};
+`
+
+function Heading(props) {
+  return <Title {...props} />
+}
+
+// `$tone` sets the color; the <h1> gets `id` but neither `$tone` nor `$track`
+const heading = <Heading $tone="teal" $track="hero" id="intro" />
+```
+
 ## Theme interpolation
 
 `ThemeProvider` redefines CSS variables on a `display: contents` wrapper, so it scopes the theme to its subtree without touching layout. Interpolations that read the theme are resolved at build time — no runtime lookup:
@@ -123,4 +140,4 @@ Emotion's `<Global styles={...} />` behaves the same way: the `styles` prop is e
 | `ServerStyleSheet`, `StyleSheetManager`  | inert — Devup UI already emits a real stylesheet, so there is nothing to collect |
 | `isStyledComponent`                      | always `false`                                                                   |
 | `ClassNames`, `CacheProvider`            | no equivalent; stays on its own package with a build warning                     |
-| `.attrs()`, `.withConfig()`              | attrs merged over props; `withConfig` dropped                                    |
+| `.attrs()`, `.withConfig()`              | attrs merged over props; build-time `shouldForwardProp`, other options ignored   |