npm - @blockle/blocks - Versions diffs - 0.9.1 → 0.11.0 - Mend

@blockle/blocks 0.9.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (161) hide show

package/dist/momotaro.chunk.d.ts CHANGED Viewed

@@ -4,10 +4,10 @@ import react__default, { useEffect } from 'react';
 import * as _vanilla_extract_sprinkles from '@vanilla-extract/sprinkles';
 declare const atoms: ((props: {
-    readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
-    readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
-    readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
-    readonly borderWidth?: ("small" | "medium" | "large") | undefined;
+    readonly backgroundColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly borderColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly borderRadius?: ("large" | "medium" | "small" | "xlarge") | undefined;
+    readonly borderWidth?: ("large" | "medium" | "small") | undefined;
     readonly border?: "none" | undefined;
     readonly insetBlock?: 0 | undefined;
     readonly insetBlockStart?: 0 | undefined;
@@ -15,13 +15,13 @@ declare const atoms: ((props: {
     readonly insetInline?: 0 | undefined;
     readonly insetInlineStart?: 0 | undefined;
     readonly insetInlineEnd?: 0 | undefined;
-    readonly boxShadow?: ("small" | "medium" | "large") | undefined;
-    readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly boxShadow?: ("large" | "medium" | "small") | undefined;
+    readonly color?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
     readonly cursor?: "auto" | "pointer" | undefined;
     readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
     readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
     readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
-    readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
+    readonly lineHeight?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
     readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
     readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
     readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
@@ -34,9 +34,9 @@ declare const atoms: ((props: {
     readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
     readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
     readonly textWrap?: "balance" | "wrap" | undefined;
-    readonly transition?: ("slow" | "normal" | "fast") | undefined;
+    readonly transition?: ("normal" | "slow" | "fast") | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
+    readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
     readonly wordBreak?: "break-word" | undefined;
     readonly wordWrap?: "break-word" | undefined;
     inset?: 0 | undefined;
@@ -59,12 +59,12 @@ declare const atoms: ((props: {
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
         mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
@@ -95,138 +95,138 @@ declare const atoms: ((props: {
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
-    readonly flexWrap?: ("wrap" | "nowrap" | {
-        mobile?: "wrap" | "nowrap" | undefined;
-        tablet?: "wrap" | "nowrap" | undefined;
-        desktop?: "wrap" | "nowrap" | undefined;
-        wide?: "wrap" | "nowrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
-    readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    readonly flexWrap?: ("nowrap" | "wrap" | {
+        mobile?: "nowrap" | "wrap" | undefined;
+        tablet?: "nowrap" | "wrap" | undefined;
+        desktop?: "nowrap" | "wrap" | undefined;
+        wide?: "nowrap" | "wrap" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
+    readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
+        mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
+        wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
+    readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
         mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
-    readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    readonly marginBlockStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    readonly marginBlockEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    readonly marginInlineStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    readonly marginInlineEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
     readonly outline?: ("none" | {
         mobile?: "none" | undefined;
         tablet?: "none" | undefined;
         desktop?: "none" | undefined;
         wide?: "none" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
-    readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    readonly padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingBlock?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingBlockStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingBlockEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingInline?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingInlineStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingInlineEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
         mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
-    readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly textAlign?: ("left" | "right" | "center" | "justify" | {
         mobile?: "left" | "right" | "center" | "justify" | undefined;
         tablet?: "left" | "right" | "center" | "justify" | undefined;
         desktop?: "left" | "right" | "center" | "justify" | undefined;
         wide?: "left" | "right" | "center" | "justify" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
-    margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    marginBlock?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    marginInline?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
     placeItems?: ("center" | "flex-start" | "flex-end" | {
         mobile?: "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | undefined;
@@ -234,7 +234,7 @@ declare const atoms: ((props: {
         wide?: "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | null>;
 }) => string) & {
-    properties: Set<"borderRadius" | "color" | "borderWidth" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "transition" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration" | "textWrap">;
+    properties: Set<"alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "blockSize" | "boxShadow" | "color" | "columnGap" | "cursor" | "display" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "inlineSize" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetInlineStart" | "justifyContent" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginInlineEnd" | "marginInlineStart" | "maxBlockSize" | "maxInlineSize" | "opacity" | "overflowBlock" | "overflowInline" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInlineEnd" | "paddingInlineStart" | "pointerEvents" | "position" | "rowGap" | "textAlign" | "textTransform" | "userSelect" | "whiteSpace" | "wordBreak" | "wordWrap" | "border" | "borderColor" | "borderRadius" | "borderWidth" | "flex" | "gap" | "inset" | "insetBlock" | "insetInline" | "margin" | "marginBlock" | "marginInline" | "outline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "placeItems" | "textDecoration" | "transition" | "textWrap">;
 };
 declare const breakpoints: {
@@ -390,6 +390,16 @@ type SelectTheme = {
         variant: 'solid' | 'outline';
     };
 };
+type SliderTheme = {
+    base: string;
+    track: string;
+    filledTrack: string;
+    thumb: string;
+    variants: {
+        size: 'small' | 'medium' | 'large';
+        colorScheme: 'primary' | 'secondary';
+    };
+};
 type ComponentThemes = {
     button: ButtonTheme;
     checkbox: CheckboxTheme;
@@ -404,6 +414,7 @@ type ComponentThemes = {
     select: SelectTheme;
     spinner: SpinnerTheme;
     switch: SwitchTheme;
+    slider: SliderTheme;
 };
 /**
  * ComponentThemeProps is a helper type to define the props passed to useComponentStyles.
@@ -512,22 +523,22 @@ declare function makeTheme(theme: ThemeInput): Theme;
 declare const vars: {
     space: {
         none: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        large: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         gutter: `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})`;
     };
     borderRadius: {
-        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})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     color: {
-        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         black: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        white: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         primaryLight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         primary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -542,9 +553,9 @@ declare const vars: {
         link: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     borderWidth: {
-        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})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontFamily: {
         body: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -552,10 +563,10 @@ declare const vars: {
         secondary: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontSize: {
-        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})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     fontWeight: {
@@ -564,21 +575,21 @@ declare const vars: {
         strong: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     lineHeight: {
-        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})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        xsmall: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         xlarge: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     transition: {
-        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         normal: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        slow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
         fast: `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})`;
+        medium: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
+        small: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
     };
     focus: {
         boxShadow: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
@@ -634,7 +645,7 @@ declare const Button: react.ForwardRefExoticComponent<{
     type?: "button" | "reset" | "submit" | undefined;
     variant?: "outline" | "solid" | "ghost" | undefined;
     intent?: "danger" | "neutral" | undefined;
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "large" | "medium" | "small" | undefined;
     inlineSize?: Atoms['inlineSize'];
     alignSelf?: Atoms['alignSelf'];
     loading?: boolean | undefined;
@@ -702,16 +713,31 @@ declare const Radio: react.ForwardRefExoticComponent<{
 type SelectProps = {
     children: react__default.ReactNode;
     placeholder?: string;
-    variant?: SelectTheme['variants'];
+    variant?: SelectTheme['variants']['variant'];
 } & HTMLElementProps<HTMLSelectElement>;
 declare const Select: react__default.ForwardRefExoticComponent<{
     children: react__default.ReactNode;
     placeholder?: string | undefined;
-    variant?: {
-        variant: "outline" | "solid";
-    } | undefined;
+    variant?: "outline" | "solid" | undefined;
 } & HTMLElementProps<HTMLSelectElement> & react__default.RefAttributes<HTMLSelectElement>>;
+type SliderProps = {
+    name?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    orientation?: 'horizontal' | 'vertical';
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    'aria-label'?: string;
+    size: SliderTheme['variants']['size'];
+    colorScheme: SliderTheme['variants']['colorScheme'];
+};
+declare const Slider: react__default.FC<SliderProps>;
 type SwitchProps = {
     onChange?: (value: boolean) => void;
 } & Omit<HTMLElementProps<HTMLInputElement>, 'onChange'>;
@@ -731,10 +757,10 @@ declare const Box: react.ForwardRefExoticComponent<{
     style?: react.CSSProperties | undefined;
     asChild?: boolean | undefined;
 } & {
-    readonly backgroundColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
-    readonly borderColor?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
-    readonly borderRadius?: ("small" | "medium" | "large" | "xlarge") | undefined;
-    readonly borderWidth?: ("small" | "medium" | "large") | undefined;
+    readonly backgroundColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly borderColor?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly borderRadius?: ("large" | "medium" | "small" | "xlarge") | undefined;
+    readonly borderWidth?: ("large" | "medium" | "small") | undefined;
     readonly border?: "none" | undefined;
     readonly insetBlock?: 0 | undefined;
     readonly insetBlockStart?: 0 | undefined;
@@ -742,13 +768,13 @@ declare const Box: react.ForwardRefExoticComponent<{
     readonly insetInline?: 0 | undefined;
     readonly insetInlineStart?: 0 | undefined;
     readonly insetInlineEnd?: 0 | undefined;
-    readonly boxShadow?: ("small" | "medium" | "large") | undefined;
-    readonly color?: "white" | "black" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
+    readonly boxShadow?: ("large" | "medium" | "small") | undefined;
+    readonly color?: "black" | "white" | "body" | "primaryLight" | "primary" | "primaryDark" | "secondaryLight" | "secondary" | "secondaryDark" | "text" | "textLight" | "textDark" | "danger" | "link" | "currentColor" | undefined;
     readonly cursor?: "auto" | "pointer" | undefined;
     readonly fontFamily?: "body" | "primary" | "secondary" | undefined;
     readonly fontStyle?: "normal" | "italic" | "oblique" | undefined;
     readonly fontWeight?: ("medium" | "regular" | "strong") | undefined;
-    readonly lineHeight?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
+    readonly lineHeight?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
     readonly blockSize?: "auto" | "fit-content" | "full" | undefined;
     readonly maxBlockSize?: "auto" | "fit-content" | "full" | undefined;
     readonly inlineSize?: "auto" | "fit-content" | "full" | undefined;
@@ -761,9 +787,9 @@ declare const Box: react.ForwardRefExoticComponent<{
     readonly textDecoration?: "none" | "overline" | "line-through" | "underline" | undefined;
     readonly textTransform?: "lowercase" | "uppercase" | "capitalize" | undefined;
     readonly textWrap?: "balance" | "wrap" | undefined;
-    readonly transition?: ("slow" | "normal" | "fast") | undefined;
+    readonly transition?: ("normal" | "slow" | "fast") | undefined;
     readonly userSelect?: "none" | undefined;
-    readonly whiteSpace?: "nowrap" | "pre" | "pre-line" | "pre-wrap" | undefined;
+    readonly whiteSpace?: "pre-wrap" | "nowrap" | "pre" | "pre-line" | undefined;
     readonly wordBreak?: "break-word" | undefined;
     readonly wordWrap?: "break-word" | undefined;
     inset?: 0 | undefined;
@@ -786,12 +812,12 @@ declare const Box: react.ForwardRefExoticComponent<{
         desktop?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
         wide?: "stretch" | "center" | "flex-start" | "flex-end" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "stretch" | "center" | "flex-start" | "flex-end" | null>;
-    readonly columnGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    readonly columnGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly display?: ("none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | {
         mobile?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
         tablet?: "none" | "flex" | "grid" | "inline-flex" | "block" | "inline" | "inline-block" | "inline-grid" | undefined;
@@ -822,138 +848,138 @@ declare const Box: react.ForwardRefExoticComponent<{
         desktop?: 0 | 1 | undefined;
         wide?: 0 | 1 | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, 0 | 1 | null>;
-    readonly flexWrap?: ("wrap" | "nowrap" | {
-        mobile?: "wrap" | "nowrap" | undefined;
-        tablet?: "wrap" | "nowrap" | undefined;
-        desktop?: "wrap" | "nowrap" | undefined;
-        wide?: "wrap" | "nowrap" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "wrap" | "nowrap" | null>;
-    readonly fontSize?: (("xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly gap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    readonly flexWrap?: ("nowrap" | "wrap" | {
+        mobile?: "nowrap" | "wrap" | undefined;
+        tablet?: "nowrap" | "wrap" | undefined;
+        desktop?: "nowrap" | "wrap" | undefined;
+        wide?: "nowrap" | "wrap" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "nowrap" | "wrap" | null>;
+    readonly fontSize?: (("large" | "medium" | "small" | "xsmall" | "xlarge") | {
+        mobile?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
+        wide?: ("large" | "medium" | "small" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("large" | "medium" | "small" | "xsmall" | "xlarge") | null>;
+    readonly gap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly justifyContent?: ("center" | "flex-start" | "flex-end" | "space-between" | "space-around" | {
         mobile?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         desktop?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
         wide?: "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "center" | "flex-start" | "flex-end" | "space-between" | "space-around" | null>;
-    readonly marginBlockStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginBlockEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginInlineStart?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    readonly marginInlineEnd?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    readonly marginBlockStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    readonly marginBlockEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    readonly marginInlineStart?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    readonly marginInlineEnd?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
     readonly outline?: ("none" | {
         mobile?: "none" | undefined;
         tablet?: "none" | undefined;
         desktop?: "none" | undefined;
         wide?: "none" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | null>;
-    readonly padding?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlock?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlockStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingBlockEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInline?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInlineStart?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
-    readonly paddingInlineEnd?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    readonly padding?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingBlock?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingBlockStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingBlockEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingInline?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingInlineStart?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
+    readonly paddingInlineEnd?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly position?: ("relative" | "fixed" | "absolute" | "sticky" | "static" | {
         mobile?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         tablet?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         desktop?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
         wide?: "relative" | "fixed" | "absolute" | "sticky" | "static" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "relative" | "fixed" | "absolute" | "sticky" | "static" | null>;
-    readonly rowGap?: (("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | {
-        mobile?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        tablet?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        desktop?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-        wide?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge") | null>;
+    readonly rowGap?: (("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | {
+        mobile?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        tablet?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        desktop?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+        wide?: ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, ("none" | "large" | "medium" | "small" | "gutter" | "xsmall" | "xlarge") | null>;
     readonly textAlign?: ("left" | "right" | "center" | "justify" | {
         mobile?: "left" | "right" | "center" | "justify" | undefined;
         tablet?: "left" | "right" | "center" | "justify" | undefined;
         desktop?: "left" | "right" | "center" | "justify" | undefined;
         wide?: "left" | "right" | "center" | "justify" | undefined;
     } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "left" | "right" | "center" | "justify" | null>;
-    margin?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    marginBlock?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
-    marginInline?: ("none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | {
-        mobile?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        tablet?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        desktop?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-        wide?: "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | undefined;
-    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "gutter" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "auto" | null>;
+    margin?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    marginBlock?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
+    marginInline?: ("none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | {
+        mobile?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        tablet?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        desktop?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+        wide?: "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | undefined;
+    } | undefined) | _vanilla_extract_sprinkles.ResponsiveArray<4 | 1 | 2 | 3, "none" | "large" | "medium" | "small" | "auto" | "gutter" | "xsmall" | "xlarge" | null>;
     placeItems?: ("center" | "flex-start" | "flex-end" | {
         mobile?: "center" | "flex-start" | "flex-end" | undefined;
         tablet?: "center" | "flex-start" | "flex-end" | undefined;
@@ -1016,7 +1042,7 @@ declare const Link: react.ForwardRefExoticComponent<{
     asChild?: boolean | undefined;
     children?: React.ReactNode;
     underline?: boolean | undefined;
-    variant?: "primary" | "secondary" | "inherit" | undefined;
+    variant?: "inherit" | "primary" | "secondary" | undefined;
 } & MarginAtoms & HTMLElementProps<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
 type BlocksProviderProps = {
@@ -1043,6 +1069,26 @@ type DialogProps = {
 };
 declare const Dialog: React.FC<DialogProps>;
+type DropdownProps = {
+    align?: 'top' | 'bottom' | 'left' | 'right';
+    anchorElement: React.RefObject<HTMLElement>;
+    children: React.ReactNode;
+    className?: string;
+    onRequestClose: () => void;
+    open: boolean;
+    repositionOnScroll?: boolean;
+    style?: React.CSSProperties;
+    variant?: DropdownTheme['variants']['variant'];
+} & HTMLElementProps<HTMLDivElement>;
+type ReactElement = React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+type TooltipProps = {
+    align?: DropdownProps['align'];
+    children: ReactElement;
+    label: React.ReactNode;
+};
+declare const Tooltip: React.FC<TooltipProps>;
 type HeadingProps = {
     children: React.ReactNode;
     className?: string;
@@ -1106,4 +1152,4 @@ declare const classnames: (...args: Args[]) => string | undefined;
 declare const momotaro: Theme;
-export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };
+export { BlocksProvider, type BlocksProviderProps, Box, type BoxProps, Button, type ButtonProps, Checkbox, type CheckboxProps, Dialog, type DialogProps, Divider, type DividerProps, Heading, type HeadingProps, Inline, type InlineProps, Input, type InputProps, Label, type LabelProps, Link, type LinkProps, Portal, type PortalProps, Progress, type ProgressProps, Radio, type RadioProps, Select, type SelectProps, Slider, type SliderProps, Slot, Spinner, type SpinnerProps, Stack, type StackProps, Switch, type SwitchProps, Text, type TextProps, type ThemeComponentsStyles, type ThemeTokens, Tooltip, type TooltipProps, atoms, breakpointQuery, classnames, createSlottable, makeComponentTheme, makeTheme, momotaro, style, useComponentStyleDefaultProps, useComponentStyles, useIsomorphicLayoutEffect, useKeyboard, usePreventBodyScroll, useRootAriaHidden, vars };