@jordan-mace/chaser-design-system 1.2.3 → 1.2.6

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface EmptyStateProps {
+    icon?: React.ReactNode;
+    title?: string;
+    description?: string;
+    action?: React.ReactNode;
+    className?: string;
+}
+declare const EmptyState: ({ icon, title, description, action, className, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export default EmptyState;

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { emptyState, emptyStateIcon, emptyStateTitle, emptyStateDescription, emptyStateAction, } from './styles.css';
+import Box from '../Box';
+const EmptyState = ({ icon, title, description, action, className, }) => {
+    return (_jsxs(Box, { className: clsx(emptyState, className), role: "status", children: [icon && (_jsx(Box, { className: emptyStateIcon, "aria-hidden": "true", children: icon })), title && (_jsx(Box, { as: "h3", className: emptyStateTitle, children: title })), description && (_jsx(Box, { as: "p", className: emptyStateDescription, children: description })), action && (_jsx(Box, { className: emptyStateAction, children: action }))] }));
+};
+export default EmptyState;

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

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

package/dist/components/EmptyState/index.js

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

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

@@ -0,0 +1,5 @@
+export declare const emptyState: string;
+export declare const emptyStateIcon: string;
+export declare const emptyStateTitle: string;
+export declare const emptyStateDescription: string;
+export declare const emptyStateAction: string;

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

@@ -0,0 +1,30 @@
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const emptyState = styleWithLayer({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: '2rem',
+    textAlign: 'center',
+});
+export const emptyStateIcon = styleWithLayer({
+    fontSize: '48px',
+    marginBottom: '1rem',
+    color: vars.colors.textSecondary,
+});
+export const emptyStateTitle = styleWithLayer({
+    fontSize: '18px',
+    fontWeight: '600',
+    color: vars.colors.textPrimary,
+    margin: '0 0 0.5rem 0',
+});
+export const emptyStateDescription = styleWithLayer({
+    fontSize: '14px',
+    color: vars.colors.textSecondary,
+    margin: '0 0 1rem 0',
+    maxWidth: '400px',
+});
+export const emptyStateAction = styleWithLayer({
+    marginTop: '0.5rem',
+});

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

@@ -0,0 +1,27 @@
+import React from 'react';
+export interface FileUploadFile {
+    id: string;
+    file: File;
+    name: string;
+    size: number;
+    progress: number;
+    status: 'uploading' | 'success' | 'error';
+    errorMessage?: string;
+}
+export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    files?: FileUploadFile[];
+    onFilesChange?: (files: FileUploadFile[]) => void;
+    onFileAdd?: (files: File[]) => void;
+    onFileRemove?: (fileId: string) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxFileSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    dropzoneText?: string;
+    hint?: string;
+    showProgress?: boolean;
+}
+declare const FileUpload: ({ label, files, onFilesChange, onFileAdd, onFileRemove, accept, multiple, maxFileSize, maxFiles, disabled, dropzoneText, hint, showProgress, className, ...props }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
+export default FileUpload;

package/dist/components/FileUpload/FileUpload.js

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

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

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

package/dist/components/FileUpload/index.js

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

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

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

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

@@ -0,0 +1,145 @@
+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

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

package/dist/components/Form/Form.js

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,9 @@
+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

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

package/dist/components/Form/index.js

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

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

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

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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,13 @@
+import React from 'react';
+export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+export type GridGap = 'none' | 'small' | 'medium' | 'large';
+export interface GridProps {
+    columns?: GridColumns;
+    gap?: GridGap;
+    minChildWidth?: string;
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLElement>>;
+export default Grid;

package/dist/components/Grid/Grid.js

@@ -0,0 +1,25 @@
+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, className, style }, 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: className, style: { ...gridStyle, ...style }, children: children }));
+});
+Grid.displayName = 'Grid';
+export default Grid;

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

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

package/dist/components/Grid/index.js

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+type IconProps = {
+    name?: string;
+    children?: React.ReactNode;
+    className?: string;
+    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

@@ -0,0 +1,21 @@
+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

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

package/dist/components/Icon/index.js

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

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

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

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

@@ -0,0 +1,9 @@
+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

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

package/dist/components/Input/Input.js

@@ -0,0 +1,9 @@
+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

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

package/dist/components/Input/index.js

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

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

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

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface KbdProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const Kbd: ({ children, className, ...props }: KbdProps) => import("react/jsx-runtime").JSX.Element;
+export default Kbd;

package/dist/components/Kbd/Kbd.js

@@ -0,0 +1,6 @@
+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

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

package/dist/components/Kbd/index.js

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

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

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

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

@@ -0,0 +1,16 @@
+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

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

package/dist/components/List/List.js

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

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

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