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

package/dist/components/FileUpload/FileUpload.js

@@ -1,106 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useState, useRef, useCallback } from 'react';
-import { fileUploadContainer, fileUploadDropzone, fileUploadDropzoneVariants, fileUploadLabel, fileUploadText, fileUploadHint, fileUploadInput, fileUploadList, fileUploadItem, fileUploadItemInfo, fileUploadItemName, fileUploadItemSize, fileUploadRemoveButton, fileUploadError, fileUploadIcon, fileUploadProgressBar, fileUploadProgressFill, fileUploadProgressFillVariants, } from './styles.css';
-import Box from '../Box';
-const formatFileSize = (bytes) => {
-    if (bytes === 0)
-        return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-};
-const FileUpload = ({ label, files = [], onFilesChange, onFileAdd, onFileRemove, accept, multiple = false, maxFileSize, maxFiles, disabled = false, dropzoneText = 'Drag and drop files here, or click to browse', hint, showProgress = true, className, ...props }) => {
-    const [isDragOver, setIsDragOver] = useState(false);
-    const [error, setError] = useState(null);
-    const inputRef = useRef(null);
-    const validateFile = (file) => {
-        if (maxFileSize && file.size > maxFileSize) {
-            return `File size exceeds ${formatFileSize(maxFileSize)}`;
-        }
-        if (accept) {
-            const acceptedTypes = accept.split(',').map((type) => type.trim());
-            const isAccepted = acceptedTypes.some((type) => {
-                if (type.includes('*')) {
-                    return file.type.startsWith(type.replace('/*', ''));
-                }
-                return file.type === type || file.name.endsWith(type);
-            });
-            if (!isAccepted) {
-                return `File type not accepted. Allowed: ${accept}`;
-            }
-        }
-        return null;
-    };
-    const handleFiles = useCallback((fileList) => {
-        if (!fileList || disabled)
-            return;
-        const newFiles = [];
-        const errors = [];
-        Array.from(fileList).forEach((file) => {
-            const validationError = validateFile(file);
-            if (validationError) {
-                errors.push(`${file.name}: ${validationError}`);
-            }
-            else {
-                newFiles.push(file);
-            }
-        });
-        if (maxFiles && files.length + newFiles.length > maxFiles) {
-            errors.push(`Maximum ${maxFiles} files allowed`);
-            newFiles.splice(maxFiles - files.length);
-        }
-        if (errors.length > 0) {
-            setError(errors.join(', '));
-        }
-        else {
-            setError(null);
-        }
-        if (newFiles.length > 0) {
-            onFileAdd?.(newFiles);
-        }
-    }, [disabled, files.length, maxFileSize, maxFiles, accept, onFileAdd]);
-    const handleDragOver = (e) => {
-        e.preventDefault();
-        if (!disabled) {
-            setIsDragOver(true);
-        }
-    };
-    const handleDragLeave = (e) => {
-        e.preventDefault();
-        setIsDragOver(false);
-    };
-    const handleDrop = (e) => {
-        e.preventDefault();
-        setIsDragOver(false);
-        handleFiles(e.dataTransfer.files);
-    };
-    const handleClick = () => {
-        if (!disabled) {
-            inputRef.current?.click();
-        }
-    };
-    const handleInputChange = (e) => {
-        handleFiles(e.target.files);
-        e.target.value = '';
-    };
-    const handleRemove = (fileId) => {
-        onFileRemove?.(fileId);
-    };
-    const getVariant = () => {
-        if (disabled)
-            return 'disabled';
-        if (error)
-            return 'error';
-        if (isDragOver)
-            return 'dragOver';
-        return 'default';
-    };
-    return (_jsxs(Box, { className: clsx(fileUploadContainer, className), ...props, children: [label && (_jsx(Box, { as: "label", className: fileUploadLabel, children: label })), _jsxs(Box, { as: "div", className: clsx(fileUploadDropzone, fileUploadDropzoneVariants[getVariant()]), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, children: [_jsx(Box, { className: fileUploadIcon, "aria-hidden": "true", children: _jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), _jsx("polyline", { points: "17,8 12,3 7,8" }), _jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }) }), _jsx(Box, { as: "p", className: fileUploadText, children: dropzoneText }), hint && (_jsx(Box, { as: "p", className: fileUploadHint, children: hint })), _jsx(Box, { as: "input", ref: inputRef, type: "file", className: fileUploadInput, onChange: handleInputChange, accept: accept, multiple: multiple, disabled: disabled, "aria-label": "File upload input" })] }), error && (_jsx(Box, { as: "p", className: fileUploadError, role: "alert", children: error })), files.length > 0 && (_jsx(Box, { as: "ul", className: fileUploadList, "aria-label": "Uploaded files", children: files.map((file) => (_jsxs(Box, { as: "li", className: fileUploadItem, children: [_jsxs(Box, { className: fileUploadItemInfo, children: [_jsx(Box, { as: "p", className: fileUploadItemName, title: file.name, children: file.name }), _jsxs(Box, { as: "p", className: fileUploadItemSize, children: [formatFileSize(file.size), file.status === 'uploading' &&
-                                            showProgress &&
-                                            ' • Uploading...', file.status === 'success' && ' • Complete', file.status === 'error' &&
-                                            file.errorMessage &&
-                                            ` • ${file.errorMessage}`] }), showProgress && file.status === 'uploading' && (_jsx(Box, { className: fileUploadProgressBar, children: _jsx(Box, { className: clsx(fileUploadProgressFill, fileUploadProgressFillVariants[file.status]), style: { width: `${file.progress}%` } }) }))] }), _jsx(Box, { as: "button", className: fileUploadRemoveButton, onClick: () => handleRemove(file.id), type: "button", "aria-label": `Remove ${file.name}`, children: "\u00D7" })] }, file.id))) }))] }));
-};
-export default FileUpload;

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

