@nayhoo/ui 0.6.1 → 0.8.0

package/dist/{index.d.ts → theme/index.d.ts}

@@ -1,16 +1,27 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+export { e as AvatarFallbackVariants, c as AvatarImageVariants, A as AvatarVariants, d as avatarFallbackRecipe, b as avatarImageRecipe, a as avatarRecipe } from '../avatar.css-BKo21sUI.js';
+export { B as BadgeVariants, b as badgeRecipe } from '../badge.css-ToNvOJof.js';
+export { B as BoxVariants, b as boxRecipe } from '../box.css-ic5Toaj1.js';
+export { B as ButtonVariants, b as buttonRecipe } from '../button.css-CU-ScpcU.js';
+export { C as CardVariants, c as cardRecipe } from '../card.css-r1QAh--W.js';
+export { a as CheckboxIndicatorVariants, C as CheckboxVariants, b as checkboxIndicatorRecipe, c as checkboxRecipe } from '../checkbox.css-BlFMNrMD.js';
+export { C as ContainerVariants, c as containerRecipe } from '../container.css-DEKRVrvD.js';
+export { F as FlexVariants, f as flexRecipe } from '../flex.css-CMy65zXP.js';
+export { F as FormFieldVariants, a as FormLabelVariants, b as FormMessageVariants, f as formFieldRecipe, c as formLabelRecipe, d as formMessageRecipe } from '../form.css-DJxDoc1T.js';
+export { G as GridVariants, g as gridRecipe } from '../grid.css-BvgQR1FB.js';
+export { I as IconButtonVariants, i as iconButtonRecipe } from '../icon-button.css-DxZdHUEt.js';
 import * as _vanilla_extract_recipes from '@vanilla-extract/recipes';
 import { RecipeVariants } from '@vanilla-extract/recipes';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
-import * as react from 'react';
-import react__default from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as FormPrimitive from '@radix-ui/react-form';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import * as MenuPrimitive from '@radix-ui/react-menu';
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+export { L as LinkVariants, l as linkRecipe } from '../link.css-J250gDi8.js';
+export { a as MenuItemVariants, b as MenuLabelVariants, c as MenuSeparatorVariants, M as MenuVariants, m as menuItemRecipe, d as menuLabelRecipe, e as menuRecipe, f as menuSeparatorRecipe } from '../menu.css-5kJKHBR_.js';
+export { P as PanelVariants, p as panelRecipe } from '../panel.css-DUVSZSQ6.js';
+export { S as SeparatorVariants, s as separatorRecipe } from '../separator.css-Hl8ZhcXR.js';
+export { S as SkeletonVariants, s as skeletonRecipe } from '../skeleton.css-JJ3Of78e.js';
+export { S as SpinnerVariants, s as spinnerRecipe } from '../spinner.css-DDZLGtPI.js';
+export { S as StatusVariants, s as statusRecipe } from '../status.css-D2Xhx8gm.js';
+export { S as SwitchThumbVariants, a as SwitchVariants, s as switchRecipe, b as switchThumbRecipe } from '../switch.css-Ku46q4IP.js';
+export { T as TextFieldVariants, t as textFieldRecipe } from '../text-field.css-Da2cQDwY.js';
+export { T as TextVariants, t as textRecipe } from '../text.css-onESqiq6.js';
+export { T as TooltipContentVariants, t as tooltipContentRecipe } from '../tooltip.css-kATBcXZP.js';
 
 declare const hide: string;
 
@@ -18,1108 +29,8 @@ declare const pulse: string;
 
 declare const spin: string;
 
