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

package/dist/styles/theme.css.js

@@ -1,51 +1,5 @@
-import { createGlobalTheme, globalStyle } from '@vanilla-extract/css';
-import { colors } from './sprinkles.css';
-import { themeLayer } from './layers.css';
-// Import Google Fonts
-globalStyle('@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap");', {});
-// Apply global font styles
-globalStyle('body', {
-    fontFamily: "'Inter', sans-serif",
-});
-globalStyle('h1, h2, h3, h4, h5, h6', {
-    fontFamily: "'Poppins', sans-serif",
-});
-export const vars = createGlobalTheme(':root', {
-    '@layer': themeLayer,
-    colors: {
-        textPrimary: colors['c5-800'],
-        textSecondary: colors['c5-500'],
-        textDisabled: colors['c5-350'],
-        buttonTextPrimary: colors['c1-50'],
-        buttonTextSecondary: colors['c1-900'],
-        buttonBackgroundPrimary: colors['c1-600'],
-        buttonBackgroundFocusedPrimary: colors['c1-500'],
-        buttonBackgroundFocusedSecondary: colors['c1-100'],
-        buttonBackgroundSecondary: colors['c1-200'],
-        borderDefault: colors['c4-200'],
-        borderMuted: colors['c4-100'],
-        backgroundDefault: colors['c4-50'],
-        backgroundMuted: colors['c4-50'],
-        alertSuccessBackground: colors['c2-50'],
-        alertSuccessBorder: colors['c2-500'],
-        alertSuccessText: colors['c2-800'],
-        alertWarningBackground: colors['c3-50'],
-        alertWarningBorder: colors['c3-500'],
-        alertWarningText: colors['c3-800'],
-        alertErrorBackground: colors['c4-50'],
-        alertErrorBorder: colors['c4-500'],
-        alertErrorText: colors['c4-800'],
-        alertInfoBackground: colors['c1-50'],
-        alertInfoBorder: colors['c1-500'],
-        alertInfoText: colors['c1-800'],
-        inputBackground: colors['c4-50'],
-        inputBorder: colors['c4-200'],
-        inputBorderFocused: colors['c1-500'],
-        inputPlaceholder: colors['c5-350'],
-        listBorder: colors['c4-100'],
-    },
-    fontFamily: {
-        body: "'Inter', sans-serif",
-        heading: "'Poppins', sans-serif",
-    },
-});
+// src/styles/theme.css.ts
+var vars = { colors: { textPrimary: "var(--colors-textPrimary__4lshgz0)", textSecondary: "var(--colors-textSecondary__4lshgz1)", textDisabled: "var(--colors-textDisabled__4lshgz2)", buttonTextPrimary: "var(--colors-buttonTextPrimary__4lshgz3)", buttonTextSecondary: "var(--colors-buttonTextSecondary__4lshgz4)", buttonBackgroundPrimary: "var(--colors-buttonBackgroundPrimary__4lshgz5)", buttonBackgroundFocusedPrimary: "var(--colors-buttonBackgroundFocusedPrimary__4lshgz6)", buttonBackgroundFocusedSecondary: "var(--colors-buttonBackgroundFocusedSecondary__4lshgz7)", buttonBackgroundSecondary: "var(--colors-buttonBackgroundSecondary__4lshgz8)", borderDefault: "var(--colors-borderDefault__4lshgz9)", borderMuted: "var(--colors-borderMuted__4lshgza)", backgroundDefault: "var(--colors-backgroundDefault__4lshgzb)", backgroundMuted: "var(--colors-backgroundMuted__4lshgzc)", alertSuccessBackground: "var(--colors-alertSuccessBackground__4lshgzd)", alertSuccessBorder: "var(--colors-alertSuccessBorder__4lshgze)", alertSuccessText: "var(--colors-alertSuccessText__4lshgzf)", alertWarningBackground: "var(--colors-alertWarningBackground__4lshgzg)", alertWarningBorder: "var(--colors-alertWarningBorder__4lshgzh)", alertWarningText: "var(--colors-alertWarningText__4lshgzi)", alertErrorBackground: "var(--colors-alertErrorBackground__4lshgzj)", alertErrorBorder: "var(--colors-alertErrorBorder__4lshgzk)", alertErrorText: "var(--colors-alertErrorText__4lshgzl)", alertInfoBackground: "var(--colors-alertInfoBackground__4lshgzm)", alertInfoBorder: "var(--colors-alertInfoBorder__4lshgzn)", alertInfoText: "var(--colors-alertInfoText__4lshgzo)", inputBackground: "var(--colors-inputBackground__4lshgzp)", inputBorder: "var(--colors-inputBorder__4lshgzq)", inputBorderFocused: "var(--colors-inputBorderFocused__4lshgzr)", inputPlaceholder: "var(--colors-inputPlaceholder__4lshgzs)", listBorder: "var(--colors-listBorder__4lshgzt)" }, fontFamily: { body: "var(--fontFamily-body__4lshgzu)", heading: "var(--fontFamily-heading__4lshgzv)" } };
+export {
+  vars
+};

