From 2e1c60d814b9b385c61075878466fe05b0c425b3 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Tue, 8 Jul 2025 10:03:09 +0900
Subject: [PATCH 1/3] Fix className logic

---
 .changeset/chilly-mice-leave.md               |   5 +
 libs/extractor/src/lib.rs                     |  34 ++
 libs/extractor/src/prop_modify_utils.rs       |  81 ++-
 ...tor__tests__ignore_special_props2.snap.new | 575 ------------------
 .../extractor__tests__rest_props-2.snap       |  57 ++
 ...r__tests__support_transpile_cjs_2.snap.new |   9 -
 6 files changed, 132 insertions(+), 629 deletions(-)
 create mode 100644 .changeset/chilly-mice-leave.md
 delete mode 100644 libs/extractor/src/snapshots/extractor__tests__ignore_special_props2.snap.new
 create mode 100644 libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
 delete mode 100644 libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs_2.snap.new

diff --git a/.changeset/chilly-mice-leave.md b/.changeset/chilly-mice-leave.md
new file mode 100644
index 00000000..56a833f0
--- /dev/null
+++ b/.changeset/chilly-mice-leave.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Refactor className logic
diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs
index 02764c56..99971d7b 100644
--- a/libs/extractor/src/lib.rs
+++ b/libs/extractor/src/lib.rs
@@ -2285,6 +2285,40 @@ e(o, { className: "a", bg: variable, style: { color: "blue" }, ...props })
             )
             .unwrap()
         ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.jsx",
+                r#"import { VStack } from '@devup-ui/core'
+
+export default function Card({
+  children,
+  className,
+  ...props
+}) {
+  return (
+    <VStack
+      _active={{
+        boxShadow: 'none',
+        transform: 'scale(0.95)',
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+    </VStack>
+  )
+}
+
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_file: None
+                }
+            )
+            .unwrap()
+        ));
     }
 
     #[test]
diff --git a/libs/extractor/src/prop_modify_utils.rs b/libs/extractor/src/prop_modify_utils.rs
index 16290ea8..f1189a94 100644
--- a/libs/extractor/src/prop_modify_utils.rs
+++ b/libs/extractor/src/prop_modify_utils.rs
@@ -245,76 +245,67 @@ fn merge_string_expressions<'a>(
     let mut string_literals: std::vec::Vec<String> = vec![];
     let mut other_expressions = vec![];
     let mut prev_str = String::new();
