@eleven-labs/design-system 0.23.0 → 0.25.0

package/dist/pages/AuthorPage/AuthorPageContent.d.ts

@@ -12,7 +12,6 @@ export type AuthorPageContentProps = {
             username: string;
         }[];
     };
-    emptyAvatarImageUrl: string;
     title: React.ReactNode;
     postCardList: React.ReactNode;
 };

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

@@ -1,7 +1,5 @@
 import React from 'react';
-import type { SummaryCardProps } from '../../components';
 import type { PostPageContentProps } from './PostPageContent';
 export interface PostPageProps extends PostPageContentProps {
-    summary: SummaryCardProps;
 }
 export declare const PostPage: React.FC<PostPageProps>;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { BreadcrumbProps, ContactCardProps } from '../../components';
+import { type SummaryCardProps } from '../../components';
 import type { ComponentPropsWithoutRef } from '../../types';
 import type { PostFooterProps } from './PostFooter';
 import type { PostHeaderProps } from './PostHeader';
@@ -9,6 +10,8 @@ export type PostPageVariantType = (typeof postPageVariant)[number];
 export interface PostPageContentProps {
     variant: PostPageVariantType;
     breadcrumb: BreadcrumbProps;
+    summary: SummaryCardProps;
+    cover: ComponentPropsWithoutRef<'img'>;
     header: Omit<PostHeaderProps, 'contentType'>;
     children: React.ReactNode;
     footer: PostFooterProps;

package/dist/scss/abstracts/mixins/_component.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../variables' as *;
+
+@mixin component($component-name, $config) {
+  @each $component-variant-name, $properties in $config {
+    @if $component-variant-name != 'base' {
+      .#{$component-name}-#{$component-variant-name} {
+        @each $property-name, $property-value in map.merge(map.get($config, 'base'), $properties) {
+          #{$property-name}: #{$property-value};
+        }
+      }
+    }
+  }
+}

package/dist/scss/abstracts/mixins/_index.scss

@@ -1,2 +1,4 @@
 @forward 'create-media-queries';
 @forward 'utility-classes';
+@forward 'system_classes';
+@forward 'component';

package/dist/scss/abstracts/mixins/_system_classes.scss

@@ -0,0 +1,14 @@
+@use '../functions/map-get-strict' as *;
+@use './utility-classes' as *;
+
+@mixin system-classes($prop-list) {
+  @each $prop-name, $options in $prop-list {
+    @include utility-classes(map-get-strict($options, 'property-css'), map-get-strict($options, 'value-list'), map-get-strict($options, 'prefix-class-name'));
+  }
+}
+
+@mixin system-classes-with-breakpoints($prop-list) {
+  @each $prop-name, $options in $prop-list {
+    @include utility-classes-with-breakpoints(map-get-strict($options, 'property-css'), map-get-strict($options, 'value-list'), map-get-strict($options, 'prefix-class-name'));
+  }
+}

package/dist/scss/abstracts/mixins/_utility-classes.scss

@@ -2,10 +2,11 @@
 @use './create-media-queries' as *;
 @use '../variables' as *;
 
