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

package/dist/components/Grid/Grid.js

@@ -7,19 +7,19 @@ const gapMap = {
     medium: '1rem',
     large: '2rem',
 };
-const Grid = forwardRef(({ columns, gap = 'medium', minChildWidth, children, className, style }, ref) => {
+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))`;
+        gridStyle.gridTemplateColumns = `repeat(auto-fit, minmax(${minChildWidth},1fr))`;
     }
     else if (columns) {
-        gridStyle.gridTemplateColumns = `repeat(${columns}, 1fr)`;
+        gridStyle.gridTemplateColumns = `repeat(${columns},1fr)`;
     }
-    return (_jsx(Box, { ref: ref, className: className, style: { ...gridStyle, ...style }, children: children }));
+    return (_jsx(Box, { ref: ref, className: props.className, style: { ...gridStyle, ...props.style }, ...props, children: children }));
 });
 Grid.displayName = 'Grid';
 export default Grid;

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

@@ -1,8 +1,8 @@
 import React from 'react';
-type IconProps = {
+import { Sprinkles } from '../../styles/sprinkles.css';
+type IconProps = React.HTMLAttributes<HTMLSpanElement> & Sprinkles & {
     name?: string;
     children?: React.ReactNode;
-    className?: string;
     color?: string;
 };
 declare const IconComponent: {

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

@@ -1,5 +1,6 @@
 import React from 'react';
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+import { Sprinkles } from '../../styles/sprinkles.css';
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & Sprinkles & {
     label?: string;
     fullWidth?: boolean;
 };

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

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

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

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

package/dist/components/List/List.js

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

package/dist/components/List/ListItem.js

@@ -1,7 +1,7 @@
 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 }));
+const ListItem = ({ children, ...props }) => {
+    return (_jsx(Box, { as: "li", className: listItem, ...props, children: children }));
 };
 export default ListItem;

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export type ModalSize = 'small' | 'medium' | 'large' | 'full';
-export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
+type ModalPropsType = React.HTMLAttributes<HTMLDialogElement> & {
     isOpen: boolean;
     onClose: () => void;
     title?: string;
@@ -8,6 +9,7 @@ export interface ModalProps extends React.HTMLAttributes<HTMLDialogElement> {
     children?: React.ReactNode;
     footer?: React.ReactNode;
     showCloseButton?: boolean;
-}
+};
+export type ModalProps = ModalPropsType & Sprinkles;
 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

@@ -30,6 +30,6 @@ const Modal = ({ isOpen, onClose, title, size = 'medium', children, footer, show
             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 })] }));
+        }, ...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/Navbar/Navbar.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-type NavbarProps = React.HTMLAttributes<HTMLElement> & {
+import { Sprinkles } from '../../styles/sprinkles.css';
+type NavbarProps = React.HTMLAttributes<HTMLElement> & Sprinkles & {
     children?: React.ReactNode;
 };
 declare const Navbar: (props: NavbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Navbar/NavbarItem.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & {
+import { Sprinkles } from '../../styles/sprinkles.css';
+type NavbarItemProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     children?: React.ReactNode;
 };
 declare const NavbarItem: (props: NavbarItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/NumberInput/NumberInput.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export type NumberInputPosition = 'right' | 'left';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'min' | 'max'> {
+export type NumberInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'min' | 'max'> & Sprinkles & {
     label?: string;
     value?: number | '';
     onChange?: (value: number | '') => void;
@@ -15,6 +16,6 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
     fullWidth?: boolean;
     disabled?: boolean;
     allowEmpty?: boolean;
-}
+};
 declare const NumberInput: ({ label, value, onChange, min, max, step, stepperPosition, placeholder, hint, error, errorMessage, fullWidth, disabled, allowEmpty, className, ...props }: NumberInputProps) => import("react/jsx-runtime").JSX.Element;
 export default NumberInput;

package/dist/components/Pagination/Pagination.d.ts

@@ -1,4 +1,6 @@
-export type PaginationProps = {
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+export type PaginationProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     currentPage: number;
     totalPages: number;
     onPageChange: (page: number) => void;
@@ -6,5 +8,5 @@ export type PaginationProps = {
     showFirstLast?: boolean;
     showPrevNext?: boolean;
 };
-declare const Pagination: ({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+declare const Pagination: ({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { paginationContainer, pageButton, pageButtonVariants, ellipsis } from './styles.css';
+import { paginationContainer, pageButton, pageButtonVariants, ellipsis, } from './styles.css';
 import Box from '../Box';
-const Pagination = ({ currentPage, totalPages, onPageChange, siblingCount = 1, showFirstLast = true, showPrevNext = true, }) => {
+const Pagination = ({ currentPage, totalPages, onPageChange, siblingCount = 1, showFirstLast = true, showPrevNext = true, ...props }) => {
     const generatePageNumbers = () => {
         const pages = [];
         const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
@@ -42,6 +42,9 @@ const Pagination = ({ currentPage, totalPages, onPageChange, siblingCount = 1, s
         return pages;
     };
     const pages = generatePageNumbers();
-    return (_jsxs(Box, { className: paginationContainer, children: [showFirstLast && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(1), disabled: currentPage === 1, children: '<<' })), showPrevNext && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, children: '<' })), pages.map((page, index) => (typeof page === 'number' ? (_jsx(Box, { as: "button", className: clsx(pageButton, page === currentPage ? pageButtonVariants.active : pageButtonVariants.default), onClick: () => onPageChange(page), children: page }, `page-${page}`)) : (_jsx(Box, { className: ellipsis, children: "..." }, `${page}-${index}`)))), showPrevNext && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, children: '>' })), showFirstLast && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(totalPages), disabled: currentPage === totalPages, children: '>>' }))] }));
+    const { className, ...restProps } = props;
+    return (_jsxs(Box, { className: clsx(paginationContainer, className), ...restProps, children: [showFirstLast && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(1), disabled: currentPage === 1, children: '<<' })), showPrevNext && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(currentPage - 1), disabled: currentPage === 1, children: '<' })), pages.map((page, index) => typeof page === 'number' ? (_jsx(Box, { as: "button", className: clsx(pageButton, page === currentPage
+                    ? pageButtonVariants.active
+                    : pageButtonVariants.default), onClick: () => onPageChange(page), children: page }, `page-${page}`)) : (_jsx(Box, { className: ellipsis, children: "..." }, `${page}-${index}`))), showPrevNext && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(currentPage + 1), disabled: currentPage === totalPages, children: '>' })), showFirstLast && (_jsx(Box, { as: "button", className: clsx(pageButton, pageButtonVariants.default), onClick: () => onPageChange(totalPages), disabled: currentPage === totalPages, children: '>>' }))] }));
 };
 export default Pagination;

package/dist/components/Popover/Popover.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export type PopoverPosition = 'top' | 'bottom' | 'left' | 'right' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 export type PopoverTriggerType = 'click' | 'hover';
-export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+export type PopoverProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     trigger: React.ReactNode;
     children: React.ReactNode;
     position?: PopoverPosition;
@@ -13,6 +14,6 @@ export interface PopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     closeOnEscape?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (isOpen: boolean) => void;
-}
+};
 declare const Popover: ({ trigger, children, position, title, footer, showArrow, triggerType, closeOnClickOutside, closeOnEscape, defaultOpen, onOpenChange, className, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/dist/components/Popover/Popover.js

@@ -13,7 +13,8 @@ const Popover = ({ trigger, children, position = 'bottom', title, footer, showAr
         if (!closeOnClickOutside)
             return;
         const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
                 setIsOpen(false);
             }
         };

package/dist/components/Progress/Progress.d.ts

@@ -1,10 +1,11 @@
-type ProgressProps = {
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
+type ProgressProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     value: number;
     max?: number;
     label?: string;
     showPercentage?: boolean;
     variant?: 'default' | 'success' | 'warning' | 'error';
-    className?: string;
 };
 declare const Progress: ({ value, max, label, showPercentage, variant, className, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;
 export default Progress;

package/dist/components/Radio/Radio.d.ts

@@ -8,6 +8,151 @@ type RadioGroupProps = {
     className?: string;
 };
 declare const RadioComponent: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "onChange"> & {
+    display?: ("flex" | "none" | "block" | "inline" | {
+        mobile?: "flex" | "none" | "block" | "inline";
+        tablet?: "flex" | "none" | "block" | "inline";
+        desktop?: "flex" | "none" | "block" | "inline";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "flex" | "none" | "block" | "inline">;
+    width?: ("auto" | "100%" | "50%" | "25%" | {
+        mobile?: "auto" | "100%" | "50%" | "25%";
+        tablet?: "auto" | "100%" | "50%" | "25%";
+        desktop?: "auto" | "100%" | "50%" | "25%";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
+    height?: ("auto" | "100%" | "50%" | "25%" | {
+        mobile?: "auto" | "100%" | "50%" | "25%";
+        tablet?: "auto" | "100%" | "50%" | "25%";
+        desktop?: "auto" | "100%" | "50%" | "25%";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "100%" | "50%" | "25%">;
+    flexDirection?: ("column" | "row" | {
+        mobile?: "column" | "row";
+        tablet?: "column" | "row";
+        desktop?: "column" | "row";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "column" | "row">;
+    justifyContent?: ("space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start" | {
+        mobile?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
+        tablet?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
+        desktop?: "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "space-around" | "space-between" | "stretch" | "center" | "flex-end" | "flex-start">;
+    alignItems?: ("stretch" | "center" | "flex-end" | "flex-start" | {
+        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
+        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
+        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start">;
+    paddingTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderLeft?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderRight?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderTop?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderBottom?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    borderRadius?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    gap?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    padding?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    border?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingX?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    paddingY?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginX?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    marginY?: ("auto" | "medium" | "none" | "large" | "small" | {
+        mobile?: "auto" | "medium" | "none" | "large" | "small";
+        tablet?: "auto" | "medium" | "none" | "large" | "small";
+        desktop?: "auto" | "medium" | "none" | "large" | "small";
+    }) | import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "auto" | "medium" | "none" | "large" | "small">;
+    placeItems?: import("@vanilla-extract/sprinkles").ResponsiveArray<2 | 3 | 1, "stretch" | "center" | "flex-end" | "flex-start"> | ("stretch" | "center" | "flex-end" | "flex-start" | {
+        mobile?: "stretch" | "center" | "flex-end" | "flex-start";
+        tablet?: "stretch" | "center" | "flex-end" | "flex-start";
+        desktop?: "stretch" | "center" | "flex-end" | "flex-start";
+    });
+} & {
+    color?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
+        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
+        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
+    };
+    background?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900" | {
+        lightMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
+        darkMode?: "c1-50" | "c1-100" | "c1-150" | "c1-200" | "c1-250" | "c1-300" | "c1-350" | "c1-400" | "c1-450" | "c1-500" | "c1-550" | "c1-600" | "c1-650" | "c1-700" | "c1-750" | "c1-800" | "c1-850" | "c1-900" | "c2-50" | "c2-100" | "c2-150" | "c2-200" | "c2-250" | "c2-300" | "c2-350" | "c2-400" | "c2-450" | "c2-500" | "c2-550" | "c2-600" | "c2-650" | "c2-700" | "c2-750" | "c2-800" | "c2-850" | "c2-900" | "c3-50" | "c3-100" | "c3-150" | "c3-200" | "c3-250" | "c3-300" | "c3-350" | "c3-400" | "c3-450" | "c3-500" | "c3-550" | "c3-600" | "c3-650" | "c3-700" | "c3-750" | "c3-800" | "c3-850" | "c3-900" | "c4-50" | "c4-100" | "c4-150" | "c4-200" | "c4-250" | "c4-300" | "c4-350" | "c4-400" | "c4-450" | "c4-500" | "c4-550" | "c4-600" | "c4-650" | "c4-700" | "c4-750" | "c4-800" | "c4-850" | "c4-900" | "c5-50" | "c5-100" | "c5-150" | "c5-200" | "c5-250" | "c5-300" | "c5-350" | "c5-400" | "c5-450" | "c5-500" | "c5-550" | "c5-600" | "c5-650" | "c5-700" | "c5-750" | "c5-800" | "c5-850" | "c5-900";
+    };
+} & {
     label?: string;
     value: string;
 } & React.RefAttributes<HTMLInputElement>> & {

package/dist/components/Radio/Radio.js

@@ -13,7 +13,7 @@ const Radio = forwardRef(({ label, className, value, ...props }, ref) => {
             context.onChange(value);
         }
     };
-    return (_jsxs(Box, { as: "label", className: clsx(radioContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "radio", ref: ref, name: name, value: value, checked: isChecked, onChange: handleChange, className: radioInput, ...props }), label && _jsx(Box, { as: "span", className: radioLabel, children: label })] }));
+    return (_jsxs(Box, { as: "label", className: clsx(radioContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "radio", ref: ref, name: name, value: value, checked: isChecked, onChange: handleChange, className: radioInput, ...props }), label && (_jsx(Box, { as: "span", className: radioLabel, children: label }))] }));
 });
 Radio.displayName = 'Radio';
 const RadioGroup = ({ children, name, value, onChange, layout = 'vertical', className, }) => {

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
-export interface ScrollAreaProps {
+export type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     children: React.ReactNode;
     orientation?: ScrollAreaOrientation;
     maxHeight?: string | number;
     maxWidth?: string | number;
-    className?: string;
-}
+};
 declare const ScrollArea: ({ children, orientation, maxHeight, maxWidth, className, ...props }: ScrollAreaProps) => import("react/jsx-runtime").JSX.Element;
 export default ScrollArea;