@@ -1,2 +0,0 @@
-export { default as FileUpload } from './FileUpload';
-export type { FileUploadProps, FileUploadFile } from './FileUpload';

package/dist/components/FileUpload/index.js

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

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

@@ -1,19 +0,0 @@
-export declare const fileUploadContainer: string;
-export declare const fileUploadDropzone: string;
-export declare const fileUploadDropzoneVariants: Record<"default" | "disabled" | "error" | "dragOver", string>;
-export declare const fileUploadLabel: string;
-export declare const fileUploadText: string;
-export declare const fileUploadHint: string;
-export declare const fileUploadInput: string;
-export declare const fileUploadList: string;
-export declare const fileUploadItem: string;
-export declare const fileUploadItemInfo: string;
-export declare const fileUploadItemName: string;
-export declare const fileUploadItemSize: string;
-export declare const fileUploadItemProgress: string;
-export declare const fileUploadRemoveButton: string;
-export declare const fileUploadError: string;
-export declare const fileUploadIcon: string;
-export declare const fileUploadProgressBar: string;
-export declare const fileUploadProgressFill: string;
-export declare const fileUploadProgressFillVariants: Record<"success" | "error" | "uploading", string>;

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

@@ -1,145 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const fileUploadContainer = styleWithLayer({
-    width: '100%',
-});
-export const fileUploadDropzone = styleWithLayer({
-    border: `2px dashed ${vars.colors.borderDefault}`,
-    borderRadius: '12px',
-    padding: '2rem',
-    textAlign: 'center',
-    cursor: 'pointer',
-    transition: 'all 0.2s ease',
-    backgroundColor: vars.colors.backgroundMuted,
-    ':hover': {
-        borderColor: vars.colors.inputBorderFocused,
-        backgroundColor: vars.colors.alertInfoBackground,
-    },
-});
-export const fileUploadDropzoneVariants = styleVariants({
-    default: {},
-    dragOver: {
-        borderColor: vars.colors.buttonBackgroundPrimary,
-        backgroundColor: vars.colors.alertInfoBackground,
-        borderStyle: 'solid',
-    },
-    error: {
-        borderColor: vars.colors.alertErrorBorder,
-        backgroundColor: vars.colors.alertErrorBackground,
-    },
-    disabled: {
-        cursor: 'not-allowed',
-        opacity: 0.6,
-        ':hover': {
-            borderColor: vars.colors.borderDefault,
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-    },
-});
-export const fileUploadLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px',
-});
-export const fileUploadText = styleWithLayer({
-    fontSize: '14px',
-    color: vars.colors.textSecondary,
-    marginTop: '0.5rem',
-});
-export const fileUploadHint = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '0.5rem',
-});
-export const fileUploadInput = styleWithLayer({
-    display: 'none',
-});
-export const fileUploadList = styleWithLayer({
-    marginTop: '1rem',
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '0.75rem',
-});
-export const fileUploadItem = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.75rem',
-    padding: '0.75rem',
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderMuted}`,
-    borderRadius: '8px',
-});
-export const fileUploadItemInfo = styleWithLayer({
-    flex: 1,
-    minWidth: 0,
-});
-export const fileUploadItemName = styleWithLayer({
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-});
-export const fileUploadItemSize = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '2px',
-});
-export const fileUploadItemProgress = styleWithLayer({
-    flex: 1,
-    maxWidth: '200px',
-});
-export const fileUploadRemoveButton = styleWithLayer({
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '0.25rem',
-    color: vars.colors.textSecondary,
-    fontSize: '18px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '4px',
-    transition: 'all 0.15s ease',
-    ':hover': {
-        color: vars.colors.alertErrorText,
-        backgroundColor: vars.colors.alertErrorBackground,
-    },
-});
-export const fileUploadError = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.alertErrorText,
-    marginTop: '0.5rem',
-});
-export const fileUploadIcon = styleWithLayer({
-    fontSize: '24px',
-    color: vars.colors.textSecondary,
-});
-export const fileUploadProgressBar = styleWithLayer({
-    width: '100%',
-    height: '4px',
-    backgroundColor: vars.colors.borderMuted,
-    borderRadius: '2px',
-    overflow: 'hidden',
-    marginTop: '0.5rem',
-});
-export const fileUploadProgressFill = styleWithLayer({
-    height: '100%',
-    backgroundColor: vars.colors.buttonBackgroundPrimary,
-    transition: 'width 0.3s ease',
-});
-export const fileUploadProgressFillVariants = styleVariants({
-    uploading: {
-        backgroundColor: vars.colors.buttonBackgroundPrimary,
-    },
-    success: {
-        backgroundColor: vars.colors.alertSuccessBorder,
-    },
-    error: {
-        backgroundColor: vars.colors.alertErrorBorder,
-    },
-});

package/dist/components/Form/Form.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type FormProps = React.FormHTMLAttributes<HTMLFormElement> & Sprinkles & {
-    children?: React.ReactNode;
-};
-declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
-export default Form;

package/dist/components/Form/Form.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { formStyle } from './styles.css';
-import Box from '../Box';
-const Form = (props) => {
-    return (_jsx(Box, { as: "form", gap: "medium", paddingX: "large", className: clsx(formStyle, props.className), ...props, children: props.children }));
-};
-export default Form;

package/dist/components/Form/FormInput.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { InputProps } from '../Input/Input';
-type FormInputProps = React.InputHTMLAttributes<HTMLInputElement> & InputProps;
-declare const FormInput: (props: FormInputProps) => import("react/jsx-runtime").JSX.Element;
-export default FormInput;

package/dist/components/Form/FormInput.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { formInputStyle } from './styles.css';
-import { Input } from '../..';
-import Box from '../Box';
-const FormInput = (props) => {
-    return (_jsx(Box, { as: Input, padding: "small", className: clsx(formInputStyle, props.className), label: props.label, ...props }));
-};
-export default FormInput;

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

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

package/dist/components/Form/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const formStyle: string;
-export declare const formInputStyle: string;

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

@@ -1,11 +0,0 @@
-import { styleWithLayer } from '../../styles/utils';
-export const formStyle = styleWithLayer({
-    display: 'grid',
-    gridTemplateRows: 'min-content 1fr min-content',
-});
-export const formInputStyle = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-});

package/dist/components/Grid/Grid.d.ts

@@ -1,162 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
-export type GridGap = 'none' | 'small' | 'medium' | 'large';
-export type GridProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    columns?: GridColumns;
-    gap?: GridGap;
-    minChildWidth?: string;
-    children?: React.ReactNode;
-};
-declare const Grid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    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";
-    };
-} & {
-    columns?: GridColumns;
-    gap?: GridGap;
-    minChildWidth?: string;
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
-export default Grid;

package/dist/components/Grid/Grid.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import Box from '../Box';
-const gapMap = {
-    none: '0',
-    small: '0.5rem',
-    medium: '1rem',
-    large: '2rem',
-};
-const Grid = forwardRef(({ columns, gap = 'medium', minChildWidth, children, ...props }, ref) => {
-    const gapValue = gap;
-    const gridStyle = {
-        display: 'grid',
-        gap: gapMap[gapValue],
-    };
-    if (minChildWidth) {
-        gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth},1fr))`;
-    }
-    else if (columns) {
-        gridStyle.gridTemplateColumns = `repeat(${columns},1fr)`;
-    }
-    return (_jsx(Box, { ref: ref, className: props.className, style: { ...gridStyle, ...props.style }, ...props, children: children }));
-});
-Grid.displayName = 'Grid';
-export default Grid;

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

