@jeromefitz/design-system 3.2.0-canary.4 → 3.2.2-canary.1

package/{components/RadioCard/RadioCard.styles.d.ts → ButtonDemo-888c18f9.d.ts}

@@ -1,236 +1,260 @@
-import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
 import * as _stitches_react_types_css_util from '@stitches/react/types/css-util';
 import * as _stitches_react_types_config from '@stitches/react/types/config';
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as _stitches_react_types_styled_component from '@stitches/react/types/styled-component';
+import * as React$1 from 'react';
 
-declare const RadioCardGroup: _stitches_react_types_styled_component.StyledComponent<React.ForwardRefExoticComponent<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>>, {}, {
-    bp1: "(min-width: 520px)";
-    bp2: "(min-width: 900px)";
-    bp3: "(min-width: 1200px)";
-    bp4: "(min-width: 1800px)";
-    motion: "(prefers-reduced-motion)";
-    hover: "(any-hover: hover)";
-    dark: "(prefers-color-scheme: dark)";
-    light: "(prefers-color-scheme: light)";
+declare const Button: _stitches_react_types_styled_component.StyledComponent<"button", _stitches_react_types_styled_component.StyledComponentProps<[{
+    all: string;
+    alignItems: string;
+    boxSizing: string;
+    userSelect: string;
+    '&::before': {
+        boxSizing: string;
+    };
+    '&::after': {
+        boxSizing: string;
+    };
+    display: string;
+    flexShrink: number;
+    justifyContent: string;
+    lineHeight: string;
+    WebkitTapHighlightColor: string;
+    height: string;
+    px: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: number;
+    fontVariantNumeric: string;
+    '&:disabled': {
+        backgroundColor: string;
+        boxShadow: string;
+        color: string;
+        pointerEvents: string;
+    };
+    variants: {
+        size: {
+            '1': {
+                borderRadius: string;
+                height: string;
+                px: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            '2': {
+                borderRadius: string;
+                height: string;
+                px: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+            '3': {
+                borderRadius: string;
+                height: string;
+                px: string;
+                fontSize: string;
+                lineHeight: string;
+            };
+        };
+        variant: {
+            gray: {
+                backgroundColor: string;
+                boxShadow: string;
+                color: string;
+                '@hover': {
+                    '&:hover': {
+                        boxShadow: string;
+                    };
+                };
+                '&:active': {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+            };
+            transparentWhite: {
+                backgroundColor: string;
+                color: string;
+                '@hover': {
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+            };
+            transparentBlack: {
+                backgroundColor: string;
+                color: string;
+                '@hover': {
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+            };
+            brand: {
+                backgroundColor: string;
+                boxShadow: string;
+                color: string;
+                '@hover': {
+                    '&:hover': {
+                        boxShadow: string;
+                    };
+                };
+                '&:active': {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+            };
+        };
+        state: {
+            active: {
+                backgroundColor: string;
+                boxShadow: string;
+                color: string;
+                '@hover': {
+                    '&:hover': {
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+            };
+            waiting: {
+                backgroundColor: string;
+                boxShadow: string;
+                color: string;
+                pointerEvents: string;
+                '@hover': {
+                    '&:hover': {
+                        backgroundColor: string;
+                        boxShadow: string;
+                    };
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+            };
+        };
+        ghost: {
+            true: {
+                backgroundColor: string;
+                boxShadow: string;
+            };
+        };
+    };
+    compoundVariants: ({
+        variant: string;
+        ghost: string;
+        css: {
+            backgroundColor: string;
+            color: string;
+            '@hover': {
+                '&:hover': {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+            };
+            '&:active': {
+                backgroundColor: string;
+            };
+            '&:focus': {
+                boxShadow: string;
+            };
+            '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                backgroundColor: string;
+                boxShadow: string;
+            };
+        };
+    } | {
+        variant: string;
+        ghost: string;
+        css: {
+            backgroundColor: string;
+            '@hover': {
+                '&:hover': {
+                    backgroundColor: string;
+                    boxShadow: string;
+                };
+            };
+            '&:active': {
+                backgroundColor: string;
+            };
+            '&:focus': {
+                boxShadow: string;
+            };
+            '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                backgroundColor: string;
+                boxShadow: string;
+            };
+            color?: undefined;
+        };
+    })[];
+    defaultVariants: {
+        size: "1";
+        variant: "gray";
+    };
+}]>, {
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
 }, _stitches_react_types_css_util.CSS<{
-    bp1: "(min-width: 520px)";
-    bp2: "(min-width: 900px)";
-    bp3: "(min-width: 1200px)";
-    bp4: "(min-width: 1800px)";
-    motion: "(prefers-reduced-motion)";
-    hover: "(any-hover: hover)";
-    dark: "(prefers-color-scheme: dark)";
-    light: "(prefers-color-scheme: light)";
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
 }, {
-    colors: {
-        hiContrast: string;
-        loContrast: string;
-        canvas: string;
-        gradient: string;
-        panel: string;
-        transparentPanel: string;
-        shadowLight: string;
-        shadowDark: string;
-        whiteA1: string;
-        whiteA2: string;
-        whiteA3: string;
-        whiteA4: string;
-        whiteA5: string;
-        whiteA6: string;
-        whiteA7: string;
-        whiteA8: string;
-        whiteA9: string;
-        whiteA10: string;
-        whiteA11: string;
-        whiteA12: string;
-        violetA1: string;
-        violetA2: string;
-        violetA3: string;
-        violetA4: string;
-        violetA5: string;
-        violetA6: string;
-        violetA7: string;
-        violetA8: string;
-        violetA9: string;
-        violetA10: string;
-        violetA11: string;
-        violetA12: string;
-        violet1: string;
-        violet2: string;
-        violet3: string;
-        violet4: string;
-        violet5: string;
-        violet6: string;
-        violet7: string;
-        violet8: string;
-        violet9: string;
-        violet10: string;
-        violet11: string;
-        violet12: string;
-        slateA1: string;
-        slateA2: string;
-        slateA3: string;
-        slateA4: string;
-        slateA5: string;
-        slateA6: string;
-        slateA7: string;
-        slateA8: string;
-        slateA9: string;
-        slateA10: string;
-        slateA11: string;
-        slateA12: string;
-        slate1: string;
-        slate2: string;
-        slate3: string;
-        slate4: string;
-        slate5: string;
-        slate6: string;
-        slate7: string;
-        slate8: string;
-        slate9: string;
-        slate10: string;
-        slate11: string;
-        slate12: string;
-        redA1: string;
-        redA2: string;
-        redA3: string;
-        redA4: string;
-        redA5: string;
-        redA6: string;
-        redA7: string;
-        redA8: string;
-        redA9: string;
-        redA10: string;
-        redA11: string;
-        redA12: string;
-        red1: string;
-        red2: string;
-        red3: string;
-        red4: string;
-        red5: string;
-        red6: string;
-        red7: string;
-        red8: string;
-        red9: string;
-        red10: string;
-        red11: string;
-        red12: string;
-        orangeA1: string;
-        orangeA2: string;
-        orangeA3: string;
-        orangeA4: string;
-        orangeA5: string;
-        orangeA6: string;
-        orangeA7: string;
-        orangeA8: string;
-        orangeA9: string;
-        orangeA10: string;
-        orangeA11: string;
-        orangeA12: string;
-        orange1: string;
-        orange2: string;
-        orange3: string;
-        orange4: string;
-        orange5: string;
-        orange6: string;
-        orange7: string;
-        orange8: string;
-        orange9: string;
-        orange10: string;
-        orange11: string;
-        orange12: string;
-        greenA1: string;
-        greenA2: string;
-        greenA3: string;
-        greenA4: string;
-        greenA5: string;
-        greenA6: string;
-        greenA7: string;
-        greenA8: string;
-        greenA9: string;
-        greenA10: string;
-        greenA11: string;
-        greenA12: string;
-        green1: string;
-        green2: string;
-        green3: string;
-        green4: string;
-        green5: string;
-        green6: string;
-        green7: string;
-        green8: string;
-        green9: string;
-        green10: string;
-        green11: string;
-        green12: string;
-        grayA1: string;
-        grayA2: string;
-        grayA3: string;
-        grayA4: string;
-        grayA5: string;
-        grayA6: string;
-        grayA7: string;
-        grayA8: string;
-        grayA9: string;
-        grayA10: string;
-        grayA11: string;
-        grayA12: string;
-        gray1: string;
-        gray2: string;
-        gray3: string;
-        gray4: string;
-        gray5: string;
-        gray6: string;
-        gray7: string;
-        gray8: string;
-        gray9: string;
-        gray10: string;
-        gray11: string;
-        gray12: string;
-        blueA1: string;
-        blueA2: string;
-        blueA3: string;
-        blueA4: string;
-        blueA5: string;
-        blueA6: string;
-        blueA7: string;
-        blueA8: string;
-        blueA9: string;
-        blueA10: string;
-        blueA11: string;
-        blueA12: string;
-        blue1: string;
-        blue2: string;
-        blue3: string;
-        blue4: string;
-        blue5: string;
-        blue6: string;
-        blue7: string;
-        blue8: string;
-        blue9: string;
-        blue10: string;
-        blue11: string;
-        blue12: string;
-        blackA1: string;
-        blackA2: string;
-        blackA3: string;
-        blackA4: string;
-        blackA5: string;
-        blackA6: string;
-        blackA7: string;
-        blackA8: string;
-        blackA9: string;
-        blackA10: string;
-        blackA11: string;
-        blackA12: string;
-    };
+    borderWidths: unknown;
+    borderStyles: unknown;
+    colors: unknown;
     fonts: {
+        'fallback-mono': string;
+        'fallback-sans': string;
+        'fallback-serif': string;
         mono: string;
         sans: string;
         serif: string;
     };
-    space: {
+    fontSizes: {
         1: string;
         2: string;
         3: string;
@@ -241,7 +265,7 @@ declare const RadioCardGroup: _stitches_react_types_styled_component.StyledCompo
         8: string;
         9: string;
     };
-    sizes: {
+    fontWeights: {
         1: string;
         2: string;
         3: string;
@@ -252,7 +276,26 @@ declare const RadioCardGroup: _stitches_react_types_styled_component.StyledCompo
         8: string;
         9: string;
     };
-    fontSizes: {
+    letterSpacings: unknown;
+    lineHeights: unknown;
+    radii: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        pill: string;
+        round: string;
+    };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        toast: string;
+    };
+    sizes: {
+        0: string;
         1: string;
         2: string;
         3: string;
@@ -263,15 +306,27 @@ declare const RadioCardGroup: _stitches_react_types_styled_component.StyledCompo
         8: string;
         9: string;
     };
-    radii: {
+    space: {
+        0: string;
         1: string;
         2: string;
         3: string;
         4: string;
-        round: string;
-        pill: string;
-    };
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+    };
+    transitions: unknown;
     zIndices: {
+        0: string;
         1: string;
         2: string;
         3: string;
@@ -279,6 +334,9 @@ declare const RadioCardGroup: _stitches_react_types_styled_component.StyledCompo
         max: string;
         toast: string;
     };
+    foo: {
+        bar: string;
+    };
 }, _stitches_react_types_config.DefaultThemeMap, {
     p: (value: string | number | {
         readonly [$$ScaleValue]: "padding";
@@ -588,233 +646,179 @@ declare const RadioCardGroup: _stitches_react_types_styled_component.StyledCompo
         };
     };
 }>>;
-declare const StyledRadioButton: _stitches_react_types_styled_component.StyledComponent<"div", {}, {
-    bp1: "(min-width: 520px)";
-    bp2: "(min-width: 900px)";
-    bp3: "(min-width: 1200px)";
-    bp4: "(min-width: 1800px)";
-    motion: "(prefers-reduced-motion)";
-    hover: "(any-hover: hover)";
-    dark: "(prefers-color-scheme: dark)";
-    light: "(prefers-color-scheme: light)";
+
+declare const ButtonIcon: _stitches_react_types_styled_component.StyledComponent<"button", _stitches_react_types_styled_component.StyledComponentProps<[{
+    alignItems: string;
+    appearance: string;
+    borderWidth: string;
+    boxSizing: string;
+    display: string;
+    flexShrink: number;
+    fontFamily: string;
+    fontSize: string;
+    justifyContent: string;
+    lineHeight: string;
+    outline: string;
+    padding: string;
+    textDecoration: string;
+    userSelect: string;
+    WebkitTapHighlightColor: string;
+    color: string;
+    '&::before': {
+        boxSizing: string;
+    };
+    '&::after': {
+        boxSizing: string;
+    };
+    backgroundColor: string;
+    border: string;
+    '@hover': {
+        '&:hover': {
+            borderColor: string;
+        };
+    };
+    '&:active': {
+        backgroundColor: string;
+    };
+    '&:focus': {
+        borderColor: string;
+        boxShadow: string;
+    };
+    '&:disabled': {
+        pointerEvents: string;
+        backgroundColor: string;
+        color: string;
+    };
+    variants: {
+        cursor: {
+            arrow: {
+                cursor: string;
+            };
+            pointer: {
+                cursor: string;
+            };
+        };
+        size: {
+            '1': {
+                borderRadius: string;
+                height: string;
+                width: string;
+            };
+            '2': {
+                borderRadius: string;
+                height: string;
+                width: string;
+            };
+            '3': {
+                borderRadius: string;
+                height: string;
+                width: string;
+            };
+            '4': {
+                borderRadius: string;
+                height: string;
+                width: string;
+            };
+        };
+        variant: {
+            ghost: {
+                backgroundColor: string;
+                borderWidth: string;
+                '@hover': {
+                    '&:hover': {
+                        backgroundColor: string;
+                    };
+                };
+                '&:focus': {
+                    borderRadius: string;
+                    boxShadow: string;
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+                '&[data-radix-popover-trigger][data-state="open"], &[data-radix-dropdown-menu-trigger][data-state="open"]': {
+                    backgroundColor: string;
+                };
+            };
+            raised: {
+                boxShadow: string;
+                '@hover': {
+                    '&:hover': {
+                        boxShadow: string;
+                    };
+                };
+                '&:focus': {
+                    borderColor: string;
+                    boxShadow: string;
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+            };
+        };
+        state: {
+            active: {
+                backgroundColor: string;
+                boxShadow: string;
+                '@hover': {
+                    '&:hover': {
+                        boxShadow: string;
+                    };
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+            };
+            waiting: {
+                backgroundColor: string;
+                boxShadow: string;
+                '@hover': {
+                    '&:hover': {
+                        boxShadow: string;
+                    };
+                };
+                '&:active': {
+                    backgroundColor: string;
+                };
+            };
+        };
+    };
+    defaultVariants: {
+        cursor: "arrow";
+        size: "1";
+        variant: "ghost";
+    };
+}]>, {
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
 }, _stitches_react_types_css_util.CSS<{
-    bp1: "(min-width: 520px)";
-    bp2: "(min-width: 900px)";
-    bp3: "(min-width: 1200px)";
-    bp4: "(min-width: 1800px)";
-    motion: "(prefers-reduced-motion)";
-    hover: "(any-hover: hover)";
-    dark: "(prefers-color-scheme: dark)";
-    light: "(prefers-color-scheme: light)";
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
 }, {
-    colors: {
-        hiContrast: string;
-        loContrast: string;
-        canvas: string;
-        gradient: string;
-        panel: string;
-        transparentPanel: string;
-        shadowLight: string;
-        shadowDark: string;
-        whiteA1: string;
-        whiteA2: string;
-        whiteA3: string;
-        whiteA4: string;
-        whiteA5: string;
-        whiteA6: string;
-        whiteA7: string;
-        whiteA8: string;
-        whiteA9: string;
-        whiteA10: string;
-        whiteA11: string;
-        whiteA12: string;
-        violetA1: string;
-        violetA2: string;
-        violetA3: string;
-        violetA4: string;
-        violetA5: string;
-        violetA6: string;
-        violetA7: string;
-        violetA8: string;
-        violetA9: string;
-        violetA10: string;
-        violetA11: string;
-        violetA12: string;
-        violet1: string;
-        violet2: string;
-        violet3: string;
-        violet4: string;
-        violet5: string;
-        violet6: string;
-        violet7: string;
-        violet8: string;
-        violet9: string;
-        violet10: string;
-        violet11: string;
-        violet12: string;
-        slateA1: string;
-        slateA2: string;
-        slateA3: string;
-        slateA4: string;
-        slateA5: string;
-        slateA6: string;
-        slateA7: string;
-        slateA8: string;
-        slateA9: string;
-        slateA10: string;
-        slateA11: string;
-        slateA12: string;
-        slate1: string;
-        slate2: string;
-        slate3: string;
-        slate4: string;
-        slate5: string;
-        slate6: string;
-        slate7: string;
-        slate8: string;
-        slate9: string;
-        slate10: string;
-        slate11: string;
-        slate12: string;
-        redA1: string;
-        redA2: string;
-        redA3: string;
-        redA4: string;
-        redA5: string;
-        redA6: string;
-        redA7: string;
-        redA8: string;
-        redA9: string;
-        redA10: string;
-        redA11: string;
-        redA12: string;
-        red1: string;
-        red2: string;
-        red3: string;
-        red4: string;
-        red5: string;
-        red6: string;
-        red7: string;
-        red8: string;
-        red9: string;
-        red10: string;
-        red11: string;
-        red12: string;
-        orangeA1: string;
-        orangeA2: string;
-        orangeA3: string;
-        orangeA4: string;
-        orangeA5: string;
-        orangeA6: string;
-        orangeA7: string;
-        orangeA8: string;
-        orangeA9: string;
-        orangeA10: string;
-        orangeA11: string;
-        orangeA12: string;
-        orange1: string;
-        orange2: string;
-        orange3: string;
-        orange4: string;
-        orange5: string;
-        orange6: string;
-        orange7: string;
-        orange8: string;
-        orange9: string;
-        orange10: string;
-        orange11: string;
-        orange12: string;
-        greenA1: string;
-        greenA2: string;
-        greenA3: string;
-        greenA4: string;
-        greenA5: string;
-        greenA6: string;
-        greenA7: string;
-        greenA8: string;
-        greenA9: string;
-        greenA10: string;
-        greenA11: string;
-        greenA12: string;
-        green1: string;
-        green2: string;
-        green3: string;
-        green4: string;
-        green5: string;
-        green6: string;
-        green7: string;
-        green8: string;
-        green9: string;
-        green10: string;
-        green11: string;
-        green12: string;
-        grayA1: string;
-        grayA2: string;
-        grayA3: string;
-        grayA4: string;
-        grayA5: string;
-        grayA6: string;
-        grayA7: string;
-        grayA8: string;
-        grayA9: string;
-        grayA10: string;
-        grayA11: string;
-        grayA12: string;
-        gray1: string;
-        gray2: string;
-        gray3: string;
-        gray4: string;
-        gray5: string;
-        gray6: string;
-        gray7: string;
-        gray8: string;
-        gray9: string;
-        gray10: string;
-        gray11: string;
-        gray12: string;
-        blueA1: string;
-        blueA2: string;
-        blueA3: string;
-        blueA4: string;
-        blueA5: string;
-        blueA6: string;
-        blueA7: string;
-        blueA8: string;
-        blueA9: string;
-        blueA10: string;
-        blueA11: string;
-        blueA12: string;
-        blue1: string;
-        blue2: string;
-        blue3: string;
-        blue4: string;
-        blue5: string;
-        blue6: string;
-        blue7: string;
-        blue8: string;
-        blue9: string;
-        blue10: string;
-        blue11: string;
-        blue12: string;
-        blackA1: string;
-        blackA2: string;
-        blackA3: string;
-        blackA4: string;
-        blackA5: string;
-        blackA6: string;
-        blackA7: string;
-        blackA8: string;
-        blackA9: string;
-        blackA10: string;
-        blackA11: string;
-        blackA12: string;
-    };
+    borderWidths: unknown;
+    borderStyles: unknown;
+    colors: unknown;
     fonts: {
+        'fallback-mono': string;
+        'fallback-sans': string;
+        'fallback-serif': string;
         mono: string;
         sans: string;
         serif: string;
     };
-    space: {
+    fontSizes: {
         1: string;
         2: string;
         3: string;
@@ -825,7 +829,7 @@ declare const StyledRadioButton: _stitches_react_types_styled_component.StyledCo
         8: string;
         9: string;
     };
-    sizes: {
+    fontWeights: {
         1: string;
         2: string;
         3: string;
@@ -836,7 +840,26 @@ declare const StyledRadioButton: _stitches_react_types_styled_component.StyledCo
         8: string;
         9: string;
     };
-    fontSizes: {
+    letterSpacings: unknown;
+    lineHeights: unknown;
+    radii: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        pill: string;
+        round: string;
+    };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        toast: string;
+    };
+    sizes: {
+        0: string;
         1: string;
         2: string;
         3: string;
@@ -847,15 +870,27 @@ declare const StyledRadioButton: _stitches_react_types_styled_component.StyledCo
         8: string;
         9: string;
     };
-    radii: {
+    space: {
+        0: string;
         1: string;
         2: string;
         3: string;
         4: string;
-        round: string;
-        pill: string;
-    };
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+    };
+    transitions: unknown;
     zIndices: {
+        0: string;
         1: string;
         2: string;
         3: string;
@@ -863,6 +898,9 @@ declare const StyledRadioButton: _stitches_react_types_styled_component.StyledCo
         max: string;
         toast: string;
     };
+    foo: {
+        bar: string;
+    };
 }, _stitches_react_types_config.DefaultThemeMap, {
     p: (value: string | number | {
         readonly [$$ScaleValue]: "padding";
@@ -1172,233 +1210,127 @@ declare const StyledRadioButton: _stitches_react_types_styled_component.StyledCo
         };
     };
 }>>;
-declare const StyledRadioIndicator: _stitches_react_types_styled_component.StyledComponent<"div", {}, {
-    bp1: "(min-width: 520px)";
-    bp2: "(min-width: 900px)";
-    bp3: "(min-width: 1200px)";
-    bp4: "(min-width: 1800px)";
-    motion: "(prefers-reduced-motion)";
-    hover: "(any-hover: hover)";
-    dark: "(prefers-color-scheme: dark)";
-    light: "(prefers-color-scheme: light)";
+
+declare const StyledButton: _stitches_react_types_styled_component.StyledComponent<"button", _stitches_react_types_styled_component.StyledComponentProps<[{
+    all: string;
+    alignItems: string;
+    boxSizing: string;
+    userSelect: string;
+    display: string;
+    WebkitTapHighlightColor: string;
+    height: string;
+    px: string;
+    fontFamily: string;
+    fontWeight: number;
+    borderRadius: string;
+    fontSize: string;
+    lineHeight: string;
+    '&:disabled': {
+        bc: string;
+        boxShadow: string;
+        color: string;
+        pointerEvents: string;
+    };
+    '&[href]': {
+        cursor: string;
+    };
+    variants: {
+        variant: {
+            contrast: {
+                [x: string]: string | {
+                    '&:hover': {
+                        opacity: number;
+                    };
+                    opacity?: undefined;
+                    boxShadow?: undefined;
+                    color?: undefined;
+                    bc?: undefined;
+                    '&:focus'?: undefined;
+                    '&:focus:not(:focus-visible)'?: undefined;
+                } | {
+                    opacity: number;
+                    '&:hover'?: undefined;
+                    boxShadow?: undefined;
+                    color?: undefined;
+                    bc?: undefined;
+                    '&:focus'?: undefined;
+                    '&:focus:not(:focus-visible)'?: undefined;
+                } | {
+                    boxShadow: string;
+                    '&:hover'?: undefined;
+                    opacity?: undefined;
+                    color?: undefined;
+                    bc?: undefined;
+                    '&:focus'?: undefined;
+                    '&:focus:not(:focus-visible)'?: undefined;
+                } | {
+                    color: string;
+                    bc: string;
+                    '&:focus': {
+                        boxShadow: string;
+                    };
+                    '&:focus:not(:focus-visible)': {
+                        boxShadow: string;
+                    };
+                    '&:hover'?: undefined;
+                    opacity?: undefined;
+                    boxShadow?: undefined;
+                };
+                bc: string;
+                color: string;
+                '@hover': {
+                    '&:hover': {
+                        opacity: number;
+                    };
+                };
+                '&:active': {
+                    opacity: number;
+                };
+                '&:focus': {
+                    boxShadow: string;
+                };
+                '&:focus:not(:focus-visible)': {
+                    boxShadow: string;
+                };
+                $$backlight: string;
+                boxShadow: string;
+            };
+        };
+    };
+    defaultVariants: {
+        variant: "contrast";
+    };
+}]>, {
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
 }, _stitches_react_types_css_util.CSS<{
-    bp1: "(min-width: 520px)";
-    bp2: "(min-width: 900px)";
-    bp3: "(min-width: 1200px)";
-    bp4: "(min-width: 1800px)";
-    motion: "(prefers-reduced-motion)";
-    hover: "(any-hover: hover)";
-    dark: "(prefers-color-scheme: dark)";
-    light: "(prefers-color-scheme: light)";
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
 }, {
-    colors: {
-        hiContrast: string;
-        loContrast: string;
-        canvas: string;
-        gradient: string;
-        panel: string;
-        transparentPanel: string;
-        shadowLight: string;
-        shadowDark: string;
-        whiteA1: string;
-        whiteA2: string;
-        whiteA3: string;
-        whiteA4: string;
-        whiteA5: string;
-        whiteA6: string;
-        whiteA7: string;
-        whiteA8: string;
-        whiteA9: string;
-        whiteA10: string;
-        whiteA11: string;
-        whiteA12: string;
-        violetA1: string;
-        violetA2: string;
-        violetA3: string;
-        violetA4: string;
-        violetA5: string;
-        violetA6: string;
-        violetA7: string;
-        violetA8: string;
-        violetA9: string;
-        violetA10: string;
-        violetA11: string;
-        violetA12: string;
-        violet1: string;
-        violet2: string;
-        violet3: string;
-        violet4: string;
-        violet5: string;
-        violet6: string;
-        violet7: string;
-        violet8: string;
-        violet9: string;
-        violet10: string;
-        violet11: string;
-        violet12: string;
-        slateA1: string;
-        slateA2: string;
-        slateA3: string;
-        slateA4: string;
-        slateA5: string;
-        slateA6: string;
-        slateA7: string;
-        slateA8: string;
-        slateA9: string;
-        slateA10: string;
-        slateA11: string;
-        slateA12: string;
-        slate1: string;
-        slate2: string;
-        slate3: string;
-        slate4: string;
-        slate5: string;
-        slate6: string;
-        slate7: string;
-        slate8: string;
-        slate9: string;
-        slate10: string;
-        slate11: string;
-        slate12: string;
-        redA1: string;
-        redA2: string;
-        redA3: string;
-        redA4: string;
-        redA5: string;
-        redA6: string;
-        redA7: string;
-        redA8: string;
-        redA9: string;
-        redA10: string;
-        redA11: string;
-        redA12: string;
-        red1: string;
-        red2: string;
-        red3: string;
-        red4: string;
-        red5: string;
-        red6: string;
-        red7: string;
-        red8: string;
-        red9: string;
-        red10: string;
-        red11: string;
-        red12: string;
-        orangeA1: string;
-        orangeA2: string;
-        orangeA3: string;
-        orangeA4: string;
-        orangeA5: string;
-        orangeA6: string;
-        orangeA7: string;
-        orangeA8: string;
-        orangeA9: string;
-        orangeA10: string;
-        orangeA11: string;
-        orangeA12: string;
-        orange1: string;
-        orange2: string;
-        orange3: string;
-        orange4: string;
-        orange5: string;
-        orange6: string;
-        orange7: string;
-        orange8: string;
-        orange9: string;
-        orange10: string;
-        orange11: string;
-        orange12: string;
-        greenA1: string;
-        greenA2: string;
-        greenA3: string;
-        greenA4: string;
-        greenA5: string;
-        greenA6: string;
-        greenA7: string;
-        greenA8: string;
-        greenA9: string;
-        greenA10: string;
-        greenA11: string;
-        greenA12: string;
-        green1: string;
-        green2: string;
-        green3: string;
-        green4: string;
-        green5: string;
-        green6: string;
-        green7: string;
-        green8: string;
-        green9: string;
-        green10: string;
-        green11: string;
-        green12: string;
-        grayA1: string;
-        grayA2: string;
-        grayA3: string;
-        grayA4: string;
-        grayA5: string;
-        grayA6: string;
-        grayA7: string;
-        grayA8: string;
-        grayA9: string;
-        grayA10: string;
-        grayA11: string;
-        grayA12: string;
-        gray1: string;
-        gray2: string;
-        gray3: string;
-        gray4: string;
-        gray5: string;
-        gray6: string;
-        gray7: string;
-        gray8: string;
-        gray9: string;
-        gray10: string;
-        gray11: string;
-        gray12: string;
-        blueA1: string;
-        blueA2: string;
-        blueA3: string;
-        blueA4: string;
-        blueA5: string;
-        blueA6: string;
-        blueA7: string;
-        blueA8: string;
-        blueA9: string;
-        blueA10: string;
-        blueA11: string;
-        blueA12: string;
-        blue1: string;
-        blue2: string;
-        blue3: string;
-        blue4: string;
-        blue5: string;
-        blue6: string;
-        blue7: string;
-        blue8: string;
-        blue9: string;
-        blue10: string;
-        blue11: string;
-        blue12: string;
-        blackA1: string;
-        blackA2: string;
-        blackA3: string;
-        blackA4: string;
-        blackA5: string;
-        blackA6: string;
-        blackA7: string;
-        blackA8: string;
-        blackA9: string;
-        blackA10: string;
-        blackA11: string;
-        blackA12: string;
-    };
+    borderWidths: unknown;
+    borderStyles: unknown;
+    colors: unknown;
     fonts: {
+        'fallback-mono': string;
+        'fallback-sans': string;
+        'fallback-serif': string;
         mono: string;
         sans: string;
         serif: string;
     };
-    space: {
+    fontSizes: {
         1: string;
         2: string;
         3: string;
@@ -1409,7 +1341,7 @@ declare const StyledRadioIndicator: _stitches_react_types_styled_component.Style
         8: string;
         9: string;
     };
-    sizes: {
+    fontWeights: {
         1: string;
         2: string;
         3: string;
@@ -1420,7 +1352,26 @@ declare const StyledRadioIndicator: _stitches_react_types_styled_component.Style
         8: string;
         9: string;
     };
-    fontSizes: {
+    letterSpacings: unknown;
+    lineHeights: unknown;
+    radii: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        pill: string;
+        round: string;
+    };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        toast: string;
+    };
+    sizes: {
+        0: string;
         1: string;
         2: string;
         3: string;
@@ -1431,15 +1382,27 @@ declare const StyledRadioIndicator: _stitches_react_types_styled_component.Style
         8: string;
         9: string;
     };
-    radii: {
+    space: {
+        0: string;
         1: string;
         2: string;
         3: string;
         4: string;
-        round: string;
-        pill: string;
-    };
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+    };
+    transitions: unknown;
     zIndices: {
+        0: string;
         1: string;
         2: string;
         3: string;
@@ -1447,6 +1410,9 @@ declare const StyledRadioIndicator: _stitches_react_types_styled_component.Style
         max: string;
         toast: string;
     };
+    foo: {
+        bar: string;
+    };
 }, _stitches_react_types_config.DefaultThemeMap, {
     p: (value: string | number | {
         readonly [$$ScaleValue]: "padding";
@@ -1756,233 +1722,106 @@ declare const StyledRadioIndicator: _stitches_react_types_styled_component.Style
         };
     };
 }>>;
-declare const StyledRadio: _stitches_react_types_styled_component.StyledComponent<React.ForwardRefExoticComponent<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {}, {
-    bp1: "(min-width: 520px)";
-    bp2: "(min-width: 900px)";
-    bp3: "(min-width: 1200px)";
-    bp4: "(min-width: 1800px)";
-    motion: "(prefers-reduced-motion)";
-    hover: "(any-hover: hover)";
-    dark: "(prefers-color-scheme: dark)";
-    light: "(prefers-color-scheme: light)";
+
+declare type ButtonMarketingProps = {
+    as: any;
+    disabled?: boolean;
+    href?: string;
+    icon?: React.ComponentType<any>;
+} & React.ComponentProps<typeof StyledButton>;
+
+declare const ButtonMarketing: React$1.ForwardRefExoticComponent<Pick<ButtonMarketingProps, "as" | "css" | "key" | "icon" | keyof React$1.ButtonHTMLAttributes<HTMLButtonElement> | "href" | "variant"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+declare const ButtonDemo: _stitches_react_types_styled_component.StyledComponent<"button", _stitches_react_types_styled_component.StyledComponentProps<[{
+    all: string;
+    alignItems: string;
+    boxSizing: string;
+    userSelect: string;
+    display: string;
+    color: string;
+    fontSize: string;
+    lineHeight: number;
+    m: number;
+    py: number;
+    px: string;
+    height: string;
+    br: string;
+    willChange: string;
+    '&:focus': {
+        boxShadow: string;
+    };
+    '&:focus:not(:focus-visible)': {
+        boxShadow: string;
+    };
+    variants: {
+        variant: {
+            white: {
+                [x: string]: string | {
+                    '&:hover': {
+                        bc: string;
+                    };
+                    backgroundColor?: undefined;
+                    '@hover'?: undefined;
+                } | {
+                    backgroundColor: string;
+                    '@hover': {
+                        '&:hover': {
+                            bc: string;
+                        };
+                    };
+                    '&:hover'?: undefined;
+                };
+                backgroundColor: string;
+                '@hover': {
+                    '&:hover': {
+                        bc: string;
+                    };
+                };
+            };
+            gray: {
+                backgroundColor: string;
+                '@hover': {
+                    '&:hover': {
+                        bc: string;
+                    };
+                };
+            };
+        };
+    };
+    defaultVariants: {
+        variant: "white";
+    };
+}]>, {
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
 }, _stitches_react_types_css_util.CSS<{
-    bp1: "(min-width: 520px)";
-    bp2: "(min-width: 900px)";
-    bp3: "(min-width: 1200px)";
-    bp4: "(min-width: 1800px)";
-    motion: "(prefers-reduced-motion)";
-    hover: "(any-hover: hover)";
-    dark: "(prefers-color-scheme: dark)";
-    light: "(prefers-color-scheme: light)";
+    bp1: string;
+    bp2: string;
+    bp3: string;
+    bp4: string;
+    motion: string;
+    hover: string;
+    dark: string;
+    light: string;
 }, {
-    colors: {
-        hiContrast: string;
-        loContrast: string;
-        canvas: string;
-        gradient: string;
-        panel: string;
-        transparentPanel: string;
-        shadowLight: string;
-        shadowDark: string;
-        whiteA1: string;
-        whiteA2: string;
-        whiteA3: string;
-        whiteA4: string;
-        whiteA5: string;
-        whiteA6: string;
-        whiteA7: string;
-        whiteA8: string;
-        whiteA9: string;
-        whiteA10: string;
-        whiteA11: string;
-        whiteA12: string;
-        violetA1: string;
-        violetA2: string;
-        violetA3: string;
-        violetA4: string;
-        violetA5: string;
-        violetA6: string;
-        violetA7: string;
-        violetA8: string;
-        violetA9: string;
-        violetA10: string;
-        violetA11: string;
-        violetA12: string;
-        violet1: string;
-        violet2: string;
-        violet3: string;
-        violet4: string;
-        violet5: string;
-        violet6: string;
-        violet7: string;
-        violet8: string;
-        violet9: string;
-        violet10: string;
-        violet11: string;
-        violet12: string;
-        slateA1: string;
-        slateA2: string;
-        slateA3: string;
-        slateA4: string;
-        slateA5: string;
-        slateA6: string;
-        slateA7: string;
-        slateA8: string;
-        slateA9: string;
-        slateA10: string;
-        slateA11: string;
-        slateA12: string;
-        slate1: string;
-        slate2: string;
-        slate3: string;
-        slate4: string;
-        slate5: string;
-        slate6: string;
-        slate7: string;
-        slate8: string;
-        slate9: string;
-        slate10: string;
-        slate11: string;
-        slate12: string;
-        redA1: string;
-        redA2: string;
-        redA3: string;
-        redA4: string;
-        redA5: string;
-        redA6: string;
-        redA7: string;
-        redA8: string;
-        redA9: string;
-        redA10: string;
-        redA11: string;
-        redA12: string;
-        red1: string;
-        red2: string;
-        red3: string;
-        red4: string;
-        red5: string;
-        red6: string;
-        red7: string;
-        red8: string;
-        red9: string;
-        red10: string;
-        red11: string;
-        red12: string;
-        orangeA1: string;
-        orangeA2: string;
-        orangeA3: string;
-        orangeA4: string;
-        orangeA5: string;
-        orangeA6: string;
-        orangeA7: string;
-        orangeA8: string;
-        orangeA9: string;
-        orangeA10: string;
-        orangeA11: string;
-        orangeA12: string;
-        orange1: string;
-        orange2: string;
-        orange3: string;
-        orange4: string;
-        orange5: string;
-        orange6: string;
-        orange7: string;
-        orange8: string;
-        orange9: string;
-        orange10: string;
-        orange11: string;
-        orange12: string;
-        greenA1: string;
-        greenA2: string;
-        greenA3: string;
-        greenA4: string;
-        greenA5: string;
-        greenA6: string;
-        greenA7: string;
-        greenA8: string;
-        greenA9: string;
-        greenA10: string;
-        greenA11: string;
-        greenA12: string;
-        green1: string;
-        green2: string;
-        green3: string;
-        green4: string;
-        green5: string;
-        green6: string;
-        green7: string;
-        green8: string;
-        green9: string;
-        green10: string;
-        green11: string;
-        green12: string;
-        grayA1: string;
-        grayA2: string;
-        grayA3: string;
-        grayA4: string;
-        grayA5: string;
-        grayA6: string;
-        grayA7: string;
-        grayA8: string;
-        grayA9: string;
-        grayA10: string;
-        grayA11: string;
-        grayA12: string;
-        gray1: string;
-        gray2: string;
-        gray3: string;
-        gray4: string;
-        gray5: string;
-        gray6: string;
-        gray7: string;
-        gray8: string;
-        gray9: string;
-        gray10: string;
-        gray11: string;
-        gray12: string;
-        blueA1: string;
-        blueA2: string;
-        blueA3: string;
-        blueA4: string;
-        blueA5: string;
-        blueA6: string;
-        blueA7: string;
-        blueA8: string;
-        blueA9: string;
-        blueA10: string;
-        blueA11: string;
-        blueA12: string;
-        blue1: string;
-        blue2: string;
-        blue3: string;
-        blue4: string;
-        blue5: string;
-        blue6: string;
-        blue7: string;
-        blue8: string;
-        blue9: string;
-        blue10: string;
-        blue11: string;
-        blue12: string;
-        blackA1: string;
-        blackA2: string;
-        blackA3: string;
-        blackA4: string;
-        blackA5: string;
-        blackA6: string;
-        blackA7: string;
-        blackA8: string;
-        blackA9: string;
-        blackA10: string;
-        blackA11: string;
-        blackA12: string;
-    };
+    borderWidths: unknown;
+    borderStyles: unknown;
+    colors: unknown;
     fonts: {
+        'fallback-mono': string;
+        'fallback-sans': string;
+        'fallback-serif': string;
         mono: string;
         sans: string;
         serif: string;
     };
-    space: {
+    fontSizes: {
         1: string;
         2: string;
         3: string;
@@ -1993,7 +1832,7 @@ declare const StyledRadio: _stitches_react_types_styled_component.StyledComponen
         8: string;
         9: string;
     };
-    sizes: {
+    fontWeights: {
         1: string;
         2: string;
         3: string;
@@ -2004,7 +1843,26 @@ declare const StyledRadio: _stitches_react_types_styled_component.StyledComponen
         8: string;
         9: string;
     };
-    fontSizes: {
+    letterSpacings: unknown;
+    lineHeights: unknown;
+    radii: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        pill: string;
+        round: string;
+    };
+    shadows: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        toast: string;
+    };
+    sizes: {
+        0: string;
         1: string;
         2: string;
         3: string;
@@ -2015,15 +1873,27 @@ declare const StyledRadio: _stitches_react_types_styled_component.StyledComponen
         8: string;
         9: string;
     };
-    radii: {
+    space: {
+        0: string;
         1: string;
         2: string;
         3: string;
         4: string;
-        round: string;
-        pill: string;
-    };
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+    };
+    transitions: unknown;
     zIndices: {
+        0: string;
         1: string;
         2: string;
         3: string;
@@ -2031,6 +1901,9 @@ declare const StyledRadio: _stitches_react_types_styled_component.StyledComponen
         max: string;
         toast: string;
     };
+    foo: {
+        bar: string;
+    };
 }, _stitches_react_types_config.DefaultThemeMap, {
     p: (value: string | number | {
         readonly [$$ScaleValue]: "padding";
@@ -2341,4 +2214,4 @@ declare const StyledRadio: _stitches_react_types_styled_component.StyledComponen
     };
 }>>;
 
-export { RadioCardGroup, StyledRadio, StyledRadioButton, StyledRadioIndicator };
+export { Button as B, ButtonDemo as a, ButtonIcon as b, ButtonMarketing as c };