-@mixin utility-classes($prefix-class-name, $property-css, $list) {
+@mixin utility-classes($property-css, $list, $prefix-class-name: null) {
   @each $name, $value in $list {
+    $class-name: if($prefix-class-name, #{$prefix-class-name}-#{$name}, #{$name});
     .#{$prefix-class-name}-#{$name} {
-      @if  type-of($property-css) == 'list' {
+      @if type-of($property-css) == 'list' {
         @each $current-property-css in $property-css {
           #{$current-property-css}: #{$value};
         }
@@ -16,11 +17,16 @@
   }
 }
 
-@mixin utility-classes-with-modifiers($prefix-class-name, $property-css, $list) {
+@mixin utility-classes-with-breakpoints($property-css, $list, $prefix-class-name: null) {
   @each $breakpoint-name, $breakpoint-value in map.get($token-variables, 'breakpoint') {
     @include create-media-queries($breakpoint-name) {
       @each $name, $value in $list {
-        .#{$prefix-class-name}-#{$name}\@#{$breakpoint-name} {
+        $class-name: if(
+            $prefix-class-name,
+            #{$prefix-class-name}-#{$name}\@#{$breakpoint-name},
+            #{$name}\@#{$breakpoint-name}
+        );
+        .#{$class-name} {
           @if type-of($property-css) == 'list' {
             @each $current-property-css in $property-css {
               #{$current-property-css}: #{$value};

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 19 Jan 2024 10:37:41 GMT
+ * Generated on Mon, 29 Jan 2024 15:10:24 GMT
  */
 
 $token-variables: (
@@ -9,17 +9,6 @@ $token-variables: (
 		'heading': var(--font-family-heading),
 		'blockquote': var(--font-family-blockquote)
 	),
-	'font-size': (
-		'xxs': var(--font-size-xxs),
-		'xs': var(--font-size-xs),
-		's': var(--font-size-s),
-		'm': var(--font-size-m),
-		'l': var(--font-size-l),
-		'xl': var(--font-size-xl),
-		'xxl': var(--font-size-xxl),
-		'xxl-2': var(--font-size-xxl-2),
-		'xxl-3': var(--font-size-xxl-3)
-	),
 	'font-weight': (
 		'regular': var(--font-weight-regular),
 		'medium': var(--font-weight-medium),
@@ -31,10 +20,25 @@ $token-variables: (
 			'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)
+				'letter-spacing': var(--typography-heading-base-letter-spacing)
+			),
+			's': (
+				'font-size': var(--typography-heading-s-font-size),
+				'font-weight': var(--typography-heading-s-font-weight),
+				'text-transform': var(--typography-heading-s-text-transform)
+			),
+			'm': (
+				'font-size': var(--typography-heading-m-font-size),
+				'font-weight': var(--typography-heading-m-font-weight)
+			),
+			'l': (
+				'font-size': var(--typography-heading-l-font-size)
 			),
 			'xl': (
-				'font-weight': var(--typography-heading-xl-font-weight)
+				'font-size': var(--typography-heading-xl-font-size),
+				'font-weight': var(--typography-heading-xl-font-weight),
+				'text-transform': var(--typography-heading-xl-text-transform),
+				'letter-spacing': var(--typography-heading-xl-letter-spacing)
 			)
 		),
 		'text': (
@@ -42,42 +46,16 @@ $token-variables: (
 				'line-height': var(--typography-text-base-line-height)
 			),
 			'xs': (
-				'line-height': var(--typography-text-xs-line-height)
+				'font-size': var(--typography-text-xs-font-size),
+				'icon-size': var(--typography-text-xs-icon-size)
 			),
-			'm': (
-				'line-height': var(--typography-text-m-line-height)
-			)
-		)
-	),
-	'mobile': (
-		'typography': (
-			'heading': (
-				's': (
-					'font-size': var(--mobile-typography-heading-s-font-size)
-				),
-				'm': (
-					'font-size': var(--mobile-typography-heading-m-font-size)
-				),
-				'l': (
-					'font-size': var(--mobile-typography-heading-l-font-size)
-				),
-				'xl': (
-					'font-size': var(--mobile-typography-heading-xl-font-size)
-				)
+			's': (
+				'font-size': var(--typography-text-s-font-size),
+				'icon-size': var(--typography-text-s-icon-size)
 			),
-			'text': (
-				'xs': (
-					'font-size': var(--mobile-typography-text-xs-font-size),
-					'icon-size': var(--mobile-typography-text-xs-icon-size)
-				),
-				's': (
-					'font-size': var(--mobile-typography-text-s-font-size),
-					'icon-size': var(--mobile-typography-text-s-icon-size)
-				),
-				'm': (
-					'font-size': var(--mobile-typography-text-m-font-size),
-					'icon-size': var(--mobile-typography-text-m-icon-size)
-				)
+			'm': (
+				'font-size': var(--typography-text-m-font-size),
+				'icon-size': var(--typography-text-m-icon-size)
 			)
 		)
 	),
@@ -144,6 +122,11 @@ $token-variables: (
 		'full': var(--height-full),
 		'screen': var(--height-screen)
 	),
+	'radius': (
+		'xs': var(--radius-xs),
+		's': var(--radius-s),
+		'full-rounded': var(--radius-full-rounded)
+	),
 	'spacing': (
 		'0': var(--spacing-0),
 		'xxs-3': var(--spacing-xxs-3),

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

@@ -1,23 +1,23 @@
 
 /**
  * Do not edit directly
- * Generated on Fri, 19 Jan 2024 10:37:41 GMT
+ * Generated on Mon, 29 Jan 2024 15:10:24 GMT
  */
 
-$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;
-$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;
+$primary-dark: #194180 !default;
+$primary-very-dark: #093670 !default;
+$secondary: #E9F1F8 !default;
+$secondary-dark: #C5D3E9 !default;
+$info: #DD3156 !default; // Used to provide additional information to the user without conveying any particular level of importance.
+$accent: #F8FA9B !default; // A distinct accent color for content.
+$ultra-light-grey: #EDEDED !default;
+$light-grey: #C4C4C4 !default;
+$grey: #9B9B9B !default;
+$dark-grey: #757575 !default;
+$ultra-dark-grey: #333333 !default;
+$black: #000 !default;
+$white: #FFF !default;
 
 $variables: (
   'color': (