@@ -1,2 +0,0 @@
-export { default as Grid } from './Grid';
-export type { GridProps, GridColumns, GridGap } from './Grid';

package/dist/components/Grid/index.js

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

package/dist/components/Icon/Icon.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type IconProps = React.HTMLAttributes<HTMLSpanElement> & Sprinkles & {
-    name?: string;
-    children?: React.ReactNode;
-    color?: string;
-};
-declare const IconComponent: {
-    ({ name, children, className, color }: IconProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default IconComponent;

package/dist/components/Icon/Icon.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { icon } from './styles.css';
-import Box from '../Box';
-const IconComponent = ({ name, children, className, color }) => {
-    const iconMap = {
-        check: '✓',
-        error: '✗',
-        warning: '⚠',
-        info: 'i',
-        success: '✓',
-        close: '×',
-    };
-    const displayContent = children || (name ? iconMap[name] : undefined);
-    if (!displayContent) {
-        return null;
-    }
-    return (_jsx(Box, { as: "span", className: clsx(icon, className), style: { color }, "aria-hidden": "true", children: displayContent }));
-};
-IconComponent.displayName = 'Icon';
-export default IconComponent;

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

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

package/dist/components/Icon/index.js

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

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

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

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

@@ -1,9 +0,0 @@
-import { styleWithLayer } from '../../styles/utils';
-export const icon = styleWithLayer({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    fontSize: '16px',
-    lineHeight: '1',
-    userSelect: 'none',
-});

package/dist/components/Input/Input.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & Sprinkles & {
-    label?: string;
-    fullWidth?: boolean;
-};
-declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;
-export default Input;