@eleven-labs/design-system 0.20.0 → 0.21.0

package/dist/pages/HomePage/HomePage.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 import type { HomeIntroBlockProps } from '../../components';
 import { type NewsletterCardProps } from '../../components/Molecules/Cards/NewsletterCard';
+import type { LastArticlesBlockProps } from '../../components/Organisms/Blocks/LastArticlesBlock/LastArticlesBlock';
+import type { LastTutorialsBlockProps } from '../../components/Organisms/Blocks/LastTutorialsBlock/LastTutorialsBlock';
 export type HomePageProps = {
     homeIntroBlock: HomeIntroBlockProps;
-    title: React.ReactNode;
-    postCardList: React.ReactNode;
+    lastArticlesBlock: LastArticlesBlockProps;
+    lastTutorialsBlock: LastTutorialsBlockProps;
     newsletterCard: NewsletterCardProps;
 };
 export declare const HomePage: React.FC<HomePageProps>;

package/dist/pages/PostPage/PostHeader/PostHeader.d.ts

@@ -1,13 +1,15 @@
 import React from 'react';
+import type { BoxProps } from '../../../components';
 import { type ShareLinksProps } from '../../../components/Molecules/ShareLinks';
-export interface PostHeaderProps {
+import type { ComponentPropsWithoutRef } from '../../../types';
+export interface PostHeaderProps extends BoxProps {
     title: React.ReactNode;
     date: string;
     readingTime: number;
     authors: {
         username: string;
         name: string;
-        link: React.ComponentPropsWithoutRef<'a'>;
+        link: ComponentPropsWithoutRef<'a'>;
     }[];
     shareLinks: ShareLinksProps;
 }

package/dist/pages/PostPage/PostPage.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { ContactCardProps, SummaryCardProps } from '../../components';
+import type { BreadcrumbProps, ContactCardProps, SummaryCardProps } from '../../components';
+import type { ComponentPropsWithoutRef } from '../../types';
 import type { PostFooterProps } from './PostFooter';
 import type { PostHeaderProps } from './PostHeader';
 import type { RelatedPostListProps } from './RelatedPostList';
@@ -7,6 +8,7 @@ export declare const postPageVariant: readonly ["article", "tutorial"];
 export type PostPageVariantType = (typeof postPageVariant)[number];
 export interface PostPageProps {
     variant: PostPageVariantType;
+    breadcrumb: BreadcrumbProps;
     header: Omit<PostHeaderProps, 'contentType'>;
     children: React.ReactNode;
     footer: PostFooterProps;
@@ -15,9 +17,9 @@ export interface PostPageProps {
     summary: SummaryCardProps;
     previousLink?: {
         label: string;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    } & ComponentPropsWithoutRef<'a'>;
     nextLink?: {
         label: string;
-    } & React.ComponentPropsWithoutRef<'a'>;
+    } & ComponentPropsWithoutRef<'a'>;
 }
 export declare const PostPage: React.FC<PostPageProps>;

package/dist/scss/abstracts/functions/_index.scss

@@ -1,2 +1,3 @@
 @forward 'list';
 @forward 'get-cdn-assets-file';
+@forward 'map-get-strict';

package/dist/scss/abstracts/functions/_map-get-strict.scss

@@ -0,0 +1,9 @@
+@use 'sass:map';
+
+@function map-get-strict($map, $keys...) {
+  @if map.get($map, $keys...) {
+    @return map.get($map, $keys...);
+  } @else {
+    @error "Specified #{$keys} does not exist in the mapping";
+  }
+}

package/dist/scss/abstracts/variables/_token-variables.scss

@@ -1,13 +1,14 @@
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 16:40:16 GMT
+ * Generated on Tue, 16 Jan 2024 16:30:14 GMT
  */
 
 $token-variables: (
-	'cdn-path': "https://eleven-labs.github.io/design-system/",
+	'cdn-path': "/",
 	'font-family': (
 		'base': var(--font-family-base),
-		'work-sans': var(--font-family-work-sans)
+		'heading': var(--font-family-heading),
+		'blockquote': var(--font-family-blockquote)
 	),
 	'font-size': (
 		'xxs': var(--font-size-xxs),
@@ -23,11 +24,13 @@ $token-variables: (
 	'font-weight': (
 		'regular': var(--font-weight-regular),
 		'medium': var(--font-weight-medium),
+		'semi-bold': var(--font-weight-semi-bold),
 		'bold': var(--font-weight-bold)
 	),
 	'typography': (
 		'heading': (
 			'base': (
+				'font-family': var(--typography-heading-base-font-family),
 				'line-height': var(--typography-heading-base-line-height),
 				'font-weight': var(--typography-heading-base-font-weight)
 			),
@@ -123,25 +126,20 @@ $token-variables: (
 		'lg': 1201
 	),
 	'color': (
-		'primary': (
-			'azure': var(--color-azure),
-			'navy': var(--color-navy),
-			'seashell': var(--color-seashell)
-		),
-		'secondary': (
-			'lavender': var(--color-lavender),
-			'amaranth': var(--color-amaranth),
-			'yellow': var(--color-yellow)
-		),
-		'greyscale': (
-			'ultra-light-grey': var(--color-ultra-light-grey),
-			'light-grey': var(--color-light-grey),
-			'grey': var(--color-grey),
-			'dark-grey': var(--color-dark-grey),
-			'ultra-dark-grey': var(--color-ultra-dark-grey),
-			'black': var(--color-black),
-			'white': var(--color-white)
-		)
+		'primary': var(--color-primary),
+		'primary-dark': var(--color-primary-dark),
+		'primary-very-dark': var(--color-primary-very-dark),
+		'secondary': var(--color-secondary),
+		'secondary-dark': var(--color-secondary-dark),
+		'info': var(--color-info),
+		'accent': var(--color-accent),
+		'ultra-light-grey': var(--color-ultra-light-grey),
+		'light-grey': var(--color-light-grey),
+		'grey': var(--color-grey),
+		'dark-grey': var(--color-dark-grey),
+		'ultra-dark-grey': var(--color-ultra-dark-grey),
+		'black': var(--color-black),
+		'white': var(--color-white)
 	),
 	'height': (
 		'full': var(--height-full),
@@ -163,6 +161,7 @@ $token-variables: (
 	),
 	'width': (
 		'full': var(--width-full),
-		'screen': var(--width-screen)
+		'screen': var(--width-screen),
+		'content-container': var(--width-content-container)
 	)
 )

package/dist/scss/abstracts/variables/_variables.scss

@@ -1,43 +1,39 @@
 
 /**
  * Do not edit directly
- * Generated on Mon, 08 Jan 2024 16:40:16 GMT
+ * Generated on Tue, 16 Jan 2024 16:30:14 GMT
  */
 
-$white: #FFFFFF !default;
-$black: #000000 !default;
+$white: #FFF !default;
+$black: #000 !default;
 $ultra-dark-grey: #333333 !default;
 $dark-grey: #757575 !default;
 $grey: #9B9B9B !default;
 $light-grey: #C4C4C4 !default;
 $ultra-light-grey: #EDEDED !default;
-$yellow: #F8FA9B !default;
-$amaranth: #DD3156 !default;
-$lavender: #E1EAF9 !default;
-$seashell: #e9f1f8 !default;
-$navy: #224579 !default;
-$azure: #3767B6 !default;
+$accent: #F8FA9B !default; // A distinct accent color for content.
+$info: #DD3156 !default; // Used to provide additional information to the user without conveying any particular level of importance.
+$secondary-dark: #C5D3E9 !default;
+$secondary: #E9F1F8 !default;
+$primary-very-dark: #093670 !default;
+$primary-dark: #194180 !default;
+$primary: #0A4084 !default;
 
 $variables: (
   'color': (
-    'primary': (
-      'azure': $azure,
-      'navy': $navy,
-      'seashell': $seashell
-    ),
-    'secondary': (
-      'lavender': $lavender,
-      'amaranth': $amaranth,
-      'yellow': $yellow
-    ),
-    'greyscale': (
-      'ultra-light-grey': $ultra-light-grey,
-      'light-grey': $light-grey,
-      'grey': $grey,
-      'dark-grey': $dark-grey,
-      'ultra-dark-grey': $ultra-dark-grey,
-      'black': $black,
-      'white': $white
-    )
+    'primary': $primary,
+    'primary-dark': $primary-dark,
+    'primary-very-dark': $primary-very-dark,
+    'secondary': $secondary,
+    'secondary-dark': $secondary-dark,
+    'info': $info,
+    'accent': $accent,
+    'ultra-light-grey': $ultra-light-grey,
+    'light-grey': $light-grey,
+    'grey': $grey,
+    'dark-grey': $dark-grey,
+    'ultra-dark-grey': $ultra-dark-grey,
+    'black': $black,
+    'white': $white
   )
 );