package/dist/styles/utils.mjs

@@ -0,0 +1,14 @@
+import {
+  componentsLayer
+} from "../chunk-X5ENABHC.mjs";
+
+// src/styles/utils.ts
+import { style } from "@vanilla-extract/css";
+var styleWithLayer = (rule) => style({
+  "@layer": {
+    [componentsLayer]: rule
+  }
+});
+export {
+  styleWithLayer
+};

package/package.json

@@ -1,27 +1,24 @@
 {
   "name": "@jordan-mace/chaser-design-system",
-  "version": "1.2.8",
+  "version": "2.0.0",
   "type": "module",
-  "sideEffects": [
-    "*.css.js"
-  ],
+  "style": "./dist/index.css",
+  "sideEffects": true,
   "repository": {
     "type": "git",
     "url": "git+https://github.com/jordan-mace/chaser-design-system.git"
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./layers.css": {
-      "types": "./dist/styles/layers.css.d.ts",
-      "import": "./dist/styles/layers.css.js"
+      "import": "./dist/index.mjs",
+      "style": "./dist/index.css"
     },
-    "./theme.css": {
-      "types": "./dist/styles/theme.css.d.ts",
-      "import": "./dist/styles/theme.css.js"
-    }
+    "./index.css": "./dist/index.css",
+    "./components.css": "./dist/components/index.css",
+    "./layers.css": "./dist/styles/layers.css",
+    "./reset.css": "./dist/styles/reset.css",
+    "./theme.css": "./dist/styles/theme.css",
+    "./sprinkles.css": "./dist/styles/sprinkles.css"
   },
   "files": [
     "dist",
@@ -51,6 +48,7 @@
     "esbuild": "^0.27.3",
     "eslint": "^9.39.0",
     "eslint-plugin-storybook": "^10.0.8",
+    "glob": "^13.0.2",
     "globals": "^16.4.0",
     "mini-css-extract-plugin": "^2.9.4",
     "playwright": "^1.58.0",
@@ -75,8 +73,8 @@
     "@rsbuild/core": "^1.6.14"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc --project tsconfig.build.json --noCheck --skipLibCheck || true",
-    "dev": "tsc --project tsconfig.build.json --watch --noCheck --skipLibCheck || true",
+    "build": "node build.mjs",
+    "dev": "node build.mjs --watch",
     "format": "prettier --write .",
     "lint": "eslint .",
     "test": "vitest --config=vitest.browser.config.ts",

package/src/components/Box/reset.css.ts

@@ -1,9 +1,9 @@
 import { style } from '@vanilla-extract/css';
-import { componentsLayer } from '../../styles/layers.css';
+import { resetLayer } from '../../styles/layers.css';
 
 export const reset = style({
   '@layer': {
-    [componentsLayer]: {
+    [resetLayer]: {
       margin: 0,
       padding: 0,
       border: 0,

package/src/index.ts

@@ -1 +1,6 @@
-export * from './components'
+export * from './components';
+
+import './styles/layers.css';
+import './styles/reset.css';
+import './styles/theme.css';
+import './styles/sprinkles.css';

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

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type AccordionProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    children: React.ReactNode;
-    allowMultiple?: boolean;
-};
-type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    value: string;
-    title: string;
-    children: React.ReactNode;
-};
-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

@@ -1,43 +0,0 @@
-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, ...props }) => {
-    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, props.className), width: "100%", ...props, children: children }) }));
-};
-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, 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,
-});
-export default AccordionComponent;

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

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

package/dist/components/Accordion/index.js

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

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

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

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type AlertProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    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

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

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

package/dist/components/Alert/index.js

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

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

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

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

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

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

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

package/dist/components/AspectRatio/index.js

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

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Sprinkles } from '../../styles/sprinkles.css';
-type AvatarProps = React.HTMLAttributes<HTMLDivElement> & Sprinkles & {
-    alt?: 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

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

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

package/dist/components/Avatar/index.js

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

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

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

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

@@ -1,12 +0,0 @@
-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 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/Badge/Badge.js

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

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

package/dist/components/Badge/index.js

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

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

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