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

package/dist/AnimatedText/AnimatedText.d.cts

@@ -1,13 +1,13 @@
 import { AnimatedTextProps } from "./types/types.cjs";
-import * as react182 from "react";
+import * as react181 from "react";
 
 //#region src/components/AnimatedText/AnimatedText.d.ts
-declare const AnimatedText: react182.MemoExoticComponent<({
+declare const AnimatedText: react181.MemoExoticComponent<({
   sequence,
   typingDuration,
   transition,
   loop,
   getNodeWrapper
-}: AnimatedTextProps) => react182.ReactNode>;
+}: AnimatedTextProps) => react181.ReactNode>;
 //#endregion
 export { AnimatedText };

package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.cts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime27 from "react/jsx-runtime";
+import * as react_jsx_runtime29 from "react/jsx-runtime";
 
 //#region src/components/CSSVariablesEditor/CssVariablesEditorComponent.d.ts
 declare const CssVariablesEditorComponent: ({
   selectedMerchantName
 }: {
   selectedMerchantName: string;
-}) => react_jsx_runtime27.JSX.Element;
+}) => react_jsx_runtime29.JSX.Element;
 //#endregion
 export { CssVariablesEditorComponent };

package/dist/CSSVariablesEditor/CssVariablesEditorComponent.d.ts

@@ -1,10 +1,10 @@
-import * as react_jsx_runtime30 from "react/jsx-runtime";
+import * as react_jsx_runtime35 from "react/jsx-runtime";
 
 //#region src/components/CSSVariablesEditor/CssVariablesEditorComponent.d.ts
 declare const CssVariablesEditorComponent: ({
   selectedMerchantName
 }: {
   selectedMerchantName: string;
-}) => react_jsx_runtime30.JSX.Element;
+}) => react_jsx_runtime35.JSX.Element;
 //#endregion
 export { CssVariablesEditorComponent };

package/dist/CSSVariablesEditor/hooks/useGetCssVariablesOptions.cjs

@@ -1,7 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_colors = require('../../packages/components-v3/tokens/colors/colors.cjs');
 const require_aspectRatio = require('../../packages/components-v3/tokens/aspectRatio/aspectRatio.cjs');
+const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 let react = require("react");
 
 //#region src/components/CSSVariablesEditor/hooks/useGetCssVariablesOptions.ts

package/dist/CSSVariablesEditor/hooks/useGetCssVariablesOptions.js

@@ -1,6 +1,6 @@
-import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { ColorsNamesVars } from "../../packages/components-v3/tokens/colors/colors.js";
 import { AspectRatio } from "../../packages/components-v3/tokens/aspectRatio/aspectRatio.js";
+import { Theme } from "../../packages/components-v3/tokens/theme/theme.js";
 import { useMemo } from "react";
 
 //#region src/components/CSSVariablesEditor/hooks/useGetCssVariablesOptions.ts

package/dist/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.cjs

@@ -1,6 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_utils = require('../../DesignTokens/components/utils.cjs');
 const require_colorsConfig = require('../../packages/components-v3/src/models/colorsConfig.cjs');
+const require_utils = require('../../DesignTokens/components/utils.cjs');
 let react = require("react");
 
 //#region src/components/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.ts

package/dist/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.js

@@ -1,5 +1,5 @@
-import { getCSSVariable } from "../../DesignTokens/components/utils.js";
 import { ColorNames } from "../../packages/components-v3/src/models/colorsConfig.js";
+import { getCSSVariable } from "../../DesignTokens/components/utils.js";
 import { useEffect, useState } from "react";
 
 //#region src/components/CSSVariablesEditor/hooks/useGetCurrentMerchantColors.ts

package/dist/CSSVariablesEditor/hooks/useGetDefaultCssVariables.cjs

@@ -1,5 +1,4 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_theme = require('../../packages/components-v3/tokens/theme/theme.cjs');
 const require_colorsConfig = require('../../packages/components-v3/src/models/colorsConfig.cjs');
 const require_colors = require('../../packages/components-v3/tokens/colors/colors.cjs');
 const require_fontSize = require('../../packages/components-v3/tokens/typography/fontSize.cjs');
@@ -9,6 +8,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');
 const require_useGetCssVariablesOptions = require('./useGetCssVariablesOptions.cjs');
 let react = require("react");
 
