@eleven-labs/design-system 0.20.0 → 0.21.0

package/dist/components/Atoms/Blockquote/Blockquote.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { MarginSystemProps } from '../../../types';
-export interface BlockquoteProps extends MarginSystemProps, Omit<React.ComponentPropsWithoutRef<'blockquote'>, 'align'> {
+import type { ComponentPropsWithoutRef, MarginSystemProps } from '../../../types';
+export interface BlockquoteProps extends MarginSystemProps, Omit<ComponentPropsWithoutRef<'blockquote'>, 'align'> {
 }
 export declare const Blockquote: React.FC<BlockquoteProps>;

package/dist/components/Atoms/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ComponentPropsWithoutRef, MarginSystemProps } from '../../../types';
+export interface BreadcrumbProps extends MarginSystemProps {
+    items: ({
+        label: string;
+    } & ComponentPropsWithoutRef<'a'>)[];
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;

package/dist/components/Atoms/Breadcrumb/index.d.ts

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

package/dist/components/Atoms/BurgerButton/BurgerButton.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { FlexProps } from '../../../components';
-export interface BurgerButtonProps extends FlexProps, React.ComponentPropsWithoutRef<'button'> {
+import type { ComponentPropsWithoutRef } from '../../../types';
+export interface BurgerButtonProps extends FlexProps, ComponentPropsWithoutRef<'button'> {
 }
 export declare const BurgerButton: React.FC<BurgerButtonProps>;

package/dist/components/Atoms/CloseButton/CloseButton.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { FlexProps } from '../../../components';
+import type { ComponentPropsWithoutRef } from '../../../types';
 export declare const closeButtonVariant: readonly ["primary", "secondary"];
 export type CloseButtonVariantType = (typeof closeButtonVariant)[number];
-export interface CloseButtonProps extends FlexProps, React.ComponentPropsWithoutRef<'button'> {
+export interface CloseButtonProps extends FlexProps, ComponentPropsWithoutRef<'button'> {
     variant?: CloseButtonVariantType;
 }
 export declare const CloseButton: React.FC<CloseButtonProps>;

package/dist/components/Atoms/Divider/Divider.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { MarginSystemProps } from '../../../types';
-export interface DividerProps extends React.ComponentPropsWithoutRef<'hr'>, MarginSystemProps {
+import type { ComponentPropsWithoutRef, MarginSystemProps } from '../../../types';
+export interface DividerProps extends ComponentPropsWithoutRef<'hr'>, MarginSystemProps {
 }
 export declare const Divider: React.FC<DividerProps>;

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

@@ -3,5 +3,7 @@ import type { ColorSystemProps, IconNameType, MarginSystemProps } from '../../..
 export type IconProps = Omit<React.SVGProps<SVGSVGElement>, 'name' | 'color'> & MarginSystemProps & Pick<ColorSystemProps, 'color'> & {
     name: IconNameType;
     size?: string | number;
+    width?: string | number;
+    height?: string | number;
 };
 export declare const Icon: React.FC<IconProps>;

package/dist/components/Atoms/Svgs/Underline.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SVGProps } from 'react';
+declare const SvgUnderline: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
+export default SvgUnderline;

package/dist/components/Atoms/Svgs/index.d.ts

@@ -12,4 +12,5 @@ export { default as Person } from './Person';
 export { default as Rss } from './Rss';
 export { default as Search } from './Search';
 export { default as Twitter } from './Twitter';
+export { default as Underline } from './Underline';
 export { default as Welcometothejungle } from './Welcometothejungle';

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

@@ -9,3 +9,4 @@ export * from './Skeleton';
 export * from './Divider';
 export * from './BurgerButton';
 export * from './CloseButton';
+export * from './Breadcrumb';

package/dist/components/Molecules/Blocks/CategoryEndingBlock/CategoryEndingBlock.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 import type { BoxProps } from '../../../../components';
+import type { ComponentPropsWithoutRef } from '../../../../types';
 export interface CategoryEndingBlockProps extends BoxProps {
     title: string;
     description: string;
     expertiseLink: {
         label: string;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    } & ComponentPropsWithoutRef<'a'>;
 }
 export declare const CategoryEndingBlock: React.FC<CategoryEndingBlockProps>;

package/dist/components/Molecules/Blocks/CategoryIntroBlock/CategoryIntroBlock.d.ts

@@ -1,11 +1,8 @@
 import React from 'react';
-import type { BoxProps } from '../../../../components';
+import type { BoxProps, BreadcrumbProps } from '../../../../components';
 export interface CategoryIntroBlockProps extends BoxProps {
-    name: string;
     title: string;
     description: string;
-    homeLink: {
-        label: string;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    breadcrumb: BreadcrumbProps;
 }
 export declare const CategoryIntroBlock: React.FC<CategoryIntroBlockProps>;

package/dist/components/Molecules/Blocks/HomeIntroBlock/HomeIntroBlock.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import type { ComponentPropsWithoutRef } from '../../../../types';
 export interface HomeIntroBlockProps {
     intro: string;
     title: string;
     description: string;
     elevenLabsLink: {
         label: string;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    } & ComponentPropsWithoutRef<'a'>;
 }
 export declare const HomeIntroBlock: React.FC<HomeIntroBlockProps>;

package/dist/components/Molecules/Cards/AuthorCard/AuthorCard.d.ts

@@ -1,9 +1,12 @@
 import React from 'react';
 import type { FlexProps } from '../../../../components';
+import type { ComponentPropsWithoutRef } from '../../../../types';
 export interface AuthorCardProps extends FlexProps {
     name: string;
     description: string;
     avatarImageUrl?: string;
-    link: React.ComponentPropsWithoutRef<'a'>;
+    link: {
+        label: string;
+    } & ComponentPropsWithoutRef<'a'>;
 }
 export declare const AuthorCard: React.FC<AuthorCardProps>;

package/dist/components/Molecules/Cards/ContactCard/ContactCard.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { FlexProps } from '../../../../components';
+import type { ComponentPropsWithoutRef } from '../../../../types';
 export type ContactCardProps = {
     title: string;
     subtitle: string;
     description: string;
     link: {
         label: React.ReactNode;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    } & ComponentPropsWithoutRef<'a'>;
 } & FlexProps;
 export declare const ContactCard: React.FC<ContactCardProps>;

package/dist/components/Molecules/Cards/NewsletterCard/NewsletterCard.d.ts

@@ -1,8 +1,11 @@
 import React from 'react';
 import type { FlexProps } from '../../../../components';
+export declare const newsletterCardVariant: readonly ["horizontal", "vertical"];
+export type NewsletterCardVariantType = (typeof newsletterCardVariant)[number];
 export interface NewsletterCardProps extends Omit<FlexProps, 'title'> {
     title: string;
     description: string;
     children: React.ReactNode;
+    variant?: NewsletterCardVariantType;
 }
 export declare const NewsletterCard: React.FC<NewsletterCardProps>;

package/dist/components/Molecules/Cards/PostCard/PostCard.d.ts

@@ -1,7 +1,11 @@
 import React from 'react';
 import type { BoxProps } from '../../../../components';
+import type { ComponentPropsWithoutRef } from '../../../../types';
+export declare const postCardVariant: readonly ["primary", "secondary"];
+export type PostCardVariantType = (typeof postCardVariant)[number];
 export interface PostCardProps extends BoxProps {
     contentType?: 'article' | 'tutorial';
+    variant?: PostCardVariantType;
     slug?: string;
     title?: string;
     excerpt?: string;
@@ -11,7 +15,7 @@ export interface PostCardProps extends BoxProps {
         username: string;
         name: string;
     }[];
-    link?: React.ComponentPropsWithoutRef<'a'>;
+    link?: ComponentPropsWithoutRef<'a'>;
     tutorialLabel?: string;
     isLoading?: boolean;
 }

package/dist/components/Molecules/Cards/SummaryCard/SummaryCard.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { BoxProps } from '../../../../components';
+import type { ComponentPropsWithoutRef } from '../../../../types';
 export declare const SummaryCardVariant: readonly ["primary", "secondary"];
 export type SummaryCardVariantType = (typeof SummaryCardVariant)[number];
 export interface SummaryCardProps extends BoxProps {
@@ -9,6 +10,6 @@ export interface SummaryCardProps extends BoxProps {
     sections: ({
         name: string;
         label: string;
-    } & React.ComponentPropsWithoutRef<'a'>)[];
+    } & ComponentPropsWithoutRef<'a'>)[];
 }
 export declare const SummaryCard: React.FC<SummaryCardProps>;

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SpacingSystemProps } from '../../../types';
+import type { ComponentPropsWithoutRef, SpacingSystemProps } from '../../../types';
 export interface PaginationProps extends SpacingSystemProps {
     currentPage: number;
     totalPages: number;
-    getLink: (page: number) => React.ComponentPropsWithoutRef<'a'>;
+    getLink: (page: number) => ComponentPropsWithoutRef<'a'>;
     siblingCount?: number;
 }
 export declare const Pagination: React.FC<PaginationProps>;

package/dist/components/Molecules/PostMetadata/PostMetadata.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SpacingSystemProps } from '../../../types';
+import type { ComponentPropsWithoutRef, SpacingSystemProps } from '../../../types';
 export declare const postMetadataVariant: readonly ["primary", "secondary"];
 export type PostMetadataVariantType = (typeof postMetadataVariant)[number];
 export interface PostMetadataProps extends SpacingSystemProps {
@@ -9,7 +9,7 @@ export interface PostMetadataProps extends SpacingSystemProps {
     authors?: {
         username: string;
         name: string;
-        link?: React.ComponentPropsWithoutRef<'a'>;
+        link?: ComponentPropsWithoutRef<'a'>;
     }[];
     isLoading?: boolean;
     displayedFields?: ('date' | 'readingTime' | 'authors')[];

package/dist/components/Organisms/Autocomplete/AutocompleteResult/AutocompleteResult.d.ts

@@ -1,20 +1,21 @@
 import React from 'react';
 import type { BoxProps } from '../../../../components';
+import type { ComponentPropsWithoutRef } from '../../../../types';
 export interface AutocompleteItem {
     slug: string;
     title: string;
-    description: string;
     date: string;
     authors?: {
         username: string;
         name: string;
     }[];
+    link: ComponentPropsWithoutRef<'a'>;
 }
 export type AutocompleteResultOptions = {
     isOpen?: boolean;
-    items: (React.ComponentPropsWithoutRef<'a'> & AutocompleteItem)[];
+    items: AutocompleteItem[];
     searchValue?: string;
-    searchLink?: React.ComponentPropsWithoutRef<'a'> & {
+    searchLink?: ComponentPropsWithoutRef<'a'> & {
         label: string;
     };
     searchNotFound?: {

package/dist/components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { BoxProps, PostCardProps } from '../../../../components';
+import type { ComponentPropsWithoutRef } from '../../../../types';
+export interface LastArticlesBlockProps extends BoxProps {
+    title: string;
+    posts: Partial<PostCardProps>[];
+    linkSeeMore: {
+        label: string;
+    } & ComponentPropsWithoutRef<'a'>;
+}
+export declare const LastArticlesBlock: React.FC<LastArticlesBlockProps>;

package/dist/components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { FlexProps, PostCardProps } from '../../../../components';
+import type { ComponentPropsWithoutRef } from '../../../../types';
+export interface LastTutorialsBlockProps extends FlexProps {
+    title: string;
+    description: string;
+    posts: Partial<PostCardProps>[];
+    tutorialLabel: string;
+    linkSeeMore: {
+        label: string;
+    } & ComponentPropsWithoutRef<'a'>;
+}
+export declare const LastTutorialsBlock: React.FC<LastTutorialsBlockProps>;

package/dist/components/Organisms/Footer/Footer.d.ts

@@ -1,24 +1,24 @@
 import React from 'react';
-import type { IconNameType } from '../../../types';
+import type { ComponentPropsWithoutRef, IconNameType } from '../../../types';
 export interface FooterProps {
     introBlock: {
         title: React.ReactNode;
         description: React.ReactNode;
     };
-    elevenLabsSiteLink: React.ComponentPropsWithoutRef<'a'>;
+    elevenLabsSiteLink: ComponentPropsWithoutRef<'a'>;
     addressList: {
         title?: React.ReactNode;
         description: React.ReactNode;
     }[];
     contactLink: {
         label: React.ReactNode;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    } & ComponentPropsWithoutRef<'a'>;
     socialLinks: ({
         iconName: Extract<IconNameType, 'rss' | 'facebook' | 'twitter' | 'linkedin' | 'welcometothejungle'>;
-    } & React.ComponentPropsWithoutRef<'a'>)[];
+    } & ComponentPropsWithoutRef<'a'>)[];
     languageLinks: ({
         label: React.ReactNode;
         isActive?: boolean;
-    } & React.ComponentPropsWithoutRef<'a'>)[];
+    } & ComponentPropsWithoutRef<'a'>)[];
 }
 export declare const Footer: React.FC<FooterProps>;

package/dist/components/Organisms/Header/Header.d.ts

@@ -1,17 +1,18 @@
 import React from 'react';
 import type { AutocompleteProps } from '../../../components';
+import type { ComponentPropsWithoutRef } from '../../../types';
 export interface HeaderProps {
-    homeLink: React.ComponentPropsWithoutRef<'a'>;
+    homeLink: ComponentPropsWithoutRef<'a'>;
     categories: ({
         label: React.ReactNode;
-    } & React.ComponentPropsWithoutRef<'a'>)[];
+    } & ComponentPropsWithoutRef<'a'>)[];
     hasTutorial: boolean;
     tutorialLink: {
         label: React.ReactNode;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    } & ComponentPropsWithoutRef<'a'>;
     contactLink: {
         label: React.ReactNode;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    } & ComponentPropsWithoutRef<'a'>;
     autocomplete: AutocompleteProps;
     onToggleMenu: () => void;
     menuIsOpen?: boolean;

package/dist/constants/tokenNameList.d.ts

@@ -1,9 +1,8 @@
-import type { ColorType } from '../types';
-export declare const colorTokenNameList: readonly ColorType[];
+export declare const colorTokenNameList: readonly ("primary" | "primary-dark" | "primary-very-dark" | "secondary" | "secondary-dark" | "info" | "accent" | "ultra-light-grey" | "light-grey" | "grey" | "dark-grey" | "ultra-dark-grey" | "black" | "white")[];
 export declare const spacingTokenNameList: readonly ("0" | "xs" | "xxs-3" | "xxs-2" | "xxs" | "s" | "m" | "l" | "xl" | "xxl" | "xxl-2" | "xxl-3")[];
-export declare const widthTokenNameList: readonly ("full" | "screen")[];
+export declare const widthTokenNameList: readonly ("full" | "screen" | "content-container")[];
 export declare const heightTokenNameList: readonly ("full" | "screen")[];
-export declare const fontWeightTokenNameList: readonly ("regular" | "medium" | "bold")[];
-export declare const iconTokenNameList: readonly ("access-time" | "calendar" | "facebook" | "language" | "link" | "linkedin" | "rss" | "message" | "person" | "search" | "twitter" | "welcometothejungle" | "github" | "arrow")[];
+export declare const fontWeightTokenNameList: readonly ("regular" | "medium" | "semi-bold" | "bold")[];
+export declare const iconTokenNameList: readonly ("access-time" | "calendar" | "facebook" | "language" | "link" | "linkedin" | "rss" | "message" | "person" | "search" | "twitter" | "welcometothejungle" | "github" | "arrow" | "underline")[];
 export declare const headingSizeTokenNameList: readonly ("s" | "m" | "l" | "xl")[];
 export declare const textSizeTokenNameList: readonly ("xs" | "s" | "m")[];

package/dist/constants/tokenVariables.d.ts

@@ -1,29 +1,9 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 16:40:16 GMT
+ * Generated on Tue, 16 Jan 2024 16:30:14 GMT
  */
 export declare const tokenVariables: {
     asset: {
-        font: {
-            'WorkSans-Regular': {
-                value: string;
-                family: string;
-                weight: string;
-                extensions: string[];
-            };
-            'WorkSans-Medium': {
-                value: string;
-                family: string;
-                weight: string;
-                extensions: string[];
-            };
-            'WorkSans-Bold': {
-                value: string;
-                family: string;
-                weight: string;
-                extensions: string[];
-            };
-        };
         icon: {
             'access-time': {
                 value: string;
@@ -67,14 +47,26 @@ export declare const tokenVariables: {
             arrow: {
                 value: string;
             };
+            underline: {
+                value: string;
+            };
         };
     };
     'font-family': {
         base: {
             value: string;
+            name: string;
+            weights: string[];
         };
-        'work-sans': {
+        heading: {
+            value: string;
+            name: string;
+            weights: string[];
+        };
+        blockquote: {
             value: string;
+            name: string;
+            weights: string[];
         };
     };
     'font-size': {
@@ -113,6 +105,9 @@ export declare const tokenVariables: {
         medium: {
             value: string;
         };
+        'semi-bold': {
+            value: string;
+        };
         bold: {
             value: string;
         };
@@ -120,6 +115,9 @@ export declare const tokenVariables: {
     typography: {
         heading: {
             base: {
+                'font-family': {
+                    value: string;
+                };
                 'line-height': {
                     value: string;
                 };
@@ -286,49 +284,48 @@ export declare const tokenVariables: {
     };
     color: {
         primary: {
-            azure: {
-                value: string;
-            };
-            navy: {
-                value: string;
-            };
-            seashell: {
-                value: string;
-            };
+            value: string;
+        };
+        'primary-dark': {
+            value: string;
+        };
+        'primary-very-dark': {
+            value: string;
         };
         secondary: {
-            lavender: {
-                value: string;
-            };
-            amaranth: {
-                value: string;
-            };
-            yellow: {
-                value: string;
-            };
+            value: string;
         };
-        greyscale: {
-            'ultra-light-grey': {
-                value: string;
-            };
-            'light-grey': {
-                value: string;
-            };
-            grey: {
-                value: string;
-            };
-            'dark-grey': {
-                value: string;
-            };
-            'ultra-dark-grey': {
-                value: string;
-            };
-            black: {
-                value: string;
-            };
-            white: {
-                value: string;
-            };
+        'secondary-dark': {
+            value: string;
+        };
+        info: {
+            value: string;
+            description: string;
+        };
+        accent: {
+            value: string;
+            description: string;
+        };
+        'ultra-light-grey': {
+            value: string;
+        };
+        'light-grey': {
+            value: string;
+        };
+        grey: {
+            value: string;
+        };
+        'dark-grey': {
+            value: string;
+        };
+        'ultra-dark-grey': {
+            value: string;
+        };
+        black: {
+            value: string;
+        };
+        white: {
+            value: string;
         };
     };
     height: {
@@ -384,5 +381,8 @@ export declare const tokenVariables: {
         screen: {
             value: string;
         };
+        'content-container': {
+            value: string;
+        };
     };
 };