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

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

@@ -1,77 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const badgeVariants = styleVariants({
-    default: {
-        backgroundColor: vars.colors.borderDefault,
-        color: vars.colors.textPrimary,
-    },
-    success: {
-        backgroundColor: vars.colors.alertSuccessBackground,
-        color: vars.colors.alertSuccessText,
-        border: `1px solid ${vars.colors.alertSuccessBorder}`,
-    },
-    warning: {
-        backgroundColor: vars.colors.alertWarningBackground,
-        color: vars.colors.alertWarningText,
-        border: `1px solid ${vars.colors.alertWarningBorder}`,
-    },
-    error: {
-        backgroundColor: vars.colors.alertErrorBackground,
-        color: vars.colors.alertErrorText,
-        border: `1px solid ${vars.colors.alertErrorBorder}`,
-    },
-    info: {
-        backgroundColor: vars.colors.alertInfoBackground,
-        color: vars.colors.alertInfoText,
-        border: `1px solid ${vars.colors.alertInfoBorder}`,
-    },
-});
-export const badgeSizes = styleVariants({
-    small: {
-        fontSize: '0.7rem',
-        padding: '0.125rem 0.375rem',
-        borderRadius: '0.25rem',
-    },
-    medium: {
-        fontSize: '0.75rem',
-        padding: '0.25rem 0.5rem',
-        borderRadius: '0.375rem',
-    },
-    large: {
-        fontSize: '0.875rem',
-        padding: '0.375rem 0.625rem',
-        borderRadius: '0.5rem',
-    },
-});
-export const badge = styleWithLayer({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontWeight: '500',
-    whiteSpace: 'nowrap',
-    fontFamily: vars.fontFamily.body,
-    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out',
-});
-export const badgeDot = styleWithLayer({
-    width: '0.5rem',
-    height: '0.5rem',
-    borderRadius: '50%',
-    display: 'inline-block',
-    padding: 0,
-    minWidth: 'auto',
-});
-export const badgeDotSizes = styleVariants({
-    small: {
-        width: '0.375rem',
-        height: '0.375rem',
-    },
-    medium: {
-        width: '0.5rem',
-        height: '0.5rem',
-    },
-    large: {
-        width: '0.625rem',
-        height: '0.625rem',
-    },
-});

package/dist/components/Box/Box.d.ts

@@ -1,11 +0,0 @@
-import { type Sprinkles } from '../../styles/sprinkles.css';
-import React from 'react';
-type BoxProps = Sprinkles & {
-    as?: React.ElementType;
-    children?: React.ReactNode;
-    className?: string;
-    [key: string]: unknown;
-};
-declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export default Box;
-export type { BoxProps };

package/dist/components/Box/Box.js

@@ -1,54 +0,0 @@
-import clsx from 'clsx';
-import { sprinkles } from '../../styles/sprinkles.css';
-import { reset } from './reset.css';
-import React, { forwardRef } from 'react';
-const Box = forwardRef((props, ref) => {
-    const { as: Component = 'div', className, children, ...rest } = props;
-    const sprinkleProps = {};
-    const otherProps = { ref };
-    const sprinkleKeys = new Set([
-        'display',
-        'width',
-        'height',
-        'flexDirection',
-        'justifyContent',
-        'alignItems',
-        'paddingTop',
-        'paddingBottom',
-        'paddingLeft',
-        'paddingRight',
-        'marginLeft',
-        'marginRight',
-        'marginTop',
-        'marginBottom',
-        'borderLeft',
-        'borderRight',
-        'borderTop',
-        'borderBottom',
-        'borderRadius',
-        'gap',
-        'padding',
-        'border',
-        'paddingX',
-        'paddingY',
-        'marginX',
-        'marginY',
-        'placeItems',
-        'color',
-        'background',
-    ]);
-    Object.entries(rest).forEach(([key, value]) => {
-        if (sprinkleKeys.has(key)) {
-            sprinkleProps[key] = value;
-        }
-        else {
-            otherProps[key] = value;
-        }
-    });
-    return React.createElement(Component, {
-        className: clsx(reset, sprinkles(sprinkleProps), className),
-        ...otherProps,
-    }, children);
-});
-Box.displayName = 'Box';
-export default Box;

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

@@ -1,2 +0,0 @@
-export { default } from './Box';
-export type { BoxProps } from './Box';

