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

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%',
-});

package/dist/components/Select/Select.d.ts

@@ -1,158 +0,0 @@
-import React from 'react';
-type SelectOption = {
-    value: string;
-    label: string;
-    disabled?: boolean;
-};
-declare const Select: React.ForwardRefExoticComponent<Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size"> & {
-    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;
-    options: SelectOption[];
-    error?: boolean;
-    fullWidth?: boolean;
-} & React.RefAttributes<HTMLSelectElement>>;
-export default Select;

package/dist/components/Select/Select.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import { select, selectLabel, selectWrapper } from './styles.css';
-import Box from '../Box';
-const Select = forwardRef(({ label, options, error = false, fullWidth = true, className, ...props }, ref) => {
-    return (_jsxs(Box, { className: selectWrapper, width: "100%", children: [label && (_jsx(Box, { as: "label", className: selectLabel, display: "block", fontSize: "14px", fontWeight: "500", color: "c5-700", marginBottom: "small", children: label })), _jsx(Box, { as: "select", ref: ref, className: clsx(select[error ? 'error' : 'default'], className), width: fullWidth ? '100%' : undefined, ...props, children: options.map((option) => (_jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))) })] }));
-});
-Select.displayName = 'Select';
-export default Select;

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

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

package/dist/components/Select/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const selectContainer: string;
-export declare const select: Record<"default" | "error", string>;
-export declare const selectLabel: string;
-export declare const selectWrapper: string;

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

@@ -1,82 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const selectContainer = styleWithLayer({
-    width: '100%',
-});
-export const select = styleVariants({
-    default: {
-        width: '100%',
-        padding: '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',
-        cursor: 'pointer',
-        outline: 'none',
-        appearance: 'none',
-        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'right 12px center',
-        transition: 'border-color 0.2s ease',
-        '::placeholder': {
-            color: vars.colors.inputPlaceholder,
-        },
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.inputBorderFocused}`,
-            outlineOffset: '2px',
-        },
-        ':hover:not(:disabled)': {
-            borderColor: vars.colors.inputBorderFocused,
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-    },
-    error: {
-        width: '100%',
-        padding: '0.75rem 1rem',
-        fontSize: '14px',
-        fontFamily: vars.fontFamily.body,
-        color: vars.colors.textPrimary,
-        backgroundColor: vars.colors.inputBackground,
-        border: `1px solid ${vars.colors.alertErrorBorder}`,
-        borderRadius: '8px',
-        cursor: 'pointer',
-        outline: 'none',
-        appearance: 'none',
-        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23252525' d='M6 8L1 3h10z'/%3E%3C/svg%3E")`,
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'right 12px center',
-        transition: 'border-color 0.2s ease',
-        '::placeholder': {
-            color: vars.colors.inputPlaceholder,
-        },
-        ':focus-visible': {
-            outline: `2px solid ${vars.colors.alertErrorBorder}`,
-            outlineOffset: '2px',
-        },
-        ':hover:not(:disabled)': {
-            borderColor: vars.colors.alertErrorBorder,
-        },
-        ':disabled': {
-            cursor: 'not-allowed',
-            opacity: 0.5,
-            backgroundColor: vars.colors.backgroundMuted,
-        },
-    },
-});
-export const selectLabel = styleWithLayer({
-    display: 'block',
-    fontSize: '14px',
-    fontWeight: '500',
-    color: vars.colors.textPrimary,
-    marginBottom: '8px',
-});
-export const selectWrapper = styleWithLayer({
-    width: '100%',
-});