@@ -260,108 +260,213 @@ const useGetDefaultCssVariables = ({ defaultMerchantColors }) => {
 			category: "Typography"
 		},
 		{
-			key: "font-weight-rg",
-			name: "Font Weight Regular",
-			variable: require_fontWeight.FontWeightCSSVar.RG,
-			defaultValue: require_fontWeight.fontWeight.rg,
+			key: "font-weight-title",
+			name: "Font Weight Title",
+			variable: require_fontWeight.FontWeightCSSVar.Title,
+			defaultValue: require_fontWeight.fontWeight.title,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-header",
+			name: "Font Weight Header",
+			variable: require_fontWeight.FontWeightCSSVar.Header,
+			defaultValue: require_fontWeight.fontWeight.header,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-body-emphasis",
+			name: "Font Weight Body Emphasis",
+			variable: require_fontWeight.FontWeightCSSVar.BodyEmphasis,
+			defaultValue: require_fontWeight.fontWeight.body_emphasis,
+			category: "Typography"
+		},
+		{
+			key: "font-weight-body-standard",
+			name: "Font Weight Body Standard",
+			variable: require_fontWeight.FontWeightCSSVar.BodyStandard,
+			defaultValue: require_fontWeight.fontWeight.body_standard,
+			category: "Typography"
+		},
+		{
+			key: "line-height-t1",
+			name: "Line Height T1",
+			variable: require_lineHeight.LineHeightCSSVar.T1,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.t1),
+			category: "Typography"
+		},
+		{
+			key: "line-height-t2",
+			name: "Line Height T2",
+			variable: require_lineHeight.LineHeightCSSVar.T2,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.t2),
+			category: "Typography"
+		},
+		{
+			key: "line-height-t3",
+			name: "Line Height T3",
+			variable: require_lineHeight.LineHeightCSSVar.T3,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.t3),
+			category: "Typography"
+		},
+		{
+			key: "line-height-h1",
+			name: "Line Height H1",
+			variable: require_lineHeight.LineHeightCSSVar.H1,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.h1),
+			category: "Typography"
+		},
+		{
+			key: "line-height-h2",
+			name: "Line Height H2",
+			variable: require_lineHeight.LineHeightCSSVar.H2,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.h2),
+			category: "Typography"
+		},
+		{
+			key: "line-height-h3",
+			name: "Line Height H3",
+			variable: require_lineHeight.LineHeightCSSVar.H3,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.h3),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b1",
+			name: "Line Height B1",
+			variable: require_lineHeight.LineHeightCSSVar.B1,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.b1),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b2",
+			name: "Line Height B2",
+			variable: require_lineHeight.LineHeightCSSVar.B2,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.b2),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b3",
+			name: "Line Height B3",
+			variable: require_lineHeight.LineHeightCSSVar.B3,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.b3),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b4",
+			name: "Line Height B4",
+			variable: require_lineHeight.LineHeightCSSVar.B4,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.b4),
+			category: "Typography"
+		},
+		{
+			key: "line-height-b5",
+			name: "Line Height B5",
+			variable: require_lineHeight.LineHeightCSSVar.B5,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.b5),
+			category: "Typography"
+		},
+		{
+			key: "line-height-l1",
+			name: "Line Height L1",
+			variable: require_lineHeight.LineHeightCSSVar.L1,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.l1),
 			category: "Typography"
 		},
 		{
-			key: "font-weight-md",
-			name: "Font Weight Medium",
-			variable: require_fontWeight.FontWeightCSSVar.MD,
-			defaultValue: require_fontWeight.fontWeight.md,
+			key: "line-height-l2",
+			name: "Line Height L2",
+			variable: require_lineHeight.LineHeightCSSVar.L2,
+			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight.l2),
 			category: "Typography"
 		},
 		{
-			key: "font-weight-sb",
-			name: "Font Weight Semi Bold",
-			variable: require_fontWeight.FontWeightCSSVar.SB,
-			defaultValue: require_fontWeight.fontWeight.sb,
+			key: "letter-spacing-t1",
+			name: "Letter Spacing T1",
+			variable: require_letterSpacing.LetterSpacingCSSVar.T1,
+			defaultValue: require_letterSpacing.letterSpacing.t1,
 			category: "Typography"
 		},
 		{
-			key: "line-height-124",
-			name: "Line Height 124%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight124,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[124]),
+			key: "letter-spacing-t2",
+			name: "Letter Spacing T2",
+			variable: require_letterSpacing.LetterSpacingCSSVar.T2,
+			defaultValue: require_letterSpacing.letterSpacing.t2,
 			category: "Typography"
 		},
 		{
-			key: "line-height-120",
-			name: "Line Height 120%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight120,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[120]),
+			key: "letter-spacing-t3",
+			name: "Letter Spacing T3",
+			variable: require_letterSpacing.LetterSpacingCSSVar.T3,
+			defaultValue: require_letterSpacing.letterSpacing.t3,
 			category: "Typography"
 		},
 		{
-			key: "line-height-118",
-			name: "Line Height 118%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight118,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[118]),
+			key: "letter-spacing-h1",
+			name: "Letter Spacing H1",
+			variable: require_letterSpacing.LetterSpacingCSSVar.H1,
+			defaultValue: require_letterSpacing.letterSpacing.h1,
 			category: "Typography"
 		},
 		{
-			key: "line-height-116",
-			name: "Line Height 116%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight116,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[116]),
+			key: "letter-spacing-h2",
+			name: "Letter Spacing H2",
+			variable: require_letterSpacing.LetterSpacingCSSVar.H2,
+			defaultValue: require_letterSpacing.letterSpacing.h2,
 			category: "Typography"
 		},
 		{
-			key: "line-height-114",
-			name: "Line Height 114%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight114,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[114]),
+			key: "letter-spacing-h3",
+			name: "Letter Spacing H3",
+			variable: require_letterSpacing.LetterSpacingCSSVar.H3,
+			defaultValue: require_letterSpacing.letterSpacing.h3,
 			category: "Typography"
 		},
 		{
-			key: "line-height-148",
-			name: "Line Height 148%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight148,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[148]),
+			key: "letter-spacing-b1",
+			name: "Letter Spacing B1",
+			variable: require_letterSpacing.LetterSpacingCSSVar.B1,
+			defaultValue: require_letterSpacing.letterSpacing.b1,
 			category: "Typography"
 		},
 		{
-			key: "line-height-140",
-			name: "Line Height 140%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight140,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[140]),
+			key: "letter-spacing-b2",
+			name: "Letter Spacing B2",
+			variable: require_letterSpacing.LetterSpacingCSSVar.B2,
+			defaultValue: require_letterSpacing.letterSpacing.b2,
 			category: "Typography"
 		},
 		{
-			key: "line-height-128",
-			name: "Line Height 128%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight128,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[128]),
+			key: "letter-spacing-b3",
+			name: "Letter Spacing B3",
+			variable: require_letterSpacing.LetterSpacingCSSVar.B3,
+			defaultValue: require_letterSpacing.letterSpacing.b3,
 			category: "Typography"
 		},
 		{
-			key: "line-height-130",
-			name: "Line Height 130%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight130,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[130]),
+			key: "letter-spacing-b4",
+			name: "Letter Spacing B4",
+			variable: require_letterSpacing.LetterSpacingCSSVar.B4,
+			defaultValue: require_letterSpacing.letterSpacing.b4,
 			category: "Typography"
 		},
 		{
-			key: "line-height-133",
-			name: "Line Height 133%",
-			variable: require_lineHeight.LineHeightCSSVar.LineHeight133,
-			defaultValue: require_lineHeight.convertLineHeightToPercentage(require_lineHeight.lineHeight[133]),
+			key: "letter-spacing-b5",
+			name: "Letter Spacing B5",
+			variable: require_letterSpacing.LetterSpacingCSSVar.B5,
+			defaultValue: require_letterSpacing.letterSpacing.b5,
 			category: "Typography"
 		},
 		{
-			key: "letter-spacing-tight-0",
-			name: "Letter Spacing Tight 0",
-			variable: require_letterSpacing.LetterSpacingCSSVar.Tight0,
-			defaultValue: require_letterSpacing.letterSpacing["tight-0"],
+			key: "letter-spacing-l1",
+			name: "Letter Spacing L1",
+			variable: require_letterSpacing.LetterSpacingCSSVar.L1,
+			defaultValue: require_letterSpacing.letterSpacing.l1,
 			category: "Typography"
 		},
 		{
-			key: "letter-spacing-wide-1",
-			name: "Letter Spacing Wide 1",
-			variable: require_letterSpacing.LetterSpacingCSSVar.Wide1,
-			defaultValue: require_letterSpacing.letterSpacing["wide-1"],
+			key: "letter-spacing-l2",
+			name: "Letter Spacing L2",
+			variable: require_letterSpacing.LetterSpacingCSSVar.L2,
+			defaultValue: require_letterSpacing.letterSpacing.l2,
 			category: "Typography"
 		},
 		{

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"
 		},
 		{