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

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

@@ -1,16 +1,15 @@
 import React from 'react';
-type AccordionProps = {
+import { Sprinkles } from '../../styles/sprinkles.css';
+type AccordionProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     children: React.ReactNode;
     allowMultiple?: boolean;
-    className?: string;
 };
-type AccordionItemProps = {
+type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     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;
+declare const AccordionComponent: (({ children, allowMultiple, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element) & {
+    Item: ({ value, title, children, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default AccordionComponent;

package/dist/components/Accordion/Accordion.js

@@ -8,7 +8,7 @@ const AccordionContext = createContext({
     expandedItems: new Set(),
     toggleItem: () => { },
 });
-const Accordion = ({ children, allowMultiple = false, className, }) => {
+const Accordion = ({ children, allowMultiple = false, ...props }) => {
     const [expandedItems, setExpandedItems] = useState(new Set());
     const toggleItem = (value) => {
         setExpandedItems((prev) => {
@@ -27,15 +27,15 @@ const Accordion = ({ children, allowMultiple = false, className, }) => {
             return newSet;
         });
     };
-    return (_jsx(AccordionContext.Provider, { value: { allowMultiple, expandedItems, toggleItem }, children: _jsx(Box, { className: clsx(accordionGroup, className), width: "100%", children: children }) }));
+    return (_jsx(AccordionContext.Provider, { value: { allowMultiple, expandedItems, toggleItem }, children: _jsx(Box, { className: clsx(accordionGroup, props.className), width: "100%", ...props, children: children }) }));
 };
-const AccordionItem = ({ value, title, children, className, }) => {
+const AccordionItem = ({ value, title, children, ...props }) => {
     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 })] }));
+    return (_jsxs(Box, { as: "div", className: clsx(accordionItem, props.className), width: "100%", marginBottom: "small", border: "small", borderRadius: "large", overflow: "hidden", ...props, 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,

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

@@ -1,5 +1,6 @@
 import React from 'react';
-type AlertProps = React.HTMLAttributes<HTMLDivElement> & {
+import { Sprinkles } from '../../styles/sprinkles.css';
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     severity?: 'success' | 'warning' | 'error' | 'info';
     dismissible?: boolean;
     onDismiss?: () => void;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-type AvatarProps = {
+import { Sprinkles } from '../../styles/sprinkles.css';
+type AvatarProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     alt?: string;
-    className?: string;
     src?: string;
     size?: 'small' | 'medium' | 'large' | 'xlarge';
     children?: React.ReactNode;

package/dist/components/Avatar/Avatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
-import { avatar, avatarImage, avatarWithImage, avatarWrapper } from './styles.css';
+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];

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

@@ -1,11 +1,12 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
 export type BadgeSize = 'small' | 'medium' | 'large';
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & Sprinkles & {
     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/Breadcrumb/Breadcrumb.d.ts

@@ -1,12 +1,13 @@
+import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 type BreadcrumbItem = {
     label: string;
     href?: string;
     current?: boolean;
 };
-type BreadcrumbProps = {
+type BreadcrumbProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     items: BreadcrumbItem[];
-    className?: string;
     separator?: string;
 };
-declare const Breadcrumb: ({ items, className, separator, }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+declare const Breadcrumb: ({ items, className, separator }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
 export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { breadcrumb, breadcrumbList, breadcrumbItem, breadcrumbLink, breadcrumbSeparator, breadcrumbCurrent, } from './styles.css';
 import Box from '../Box';
-const Breadcrumb = ({ items, className, separator = '/', }) => {
+const Breadcrumb = ({ items, className, separator = '/' }) => {
     return (_jsx(Box, { as: "nav", "aria-label": "Breadcrumb", className: clsx(breadcrumb, className), display: "flex", alignItems: "center", gap: "small", fontSize: "14px", children: _jsx(Box, { as: "ol", className: breadcrumbList, display: "flex", alignItems: "center", style: { listStyle: 'none' }, margin: "none", padding: "none", gap: "small", children: items.map((item, index) => (_jsxs(Box, { as: "li", className: breadcrumbItem, display: "flex", alignItems: "center", children: [item.href && !item.current ? (_jsx(Box, { as: "a", href: item.href, className: breadcrumbLink, display: "inline", alignItems: "center", color: "c5-600", fontSize: "14px", textDecoration: "none", children: item.label })) : (_jsx(Box, { as: "span", className: breadcrumbCurrent, display: "inline", alignItems: "center", color: "c5-700", fontSize: "14px", fontWeight: "500", children: item.label })), index < items.length - 1 && (_jsx(Box, { as: "span", className: breadcrumbSeparator, color: "c5-500", fontSize: "12px", style: { userSelect: 'none' }, children: separator }))] }, index))) }) }));
 };
 export default Breadcrumb;

package/dist/components/Button/Button.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+import { Sprinkles } from '../../styles/sprinkles.css';
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Sprinkles & {
     variant: 'primary' | 'secondary';
     children?: React.ReactNode;
     label?: string;

package/dist/components/Card/Card.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+import { Sprinkles } from '../../styles/sprinkles.css';
+type CardProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     variant?: 'elevated' | 'outlined' | 'filled';
     children?: React.ReactNode;
     padding?: 'none' | 'small' | 'medium' | 'large';

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,5 +1,150 @@
 import React from 'react';
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> & {
+    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;
     indeterminate?: boolean;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Checkbox/Checkbox.js

@@ -19,7 +19,7 @@ const Checkbox = forwardRef(({ label, className, indeterminate, ...props }, ref)
             inputRef.current.indeterminate = !!indeterminate;
         }
     }, [indeterminate]);
-    return (_jsxs(Box, { as: "label", className: clsx(checkboxContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "checkbox", ref: combinedRef, className: checkboxInput, style: { width: '18px', height: '18px' }, ...props }), label && _jsx(Box, { as: "span", className: checkboxLabel, children: label })] }));
+    return (_jsxs(Box, { as: "label", className: clsx(checkboxContainer, className), display: "flex", alignItems: "center", gap: "small", cursor: "pointer", style: { userSelect: 'none' }, children: [_jsx(Box, { as: "input", type: "checkbox", ref: combinedRef, className: checkboxInput, style: { width: '18px', height: '18px' }, ...props }), label && (_jsx(Box, { as: "span", className: checkboxLabel, children: label }))] }));
 });
 Checkbox.displayName = 'Checkbox';
 export default Checkbox;

package/dist/components/Collapse/Collapse.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export type CollapseAnimation = 'height' | 'opacity' | 'both';
-export interface CollapseProps {
+export type CollapseProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
     isOpen: boolean;
     children: React.ReactNode;
     animation?: CollapseAnimation;
     duration?: number;
-    className?: string;
     onAnimationEnd?: () => void;
-}
+};
 declare const Collapse: ({ isOpen, children, animation, duration, className, onAnimationEnd, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
 export default Collapse;

package/dist/components/Combobox/Combobox.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { Sprinkles } from '../../styles/sprinkles.css';
 export interface ComboboxOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
-export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+export type ComboboxProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> & Sprinkles & {
     label?: string;
     options: ComboboxOption[];
     value?: string;
@@ -18,6 +19,6 @@ export interface ComboboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     clearable?: boolean;
     disabled?: boolean;
     filterFn?: (option: ComboboxOption, inputValue: string) => boolean;
-}
+};
 declare const Combobox: ({ label, options, value, onChange, onInputChange, placeholder, hint, error, errorMessage, fullWidth, clearable, disabled, filterFn, className, ...props }: ComboboxProps) => import("react/jsx-runtime").JSX.Element;
 export default Combobox;

package/dist/components/Combobox/Combobox.js

@@ -12,7 +12,7 @@ const Combobox = ({ label, options, value, onChange, onInputChange, placeholder
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const containerRef = useRef(null);
     const inputRef = useRef(null);
-    const selectedOption = options.find(opt => opt.value === value);
+    const selectedOption = options.find((opt) => opt.value === value);
     useEffect(() => {
         if (selectedOption) {
             setInputValue(selectedOption.label);
@@ -21,10 +21,11 @@ const Combobox = ({ label, options, value, onChange, onInputChange, placeholder
             setInputValue('');
         }
     }, [selectedOption, isOpen]);
-    const filteredOptions = options.filter(option => filterFn(option, inputValue));
+    const filteredOptions = options.filter((option) => filterFn(option, inputValue));
     useEffect(() => {
         const handleClickOutside = (event) => {
-            if (containerRef.current && !containerRef.current.contains(event.target)) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
                 setIsOpen(false);
                 if (selectedOption) {
                     setInputValue(selectedOption.label);
@@ -70,15 +71,17 @@ const Combobox = ({ label, options, value, onChange, onInputChange, placeholder
                 if (!isOpen) {
                     setIsOpen(true);
                 }
-                setHighlightedIndex(prev => prev < filteredOptions.length - 1 ? prev + 1 : prev);
+                setHighlightedIndex((prev) => prev < filteredOptions.length - 1 ? prev + 1 : prev);
                 break;
             case 'ArrowUp':
                 e.preventDefault();
-                setHighlightedIndex(prev => (prev > 0 ? prev - 1 : prev));
+                setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
                 break;
             case 'Enter':
                 e.preventDefault();
-                if (isOpen && highlightedIndex >= 0 && filteredOptions[highlightedIndex]) {
+                if (isOpen &&
+                    highlightedIndex >= 0 &&
+                    filteredOptions[highlightedIndex]) {
                     handleOptionClick(filteredOptions[highlightedIndex]);
                 }
                 else {
@@ -97,8 +100,12 @@ const Combobox = ({ label, options, value, onChange, onInputChange, placeholder
         }
     };
     const displayValue = selectedOption && !isOpen ? selectedOption.label : inputValue;
-    return (_jsxs(Box, { className: comboboxContainer, ref: containerRef, width: fullWidth ? '100%' : undefined, children: [label && (_jsx(Box, { as: "label", className: comboboxLabel, children: label })), _jsxs(Box, { position: "relative", children: [_jsx(Box, { as: "input", ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), placeholder: placeholder, disabled: disabled, className: clsx(comboboxInput, comboboxInputVariants[error ? 'error' : 'default'], className), role: "combobox", "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": isOpen ? 'combobox-listbox' : undefined, "aria-activedescendant": highlightedIndex >= 0 ? `option-${filteredOptions[highlightedIndex]?.value}` : undefined, ...props }), clearable && inputValue && !disabled && (_jsx(Box, { as: "button", className: comboboxClearButton, onClick: handleClear, type: "button", "aria-label": "Clear selection", children: "\u00D7" })), _jsx(Box, { className: comboboxArrow, "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: _jsx("path", { d: "M6 8L1 3h10z" }) }) })] }), isOpen && (_jsx(Box, { as: "ul", id: "combobox-listbox", className: comboboxDropdown, role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { as: "li", className: comboboxNoResults, children: "No results found" })) : (filteredOptions.map((option, index) => (_jsx(Box, { as: "li", id: `option-${option.value}`, className: clsx(comboboxOption, option.value === value && comboboxOptionSelected, option.disabled && comboboxOptionDisabled), onClick: () => handleOptionClick(option), role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled, style: {
-                        backgroundColor: index === highlightedIndex ? 'var(--highlight-color, #f3f4f6)' : undefined,
+    return (_jsxs(Box, { className: comboboxContainer, ref: containerRef, width: fullWidth ? '100%' : undefined, children: [label && (_jsx(Box, { as: "label", className: comboboxLabel, children: label })), _jsxs(Box, { position: "relative", children: [_jsx(Box, { as: "input", ref: inputRef, type: "text", value: displayValue, onChange: handleInputChange, onKeyDown: handleKeyDown, onFocus: () => setIsOpen(true), placeholder: placeholder, disabled: disabled, className: clsx(comboboxInput, comboboxInputVariants[error ? 'error' : 'default'], className), role: "combobox", "aria-expanded": isOpen, "aria-autocomplete": "list", "aria-controls": isOpen ? 'combobox-listbox' : undefined, "aria-activedescendant": highlightedIndex >= 0
+                            ? `option-${filteredOptions[highlightedIndex]?.value}`
+                            : undefined, ...props }), clearable && inputValue && !disabled && (_jsx(Box, { as: "button", className: comboboxClearButton, onClick: handleClear, type: "button", "aria-label": "Clear selection", children: "\u00D7" })), _jsx(Box, { className: comboboxArrow, "aria-hidden": "true", children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: _jsx("path", { d: "M6 8L1 3h10z" }) }) })] }), isOpen && (_jsx(Box, { as: "ul", id: "combobox-listbox", className: comboboxDropdown, role: "listbox", children: filteredOptions.length === 0 ? (_jsx(Box, { as: "li", className: comboboxNoResults, children: "No results found" })) : (filteredOptions.map((option, index) => (_jsx(Box, { as: "li", id: `option-${option.value}`, className: clsx(comboboxOption, option.value === value && comboboxOptionSelected, option.disabled && comboboxOptionDisabled), onClick: () => handleOptionClick(option), role: "option", "aria-selected": option.value === value, "aria-disabled": option.disabled, style: {
+                        backgroundColor: index === highlightedIndex
+                            ? 'var(--highlight-color, #f3f4f6)'
+                            : undefined,
                     }, children: option.label }, option.value)))) })), error && errorMessage && (_jsx(Box, { as: "div", className: comboboxErrorMessage, role: "alert", children: errorMessage })), hint && !error && (_jsx(Box, { as: "div", className: comboboxHint, children: hint }))] }));
 };
 export default Combobox;