braid-design-system 32.1.0 → 32.2.0

package/dist/css.d.ts

@@ -1,667 +1 @@
-import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
-import { StyleRule } from '@vanilla-extract/css';
-
-declare const vars$1: {
-    readonly space: {
-        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xxsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly touchableSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    readonly grid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    readonly borderRadius: {
-        standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly borderColor: {
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        field: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        focus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly borderWidth: {
-        standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly focusRingSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    readonly contentWidth: {
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly foregroundColor: {
-        brandAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkLightVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        rating: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondaryInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly backgroundColor: {
-        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        bodyDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        surface: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        surfaceDark: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly fontFamily: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    readonly fontMetrics: {
-        capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        ascent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        descent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        lineGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        unitsPerEm: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly textSize: {
-        xsmall: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        small: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        standard: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        large: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-    };
-    readonly textWeight: {
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly headingLevel: {
-        1: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        2: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        3: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        4: {
-            mobile: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-            tablet: {
-                fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                capsizeTrims: {
-                    capHeightTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                    baselineTrim: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-    };
-    readonly headingWeight: {
-        readonly weak: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        readonly regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly inlineFieldSize: {
-        readonly standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        readonly small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly transition: {
-        fast: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        touchable: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly transform: {
-        touchable: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    readonly shadow: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-};
-
-declare const breakpoints: {
-    readonly mobile: 0;
-    readonly tablet: 740;
-    readonly desktop: 992;
-    readonly wide: 1200;
-};
-type Breakpoint = keyof typeof breakpoints;
-
-declare const sprinkles: ((props: {
-    readonly overflow?: "hidden" | "scroll" | "visible" | "auto" | undefined;
-    readonly userSelect?: "none" | undefined;
-    readonly outline?: "none" | undefined;
-    readonly opacity?: 0 | undefined;
-    readonly zIndex?: 0 | 1 | 2 | "dropdownBackdrop" | "dropdown" | "sticky" | "modalBackdrop" | "modal" | "notification" | undefined;
-    readonly cursor?: "default" | "pointer" | undefined;
-    readonly pointerEvents?: "none" | undefined;
-    readonly top?: 0 | undefined;
-    readonly bottom?: 0 | undefined;
-    readonly left?: 0 | undefined;
-    readonly right?: 0 | undefined;
-    readonly height?: "touchable" | "full" | undefined;
-    readonly width?: "touchable" | "full" | undefined;
-    readonly minWidth?: 0 | undefined;
-    readonly maxWidth?: "xsmall" | "small" | "medium" | "large" | undefined;
-    readonly transition?: "fast" | "touchable" | undefined;
-    inset?: 0 | undefined;
-} & {
-    readonly display?: (("none" | "flex" | "block" | "inline" | "inlineBlock" | {
-        mobile?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        tablet?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        desktop?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-        wide?: "none" | "flex" | "block" | "inline" | "inlineBlock" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "flex" | "block" | "inline" | "inlineBlock" | null>) | undefined;
-    readonly position?: (("relative" | "absolute" | "fixed" | {
-        mobile?: "relative" | "absolute" | "fixed" | undefined;
-        tablet?: "relative" | "absolute" | "fixed" | undefined;
-        desktop?: "relative" | "absolute" | "fixed" | undefined;
-        wide?: "relative" | "absolute" | "fixed" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "absolute" | "fixed" | null>) | undefined;
-    readonly borderRadius?: (("large" | "xlarge" | "standard" | "none" | "full" | {
-        mobile?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        tablet?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        desktop?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-        wide?: "large" | "xlarge" | "standard" | "none" | "full" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "large" | "xlarge" | "standard" | "none" | "full" | null>) | undefined;
-    readonly paddingTop?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingBottom?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingRight?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly paddingLeft?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginTop?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginBottom?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginRight?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly marginLeft?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    readonly alignItems?: (("center" | "flexStart" | "flexEnd" | {
-        mobile?: "center" | "flexStart" | "flexEnd" | undefined;
-        tablet?: "center" | "flexStart" | "flexEnd" | undefined;
-        desktop?: "center" | "flexStart" | "flexEnd" | undefined;
-        wide?: "center" | "flexStart" | "flexEnd" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flexStart" | "flexEnd" | null>) | undefined;
-    readonly justifyContent?: (("center" | "flexStart" | "flexEnd" | "spaceBetween" | {
-        mobile?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        tablet?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        desktop?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-        wide?: "center" | "flexStart" | "flexEnd" | "spaceBetween" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flexStart" | "flexEnd" | "spaceBetween" | null>) | undefined;
-    readonly flexDirection?: (("row" | "column" | "rowReverse" | "columnReverse" | {
-        mobile?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        tablet?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        desktop?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-        wide?: "row" | "column" | "rowReverse" | "columnReverse" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "row" | "column" | "rowReverse" | "columnReverse" | null>) | undefined;
-    readonly flexWrap?: (("wrap" | "nowrap" | {
-        mobile?: "wrap" | "nowrap" | undefined;
-        tablet?: "wrap" | "nowrap" | undefined;
-        desktop?: "wrap" | "nowrap" | undefined;
-        wide?: "wrap" | "nowrap" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>) | undefined;
-    readonly flexShrink?: ((0 | {
-        mobile?: 0 | undefined;
-        tablet?: 0 | undefined;
-        desktop?: 0 | undefined;
-        wide?: 0 | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | null>) | undefined;
-    readonly flexGrow?: ((0 | 1 | {
-        mobile?: 0 | 1 | undefined;
-        tablet?: 0 | 1 | undefined;
-        desktop?: 0 | 1 | undefined;
-        wide?: 0 | 1 | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>) | undefined;
-    readonly textAlign?: (("left" | "right" | "center" | {
-        mobile?: "left" | "right" | "center" | undefined;
-        tablet?: "left" | "right" | "center" | undefined;
-        desktop?: "left" | "right" | "center" | undefined;
-        wide?: "left" | "right" | "center" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | null>) | undefined;
-    padding?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    paddingY?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    paddingX?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    margin?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    marginY?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-    marginX?: (("gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | {
-        mobile?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        tablet?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        desktop?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-        wide?: "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | undefined;
-    }) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "gutter" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "none" | null>) | undefined;
-} & {
-    readonly transform?: {
-        active?: "touchable" | undefined;
-    } | undefined;
-} & {
-    readonly background?: ("brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | {
-        lightMode?: "brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | undefined;
-        darkMode?: "brandAccent" | "caution" | "cautionLight" | "critical" | "criticalLight" | "formAccent" | "info" | "infoLight" | "neutral" | "neutralLight" | "positive" | "positiveLight" | "promote" | "promoteLight" | "body" | "bodyDark" | "brand" | "brandAccentActive" | "brandAccentHover" | "brandAccentSoft" | "brandAccentSoftActive" | "brandAccentSoftHover" | "criticalActive" | "criticalHover" | "criticalSoft" | "criticalSoftActive" | "criticalSoftHover" | "formAccentActive" | "formAccentHover" | "formAccentSoft" | "formAccentSoftActive" | "formAccentSoftHover" | "neutralActive" | "neutralHover" | "neutralSoft" | "neutralSoftActive" | "neutralSoftHover" | "surface" | "surfaceDark" | undefined;
-    }) | undefined;
-    readonly boxShadow?: ("small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | {
-        lightMode?: "small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
-        darkMode?: "small" | "medium" | "large" | "borderBrandAccentLarge" | "borderBrandAccentLightLarge" | "borderCaution" | "borderCautionLight" | "borderCritical" | "borderCriticalLarge" | "borderCriticalLight" | "borderCriticalLightLarge" | "borderField" | "borderFormAccent" | "borderFormAccentLarge" | "borderFormAccentLight" | "borderFormAccentLightLarge" | "borderInfo" | "borderInfoLight" | "borderNeutral" | "borderNeutralLarge" | "borderNeutralInverted" | "borderNeutralInvertedLarge" | "borderNeutralLight" | "borderPositive" | "borderPositiveLight" | "borderPromote" | "borderPromoteLight" | "outlineFocus" | undefined;
-    }) | undefined;
-}) => string) & {
-    properties: Set<"background" | "borderRadius" | "transition" | "transform" | "alignItems" | "bottom" | "boxShadow" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "height" | "inset" | "justifyContent" | "left" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxWidth" | "minWidth" | "opacity" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "pointerEvents" | "position" | "right" | "textAlign" | "top" | "userSelect" | "width" | "zIndex" | "margin" | "outline" | "overflow" | "padding" | "paddingY" | "paddingX" | "marginY" | "marginX">;
-};
-
-type Sprinkles = Parameters<typeof sprinkles>[0];
-interface Atoms extends Sprinkles {
-    reset?: keyof JSX.IntrinsicElements;
-}
-
-type CSSProps$1 = Omit<StyleRule, 'selectors' | '@media' | '@supports'>;
-interface ColorModeStyle {
-    lightMode?: CSSProps$1;
-    darkMode?: CSSProps$1;
-}
-declare const colorModeStyle: ({ lightMode, darkMode, }: ColorModeStyle) => StyleRule;
-
-type CSSProps = Omit<StyleRule, '@media' | '@supports'>;
-interface ResponsiveStyle {
-    mobile?: CSSProps;
-    tablet?: CSSProps;
-    desktop?: CSSProps;
-    wide?: CSSProps;
-}
-declare const responsiveStyle: ({ mobile, tablet, desktop, wide, }: ResponsiveStyle) => StyleRule;
-
-interface GlobalTextStyleProps {
-    weight?: keyof typeof vars$1.textWeight;
-    size?: keyof typeof vars$1.textSize;
-}
-declare const globalTextStyle: ({ weight, size, }?: GlobalTextStyleProps) => StyleRule;
-interface GlobalHeadingProps {
-    weight?: keyof typeof vars$1.headingWeight;
-    level: keyof typeof vars$1.headingLevel;
-}
-declare const globalHeadingStyle: ({ weight, level, }: GlobalHeadingProps) => StyleRule;
-
-declare const vars: {
-    grid: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    space: {
-        gutter: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xxsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xxlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    touchableSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    contentWidth: {
-        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    backgroundColor: {
-        body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brand: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoftActive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralSoftHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        surface: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    foregroundColor: {
-        brandAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkHover: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        linkLightVisited: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        rating: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        secondaryInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    textWeight: {
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        regular: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    borderColor: {
-        brandAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        brandAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        caution: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        cautionLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        critical: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        criticalLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        field: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        focus: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccent: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        formAccentLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        info: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        infoLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutral: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralInverted: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        neutralLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positive: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        positiveLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promote: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        promoteLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    borderRadius: {
-        standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    borderWidth: {
-        standard: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-    shadow: {
-        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-    };
-};
-declare function atoms(props: Omit<Atoms, 'background'>): string;
-
-export { Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, responsiveStyle, vars };
+export { Breakpoint, atoms, breakpoints, colorModeStyle, globalHeadingStyle, globalTextStyle, responsiveStyle, vars } from './reset.js';