@envive-ai/react-toolkit-v3 0.3.32 → 0.3.34

package/dist/CSSVariablesEditor/hooks/useGetDefaultCssVariables.js

@@ -1,4 +1,3 @@
-import { Theme, ThemeCSSVar } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ColorNames } from "../../packages/components-v3/src/models/colorsConfig.js";
 import { ButtonColorsVars, ColorsNamesVars } from "../../packages/components-v3/tokens/colors/colors.js";
 import { FontSizeCSSVar, fontSize } from "../../packages/components-v3/tokens/typography/fontSize.js";
@@ -8,6 +7,7 @@ import { LetterSpacingCSSVar, letterSpacing } from "../../packages/components-v3
 import { FontFamily, FontFamilyCSSVar } from "../../packages/components-v3/tokens/typography/fontFamily.js";
 import { BorderRadiusCSSVar } from "../../packages/components-v3/tokens/radius/radius.js";
 import { AspectRatio, AspectRatioCSSVar } from "../../packages/components-v3/tokens/aspectRatio/aspectRatio.js";
+import { Theme, ThemeCSSVar } from "../../packages/components-v3/tokens/theme/theme.js";
 import { useGetCssVariablesOptions } from "./useGetCssVariablesOptions.js";
 import { useMemo } from "react";
 
