From e17028253b255c696faf979ffcccb43324e347d4 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Thu, 19 Dec 2024 10:15:59 -0500
Subject: [PATCH 1/9] Use pseudo-classes in Button

---
 .../wonder-blocks-button/button.stories.tsx   |  18 +++
 .../src/components/button-core.tsx            | 153 +++++++++---------
 .../src/themes/default.ts                     |   9 +-
 3 files changed, 95 insertions(+), 85 deletions(-)

diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx
index 433dc8e6fa..6060451527 100644
--- a/__docs__/wonder-blocks-button/button.stories.tsx
+++ b/__docs__/wonder-blocks-button/button.stories.tsx
@@ -135,6 +135,24 @@ export const Tertiary: StoryComponentType = {
     },
 };
 
+export const Focus: StoryComponentType = {
+    args: {
+        onClick: () => {},
+        kind: "primary",
+        children: "Hello, world!",
+    },
+    play: async ({canvasElement}) => {
+        const canvas = within(canvasElement);
+
+        // Get HTML elements
+        const button = canvas.getByRole("button");
+
+        // Focus style
+        await userEvent.tab(button);
+        await expect(button).toHaveFocus();
+    },
+};
+
 export const styles: StyleDeclaration = StyleSheet.create({
     row: {
         flexDirection: "row",
diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index b420d1ce36..3c3668484d 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -84,12 +84,12 @@ const ButtonCore: React.ForwardRefExoticComponent<
             kind !== "tertiary" &&
                 !disabled &&
                 (pressed
-                    ? buttonStyles.active
-                    : (hovered || focused) && buttonStyles.focus),
+                    ? buttonStyles.pressed
+                    : focused && buttonStyles.focused),
             kind === "tertiary" &&
                 !pressed &&
                 focused && [
-                    buttonStyles.focus,
+                    buttonStyles.focused,
                     disabled && buttonStyles.disabledFocus,
                 ],
             size === "small" && sharedStyles.small,
@@ -276,7 +276,10 @@ const themedSharedStyles: ThemedStylesFn<ButtonThemeContract> = (theme) => ({
         alignItems: "center",
         fontWeight: theme.font.weight.default,
         whiteSpace: "nowrap",
+        // TODO(juan): Figure out how to use text-underline with this for
+        // tertiary variant
         overflow: "hidden",
+        // contain: "paint",
         textOverflow: "ellipsis",
         display: "inline-block", // allows the button text to truncate
         pointerEvents: "none", // fix Safari bug where the browser was eating mouse events
@@ -362,9 +365,17 @@ export const _generateStyles = (
 
     let newStyles: Record<string, CSSProperties> = {};
     if (kind === "primary") {
-        const boxShadowInnerColor: string = light
-            ? theme.color.bg.primary.inverse
-            : theme.color.bg.primary.default;
+        const focusStyling = {
+            outlineColor: light ? theme.color.bg.primary.default : color,
+            outlineOffset: 2,
+            outlineStyle: "solid",
+            outlineWidth: 2,
+        };
+
+        const activePressedStyling = {
+            backgroundColor: activeColor,
+            outlineColor: light ? fadedColor : activeColor,
+        };
 
         newStyles = {
             default: {
@@ -372,37 +383,26 @@ export const _generateStyles = (
                 color: light ? color : theme.color.text.inverse,
                 paddingLeft: padding,
                 paddingRight: padding,
+                // TODO(juan): Change this when we get final designs for hover.
+                [":hover:not([aria-disabled=true])" as any]: focusStyling,
+                [":focus-visible:not([aria-disabled=true])" as any]:
+                    focusStyling,
+                [":active:not([aria-disabled=true])" as any]:
+                    activePressedStyling,
             },
-            focus: {
-                // This assumes a background of white for the regular button and
-                // a background of darkBlue for the light version. The inner
-                // box shadow/ring is also small enough for a slight variation
-                // in the background color not to matter too much.
-                boxShadow: `0 0 0 1px ${boxShadowInnerColor}, 0 0 0 3px ${
-                    light ? theme.color.bg.primary.default : color
-                }`,
-            },
-            active: {
-                boxShadow: `0 0 0 1px ${boxShadowInnerColor}, 0 0 0 3px ${
-                    light ? fadedColor : activeColor
-                }`,
-                background: light ? fadedColor : activeColor,
-                color: light ? activeColor : fadedColor,
-            },
+            // focused: focusStyling,
+            pressed: activePressedStyling,
             disabled: {
                 background: light
                     ? fadedColor
                     : theme.color.bg.primary.disabled,
                 color: light ? color : theme.color.text.primary.disabled,
                 cursor: "default",
-                ":focus": {
-                    boxShadow: `0 0 0 1px ${
-                        light
-                            ? theme.color.bg.primary.disabled
-                            : theme.color.bg.primary.default
-                    }, 0 0 0 3px ${
-                        light ? fadedColor : theme.color.bg.primary.disabled
-                    }`,
+                ":focus-visible": {
+                    ...focusStyling,
+                    outlineColor: light
+                        ? fadedColor
+                        : theme.color.bg.primary.disabled,
                 },
             },
         };
@@ -416,6 +416,25 @@ export const _generateStyles = (
                 ? theme.color.bg.secondary.active.critical
                 : theme.color.bg.secondary.active.action;
 
+        const focusStyling = {
+            background: light
+                ? theme.color.bg.secondary.inverse
+                : theme.color.bg.secondary.focus,
+            borderColor: "transparent",
+            outlineColor: light ? theme.color.border.primary.inverse : color,
+            outlineStyle: "solid",
+            outlineWidth: theme.border.width.focused,
+        };
+
+        const activePressedStyling = {
+            background: light ? activeColor : secondaryActiveColor,
+            color: light ? fadedColor : activeColor,
+            borderColor: "transparent",
+            outlineColor: light ? fadedColor : activeColor,
+            outlineStyle: "solid",
+            outlineWidth: theme.border.width.focused,
+        };
+
         newStyles = {
             default: {
                 background: light
@@ -429,34 +448,21 @@ export const _generateStyles = (
                 borderWidth: theme.border.width.secondary,
                 paddingLeft: padding,
                 paddingRight: padding,
+                [":hover:not([aria-disabled=true])" as any]: focusStyling,
+                [":focus-visible:not([aria-disabled=true])" as any]:
+                    focusStyling,
+                [":active:not([aria-disabled=true])" as any]:
+                    activePressedStyling,
             },
-            focus: {
-                background: light
-                    ? theme.color.bg.secondary.inverse
-                    : theme.color.bg.secondary.focus,
-                borderColor: "transparent",
-                outlineColor: light
-                    ? theme.color.border.primary.inverse
-                    : color,
-                outlineStyle: "solid",
-                outlineWidth: theme.border.width.focused,
-            },
-
-            active: {
-                background: light ? activeColor : secondaryActiveColor,
-                color: light ? fadedColor : activeColor,
-                borderColor: "transparent",
-                outlineColor: light ? fadedColor : activeColor,
-                outlineStyle: "solid",
-                outlineWidth: theme.border.width.focused,
-            },
+            focused: focusStyling,
+            pressed: activePressedStyling,
             disabled: {
                 color: light
                     ? theme.color.text.secondary.inverse
                     : theme.color.text.disabled,
                 outlineColor: light ? fadedColor : theme.color.border.disabled,
                 cursor: "default",
-                ":focus": {
+                ":focus-visible": {
                     outlineColor: light
                         ? theme.color.border.secondary.inverse
                         : theme.color.border.disabled,
@@ -466,40 +472,33 @@ export const _generateStyles = (
             },
         };
     } else if (kind === "tertiary") {
+        const focusStyling = {
+            outlineStyle: "solid",
+            outlineColor: light ? theme.color.border.tertiary.inverse : color,
+            outlineWidth: theme.border.width.focused,
+            borderRadius: theme.border.radius.default,
+        };
+        const activePressedStyling = {
+            color: light ? fadedColor : activeColor,
+        };
+
         newStyles = {
             default: {
                 background: "none",
                 color: light ? theme.color.text.inverse : color,
                 paddingLeft: 0,
                 paddingRight: 0,
-            },
-            hover: {
-                ":after": {
-                    content: "''",
-                    position: "absolute",
-                    height: theme.size.height.tertiaryHover,
-                    width: "100%",
-                    right: 0,
-                    bottom: 0,
-                    background: light ? theme.color.bg.tertiary.hover : color,
-                    borderRadius: theme.border.radius.tertiary,
-                },
-            },
-            focus: {
-                outlineStyle: "solid",
-                outlineColor: light
-                    ? theme.color.border.tertiary.inverse
-                    : color,
-                outlineWidth: theme.border.width.focused,
-                borderRadius: theme.border.radius.default,
-            },
-            active: {
-                color: light ? fadedColor : activeColor,
-                ":after": {
-                    height: theme.size.height.tertiaryHover,
-                    background: light ? fadedColor : activeColor,
+                [":hover:not([aria-disabled=true])" as any]: {
+                    textUnderlineOffset: 3,
+                    textDecoration: "underline",
                 },
+                [":focus-visible:not([aria-disabled=true])" as any]:
+                    focusStyling,
+                [":active:not([aria-disabled=true])" as any]:
+                    activePressedStyling,
             },
+            focused: focusStyling,
+            pressed: activePressedStyling,
             disabled: {
                 color: light ? fadedColor : theme.color.text.disabled,
                 cursor: "default",
diff --git a/packages/wonder-blocks-button/src/themes/default.ts b/packages/wonder-blocks-button/src/themes/default.ts
index fde16661e2..8ec588e386 100644
--- a/packages/wonder-blocks-button/src/themes/default.ts
+++ b/packages/wonder-blocks-button/src/themes/default.ts
@@ -25,8 +25,6 @@ const theme = {
             primary: {
                 default: tokens.color.white,
                 disabled: tokens.color.offBlack32,
-                // used in boxShadow
-                inverse: tokens.color.darkBlue,
             },
 
             secondary: {
@@ -39,10 +37,6 @@ const theme = {
                 },
             },
 
-            tertiary: {
-                hover: tokens.color.white,
-            },
-
             /**
              * Icons
              */
@@ -113,7 +107,7 @@ const theme = {
             // default
             default: tokens.border.radius.medium_4,
             // tertiary
-            tertiary: tokens.border.radius.xSmall_2,
+            // tertiary: tokens.border.radius.xSmall_2,
             // small button
             small: tokens.border.radius.medium_4,
             // large button
@@ -127,7 +121,6 @@ const theme = {
     },
     size: {
         height: {
-            tertiaryHover: tokens.spacing.xxxxSmall_2,
             small: tokens.spacing.xLarge_32,
             // NOTE: These height tokens are specific to this component.
             medium: 40,

From ff165fa918ca08696f9fea8ab33b05f3bbd5439d Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Thu, 19 Dec 2024 10:17:06 -0500
Subject: [PATCH 2/9] docs(changeset): Use pseudo-classes for styling states
 (:hover, :focus-visible). Keep some clickable states for programmatic focus
 and preserve active/pressed overrides.

---
 .changeset/rich-days-count.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rich-days-count.md

diff --git a/.changeset/rich-days-count.md b/.changeset/rich-days-count.md
new file mode 100644
index 0000000000..8e99f82538
--- /dev/null
+++ b/.changeset/rich-days-count.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-button": patch
+---
+
+Use pseudo-classes for styling states (:hover, :focus-visible). Keep some clickable states for programmatic focus and preserve active/pressed overrides.

From bcb6ced751e6b4ec74f34da6a51e1018b115d9e8 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Thu, 19 Dec 2024 12:37:58 -0500
Subject: [PATCH 3/9] Fix underline

---
 .../wonder-blocks-button/button.stories.tsx   | 18 ----------------
 .../src/components/button-core.tsx            | 21 ++++++++++++-------
 .../src/themes/default.ts                     | 18 +++++++++++++---
 3 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx
index 6060451527..433dc8e6fa 100644
--- a/__docs__/wonder-blocks-button/button.stories.tsx
+++ b/__docs__/wonder-blocks-button/button.stories.tsx
@@ -135,24 +135,6 @@ export const Tertiary: StoryComponentType = {
     },
 };
 
-export const Focus: StoryComponentType = {
-    args: {
-        onClick: () => {},
-        kind: "primary",
-        children: "Hello, world!",
-    },
-    play: async ({canvasElement}) => {
-        const canvas = within(canvasElement);
-
-        // Get HTML elements
-        const button = canvas.getByRole("button");
-
-        // Focus style
-        await userEvent.tab(button);
-        await expect(button).toHaveFocus();
-    },
-};
-
 export const styles: StyleDeclaration = StyleSheet.create({
     row: {
         flexDirection: "row",
diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index 3c3668484d..acc184a267 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -110,6 +110,7 @@ const ButtonCore: React.ForwardRefExoticComponent<
             <Label
                 style={[
                     sharedStyles.text,
+                    size === "small" && sharedStyles.smallText,
                     size === "large" && sharedStyles.largeText,
                     labelStyle,
                     spinner && sharedStyles.hiddenText,
@@ -276,14 +277,16 @@ const themedSharedStyles: ThemedStylesFn<ButtonThemeContract> = (theme) => ({
         alignItems: "center",
         fontWeight: theme.font.weight.default,
         whiteSpace: "nowrap",
-        // TODO(juan): Figure out how to use text-underline with this for
-        // tertiary variant
         overflow: "hidden",
-        // contain: "paint",
+        // To account for the underline-offset in tertiary buttons
+        lineHeight: `${theme.font.lineHeight.default}px`,
         textOverflow: "ellipsis",
         display: "inline-block", // allows the button text to truncate
         pointerEvents: "none", // fix Safari bug where the browser was eating mouse events
     },
+    smallText: {
+        lineHeight: `${theme.font.lineHeight.small}px`,
+    },
     largeText: {
         fontSize: theme.font.size.large,
         lineHeight: `${theme.font.lineHeight.large}px`,
@@ -383,14 +386,15 @@ export const _generateStyles = (
                 color: light ? color : theme.color.text.inverse,
                 paddingLeft: padding,
                 paddingRight: padding,
-                // TODO(juan): Change this when we get final designs for hover.
+                // TODO(WB-1844): Change this when we get final designs for
+                // hover.
                 [":hover:not([aria-disabled=true])" as any]: focusStyling,
                 [":focus-visible:not([aria-disabled=true])" as any]:
                     focusStyling,
                 [":active:not([aria-disabled=true])" as any]:
                     activePressedStyling,
             },
-            // focused: focusStyling,
+            focused: focusStyling,
             pressed: activePressedStyling,
             disabled: {
                 background: light
@@ -448,6 +452,8 @@ export const _generateStyles = (
                 borderWidth: theme.border.width.secondary,
                 paddingLeft: padding,
                 paddingRight: padding,
+                // TODO(WB-1844): Change this when we get final designs for
+                // hover.
                 [":hover:not([aria-disabled=true])" as any]: focusStyling,
                 [":focus-visible:not([aria-disabled=true])" as any]:
                     focusStyling,
@@ -480,6 +486,7 @@ export const _generateStyles = (
         };
         const activePressedStyling = {
             color: light ? fadedColor : activeColor,
+            textDecoration: `underline ${theme.size.underline.active}px`,
         };
 
         newStyles = {
@@ -489,8 +496,8 @@ export const _generateStyles = (
                 paddingLeft: 0,
                 paddingRight: 0,
                 [":hover:not([aria-disabled=true])" as any]: {
-                    textUnderlineOffset: 3,
-                    textDecoration: "underline",
+                    textUnderlineOffset: theme.font.offset.default,
+                    textDecoration: `underline ${theme.size.underline.hover}px`,
                 },
                 [":focus-visible:not([aria-disabled=true])" as any]:
                     focusStyling,
diff --git a/packages/wonder-blocks-button/src/themes/default.ts b/packages/wonder-blocks-button/src/themes/default.ts
index 8ec588e386..214aa0bbcb 100644
--- a/packages/wonder-blocks-button/src/themes/default.ts
+++ b/packages/wonder-blocks-button/src/themes/default.ts
@@ -1,5 +1,10 @@
 import * as tokens from "@khanacademy/wonder-blocks-tokens";
 
+// The underline-offset is the distance between the text baseline and the
+// bottom of the underline. This is necessary to prevent the underline from
+// breaking with descenders.
+const textUnderlineOffset = tokens.spacing.xxxSmall_4;
+
 const theme = {
     color: {
         bg: {
@@ -106,8 +111,6 @@ const theme = {
         radius: {
             // default
             default: tokens.border.radius.medium_4,
-            // tertiary
-            // tertiary: tokens.border.radius.xSmall_2,
             // small button
             small: tokens.border.radius.medium_4,
             // large button
@@ -126,6 +129,10 @@ const theme = {
             medium: 40,
             large: 56,
         },
+        underline: {
+            hover: tokens.spacing.xxxxSmall_2,
+            active: 1,
+        },
     },
     margin: {
         icon: {
@@ -145,11 +152,16 @@ const theme = {
             large: 18,
         },
         lineHeight: {
-            large: tokens.font.lineHeight.medium,
+            small: tokens.font.lineHeight.small + textUnderlineOffset,
+            default: tokens.font.lineHeight.medium + textUnderlineOffset,
+            large: tokens.font.lineHeight.medium + 2 + textUnderlineOffset,
         },
         weight: {
             default: tokens.font.weight.bold,
         },
+        offset: {
+            default: textUnderlineOffset,
+        },
     },
 };
 

From b32a14ae55a73db15471f4b5fa4b0b9631f3a9f9 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Thu, 19 Dec 2024 16:41:32 -0500
Subject: [PATCH 4/9] Add All Variants story, fix active styles

---
 .../button-variants.stories.tsx               | 188 ++++++++++++++++++
 .../wonder-blocks-button/button.stories.tsx   |  94 +++------
 .../src/components/button-core.tsx            |   2 +-
 3 files changed, 213 insertions(+), 71 deletions(-)
 create mode 100644 __docs__/wonder-blocks-button/button-variants.stories.tsx

diff --git a/__docs__/wonder-blocks-button/button-variants.stories.tsx b/__docs__/wonder-blocks-button/button-variants.stories.tsx
new file mode 100644
index 0000000000..05084a42ef
--- /dev/null
+++ b/__docs__/wonder-blocks-button/button-variants.stories.tsx
@@ -0,0 +1,188 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import {action} from "@storybook/addon-actions";
+import type {Meta, StoryObj} from "@storybook/react";
+
+import paperPlaneIcon from "@phosphor-icons/core/fill/paper-plane-tilt-fill.svg";
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
+import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
+import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import Button from "@khanacademy/wonder-blocks-button";
+
+/**
+ * The following stories are used to generate the pseudo states for the
+ * Button component. This is only used for visual testing in Chromatic.
+ */
+export default {
+    title: "Packages / Button / All Variants",
+    parameters: {
+        docs: {
+            autodocs: false,
+        },
+    },
+} as Meta;
+
+type StoryComponentType = StoryObj<typeof Button>;
+
+type ButtonProps = PropsFor<typeof Button>;
+
+const sizes: Array<ButtonProps["size"]> = ["medium", "small", "large"];
+const kinds: Array<ButtonProps["kind"]> = ["primary", "secondary", "tertiary"];
+
+const colors: Array<ButtonProps["color"]> = ["default", "destructive"];
+
+function VariantsGroup({
+    color = "default",
+    disabled = false,
+    label = "Button",
+    light,
+    size,
+}: {
+    color?: ButtonProps["color"];
+    disabled?: ButtonProps["disabled"];
+    label?: string;
+    light: boolean;
+    size: ButtonProps["size"];
+}) {
+    const theme = React.useContext(ThemeSwitcherContext);
+    const category = disabled ? "disabled" : color;
+
+    return (
+        <View
+            style={[
+                styles.variants,
+                light &&
+                    (theme === "khanmigo"
+                        ? styles.darkKhanmigo
+                        : styles.darkDefault),
+            ]}
+        >
+            <LabelMedium style={[styles.label, light && styles.inverseLabel]}>
+                {size} / {category}
+            </LabelMedium>
+            {kinds.map((kind) => (
+                <React.Fragment key={kind}>
+                    <Button
+                        onClick={action("clicked")}
+                        disabled={disabled}
+                        kind={kind}
+                        light={light}
+                        color={color}
+                        size={size}
+                    >
+                        {label}
+                    </Button>
+                    {/* startIcon */}
+                    <Button
+                        onClick={action("clicked")}
+                        disabled={disabled}
+                        kind={kind}
+                        light={light}
+                        color={color}
+                        size={size}
+                        startIcon={paperPlaneIcon}
+                    >
+                        {label}
+                    </Button>
+                    {/* endIcon */}
+                    <Button
+                        onClick={action("clicked")}
+                        disabled={disabled}
+                        kind={kind}
+                        light={light}
+                        color={color}
+                        size={size}
+                        endIcon={paperPlaneIcon}
+                    >
+                        {label}
+                    </Button>
+                </React.Fragment>
+            ))}
+        </View>
+    );
+}
+
+const KindVariants = ({light}: {light: boolean}) => {
+    return (
+        <>
+            {sizes.map((size) => (
+                <>
+                    {colors.map((color) => (
+                        <VariantsGroup
+                            size={size}
+                            color={color}
+                            light={light}
+                        />
+                    ))}
+                    <VariantsGroup size={size} disabled={true} light={light} />
+                </>
+            ))}
+        </>
+    );
+};
+
+const VariantsByTheme = ({themeName = "Default"}: {themeName?: string}) => (
+    <View style={{marginBottom: spacing.large_24}}>
+        <HeadingLarge>{themeName} theme</HeadingLarge>
+        <KindVariants light={false} />
+        <KindVariants light={true} />
+    </View>
+);
+
+const AllVariants = () => (
+    <>
+        <VariantsByTheme />
+        <ThemeSwitcherContext.Provider value="khanmigo">
+            <VariantsByTheme themeName="Khanmigo" />
+        </ThemeSwitcherContext.Provider>
+    </>
+);
+
+export const Default: StoryComponentType = {
+    render: AllVariants,
+};
+
+export const Hover: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {hover: true}},
+};
+
+export const Focus: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {focusVisible: true}},
+};
+
+export const HoverFocus: StoryComponentType = {
+    name: "Hover + Focus",
+    render: AllVariants,
+    parameters: {pseudo: {hover: true, focusVisible: true}},
+};
+
+export const Active: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {active: true}},
+};
+
+const styles = StyleSheet.create({
+    darkDefault: {
+        backgroundColor: color.darkBlue,
+    },
+    darkKhanmigo: {
+        backgroundColor: color.eggplant,
+    },
+    variants: {
+        justifyContent: "flex-start",
+        padding: spacing.medium_16,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xLarge_32,
+    },
+    label: {
+        minWidth: 150,
+    },
+    inverseLabel: {
+        color: semanticColor.text.inverse,
+    },
+});
diff --git a/__docs__/wonder-blocks-button/button.stories.tsx b/__docs__/wonder-blocks-button/button.stories.tsx
index 433dc8e6fa..91aed75f29 100644
--- a/__docs__/wonder-blocks-button/button.stories.tsx
+++ b/__docs__/wonder-blocks-button/button.stories.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
-import {expect, userEvent, within} from "@storybook/test";
 
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 
@@ -27,26 +26,6 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import ButtonArgTypes from "./button.argtypes";
 import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
 
-/**
- * Reusable button component.
- *
- * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
- * `ButtonCore`. `ClickableBehavior` handles interactions and state changes.
- * `ButtonCore` is a stateless component which displays the different states the
- * `Button` can take.
- *
- * ### Usage
- *
- * ```tsx
- * import Button from "@khanacademy/wonder-blocks-button";
- *
- * <Button
- *     onClick={(e) => console.log("Hello, world!")}
- * >
- *     Hello, world!
- * </Button>
- * ```
- */
 export default {
     title: "Packages / Button",
     component: Button,
@@ -80,61 +59,14 @@ export const Default: StoryComponentType = {
         },
     },
     parameters: {
-        design: {
-            type: "figma",
-            url: "https://www.figma.com/file/VbVu3h2BpBhH80niq101MHHE/%F0%9F%92%A0-Main-Components?type=design&node-id=389-0&mode=design",
-        },
         chromatic: {
-            // We already have screenshots of other stories that cover more of the button states
+            // We already have screenshots of other stories that cover more of
+            // the button states
             disableSnapshot: true,
         },
     },
 };
 
-export const Tertiary: StoryComponentType = {
-    args: {
-        onClick: () => {},
-        kind: "tertiary",
-        testId: "test-button",
-        children: "Hello, world!",
-    },
-    play: async ({canvasElement}) => {
-        const canvas = within(canvasElement);
-
-        // Get HTML elements
-        const button = canvas.getByRole("button");
-        const innerLabel = canvas.getByTestId("test-button-inner-label");
-        const computedStyleLabel = getComputedStyle(innerLabel, ":after");
-
-        // Resting style
-        await expect(button).toHaveStyle(`color: ${color.blue}`);
-        await expect(button).toHaveTextContent("Hello, world!");
-
-        // Hover style
-        await userEvent.hover(button);
-        await expect(computedStyleLabel.height).toBe("2px");
-        await expect(computedStyleLabel.color).toBe("rgb(24, 101, 242)");
-
-        // TODO(WB-1808, somewhatabstract): This isn't working. I got it passing
-        // locally by calling `button.focus()` as well, but it was super flaky
-        // and never passed first time.
-        // Focus style
-        // const computedStyleButton = getComputedStyle(button);
-        // await fireEvent.focus(button);
-        // await expect(computedStyleButton.outlineColor).toBe(
-        //     "rgb(24, 101, 242)",
-        // );
-        // await expect(computedStyleButton.outlineWidth).toBe("2px");
-
-        // // Active (mouse down) style
-        // // eslint-disable-next-line testing-library/prefer-user-event
-        // await fireEvent.mouseDown(button);
-        // await expect(innerLabel).toHaveStyle("color: rgb(27, 80, 179)");
-        // await expect(computedStyleLabel.color).toBe("rgb(27, 80, 179)");
-        // await expect(computedStyleLabel.height).toBe("2px");
-    },
-};
-
 export const styles: StyleDeclaration = StyleSheet.create({
     row: {
         flexDirection: "row",
@@ -203,6 +135,11 @@ Variants.parameters = {
             story: "There are three kinds of buttons: `primary` (default), `secondary`, and `tertiary`.",
         },
     },
+    chromatic: {
+        // We already have screenshots of other stories that cover more of
+        // the button states
+        disableSnapshot: true,
+    },
 };
 
 export const WithColor: StoryComponentType = {
@@ -324,6 +261,11 @@ Dark.parameters = {
             story: "Buttons on a `darkBlue` background should set `light` to `true`.",
         },
     },
+    chromatic: {
+        // We already have screenshots of other stories that cover more of
+        // the button states
+        disableSnapshot: true,
+    },
 };
 
 const kinds = ["primary", "secondary", "tertiary"] as const;
@@ -539,6 +481,11 @@ Size.parameters = {
             story: "Buttons have a size that's either `medium` (default), `small`, or `large`.",
         },
     },
+    chromatic: {
+        // We already have screenshots of other stories that cover more of
+        // the button states
+        disableSnapshot: true,
+    },
 };
 
 export const Spinner: StoryComponentType = () => (
@@ -789,4 +736,11 @@ export const KhanmigoTheme: StoryComponentType = {
             </ThemeSwitcherContext.Provider>
         );
     },
+    parameters: {
+        chromatic: {
+            // We already have screenshots of other stories that cover more of
+            // the button states
+            disableSnapshot: true,
+        },
+    },
 };
diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index acc184a267..2e288725ef 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -376,7 +376,7 @@ export const _generateStyles = (
         };
 
         const activePressedStyling = {
-            backgroundColor: activeColor,
+            background: light ? fadedColor : activeColor,
             outlineColor: light ? fadedColor : activeColor,
         };
 

From ebd556210df3f510a6ee684632ef7e431e5414c4 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Thu, 19 Dec 2024 17:02:45 -0500
Subject: [PATCH 5/9] Delete custom snapshots

---
 .../custom-snapshot.test.tsx.snap             | 3325 -----------------
 .../src/__tests__/custom-snapshot.test.tsx    |  110 -
 2 files changed, 3435 deletions(-)
 delete mode 100644 packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap
 delete mode 100644 packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx

diff --git a/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap b/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap
deleted file mode 100644
index 66e0d7654b..0000000000
--- a/packages/wonder-blocks-button/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap
+++ /dev/null
@@ -1,3325 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Button <Link tabIndex={-1}> 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button <Link tabIndex={0}> 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`Button <Link tabIndex={1}> 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255);"
-    tabindex="1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:large light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgba(33, 36, 44, 0.32); color: rgba(255, 255, 255, 0.64);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:large light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:large light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:large light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(27, 80, 179); color: rgb(181, 206, 251); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1b50b3;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:large light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(24, 101, 242);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:large light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:large light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:large light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(27, 80, 179); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #b5cefb;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:medium light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgba(33, 36, 44, 0.32); color: rgba(255, 255, 255, 0.64);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:medium light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:medium light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:medium light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(27, 80, 179); color: rgb(181, 206, 251); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1b50b3;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:medium light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(24, 101, 242);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:medium light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:medium light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:medium light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(27, 80, 179); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #b5cefb;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:small light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgba(33, 36, 44, 0.32); color: rgba(255, 255, 255, 0.64);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:small light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:small light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(24, 101, 242); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1865f2;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:small light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(27, 80, 179); color: rgb(181, 206, 251); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #1b50b3;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:small light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(24, 101, 242);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:small light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:small light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:default size:small light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(27, 80, 179); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #b5cefb;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:large light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgba(33, 36, 44, 0.32); color: rgba(255, 255, 255, 0.64);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:large light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(217, 41, 22); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #d92916;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:large light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(217, 41, 22); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #d92916;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:large light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(158, 39, 29); color: rgb(243, 187, 180); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #9e271d;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:large light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(217, 41, 22);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:large light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:large light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:large light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(158, 39, 29); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #f3bbb4;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:medium light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgba(33, 36, 44, 0.32); color: rgba(255, 255, 255, 0.64);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:medium light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(217, 41, 22); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #d92916;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:medium light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(217, 41, 22); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #d92916;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:medium light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(158, 39, 29); color: rgb(243, 187, 180); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #9e271d;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:medium light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(217, 41, 22);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:medium light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:medium light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:medium light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(158, 39, 29); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #f3bbb4;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:small light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgba(33, 36, 44, 0.32); color: rgba(255, 255, 255, 0.64);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:small light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(217, 41, 22); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #d92916;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:small light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(217, 41, 22); color: rgb(255, 255, 255); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #d92916;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:small light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(158, 39, 29); color: rgb(243, 187, 180); box-shadow: 0 0 0 1px #ffffff, 0 0 0 3px #9e271d;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:small light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(217, 41, 22);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:small light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:small light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #ffffff;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary color:destructive size:small light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(158, 39, 29); box-shadow: 0 0 0 1px #0b2149, 0 0 0 3px #f3bbb4;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary size:medium spinner:true 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label="loading"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgba(33, 36, 44, 0.32); color: rgba(255, 255, 255, 0.64);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; visibility: hidden;"
-    >
-      Click me
-    </span>
-    <div
-      class=""
-      style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: absolute; z-index: 0; min-height: 0; min-width: 0; justify-content: center;"
-    >
-      <svg
-        data-testid="button-spinner"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class=""
-          d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
-          fill-rule="nonzero"
-          style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: #ffffff;"
-        />
-      </svg>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:primary size:small spinner:true 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label="loading"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgba(33, 36, 44, 0.32); color: rgba(255, 255, 255, 0.64);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; visibility: hidden;"
-    >
-      Click me
-    </span>
-    <div
-      class=""
-      style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: absolute; z-index: 0; min-height: 0; min-width: 0; justify-content: center;"
-    >
-      <svg
-        data-testid="button-spinner"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class=""
-          d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
-          fill-rule="nonzero"
-          style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: #ffffff;"
-        />
-      </svg>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:large light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32); border-color: rgba(33,36,44,0.50); border-style: solid; border-width: 1px; outline-color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:large light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(24, 101, 242); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:large light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(24, 101, 242); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:large light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(27, 80, 179); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(27, 80, 179); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:large light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(255, 255, 255, 0.5); border-color: rgba(255,255,255,0.50); border-style: solid; border-width: 1px; outline-color: rgb(181, 206, 251);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:large light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:large light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:large light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(27, 80, 179); color: rgb(181, 206, 251); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(181, 206, 251); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:medium light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32); border-color: rgba(33,36,44,0.50); border-style: solid; border-width: 1px; outline-color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:medium light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(24, 101, 242); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:medium light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(24, 101, 242); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:medium light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(27, 80, 179); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(27, 80, 179); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:medium light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(255, 255, 255, 0.5); border-color: rgba(255,255,255,0.50); border-style: solid; border-width: 1px; outline-color: rgb(181, 206, 251);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:medium light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:medium light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:medium light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(27, 80, 179); color: rgb(181, 206, 251); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(181, 206, 251); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:small light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32); border-color: rgba(33,36,44,0.50); border-style: solid; border-width: 1px; outline-color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:small light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(24, 101, 242); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:small light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(24, 101, 242); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(24, 101, 242); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:small light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(181, 206, 251); color: rgb(27, 80, 179); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(27, 80, 179); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:small light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(255, 255, 255, 0.5); border-color: rgba(255,255,255,0.50); border-style: solid; border-width: 1px; outline-color: rgb(181, 206, 251);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:small light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:small light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:default size:small light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(27, 80, 179); color: rgb(181, 206, 251); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(181, 206, 251); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:large light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32); border-color: rgba(33,36,44,0.50); border-style: solid; border-width: 1px; outline-color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:large light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(217, 41, 22); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:large light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(217, 41, 22); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:large light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(158, 39, 29); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(158, 39, 29); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:large light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(255, 255, 255, 0.5); border-color: rgba(255,255,255,0.50); border-style: solid; border-width: 1px; outline-color: rgb(243, 187, 180);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:large light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:large light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:large light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 32px 0px 32px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(158, 39, 29); color: rgb(243, 187, 180); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(243, 187, 180); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:medium light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32); border-color: rgba(33,36,44,0.50); border-style: solid; border-width: 1px; outline-color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:medium light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(217, 41, 22); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:medium light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(217, 41, 22); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:medium light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(158, 39, 29); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(158, 39, 29); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:medium light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(255, 255, 255, 0.5); border-color: rgba(255,255,255,0.50); border-style: solid; border-width: 1px; outline-color: rgb(243, 187, 180);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:medium light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:medium light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:medium light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(158, 39, 29); color: rgb(243, 187, 180); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(243, 187, 180); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:small light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32); border-color: rgba(33,36,44,0.50); border-style: solid; border-width: 1px; outline-color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:small light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(217, 41, 22); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:small light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(255, 255, 255); color: rgb(217, 41, 22); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(217, 41, 22); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:small light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(243, 187, 180); color: rgb(158, 39, 29); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(158, 39, 29); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:small light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(255, 255, 255, 0.5); border-color: rgba(255,255,255,0.50); border-style: solid; border-width: 1px; outline-color: rgb(243, 187, 180);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:small light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:small light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(255, 255, 255); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary color:destructive size:small light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: rgb(158, 39, 29); color: rgb(243, 187, 180); border-color: transparent; border-style: solid; border-width: 1px; outline-color: rgb(243, 187, 180); outline-style: solid; outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary size:medium spinner:true 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label="loading"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32); border-color: rgba(33,36,44,0.50); border-style: solid; border-width: 1px; outline-color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; visibility: hidden;"
-    >
-      Click me
-    </span>
-    <div
-      class=""
-      style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: absolute; z-index: 0; min-height: 0; min-width: 0; justify-content: center;"
-    >
-      <svg
-        data-testid="button-spinner"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class=""
-          d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
-          fill-rule="nonzero"
-          style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.50);"
-        />
-      </svg>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:secondary size:small spinner:true 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label="loading"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 16px 0px 16px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32); border-color: rgba(33,36,44,0.50); border-style: solid; border-width: 1px; outline-color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; visibility: hidden;"
-    >
-      Click me
-    </span>
-    <div
-      class=""
-      style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: absolute; z-index: 0; min-height: 0; min-width: 0; justify-content: center;"
-    >
-      <svg
-        data-testid="button-spinner"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class=""
-          d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
-          fill-rule="nonzero"
-          style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.50);"
-        />
-      </svg>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:large light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:large light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242); outline-style: solid; outline-color: rgb(24, 101, 242); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:large light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:large light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(27, 80, 179);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:large light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(181, 206, 251);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:large light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); outline-style: solid; outline-color: rgb(255, 255, 255); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:large light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:large light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(181, 206, 251);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:medium light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:medium light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242); outline-style: solid; outline-color: rgb(24, 101, 242); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:medium light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:medium light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(27, 80, 179);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:medium light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(181, 206, 251);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:medium light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); outline-style: solid; outline-color: rgb(255, 255, 255); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:medium light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:medium light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(181, 206, 251);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:small light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:small light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242); outline-style: solid; outline-color: rgb(24, 101, 242); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:small light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:small light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(24, 101, 242);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(27, 80, 179);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:small light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(181, 206, 251);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:small light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); outline-style: solid; outline-color: rgb(255, 255, 255); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:small light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:default size:small light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(181, 206, 251);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:large light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:large light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22); outline-style: solid; outline-color: rgb(217, 41, 22); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:large light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:large light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(158, 39, 29);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:large light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(243, 187, 180);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:large light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); outline-style: solid; outline-color: rgb(255, 255, 255); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:large light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:large light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0px 0px 0px 0px; border-radius: 6px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 18px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(243, 187, 180);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:medium light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:medium light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22); outline-style: solid; outline-color: rgb(217, 41, 22); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:medium light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:medium light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(158, 39, 29);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:medium light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(243, 187, 180);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:medium light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); outline-style: solid; outline-color: rgb(255, 255, 255); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:medium light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:medium light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(243, 187, 180);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:small light:false disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:small light:false focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22); outline-style: solid; outline-color: rgb(217, 41, 22); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:small light:false hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:small light:false pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(217, 41, 22);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(158, 39, 29);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:small light:true disabled 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(243, 187, 180);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:small light:true focused 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255); outline-style: solid; outline-color: rgb(255, 255, 255); outline-width: 2px;"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:small light:true hovered 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative;"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary color:destructive size:small light:true pressed 1`] = `
-<div>
-  <button
-    aria-disabled="false"
-    aria-label=""
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: pointer; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgb(255, 255, 255);"
-    tabindex="0"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; position: relative; color: rgb(243, 187, 180);"
-    >
-      Click me
-    </span>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary size:medium spinner:true 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label="loading"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 16px; line-height: 20px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; visibility: hidden; position: relative;"
-    >
-      Click me
-    </span>
-    <div
-      class=""
-      style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: absolute; z-index: 0; min-height: 0; min-width: 0; justify-content: center;"
-    >
-      <svg
-        data-testid="button-spinner"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class=""
-          d="M10.598.943c-.093-.449-.362-.748-.732-.875a1.314 1.314 0 0 0-.723-.033C3.83 1.417 0 6.317 0 11.864 0 18.538 5.398 24 12 24c6.598 0 12-5.471 12-12.16a1.333 1.333 0 0 0-.154-.548c-.193-.368-.544-.606-1.023-.606-.472 0-.825.229-1.035.585-.117.2-.169.39-.189.582-.124 5.472-4.294 9.73-9.599 9.73-5.349 0-9.599-4.3-9.599-9.72 0-4.46 3.036-8.299 7.28-9.444.127-.036.291-.107.458-.232.373-.28.57-.711.46-1.244z"
-          fill-rule="nonzero"
-          style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.50);"
-        />
-      </svg>
-    </div>
-  </button>
-</div>
-`;
-
-exports[`ButtonCore kind:tertiary size:small spinner:true 1`] = `
-<div>
-  <button
-    aria-disabled="true"
-    aria-label="loading"
-    class=""
-    role="button"
-    style="margin: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0px 0px 0px 0px; border-radius: 4px; cursor: default; outline: none; text-decoration: none; box-sizing: border-box; user-select: none; background: none; color: rgba(33, 36, 44, 0.32);"
-    tabindex="-1"
-    type="button"
-  >
-    <span
-      class=""
-      style="display: inline-block; font-family: Lato, "Noto Sans", sans-serif; font-weight: 700; font-size: 14px; line-height: 18px; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; visibility: hidden; position: relative;"
-    >
-      Click me
-    </span>
-    <div
-      class=""
-      style="align-items: stretch; border-width: 0px; border-style: solid; box-sizing: border-box; display: flex; flex-direction: column; margin: 0px; padding: 0px; position: absolute; z-index: 0; min-height: 0; min-width: 0; justify-content: center;"
-    >
-      <svg
-        data-testid="button-spinner"
-        height="16"
-        viewBox="0 0 16 16"
-        width="16"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          class=""
-          d="M7.237.741C7.165.393 6.95.154 6.656.053A1.01 1.01 0 0 0 6.18.01c-.053.009-.053.009-.087.017C2.553.949 0 4.214 0 7.91 0 12.36 3.598 16 8 16c4.4 0 8-3.647 8-8.112a1.02 1.02 0 0 0-.118-.423.877.877 0 0 0-.808-.48.909.909 0 0 0-.81.46c-.09.151-.13.296-.146.455-.08 3.493-2.737 6.207-6.118 6.207-3.41 0-6.118-2.74-6.118-6.196 0-2.843 1.936-5.291 4.644-6.022.1-.028.224-.082.352-.177a.928.928 0 0 0 .36-.97z"
-          fill-rule="nonzero"
-          style="transform-origin: 50% 50%; animation-name: [object Object]; animation-duration: 1.1s; animation-iteration-count: infinite; animation-timing-function: linear; fill: rgba(33,36,44,0.50);"
-        />
-      </svg>
-    </div>
-  </button>
-</div>
-`;
diff --git a/packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx b/packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx
deleted file mode 100644
index fd8294e11a..0000000000
--- a/packages/wonder-blocks-button/src/__tests__/custom-snapshot.test.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as React from "react";
-import {render} from "@testing-library/react";
-import ButtonCore from "../components/button-core";
-import Button from "../components/button";
-
-const defaultHandlers = {
-    onClick: () => void 0,
-    onMouseEnter: () => void 0,
-    onMouseLeave: () => void 0,
-    onMouseDown: () => void 0,
-    onMouseUp: () => void 0,
-    onTouchStart: () => void 0,
-    onTouchEnd: () => void 0,
-    onTouchCancel: () => void 0,
-    onKeyDown: () => void 0,
-    onKeyUp: () => void 0,
-    onFocus: () => void 0,
-    onBlur: () => void 0,
-} as const;
-
-describe("Button", () => {
-    test.each`
-        tabIndex
-        ${-1}
-        ${0}
-        ${1}
-    `("<Link tabIndex={$tabIndex}>", ({tabIndex}: any) => {
-        const {container} = render(
-            <Button tabIndex={tabIndex}>Click me</Button>,
-        );
-        expect(container).toMatchSnapshot();
-    });
-});
-
-describe("ButtonCore", () => {
-    for (const kind of ["primary", "secondary", "tertiary"] as const) {
-        for (const color of ["default", "destructive"] as const) {
-            for (const size of ["medium", "small", "large"] as const) {
-                for (const light of [true, false]) {
-                    for (const state of [
-                        "disabled",
-                        "focused",
-                        "hovered",
-                        "pressed",
-                    ]) {
-                        const disabled = state === "disabled";
-                        const stateProps = {
-                            disabled,
-                            focused: state === "focused",
-                            hovered: state === "hovered",
-                            pressed: state === "pressed",
-                            waiting: false,
-                        } as const;
-                        test(`kind:${kind} color:${color} size:${size} light:${String(
-                            light,
-                        )} ${state}`, () => {
-                            const {container} = render(
-                                <ButtonCore
-                                    kind={kind}
-                                    size={size}
-                                    color={color}
-                                    light={light}
-                                    tabIndex={disabled ? -1 : 0}
-                                    spinner={false}
-                                    aria-label={""}
-                                    {...stateProps}
-                                    {...defaultHandlers}
-                                >
-                                    Click me
-                                </ButtonCore>,
-                            );
-                            expect(container).toMatchSnapshot();
-                        });
-                    }
-                }
-            }
-        }
-    }
-    for (const kind of ["primary", "secondary", "tertiary"] as const) {
-        for (const size of ["medium", "small"] as const) {
-            test(`kind:${kind} size:${size} spinner:true`, () => {
-                const spinner = true;
-                const disabled = spinner;
-                const stateProps = {
-                    disabled,
-                    focused: false,
-                    hovered: false,
-                    pressed: false,
-                    waiting: false,
-                } as const;
-                const {container} = render(
-                    <ButtonCore
-                        kind={kind}
-                        size={size}
-                        color="default"
-                        light={false}
-                        tabIndex={disabled ? -1 : 0}
-                        spinner={spinner}
-                        aria-label={"loading"}
-                        {...stateProps}
-                        {...defaultHandlers}
-                    >
-                        Click me
-                    </ButtonCore>,
-                );
-                expect(container).toMatchSnapshot();
-            });
-        }
-    }
-});

From df9188e0b065bc52b579f9529661ead6097cd5e3 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Thu, 19 Dec 2024 17:13:28 -0500
Subject: [PATCH 6/9] Use wider viewport

---
 __docs__/wonder-blocks-button/button-variants.stories.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/__docs__/wonder-blocks-button/button-variants.stories.tsx b/__docs__/wonder-blocks-button/button-variants.stories.tsx
index 05084a42ef..cea281d5c8 100644
--- a/__docs__/wonder-blocks-button/button-variants.stories.tsx
+++ b/__docs__/wonder-blocks-button/button-variants.stories.tsx
@@ -20,6 +20,12 @@ export default {
         docs: {
             autodocs: false,
         },
+        chromatic: {
+            // NOTE: This is required to prevent Chromatic from cutting off the
+            // dark background in screenshots (accounts for all the space taken
+            // by the variants).
+            viewports: [1700],
+        },
     },
 } as Meta;
 

From 598be12d01913bcb83a999ff4d38adbbdfe09476 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Thu, 19 Dec 2024 17:27:04 -0500
Subject: [PATCH 7/9] Fix text-decoration-thickness in Safari

---
 .../wonder-blocks-button/src/components/button-core.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index 2e288725ef..1c1d13d4a4 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -486,7 +486,8 @@ export const _generateStyles = (
         };
         const activePressedStyling = {
             color: light ? fadedColor : activeColor,
-            textDecoration: `underline ${theme.size.underline.active}px`,
+            textDecoration: "underline",
+            textDecorationThickness: theme.size.underline.active,
         };
 
         newStyles = {
@@ -497,7 +498,8 @@ export const _generateStyles = (
                 paddingRight: 0,
                 [":hover:not([aria-disabled=true])" as any]: {
                     textUnderlineOffset: theme.font.offset.default,
-                    textDecoration: `underline ${theme.size.underline.hover}px`,
+                    textDecoration: "underline",
+                    textDecorationThickness: theme.size.underline.hover,
                 },
                 [":focus-visible:not([aria-disabled=true])" as any]:
                     focusStyling,

From 3aee270739dc1c971c0e8f70a43abcfaebca24c0 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Fri, 20 Dec 2024 15:41:52 -0500
Subject: [PATCH 8/9] Move some values to theme tokens

---
 packages/wonder-blocks-button/src/components/button-core.tsx | 4 ++--
 packages/wonder-blocks-button/src/themes/default.ts          | 5 ++++-
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index 1c1d13d4a4..594ca2413a 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -370,9 +370,9 @@ export const _generateStyles = (
     if (kind === "primary") {
         const focusStyling = {
             outlineColor: light ? theme.color.bg.primary.default : color,
-            outlineOffset: 2,
+            outlineOffset: theme.border.offset.primary,
             outlineStyle: "solid",
-            outlineWidth: 2,
+            outlineWidth: theme.border.width.focused,
         };
 
         const activePressedStyling = {
diff --git a/packages/wonder-blocks-button/src/themes/default.ts b/packages/wonder-blocks-button/src/themes/default.ts
index 214aa0bbcb..95a79a41cc 100644
--- a/packages/wonder-blocks-button/src/themes/default.ts
+++ b/packages/wonder-blocks-button/src/themes/default.ts
@@ -103,11 +103,14 @@ const theme = {
         width: {
             // secondary (resting)
             secondary: tokens.border.width.hairline,
-            // secondary (resting, focus, active), tertiary (focus)
+            // primary (focus), secondary (focus, active), tertiary (focus)
             focused: tokens.border.width.thin,
             // secondary (disabled)
             disabled: tokens.border.width.thin,
         },
+        offset: {
+            primary: tokens.spacing.xxxxSmall_2,
+        },
         radius: {
             // default
             default: tokens.border.radius.medium_4,

From 25932f0a52c9194185128197f8194a4cb3496b32 Mon Sep 17 00:00:00 2001
From: Juan Andrade <juan@khanacademy.org>
Date: Wed, 8 Jan 2025 17:26:19 -0500
Subject: [PATCH 9/9] Include underline offset for active state to prevent
 story issue with the All Variants example

---
 packages/wonder-blocks-button/src/components/button-core.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/wonder-blocks-button/src/components/button-core.tsx b/packages/wonder-blocks-button/src/components/button-core.tsx
index 594ca2413a..af7900bbe9 100644
--- a/packages/wonder-blocks-button/src/components/button-core.tsx
+++ b/packages/wonder-blocks-button/src/components/button-core.tsx
@@ -488,6 +488,7 @@ export const _generateStyles = (
             color: light ? fadedColor : activeColor,
             textDecoration: "underline",
             textDecorationThickness: theme.size.underline.active,
+            textUnderlineOffset: theme.font.offset.default,
         };
 
         newStyles = {