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

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

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

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

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

package/dist/components/Progress/Progress.js

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

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

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

package/dist/components/Progress/index.js

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

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

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

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

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

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

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

package/dist/components/Radio/Radio.js

@@ -1,25 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { forwardRef, createContext, useContext } from 'react';
-import { radioContainer, radioInput, radioLabel, radioGroup, radioGroupHorizontal, } from './styles.css';
-import Box from '../Box';
-const RadioContext = createContext({});
-const Radio = forwardRef(({ label, className, value, ...props }, ref) => {
-    const context = useContext(RadioContext);
-    const name = context.name || props.name;
-    const isChecked = context.value === value;
-    const handleChange = () => {
-        if (context.onChange) {
-            context.onChange(value);
-        }
-    };
-    return (_jsxs(Box, { as: "label", className: clsx(radioContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "radio", ref: ref, name: name, value: value, checked: isChecked, onChange: handleChange, className: radioInput, ...props }), label && (_jsx(Box, { as: "span", className: radioLabel, children: label }))] }));
-});
-Radio.displayName = 'Radio';
-const RadioGroup = ({ children, name, value, onChange, layout = 'vertical', className, }) => {
-    return (_jsx(RadioContext.Provider, { value: { name, value, onChange }, children: _jsx(Box, { className: clsx(layout === 'horizontal' ? radioGroupHorizontal : radioGroup, className), children: children }) }));
-};
-const RadioComponent = Object.assign(Radio, {
-    Group: RadioGroup,
-});
-export default RadioComponent;

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

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

package/dist/components/Radio/index.js

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

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

@@ -1,5 +0,0 @@
-export declare const radioContainer: string;
-export declare const radioInput: string;
-export declare const radioLabel: string;
-export declare const radioGroup: string;
-export declare const radioGroupHorizontal: string;

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

@@ -1,42 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const radioContainer = styleWithLayer({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-    cursor: 'pointer',
-    userSelect: 'none',
-});
-export const radioInput = style({
-    width: '18px',
-    height: '18px',
-    border: `2px solid ${vars.colors.borderDefault}`,
-    borderRadius: '50%',
-    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 radioLabel = styleWithLayer({
-    fontFamily: vars.fontFamily.body,
-    fontSize: '14px',
-    color: vars.colors.textPrimary,
-});
-export const radioGroup = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: '8px',
-});
-export const radioGroupHorizontal = styleWithLayer({
-    display: 'flex',
-    flexDirection: 'row',
-    gap: '16px',
-    flexWrap: 'wrap',
-});

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
-export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    children: React.ReactNode;
-    orientation?: ScrollAreaOrientation;
-    maxHeight?: string | number;
-    maxWidth?: string | number;
-};
-declare const ScrollArea: ({ children, orientation, maxHeight, maxWidth, className, ...props }: ScrollAreaProps) => import("react/jsx-runtime").JSX.Element;
-export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { scrollArea, scrollAreaOrientation, scrollAreaViewport, } from './styles.css';
-import Box from '../Box';
-const ScrollArea = ({ children, orientation = 'vertical', maxHeight, maxWidth, className, ...props }) => {
-    const style = {
-        maxHeight,
-        maxWidth,
-    };
-    return (_jsx(Box, { className: clsx(scrollArea, scrollAreaOrientation[orientation], className), style: style, ...props, children: _jsx(Box, { className: scrollAreaViewport, children: children }) }));
-};
-export default ScrollArea;

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

@@ -1,2 +0,0 @@
-export { default as ScrollArea } from './ScrollArea';
-export type { ScrollAreaProps, ScrollAreaOrientation } from './ScrollArea';

package/dist/components/ScrollArea/index.js

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

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

@@ -1,3 +0,0 @@
-export declare const scrollArea: string;
-export declare const scrollAreaOrientation: Record<"both" | "horizontal" | "vertical", string>;
-export declare const scrollAreaViewport: string;

package/dist/components/ScrollArea/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 scrollArea = styleWithLayer({
-    overflow: 'auto',
-    scrollbarWidth: 'thin',
-    scrollbarColor: `${vars.colors.borderDefault} ${vars.colors.backgroundMuted}`,
-});
-export const scrollAreaOrientation = styleVariants({
-    vertical: {
-        overflowX: 'hidden',
-        overflowY: 'auto',
-    },
-    horizontal: {
-        overflowX: 'auto',
-        overflowY: 'hidden',
-    },
-    both: {
-        overflow: 'auto',
-    },
-});
-export const scrollAreaViewport = styleWithLayer({
-    width: '100%',
-    height: '100%',
-});