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

package/dist/components/Collapse/Collapse.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type CollapseAnimation = 'height' | 'opacity' | 'both';
-export type CollapseProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    isOpen: boolean;
-    children: React.ReactNode;
-    animation?: CollapseAnimation;
-    duration?: number;
-    onAnimationEnd?: () => void;
-};
-declare const Collapse: ({ isOpen, children, animation, duration, className, onAnimationEnd, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
-export default Collapse;

package/dist/components/Collapse/Collapse.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useState, useRef, useEffect } from 'react';
-import { collapseContainer, collapseContent, } from './styles.css';
-import Box from '../Box';
-const Collapse = ({ isOpen, children, animation = 'both', duration = 300, className, onAnimationEnd, }) => {
-    const [height, setHeight] = useState(isOpen ? undefined : 0);
-    const [isAnimating, setIsAnimating] = useState(false);
-    const contentRef = useRef(null);
-    useEffect(() => {
-        if (isOpen) {
-            setIsAnimating(true);
-            if (contentRef.current) {
-                setHeight(contentRef.current.scrollHeight);
-            }
-        }
-        else {
-            setIsAnimating(true);
-            setHeight(0);
-        }
-    }, [isOpen]);
-    const handleTransitionEnd = () => {
-        setIsAnimating(false);
-        if (isOpen) {
-            setHeight(undefined);
-        }
-        onAnimationEnd?.();
-    };
-    const getAnimationStyles = () => {
-        const baseStyles = {
-            transition: `height ${duration}ms ease-out, opacity ${duration}ms ease-out`,
-            height: height !== undefined ? `${height}px` : undefined,
-            opacity: isOpen || isAnimating ? 1 : 0,
-        };
-        if (animation === 'height') {
-            return {
-                ...baseStyles,
-                transition: `height ${duration}ms ease-out`,
-                opacity: 1,
-            };
-        }
-        if (animation === 'opacity') {
-            return {
-                ...baseStyles,
-                transition: `opacity ${duration}ms ease-out`,
-                height: undefined,
-            };
-        }
-        return baseStyles;
-    };
-    if (!isOpen && !isAnimating && animation !== 'opacity') {
-        return null;
-    }
-    return (_jsx(Box, { className: clsx(collapseContainer, className), style: getAnimationStyles(), onTransitionEnd: handleTransitionEnd, "aria-hidden": !isOpen, children: _jsx(Box, { ref: contentRef, className: collapseContent, children: children }) }));
-};
-export default Collapse;

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

@@ -1,2 +0,0 @@
-export { default as Collapse } from './Collapse';
-export type { CollapseProps, CollapseAnimation } from './Collapse';

package/dist/components/Collapse/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const collapseContainer: string;
-export declare const collapseContent: string;
-export declare const collapseAnimation: Record<"in" | "out", string>;

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

@@ -1,36 +0,0 @@
-import { styleVariants, keyframes } from '@vanilla-extract/css';
-import { styleWithLayer } from '../../styles/utils';
-const collapseIn = keyframes({
-    from: {
-        height: 0,
-        opacity: 0,
-    },
-    to: {
-        height: 'auto',
-        opacity: 1,
-    },
-});
-const collapseOut = keyframes({
-    from: {
-        height: 'auto',
-        opacity: 1,
-    },
-    to: {
-        height: 0,
-        opacity: 0,
-    },
-});
-export const collapseContainer = styleWithLayer({
-    overflow: 'hidden',
-});
-export const collapseContent = styleWithLayer({
-    width: '100%',
-});
-export const collapseAnimation = styleVariants({
-    in: {
-        animation: `${collapseIn} 0.3s ease-out forwards`,
-    },
-    out: {
-        animation: `${collapseOut} 0.3s ease-out forwards`,
-    },
-});

package/dist/components/Combobox/Combobox.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export interface ComboboxOption {
-    value: string;
-    label: string;
-    disabled?: boolean;
-}
-export type ComboboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> & Sprinkles & {
-    label?: string;
-    options: ComboboxOption[];
-    value?: string;
-    onChange?: (value: string, option: ComboboxOption | null) => void;
-    onInputChange?: (inputValue: string) => void;
-    placeholder?: string;
-    hint?: string;
-    error?: boolean;
-    errorMessage?: string;
-    fullWidth?: boolean;
-    clearable?: boolean;
-    disabled?: boolean;
-    filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
-};
-declare const Combobox: ({ label, options, value, onChange, onInputChange, placeholder, hint, error, errorMessage, fullWidth, clearable, disabled, filterFn, className, ...props }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
-export default Combobox;

package/dist/components/Combobox/Combobox.js

@@ -1,111 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { useState, useRef, useEffect } from 'react';
-import { comboboxContainer, comboboxInput, comboboxInputVariants, comboboxLabel, comboboxDropdown, comboboxOption, comboboxOptionSelected, comboboxOptionDisabled, comboboxClearButton, comboboxArrow, comboboxNoResults, comboboxHint, comboboxErrorMessage, } from './styles.css';
-import Box from '../Box';
-const defaultFilterFn = (option, inputValue) => {
-    return option.label.toLowerCase().includes(inputValue.toLowerCase());
-};
-const Combobox = ({ label, options, value, onChange, onInputChange, placeholder = 'Search...', hint, error = false, errorMessage, fullWidth = true, clearable = true, disabled = false, filterFn = defaultFilterFn, className, ...props }) => {
-    const [inputValue, setInputValue] = useState('');
-    const [isOpen, setIsOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const containerRef = useRef(null);
-    const inputRef = useRef(null);
-    const selectedOption = options.find((opt) => opt.value === value);
-    useEffect(() => {
-        if (selectedOption) {
-            setInputValue(selectedOption.label);
-        }
-        else if (!isOpen) {
-            setInputValue('');
-        }
-    }, [selectedOption, isOpen]);
-    const filteredOptions = options.filter((option) => filterFn(option, inputValue));
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (containerRef.current &&
-                !containerRef.current.contains(event.target)) {
-                setIsOpen(false);
-                if (selectedOption) {
-                    setInputValue(selectedOption.label);
-                }
-                else {
-                    setInputValue('');
-                }
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [selectedOption]);
-    const handleInputChange = (e) => {
-        const newValue = e.target.value;
-        setInputValue(newValue);
-        setIsOpen(true);
-        setHighlightedIndex(-1);
-        onInputChange?.(newValue);
-        if (!newValue) {
-            onChange?.('', null);
-        }
-    };
-    const handleOptionClick = (option) => {
-        if (option.disabled)
-            return;
-        setInputValue(option.label);
-        setIsOpen(false);
-        onChange?.(option.value, option);
-    };
-    const handleClear = (e) => {
-        e.stopPropagation();
-        setInputValue('');
-        setIsOpen(false);
-        onChange?.('', null);
-        inputRef.current?.focus();
-    };
-    const handleKeyDown = (e) => {
-        if (disabled)
-            return;
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!isOpen) {
-                    setIsOpen(true);
-                }
-                setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
-                break;
-            case 'Enter':
-                e.preventDefault();
-                if (isOpen &&
-                    highlightedIndex >= 0 &&
-                    filteredOptions[highlightedIndex]) {
-                    handleOptionClick(filteredOptions[highlightedIndex]);
-                }
-                else {
-                    setIsOpen(!isOpen);
-                }
-                break;
-            case 'Escape':
-                setIsOpen(false);
-                if (selectedOption) {
-                    setInputValue(selectedOption.label);
-                }
-                else {
-                    setInputValue('');
-                }
-                break;
-        }
-    };
-    const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
-    return (_jsxs(Box, { className: comboboxContainer, ref: containerRef, width: fullWidth ? '100%' : undefined, children: [label && (_jsx(Box, { as: "label", className: comboboxLabel, children: label })), _jsxs(Box, { position: "relative", children: [_jsx(Box, { as: "input", ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), placeholder: placeholder, disabled: disabled, className: clsx(comboboxInput, comboboxInputVariants[error ? 'error' : 'default'], className), role: "combobox", "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": isOpen ? 'combobox-listbox' : undefined, "aria-activedescendant": highlightedIndex >= 0
-                            ? `option-${filteredOptions[highlightedIndex]?.value}`
-                            : undefined, ...props }), clearable && inputValue && !disabled && (_jsx(Box, { as: "button", className: comboboxClearButton, onClick: handleClear, type: "button", "aria-label": "Clear selection", children: "\u00D7" })), _jsx(Box, { className: comboboxArrow, "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: _jsx("path", { d: "M6 8L1 3h10z" }) }) })] }), isOpen && (_jsx(Box, { as: "ul", id: "combobox-listbox", className: comboboxDropdown, role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { as: "li", className: comboboxNoResults, children: "No results found" })) : (filteredOptions.map((option, index) => (_jsx(Box, { as: "li", id: `option-${option.value}`, className: clsx(comboboxOption, option.value === value && comboboxOptionSelected, option.disabled && comboboxOptionDisabled), onClick: () => handleOptionClick(option), role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled, style: {
-                        backgroundColor: index === highlightedIndex
-                            ? 'var(--highlight-color, #f3f4f6)'
-                            : undefined,
-                    }, children: option.label }, option.value)))) })), error && errorMessage && (_jsx(Box, { as: "div", className: comboboxErrorMessage, role: "alert", children: errorMessage })), hint && !error && (_jsx(Box, { as: "div", className: comboboxHint, children: hint }))] }));
-};
-export default Combobox;

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