@@ -259,108 +259,213 @@ const useGetDefaultCssVariables = ({ defaultMerchantColors }) => {
 			category: "Typography"
 		},
 		{
-			key: "font-weight-rg",
-			name: "Font Weight Regular",
-			variable: FontWeightCSSVar.RG,
-			defaultValue: fontWeight.rg,
+			key: "font-weight-title",
+			name: "Font Weight Title",
+			variable: FontWeightCSSVar.Title,
+			defaultValue: fontWeight.title,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-header",
+			name: "Font Weight Header",
+			variable: FontWeightCSSVar.Header,
+			defaultValue: fontWeight.header,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-body-emphasis",
+			name: "Font Weight Body Emphasis",
+			variable: FontWeightCSSVar.BodyEmphasis,
+			defaultValue: fontWeight.body_emphasis,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-body-standard",
+			name: "Font Weight Body Standard",
+			variable: FontWeightCSSVar.BodyStandard,
+			defaultValue: fontWeight.body_standard,
+			category: "Typography"
+		},
+		{
+			key: "line-height-t1",
+			name: "Line Height T1",
+			variable: LineHeightCSSVar.T1,
+			defaultValue: convertLineHeightToPercentage(lineHeight.t1),
+			category: "Typography"
+		},
+		{
+			key: "line-height-t2",
+			name: "Line Height T2",
+			variable: LineHeightCSSVar.T2,
+			defaultValue: convertLineHeightToPercentage(lineHeight.t2),
+			category: "Typography"
+		},
+		{
+			key: "line-height-t3",
+			name: "Line Height T3",
+			variable: LineHeightCSSVar.T3,
+			defaultValue: convertLineHeightToPercentage(lineHeight.t3),
+			category: "Typography"
+		},
+		{
+			key: "line-height-h1",
+			name: "Line Height H1",
+			variable: LineHeightCSSVar.H1,
+			defaultValue: convertLineHeightToPercentage(lineHeight.h1),
+			category: "Typography"
+		},
+		{
+			key: "line-height-h2",
+			name: "Line Height H2",
+			variable: LineHeightCSSVar.H2,
+			defaultValue: convertLineHeightToPercentage(lineHeight.h2),
+			category: "Typography"
+		},
+		{
+			key: "line-height-h3",
+			name: "Line Height H3",
+			variable: LineHeightCSSVar.H3,
+			defaultValue: convertLineHeightToPercentage(lineHeight.h3),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b1",
+			name: "Line Height B1",
+			variable: LineHeightCSSVar.B1,
+			defaultValue: convertLineHeightToPercentage(lineHeight.b1),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b2",
+			name: "Line Height B2",
+			variable: LineHeightCSSVar.B2,
+			defaultValue: convertLineHeightToPercentage(lineHeight.b2),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b3",
+			name: "Line Height B3",
+			variable: LineHeightCSSVar.B3,
+			defaultValue: convertLineHeightToPercentage(lineHeight.b3),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b4",
+			name: "Line Height B4",
+			variable: LineHeightCSSVar.B4,
+			defaultValue: convertLineHeightToPercentage(lineHeight.b4),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b5",
+			name: "Line Height B5",
+			variable: LineHeightCSSVar.B5,
+			defaultValue: convertLineHeightToPercentage(lineHeight.b5),
+			category: "Typography"
+		},
+		{
+			key: "line-height-l1",
+			name: "Line Height L1",
+			variable: LineHeightCSSVar.L1,
+			defaultValue: convertLineHeightToPercentage(lineHeight.l1),
 			category: "Typography"
 		},
 		{
-			key: "font-weight-md",
-			name: "Font Weight Medium",
-			variable: FontWeightCSSVar.MD,
-			defaultValue: fontWeight.md,
+			key: "line-height-l2",
+			name: "Line Height L2",
+			variable: LineHeightCSSVar.L2,
+			defaultValue: convertLineHeightToPercentage(lineHeight.l2),
 			category: "Typography"
 		},
 		{
-			key: "font-weight-sb",
-			name: "Font Weight Semi Bold",
-			variable: FontWeightCSSVar.SB,
-			defaultValue: fontWeight.sb,
+			key: "letter-spacing-t1",
+			name: "Letter Spacing T1",
+			variable: LetterSpacingCSSVar.T1,
+			defaultValue: letterSpacing.t1,
 			category: "Typography"
 		},
 		{
-			key: "line-height-124",
-			name: "Line Height 124%",
-			variable: LineHeightCSSVar.LineHeight124,
-			defaultValue: convertLineHeightToPercentage(lineHeight[124]),
+			key: "letter-spacing-t2",
+			name: "Letter Spacing T2",
+			variable: LetterSpacingCSSVar.T2,
+			defaultValue: letterSpacing.t2,
 			category: "Typography"
 		},
 		{
-			key: "line-height-120",
-			name: "Line Height 120%",
-			variable: LineHeightCSSVar.LineHeight120,
-			defaultValue: convertLineHeightToPercentage(lineHeight[120]),
+			key: "letter-spacing-t3",
+			name: "Letter Spacing T3",
+			variable: LetterSpacingCSSVar.T3,
+			defaultValue: letterSpacing.t3,
 			category: "Typography"
 		},
 		{
-			key: "line-height-118",
-			name: "Line Height 118%",
-			variable: LineHeightCSSVar.LineHeight118,
-			defaultValue: convertLineHeightToPercentage(lineHeight[118]),
+			key: "letter-spacing-h1",
+			name: "Letter Spacing H1",
+			variable: LetterSpacingCSSVar.H1,
+			defaultValue: letterSpacing.h1,
 			category: "Typography"
 		},
 		{
-			key: "line-height-116",
-			name: "Line Height 116%",
-			variable: LineHeightCSSVar.LineHeight116,
-			defaultValue: convertLineHeightToPercentage(lineHeight[116]),
+			key: "letter-spacing-h2",
+			name: "Letter Spacing H2",
+			variable: LetterSpacingCSSVar.H2,
+			defaultValue: letterSpacing.h2,
 			category: "Typography"
 		},
 		{
-			key: "line-height-114",
-			name: "Line Height 114%",
-			variable: LineHeightCSSVar.LineHeight114,
-			defaultValue: convertLineHeightToPercentage(lineHeight[114]),
+			key: "letter-spacing-h3",
+			name: "Letter Spacing H3",
+			variable: LetterSpacingCSSVar.H3,
+			defaultValue: letterSpacing.h3,
 			category: "Typography"
 		},
 		{
-			key: "line-height-148",
-			name: "Line Height 148%",
-			variable: LineHeightCSSVar.LineHeight148,
-			defaultValue: convertLineHeightToPercentage(lineHeight[148]),
+			key: "letter-spacing-b1",
+			name: "Letter Spacing B1",
+			variable: LetterSpacingCSSVar.B1,
+			defaultValue: letterSpacing.b1,
 			category: "Typography"
 		},
 		{
-			key: "line-height-140",
-			name: "Line Height 140%",
-			variable: LineHeightCSSVar.LineHeight140,
-			defaultValue: convertLineHeightToPercentage(lineHeight[140]),
+			key: "letter-spacing-b2",
+			name: "Letter Spacing B2",
+			variable: LetterSpacingCSSVar.B2,
+			defaultValue: letterSpacing.b2,
 			category: "Typography"
 		},
 		{
-			key: "line-height-128",
-			name: "Line Height 128%",
-			variable: LineHeightCSSVar.LineHeight128,
-			defaultValue: convertLineHeightToPercentage(lineHeight[128]),
+			key: "letter-spacing-b3",
+			name: "Letter Spacing B3",
+			variable: LetterSpacingCSSVar.B3,
+			defaultValue: letterSpacing.b3,
 			category: "Typography"
 		},
 		{
-			key: "line-height-130",
-			name: "Line Height 130%",
-			variable: LineHeightCSSVar.LineHeight130,
-			defaultValue: convertLineHeightToPercentage(lineHeight[130]),
+			key: "letter-spacing-b4",
+			name: "Letter Spacing B4",
+			variable: LetterSpacingCSSVar.B4,
+			defaultValue: letterSpacing.b4,
 			category: "Typography"
 		},
 		{
-			key: "line-height-133",
-			name: "Line Height 133%",
-			variable: LineHeightCSSVar.LineHeight133,
-			defaultValue: convertLineHeightToPercentage(lineHeight[133]),
+			key: "letter-spacing-b5",
+			name: "Letter Spacing B5",
+			variable: LetterSpacingCSSVar.B5,
+			defaultValue: letterSpacing.b5,
 			category: "Typography"
 		},
 		{
-			key: "letter-spacing-tight-0",
-			name: "Letter Spacing Tight 0",
-			variable: LetterSpacingCSSVar.Tight0,
-			defaultValue: letterSpacing["tight-0"],
+			key: "letter-spacing-l1",
+			name: "Letter Spacing L1",
+			variable: LetterSpacingCSSVar.L1,
+			defaultValue: letterSpacing.l1,
 			category: "Typography"
 		},
 		{
-			key: "letter-spacing-wide-1",
-			name: "Letter Spacing Wide 1",
-			variable: LetterSpacingCSSVar.Wide1,
-			defaultValue: letterSpacing["wide-1"],
+			key: "letter-spacing-l2",
+			name: "Letter Spacing L2",
+			variable: LetterSpacingCSSVar.L2,
+			defaultValue: letterSpacing.l2,
 			category: "Typography"
 		},
 		{

package/dist/CSSVariablesEditor/hooks/useHandleUpdateCssVars.cjs

@@ -1,4 +1,3 @@
-const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_colors = require('../../packages/components-v3/tokens/colors/colors.cjs');
 const require_fontSize = require('../../packages/components-v3/tokens/typography/fontSize.cjs');
 const require_fontWeight = require('../../packages/components-v3/tokens/typography/fontWeight.cjs');
@@ -7,6 +6,7 @@ const require_letterSpacing = require('../../packages/components-v3/tokens/typog
 const require_fontFamily = require('../../packages/components-v3/tokens/typography/fontFamily.cjs');
 const require_radius = require('../../packages/components-v3/tokens/radius/radius.cjs');
 const require_aspectRatio = require('../../packages/components-v3/tokens/aspectRatio/aspectRatio.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 
 //#region src/components/CSSVariablesEditor/hooks/useHandleUpdateCssVars.ts
 const useHandleUpdateCssVars = () => {
@@ -28,23 +28,38 @@ const useHandleUpdateCssVars = () => {
         --${require_fontSize.FontSizeCSSVar.L1}: ${variables["font-size-l1"]} !important;
         --${require_fontSize.FontSizeCSSVar.L2}: ${variables["font-size-l2"]} !important;
 
-        --${require_fontWeight.FontWeightCSSVar.RG}: ${variables["font-weight-rg"]} !important;
-        --${require_fontWeight.FontWeightCSSVar.MD}: ${variables["font-weight-md"]} !important;
-        --${require_fontWeight.FontWeightCSSVar.SB}: ${variables["font-weight-sb"]} !important;
+        --${require_fontWeight.FontWeightCSSVar.Title}: ${variables["font-weight-title"]} !important;
+        --${require_fontWeight.FontWeightCSSVar.Header}: ${variables["font-weight-header"]} !important;
+        --${require_fontWeight.FontWeightCSSVar.BodyEmphasis}: ${variables["font-weight-body-emphasis"]} !important;
+        --${require_fontWeight.FontWeightCSSVar.BodyStandard}: ${variables["font-weight-body-standard"]} !important;
 
-        --${require_lineHeight.LineHeightCSSVar.LineHeight124}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-124"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight120}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-120"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight118}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-118"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight116}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-116"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight114}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-114"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight148}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-148"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight140}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-140"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight128}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-128"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight130}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-130"])} !important;
-        --${require_lineHeight.LineHeightCSSVar.LineHeight133}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-133"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.T1}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-t1"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.T2}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-t2"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.T3}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-t3"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.H1}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-h1"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.H2}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-h2"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.H3}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-h3"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.B1}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-b1"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.B2}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-b2"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.B3}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-b3"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.B4}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-b4"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.B5}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-b5"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.L1}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-l1"])} !important;
+        --${require_lineHeight.LineHeightCSSVar.L2}: ${require_lineHeight.convertPercentageTolineHeight(variables["line-height-l2"])} !important;
 