-    for (idx, ex) in expressions.iter().enumerate() {
+    for ex in expressions.iter() {
         match ex {
             Expression::StringLiteral(literal) => {
-                prev_str.push_str(
-                    format!(
-                        "{}{}",
-                        if prev_str.trim().is_empty() && other_expressions.is_empty() {
-                            ""
-                        } else {
-                            " "
-                        },
-                        literal.value.trim()
-                    )
-                    .as_str(),
+                let target_prev = prev_str.trim();
+                let target = literal.value.trim();
+                prev_str = format!(
+                    "{}{}{}",
+                    target_prev,
+                    if target_prev.is_empty() { "" } else { " " },
+                    target
                 );
             }
             Expression::TemplateLiteral(template) => {
                 for (idx, q) in template.quasis.iter().enumerate() {
-                    if !prev_str.is_empty() {
+                    let target_prev = prev_str.trim();
+                    let target = q.value.raw.trim();
+                    if idx < template.quasis.len() - 1 {
                         string_literals.push(format!(
-                            "{}{}{}{}",
-                            prev_str.trim(),
-                            if !prev_str.trim().is_empty() { " " } else { "" },
-                            q.value.raw.trim(),
-                            if idx == template.quasis.len() - 1 {
-                                ""
-                            } else {
+                            "{}{}{}{}{}",
+                            if !other_expressions.is_empty() || idx > 0 {
                                 " "
-                            }
-                        ));
-                        prev_str = String::new();
-                    } else if q.tail {
-                        prev_str = q.value.raw.trim().to_string();
-                    } else {
-                        string_literals.push(format!(
-                            "{}{}{}",
-                            if idx == 0
-                                && other_expressions.is_empty()
-                                && string_literals.is_empty()
-                            {
-                                ""
                             } else {
-                                " "
-                            },
-                            q.value.raw.trim(),
-                            if q.value.raw.trim().is_empty() || !q.value.raw.ends_with(' ') {
                                 ""
-                            } else {
+                            },
+                            target_prev,
+                            if !target_prev.is_empty() { " " } else { "" },
+                            target,
+                            if !target.is_empty() && !target.ends_with("typo-") {
                                 " "
+                            } else {
+                                ""
                             }
                         ));
-                        prev_str = String::new();
+                    } else {
+                        prev_str = q.value.raw.trim().to_string();
                     }
                 }
                 other_expressions.extend(template.expressions.clone_in(ast_builder.allocator));
             }
             ex => {
+                let target_prev = prev_str.trim();
                 string_literals.push(format!(
-                    "{}{}",
-                    prev_str.trim(),
-                    if idx > 0 { " " } else { "" }
+                    "{}{}{}",
+                    if !other_expressions.is_empty() {
+                        " "
+                    } else {
+                        ""
+                    },
+                    target_prev,
+                    if !target_prev.is_empty() { " " } else { "" }
                 ));
                 other_expressions.push(ex.clone_in(ast_builder.allocator));
                 prev_str = String::new();
             }
         }
     }
-    if !prev_str.is_empty() {
-        string_literals.push(prev_str.trim_end().to_string());
-    }
+    string_literals.push(format!(
+        "{}{}",
+        if !prev_str.trim().is_empty() { " " } else { "" },
+        prev_str.trim(),
+    ));
     if other_expressions.is_empty() {
         return Some(ast_builder.expression_string_literal(
             SPAN,
diff --git a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props2.snap.new b/libs/extractor/src/snapshots/extractor__tests__ignore_special_props2.snap.new
deleted file mode 100644
index ce1976b1..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__ignore_special_props2.snap.new
+++ /dev/null
@@ -1,575 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-assertion_line: 236
-expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {Box as DevupButton} from '@devup-ui/core'\n        <DevupButton\n      _active={\n        {\n          primary: {\n            bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)`,\n          },\n          default: {\n            bg: `color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)`,\n            border: `1px solid var(--primary, #8163E1)`,\n            color: '#000',\n          },\n        }[variant]\n      }\n      _disabled={\n        {\n          primary: {\n            color: '#D6D7DE',\n            bgColor: '#F0F0F3',\n            cursor: 'not-allowed',\n          },\n          default: {\n            color: '#D6D7DE',\n            bgColor: '#F0F0F3',\n            cursor: 'not-allowed',\n            borderColor: 'var(--border, #E4E4E4)',\n          },\n        }[variant]\n      }\n      _focusVisible={{\n        outline: '2px solid',\n        outlineColor: 'var(--primaryFocus, #9385D3)',\n      }}\n      _hover={\n        {\n          primary: {\n            bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)`,\n          },\n          default: {\n            borderColor: `var(--primary, #8163E1)`,\n            bg: `color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)`,\n          },\n        }[variant]\n      }\n      _themeDark={{\n        _active: {\n          primary: {\n            bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);`,\n          },\n          default: {\n            bg: 'var(--primary, #8163E1)',\n            color: 'var(--text, #F6F6F6)',\n          },\n        }[variant],\n        _disabled: {\n          primary: {\n            color: '#373737',\n            bgColor: '#47474A',\n            borderColor: 'transparent',\n          },\n          default: {\n            color: '#373737',\n            bgColor: '#47474A',\n            borderColor: 'transparent',\n          },\n        }[variant],\n        _hover: {\n          primary: {\n            bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);`,\n            outlineColor: `var(--primary, #674DC7)`,\n          },\n          default: {\n            borderColor: `var(--primary, #8163E1)`,\n            bg: `color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)`,\n          },\n        }[variant],\n        _focusVisible: {\n          outlineColor: 'var(--primaryFocus, #927CE4)',\n        },\n      }}\n      aria-disabled={props.disabled}\n      aria-label=\"button\"\n      bg={\n        {\n          primary: 'var(--primary, #8163E1)',\n          default: 'var(--inputBackground, #FFF)',\n        }[variant]\n      }\n      border={\n        {\n          primary: 'none',\n          default: '1px solid var(--border, #E4E4E4)',\n        }[variant]\n      }\n      borderRadius={\n        {\n          primary: '8px',\n          default: '10px',\n        }[variant]\n      }\n      boxSizing=\"border-box\"\n    //   className={clsx(\n    //     isError && variant === 'default' && errorClassNames,\n    //     className,\n    //   )}\n      className={className}\n      color={\n        {\n          primary: '#FFF',\n          default: 'var(--text, #272727)',\n        }[variant]\n      }\n      cursor=\"pointer\"\n      fontSize={variant === 'default' && ['14px', null, null, null, '15px']}\n      fontWeight={700}\n      letterSpacing={\n        variant === 'default' && ['-0.02em', null, null, null, '-0.03em']\n      }\n      outlineOffset=\"2px\"\n      pos=\"relative\"\n      px=\"40px\"\n      py=\"12px\"\n      styleOrder={1}\n      styleVars={{\n        primary: colors?.primary,\n        error: colors?.error,\n        text: colors?.text,\n        border: colors?.border,\n        inputBackground: colors?.inputBackground,\n        primaryFocus: colors?.primaryFocus,\n      }}\n      transition=\".25s\"\n      type={type}\n      typography={typography}\n      // {...props}\n    >\n      <Box maxW=\"100%\" mx=\"auto\" pos=\"relative\" w=\"fit-content\">\n        {icon && (\n          <Center\n            boxSize=\"24px\"\n            left=\"4px\"\n            pos=\"absolute\"\n            role=\"presentation\"\n            selectors={{\n              '&>svg': {\n                color: 'inherit',\n              },\n            }}\n            top=\"50%\"\n            transform=\"translate(-100%, -50%)\"\n          >\n            {icon}\n          </Center>\n        )}\n        <Box\n          className={clsx(ellipsis && buttonTextEllipsis)}\n          lineHeight=\"1.2\"\n          minH=\"1.2em\"\n          transform={!!icon && 'translateX(8px)'}\n        >\n          {children}\n        </Box>\n      </Box>\n    </DevupButton>\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
----
-ToBTreeSet {
-    styles: {
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:hover",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:hover",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:active",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:hover",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:hover",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:active",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:active",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "var(--inputBackground,#FFF)",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "var(--primary,#8163E1)",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "background",
-                value: "var(--primary,#8163E1)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:active",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "backgroundColor",
-                value: "#47474A",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:disabled",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "backgroundColor",
-                value: "#F0F0F3",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:disabled",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "border",
-                value: "1px solid var(--border,#E4E4E4)",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "border",
-                value: "1px solid var(--primary,#8163E1)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:active",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "border",
-                value: "none",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "borderColor",
-                value: "transparent",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:disabled",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "borderColor",
-                value: "var(--border,#E4E4E4)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:disabled",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "borderColor",
-                value: "var(--primary,#8163E1)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:hover",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "borderRadius",
-                value: "10px",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "borderRadius",
-                value: "8px",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "boxSizing",
-                value: "border-box",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "color",
-                value: "#000",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:active",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "color",
-                value: "#373737",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:disabled",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "color",
-                value: "#D6D7DE",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:disabled",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "color",
-                value: "#FFF",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "color",
-                value: "var(--text,#272727)",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "color",
-                value: "var(--text,#F6F6F6)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:active",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "cursor",
-                value: "not-allowed",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:disabled",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "cursor",
-                value: "pointer",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "fontSize",
-                value: "14px",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "fontSize",
-                value: "15px",
-                level: 4,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "fontWeight",
-                value: "700",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "letterSpacing",
-                value: "-0.02em",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "letterSpacing",
-                value: "-0.03em",
-                level: 4,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "outline",
-                value: "2px solid",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:focus-visible",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "outlineColor",
-                value: "var(--primary,#674DC7)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:hover",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "outlineColor",
-                value: "var(--primaryFocus,#927CE4)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        ":root[data-theme=dark] &:focus-visible",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "outlineColor",
-                value: "var(--primaryFocus,#9385D3)",
-                level: 0,
-                selector: Some(
-                    Selector(
-                        "&:focus-visible",
-                    ),
-                ),
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "outlineOffset",
-                value: "2px",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "position",
-                value: "relative",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "px",
-                value: "40px",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "py",
-                value: "12px",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-        Static(
-            ExtractStaticStyle {
-                property: "transition",
-                value: ".25s",
-                level: 0,
-                selector: None,
-                style_order: Some(
-                    1,
-                ),
-            },
-        ),
-    },
-    code: "import \"@devup-ui/core/devup-ui.css\";\n<div aria-disabled={props.disabled} aria-label=\"button\" type={type} className={`${className || \"\"} d8 d9 d23 d30 d33 d36 d39 d40 d41 d42 d43 ${{\n\t\"default\": \"d0 d1 d2\",\n\t\"primary\": \"d3\"\n}[variant]}`} style={{\n\t\"--primary\": colors?.primary,\n\t\"--error\": colors?.error,\n\t\"--text\": colors?.text,\n\t\"--border\": colors?.border,\n\t\"--inputBackground\": colors?.inputBackground,\n\t\"--primaryFocus\": colors?.primaryFocus\n}}>\n      <Box maxW=\"100%\" mx=\"auto\" pos=\"relative\" w=\"fit-content\">\n        {icon && <Center boxSize=\"24px\" left=\"4px\" pos=\"absolute\" role=\"presentation\" selectors={{ \"&>svg\": { color: \"inherit\" } }} top=\"50%\" transform=\"translate(-100%, -50%)\">\n            {icon}\n          </Center>}\n        <Box className={clsx(ellipsis && buttonTextEllipsis)} lineHeight=\"1.2\" minH=\"1.2em\" transform={!!icon && \"translateX(8px)\"}>\n          {children}\n        </Box>\n      </Box>\n    </div>;\n",
-}
diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
new file mode 100644
index 00000000..cdc817ed
--- /dev/null
+++ b/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
@@ -0,0 +1,57 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.jsx\",\nr#\"import { VStack } from '@devup-ui/core'\n\nexport default function Card({\n  children,\n  className,\n  ...props\n}) {\n  return (\n    <VStack\n      _active={{\n        boxShadow: 'none',\n        transform: 'scale(0.95)',\n      }}\n      className={className}\n      {...props}\n    >\n      {children}\n    </VStack>\n  )\n}\n\n        \"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "boxShadow",
+                value: "none",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "display",
+                value: "flex",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "flexDirection",
+                value: "column",
+                level: 0,
+                selector: None,
+                style_order: Some(
+                    0,
+                ),
+            },
+        ),
+        Static(
+            ExtractStaticStyle {
+                property: "transform",
+                value: "scale(0.95)",
+                level: 0,
+                selector: Some(
+                    Selector(
+                        "&:active",
+                    ),
+                ),
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui.css\";\nexport default function Card({ children, className,...props }) {\n\treturn <div {...props} className={`${className || \"\"} d0 d1 d2 d3 ${props?.className || \"\"}`} style={props?.style}>\n      {children}\n    </div>;\n}\n",
+}
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs_2.snap.new b/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs_2.snap.new
deleted file mode 100644
index f18461f6..00000000
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_cjs_2.snap.new
+++ /dev/null
@@ -1,9 +0,0 @@
----
-source: libs/extractor/src/lib.rs
-assertion_line: 2140
-expression: "ToBTreeSet::from(extract(\"test.cjs\",\nr#\"'use client'\n\nimport type { Conditional } from 'src/types/utils'\n\nimport { DevupTheme } from '../types/theme'\n\n/**\n * Initialize the theme, if you can't use the `ThemeScript` component\n * e.g. in vite\n * @param auto - Whether to use the system theme\n * @param theme - The theme to use\n */\nexport function initTheme(\n  auto?: boolean,\n  theme?: Conditional<DevupTheme>,\n): void {\n  if (theme) {\n    document.documentElement.setAttribute('data-theme', theme)\n  } else {\n    console.log(\n      'hello',\n      typeof process.env.DEVUP_UI_DEFAULT_THEME,\n      process.env.DEVUP_UI_DEFAULT_THEME,\n      localStorage.getItem('__DF_THEME_SELECTED__') ||\n        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches\n          ? 'dark'\n          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),\n    )\n    document.documentElement.setAttribute(\n      'data-theme',\n      localStorage.getItem('__DF_THEME_SELECTED__') ||\n        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches\n          ? 'dark'\n          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),\n    )\n  }\n}\n\"#,\nExtractOption\n{ package: \"@devup-ui/react\".to_string(), css_file: None }).unwrap())"
----
-ToBTreeSet {
-    styles: {},
-    code: "'use client'\n\nimport type { Conditional } from 'src/types/utils'\n\nimport { DevupTheme } from '../types/theme'\n\n/**\n * Initialize the theme, if you can't use the `ThemeScript` component\n * e.g. in vite\n * @param auto - Whether to use the system theme\n * @param theme - The theme to use\n */\nexport function initTheme(\n  auto?: boolean,\n  theme?: Conditional<DevupTheme>,\n): void {\n  if (theme) {\n    document.documentElement.setAttribute('data-theme', theme)\n  } else {\n    console.log(\n      'hello',\n      typeof process.env.DEVUP_UI_DEFAULT_THEME,\n      process.env.DEVUP_UI_DEFAULT_THEME,\n      localStorage.getItem('__DF_THEME_SELECTED__') ||\n        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches\n          ? 'dark'\n          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),\n    )\n    document.documentElement.setAttribute(\n      'data-theme',\n      localStorage.getItem('__DF_THEME_SELECTED__') ||\n        (auto && window.matchMedia('(prefers-color-scheme:dark)').matches\n          ? 'dark'\n          : (process.env.DEVUP_UI_DEFAULT_THEME ?? 'default')),\n    )\n  }\n}\n",
-}

From 868652ba1d1c731d8c7605eda2c3282f50979536 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Tue, 8 Jul 2025 10:13:37 +0900
Subject: [PATCH 2/3] Fix className logic

---
 libs/extractor/src/prop_modify_utils.rs       | 33 ++++++++++++-------
 ...extract_style_props_with_class_name-9.snap |  2 +-
 .../extractor__tests__rest_props-2.snap       |  2 +-
 ...actor__tests__support_transpile_mjs-5.snap |  2 +-
 4 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/libs/extractor/src/prop_modify_utils.rs b/libs/extractor/src/prop_modify_utils.rs
index f1189a94..3660b6ad 100644
--- a/libs/extractor/src/prop_modify_utils.rs
+++ b/libs/extractor/src/prop_modify_utils.rs
@@ -133,6 +133,8 @@ pub fn modify_props<'a>(
             }
         }
     }
+    println!("class_name_prop: {:?}", class_name_prop);
+    println!("style_prop: {:?}", style_prop);
     if let Some(ex) = get_class_name_expression(
         ast_builder,
         &class_name_prop,
@@ -179,17 +181,26 @@ pub fn get_class_name_expression<'a>(
         ]
         .into_iter()
         .flatten()
-        .chain(spread_props.iter().map(|ex| {
-            convert_class_name(
-                ast_builder,
-                &Expression::StaticMemberExpression(ast_builder.alloc_static_member_expression(
-                    SPAN,
-                    ex.clone_in(ast_builder.allocator),
-                    ast_builder.identifier_name(SPAN, ast_builder.atom("className")),
-                    true,
-                )),
-            )
-        }))
+        .chain(if class_name_prop.is_some() {
+            vec![]
+        } else {
+            spread_props
+                .iter()
+                .map(|ex| {
+                    convert_class_name(
+                        ast_builder,
+                        &Expression::StaticMemberExpression(
+                            ast_builder.alloc_static_member_expression(
+                                SPAN,
+                                ex.clone_in(ast_builder.allocator),
+                                ast_builder.identifier_name(SPAN, ast_builder.atom("className")),
+                                true,
+                            ),
+                        ),
+                    )
+                })
+                .collect::<Vec<_>>()
+        })
         .collect::<Vec<_>>()
         .as_slice(),
     )
diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
index 8c827d5d..35ac0d70 100644
--- a/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__extract_style_props_with_class_name-9.snap
@@ -20,5 +20,5 @@ ToBTreeSet {
             "buttonS",
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport clsx from \"clsx\";\n<button {...props} className={`${clsx(variants[variant], isError && variant === \"default\" && errorClassNames, className) || \"\"} d0 ${isPrimary ? {\n\t\"md\": \"typo-buttonM\",\n\t\"sm\": \"typo-buttonS\"\n}[size] || \"\" : \"\"} ${props?.className || \"\"}`} style={props?.style} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport clsx from \"clsx\";\n<button {...props} className={`${clsx(variants[variant], isError && variant === \"default\" && errorClassNames, className) || \"\"} d0 ${isPrimary ? {\n\t\"md\": \"typo-buttonM\",\n\t\"sm\": \"typo-buttonS\"\n}[size] || \"\" : \"\"}`} style={props?.style} />;\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
index cdc817ed..46512836 100644
--- a/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__rest_props-2.snap
@@ -53,5 +53,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\nexport default function Card({ children, className,...props }) {\n\treturn <div {...props} className={`${className || \"\"} d0 d1 d2 d3 ${props?.className || \"\"}`} style={props?.style}>\n      {children}\n    </div>;\n}\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nexport default function Card({ children, className,...props }) {\n\treturn <div {...props} className={`${className || \"\"} d0 d1 d2 d3`} style={props?.style}>\n      {children}\n    </div>;\n}\n",
 }
diff --git a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
index 35519da9..c72dd920 100644
--- a/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
+++ b/libs/extractor/src/snapshots/extractor__tests__support_transpile_mjs-5.snap
@@ -14,5 +14,5 @@ ToBTreeSet {
             },
         ),
     },
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", {\n\t...props,\n\tclassName: `a d0 ${props?.className || \"\"}`,\n\tstyle: {\n\t\t...{ \"--d1\": variable },\n\t\t...{ color: \"blue\" },\n\t\t...props?.style\n\t}\n});\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { jsx as e } from \"react/jsx-runtime\";\ne(\"div\", {\n\t...props,\n\tclassName: \"a d0\",\n\tstyle: {\n\t\t...{ \"--d1\": variable },\n\t\t...{ color: \"blue\" },\n\t\t...props?.style\n\t}\n});\n",
 }

From 90c4624b91741b68bca236d8601ebdc197f597c4 Mon Sep 17 00:00:00 2001
From: owjs3901 <owjs3901@naver.com>
Date: Tue, 8 Jul 2025 10:34:42 +0900
Subject: [PATCH 3/3] Fix className logic

---
 .../__snapshots__/index.browser.test.tsx.snap | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap
index fdc1a277..b488fc57 100644
--- a/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap
+++ b/packages/components/src/components/Button/__tests__/__snapshots__/index.browser.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Button > color should be white 1`] = `
 <div>
   <button
     aria-label="button"
-    class="aaaaa outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1  "
+    class="aaaaa outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
     style="--primary: red; --error: red; --text: red; --border: red; --inputBackground: red; --primaryFocus: red;"
     type="button"
   >
@@ -26,7 +26,7 @@ exports[`Button > should disable 1`] = `
   <button
     aria-disabled="true"
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
     disabled=""
     type="button"
   >
@@ -47,7 +47,7 @@ exports[`Button > should have class name when className is provided 1`] = `
 <div>
   <button
     aria-label="button"
-    class="test outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1  "
+    class="test outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
     type="button"
   >
     <div
@@ -67,7 +67,7 @@ exports[`Button > should have font size 14px when size is sm and variant is defa
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-12px--1 py-0-8px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-12px--1 py-0-8px--1 "
     data-testid="button"
     type="button"
   >
@@ -88,7 +88,7 @@ exports[`Button > should have font size 15px when size is md and variant is prim
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)-6232724021015440856-1 outlineColor-0-var(--primary,#674DC7)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--primary,#8163E1)-6667598448774358329-1 background-0-var(--primary,#8163E1)--1 border-0-none--1 borderRadius-0-8px--1 color-0-#FFF--1 fontSize-0-15px--1 fontSize-4-16px--1 letterSpacing-0-0--1 letterSpacing-4--0.01em--1 px-0-16px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)-6232724021015440856-1 outlineColor-0-var(--primary,#674DC7)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--primary,#8163E1)-6667598448774358329-1 background-0-var(--primary,#8163E1)--1 border-0-none--1 borderRadius-0-8px--1 color-0-#FFF--1 fontSize-0-15px--1 fontSize-4-16px--1 letterSpacing-0-0--1 letterSpacing-4--0.01em--1 px-0-16px--1 py-0-10px--1 "
     data-testid="button"
     type="button"
   >
@@ -109,7 +109,7 @@ exports[`Button > should have font size 15px when size is sm and variant is prim
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)-6232724021015440856-1 outlineColor-0-var(--primary,#674DC7)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--primary,#8163E1)-6667598448774358329-1 background-0-var(--primary,#8163E1)--1 border-0-none--1 borderRadius-0-8px--1 color-0-#FFF--1 fontSize-0-15px--1 fontSize-4-16px--1 letterSpacing-0-0--1 letterSpacing-4--0.01em--1 px-0-12px--1 py-0-8px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)-6232724021015440856-1 outlineColor-0-var(--primary,#674DC7)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--primary,#8163E1)-6667598448774358329-1 background-0-var(--primary,#8163E1)--1 border-0-none--1 borderRadius-0-8px--1 color-0-#FFF--1 fontSize-0-15px--1 fontSize-4-16px--1 letterSpacing-0-0--1 letterSpacing-4--0.01em--1 px-0-12px--1 py-0-8px--1 "
     data-testid="button"
     type="button"
   >
@@ -130,7 +130,7 @@ exports[`Button > should have text overflow ellipsis when ellipsis is true 1`] =
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
     style="max-width: 10px;"
     type="button"
   >
@@ -151,7 +151,7 @@ exports[`Button > should have typography when typography is provided 1`] = `
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 typo-inlineLabelS "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 typo-inlineLabelS"
     type="button"
   >
     <div
@@ -171,7 +171,7 @@ exports[`Button > should not have bg when a wrong size variable is provided 1`]
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1                px-0-16px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1                px-0-16px--1 py-0-10px--1 "
     type="button"
   >
     <div
@@ -191,7 +191,7 @@ exports[`Button > should not have px when a wrong size variable is provided 1`]
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1    "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1   "
     type="button"
   >
     <div
@@ -210,7 +210,7 @@ exports[`Button > should not have px when a wrong size variable is provided 1`]
 exports[`Button > should not render error color when danger is false and variant is default 1`] = `
 <button
   aria-label="button"
-  class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1  "
+  class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
   data-testid="button"
   type="button"
 >
@@ -230,7 +230,7 @@ exports[`Button > should render 1`] = `
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
     type="button"
   >
     <div
@@ -250,7 +250,7 @@ exports[`Button > should render default style when variant is default 1`] = `
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
     type="button"
   >
     <div
@@ -270,7 +270,7 @@ exports[`Button > should render error style when danger is true and variant is d
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-var(--error,#D52B2E)-15425828959012638752-1 border-0-1px solid var(--error,#D52B2E)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--error,#FF5B5E)-17005923944751620165-1 borderColor-0-var(--error,#D52B2E)-8380715471663921674-1  color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--error,#FF5B5E)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--error,#FF5B5E)-6232724021015440856-1  outlineColor-0-var(--error,#D52B2E)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--error,#D52B2E)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-var(--error,#D52B2E)-15425828959012638752-1 border-0-1px solid var(--error,#D52B2E)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--error,#FF5B5E)-17005923944751620165-1 borderColor-0-var(--error,#D52B2E)-8380715471663921674-1  color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--error,#FF5B5E)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--error,#FF5B5E)-6232724021015440856-1  outlineColor-0-var(--error,#D52B2E)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--error,#D52B2E)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-16px--1 py-0-10px--1 "
     type="button"
   >
     <div
@@ -290,7 +290,7 @@ exports[`Button > should render icon when icon is provided 1`] = `
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-28px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 color-0-#000-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 20%,#FFF 80%)-15425828959012638752-1 border-0-1px solid var(--primary,#8163E1)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 borderColor-0-var(--border,#E4E4E4)-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 borderColor-0-var(--primary,#8163E1)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 10%,#FFF 90%)-8380715471663921674-1 color-0-var(--text,#F6F6F6)-2922352740838246662-1 background-0-var(--primary,#8163E1)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 borderColor-0-var(--primary,#8163E1)-6232724021015440856-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 10%,var(--inputBackground,#2E2E2E) 90%)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--inputBackground,#2E2E2E)-6667598448774358329-1 background-0-var(--inputBackground,#FFF)--1 border-0-1px solid var(--border,#E4E4E4)--1 borderRadius-0-10px--1 color-0-var(--text,#272727)--1 fontSize-0-14px--1 fontSize-4-15px--1 letterSpacing-0--0.02em--1 letterSpacing-4--0.03em--1 px-0-28px--1 py-0-10px--1 "
     data-testid="button"
     type="button"
   >
@@ -329,7 +329,7 @@ exports[`Button > should render primary background color when danger is true and
 <div>
   <button
     aria-label="button"
-    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)-6232724021015440856-1 outlineColor-0-var(--primary,#674DC7)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--primary,#8163E1)-6667598448774358329-1 background-0-var(--primary,#8163E1)--1 border-0-none--1 borderRadius-0-8px--1 color-0-#FFF--1 fontSize-0-15px--1 fontSize-4-16px--1 letterSpacing-0-0--1 letterSpacing-4--0.01em--1 px-0-16px--1 py-0-10px--1  "
+    class=" outline-0-2px solid-17005923944751620165-1 boxSizing-0-border-box--1 cursor-0-pointer--1 fontWeight-0-700--1 outlineOffset-0-2px--1 position-0-relative--1 transition-0-.25s--1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 30%)-15425828959012638752-1 color-0-#D6D7DE-14172363753176421546-1 backgroundColor-0-#F0F0F3-14172363753176421546-1 cursor-0-not-allowed-14172363753176421546-1 outlineColor-0-var(--primaryFocus,#9385D3)-17005923944751620165-1 background-0-color-mix(in srgb,var(--primary,#674DC7) 100%,#000 15%)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 30%)-2922352740838246662-1 color-0-#373737-878116160589243838-1 backgroundColor-0-#47474A-878116160589243838-1 borderColor-0-transparent-878116160589243838-1 background-0-color-mix(in srgb,var(--primary,#8163E1) 100%,#FFF 15%)-6232724021015440856-1 outlineColor-0-var(--primary,#674DC7)-6232724021015440856-1 outlineColor-0-var(--primaryFocus,#927CE4)-13318702800233181468-1 background-0-var(--primary,#8163E1)-6667598448774358329-1 background-0-var(--primary,#8163E1)--1 border-0-none--1 borderRadius-0-8px--1 color-0-#FFF--1 fontSize-0-15px--1 fontSize-4-16px--1 letterSpacing-0-0--1 letterSpacing-4--0.01em--1 px-0-16px--1 py-0-10px--1 "
     type="button"
   >
     <div