package/dist/components/Separator/Separator.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type SeparatorOrientation = 'horizontal' | 'vertical';
-export type SeparatorProps = React.HTMLAttributes<HTMLHRElement> & Sprinkles & {
-    orientation?: SeparatorOrientation;
-    decorative?: boolean;
-};
-declare const Separator: ({ orientation, decorative, className, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
-export default Separator;

package/dist/components/Separator/Separator.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { separator, separatorOrientation } from './styles.css';
-import Box from '../Box';
-const Separator = ({ orientation = 'horizontal', decorative = false, className, ...props }) => {
-    return (_jsx(Box, { as: "hr", className: clsx(separator, separatorOrientation[orientation], className), "aria-hidden": decorative, ...props }));
-};
-export default Separator;

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

@@ -1,2 +0,0 @@
-export { default as Separator } from './Separator';
-export type { SeparatorProps, SeparatorOrientation } from './Separator';

package/dist/components/Separator/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const separator: string;
-export declare const separatorOrientation: Record<"horizontal" | "vertical", string>;
-export declare const separatorSize: Record<"medium" | "large" | "small", string>;
-export declare const separatorDecorative: string;

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

@@ -1,28 +0,0 @@
-import { styleVariants } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const separator = styleWithLayer({
-    border: 'none',
-    margin: 0,
-    flexShrink: 0,
-});
-export const separatorOrientation = styleVariants({
-    horizontal: {
-        width: '100%',
-        height: '1px',
-        backgroundColor: vars.colors.borderDefault,
-    },
-    vertical: {
-        width: '1px',
-        height: '100%',
-        backgroundColor: vars.colors.borderDefault,
-    },
-});
-export const separatorSize = styleVariants({
-    small: {},
-    medium: {},
-    large: {},
-});
-export const separatorDecorative = styleWithLayer({
-    backgroundColor: vars.colors.borderMuted,
-});

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type SkeletonVariant = 'text' | 'circle' | 'rectangle';
-export type SkeletonSize = 'small' | 'medium' | 'large';
-export type SkeletonAnimation = 'shimmer' | 'pulse' | 'none';
-export type SkeletonProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    variant?: SkeletonVariant;
-    size?: SkeletonSize;
-    animation?: SkeletonAnimation;
-    width?: string | number;
-    height?: string | number;
-    count?: number;
-};
-declare const Skeleton: ({ variant, size, animation, width, height, count, className, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
-export default Skeleton;

package/dist/components/Skeleton/Skeleton.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { skeleton, skeletonVariants, skeletonSizes, skeletonAnimation, } from './styles.css';
-import Box from '../Box';
-const Skeleton = ({ variant = 'text', size = 'medium', animation = 'shimmer', width, height, count = 1, className, ...props }) => {
-    const style = {
-        width: width,
-        height: height,
-    };
-    const skeletons = Array.from({ length: count }, (_, index) => (_jsx(Box, { as: "span", className: clsx(skeleton, skeletonVariants[variant], skeletonSizes[size], skeletonAnimation[animation], className), style: style, "aria-hidden": "true", ...props }, index)));
-    return (_jsx(Box, { display: "flex", flexDirection: "column", gap: "small", children: skeletons }));
-};
-export default Skeleton;

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

@@ -1,2 +0,0 @@
-export { default as Skeleton } from './Skeleton';
-export type { SkeletonProps, SkeletonVariant, SkeletonSize, SkeletonAnimation } from './Skeleton';

package/dist/components/Skeleton/index.js

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

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

@@ -1,4 +0,0 @@
-export declare const skeletonVariants: Record<"text" | "circle" | "rectangle", string>;
-export declare const skeletonSizes: Record<"medium" | "large" | "small", string>;
-export declare const skeletonAnimation: Record<"none" | "shimmer" | "pulse", string>;
-export declare const skeleton: string;

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

@@ -1,56 +0,0 @@
-import { styleVariants, keyframes } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-const shimmer = keyframes({
-    '0%': { backgroundPosition: '-200% 0' },
-    '100%': { backgroundPosition: '200% 0' },
-});
-const pulse = keyframes({
-    '0%, 100%': { opacity: 1 },
-    '50%': { opacity: 0.5 },
-});
-export const skeletonVariants = styleVariants({
-    text: {
-        borderRadius: '0.25rem',
-    },
-    circle: {
-        borderRadius: '50%',
-    },
-    rectangle: {
-        borderRadius: '0.5rem',
-    },
-});
-export const skeletonSizes = styleVariants({
-    small: {
-        height: '1rem',
-    },
-    medium: {
-        height: '1.5rem',
-    },
-    large: {
-        height: '2rem',
-    },
-});
-export const skeletonAnimation = styleVariants({
-    shimmer: {
-        background: `linear-gradient(
-      90deg,
-      ${vars.colors.borderMuted} 25%,
-      ${vars.colors.borderDefault} 50%,
-      ${vars.colors.borderMuted} 75%
-    )`,
-        backgroundSize: '200% 100%',
-        animation: `${shimmer} 1.5s ease-in-out infinite`,
-    },
-    pulse: {
-        backgroundColor: vars.colors.borderMuted,
-        animation: `${pulse} 2s ease-in-out infinite`,
-    },
-    none: {
-        backgroundColor: vars.colors.borderMuted,
-    },
-});
-export const skeleton = styleWithLayer({
-    width: '100%',
-    display: 'inline-block',
-});

package/dist/components/Spinner/Spinner.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type SpinnerColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
-export type SpinnerSize = 'small' | 'medium' | 'large';
-export type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    color?: SpinnerColor;
-    size?: SpinnerSize;
-    role?: string;
-};
-declare const Spinner: ({ color, size, role, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
-export default Spinner;