@eleven-labs/design-system 0.22.0 → 0.24.0

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

@@ -1,21 +1,7 @@
 import React from 'react';
 import type { NewsletterCardProps } from '../../components/Molecules/Cards/NewsletterCard';
-export type SocialNetworkName = 'github' | 'twitter' | 'linkedin';
-export type AuthorPageProps = {
-    author: {
-        username: string;
-        name: string;
-        avatarImageUrl?: string;
-        content: string;
-        socialNetworks?: {
-            name: SocialNetworkName;
-            url: string;
-            username: string;
-        }[];
-    };
-    emptyAvatarImageUrl: string;
-    title: React.ReactNode;
-    postCardList: React.ReactNode;
+import type { AuthorPageContentProps } from './AuthorPageContent';
+export interface AuthorPageProps extends AuthorPageContentProps {
     newsletterCard: NewsletterCardProps;
-};
+}
 export declare const AuthorPage: React.FC<AuthorPageProps>;

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

@@ -0,0 +1,19 @@
+import React from 'react';
+export type SocialNetworkName = 'github' | 'twitter' | 'linkedin';
+export type AuthorPageContentProps = {
+    author: {
+        username: string;
+        name: string;
+        avatarImageUrl?: string;
+        content: React.ReactNode;
+        socialNetworks?: {
+            name: SocialNetworkName;
+            url: string;
+            username: string;
+        }[];
+    };
+    emptyAvatarImageUrl: string;
+    title: React.ReactNode;
+    postCardList: React.ReactNode;
+};
+export declare const AuthorPageContent: React.FC<AuthorPageContentProps>;

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

@@ -1 +1,2 @@
 export * from './AuthorPage';
+export * from './AuthorPageContent';

package/dist/pages/CategoryPage/CategoryPage.d.ts

@@ -1,11 +1,9 @@
 import React from 'react';
-import type { CategoryEndingBlockProps, CategoryIntroBlockProps } from '../../components';
+import type { CategoryIntroBlockProps } from '../../components';
 import type { NewsletterCardProps } from '../../components/Molecules/Cards/NewsletterCard';
-export type CategoryPageProps = {
+import type { CategoryPageContentProps } from './CategoryPageContent';
+export interface CategoryPageProps extends CategoryPageContentProps {
     categoryIntroBlock: CategoryIntroBlockProps;
-    categoryEndingBlock: CategoryEndingBlockProps;
-    title: React.ReactNode;
-    postCardList: React.ReactNode;
     newsletterCard: NewsletterCardProps;
-};
+}
 export declare const CategoryPage: React.FC<CategoryPageProps>;

package/dist/pages/CategoryPage/CategoryPageContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { CategoryEndingBlockProps } from '../../components';
+export type CategoryPageContentProps = {
+    categoryEndingBlock?: CategoryEndingBlockProps;
+    title: React.ReactNode;
+    postCardList: React.ReactNode;
+};
+export declare const CategoryPageContent: React.FC<CategoryPageContentProps>;

package/dist/pages/CategoryPage/index.d.ts

@@ -1 +1,2 @@
 export * from './CategoryPage';
+export * from './CategoryPageContent';

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

@@ -1,25 +1,7 @@
 import React from 'react';
-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';
-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;
-    contactCard: ContactCardProps;
-    relatedPostList: RelatedPostListProps;
+import type { SummaryCardProps } from '../../components';
+import type { PostPageContentProps } from './PostPageContent';
+export interface PostPageProps extends PostPageContentProps {
     summary: SummaryCardProps;
-    previousLink?: {
-        label: string;
-    } & ComponentPropsWithoutRef<'a'>;
-    nextLink?: {
-        label: string;
-    } & ComponentPropsWithoutRef<'a'>;
 }
 export declare const PostPage: React.FC<PostPageProps>;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { BreadcrumbProps, ContactCardProps } from '../../components';
+import type { ComponentPropsWithoutRef } from '../../types';
+import type { PostFooterProps } from './PostFooter';
+import type { PostHeaderProps } from './PostHeader';
+import type { RelatedPostListProps } from './RelatedPostList';
+export declare const postPageVariant: readonly ["article", "tutorial"];
+export type PostPageVariantType = (typeof postPageVariant)[number];
+export interface PostPageContentProps {
+    variant: PostPageVariantType;
+    breadcrumb: BreadcrumbProps;
+    header: Omit<PostHeaderProps, 'contentType'>;
+    children: React.ReactNode;
+    footer: PostFooterProps;
+    contactCard: ContactCardProps;
+    relatedPostList: RelatedPostListProps;
+    previousLink?: {
+        label: string;
+    } & ComponentPropsWithoutRef<'a'>;
+    nextLink?: {
+        label: string;
+    } & ComponentPropsWithoutRef<'a'>;
+}
+export declare const PostPageContent: React.FC<PostPageContentProps>;

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

@@ -1 +1,2 @@
 export * from './PostPage';
+export * from './PostPageContent';

package/dist/pages/SearchPage/SearchPage.d.ts

@@ -1,12 +1,6 @@
 import React from 'react';
-import type { NotFoundBlockProps } from '../../components';
-import { type NewsletterCardProps } from '../../components/Molecules/Cards/NewsletterCard';
-export type SearchPageProps = {
-    title: React.ReactNode;
-    description: React.ReactNode;
-    postCardList: React.ReactNode;
-    newsletterCard: NewsletterCardProps;
-    searchNotFound?: NotFoundBlockProps;
-    isLoading?: boolean;
-};
+import type { SearchPageContentProps } from './SearchPageContent';
+export interface SearchPageProps extends SearchPageContentProps {
+    sidebar: React.ReactNode;
+}
 export declare const SearchPage: React.FC<SearchPageProps>;

package/dist/pages/SearchPage/SearchPageContent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { NotFoundBlockProps } from '../../components';
+export type SearchPageContentProps = {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    postCardList: React.ReactNode;
+    searchNotFound?: NotFoundBlockProps;
+    isLoading?: boolean;
+};
+export declare const SearchPageContent: React.FC<SearchPageContentProps>;

package/dist/pages/SearchPage/index.d.ts

@@ -1 +1,2 @@
 export * from './SearchPage';
+export * from './SearchPageContent';

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 Wed, 17 Jan 2024 08:04:41 GMT
+ * Generated on Fri, 19 Jan 2024 17:00:47 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),
@@ -30,11 +19,24 @@ $token-variables: (
 		'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)
+				'line-height': var(--typography-heading-base-line-height)
+			),
+			'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)
 			)
 		),
 		'text': (
@@ -42,42 +44,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)
 			)
 		)
 	),

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

@@ -1,23 +1,23 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 17 Jan 2024 08:04:41 GMT
+ * Generated on Fri, 19 Jan 2024 17:00:47 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': (