@@ -1,2 +0,0 @@
-export { default as Combobox } from './Combobox';
-export type { ComboboxProps, ComboboxOption } from './Combobox';

package/dist/components/Combobox/index.js

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

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

@@ -1,13 +0,0 @@
-export declare const comboboxContainer: string;
-export declare const comboboxInput: string;
-export declare const comboboxInputVariants: Record<"default" | "error", string>;
-export declare const comboboxLabel: string;
-export declare const comboboxDropdown: string;
-export declare const comboboxOption: string;
-export declare const comboboxOptionSelected: string;
-export declare const comboboxOptionDisabled: string;
-export declare const comboboxClearButton: string;
-export declare const comboboxArrow: string;
-export declare const comboboxNoResults: string;
-export declare const comboboxHint: string;
-export declare const comboboxErrorMessage: string;

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

@@ -1,142 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const comboboxContainer = styleWithLayer({
-    position: 'relative',
-    width: '100%',
-});
-export const comboboxInput = styleWithLayer({
-    width: '100%',
-    padding: '0.75rem 2.5rem 0.75rem 1rem',
-    fontSize: '14px',
-    fontFamily: vars.fontFamily.body,
-    color: vars.colors.textPrimary,
-    backgroundColor: vars.colors.inputBackground,
-    border: `1px solid ${vars.colors.inputBorder}`,
-    borderRadius: '8px',
-    outline: 'none',
-    transition: 'border-color 0.2s ease',
-    '::placeholder': {
-        color: vars.colors.inputPlaceholder,
-    },
-    ':focus-visible': {
-        outline: `2px solid ${vars.colors.inputBorderFocused}`,
-        outlineOffset: '2px',
-    },
-    ':hover': {
-        borderColor: vars.colors.inputBorderFocused,
-    },
-    selectors: {
-        '&:disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-        '&:disabled:hover': {
-            borderColor: vars.colors.inputBorder,
-        },
-    },
-});
-export const comboboxInputVariants = styleVariants({
-    default: {},
-    error: {
-        border: `1px solid ${vars.colors.alertErrorBorder}`,
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.alertErrorBorder}`,
-        },
-        ':hover': {
-            borderColor: vars.colors.alertErrorBorder,
-        },
-    },
-});
-export const comboboxLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px',
-});
-export const comboboxDropdown = styleWithLayer({
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    backgroundColor: vars.colors.backgroundDefault,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '8px',
-    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    maxHeight: '200px',
-    overflowY: 'auto',
-    zIndex: 50,
-    marginTop: '4px',
-});
-export const comboboxOption = styleWithLayer({
-    padding: '0.75rem 1rem',
-    cursor: 'pointer',
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-    transition: 'background-color 0.15s ease',
-    ':hover': {
-        backgroundColor: vars.colors.backgroundMuted,
-    },
-    ':focus-visible': {
-        outline: 'none',
-        backgroundColor: vars.colors.backgroundMuted,
-    },
-});
-export const comboboxOptionSelected = styleWithLayer({
-    backgroundColor: vars.colors.buttonBackgroundPrimary,
-    color: vars.colors.buttonTextPrimary,
-    ':hover': {
-        backgroundColor: vars.colors.buttonBackgroundFocusedPrimary,
-    },
-});
-export const comboboxOptionDisabled = styleWithLayer({
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    ':hover': {
-        backgroundColor: 'transparent',
-    },
-});
-export const comboboxClearButton = styleWithLayer({
-    position: 'absolute',
-    right: '2.5rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    background: 'none',
-    border: 'none',
-    cursor: 'pointer',
-    padding: '0.25rem',
-    color: vars.colors.textSecondary,
-    fontSize: '16px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    ':hover': {
-        color: vars.colors.textPrimary,
-    },
-});
-export const comboboxArrow = styleWithLayer({
-    position: 'absolute',
-    right: '0.75rem',
-    top: '50%',
-    transform: 'translateY(-50%)',
-    pointerEvents: 'none',
-    color: vars.colors.textSecondary,
-});
-export const comboboxNoResults = styleWithLayer({
-    padding: '0.75rem 1rem',
-    fontSize: '14px',
-    color: vars.colors.textSecondary,
-    textAlign: 'center',
-});
-export const comboboxHint = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.textSecondary,
-    marginTop: '4px',
-});
-export const comboboxErrorMessage = styleWithLayer({
-    fontSize: '12px',
-    color: vars.colors.alertErrorText,
-    marginTop: '4px',
-});

package/dist/components/Container/Container.d.ts

@@ -1,163 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
-export type ContainerProps = Sprinkles & {
-    size?: ContainerSize;
-    centerContent?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-};
-declare const Container: React.ForwardRefExoticComponent<{
-    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";
-    };
-} & {
-    size?: ContainerSize;
-    centerContent?: boolean;
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-} & React.RefAttributes<HTMLElement>>;
-export default Container;

package/dist/components/Container/Container.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import Box from '../Box';
-const sizeMap = {
-    sm: '640px',
-    md: '768px',
-    lg: '1024px',
-    xl: '1280px',
-    full: '100%',
-};
-const Container = forwardRef(({ size = 'lg', centerContent = true, children, className, style }, ref) => {
-    const sizeValue = size;
-    const containerStyle = {
-        maxWidth: sizeMap[sizeValue],
-        marginLeft: centerContent ? 'auto' : undefined,
-        marginRight: centerContent ? 'auto' : undefined,
-    };
-    return (_jsx(Box, { ref: ref, width: "100%", className: className, style: { ...containerStyle, ...style }, children: children }));
-});
-Container.displayName = 'Container';
-export default Container;

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

@@ -1,2 +0,0 @@
-export { default as Container } from './Container';
-export type { ContainerProps, ContainerSize } from './Container';

package/dist/components/Container/index.js

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