package/dist/components/Box/index.js

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

package/dist/components/Box/reset.css.d.ts

@@ -1 +0,0 @@
-export declare const reset: string;

package/dist/components/Box/reset.css.js

@@ -1,15 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { componentsLayer } from '../../styles/layers.css';
-export const reset = style({
-    '@layer': {
-        [componentsLayer]: {
-            margin: 0,
-            padding: 0,
-            border: 0,
-            boxSizing: 'border-box',
-            fontSize: '100%',
-            font: 'inherit',
-            verticalAlign: 'baseline',
-        },
-    },
-});

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type BreadcrumbItem = {
-    label: string;
-    href?: string;
-    current?: boolean;
-};
-type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    items: BreadcrumbItem[];
-    separator?: string;
-};
-declare const Breadcrumb: ({ items, className, separator }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
-export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { breadcrumb, breadcrumbList, breadcrumbItem, breadcrumbLink, breadcrumbSeparator, breadcrumbCurrent, } from './styles.css';
-import Box from '../Box';
-const Breadcrumb = ({ items, className, separator = '/' }) => {
-    return (_jsx(Box, { as: "nav", "aria-label": "Breadcrumb", className: clsx(breadcrumb, className), display: "flex", alignItems: "center", gap: "small", fontSize: "14px", children: _jsx(Box, { as: "ol", className: breadcrumbList, display: "flex", alignItems: "center", style: { listStyle: 'none' }, margin: "none", padding: "none", gap: "small", children: items.map((item, index) => (_jsxs(Box, { as: "li", className: breadcrumbItem, display: "flex", alignItems: "center", children: [item.href && !item.current ? (_jsx(Box, { as: "a", href: item.href, className: breadcrumbLink, display: "inline", alignItems: "center", color: "c5-600", fontSize: "14px", textDecoration: "none", children: item.label })) : (_jsx(Box, { as: "span", className: breadcrumbCurrent, display: "inline", alignItems: "center", color: "c5-700", fontSize: "14px", fontWeight: "500", children: item.label })), index < items.length - 1 && (_jsx(Box, { as: "span", className: breadcrumbSeparator, color: "c5-500", fontSize: "12px", style: { userSelect: 'none' }, children: separator }))] }, index))) }) }));
-};
-export default Breadcrumb;

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

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

package/dist/components/Breadcrumb/index.js

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

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

@@ -1,6 +0,0 @@
-export declare const breadcrumb: string;
-export declare const breadcrumbList: string;
-export declare const breadcrumbItem: string;
-export declare const breadcrumbLink: string;
-export declare const breadcrumbSeparator: string;
-export declare const breadcrumbCurrent: string;

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

@@ -1,50 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const breadcrumb = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '4px',
-    fontFamily: vars.fontFamily.body,
-    fontSize: '14px',
-});
-export const breadcrumbList = style({
-    display: 'flex',
-    alignItems: 'center',
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-    gap: '4px',
-});
-export const breadcrumbItem = style({
-    display: 'flex',
-    alignItems: 'center',
-});
-export const breadcrumbLink = style({
-    display: 'inline-flex',
-    alignItems: 'center',
-    color: vars.colors.textSecondary,
-    textDecoration: 'none',
-    fontSize: '14px',
-    ':hover': {
-        color: vars.colors.buttonBackgroundPrimary,
-        textDecoration: 'underline',
-    },
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        outlineOffset: '2px',
-        borderRadius: '4px',
-    },
-});
-export const breadcrumbSeparator = style({
-    color: vars.colors.textDisabled,
-    fontSize: '12px',
-    userSelect: 'none',
-});
-export const breadcrumbCurrent = style({
-    display: 'inline-flex',
-    alignItems: 'center',
-    color: vars.colors.textPrimary,
-    fontSize: '14px',
-    fontWeight: '500',
-});

