@veritone-ce/design-system 2.0.2 → 2.0.4

package/dist/esm-next/Menu/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"menu":"vt_ce_Menu_menu__bd4e93dd","option":"vt_ce_Menu_option__bd4e93dd","option-icon":"vt_ce_Menu_optionIcon__bd4e93dd","option-label":"vt_ce_Menu_optionLabel__bd4e93dd"};
+var modules_efc4e723 = {"menu":"vt_ce_Menu_menu__5d29505b","option":"vt_ce_Menu_option__5d29505b","option-icon":"vt_ce_Menu_optionIcon__5d29505b","option-label":"vt_ce_Menu_optionLabel__5d29505b"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/RadioButton/index.js

@@ -26,6 +26,7 @@ const RadioButton = forwardRef(
           e.stopPropagation();
           e.preventDefault();
         },
+        "data-testid": props["data-testid"],
         style: props.style,
         className: cx(modules_efc4e723["radio"], props.className),
         children: [

package/dist/esm-next/RadioButton/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"radio":"vt_ce_RadioButton_radio__16b9e3d4","radio-circle-outer":"vt_ce_RadioButton_radioCircleOuter__16b9e3d4","radio-circle-inner":"vt_ce_RadioButton_radioCircleInner__16b9e3d4","passthrough-label-container":"vt_ce_RadioButton_passthroughLabelContainer__16b9e3d4","invisible-radio":"vt_ce_RadioButton_invisibleRadio__16b9e3d4","visible-label":"vt_ce_RadioButton_visibleLabel__16b9e3d4","icon-container":"vt_ce_RadioButton_iconContainer__16b9e3d4"};
+var modules_efc4e723 = {"radio":"vt_ce_RadioButton_radio__2b107241","radio-circle-outer":"vt_ce_RadioButton_radioCircleOuter__2b107241","radio-circle-inner":"vt_ce_RadioButton_radioCircleInner__2b107241","passthrough-label-container":"vt_ce_RadioButton_passthroughLabelContainer__2b107241","invisible-radio":"vt_ce_RadioButton_invisibleRadio__2b107241","visible-label":"vt_ce_RadioButton_visibleLabel__2b107241","icon-container":"vt_ce_RadioButton_iconContainer__2b107241"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/Select/controlled.js

@@ -42,6 +42,7 @@ function ControlledSelect({
         id: anchorId,
         ref: anchorRef,
         className: cx(modules_efc4e723["select"], props.className),
+        "data-testid": props["data-testid"],
         style: props.style,
         onClick: () => setActiveAnchor(anchorRef.current),
         children: [

package/dist/esm-next/Select/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"select":"vt_ce_Select_select__b9f77002","label":"vt_ce_Select_label__b9f77002","inner-input-container":"vt_ce_Select_innerInputContainer__b9f77002","inner-input":"vt_ce_Select_innerInput__b9f77002","select-icon":"vt_ce_Select_selectIcon__b9f77002","help-label":"vt_ce_Select_helpLabel__b9f77002","error-label":"vt_ce_Select_errorLabel__b9f77002"};
+var modules_efc4e723 = {"select":"vt_ce_Select_select__269cb8d6","label":"vt_ce_Select_label__269cb8d6","inner-input-container":"vt_ce_Select_innerInputContainer__269cb8d6","inner-input":"vt_ce_Select_innerInput__269cb8d6","select-icon":"vt_ce_Select_selectIcon__269cb8d6","help-label":"vt_ce_Select_helpLabel__269cb8d6","error-label":"vt_ce_Select_errorLabel__269cb8d6"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/Textarea/index.js

@@ -13,6 +13,7 @@ const Textarea = forwardRef(
     return /* @__PURE__ */ jsxs(
       "span",
       {
+        "data-testid": props["data-testid"],
         style: props.style,
         className: cx(modules_efc4e723["textarea"], props.className),
         children: [

package/dist/esm-next/Textarea/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__c4cfba0d","label":"vt_ce_Textarea_label__c4cfba0d","inner-textarea-container":"vt_ce_Textarea_innerTextareaContainer__c4cfba0d","inner-textarea":"vt_ce_Textarea_innerTextarea__c4cfba0d","help-label":"vt_ce_Textarea_helpLabel__c4cfba0d","error-label":"vt_ce_Textarea_errorLabel__c4cfba0d"};
+var modules_efc4e723 = {"textarea":"vt_ce_Textarea_textarea__8ff9396f","label":"vt_ce_Textarea_label__8ff9396f","inner-textarea-container":"vt_ce_Textarea_innerTextareaContainer__8ff9396f","inner-textarea":"vt_ce_Textarea_innerTextarea__8ff9396f","help-label":"vt_ce_Textarea_helpLabel__8ff9396f","error-label":"vt_ce_Textarea_errorLabel__8ff9396f"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/Tooltip/index.js

@@ -56,6 +56,7 @@ function Tooltip({ placement = "bottom", ...props }) {
       "div",
       {
         ref: refs.setFloating,
+        "data-testid": props["data-testid"],
         style: {
           ...floatingStyles,
           ...props.style

package/dist/esm-next/Tooltip/styles.module.scss.js

@@ -1,3 +1,3 @@
-var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__3658bd43","tooltip-body":"vt_ce_Tooltip_tooltipBody__3658bd43"};
+var modules_efc4e723 = {"tooltip-anchor":"vt_ce_Tooltip_tooltipAnchor__86070564","tooltip-body":"vt_ce_Tooltip_tooltipBody__86070564"};
 
 export { modules_efc4e723 as default };

package/dist/esm-next/Typography/index.js

@@ -20,6 +20,10 @@ const Typography = forwardRef(
   }
 );
 const variantComponents = {
+  title: "h1",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
   h4: "h4",
   label: "span",
   paragraph1: "p",

package/dist/esm-next/Typography/variants.module.scss.js

@@ -1,3 +1,3 @@
-var modules_b5c3b63b = {"t-h4":"vt_ce_Typography_tH4__b98e9794","t-label":"vt_ce_Typography_tLabel__b98e9794","t-paragraph1":"vt_ce_Typography_tParagraph1__b98e9794","t-paragraph2":"vt_ce_Typography_tParagraph2__b98e9794","t-paragraph3":"vt_ce_Typography_tParagraph3__b98e9794","t-button":"vt_ce_Typography_tButton__b98e9794","t-buttonSmall":"vt_ce_Typography_tButtonSmall__b98e9794","c-primary":"vt_ce_Typography_cPrimary__b98e9794","c-secondary":"vt_ce_Typography_cSecondary__b98e9794","c-tertiary":"vt_ce_Typography_cTertiary__b98e9794","c-disabled":"vt_ce_Typography_cDisabled__b98e9794"};
+var modules_b5c3b63b = {"t-title":"vt_ce_Typography_tTitle__f1637072","t-h1":"vt_ce_Typography_tH1__f1637072","t-h2":"vt_ce_Typography_tH2__f1637072","t-h3":"vt_ce_Typography_tH3__f1637072","t-h4":"vt_ce_Typography_tH4__f1637072","t-label":"vt_ce_Typography_tLabel__f1637072","t-paragraph1":"vt_ce_Typography_tParagraph1__f1637072","t-paragraph2":"vt_ce_Typography_tParagraph2__f1637072","t-paragraph3":"vt_ce_Typography_tParagraph3__f1637072","t-button":"vt_ce_Typography_tButton__f1637072","t-buttonSmall":"vt_ce_Typography_tButtonSmall__f1637072","c-primary":"vt_ce_Typography_cPrimary__f1637072","c-secondary":"vt_ce_Typography_cSecondary__f1637072","c-tertiary":"vt_ce_Typography_cTertiary__f1637072","c-disabled":"vt_ce_Typography_cDisabled__f1637072"};
 
 export { modules_b5c3b63b as default };

package/dist/esm-next/index.js

@@ -16,8 +16,10 @@ export { default as Box } from './Box/index.js';
 export { default as Button } from './Button/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as CircularProgress } from './CircularProgress/index.js';
-export { default as Dialog, DialogActions, DialogClose, DialogContent, DialogDescription, DialogHeading, DialogTypography } from './Dialog/components.js';
+export { default as Dialog, DialogActions, DialogCloseButton, DialogCloseIconButton, DialogContent, DialogDescription, DialogEnd, DialogStart, DialogTitle, DialogTypography } from './Dialog/components.js';
 export { createDialogComponent } from './Dialog/factory.js';
+export { default as Drawer, DrawerActions, DrawerCloseButton, DrawerCloseIconButton, DrawerContent, DrawerDescription, DrawerEnd, DrawerStart, DrawerTitle, DrawerTypography } from './Drawer/components.js';
+export { createDrawerComponent } from './Drawer/factory.js';
 export { default as GlobalStyles } from './GlobalStyles/index.js';
 export { adaptMuiSvgIcon, adaptSvgIcon } from './Icon/wrappers.js';
 export { DefaultIconFallback, createIconComponent } from './Icon/factory.js';

package/dist/esm-next/styles/css-vars.js

@@ -28,6 +28,12 @@ const themeCSSVariableNames = {
     disabledBackground: "--vt-ce-theme-palette-disabledBackground"
   },
   typography: {
+    title: createTypographyStyleCssVariableNames(
+      "--vt-ce-theme-typography-title"
+    ),
+    h1: createTypographyStyleCssVariableNames("--vt-ce-theme-typography-h1"),
+    h2: createTypographyStyleCssVariableNames("--vt-ce-theme-typography-h2"),
+    h3: createTypographyStyleCssVariableNames("--vt-ce-theme-typography-h3"),
     h4: createTypographyStyleCssVariableNames("--vt-ce-theme-typography-h4"),
     label: createTypographyStyleCssVariableNames(
       "--vt-ce-theme-typography-label"
@@ -59,7 +65,9 @@ function createTypographyStyleCssVariableNames(prefix) {
     fontSize: `${prefix}-font-size`,
     fontStyle: `${prefix}-font-style`,
     fontWeight: `${prefix}-font-weight`,
-    lineHeight: `${prefix}-line-height`
+    lineHeight: `${prefix}-line-height`,
+    letterSpacing: `${prefix}-letter-spacing`,
+    textTransform: `${prefix}-text-transform`
   };
 }
 function createThemeCssVariableUsages(theme, cssVariableNames = themeCSSVariableNames) {

package/dist/esm-next/styles/scss/theme.generated.scss

@@ -23,39 +23,81 @@ $default-theme: (
   "typography-font-weight-regular": (400),
   "typography-font-weight-medium": (600),
   "typography-font-weight-bold": (700),
+  "typography-title-font-family": (Dosis, Helvetica, sans-serif),
+  "typography-title-font-style": (normal),
+  "typography-title-font-weight": (600),
+  "typography-title-letter-spacing": (0.25px),
+  "typography-title-text-transform": (uppercase),
+  "typography-title-font-size": (18px),
+  "typography-title-line-height": (normal),
+  "typography-h1-font-family": (Nunito Sans, Helvetica, sans-serif),
+  "typography-h1-font-style": (normal),
+  "typography-h1-font-weight": (600),
+  "typography-h1-letter-spacing": (inherit),
+  "typography-h1-text-transform": (inherit),
+  "typography-h1-font-size": (24px),
+  "typography-h1-line-height": (34px),
+  "typography-h2-font-family": (Nunito Sans, Helvetica, sans-serif),
+  "typography-h2-font-style": (normal),
+  "typography-h2-font-weight": (600),
+  "typography-h2-letter-spacing": (inherit),
+  "typography-h2-text-transform": (inherit),
+  "typography-h2-font-size": (20px),
+  "typography-h2-line-height": (30px),
+  "typography-h3-font-family": (Nunito Sans, Helvetica, sans-serif),
+  "typography-h3-font-style": (normal),
+  "typography-h3-font-weight": (600),
+  "typography-h3-letter-spacing": (inherit),
+  "typography-h3-text-transform": (inherit),
+  "typography-h3-font-size": (18px),
+  "typography-h3-line-height": (26px),
   "typography-h4-font-family": (Nunito Sans, Helvetica, sans-serif),
   "typography-h4-font-style": (normal),
   "typography-h4-font-weight": (600),
-  "typography-h4-font-size": (18px),
+  "typography-h4-letter-spacing": (inherit),
+  "typography-h4-text-transform": (inherit),
+  "typography-h4-font-size": (16px),
   "typography-h4-line-height": (24px),
   "typography-label-font-family": (Nunito Sans, Helvetica, sans-serif),
   "typography-label-font-style": (normal),
   "typography-label-font-weight": (600),
+  "typography-label-letter-spacing": (inherit),
+  "typography-label-text-transform": (inherit),
   "typography-label-font-size": (14px),
   "typography-label-line-height": (17px),
   "typography-paragraph1-font-family": (Nunito Sans, Helvetica, sans-serif),
   "typography-paragraph1-font-style": (normal),
   "typography-paragraph1-font-weight": (400),
+  "typography-paragraph1-letter-spacing": (inherit),
+  "typography-paragraph1-text-transform": (inherit),
   "typography-paragraph1-font-size": (16px),
   "typography-paragraph1-line-height": (24px),
   "typography-paragraph2-font-family": (Nunito Sans, Helvetica, sans-serif),
   "typography-paragraph2-font-style": (normal),
   "typography-paragraph2-font-weight": (400),
+  "typography-paragraph2-letter-spacing": (inherit),
+  "typography-paragraph2-text-transform": (inherit),
   "typography-paragraph2-font-size": (14px),
   "typography-paragraph2-line-height": (20px),
   "typography-paragraph3-font-family": (Nunito Sans, Helvetica, sans-serif),
   "typography-paragraph3-font-style": (normal),
   "typography-paragraph3-font-weight": (400),
+  "typography-paragraph3-letter-spacing": (inherit),
+  "typography-paragraph3-text-transform": (inherit),
   "typography-paragraph3-font-size": (12px),
   "typography-paragraph3-line-height": (18px),
   "typography-button-font-family": (Nunito Sans, Helvetica, sans-serif),
   "typography-button-font-style": (normal),
   "typography-button-font-weight": (600),
+  "typography-button-letter-spacing": (inherit),
+  "typography-button-text-transform": (inherit),
   "typography-button-font-size": (14px),
   "typography-button-line-height": (20px),
   "typography-buttonSmall-font-family": (Nunito Sans, Helvetica, sans-serif),
   "typography-buttonSmall-font-style": (normal),
   "typography-buttonSmall-font-weight": (600),
+  "typography-buttonSmall-letter-spacing": (inherit),
+  "typography-buttonSmall-text-transform": (inherit),
   "typography-buttonSmall-font-size": (12px),
   "typography-buttonSmall-line-height": (18px)
 );
@@ -81,39 +123,81 @@ $theme-typography-font-family: var(--vt-ce-theme-typography-font-family, (Nunito
 $theme-typography-font-weight-regular: var(--vt-ce-theme-typography-font-weight-regular, (400));
 $theme-typography-font-weight-medium: var(--vt-ce-theme-typography-font-weight-medium, (600));
 $theme-typography-font-weight-bold: var(--vt-ce-theme-typography-font-weight-bold, (700));
+$theme-typography-title-font-family: var(--vt-ce-theme-typography-title-font-family, (Dosis, Helvetica, sans-serif));
+$theme-typography-title-font-style: var(--vt-ce-theme-typography-title-font-style, (normal));
+$theme-typography-title-font-weight: var(--vt-ce-theme-typography-title-font-weight, (600));
+$theme-typography-title-letter-spacing: var(--vt-ce-theme-typography-title-letter-spacing, (0.25px));
+$theme-typography-title-text-transform: var(--vt-ce-theme-typography-title-text-transform, (uppercase));
+$theme-typography-title-font-size: var(--vt-ce-theme-typography-title-font-size, (18px));
+$theme-typography-title-line-height: var(--vt-ce-theme-typography-title-line-height, (normal));
+$theme-typography-h1-font-family: var(--vt-ce-theme-typography-h1-font-family, (Nunito Sans, Helvetica, sans-serif));
+$theme-typography-h1-font-style: var(--vt-ce-theme-typography-h1-font-style, (normal));
+$theme-typography-h1-font-weight: var(--vt-ce-theme-typography-h1-font-weight, (600));
+$theme-typography-h1-letter-spacing: var(--vt-ce-theme-typography-h1-letter-spacing, (inherit));
+$theme-typography-h1-text-transform: var(--vt-ce-theme-typography-h1-text-transform, (inherit));
+$theme-typography-h1-font-size: var(--vt-ce-theme-typography-h1-font-size, (24px));
+$theme-typography-h1-line-height: var(--vt-ce-theme-typography-h1-line-height, (34px));
+$theme-typography-h2-font-family: var(--vt-ce-theme-typography-h2-font-family, (Nunito Sans, Helvetica, sans-serif));
+$theme-typography-h2-font-style: var(--vt-ce-theme-typography-h2-font-style, (normal));
+$theme-typography-h2-font-weight: var(--vt-ce-theme-typography-h2-font-weight, (600));
+$theme-typography-h2-letter-spacing: var(--vt-ce-theme-typography-h2-letter-spacing, (inherit));
+$theme-typography-h2-text-transform: var(--vt-ce-theme-typography-h2-text-transform, (inherit));
+$theme-typography-h2-font-size: var(--vt-ce-theme-typography-h2-font-size, (20px));
+$theme-typography-h2-line-height: var(--vt-ce-theme-typography-h2-line-height, (30px));
+$theme-typography-h3-font-family: var(--vt-ce-theme-typography-h3-font-family, (Nunito Sans, Helvetica, sans-serif));
+$theme-typography-h3-font-style: var(--vt-ce-theme-typography-h3-font-style, (normal));
+$theme-typography-h3-font-weight: var(--vt-ce-theme-typography-h3-font-weight, (600));
+$theme-typography-h3-letter-spacing: var(--vt-ce-theme-typography-h3-letter-spacing, (inherit));
+$theme-typography-h3-text-transform: var(--vt-ce-theme-typography-h3-text-transform, (inherit));
+$theme-typography-h3-font-size: var(--vt-ce-theme-typography-h3-font-size, (18px));
+$theme-typography-h3-line-height: var(--vt-ce-theme-typography-h3-line-height, (26px));
 $theme-typography-h4-font-family: var(--vt-ce-theme-typography-h4-font-family, (Nunito Sans, Helvetica, sans-serif));
 $theme-typography-h4-font-style: var(--vt-ce-theme-typography-h4-font-style, (normal));
 $theme-typography-h4-font-weight: var(--vt-ce-theme-typography-h4-font-weight, (600));
-$theme-typography-h4-font-size: var(--vt-ce-theme-typography-h4-font-size, (18px));
+$theme-typography-h4-letter-spacing: var(--vt-ce-theme-typography-h4-letter-spacing, (inherit));
+$theme-typography-h4-text-transform: var(--vt-ce-theme-typography-h4-text-transform, (inherit));
+$theme-typography-h4-font-size: var(--vt-ce-theme-typography-h4-font-size, (16px));
 $theme-typography-h4-line-height: var(--vt-ce-theme-typography-h4-line-height, (24px));
 $theme-typography-label-font-family: var(--vt-ce-theme-typography-label-font-family, (Nunito Sans, Helvetica, sans-serif));
 $theme-typography-label-font-style: var(--vt-ce-theme-typography-label-font-style, (normal));
 $theme-typography-label-font-weight: var(--vt-ce-theme-typography-label-font-weight, (600));
+$theme-typography-label-letter-spacing: var(--vt-ce-theme-typography-label-letter-spacing, (inherit));
+$theme-typography-label-text-transform: var(--vt-ce-theme-typography-label-text-transform, (inherit));
 $theme-typography-label-font-size: var(--vt-ce-theme-typography-label-font-size, (14px));
 $theme-typography-label-line-height: var(--vt-ce-theme-typography-label-line-height, (17px));
 $theme-typography-paragraph1-font-family: var(--vt-ce-theme-typography-paragraph1-font-family, (Nunito Sans, Helvetica, sans-serif));
 $theme-typography-paragraph1-font-style: var(--vt-ce-theme-typography-paragraph1-font-style, (normal));
 $theme-typography-paragraph1-font-weight: var(--vt-ce-theme-typography-paragraph1-font-weight, (400));
+$theme-typography-paragraph1-letter-spacing: var(--vt-ce-theme-typography-paragraph1-letter-spacing, (inherit));
+$theme-typography-paragraph1-text-transform: var(--vt-ce-theme-typography-paragraph1-text-transform, (inherit));
 $theme-typography-paragraph1-font-size: var(--vt-ce-theme-typography-paragraph1-font-size, (16px));
 $theme-typography-paragraph1-line-height: var(--vt-ce-theme-typography-paragraph1-line-height, (24px));
 $theme-typography-paragraph2-font-family: var(--vt-ce-theme-typography-paragraph2-font-family, (Nunito Sans, Helvetica, sans-serif));
 $theme-typography-paragraph2-font-style: var(--vt-ce-theme-typography-paragraph2-font-style, (normal));
 $theme-typography-paragraph2-font-weight: var(--vt-ce-theme-typography-paragraph2-font-weight, (400));
+$theme-typography-paragraph2-letter-spacing: var(--vt-ce-theme-typography-paragraph2-letter-spacing, (inherit));
+$theme-typography-paragraph2-text-transform: var(--vt-ce-theme-typography-paragraph2-text-transform, (inherit));
 $theme-typography-paragraph2-font-size: var(--vt-ce-theme-typography-paragraph2-font-size, (14px));
 $theme-typography-paragraph2-line-height: var(--vt-ce-theme-typography-paragraph2-line-height, (20px));
 $theme-typography-paragraph3-font-family: var(--vt-ce-theme-typography-paragraph3-font-family, (Nunito Sans, Helvetica, sans-serif));
 $theme-typography-paragraph3-font-style: var(--vt-ce-theme-typography-paragraph3-font-style, (normal));
 $theme-typography-paragraph3-font-weight: var(--vt-ce-theme-typography-paragraph3-font-weight, (400));
+$theme-typography-paragraph3-letter-spacing: var(--vt-ce-theme-typography-paragraph3-letter-spacing, (inherit));
+$theme-typography-paragraph3-text-transform: var(--vt-ce-theme-typography-paragraph3-text-transform, (inherit));
 $theme-typography-paragraph3-font-size: var(--vt-ce-theme-typography-paragraph3-font-size, (12px));
 $theme-typography-paragraph3-line-height: var(--vt-ce-theme-typography-paragraph3-line-height, (18px));
 $theme-typography-button-font-family: var(--vt-ce-theme-typography-button-font-family, (Nunito Sans, Helvetica, sans-serif));
 $theme-typography-button-font-style: var(--vt-ce-theme-typography-button-font-style, (normal));
 $theme-typography-button-font-weight: var(--vt-ce-theme-typography-button-font-weight, (600));
+$theme-typography-button-letter-spacing: var(--vt-ce-theme-typography-button-letter-spacing, (inherit));
+$theme-typography-button-text-transform: var(--vt-ce-theme-typography-button-text-transform, (inherit));
 $theme-typography-button-font-size: var(--vt-ce-theme-typography-button-font-size, (14px));
 $theme-typography-button-line-height: var(--vt-ce-theme-typography-button-line-height, (20px));
 $theme-typography-buttonSmall-font-family: var(--vt-ce-theme-typography-buttonSmall-font-family, (Nunito Sans, Helvetica, sans-serif));
 $theme-typography-buttonSmall-font-style: var(--vt-ce-theme-typography-buttonSmall-font-style, (normal));
 $theme-typography-buttonSmall-font-weight: var(--vt-ce-theme-typography-buttonSmall-font-weight, (600));
+$theme-typography-buttonSmall-letter-spacing: var(--vt-ce-theme-typography-buttonSmall-letter-spacing, (inherit));
+$theme-typography-buttonSmall-text-transform: var(--vt-ce-theme-typography-buttonSmall-text-transform, (inherit));
 $theme-typography-buttonSmall-font-size: var(--vt-ce-theme-typography-buttonSmall-font-size, (12px));
 $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSmall-line-height, (18px));
 
@@ -122,12 +206,54 @@ $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSm
   @return var(--vt-ce-theme-#{$var}, map.get($default-theme, $var));
 }
   
+@mixin theme-typography-title {
+  font-family: $theme-typography-title-font-family;
+  font-size: $theme-typography-title-font-size;
+  font-style: $theme-typography-title-font-style;
+  font-weight: $theme-typography-title-font-weight;
+  line-height: $theme-typography-title-line-height;
+  letter-spacing: $theme-typography-title-letter-spacing;
+  text-transform: $theme-typography-title-text-transform;
+}
+
+@mixin theme-typography-h1 {
+  font-family: $theme-typography-h1-font-family;
+  font-size: $theme-typography-h1-font-size;
+  font-style: $theme-typography-h1-font-style;
+  font-weight: $theme-typography-h1-font-weight;
+  line-height: $theme-typography-h1-line-height;
+  letter-spacing: $theme-typography-h1-letter-spacing;
+  text-transform: $theme-typography-h1-text-transform;
+}
+
+@mixin theme-typography-h2 {
+  font-family: $theme-typography-h2-font-family;
+  font-size: $theme-typography-h2-font-size;
+  font-style: $theme-typography-h2-font-style;
+  font-weight: $theme-typography-h2-font-weight;
+  line-height: $theme-typography-h2-line-height;
+  letter-spacing: $theme-typography-h2-letter-spacing;
+  text-transform: $theme-typography-h2-text-transform;
+}
+
+@mixin theme-typography-h3 {
+  font-family: $theme-typography-h3-font-family;
+  font-size: $theme-typography-h3-font-size;
+  font-style: $theme-typography-h3-font-style;
+  font-weight: $theme-typography-h3-font-weight;
+  line-height: $theme-typography-h3-line-height;
+  letter-spacing: $theme-typography-h3-letter-spacing;
+  text-transform: $theme-typography-h3-text-transform;
+}
+
 @mixin theme-typography-h4 {
   font-family: $theme-typography-h4-font-family;
   font-size: $theme-typography-h4-font-size;
   font-style: $theme-typography-h4-font-style;
   font-weight: $theme-typography-h4-font-weight;
   line-height: $theme-typography-h4-line-height;
+  letter-spacing: $theme-typography-h4-letter-spacing;
+  text-transform: $theme-typography-h4-text-transform;
 }
 
 @mixin theme-typography-label {
@@ -136,6 +262,8 @@ $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSm
   font-style: $theme-typography-label-font-style;
   font-weight: $theme-typography-label-font-weight;
   line-height: $theme-typography-label-line-height;
+  letter-spacing: $theme-typography-label-letter-spacing;
+  text-transform: $theme-typography-label-text-transform;
 }
 
 @mixin theme-typography-paragraph1 {
@@ -144,6 +272,8 @@ $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSm
   font-style: $theme-typography-paragraph1-font-style;
   font-weight: $theme-typography-paragraph1-font-weight;
   line-height: $theme-typography-paragraph1-line-height;
+  letter-spacing: $theme-typography-paragraph1-letter-spacing;
+  text-transform: $theme-typography-paragraph1-text-transform;
 }
 
 @mixin theme-typography-paragraph2 {
@@ -152,6 +282,8 @@ $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSm
   font-style: $theme-typography-paragraph2-font-style;
   font-weight: $theme-typography-paragraph2-font-weight;
   line-height: $theme-typography-paragraph2-line-height;
+  letter-spacing: $theme-typography-paragraph2-letter-spacing;
+  text-transform: $theme-typography-paragraph2-text-transform;
 }
 
 @mixin theme-typography-paragraph3 {
@@ -160,6 +292,8 @@ $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSm
   font-style: $theme-typography-paragraph3-font-style;
   font-weight: $theme-typography-paragraph3-font-weight;
   line-height: $theme-typography-paragraph3-line-height;
+  letter-spacing: $theme-typography-paragraph3-letter-spacing;
+  text-transform: $theme-typography-paragraph3-text-transform;
 }
 
 @mixin theme-typography-button {
@@ -168,6 +302,8 @@ $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSm
   font-style: $theme-typography-button-font-style;
   font-weight: $theme-typography-button-font-weight;
   line-height: $theme-typography-button-line-height;
+  letter-spacing: $theme-typography-button-letter-spacing;
+  text-transform: $theme-typography-button-text-transform;
 }
 
 @mixin theme-typography-buttonSmall {
@@ -176,6 +312,8 @@ $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSm
   font-style: $theme-typography-buttonSmall-font-style;
   font-weight: $theme-typography-buttonSmall-font-weight;
   line-height: $theme-typography-buttonSmall-line-height;
+  letter-spacing: $theme-typography-buttonSmall-letter-spacing;
+  text-transform: $theme-typography-buttonSmall-text-transform;
 }
 
 // unsafe - does not check for existence of variable
@@ -185,4 +323,6 @@ $theme-typography-buttonSmall-line-height: var(--vt-ce-theme-typography-buttonSm
   font-style: _unsafe-theme-var(typography-#{$variant}-font-style);
   font-weight: _unsafe-theme-var(typography-#{$variant}-font-weight);
   line-height: _unsafe-theme-var(typography-#{$variant}-line-height);
+  letter-spacing: _unsafe-theme-var(typography-#{$variant}-letter-spacing);
+  text-transform: _unsafe-theme-var(typography-#{$variant}-text-transform);
 }

package/dist/esm-next/styles/typography.js

@@ -1,5 +1,9 @@
 'use strict';
 const TypographyVariantKeys = [
+  "title",
+  "h1",
+  "h2",
+  "h3",
   "h4",
   "label",
   "paragraph1",
@@ -18,14 +22,47 @@ function createTypography(typography = {}) {
   const inherit = {
     fontFamily: base.fontFamily,
     fontStyle: "normal",
-    fontWeight: base.fontWeightRegular
+    fontWeight: base.fontWeightRegular,
+    letterSpacing: "inherit",
+    textTransform: "inherit"
   };
   return {
     ...base,
-    h4: {
+    title: {
+      ...inherit,
+      fontFamily: "Dosis, Helvetica, sans-serif",
+      fontSize: "18px",
+      fontWeight: base.fontWeightMedium,
+      lineHeight: "normal",
+      letterSpacing: "0.25px",
+      textTransform: "uppercase",
+      ...typography.title
+    },
+    h1: {
+      ...inherit,
+      fontSize: "24px",
+      fontWeight: base.fontWeightMedium,
+      lineHeight: "34px",
+      ...typography.h1
+    },
+    h2: {
+      ...inherit,
+      fontSize: "20px",
+      fontWeight: base.fontWeightMedium,
+      lineHeight: "30px",
+      ...typography.h2
+    },
+    h3: {
       ...inherit,
       fontSize: "18px",
       fontWeight: base.fontWeightMedium,
+      lineHeight: "26px",
+      ...typography.h3
+    },
+    h4: {
+      ...inherit,
+      fontSize: "16px",
+      fontWeight: base.fontWeightMedium,
       lineHeight: "24px",
       ...typography.h4
     },