@common-origin/design-system 1.1.0

package/README.md

@@ -0,0 +1,143 @@
+# Common Origin Design System
+
+A production-ready design system built with atomic design principles, design tokens, and WCAG 2.2 AA accessibility compliance. This package provides reusable React components and design tokens for building consistent user interfaces.
+
+## 🚀 Getting Started
+
+### Development
+```bash
+# Install dependencies
+npm install
+
+# Build design tokens
+npm run build:tokens
+
+# Start development server
+npm run dev
+```
+
+Visit `http://localhost:3000` to view the interactive component documentation.
+
+## 📁 Project Structure
+
+```
+src/
+├── components/          # Complete atomic design system
+│   ├── atoms/          # 12 foundational components (Button, Typography, etc.)
+│   ├── molecules/      # 8 composed components (Dropdown, CodeBlock, etc.)
+│   ├── organisms/      # 3 complex components (Navigation, Footer, etc.)
+│   └── layout/         # 1 layout system (GridSystem)
+├── tokens/             # Design token source definitions
+├── styles/             # Generated tokens, CSS, and icon definitions
+└── index.ts            # Main package exports
+
+pages/                  # Interactive documentation
+├── design/
+│   ├── components.tsx  # Live component gallery
+│   └── tokens.tsx      # Design token reference
+└── index.tsx           # Landing page
+
+lib/                    # Documentation tooling
+└── docgen/             # Automated component documentation system
+```
+
+## 🎨 Features
+
+- **Production Ready**: Complete design system with 24+ components
+- **Atomic Design**: Components organized by complexity (atoms → molecules → organisms)
+- **Design Tokens**: Comprehensive token system built with Style Dictionary
+- **Accessibility**: WCAG 2.2 AA compliance with automated jest-axe testing
+- **TypeScript**: Full type safety and IntelliSense support
+- **Interactive Docs**: Live component gallery with code examples
+- **Comprehensive Testing**: 500+ tests with React Testing Library
+- **Token-Driven**: All styling uses semantic design tokens (no hardcoded values)
+
+## 📖 Documentation
+
+- **Components**: `/design/components` - Interactive component gallery with live examples
+- **Tokens**: `/design/tokens` - Complete design token reference
+- **Home**: `/` - Design system overview and navigation
+
+## 🔧 Development Commands
+
+```bash
+npm run dev              # Start development server
+npm run build            # Build Next.js app
+npm run build:package    # Build npm package
+npm run build:tokens     # Generate design tokens
+npm run test             # Run tests
+npm run test:watch       # Run tests in watch mode
+npm run test:coverage    # Run tests with coverage
+npm run typecheck        # Type checking
+npm run docs:generate    # Generate component docs
+```
+
+## 📦 Package Usage
+
+Install the design system in your project:
+
+```bash
+npm install @common-origin/design-system
+```
+
+Import and use components:
+
+```tsx
+import { Button, Typography, Stack, Alert } from '@common-origin/design-system'
+import tokens from '@common-origin/design-system/tokens'
+
+function MyApp() {
+  return (
+    <Stack direction="column" gap="md">
+      <Typography variant="heading1">Welcome</Typography>
+      <Alert variant="info">Design system is ready!</Alert>
+      <Button variant="primary" size="lg">
+        Get Started
+      </Button>
+    </Stack>
+  )
+}
+```
+
+## 🎯 Component Library
+
+**✅ Atoms (12 components)**:
+- Alert, Avatar, Box, Button, Chip, Container
+- CoverImage, Icon, IconButton, SectionSeparator
+- Stack, Typography
+
+**✅ Molecules (8 components)**:
+- ArtCard, Breadcrumbs, ChipGroup, CodeBlock
+- DesignCard, Dropdown, PageTitle, ReleaseCard
+
+**✅ Organisms (3 components)**:
+- Footer, HeroBanner, Navigation
+
+**✅ Layout (1 system)**:
+- GridSystem
+
+## � Production Ready
+
+This design system is production-ready with:
+- **24+ tested components** with comprehensive test coverage
+- **Semantic design tokens** for consistent theming
+- **Accessibility compliance** (WCAG 2.2 AA)
+- **TypeScript support** with full type definitions
+- **Interactive documentation** for easy adoption
+- **Optimized bundle** with tree-shaking support
+
+## 🤝 Contributing
+
+This design system follows established patterns:
+- **Comprehensive testing** with jest-axe for accessibility compliance
+- **Token-driven styling** - all components use semantic design tokens
+- **TypeScript interfaces** with complete props documentation  
+- **Atomic design principles** for scalable component organization
+- **Component documentation** with interactive examples and usage patterns
+
+### Development Workflow
+1. Components follow the atomic design hierarchy
+2. All styling uses design tokens from `src/styles/tokens.json`
+3. Each component includes `.test.tsx`, `.docs.tsx`, and implementation files
+4. Tests must include accessibility validation with jest-axe
+5. Documentation includes live examples and prop descriptions

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface AvatarProps {
+    name: string;
+    picture?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    'data-testid'?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;

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

@@ -0,0 +1 @@
+export * from './Avatar';

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import tokens from '../../../styles/tokens.json';
+export interface BoxProps {
+    display?: 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'none';
+    flexDirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
+    flexWrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    gap?: keyof typeof tokens.semantic.spacing.layout;
+    m?: keyof typeof tokens.semantic.spacing.layout;
+    mt?: keyof typeof tokens.semantic.spacing.layout;
+    mr?: keyof typeof tokens.semantic.spacing.layout;
+    mb?: keyof typeof tokens.semantic.spacing.layout;
+    ml?: keyof typeof tokens.semantic.spacing.layout;
+    mx?: keyof typeof tokens.semantic.spacing.layout;
+    my?: keyof typeof tokens.semantic.spacing.layout;
+    p?: keyof typeof tokens.semantic.spacing.layout;
+    pt?: keyof typeof tokens.semantic.spacing.layout;
+    pr?: keyof typeof tokens.semantic.spacing.layout;
+    pb?: keyof typeof tokens.semantic.spacing.layout;
+    pl?: keyof typeof tokens.semantic.spacing.layout;
+    px?: keyof typeof tokens.semantic.spacing.layout;
+    py?: keyof typeof tokens.semantic.spacing.layout;
+    width?: string;
+    height?: string;
+    maxWidth?: string;
+    maxHeight?: string;
+    minWidth?: string;
+    minHeight?: string;
+    position?: 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky';
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+    borderRadius?: keyof typeof tokens.base.border.radius;
+    border?: keyof typeof tokens.semantic.color.border;
+    borderTop?: keyof typeof tokens.semantic.color.border;
+    borderRight?: keyof typeof tokens.semantic.color.border;
+    borderBottom?: keyof typeof tokens.semantic.color.border;
+    borderLeft?: keyof typeof tokens.semantic.color.border;
+    bg?: keyof typeof tokens.semantic.color.background;
+    color?: keyof typeof tokens.semantic.color.text;
+    overflow?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowX?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    overflowY?: 'visible' | 'hidden' | 'scroll' | 'auto';
+    as?: React.ElementType;
+    children?: React.ReactNode;
+    id?: string;
+    style?: React.CSSProperties;
+    'data-testid'?: string;
+}
+export declare const Box: React.FC<BoxProps>;

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

@@ -0,0 +1 @@
+export * from './Box';

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import iconsData from '@/styles/icons.json';
+export interface BaseButtonProps {
+    variant?: 'primary' | 'secondary' | 'naked';
+    size?: 'small' | 'medium' | 'large';
+    url?: string;
+    purpose?: 'button' | 'link';
+    target?: string;
+    children: React.ReactNode;
+    iconName?: keyof typeof iconsData;
+    id?: string;
+    'data-testid'?: string;
+}
+export interface ButtonProps extends BaseButtonProps, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof BaseButtonProps> {
+    purpose?: 'button';
+}
+export interface LinkProps extends BaseButtonProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof BaseButtonProps> {
+    purpose: 'link';
+}
+type CustomButtonProps = ButtonProps | LinkProps;
+export declare const Button: React.FC<CustomButtonProps>;
+export {};

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

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/atoms/Chip/Chip.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface ChipProps {
+    children?: React.ReactNode;
+    variant?: 'default' | 'emphasis' | 'subtle' | 'interactive' | 'light' | 'dark';
+    size?: 'small' | 'medium' | 'large';
+    onClick?: () => void;
+    disabled?: boolean;
+    'data-testid'?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    role?: string;
+    title?: string;
+}
+export declare const Chip: React.FC<ChipProps>;
+export interface LegacyChipProps {
+    title: string;
+    variant?: 'light' | 'dark';
+}
+export declare const LegacyChip: React.FC<LegacyChipProps>;

package/dist/components/atoms/Chip/index.d.ts

@@ -0,0 +1 @@
+export * from './Chip';

package/dist/components/atoms/Container/Container.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type ContainerProps = {
+    children?: React.ReactNode;
+    'data-testid'?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare const Container: ({ children, ...props }: ContainerProps) => React.JSX.Element;

package/dist/components/atoms/Container/index.d.ts

@@ -0,0 +1 @@
+export * from './Container';

package/dist/components/atoms/CoverImage/CoverImage.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type CoverImageProps = {
+    title: string;
+    src: string;
+    slug?: string;
+    width?: number;
+    height?: number;
+    'data-testid'?: string;
+};
+export declare const CoverImage: React.FC<CoverImageProps>;
+export {};

package/dist/components/atoms/CoverImage/index.d.ts

@@ -0,0 +1 @@
+export * from './CoverImage';

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

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import iconsData from '@/styles/icons.json';
+export interface IconProps {
+    name: keyof typeof iconsData;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    iconColor?: 'default' | 'emphasis' | 'subdued' | 'disabled' | 'inverse' | 'interactive' | 'error' | 'success' | 'warning' | 'inherit';
+    'data-testid'?: string;
+}
+export declare const Icon: FC<IconProps>;
+export default Icon;

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

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/components/atoms/IconButton/IconButton.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import iconsData from '@/styles/icons.json';
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    variant: 'primary' | 'secondary' | 'naked';
+    size?: 'small' | 'medium' | 'large';
+    iconName: keyof typeof iconsData;
+    url?: string;
+    onClick?: () => void;
+    'aria-label': string;
+    'aria-describedby'?: string;
+    'aria-expanded'?: boolean;
+    'aria-pressed'?: boolean;
+    'data-testid'?: string;
+}
+export declare const IconButton: React.FC<IconButtonProps>;

package/dist/components/atoms/IconButton/index.d.ts

@@ -0,0 +1 @@
+export * from './IconButton';

package/dist/components/atoms/SectionSeparator/SectionSeparator.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface SectionSeparatorProps {
+    /** Variant style of the separator */
+    variant?: 'default' | 'strong' | 'minimal';
+    /** Size variation affecting spacing */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * SectionSeparator is an atomic component that provides visual separation between content sections.
+ *
+ * Features:
+ * - Multiple variants (default, strong, minimal)
+ * - Size variations for different spacing needs
+ * - Semantic token usage for consistent styling
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <SectionSeparator />
+ * <SectionSeparator variant="strong" size="xlarge" />
+ * <SectionSeparator variant="minimal" />
+ * ```
+ */
+export declare const SectionSeparator: React.FC<SectionSeparatorProps>;

package/dist/components/atoms/SectionSeparator/index.d.ts

@@ -0,0 +1 @@
+export * from './SectionSeparator';

package/dist/components/atoms/Stack/Stack.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+export type StackDirection = 'column' | 'row';
+export type StackAlign = 'center' | 'flex-start' | 'flex-end' | 'stretch' | 'baseline';
+export type StackJustify = 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+export type StackGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export interface StackProps {
+    children: React.ReactNode;
+    direction?: StackDirection;
+    alignItems?: StackAlign;
+    justifyContent?: StackJustify;
+    gap?: StackGap;
+    wrap?: boolean;
+    'data-testid'?: string;
+}
+export declare const Stack: React.FC<StackProps>;
+export default Stack;

package/dist/components/atoms/Stack/index.d.ts

@@ -0,0 +1 @@
+export * from './Stack';

package/dist/components/atoms/Typography/Typography.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+export type TypographyVariant = 'display' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle' | 'body' | 'small' | 'overline' | 'caption' | 'button1' | 'button2' | 'button3' | 'label';
+export type TypographyColor = "default" | "emphasis" | "subdued" | "inverse" | "disabled" | "interactive" | "error" | "success" | "warning";
+export interface TypographyProps {
+    /** Typography variant defining the semantic meaning and style */
+    variant?: TypographyVariant;
+    /** Color variant for the text */
+    color?: TypographyColor;
+    /** Content to render */
+    children: React.ReactNode;
+    /** HTML element to render as (overrides default semantic element) */
+    as?: React.ElementType;
+    /** Data test id for testing */
+    'data-testid'?: string;
+}
+/**
+ * Typography is an atomic component for rendering text with semantic meaning and consistent styling.
+ *
+ * Features:
+ * - Semantic variants (h1-h6, body, subtitle, etc.)
+ * - Color variants for different contexts
+ * - Automatic semantic HTML element selection
+ * - Manual element override support
+ * - Direct semantic token usage (no component tokens needed)
+ * - Full accessibility support
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="h1">Main Heading</Typography>
+ * <Typography variant="body" color="subdued">Body text</Typography>
+ * <Typography variant="caption" as="figcaption">Image caption</Typography>
+ * ```
+ */
+export declare const Typography: React.FC<TypographyProps>;

package/dist/components/atoms/Typography/index.d.ts

@@ -0,0 +1 @@
+export * from './Typography';

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

@@ -0,0 +1,11 @@
+export * from './Avatar';
+export * from './Box';
+export * from './Button';
+export * from './Chip';
+export * from './Container';
+export * from './CoverImage';
+export * from './Icon';
+export * from './IconButton';
+export * from './SectionSeparator';
+export * from './Stack';
+export * from './Typography';

package/dist/components/dateFormatter.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type DateFormatterProps = {
+    dateString: string;
+    formatString?: string;
+};
+export declare const DateFormatter: React.FC<DateFormatterProps>;
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './atoms/';
+export * from './layout/';
+export * from './dateFormatter';
+export { ResponsiveGrid, GridCol, Grid } from './layout/GridSystem';

package/dist/components/layout/GridSystem/GridSystem.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import tokens from '@/styles/tokens.json';
+interface GridProps {
+    cols?: number;
+    gap?: keyof typeof tokens.base.spacing;
+    gapX?: keyof typeof tokens.base.spacing;
+    gapY?: keyof typeof tokens.base.spacing;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Grid: React.FC<GridProps>;
+interface GridColProps {
+    span?: number;
+    spanSm?: number;
+    spanMd?: number;
+    spanLg?: number;
+    spanXl?: number;
+    order?: number;
+    orderSm?: number;
+    orderMd?: number;
+    orderLg?: number;
+    orderXl?: number;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const GridCol: React.FC<GridColProps>;
+interface ResponsiveGridProps {
+    cols: number;
+    colsSm?: number;
+    colsMd?: number;
+    colsLg?: number;
+    colsXl?: number;
+    gap?: keyof typeof tokens.base.spacing;
+    gapSm?: keyof typeof tokens.base.spacing;
+    gapMd?: keyof typeof tokens.base.spacing;
+    gapLg?: keyof typeof tokens.base.spacing;
+    gapXl?: keyof typeof tokens.base.spacing;
+    gapX?: keyof typeof tokens.base.spacing;
+    gapXSm?: keyof typeof tokens.base.spacing;
+    gapXMd?: keyof typeof tokens.base.spacing;
+    gapXLg?: keyof typeof tokens.base.spacing;
+    gapXXl?: keyof typeof tokens.base.spacing;
+    gapY?: keyof typeof tokens.base.spacing;
+    gapYSm?: keyof typeof tokens.base.spacing;
+    gapYMd?: keyof typeof tokens.base.spacing;
+    gapYLg?: keyof typeof tokens.base.spacing;
+    gapYXl?: keyof typeof tokens.base.spacing;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const ResponsiveGrid: React.FC<ResponsiveGridProps>;
+export {};

package/dist/components/layout/GridSystem/index.d.ts

@@ -0,0 +1 @@
+export { ResponsiveGrid, GridCol, Grid } from './GridSystem';

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

@@ -0,0 +1 @@
+export * from './GridSystem';

package/dist/components/molecules/ArtCard/ArtCard.d.ts

@@ -0,0 +1,10 @@
+export type ArtCardProps = {
+    title: string;
+    excerpt: string;
+    tag: string;
+    artist: string;
+    labels: string[];
+    coverImage: string;
+    slug?: string;
+};
+export declare const ArtCard: ({ title, excerpt, tag, artist, labels, coverImage, slug, }: ArtCardProps) => import("react").JSX.Element | null;

package/dist/components/molecules/ArtCard/index.d.ts

@@ -0,0 +1 @@
+export * from './ArtCard';

package/dist/components/molecules/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface Breadcrumb {
+    label: string;
+    url: string;
+}
+interface BreadcrumbsProps {
+    breadcrumbs: Breadcrumb[];
+    'data-testid'?: string;
+}
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+export {};

package/dist/components/molecules/Breadcrumbs/index.d.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs';

package/dist/components/molecules/ChipGroup/ChipGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type ChipGroupProps = {
+    labels: string[];
+    variant?: 'default' | 'dark';
+    'data-testid'?: string;
+};
+export declare const ChipGroup: React.FC<ChipGroupProps>;

package/dist/components/molecules/ChipGroup/index.d.ts

@@ -0,0 +1 @@
+export * from './ChipGroup';

package/dist/components/molecules/CodeBlock/CodeBlock.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface CodeBlockProps {
+    children: string;
+    showCopyButton?: boolean;
+    onCopy?: () => void;
+    'data-testid'?: string;
+}
+/**
+ * CodeBlock component for displaying formatted code with optional copy functionality
+ *
+ * @param children - The code content to display
+ * @param showCopyButton - Whether to show the copy button (default: true)
+ * @param onCopy - Optional callback when code is copied
+ * @param data-testid - Test identifier for the code block
+ */
+export declare const CodeBlock: React.FC<CodeBlockProps>;
+export default CodeBlock;

package/dist/components/molecules/CodeBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './CodeBlock';

package/dist/components/molecules/DesignCard/DesignCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export type DesignCardProps = {
+    title: string;
+    excerpt: string;
+    labels: string[];
+    tag: string;
+    coverImage: string;
+    date: string;
+    slug?: string;
+};
+export declare const DesignCard: React.FC<DesignCardProps>;

package/dist/components/molecules/DesignCard/index.d.ts

@@ -0,0 +1 @@
+export * from './DesignCard';

package/dist/components/molecules/Dropdown/Dropdown.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+interface DropdownOption {
+    id: string;
+    label: string;
+    value?: any;
+}
+export interface DropdownProps {
+    options: DropdownOption[];
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    label?: string;
+}
+declare const DropdownOption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $isSelected: boolean;
+    $isFocused: boolean;
+}>> & string;
+export declare const Dropdown: React.FC<DropdownProps>;
+export {};

package/dist/components/molecules/Dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './Dropdown';

package/dist/components/molecules/PageTitle/PageTitle.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface PageTitleProps {
+    title: string;
+    hasBackButton?: boolean;
+    subtitle?: string;
+}
+export declare const PageTitle: FC<PageTitleProps>;
+export {};

package/dist/components/molecules/PageTitle/index.d.ts

@@ -0,0 +1 @@
+export * from './PageTitle';

package/dist/components/molecules/ReleaseCard/ReleaseCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export type ReleaseCardProps = {
+    title: string;
+    coverImage?: string;
+    artist?: string;
+    date?: string;
+    slug?: string;
+};
+export declare const ReleaseCard: React.FC<ReleaseCardProps>;

package/dist/components/molecules/ReleaseCard/index.d.ts

@@ -0,0 +1 @@
+export * from './ReleaseCard';

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

@@ -0,0 +1,8 @@
+export * from './ArtCard';
+export * from './Breadcrumbs';
+export * from './ChipGroup';
+export * from './CodeBlock';
+export * from './DesignCard';
+export * from './Dropdown';
+export * from './PageTitle';
+export * from './ReleaseCard';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export { default as tokens } from './styles/tokens.json';