package/dist/components/Button/Button.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Sprinkles & {
-    variant: 'primary' | 'secondary';
-    children?: React.ReactNode;
-    label?: string;
-    fullWidth?: boolean;
-};
-declare const Button: ({ label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
-export default Button;

package/dist/components/Button/Button.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { button, buttonVariants } from './styles.css';
-import Box from '../Box';
-const Button = ({ label, ...props }) => {
-    return (_jsx(Box, { as: "button", borderRadius: "large", width: props.fullWidth ? '100%' : undefined, className: clsx(buttonVariants[props.variant], button, props.className), ...props, children: props.children || label }));
-};
-export default Button;

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

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

package/dist/components/Button/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const buttonVariants: Record<"primary" | "secondary", string>;
-export declare const button: string;

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

@@ -1,30 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const buttonVariants = styleVariants({
-    primary: {
-        backgroundColor: vars.colors.buttonBackgroundPrimary,
-        color: vars.colors.buttonTextPrimary,
-        ':focus-visible': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
-        },
-        ':hover': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
-        },
-    },
-    secondary: {
-        backgroundColor: vars.colors.buttonBackgroundSecondary,
-        color: vars.colors.buttonTextSecondary,
-        ':focus-visible': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
-        },
-        ':hover': {
-            backgroundColor: vars.colors.buttonBackgroundFocusedSecondary,
-        },
-    },
-});
-export const button = styleWithLayer({
-    padding: '1rem',
-    borderRadius: '1rem',
-    border: 0,
-});

package/dist/components/Card/Card.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type CardProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    variant?: 'elevated' | 'outlined' | 'filled';
-    children?: React.ReactNode;
-    padding?: 'none' | 'small' | 'medium' | 'large';
-};
-declare const Card: ({ variant, padding, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
-export default Card;

package/dist/components/Card/Card.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { card, cardVariants } from './styles.css';
-import Box from '../Box';
-const Card = ({ variant = 'elevated', padding = 'medium', ...props }) => {
-    return (_jsx(Box, { as: "div", borderRadius: "large", padding: padding !== 'none' ? padding : undefined, className: clsx(cardVariants[variant], card, props.className), ...props, children: props.children }));
-};
-export default Card;

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

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

package/dist/components/Card/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const cardVariants: Record<"filled" | "elevated" | "outlined", string>;
-export declare const card: string;

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

@@ -1,25 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const cardVariants = styleVariants({
-    elevated: {
-        backgroundColor: vars.colors.backgroundDefault,
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-        border: 'none',
-    },
-    outlined: {
-        backgroundColor: vars.colors.backgroundDefault,
-        border: `1px solid ${vars.colors.borderDefault}`,
-        boxShadow: 'none',
-    },
-    filled: {
-        backgroundColor: vars.colors.backgroundMuted,
-        border: 'none',
-        boxShadow: 'none',
-    },
-});
-export const card = styleWithLayer({
-    display: 'block',
-    position: 'relative',
-    transition: 'all 0.2s ease-in-out',
-});

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,151 +0,0 @@
-import React from 'react';
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
-    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;
-    indeterminate?: boolean;
-} & React.RefAttributes<HTMLInputElement>>;
-export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { forwardRef, useEffect, useRef } from 'react';
-import { checkboxContainer, checkboxInput, checkboxLabel } from './styles.css';
-import Box from '../Box';
-const Checkbox = forwardRef(({ label, className, indeterminate, ...props }, ref) => {
-    const inputRef = useRef(null);
-    const combinedRef = (node) => {
-        if (typeof ref === 'function') {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-        inputRef.current = node;
-    };
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.indeterminate = !!indeterminate;
-        }
-    }, [indeterminate]);
-    return (_jsxs(Box, { as: "label", className: clsx(checkboxContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "checkbox", ref: combinedRef, className: checkboxInput, style: { width: '18px', height: '18px' }, ...props }), label && (_jsx(Box, { as: "span", className: checkboxLabel, children: label }))] }));
-});
-Checkbox.displayName = 'Checkbox';
-export default Checkbox;

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

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

package/dist/components/Checkbox/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const checkboxContainer: string;
-export declare const checkboxInput: string;
-export declare const checkboxLabel: string;

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

@@ -1,31 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const checkboxContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-    cursor: 'pointer',
-    userSelect: 'none',
-});
-export const checkboxInput = style({
-    width: '18px',
-    height: '18px',
-    border: `2px solid ${vars.colors.borderDefault}`,
-    borderRadius: '4px',
-    cursor: 'pointer',
-    accentColor: vars.colors.buttonBackgroundPrimary,
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
-        outlineOffset: '2px',
-    },
-    ':disabled': {
-        cursor: 'not-allowed',
-        opacity: 0.5,
-    },
-});
-export const checkboxLabel = styleWithLayer({
-    fontFamily: vars.fontFamily.body,
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-});