-declare const avatarRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    size: {
-        "1": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "4": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "5": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "6": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    shape: {
-        square: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        circle: {
-            borderRadius: "50%";
-        };
-    };
-    inactive: {
-        true: {
-            opacity: ".3";
-        };
-    };
-    interactive: {
-        true: {
-            selectors: {
-                "&::after": {
-                    content: "\"\"";
-                    position: "absolute";
-                    top: "0";
-                    right: "0";
-                    bottom: "0";
-                    left: "0";
-                    backgroundColor: "rgba(0, 0, 0, 0.08)";
-                    opacity: "0";
-                    pointerEvents: "none";
-                    transition: "opacity 100ms linear";
-                };
-                "&:hover::after": {
-                    opacity: "1";
-                };
-                '&[data-state="open"]::after': {
-                    backgroundColor: "rgba(0, 0, 0, 0.12)";
-                    opacity: "1";
-                };
-            };
-        };
-    };
-}>;
-type AvatarVariants = NonNullable<RecipeVariants<typeof avatarRecipe>>;
-
-declare const statusRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    size: {
-        "1": {
-            width: number;
-            height: number;
-        };
-        "2": {
-            width: number;
-            height: number;
-        };
-    };
-    variant: {
-        gray: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        blue: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        green: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        yellow: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        red: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type StatusVariants = NonNullable<RecipeVariants<typeof statusRecipe>>;
-
-type AvatarProps = AvatarPrimitive.AvatarProps & AvatarVariants & {
-    alt?: string;
-    fallback?: react__default.ReactNode;
-    src?: string;
-    status?: StatusVariants["variant"];
-};
-declare const Avatar: ({ alt, fallback, src, status, style, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
-
-declare const badgeRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    color: {
-        primary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        secondary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        error: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    size: {
-        "1": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type BadgeVariants = NonNullable<RecipeVariants<typeof badgeRecipe>>;
-
-type ComponentProps<E extends React.ElementType, Variants> = Variants & React.ComponentProps<E> & {
-    asChild?: boolean;
-};
-
-declare const defaultElement$f = "span";
-type BadgeProps = ComponentProps<typeof defaultElement$f, BadgeVariants & {
-    label: string;
-}>;
-declare const Badge: ({ asChild, label, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
-
-declare const boxRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type BoxVariants = NonNullable<RecipeVariants<typeof boxRecipe>>;
-
-declare const defaultElement$e = "div";
-type BoxProps = ComponentProps<typeof defaultElement$e, BoxVariants>;
-declare const Box: ({ asChild, ...props }: BoxProps) => react_jsx_runtime.JSX.Element;
-
-declare const buttonRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    fullWidth: {
-        true: {
-            width: "100%";
-        };
-    };
-    loading: {
-        true: {
-            color: "transparent !important";
-        };
-    };
-    size: {
-        "1": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    shape: {
-        square: {};
-        pill: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    variant: {
-        primary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            selectors: {
-                "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-                "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        secondary: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            selectors: {
-                "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-                "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        outline: {
-            boxShadow: `inset 0 0 0 1px var(--${string})` | `inset 0 0 0 1px var(--${string}, ${string})` | `inset 0 0 0 1px var(--${string}, ${number})`;
-            selectors: {
-                "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-                "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        ghost: {
-            backgroundColor: "transparent";
-            selectors: {
-                "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-                "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        error: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            selectors: {
-                "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-                "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        success: {
-            backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            selectors: {
-                "&:hover": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-                "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-    };
-}>;
-type ButtonVariants = RecipeVariants<typeof buttonRecipe>;
-
-declare const defaultElement$d = "button";
-type ButtonProps = ComponentProps<typeof defaultElement$d, ButtonVariants>;
-declare const Button: ({ asChild, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
-
-declare const cardRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    variant: {
-        outline: {
-            outline: `1px solid var(--${string})` | `1px solid var(--${string}, ${string})` | `1px solid var(--${string}, ${number})`;
-        };
-        ghost: {};
-    };
-    disableElevation: {
-        true: {
-            boxShadow: "none";
-        };
-    };
-}>;
-type CardVariants = NonNullable<RecipeVariants<typeof cardRecipe>>;
-
-declare const defaultElement$c = "div";
-type CardProps = ComponentProps<typeof defaultElement$c, CardVariants>;
-declare const Card: ({ asChild, ...props }: CardProps) => react_jsx_runtime.JSX.Element;
-
-declare const checkboxRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    size: {
-        "1": {
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type CheckboxVariants = NonNullable<RecipeVariants<typeof checkboxRecipe>>;
-declare const checkboxIndicatorRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type CheckboxIndicatorVariants = NonNullable<RecipeVariants<typeof checkboxIndicatorRecipe>>;
-
-type CheckboxProps = CheckboxPrimitive.CheckboxProps & CheckboxVariants & CheckboxIndicatorVariants;
-declare const Checkbox: ({ ...props }: CheckboxProps) => react_jsx_runtime.JSX.Element;
-
-declare const containerRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    size: {
-        "1": {
-            maxWidth: "430px";
-        };
-        "2": {
-            maxWidth: "715px";
-        };
-        "3": {
-            maxWidth: "1145px";
-        };
-        "4": {
-            maxWidth: "none";
-        };
-    };
-}>;
-type ContainerVariants = NonNullable<RecipeVariants<typeof containerRecipe>>;
-
-declare const defaultElement$b = "div";
-type ContainerProps = ComponentProps<typeof defaultElement$b, ContainerVariants>;
-declare const Container: ({ asChild, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
-
-declare const menuItemRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type MenuItemVariants = NonNullable<RecipeVariants<typeof menuItemRecipe>>;
-declare const menuLabelRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type MenuLabelVariants = NonNullable<RecipeVariants<typeof menuLabelRecipe>>;
-declare const menuRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type MenuVariants = NonNullable<RecipeVariants<typeof menuRecipe>>;
-declare const menuSeparatorRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type MenuSeparatorVariants = NonNullable<RecipeVariants<typeof menuSeparatorRecipe>>;
-
-declare const panelRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type PanelVariants = NonNullable<RecipeVariants<typeof panelRecipe>>;
-
-declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
-declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-type DropdownMenuContentProps = DropdownMenuPrimitive.DropdownMenuContentProps & MenuVariants & PanelVariants;
-declare const DropdownMenuContent: ({ ...props }: DropdownMenuContentProps) => react_jsx_runtime.JSX.Element;
-type DropdownMenuItemProps = DropdownMenuPrimitive.DropdownMenuItemProps & MenuItemVariants;
-declare const DropdownMenuItem: ({ ...props }: DropdownMenuItemProps) => react_jsx_runtime.JSX.Element;
-declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
-type DropdownMenuLabelProps = DropdownMenuPrimitive.DropdownMenuLabelProps & MenuLabelVariants;
-declare const DropdownMenuLabel: ({ ...props }: DropdownMenuLabelProps) => react_jsx_runtime.JSX.Element;
-type DropdownMenuSeparatorProps = DropdownMenuPrimitive.DropdownMenuSeparatorProps & MenuSeparatorVariants;
-declare const DropdownMenuSeparator: ({ ...props }: DropdownMenuSeparatorProps) => react_jsx_runtime.JSX.Element;
-type DropdownMenuCheckboxItemProps = DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & MenuItemVariants;
-declare const DropdownMenuCheckboxItem: ({ ...props }: DropdownMenuCheckboxItemProps) => react_jsx_runtime.JSX.Element;
-declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
-type DropdownMenuRadioItemProps = DropdownMenuPrimitive.DropdownMenuRadioItemProps & MenuItemVariants;
-declare const DropdownMenuRadioItem: ({ children, ...props }: DropdownMenuRadioItemProps) => react_jsx_runtime.JSX.Element;
-
-declare const flexRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    align: {
-        start: {
-            alignItems: "flex-start";
-        };
-        center: {
-            alignItems: "center";
-        };
-        end: {
-            alignItems: "flex-end";
-        };
-        stretch: {
-            alignItems: "stretch";
-        };
-        baseline: {
-            alignItems: "baseline";
-        };
-    };
-    direction: {
-        row: {
-            flexDirection: "row";
-        };
-        column: {
-            flexDirection: "column";
-        };
-        rowReverse: {
-            flexDirection: "row-reverse";
-        };
-        columnReverse: {
-            flexDirection: "column-reverse";
-        };
-    };
-    gap: {
-        "1": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "4": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "5": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "6": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "7": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "8": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "9": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    justify: {
-        start: {
-            justifyContent: "flex-start";
-        };
-        center: {
-            justifyContent: "center";
-        };
-        end: {
-            justifyContent: "flex-end";
-        };
-        between: {
-            justifyContent: "space-between";
-        };
-    };
-    wrap: {
-        noWrap: {
-            flexWrap: "nowrap";
-        };
-        wrap: {
-            flexWrap: "wrap";
-        };
-        wrapReverse: {
-            flexWrap: "wrap-reverse";
-        };
-    };
-}>;
-type FlexVariants = NonNullable<RecipeVariants<typeof flexRecipe>>;
-
-declare const defaultElement$a = "div";
-type FlexProps = ComponentProps<typeof defaultElement$a, FlexVariants>;
-declare const Flex: ({ asChild, ...props }: FlexProps) => react_jsx_runtime.JSX.Element;
-
-declare const formFieldRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type FormFieldVariants = NonNullable<RecipeVariants<typeof formFieldRecipe>>;
-declare const formLabelRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type FormLabelVariants = NonNullable<RecipeVariants<typeof formLabelRecipe>>;
-declare const formMessageRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    error: {
-        true: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type FormMessageVariants = NonNullable<RecipeVariants<typeof formMessageRecipe>>;
-
-declare const Form: react.ForwardRefExoticComponent<FormPrimitive.FormProps & react.RefAttributes<HTMLFormElement>>;
-declare const FormControl: react.ForwardRefExoticComponent<FormPrimitive.FormControlProps & react.RefAttributes<HTMLInputElement>>;
-type FormFieldProps = FormPrimitive.FormFieldProps & FormFieldVariants;
-declare const FormField: ({ ...props }: FormFieldProps) => react_jsx_runtime.JSX.Element;
-type FormLabelProps = FormPrimitive.FormLabelProps & FormLabelVariants;
-declare const FormLabel: ({ ...props }: FormLabelProps) => react_jsx_runtime.JSX.Element;
-type FormMessageProps = FormPrimitive.FormMessageProps & FormMessageVariants;
-declare const FormMessage: ({ ...props }: FormMessageProps) => react_jsx_runtime.JSX.Element;
-declare const FormSubmit: react.ForwardRefExoticComponent<FormPrimitive.FormSubmitProps & react.RefAttributes<HTMLButtonElement>>;
-
-declare const gridRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    align: {
-        start: {
-            alignItems: "start";
-        };
-        center: {
-            alignItems: "center";
-        };
-        end: {
-            alignItems: "end";
-        };
-        stretch: {
-            alignItems: "stretch";
-        };
-        baseline: {
-            alignItems: "baseline";
-        };
-    };
-    columns: {
-        "1": {
-            gridTemplateColumns: "repeat(1, minmax(0, 1fr))";
-        };
-        "2": {
-            gridTemplateColumns: "repeat(2, minmax(0, 2fr))";
-        };
-        "3": {
-            gridTemplateColumns: "repeat(3, minmax(0, 3fr))";
-        };
-        "4": {
-            gridTemplateColumns: "repeat(4, minmax(0, 4fr))";
-        };
-        "5": {
-            gridTemplateColumns: "repeat(5, minmax(0, 5fr))";
-        };
-        "6": {
-            gridTemplateColumns: "repeat(6, minmax(0, 6fr))";
-        };
-        "7": {
-            gridTemplateColumns: "repeat(7, minmax(0, 7fr))";
-        };
-        "8": {
-            gridTemplateColumns: "repeat(8, minmax(0, 8fr))";
-        };
-        "9": {
-            gridTemplateColumns: "repeat(9, minmax(0, 9fr))";
-        };
-        "10": {
-            gridTemplateColumns: "repeat(10, minmax(0, 10fr))";
-        };
-    };
-    flow: {
-        row: {
-            gridAutoFlow: "row";
-        };
-        column: {
-            gridAutoFlow: "column";
-        };
-        dense: {
-            gridAutoFlow: "dense";
-        };
-        rowDense: {
-            gridAutoFlow: "row dense";
-        };
-        columnDense: {
-            gridAutoFlow: "column dense";
-        };
-    };
-    gap: {
-        "1": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "4": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "5": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "6": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "7": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "8": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "9": {
-            gap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    gapX: {
-        "1": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "4": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "5": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "6": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "7": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "8": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "9": {
-            columnGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    gapY: {
-        "1": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "4": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "5": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "6": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "7": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "8": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "9": {
-            rowGap: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    justify: {
-        start: {
-            justifyContent: "start";
-        };
-        center: {
-            justifyContent: "center";
-        };
-        end: {
-            justifyContent: "end";
-        };
-        between: {
-            justifyContent: "space-between";
-        };
-    };
-    rows: {
-        "1": {
-            gridTemplateRows: "repeat(1, minmax(0, 1fr))";
-        };
-        "2": {
-            gridTemplateRows: "repeat(2, minmax(0, 2fr))";
-        };
-        "3": {
-            gridTemplateRows: "repeat(3, minmax(0, 3fr))";
-        };
-        "4": {
-            gridTemplateRows: "repeat(4, minmax(0, 4fr))";
-        };
-        "5": {
-            gridTemplateRows: "repeat(5, minmax(0, 5fr))";
-        };
-        "6": {
-            gridTemplateRows: "repeat(6, minmax(0, 6fr))";
-        };
-        "7": {
-            gridTemplateRows: "repeat(7, minmax(0, 7fr))";
-        };
-        "8": {
-            gridTemplateRows: "repeat(8, minmax(0, 8fr))";
-        };
-        "9": {
-            gridTemplateRows: "repeat(9, minmax(0, 9fr))";
-        };
-        "10": {
-            gridTemplateRows: "repeat(10, minmax(0, 10fr))";
-        };
-    };
-}>;
-type GridVariants = NonNullable<RecipeVariants<typeof gridRecipe>>;
-
-declare const defaultElement$9 = "div";
-type GridProps = ComponentProps<typeof defaultElement$9, GridVariants>;
-declare const Grid: ({ asChild, ...props }: GridProps) => react_jsx_runtime.JSX.Element;
-
-declare const textRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    color: {
-        primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        error: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        subtle: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    size: {
-        "1": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "4": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "5": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "6": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "7": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "8": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "9": {
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    weight: {
-        regular: {
-            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        medium: {
-            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        bold: {
-            fontWeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type TextVariants = NonNullable<RecipeVariants<typeof textRecipe>>;
-
-type HeadingLevelVariants = "1" | "2" | "3" | "4" | "5" | "6";
-type HeadingProps = ComponentProps<"h1" | "h2" | "h3" | "h4" | "h5" | "h6", Omit<TextVariants, "size">> & {
-    level?: HeadingLevelVariants;
-};
-declare const Heading: ({ asChild, color, level, weight, ...props }: HeadingProps) => react_jsx_runtime.JSX.Element;
-
-declare const iconButtonRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    loading: {
-        true: {
-            color: "transparent !important";
-        };
-    };
-    size: {
-        "1": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "4": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-    variant: {
-        ghost: {
-            backgroundColor: "transparent";
-            borderWidth: "0";
-            selectors: {
-                "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        outline: {
-            boxShadow: `inset 0 0 0 1px var(--${string})` | `inset 0 0 0 1px var(--${string}, ${string})` | `inset 0 0 0 1px var(--${string}, ${number})`;
-            selectors: {
-                "&:active": {
-                    backgroundColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-    };
-}>;
-type IconButtonVariants = RecipeVariants<typeof iconButtonRecipe>;
-
-declare const defaultElement$8 = "button";
-type IconButtonProps = ComponentProps<typeof defaultElement$8, IconButtonVariants>;
-declare const IconButton: ({ asChild, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;
-
-type LabelSizeVariants = "1" | "2";
-type LabelProps = LabelPrimitive.LabelProps & Omit<TextVariants, "size"> & {
-    size?: LabelSizeVariants;
-};
-declare const Label: ({ color, size, weight, ...props }: LabelProps) => react_jsx_runtime.JSX.Element;
-
-declare const linkRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    color: {
-        primary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        secondary: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        error: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        subtle: {
-            color: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            textDecorationColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type LinkVariants = NonNullable<RecipeVariants<typeof linkRecipe>>;
-
-declare const defaultElement$7 = "a";
-type LinkProps = ComponentProps<typeof defaultElement$7, LinkVariants>;
-declare const Link: ({ asChild, ...props }: LinkProps) => react_jsx_runtime.JSX.Element;
-
-type MenuProps = MenuPrimitive.MenuProps & MenuVariants & {
-    className?: string;
-};
-declare const Menu: ({ ...props }: MenuProps) => react_jsx_runtime.JSX.Element;
-type MenuContentProps = MenuPrimitive.MenuContentProps & PanelVariants;
-declare const MenuContent: ({ ...props }: MenuContentProps) => react_jsx_runtime.JSX.Element;
-type MenuSeparatorProps = MenuPrimitive.MenuSeparatorProps & MenuSeparatorVariants;
-declare const MenuSeparator: ({ ...props }: MenuSeparatorProps) => react_jsx_runtime.JSX.Element;
-type MenuItemProps = MenuPrimitive.MenuItemProps & MenuItemVariants;
-declare const MenuItem: ({ ...props }: MenuItemProps) => react_jsx_runtime.JSX.Element;
-type MenuRadioItemProps = MenuPrimitive.MenuRadioItemProps & MenuItemVariants;
-declare const MenuRadioItem: ({ ...props }: MenuRadioItemProps) => react_jsx_runtime.JSX.Element;
-type MenuCheckboxItemProps = MenuPrimitive.MenuCheckboxItemProps & MenuItemVariants;
-declare const MenuCheckboxItem: ({ ...props }: MenuCheckboxItemProps) => react_jsx_runtime.JSX.Element;
-type MenuLabelProps = MenuPrimitive.MenuLabelProps & MenuLabelVariants;
-declare const MenuLabel: ({ ...props }: MenuLabelProps) => react_jsx_runtime.JSX.Element;
-declare const MenuRadioGroup: react.ForwardRefExoticComponent<MenuPrimitive.MenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
-declare const MenuGroup: react.ForwardRefExoticComponent<MenuPrimitive.MenuGroupProps & react.RefAttributes<HTMLDivElement>>;
-
-declare const defaultElement$6 = "div";
-type PanelProps = ComponentProps<typeof defaultElement$6, PanelVariants>;
-declare const Panel: ({ asChild, ...props }: PanelProps) => react_jsx_runtime.JSX.Element;
-
-declare const defaultElement$5 = "p";
-type ParagraphSizeVariants = "1" | "2";
-type ParagraphProps = ComponentProps<typeof defaultElement$5, Omit<TextVariants, "size">> & {
-    size?: ParagraphSizeVariants;
-};
-declare const Paragraph: ({ asChild, color, size, weight, ...props }: ParagraphProps) => react_jsx_runtime.JSX.Element;
-
-declare const separatorRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
-type SeparatorVariants = NonNullable<RecipeVariants<typeof separatorRecipe>>;
-
-type SeparatorProps = SeparatorPrimitive.SeparatorProps & SeparatorVariants;
-declare const Separator: ({ ...props }: SeparatorProps) => react_jsx_runtime.JSX.Element;
-
-declare const skeletonRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    variant: {
-        avatar1: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        avatar2: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        avatar3: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        avatar4: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        avatar5: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        avatar6: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        text: {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        title: {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        heading: {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        button: {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type SkeletonVariants = NonNullable<RecipeVariants<typeof skeletonRecipe>>;
-
-declare const defaultElement$4 = "div";
-type SkeletonProps = ComponentProps<typeof defaultElement$4, SkeletonVariants>;
-declare const Skeleton: ({ asChild, ...props }: SkeletonProps) => react_jsx_runtime.JSX.Element;
-
-declare const spinnerRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    size: {
-        "1": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "3": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "4": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "5": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "6": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "7": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "8": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "9": {
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type SpinnerVariants = RecipeVariants<typeof spinnerRecipe>;
-
-declare const defaultElement$3 = "div";
-type SpinnerProps = ComponentProps<typeof defaultElement$3, SpinnerVariants>;
-declare const Spinner: ({ asChild, ...props }: SpinnerProps) => react_jsx_runtime.JSX.Element;
-
-declare const defaultElement$2 = "div";
-type StatusProps = ComponentProps<typeof defaultElement$2, StatusVariants>;
-declare const Status: ({ asChild, ...props }: StatusProps) => react_jsx_runtime.JSX.Element;
-
-declare const switchRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    size: {
-        "1": {
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-        "2": {
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-        };
-    };
-}>;
-type SwitchVariants = NonNullable<RecipeVariants<typeof switchRecipe>>;
-declare const switchThumbRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    size: {
-        "1": {
-            width: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            selectors: {
-                '&[data-state="checked"]': {
-                    transform: "translateX(10px)";
-                };
-            };
-        };
-        "2": {
-            width: "20px";
-            height: "20px";
-            selectors: {
-                '&[data-state="checked"]': {
-                    transform: "translateX(18px)";
-                };
-            };
-        };
-    };
-}>;
-type SwitchThumbVariants = NonNullable<RecipeVariants<typeof switchThumbRecipe>>;
-
-type SwitchThumbProps = SwitchPrimitive.SwitchThumbProps & SwitchThumbVariants;
-declare const SwitchThumb: ({ ...props }: SwitchThumbProps) => react_jsx_runtime.JSX.Element;
-type SwitchProps = SwitchPrimitive.SwitchProps & SwitchVariants;
-declare const Switch: ({ ...props }: SwitchProps) => react_jsx_runtime.JSX.Element;
-
-declare const textFieldRecipe: _vanilla_extract_recipes.RuntimeFn<{
-    size: {
-        "1": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            selectors: {
-                "&:-webkit-autofill::first-line": {
-                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        "2": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            selectors: {
-                "&:-webkit-autofill::first-line": {
-                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-        "3": {
-            borderRadius: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            lineHeight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            height: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingLeft: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            paddingRight: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-            selectors: {
-                "&:-webkit-autofill::first-line": {
-                    fontSize: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-                };
-            };
-        };
-    };
-    error: {
-        true: {
-            boxShadow: `inset 0px 0px 0px 1px var(--${string}) !important` | `inset 0px 0px 0px 1px var(--${string}, ${string}) !important` | `inset 0px 0px 0px 1px var(--${string}, ${number}) !important`;
-        };
-    };
-    cursor: {
-        default: {
-            cursor: "default";
-            selectors: {
-                "&:focus": {
-                    cursor: "text";
-                };
-            };
-        };
-        text: {
-            cursor: "text";
-        };
-    };
-    variant: {
-        outline: {
-            boxShadow: `inset 0px 0px 0px 1px var(--${string})` | `inset 0px 0px 0px 1px var(--${string}, ${string})` | `inset 0px 0px 0px 1px var(--${string}, ${number})`;
-        };
-        ghost: {
-            boxShadow: "none";
-        };
-    };
-}>;
-type TextFieldVariants = NonNullable<RecipeVariants<typeof textFieldRecipe>>;
-
-declare const defaultElement$1 = "input";
-type TextFieldProps = ComponentProps<typeof defaultElement$1, TextFieldVariants>;
-declare const TextField: ({ asChild, ...props }: TextFieldProps) => react_jsx_runtime.JSX.Element;
-
-declare const defaultElement = "span";
-type TextProps = ComponentProps<typeof defaultElement, TextVariants>;
-declare const Text: ({ asChild, ...props }: TextProps) => react_jsx_runtime.JSX.Element;
+declare const labelRecipe: _vanilla_extract_recipes.RuntimeFn<{}>;
+type LabelVariants = NonNullable<RecipeVariants<typeof labelRecipe>>;
 
 declare const sprinkles: ((props: {
     display?: "initial" | "none" | "flex" | "block" | {
@@ -1130,13 +41,13 @@ declare const sprinkles: ((props: {
         lg?: "initial" | "none" | "flex" | "block" | undefined;
         xl?: "initial" | "none" | "flex" | "block" | undefined;
     } | undefined;
-    flexDirection?: "row" | "column" | "column-reverse" | "row-reverse" | {
-        initial?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        xs?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        sm?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        md?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        lg?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
-        xl?: "row" | "column" | "column-reverse" | "row-reverse" | undefined;
+    flexDirection?: "column" | "column-reverse" | "row" | "row-reverse" | {
+        initial?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+        xs?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+        sm?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+        md?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+        lg?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
+        xl?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
     } | undefined;
     gridTemplateColumns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {
         initial?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined;
@@ -5033,6 +3944,4 @@ declare const darkTheme: string;
 
 declare const lightTheme: string;
 
-declare function mergeClasses(...classes: (string | undefined)[]): string;
-
-export { Avatar, Badge, Box, Button, Card, Checkbox, Container, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, Flex, Form, FormControl, FormField, FormLabel, FormMessage, FormSubmit, Grid, Heading, type HeadingProps, IconButton, Label, Link, Menu, MenuCheckboxItem, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSeparator, Panel, Paragraph, Separator, Skeleton, Spinner, type Sprinkles, Status, Switch, SwitchThumb, Text, TextField, darkTheme, hide, lightTheme, mergeClasses, pulse, spin, sprinkles, theme };
+export { type LabelVariants, type Sprinkles, darkTheme, hide, labelRecipe, lightTheme, pulse, spin, sprinkles, theme };