@jordan-mace/chaser-design-system 1.2.8 → 2.0.0

package/dist/components/Pagination/styles.css.js

@@ -1,44 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const paginationContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5rem',
-});
-export const pageButton = styleWithLayer({
-    padding: '0.5rem 0.75rem',
-    borderRadius: '0.5rem',
-    border: `1px solid ${vars.colors.borderDefault}`,
-    backgroundColor: 'transparent',
-    cursor: 'pointer',
-    minWidth: '2.5rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    ':disabled': {
-        cursor: 'not-allowed',
-        opacity: 0.5,
-    },
-});
-export const pageButtonVariants = styleVariants({
-    default: {
-        color: vars.colors.textPrimary,
-        ':hover': {
-            backgroundColor: vars.colors.buttonBackgroundSecondary,
-        },
-    },
-    active: {
-        backgroundColor: vars.colors.buttonBackgroundPrimary,
-        color: vars.colors.buttonTextPrimary,
-        borderColor: vars.colors.buttonBackgroundPrimary,
-        ':hover': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
-        },
-    },
-});
-export const ellipsis = styleWithLayer({
-    padding: '0.5rem',
-    color: vars.colors.textPrimary,
-    userSelect: 'none',
-});

package/dist/components/Popover/Popover.d.ts

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
-export type PopoverTriggerType = 'click' | 'hover';
-export type PopoverProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    trigger: React.ReactNode;
-    children: React.ReactNode;
-    position?: PopoverPosition;
-    title?: string;
-    footer?: React.ReactNode;
-    showArrow?: boolean;
-    triggerType?: PopoverTriggerType;
-    closeOnClickOutside?: boolean;
-    closeOnEscape?: boolean;
-    defaultOpen?: boolean;
-    onOpenChange?: (isOpen: boolean) => void;
-};
-declare const Popover: ({ trigger, children, position, title, footer, showArrow, triggerType, closeOnClickOutside, closeOnEscape, defaultOpen, onOpenChange, className, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
-export default Popover;

package/dist/components/Popover/Popover.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useState, useRef, useEffect } from 'react';
-import { popoverContainer, popoverTrigger, popoverContent, popoverPositionVariants, popoverArrow, popoverArrowPositionVariants, popoverHeader, popoverTitle, popoverCloseButton, popoverBody, popoverFooter, } from './styles.css';
-import Box from '../Box';
-const Popover = ({ trigger, children, position = 'bottom', title, footer, showArrow = true, triggerType = 'click', closeOnClickOutside = true, closeOnEscape = true, defaultOpen = false, onOpenChange, className, ...props }) => {
-    const [isOpen, setIsOpen] = useState(defaultOpen);
-    const containerRef = useRef(null);
-    useEffect(() => {
-        onOpenChange?.(isOpen);
-    }, [isOpen, onOpenChange]);
-    useEffect(() => {
-        if (!closeOnClickOutside)
-            return;
-        const handleClickOutside = (event) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-            }
-        };
-        if (isOpen) {
-            document.addEventListener('mousedown', handleClickOutside);
-        }
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [isOpen, closeOnClickOutside]);
-    useEffect(() => {
-        if (!closeOnEscape)
-            return;
-        const handleEscape = (e) => {
-            if (e.key === 'Escape' && isOpen) {
-                setIsOpen(false);
-            }
-        };
-        document.addEventListener('keydown', handleEscape);
-        return () => document.removeEventListener('keydown', handleEscape);
-    }, [isOpen, closeOnEscape]);
-    const handleTriggerClick = () => {
-        if (triggerType === 'click') {
-            setIsOpen(!isOpen);
-        }
-    };
-    const handleTriggerMouseEnter = () => {
-        if (triggerType === 'hover') {
-            setIsOpen(true);
-        }
-    };
-    const handleTriggerMouseLeave = () => {
-        if (triggerType === 'hover') {
-            setIsOpen(false);
-        }
-    };
-    return (_jsxs(Box, { ref: containerRef, className: clsx(popoverContainer, className), onMouseEnter: handleTriggerMouseEnter, onMouseLeave: handleTriggerMouseLeave, ...props, children: [_jsx(Box, { className: popoverTrigger, onClick: handleTriggerClick, "aria-expanded": isOpen, children: trigger }), isOpen && (_jsxs(Box, { className: clsx(popoverContent, popoverPositionVariants[position]), role: "dialog", "aria-modal": "false", children: [showArrow && (_jsx(Box, { as: "span", className: clsx(popoverArrow, popoverArrowPositionVariants[position]) })), (title || triggerType === 'click') && (_jsxs(Box, { as: "div", className: popoverHeader, children: [title && (_jsx(Box, { as: "h3", className: popoverTitle, children: title })), triggerType === 'click' && (_jsx(Box, { as: "button", className: popoverCloseButton, onClick: () => setIsOpen(false), "aria-label": "Close popover", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: popoverBody, children: children }), footer && (_jsx(Box, { as: "div", className: popoverFooter, children: footer }))] }))] }));
-};
-export default Popover;

package/dist/components/Popover/index.d.ts

@@ -1,2 +0,0 @@
-export { default as Popover } from './Popover';
-export type { PopoverProps, PopoverPosition, PopoverTriggerType } from './Popover';

package/dist/components/Popover/index.js

@@ -1 +0,0 @@
-export { default as Popover } from './Popover';

package/dist/components/Popover/styles.css.d.ts

@@ -1,11 +0,0 @@
-export declare const popoverContainer: string;
-export declare const popoverTrigger: string;
-export declare const popoverContent: string;
-export declare const popoverPositionVariants: Record<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
-export declare const popoverArrow: string;
-export declare const popoverArrowPositionVariants: Record<"bottom" | "left" | "right" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight", string>;
-export declare const popoverHeader: string;
-export declare const popoverTitle: string;
-export declare const popoverCloseButton: string;
-export declare const popoverBody: string;
-export declare const popoverFooter: string;

package/dist/components/Popover/styles.css.js

@@ -1,185 +0,0 @@
-import { styleVariants, keyframes } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-const fadeIn = keyframes({
-    from: { opacity: 0, transform: 'scale(0.95)' },
-    to: { opacity: 1, transform: 'scale(1)' },
-});
-export const popoverContainer = styleWithLayer({
-    position: 'relative',
-    display: 'inline-block',
-});
-export const popoverTrigger = styleWithLayer({
-    cursor: 'pointer',
-});
-export const popoverContent = styleWithLayer({
-    position: 'absolute',
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '0.75rem',
-    boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    zIndex: 50,
-    padding: '1rem',
-    minWidth: '200px',
-    maxWidth: '400px',
-    animation: `${fadeIn} 0.15s ease-out`,
-});
-export const popoverPositionVariants = styleVariants({
-    top: {
-        bottom: '100%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        marginBottom: '0.5rem',
-    },
-    bottom: {
-        top: '100%',
-        left: '50%',
-        transform: 'translateX(-50%)',
-        marginTop: '0.5rem',
-    },
-    left: {
-        right: '100%',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        marginRight: '0.5rem',
-    },
-    right: {
-        left: '100%',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        marginLeft: '0.5rem',
-    },
-    topLeft: {
-        bottom: '100%',
-        right: 0,
-        marginBottom: '0.5rem',
-    },
-    topRight: {
-        bottom: '100%',
-        left: 0,
-        marginBottom: '0.5rem',
-    },
-    bottomLeft: {
-        top: '100%',
-        right: 0,
-        marginTop: '0.5rem',
-    },
-    bottomRight: {
-        top: '100%',
-        left: 0,
-        marginTop: '0.5rem',
-    },
-});
-export const popoverArrow = styleWithLayer({
-    position: 'absolute',
-    width: '8px',
-    height: '8px',
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    transform: 'rotate(45deg)',
-});
-export const popoverArrowPositionVariants = styleVariants({
-    top: {
-        bottom: '-5px',
-        left: '50%',
-        transform: 'translateX(-50%) rotate(45deg)',
-        borderTop: 'none',
-        borderLeft: 'none',
-    },
-    bottom: {
-        top: '-5px',
-        left: '50%',
-        transform: 'translateX(-50%) rotate(45deg)',
-        borderBottom: 'none',
-        borderRight: 'none',
-    },
-    left: {
-        right: '-5px',
-        top: '50%',
-        transform: 'translateY(-50%) rotate(45deg)',
-        borderLeft: 'none',
-        borderBottom: 'none',
-    },
-    right: {
-        left: '-5px',
-        top: '50%',
-        transform: 'translateY(-50%) rotate(45deg)',
-        borderRight: 'none',
-        borderTop: 'none',
-    },
-    topLeft: {
-        bottom: '-5px',
-        right: '1rem',
-        transform: 'rotate(45deg)',
-        borderTop: 'none',
-        borderLeft: 'none',
-    },
-    topRight: {
-        bottom: '-5px',
-        left: '1rem',
-        transform: 'rotate(45deg)',
-        borderTop: 'none',
-        borderLeft: 'none',
-    },
-    bottomLeft: {
-        top: '-5px',
-        right: '1rem',
-        transform: 'rotate(45deg)',
-        borderBottom: 'none',
-        borderRight: 'none',
-    },
-    bottomRight: {
-        top: '-5px',
-        left: '1rem',
-        transform: 'rotate(45deg)',
-        borderBottom: 'none',
-        borderRight: 'none',
-    },
-});
-export const popoverHeader = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: '0.75rem',
-    paddingBottom: '0.75rem',
-    borderBottom: `1px solid ${vars.colors.borderMuted}`,
-});
-export const popoverTitle = styleWithLayer({
-    fontFamily: vars.fontFamily.heading,
-    fontSize: '1rem',
-    fontWeight: '600',
-    color: vars.colors.textPrimary,
-    margin: 0,
-});
-export const popoverCloseButton = styleWithLayer({
-    background: 'none',
-    border: 'none',
-    padding: '0.25rem',
-    cursor: 'pointer',
-    borderRadius: '0.25rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: vars.colors.textSecondary,
-    fontSize: '1.25rem',
-    lineHeight: '1',
-    marginLeft: '0.5rem',
-    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
-    ':hover': {
-        backgroundColor: vars.colors.borderMuted,
-        color: vars.colors.textPrimary,
-    },
-});
-export const popoverBody = styleWithLayer({
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-    lineHeight: '1.5',
-});
-export const popoverFooter = styleWithLayer({
-    display: 'flex',
-    gap: '0.5rem',
-    justifyContent: 'flex-end',
-    marginTop: '0.75rem',
-    paddingTop: '0.75rem',
-    borderTop: `1px solid ${vars.colors.borderMuted}`,
-});

package/dist/components/Progress/Progress.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type ProgressProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    value: number;
-    max?: number;
-    label?: string;
-    showPercentage?: boolean;
-    variant?: 'default' | 'success' | 'warning' | 'error';
-};
-declare const Progress: ({ value, max, label, showPercentage, variant, className, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
-export default Progress;

package/dist/components/Progress/Progress.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { progress, progressBar, progressFill, progressLabel, } from './styles.css';
-import Box from '../Box';
-const Progress = ({ value, max = 100, label, showPercentage = false, variant = 'default', className, }) => {
-    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-    return (_jsxs(Box, { className: clsx(progress, className), width: "100%", children: [(label || showPercentage) && (_jsxs(Box, { className: progressLabel, display: "flex", justifyContent: "space-between", fontSize: "12px", fontWeight: "500", color: "c5-600", marginBottom: "small", fontFamily: "body", children: [label && _jsx(Box, { as: "span", children: label }), showPercentage && _jsxs(Box, { as: "span", children: [percentage, "%"] })] })), _jsx(Box, { as: "div", className: progressBar[variant], role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, children: _jsx(Box, { as: "div", className: progressFill[variant], style: { width: `${percentage}%` }, role: "presentation" }) })] }));
-};
-export default Progress;

package/dist/components/Progress/index.d.ts

@@ -1 +0,0 @@
-export { default as Progress } from './Progress';

package/dist/components/Progress/index.js

@@ -1 +0,0 @@
-export { default as Progress } from './Progress';

package/dist/components/Progress/styles.css.d.ts

@@ -1,4 +0,0 @@
-export declare const progress: string;
-export declare const progressBar: Record<"default" | "success" | "warning" | "error", string>;
-export declare const progressFill: Record<"default" | "success" | "warning" | "error", string>;
-export declare const progressLabel: string;

package/dist/components/Progress/styles.css.js

@@ -1,71 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const progress = styleWithLayer({
-    width: '100%',
-});
-export const progressBar = styleVariants({
-    default: {
-        width: '100%',
-        height: '8px',
-        backgroundColor: vars.colors.backgroundMuted,
-        borderRadius: '4px',
-        overflow: 'hidden',
-    },
-    success: {
-        width: '100%',
-        height: '8px',
-        backgroundColor: vars.colors.alertSuccessBackground,
-        borderRadius: '4px',
-        overflow: 'hidden',
-    },
-    warning: {
-        width: '100%',
-        height: '8px',
-        backgroundColor: vars.colors.alertWarningBackground,
-        borderRadius: '4px',
-        overflow: 'hidden',
-    },
-    error: {
-        width: '100%',
-        height: '8px',
-        backgroundColor: vars.colors.alertErrorBackground,
-        borderRadius: '4px',
-        overflow: 'hidden',
-    },
-});
-export const progressFill = styleVariants({
-    default: {
-        height: '100%',
-        borderRadius: '4px',
-        transition: 'width 0.3s ease',
-        backgroundColor: vars.colors.buttonBackgroundPrimary,
-    },
-    success: {
-        height: '100%',
-        borderRadius: '4px',
-        transition: 'width 0.3s ease',
-        backgroundColor: vars.colors.alertSuccessBorder,
-    },
-    warning: {
-        height: '100%',
-        borderRadius: '4px',
-        transition: 'width 0.3s ease',
-        backgroundColor: vars.colors.alertWarningBorder,
-    },
-    error: {
-        height: '100%',
-        borderRadius: '4px',
-        transition: 'width 0.3s ease',
-        backgroundColor: vars.colors.alertErrorBorder,
-    },
-});
-export const progressLabel = styleWithLayer({
-    display: 'flex',
-    justifyContent: 'space-between',
-    fontSize: '12px',
-    fontWeight: '500',
-    color: vars.colors.textSecondary,
-    marginBottom: '4px',
-    fontFamily: vars.fontFamily.body,
-});

package/dist/components/Radio/Radio.d.ts

@@ -1,161 +0,0 @@
-import React from 'react';
-type RadioGroupProps = {
-    children: React.ReactNode;
-    name: string;
-    value?: string;
-    onChange?: (value: string) => void;
-    layout?: 'vertical' | 'horizontal';
-    className?: string;
-};
-declare const RadioComponent: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
-    display?: ("flex" | "none" | "block" | "inline" | {
-        mobile?: "flex" | "none" | "block" | "inline";
-        tablet?: "flex" | "none" | "block" | "inline";
-        desktop?: "flex" | "none" | "block" | "inline";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
-    width?: ("auto" | "100%" | "50%" | "25%" | {
-        mobile?: "auto" | "100%" | "50%" | "25%";
-        tablet?: "auto" | "100%" | "50%" | "25%";
-        desktop?: "auto" | "100%" | "50%" | "25%";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
-    height?: ("auto" | "100%" | "50%" | "25%" | {
-        mobile?: "auto" | "100%" | "50%" | "25%";
-        tablet?: "auto" | "100%" | "50%" | "25%";
-        desktop?: "auto" | "100%" | "50%" | "25%";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
-    flexDirection?: ("column" | "row" | {
-        mobile?: "column" | "row";
-        tablet?: "column" | "row";
-        desktop?: "column" | "row";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
-    justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
-    alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
-    paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    gap?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    padding?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    border?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
-    });
-} & {
-    color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
-        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-    };
-    background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
-        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-    };
-} & {
-    label?: string;
-    value: string;
-} & React.RefAttributes<HTMLInputElement>> & {
-    Group: ({ children, name, value, onChange, layout, className, }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default RadioComponent;