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

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type AccordionProps = {
+    children: React.ReactNode;
+    allowMultiple?: boolean;
+    className?: string;
+};
+type AccordionItemProps = {
+    value: string;
+    title: string;
+    children: React.ReactNode;
+    className?: string;
+};
+declare const AccordionComponent: (({ children, allowMultiple, className, }: AccordionProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ value, title, children, className, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export default AccordionComponent;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { createContext, useContext, useState, useCallback } from 'react';
+import { accordionItem, accordionHeader, accordionContent, accordionIcon, accordionIconExpanded, accordionGroup, } from './styles.css';
+import Box from '../Box';
+const AccordionContext = createContext({
+    allowMultiple: false,
+    expandedItems: new Set(),
+    toggleItem: () => { },
+});
+const Accordion = ({ children, allowMultiple = false, className, }) => {
+    const [expandedItems, setExpandedItems] = useState(new Set());
+    const toggleItem = (value) => {
+        setExpandedItems((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(value)) {
+                newSet.delete(value);
+            }
+            else {
+                if (allowMultiple) {
+                    newSet.add(value);
+                }
+                else {
+                    return new Set([value]);
+                }
+            }
+            return newSet;
+        });
+    };
+    return (_jsx(AccordionContext.Provider, { value: { allowMultiple, expandedItems, toggleItem }, children: _jsx(Box, { className: clsx(accordionGroup, className), width: "100%", children: children }) }));
+};
+const AccordionItem = ({ value, title, children, className, }) => {
+    const { expandedItems, toggleItem } = useContext(AccordionContext);
+    const isExpanded = expandedItems.has(value);
+    const toggleExpanded = useCallback(() => {
+        toggleItem(value);
+    }, [value, toggleItem]);
+    return (_jsxs(Box, { as: "div", className: clsx(accordionItem, className), width: "100%", marginBottom: "small", border: "small", borderRadius: "large", overflow: "hidden", children: [_jsxs(Box, { as: "button", onClick: toggleExpanded, className: accordionHeader, display: "flex", alignItems: "center", justifyContent: "space-between", padding: "small", cursor: "pointer", style: { userSelect: 'none' }, fontSize: "14px", fontWeight: "500", color: "c5-700", "aria-expanded": isExpanded, "aria-controls": `accordion-content-${value}`, children: [_jsx(Box, { as: "span", children: title }), _jsx(Box, { as: "span", className: clsx(accordionIcon, isExpanded && accordionIconExpanded), fontSize: "12px", display: "flex", alignItems: "center", justifyContent: "center", "aria-hidden": "true", children: "\u25BC" })] }), _jsx(Box, { as: "div", id: `accordion-content-${value}`, className: clsx(accordionContent[isExpanded ? 'expanded' : 'collapsed']), padding: "small", fontSize: "14px", color: "c5-700", role: "region", children: children })] }));
+};
+const AccordionComponent = Object.assign(Accordion, {
+    Item: AccordionItem,
+});
+export default AccordionComponent;

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

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

package/dist/components/Accordion/index.js

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

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

@@ -0,0 +1,7 @@
+export declare const accordion: string;
+export declare const accordionItem: string;
+export declare const accordionHeader: string;
+export declare const accordionContent: Record<"expanded" | "collapsed", string>;
+export declare const accordionIcon: string;
+export declare const accordionIconExpanded: string;
+export declare const accordionGroup: string;

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

@@ -0,0 +1,65 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const accordion = styleWithLayer({
+    width: '100%',
+    fontFamily: vars.fontFamily.body,
+});
+export const accordionItem = style({
+    width: '100%',
+    marginBottom: '4px',
+    border: `1px solid ${vars.colors.borderDefault}`,
+    borderRadius: '8px',
+    overflow: 'hidden',
+});
+export const accordionHeader = style({
+    width: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '12px 16px',
+    backgroundColor: vars.colors.backgroundMuted,
+    cursor: 'pointer',
+    userSelect: 'none',
+    fontSize: '14px',
+    fontWeight: '500',
+    color: vars.colors.textPrimary,
+    transition: 'background-color 0.2s ease',
+    ':hover': {
+        backgroundColor: vars.colors.backgroundDefault,
+    },
+    ':focus-visible': {
+        outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+        outlineOffset: '-2px',
+    },
+});
+export const accordionContent = styleVariants({
+    collapsed: {
+        display: 'none',
+        padding: '0 16px',
+        fontSize: '14px',
+        color: vars.colors.textPrimary,
+        backgroundColor: vars.colors.backgroundDefault,
+    },
+    expanded: {
+        display: 'block',
+        padding: '12px 16px',
+        fontSize: '14px',
+        color: vars.colors.textPrimary,
+        backgroundColor: vars.colors.backgroundDefault,
+        animation: 'slideDown 0.2s ease',
+    },
+});
+export const accordionIcon = style({
+    fontSize: '12px',
+    transition: 'transform 0.2s ease',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+export const accordionIconExpanded = style({
+    transform: 'rotate(180deg)',
+});
+export const accordionGroup = styleWithLayer({
+    width: '100%',
+});

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
+    severity?: 'success' | 'warning' | 'error' | 'info';
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    children?: React.ReactNode;
+};
+declare const Alert: ({ severity, dismissible, onDismiss, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export default Alert;

package/dist/components/Alert/Alert.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { alert, alertVariants, alertContent, alertDismissButton, } from './styles.css';
+import Box from '../Box';
+const Alert = ({ severity = 'info', dismissible = false, onDismiss, children, ...props }) => {
+    return (_jsxs(Box, { as: "div", role: "alert", className: clsx(alert, alertVariants[severity], props.className), ...props, children: [_jsx(Box, { as: "div", className: alertContent, children: children }), dismissible && onDismiss && (_jsx(Box, { as: "button", className: alertDismissButton, onClick: onDismiss, "aria-label": "Dismiss alert", type: "button", children: "\u00D7" }))] }));
+};
+export default Alert;

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

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

package/dist/components/Alert/index.js

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

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

@@ -0,0 +1,4 @@
+export declare const alertVariants: Record<"success" | "warning" | "error" | "info", string>;
+export declare const alert: string;
+export declare const alertContent: string;
+export declare const alertDismissButton: string;

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

@@ -0,0 +1,54 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const alertVariants = styleVariants({
+    success: {
+        backgroundColor: vars.colors.alertSuccessBackground,
+        borderLeftColor: vars.colors.alertSuccessBorder,
+        color: vars.colors.alertSuccessText,
+    },
+    warning: {
+        backgroundColor: vars.colors.alertWarningBackground,
+        borderLeftColor: vars.colors.alertWarningBorder,
+        color: vars.colors.alertWarningText,
+    },
+    error: {
+        backgroundColor: vars.colors.alertErrorBackground,
+        borderLeftColor: vars.colors.alertErrorBorder,
+        color: vars.colors.alertErrorText,
+    },
+    info: {
+        backgroundColor: vars.colors.alertInfoBackground,
+        borderLeftColor: vars.colors.alertInfoBorder,
+        color: vars.colors.alertInfoText,
+    },
+});
+export const alert = styleWithLayer({
+    padding: '1rem',
+    borderLeft: '4px solid',
+    borderRadius: '0.5rem',
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: '0.5rem',
+    fontFamily: vars.fontFamily.body,
+    fontSize: '0.875rem',
+    lineHeight: '1.5',
+});
+export const alertContent = styleWithLayer({
+    flex: 1,
+});
+export const alertDismissButton = styleWithLayer({
+    background: 'none',
+    border: 'none',
+    padding: '0.25rem',
+    cursor: 'pointer',
+    borderRadius: '0.25rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: 0.7,
+    transition: 'opacity 0.2s ease-in-out',
+    ':hover': {
+        opacity: 1,
+    },
+});

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type BoxProps } from '../Box';
+export type AspectRatioValue = '1/1' | '4/3' | '16/9' | '21/9' | number;
+export interface AspectRatioProps extends BoxProps {
+    ratio?: AspectRatioValue;
+    children?: React.ReactNode;
+}
+declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default AspectRatio;

package/dist/components/AspectRatio/AspectRatio.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Box from '../Box';
+const AspectRatio = forwardRef(({ ratio = '1/1', children, ...props }, ref) => {
+    const aspectRatio = typeof ratio === 'number' ? ratio : ratio;
+    return (_jsx(Box, { ref: ref, position: "relative", style: {
+            aspectRatio,
+            overflow: 'hidden',
+        }, ...props, children: _jsx(Box, { position: "absolute", width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", children: children }) }));
+});
+AspectRatio.displayName = 'AspectRatio';
+export default AspectRatio;

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

@@ -0,0 +1,2 @@
+export { default as AspectRatio } from './AspectRatio';
+export type { AspectRatioProps, AspectRatioValue } from './AspectRatio';

package/dist/components/AspectRatio/index.js

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

package/dist/components/Avatar/Avatar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type AvatarProps = {
+    alt?: string;
+    className?: string;
+    src?: string;
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    children?: React.ReactNode;
+    fallback?: string;
+};
+declare const Avatar: ({ alt, className, src, size, children, fallback, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default Avatar;

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { avatar, avatarImage, avatarWithImage, avatarWrapper } from './styles.css';
+import Box from '../Box';
+const Avatar = ({ alt, className, src, size = 'medium', children, fallback, }) => {
+    const sizeClass = avatar[size];
+    if (src) {
+        return (_jsx(Box, { className: clsx(avatarWrapper, className), display: "inline", children: _jsx(Box, { as: "img", src: src, alt: alt || 'Avatar', className: clsx(avatarWithImage[size], avatarImage) }) }));
+    }
+    const initials = children || fallback;
+    return (_jsx(Box, { className: clsx(sizeClass, className), role: "img", "aria-label": alt, children: initials }));
+};
+export default Avatar;

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

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

package/dist/components/Avatar/index.js

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

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

@@ -0,0 +1,4 @@
+export declare const avatar: Record<"medium" | "large" | "small" | "base" | "xlarge", string>;
+export declare const avatarImage: string;
+export declare const avatarWithImage: Record<"medium" | "large" | "small" | "xlarge", string>;
+export declare const avatarWrapper: string;

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

@@ -0,0 +1,151 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const avatar = styleVariants({
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: vars.colors.backgroundMuted,
+        color: vars.colors.textPrimary,
+        fontFamily: vars.fontFamily.body,
+        fontWeight: '500',
+        overflow: 'hidden',
+        userSelect: 'none',
+        textDecoration: 'none',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+    small: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: vars.colors.backgroundMuted,
+        color: vars.colors.textPrimary,
+        fontFamily: vars.fontFamily.body,
+        fontWeight: '500',
+        overflow: 'hidden',
+        userSelect: 'none',
+        textDecoration: 'none',
+        width: '24px',
+        height: '24px',
+        fontSize: '12px',
+        borderRadius: '12px',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+    medium: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: vars.colors.backgroundMuted,
+        color: vars.colors.textPrimary,
+        fontFamily: vars.fontFamily.body,
+        fontWeight: '500',
+        overflow: 'hidden',
+        userSelect: 'none',
+        textDecoration: 'none',
+        width: '32px',
+        height: '32px',
+        fontSize: '14px',
+        borderRadius: '16px',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+    large: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: vars.colors.backgroundMuted,
+        color: vars.colors.textPrimary,
+        fontFamily: vars.fontFamily.body,
+        fontWeight: '500',
+        overflow: 'hidden',
+        userSelect: 'none',
+        textDecoration: 'none',
+        width: '40px',
+        height: '40px',
+        fontSize: '16px',
+        borderRadius: '20px',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+    xlarge: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: vars.colors.backgroundMuted,
+        color: vars.colors.textPrimary,
+        fontFamily: vars.fontFamily.body,
+        fontWeight: '500',
+        overflow: 'hidden',
+        userSelect: 'none',
+        textDecoration: 'none',
+        width: '64px',
+        height: '64px',
+        fontSize: '24px',
+        borderRadius: '32px',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+});
+export const avatarImage = style({
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+});
+export const avatarWithImage = styleVariants({
+    small: {
+        width: '24px',
+        height: '24px',
+        borderRadius: '12px',
+        overflow: 'hidden',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+    medium: {
+        width: '32px',
+        height: '32px',
+        borderRadius: '16px',
+        overflow: 'hidden',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+    large: {
+        width: '40px',
+        height: '40px',
+        borderRadius: '20px',
+        overflow: 'hidden',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+    xlarge: {
+        width: '64px',
+        height: '64px',
+        borderRadius: '32px',
+        overflow: 'hidden',
+        ':focus-visible': {
+            outline: `2px solid ${vars.colors.buttonBackgroundPrimary}`,
+            outlineOffset: '2px',
+        },
+    },
+});
+export const avatarWrapper = styleWithLayer({
+    display: 'inline-flex',
+});

package/dist/components/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'small' | 'medium' | 'large';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+    children?: React.ReactNode;
+}
+declare const Badge: ({ variant, size, dot, children, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export default Badge;

package/dist/components/Badge/Badge.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { badge, badgeVariants, badgeSizes, badgeDot, badgeDotSizes, } from './styles.css';
+import Box from '../Box';
+const Badge = ({ variant = 'default', size = 'medium', dot = false, children, ...props }) => {
+    return (_jsx(Box, { as: "span", className: clsx(badge, badgeVariants[variant], dot ? badgeDot : badgeSizes[size], dot && badgeDotSizes[size], props.className), ...props, children: dot ? null : children }));
+};
+export default Badge;

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

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge';
+export type { BadgeProps, BadgeVariant, BadgeSize } from './Badge';

package/dist/components/Badge/index.js

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

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

@@ -0,0 +1,5 @@
+export declare const badgeVariants: Record<"default" | "success" | "warning" | "error" | "info", string>;
+export declare const badgeSizes: Record<"medium" | "large" | "small", string>;
+export declare const badge: string;
+export declare const badgeDot: string;
+export declare const badgeDotSizes: Record<"medium" | "large" | "small", string>;

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

@@ -0,0 +1,77 @@
+import { styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+export const badgeVariants = styleVariants({
+    default: {
+        backgroundColor: vars.colors.borderDefault,
+        color: vars.colors.textPrimary,
+    },
+    success: {
+        backgroundColor: vars.colors.alertSuccessBackground,
+        color: vars.colors.alertSuccessText,
+        border: `1px solid ${vars.colors.alertSuccessBorder}`,
+    },
+    warning: {
+        backgroundColor: vars.colors.alertWarningBackground,
+        color: vars.colors.alertWarningText,
+        border: `1px solid ${vars.colors.alertWarningBorder}`,
+    },
+    error: {
+        backgroundColor: vars.colors.alertErrorBackground,
+        color: vars.colors.alertErrorText,
+        border: `1px solid ${vars.colors.alertErrorBorder}`,
+    },
+    info: {
+        backgroundColor: vars.colors.alertInfoBackground,
+        color: vars.colors.alertInfoText,
+        border: `1px solid ${vars.colors.alertInfoBorder}`,
+    },
+});
+export const badgeSizes = styleVariants({
+    small: {
+        fontSize: '0.7rem',
+        padding: '0.125rem 0.375rem',
+        borderRadius: '0.25rem',
+    },
+    medium: {
+        fontSize: '0.75rem',
+        padding: '0.25rem 0.5rem',
+        borderRadius: '0.375rem',
+    },
+    large: {
+        fontSize: '0.875rem',
+        padding: '0.375rem 0.625rem',
+        borderRadius: '0.5rem',
+    },
+});
+export const badge = styleWithLayer({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontWeight: '500',
+    whiteSpace: 'nowrap',
+    fontFamily: vars.fontFamily.body,
+    transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out',
+});
+export const badgeDot = styleWithLayer({
+    width: '0.5rem',
+    height: '0.5rem',
+    borderRadius: '50%',
+    display: 'inline-block',
+    padding: 0,
+    minWidth: 'auto',
+});
+export const badgeDotSizes = styleVariants({
+    small: {
+        width: '0.375rem',
+        height: '0.375rem',
+    },
+    medium: {
+        width: '0.5rem',
+        height: '0.5rem',
+    },
+    large: {
+        width: '0.625rem',
+        height: '0.625rem',
+    },
+});

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,11 @@
+import { type Sprinkles } from '../../styles/sprinkles.css';
+import React from 'react';
+type BoxProps = Sprinkles & {
+    as?: React.ElementType;
+    children?: React.ReactNode;
+    className?: string;
+    [key: string]: unknown;
+};
+declare const Box: React.ForwardRefExoticComponent<Omit<BoxProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default Box;
+export type { BoxProps };

package/dist/components/Box/Box.js

@@ -0,0 +1,54 @@
+import clsx from 'clsx';
+import { sprinkles } from '../../styles/sprinkles.css';
+import { reset } from './reset.css';
+import React, { forwardRef } from 'react';
+const Box = forwardRef((props, ref) => {
+    const { as: Component = 'div', className, children, ...rest } = props;
+    const sprinkleProps = {};
+    const otherProps = { ref };
+    const sprinkleKeys = new Set([
+        'display',
+        'width',
+        'height',
+        'flexDirection',
+        'justifyContent',
+        'alignItems',
+        'paddingTop',
+        'paddingBottom',
+        'paddingLeft',
+        'paddingRight',
+        'marginLeft',
+        'marginRight',
+        'marginTop',
+        'marginBottom',
+        'borderLeft',
+        'borderRight',
+        'borderTop',
+        'borderBottom',
+        'borderRadius',
+        'gap',
+        'padding',
+        'border',
+        'paddingX',
+        'paddingY',
+        'marginX',
+        'marginY',
+        'placeItems',
+        'color',
+        'background',
+    ]);
+    Object.entries(rest).forEach(([key, value]) => {
+        if (sprinkleKeys.has(key)) {
+            sprinkleProps[key] = value;
+        }
+        else {
+            otherProps[key] = value;
+        }
+    });
+    return React.createElement(Component, {
+        className: clsx(reset, sprinkles(sprinkleProps), className),
+        ...otherProps,
+    }, children);
+});
+Box.displayName = 'Box';
+export default Box;

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

@@ -0,0 +1,2 @@
+export { default } from './Box';
+export type { BoxProps } from './Box';

package/dist/components/Box/index.js

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

package/dist/components/Box/reset.css.d.ts

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