@eleven-labs/design-system 0.26.2 → 0.27.0

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

@@ -1,6 +1,7 @@
 import React from 'react';
+import type { BoxProps } from '../../../../components';
 import type { ComponentPropsWithoutRef } from '../../../../types';
-export interface HomeIntroBlockProps {
+export interface HomeIntroBlockProps extends BoxProps {
     intro: React.ReactNode;
     title: React.ReactNode;
     description: React.ReactNode;

package/dist/constants/tokenVariables.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 29 Jan 2024 17:13:07 GMT
+ * Generated on Tue, 30 Jan 2024 07:18:09 GMT
  */
 export declare const tokenVariables: {
     asset: {
@@ -168,6 +168,11 @@ export declare const tokenVariables: {
         };
     };
     desktop: {
+        base: {
+            'letter-spacing': {
+                value: string;
+            };
+        };
         typography: {
             heading: {
                 s: {
@@ -189,6 +194,9 @@ export declare const tokenVariables: {
                     'font-size': {
                         value: string;
                     };
+                    'letter-spacing': {
+                        value: string;
+                    };
                 };
             };
             text: {

package/dist/index.es.js

@@ -353,12 +353,12 @@ const qe = {
           value: "1.2"
         },
         "letter-spacing": {
-          value: "2px"
+          value: "1px"
         }
       },
       s: {
         "font-size": {
-          value: "20px"
+          value: "16px"
         },
         "font-weight": {
           value: "700"
@@ -369,7 +369,7 @@ const qe = {
       },
       m: {
         "font-size": {
-          value: "28px"
+          value: "24px"
         },
         "font-weight": {
           value: "700"
@@ -377,12 +377,12 @@ const qe = {
       },
       l: {
         "font-size": {
-          value: "36px"
+          value: "32px"
         }
       },
       xl: {
         "font-size": {
-          value: "56px"
+          value: "32px"
         },
         "font-weight": {
           value: "400"
@@ -391,7 +391,7 @@ const qe = {
           value: "uppercase"
         },
         "letter-spacing": {
-          value: "3px"
+          value: "2px"
         }
       }
     },
@@ -428,6 +428,11 @@ const qe = {
     }
   },
   desktop: {
+    base: {
+      "letter-spacing": {
+        value: "2px"
+      }
+    },
     typography: {
       heading: {
         s: {
@@ -448,6 +453,9 @@ const qe = {
         xl: {
           "font-size": {
             value: "64px"
+          },
+          "letter-spacing": {
+            value: "3px"
           }
         }
       },
@@ -4778,8 +4786,9 @@ const ns = ({
   intro: e,
   title: t,
   description: n,
-  elevenLabsLink: { label: i, ...o }
-}) => /* @__PURE__ */ s(V, { py: "xl", className: "home-intro-block", children: /* @__PURE__ */ M(
+  elevenLabsLink: { label: i, ...o },
+  ...r
+}) => /* @__PURE__ */ s(V, { className: "home-intro-block", ...r, children: /* @__PURE__ */ M(
   F,
   {
     alignItems: "baseline",
@@ -4953,15 +4962,35 @@ const is = ({
   description: n,
   link: { label: i, ...o },
   ...r
-}) => /* @__PURE__ */ M(F, { ...r, alignItems: "center", justifyContent: "between", px: "s", py: "m", bg: "white", className: "author-card", children: [
-  /* @__PURE__ */ M(F, { gap: "s", flex: "1", alignItems: "center", children: [
-    t ? /* @__PURE__ */ s("img", { src: t, alt: e, className: "author-card__avatar-img" }) : /* @__PURE__ */ s("div", { className: "author-card__avatar-img author-card__avatar-img--empty" }),
-    /* @__PURE__ */ M(V, { children: [
-      /* @__PURE__ */ s(Z, { color: "primary", size: "m", fontWeight: "semi-bold", children: e }),
-      /* @__PURE__ */ s(Z, { as: "div", size: "xs", mt: "xxs-3", italic: !0, children: n })
-    ] })
-  ] }),
-  /* @__PURE__ */ s(e0, { ...o, px: "m", textTransform: "uppercase", "data-internal-link": "author", className: "author-card__link", children: i })
+}) => /* @__PURE__ */ M(F, { ...r, alignItems: "center", gap: "s", px: "s", py: "m", bg: "white", className: "author-card", children: [
+  t ? /* @__PURE__ */ s("img", { src: t, alt: e, className: "author-card__avatar-img" }) : /* @__PURE__ */ s("div", { className: "author-card__avatar-img author-card__avatar-img--empty" }),
+  /* @__PURE__ */ M(
+    F,
+    {
+      flexDirection: { xs: "column", md: "row" },
+      flex: "1",
+      justifyContent: "between",
+      alignItems: { xs: "start", md: "center" },
+      gap: "s",
+      children: [
+        /* @__PURE__ */ M(V, { children: [
+          /* @__PURE__ */ s(Z, { color: "primary", size: "m", fontWeight: "semi-bold", children: e }),
+          /* @__PURE__ */ s(Z, { as: "div", size: "xs", mt: "xxs-3", italic: !0, children: n })
+        ] }),
+        /* @__PURE__ */ s(
+          e0,
+          {
+            ...o,
+            px: { xs: "0", md: "m" },
+            textTransform: "uppercase",
+            "data-internal-link": "author",
+            className: "author-card__link",
+            children: i
+          }
+        )
+      ]
+    }
+  )
 ] });
 const os = ({
   title: e,
@@ -4977,6 +5006,7 @@ const os = ({
     gap: "m",
     textAlign: "center",
     className: "contact-card__container",
+    px: "m",
     children: [
       /* @__PURE__ */ s(we, { size: "l", color: "primary", children: e }),
       /* @__PURE__ */ s(Z, { size: "s", children: t }),
@@ -7908,7 +7938,7 @@ const dc = ({
   lastTutorialsBlock: n,
   newsletterCard: i
 }) => /* @__PURE__ */ M(Pe, { children: [
-  /* @__PURE__ */ s(ns, { ...e }),
+  /* @__PURE__ */ s(ns, { py: { xs: "0", md: "xl" }, ...e }),
   /* @__PURE__ */ s(uc, { ...t }),
   n && /* @__PURE__ */ s(dc, { ...n }),
   /* @__PURE__ */ s(V, { my: "xl", mx: { xs: "s", md: "auto" }, width: { md: "content-container" }, children: /* @__PURE__ */ s(ut, { variant: "horizontal", ...i }) })