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

package/dist/components/FileUpload/FileUpload.js

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

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

package/dist/components/FileUpload/index.js

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

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

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

@@ -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';
-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

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

@@ -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, 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

@@ -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';
-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

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

@@ -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';
-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

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

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

@@ -1,5 +0,0 @@
-import React from 'react';
-declare const ListItem: ({ children }: {
-    children: React.ReactNode;
-}) => 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 }) => {
-    return (_jsx(Box, { as: "li", className: listItem, 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;

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

@@ -1,11 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../styles/theme.css';
-export const list = style({
-    listStyle: 'none',
-    padding: 0,
-    margin: 0,
-});
-export const listItem = style({
-    padding: '0.5rem 0',
-    borderBottom: `1px solid ${vars.colors.listBorder}`,
-});

package/dist/components/Modal/Modal.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-export type ModalSize = 'small' | 'medium' | 'large' | 'full';
-export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
-    isOpen: boolean;
-    onClose: () => void;
-    title?: string;
-    size?: ModalSize;
-    children?: React.ReactNode;
-    footer?: React.ReactNode;
-    showCloseButton?: boolean;
-}
-declare const Modal: ({ isOpen, onClose, title, size, children, footer, showCloseButton, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element;
-export default Modal;

package/dist/components/Modal/Modal.js

@@ -1,35 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { modal, modalVariants, modalHeader, modalTitle, modalCloseButton, modalBody, modalFooter, } from './styles.css';
-import { useEffect, useRef } from 'react';
-import Box from '../Box';
-const Modal = ({ isOpen, onClose, title, size = 'medium', children, footer, showCloseButton = true, ...props }) => {
-    const dialogRef = useRef(null);
-    useEffect(() => {
-        const dialog = dialogRef.current;
-        if (!dialog)
-            return;
-        if (isOpen) {
-            dialog.showModal();
-            dialog.classList.add('open');
-        }
-        else {
-            dialog.close();
-            dialog.classList.remove('open');
-        }
-        const handleClose = () => {
-            onClose();
-        };
-        dialog.addEventListener('close', handleClose);
-        return () => {
-            dialog.removeEventListener('close', handleClose);
-        };
-    }, [isOpen, onClose]);
-    return (_jsxs(Box, { as: "dialog", ref: dialogRef, className: clsx(modal, modalVariants[size]), onClick: (e) => {
-            // Close when clicking the backdrop
-            if (e.target === dialogRef.current) {
-                onClose();
-            }
-        }, ...props, children: [title && (_jsxs(Box, { as: "div", className: modalHeader, children: [_jsx(Box, { as: "h2", className: modalTitle, children: title }), showCloseButton && (_jsx(Box, { as: "button", className: modalCloseButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: "\u00D7" }))] })), _jsx(Box, { as: "div", className: modalBody, children: children }), footer && _jsx(Box, { as: "div", className: modalFooter, children: footer })] }));
-};
-export default Modal;

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

@@ -1,2 +0,0 @@
-export { default as Modal } from './Modal';
-export type { ModalProps, ModalSize } from './Modal';

package/dist/components/Modal/index.js

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