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

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

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

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

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

package/dist/components/Form/Form.js

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

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

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

package/dist/components/Form/FormInput.js

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

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

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

package/dist/components/Form/index.js

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

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

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

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

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

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

@@ -1,162 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
-export type GridGap = 'none' | 'small' | 'medium' | 'large';
-export type GridProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    columns?: GridColumns;
-    gap?: GridGap;
-    minChildWidth?: string;
-    children?: React.ReactNode;
-};
-declare const Grid: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    display?: ("flex" | "none" | "block" | "inline" | {
-        mobile?: "flex" | "none" | "block" | "inline";
-        tablet?: "flex" | "none" | "block" | "inline";
-        desktop?: "flex" | "none" | "block" | "inline";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
-    width?: ("auto" | "100%" | "50%" | "25%" | {
-        mobile?: "auto" | "100%" | "50%" | "25%";
-        tablet?: "auto" | "100%" | "50%" | "25%";
-        desktop?: "auto" | "100%" | "50%" | "25%";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
-    height?: ("auto" | "100%" | "50%" | "25%" | {
-        mobile?: "auto" | "100%" | "50%" | "25%";
-        tablet?: "auto" | "100%" | "50%" | "25%";
-        desktop?: "auto" | "100%" | "50%" | "25%";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
-    flexDirection?: ("column" | "row" | {
-        mobile?: "column" | "row";
-        tablet?: "column" | "row";
-        desktop?: "column" | "row";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
-    justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
-    alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
-    paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    gap?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    padding?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    border?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
-        mobile?: "auto" | "medium" | "none" | "large" | "small";
-        tablet?: "auto" | "medium" | "none" | "large" | "small";
-        desktop?: "auto" | "medium" | "none" | "large" | "small";
-    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
-    placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
-        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
-        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
-        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
-    });
-} & {
-    color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
-        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-    };
-    background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
-        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
-    };
-} & {
-    columns?: GridColumns;
-    gap?: GridGap;
-    minChildWidth?: string;
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
-export default Grid;

package/dist/components/Grid/Grid.js

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

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

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

package/dist/components/Grid/index.js

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

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

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

package/dist/components/Icon/Icon.js

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

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

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

package/dist/components/Icon/index.js

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

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

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

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

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

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

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

package/dist/components/Input/Input.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { inputStyle, label } from './styles.css';
-import { text } from '../Text/styles.css';
-import Box from '../Box';
-const Input = (props) => {
-    return (_jsxs(Box, { display: "flex", flexDirection: { mobile: 'column', tablet: 'row' }, gap: "small", children: [props.label && (_jsx(Box, { as: "label", className: clsx(text, label), marginX: { mobile: 'auto', tablet: 'none' }, marginY: { mobile: 'none', tablet: 'auto' }, htmlFor: props.id, children: props.label })), _jsx(Box, { as: "input", className: clsx(inputStyle, props.className), width: props.fullWidth ? '100%' : undefined, ...props })] }));
-};
-export default Input;

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

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

package/dist/components/Input/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const inputStyle: string;
-export declare const label: string;

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

@@ -1,8 +0,0 @@
-import { styleWithLayer } from '../../styles/utils';
-export const inputStyle = styleWithLayer({
-    padding: '0.5rem 1rem',
-    borderRadius: '0.5rem',
-});
-export const label = styleWithLayer({
-    paddingRight: '0.5rem',
-});

package/dist/components/Kbd/Kbd.d.ts

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

package/dist/components/Kbd/Kbd.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { kbd } from './styles.css';
-const Kbd = ({ children, className, ...props }) => {
-    return (_jsx("kbd", { className: `${kbd} ${className || ''}`, ...props, children: children }));
-};
-export default Kbd;

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

@@ -1,2 +0,0 @@
-export { default as Kbd } from './Kbd';
-export type { KbdProps } from './Kbd';

package/dist/components/Kbd/index.js

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

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

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

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

@@ -1,16 +0,0 @@
-import { vars } from '../../styles/theme.css';
-import { styleWithLayer } from '../../styles/utils';
-export const kbd = styleWithLayer({
-    display: 'inline-block',
-    padding: '0.125rem 0.375rem',
-    fontFamily: 'monospace',
-    fontSize: '0.85em',
-    fontWeight: '600',
-    lineHeight: '1.5',
-    color: vars.colors.textPrimary,
-    backgroundColor: vars.colors.backgroundMuted,
-    border: `1px solid ${vars.colors.borderDefault}`,
-    borderRadius: '4px',
-    boxShadow: '0 2px 0 rgba(0, 0, 0, 0.1)',
-    whiteSpace: 'nowrap',
-});

package/dist/components/List/List.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-declare const List: ({ children, ...props }: {
-    children: React.ReactNode;
-} & Sprinkles) => import("react/jsx-runtime").JSX.Element;
-export default List;

package/dist/components/List/List.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { list } from './styles.css';
-import Box from '../Box';
-const List = ({ children, ...props }) => {
-    return (_jsx(Box, { as: "ul", className: list, ...props, children: children }));
-};
-export default List;

package/dist/components/List/ListItem.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-declare const ListItem: ({ children, ...props }: {
-    children: React.ReactNode;
-} & Sprinkles) => import("react/jsx-runtime").JSX.Element;
-export default ListItem;

package/dist/components/List/ListItem.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { listItem } from './styles.css';
-import Box from '../Box';
-const ListItem = ({ children, ...props }) => {
-    return (_jsx(Box, { as: "li", className: listItem, ...props, children: children }));
-};
-export default ListItem;

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

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

package/dist/components/List/index.js

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

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

@@ -1,2 +0,0 @@
-export declare const list: string;
-export declare const listItem: string;