-        --${require_letterSpacing.LetterSpacingCSSVar.Tight0}: ${variables["letter-spacing-tight-0"]} !important;
-        --${require_letterSpacing.LetterSpacingCSSVar.Wide1}: ${variables["letter-spacing-wide-1"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.T1}: ${variables["letter-spacing-t1"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.T2}: ${variables["letter-spacing-t2"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.T3}: ${variables["letter-spacing-t3"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.H1}: ${variables["letter-spacing-h1"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.H2}: ${variables["letter-spacing-h2"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.H3}: ${variables["letter-spacing-h3"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.B1}: ${variables["letter-spacing-b1"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.B2}: ${variables["letter-spacing-b2"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.B3}: ${variables["letter-spacing-b3"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.B4}: ${variables["letter-spacing-b4"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.B5}: ${variables["letter-spacing-b5"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.L1}: ${variables["letter-spacing-l1"]} !important;
+        --${require_letterSpacing.LetterSpacingCSSVar.L2}: ${variables["letter-spacing-l2"]} !important;
 
         --${require_fontFamily.FontFamilyCSSVar.Title}: ${variables["font-family-title"]} !important;
         --${require_fontFamily.FontFamilyCSSVar.Header}: ${variables["font-family-header"]} !important;

package/dist/CSSVariablesEditor/hooks/useHandleUpdateCssVars.js

@@ -1,4 +1,3 @@
-import { ThemeCSSVar } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ButtonColorsVars, ColorsNamesVars } from "../../packages/components-v3/tokens/colors/colors.js";
 import { FontSizeCSSVar } from "../../packages/components-v3/tokens/typography/fontSize.js";
 import { FontWeightCSSVar } from "../../packages/components-v3/tokens/typography/fontWeight.js";
@@ -7,6 +6,7 @@ import { LetterSpacingCSSVar } from "../../packages/components-v3/tokens/typogra
 import { FontFamilyCSSVar } from "../../packages/components-v3/tokens/typography/fontFamily.js";
 import { BorderRadiusCSSVar } from "../../packages/components-v3/tokens/radius/radius.js";
 import { AspectRatioCSSVar, convertAspectRatioNameToStyle } from "../../packages/components-v3/tokens/aspectRatio/aspectRatio.js";
+import { ThemeCSSVar } from "../../packages/components-v3/tokens/theme/theme.js";
 
 //#region src/components/CSSVariablesEditor/hooks/useHandleUpdateCssVars.ts
 const useHandleUpdateCssVars = () => {
@@ -28,23 +28,38 @@ const useHandleUpdateCssVars = () => {
         --${FontSizeCSSVar.L1}: ${variables["font-size-l1"]} !important;
         --${FontSizeCSSVar.L2}: ${variables["font-size-l2"]} !important;
 
-        --${FontWeightCSSVar.RG}: ${variables["font-weight-rg"]} !important;
-        --${FontWeightCSSVar.MD}: ${variables["font-weight-md"]} !important;
-        --${FontWeightCSSVar.SB}: ${variables["font-weight-sb"]} !important;
+        --${FontWeightCSSVar.Title}: ${variables["font-weight-title"]} !important;
+        --${FontWeightCSSVar.Header}: ${variables["font-weight-header"]} !important;
+        --${FontWeightCSSVar.BodyEmphasis}: ${variables["font-weight-body-emphasis"]} !important;
+        --${FontWeightCSSVar.BodyStandard}: ${variables["font-weight-body-standard"]} !important;
 
-        --${LineHeightCSSVar.LineHeight124}: ${convertPercentageTolineHeight(variables["line-height-124"])} !important;
-        --${LineHeightCSSVar.LineHeight120}: ${convertPercentageTolineHeight(variables["line-height-120"])} !important;
-        --${LineHeightCSSVar.LineHeight118}: ${convertPercentageTolineHeight(variables["line-height-118"])} !important;
-        --${LineHeightCSSVar.LineHeight116}: ${convertPercentageTolineHeight(variables["line-height-116"])} !important;
-        --${LineHeightCSSVar.LineHeight114}: ${convertPercentageTolineHeight(variables["line-height-114"])} !important;
-        --${LineHeightCSSVar.LineHeight148}: ${convertPercentageTolineHeight(variables["line-height-148"])} !important;
-        --${LineHeightCSSVar.LineHeight140}: ${convertPercentageTolineHeight(variables["line-height-140"])} !important;
-        --${LineHeightCSSVar.LineHeight128}: ${convertPercentageTolineHeight(variables["line-height-128"])} !important;
-        --${LineHeightCSSVar.LineHeight130}: ${convertPercentageTolineHeight(variables["line-height-130"])} !important;
-        --${LineHeightCSSVar.LineHeight133}: ${convertPercentageTolineHeight(variables["line-height-133"])} !important;
+        --${LineHeightCSSVar.T1}: ${convertPercentageTolineHeight(variables["line-height-t1"])} !important;
+        --${LineHeightCSSVar.T2}: ${convertPercentageTolineHeight(variables["line-height-t2"])} !important;
+        --${LineHeightCSSVar.T3}: ${convertPercentageTolineHeight(variables["line-height-t3"])} !important;
+        --${LineHeightCSSVar.H1}: ${convertPercentageTolineHeight(variables["line-height-h1"])} !important;
+        --${LineHeightCSSVar.H2}: ${convertPercentageTolineHeight(variables["line-height-h2"])} !important;
+        --${LineHeightCSSVar.H3}: ${convertPercentageTolineHeight(variables["line-height-h3"])} !important;
+        --${LineHeightCSSVar.B1}: ${convertPercentageTolineHeight(variables["line-height-b1"])} !important;
+        --${LineHeightCSSVar.B2}: ${convertPercentageTolineHeight(variables["line-height-b2"])} !important;
+        --${LineHeightCSSVar.B3}: ${convertPercentageTolineHeight(variables["line-height-b3"])} !important;
+        --${LineHeightCSSVar.B4}: ${convertPercentageTolineHeight(variables["line-height-b4"])} !important;
+        --${LineHeightCSSVar.B5}: ${convertPercentageTolineHeight(variables["line-height-b5"])} !important;
+        --${LineHeightCSSVar.L1}: ${convertPercentageTolineHeight(variables["line-height-l1"])} !important;
+        --${LineHeightCSSVar.L2}: ${convertPercentageTolineHeight(variables["line-height-l2"])} !important;
 
-        --${LetterSpacingCSSVar.Tight0}: ${variables["letter-spacing-tight-0"]} !important;
-        --${LetterSpacingCSSVar.Wide1}: ${variables["letter-spacing-wide-1"]} !important;
+        --${LetterSpacingCSSVar.T1}: ${variables["letter-spacing-t1"]} !important;
+        --${LetterSpacingCSSVar.T2}: ${variables["letter-spacing-t2"]} !important;
+        --${LetterSpacingCSSVar.T3}: ${variables["letter-spacing-t3"]} !important;
+        --${LetterSpacingCSSVar.H1}: ${variables["letter-spacing-h1"]} !important;
+        --${LetterSpacingCSSVar.H2}: ${variables["letter-spacing-h2"]} !important;
+        --${LetterSpacingCSSVar.H3}: ${variables["letter-spacing-h3"]} !important;
+        --${LetterSpacingCSSVar.B1}: ${variables["letter-spacing-b1"]} !important;
+        --${LetterSpacingCSSVar.B2}: ${variables["letter-spacing-b2"]} !important;
+        --${LetterSpacingCSSVar.B3}: ${variables["letter-spacing-b3"]} !important;
+        --${LetterSpacingCSSVar.B4}: ${variables["letter-spacing-b4"]} !important;
+        --${LetterSpacingCSSVar.B5}: ${variables["letter-spacing-b5"]} !important;
+        --${LetterSpacingCSSVar.L1}: ${variables["letter-spacing-l1"]} !important;
+        --${LetterSpacingCSSVar.L2}: ${variables["letter-spacing-l2"]} !important;
 
         --${FontFamilyCSSVar.Title}: ${variables["font-family-title"]} !important;
         --${FontFamilyCSSVar.Header}: ${variables["font-family-header"]} !important;

package/dist/Carousel/Carousel.d.cts

@@ -1,5 +1,5 @@
 import { CarouselProps } from "./types/types.cjs";
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/Carousel/Carousel.d.ts
 declare const Carousel: ({
@@ -12,6 +12,6 @@ declare const Carousel: ({
   badgeContent,
   theme,
   hideNavigation
-}: CarouselProps) => react_jsx_runtime35.JSX.Element;
+}: CarouselProps) => react_jsx_runtime30.JSX.Element;
 //#endregion
 export { Carousel };

package/dist/Carousel/Carousel.d.ts

@@ -1,5 +1,5 @@
 import { CarouselProps } from "./types/types.js";
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 
 //#region src/components/Carousel/Carousel.d.ts
 declare const Carousel: ({
@@ -12,6 +12,6 @@ declare const Carousel: ({
   badgeContent,
   theme,
   hideNavigation
-}: CarouselProps) => react_jsx_runtime36.JSX.Element;
+}: CarouselProps) => react_jsx_runtime31.JSX.Element;
 //#endregion
 export { Carousel };

package/dist/Carousel/components/Badge.cjs

@@ -4,9 +4,9 @@ const require_index = require('../../Typography/types/index.cjs');
 const require_Typography = require('../../Typography/Typography.cjs');
 require('../../Typography/index.cjs');
 const require_useGetBadgeProperties = require('../hooks/useGetBadgeProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/Carousel/components/Badge.tsx
 const Badge = ({ label, theme }) => {

package/dist/Carousel/components/Badge.js

@@ -3,8 +3,8 @@ import { TypographyColor, TypographyVariant } from "../../Typography/types/index
 import { Typography } from "../../Typography/Typography.js";
 import "../../Typography/index.js";
 import { useGetBadgeProperties } from "../hooks/useGetBadgeProperties.js";
-import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/Carousel/components/Badge.tsx
 const Badge = ({ label, theme }) => {

package/dist/Carousel/components/Container.cjs

@@ -8,8 +8,8 @@ const require_useCarouselNavigation = require('../hooks/useCarouselNavigation.cj
 const require_useCarouselNavigationButtons = require('../hooks/useCarouselNavigationButtons.cjs');
 const require_useCarouselButtons = require('../hooks/useCarouselButtons.cjs');
 let react = require("react");
-let react_indiana_drag_scroll = require("react-indiana-drag-scroll");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react_indiana_drag_scroll = require("react-indiana-drag-scroll");
 
 //#region src/components/Carousel/components/Container.tsx
 const Container$1 = ({ children, className, id, testId, style, next, previous, badge }) => {

package/dist/Carousel/components/Container.js

@@ -7,8 +7,8 @@ import { useCarouselNavigation } from "../hooks/useCarouselNavigation.js";
 import { useCarouselNavigationButtons } from "../hooks/useCarouselNavigationButtons.js";
 import { useCarouselButtons } from "../hooks/useCarouselButtons.js";
 import { useCallback, useRef } from "react";
-import { useScrollContainer } from "react-indiana-drag-scroll";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useScrollContainer } from "react-indiana-drag-scroll";
 
 //#region src/components/Carousel/components/Container.tsx
 const Container$1 = ({ children, className, id, testId, style, next, previous, badge }) => {

package/dist/ChatFooter/ChatFooter.cjs

@@ -4,9 +4,9 @@ const require_resolveTheme = require('../utils/resolveTheme.cjs');
 require('../Tokens/index.cjs');
 const require_useGetChatScrollProperties = require('./hooks/useGetChatScrollProperties.cjs');
 const require_index = require('./components/index.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ChatFooter/ChatFooter.tsx
 const ChatFooter = ({ id, testId, className, style, theme = require_theme.Theme.GLOBAL_CUSTOM, promptSuggestions, handleButtonClick, isScrolled, onChange, onSubmit, onFocus, textFieldPlaceholderText, hideEnviveWatermark = false, disabled = false, isLoadingPromptSuggestions = false, disabledInput = false, inputClassName, parentWidget, voiceInputEnabled = false, onTranscriptionStarted, onTranscriptionCompleted }) => {

package/dist/ChatFooter/ChatFooter.d.cts

@@ -1,5 +1,5 @@
 import { ChatFooterProps } from "./types/types.cjs";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime33 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/ChatFooter.d.ts
 declare const ChatFooter: ({
@@ -24,6 +24,6 @@ declare const ChatFooter: ({
   voiceInputEnabled,
   onTranscriptionStarted,
   onTranscriptionCompleted
-}: ChatFooterProps) => react_jsx_runtime34.JSX.Element;
+}: ChatFooterProps) => react_jsx_runtime33.JSX.Element;
 //#endregion
 export { ChatFooter };

package/dist/ChatFooter/ChatFooter.d.ts

@@ -1,5 +1,5 @@
 import { ChatFooterProps } from "./types/types.js";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/ChatFooter.d.ts
 declare const ChatFooter: ({
@@ -24,6 +24,6 @@ declare const ChatFooter: ({
   voiceInputEnabled,
   onTranscriptionStarted,
   onTranscriptionCompleted
-}: ChatFooterProps) => react_jsx_runtime34.JSX.Element;
+}: ChatFooterProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 export { ChatFooter };

package/dist/ChatFooter/ChatFooter.js

@@ -3,8 +3,8 @@ import { resolveTheme } from "../utils/resolveTheme.js";
 import "../Tokens/index.js";
 import { useGetChatScrollProperties } from "./hooks/useGetChatScrollProperties.js";
 import { ChatFooterComponents } from "./components/index.js";
-import classNames from "classnames";
 import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/ChatFooter/ChatFooter.tsx
 const ChatFooter = ({ id, testId, className, style, theme = Theme.GLOBAL_CUSTOM, promptSuggestions, handleButtonClick, isScrolled, onChange, onSubmit, onFocus, textFieldPlaceholderText, hideEnviveWatermark = false, disabled = false, isLoadingPromptSuggestions = false, disabledInput = false, inputClassName, parentWidget, voiceInputEnabled = false, onTranscriptionStarted, onTranscriptionCompleted }) => {

package/dist/ChatFooter/components/Layout.cjs

@@ -5,9 +5,9 @@ const require_Container = require('../../Container/Container.cjs');
 require('../../Container/index.cjs');
 const require_useGetContainerProperties = require('../hooks/useGetContainerProperties.cjs');
 const require_useGetChatScrollProperties = require('../hooks/useGetChatScrollProperties.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
-let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/ChatFooter/components/Layout.tsx
 const Layout = ({ promptSuggestions, textField, enviveLogo, isScrolled, theme, hideEnviveWatermark, hasPromptSuggestions, id, testId, className, style }) => {

package/dist/ChatFooter/components/Layout.js

@@ -4,8 +4,8 @@ import { Container } from "../../Container/Container.js";
 import "../../Container/index.js";
 import { useGetContainerProperties } from "../hooks/useGetContainerProperties.js";
 import { useGetChatScrollProperties } from "../hooks/useGetChatScrollProperties.js";
-import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 
 //#region src/components/ChatFooter/components/Layout.tsx
 const Layout = ({ promptSuggestions, textField, enviveLogo, isScrolled, theme, hideEnviveWatermark, hasPromptSuggestions, id, testId, className, style }) => {

package/dist/ChatFooter/components/index.d.cts

@@ -1,8 +1,8 @@
 import { LayoutProps } from "./Layout.cjs";
 import { PromptSuggestionsProps } from "./PromptSuggestions.cjs";
 import { TextFieldProps } from "../../TextField/types/index.cjs";
-import * as react8 from "react";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react183 from "react";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
 
 //#region src/components/ChatFooter/components/index.d.ts
 declare const ChatFooterComponents: {
@@ -18,13 +18,13 @@ declare const ChatFooterComponents: {
     testId,
     className,
     style
-  }: LayoutProps) => react_jsx_runtime32.JSX.Element;
+  }: LayoutProps) => react_jsx_runtime31.JSX.Element;
   EnviveLogo: ({
     style
   }: {
     className?: string;
     style?: React.CSSProperties;
-  }) => react8.ReactElement<react8.SVGProps<SVGSVGElement>, string | react8.JSXElementConstructor<any>>;
+  }) => react183.ReactElement<react183.SVGProps<SVGSVGElement>, string | react183.JSXElementConstructor<any>>;
   PromptSuggestions: ({
     theme,
     suggestions,
@@ -33,7 +33,7 @@ declare const ChatFooterComponents: {
     style,
     disabled,
     parentWidget
-  }: PromptSuggestionsProps) => react_jsx_runtime32.JSX.Element;
+  }: PromptSuggestionsProps) => react_jsx_runtime31.JSX.Element;
   TextField: ({
     theme,
     placeholder,