@xaui/native 0.0.27 → 0.0.28

package/dist/toolbar/index.cjs

@@ -1,89 +1,21 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }require('../chunk-HSPTLUFA.cjs');
 
-// src/components/toolbar/index.ts
-var toolbar_exports = {};
-__export(toolbar_exports, {
-  Toolbar: () => Toolbar,
-  ToolbarAction: () => ToolbarAction
-});
-module.exports = __toCommonJS(toolbar_exports);
 
-// src/components/toolbar/toolbar.tsx
-var import_react8 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
-var import_react_native_reanimated = __toESM(require("react-native-reanimated"), 1);
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
 
-// src/components/toolbar/toolbar.hook.ts
-var import_react6 = require("react");
-var import_core = require("@xaui/core");
+// src/components/toolbar/toolbar.tsx
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
 
-// src/core/theme-context.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_react_native2 = require("react-native");
-var import_theme = require("@xaui/core/theme");
-var import_palette = require("@xaui/core/palette");
 
-// src/core/portal/portal.tsx
-var import_react2 = require("react");
 
-// src/core/portal/portal-context.ts
-var import_react = require("react");
-var PortalContext = (0, import_react.createContext)(null);
 
-// src/core/portal/portal-host.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_native = require("react-native");
-var hostStyles = import_react_native.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
 
-// src/core/theme-context.tsx
-var XUIThemeContext = (0, import_react4.createContext)(null);
-
-// src/core/theme-hooks.ts
-var import_react5 = require("react");
-var import_react_native3 = require("react-native");
-function useXUITheme() {
-  const theme = (0, import_react5.useContext)(XUIThemeContext);
-  if (!theme) {
-    throw new Error("useXUITheme must be used within XUIProvider");
-  }
-  return theme;
-}
-
-// src/core/index.ts
-var import_theme2 = require("@xaui/core/theme");
+var _reactnativereanimated = require('react-native-reanimated'); var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
 
 // src/components/toolbar/toolbar.hook.ts
+
+var _core = require('@xaui/core');
 var variantMap = {
   floating: {
     containerHeight: 72,
@@ -120,7 +52,7 @@ var variantMap = {
   }
 };
 var useToolbarVariantStyles = (variant, position) => {
-  return (0, import_react6.useMemo)(() => {
+  return _react.useMemo.call(void 0, () => {
     const baseStyles = variantMap[variant];
     const isVertical = variant === "vertical";
     return {
@@ -131,24 +63,24 @@ var useToolbarVariantStyles = (variant, position) => {
   }, [variant, position]);
 };
 var useToolbarColors = (themeColor) => {
-  const theme = useXUITheme();
-  const colorScheme = theme.colors[(0, import_core.getSafeThemeColor)(themeColor)];
-  return (0, import_react6.useMemo)(() => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const colorScheme = theme.colors[_core.getSafeThemeColor.call(void 0, themeColor)];
+  return _react.useMemo.call(void 0, () => {
     return {
       background: theme.mode === "dark" ? theme.colors.default.background : theme.colors.background,
-      divider: (0, import_core.withOpacity)(theme.colors.foreground, 0.1),
+      divider: _core.withOpacity.call(void 0, theme.colors.foreground, 0.1),
       title: theme.colors.foreground,
-      subtitle: (0, import_core.withOpacity)(theme.colors.foreground, 0.72),
+      subtitle: _core.withOpacity.call(void 0, theme.colors.foreground, 0.72),
       action: colorScheme.main,
-      pressed: (0, import_core.withOpacity)(colorScheme.main, 0.16),
-      shadow: (0, import_core.withOpacity)(theme.colors.foreground, 0.35)
+      pressed: _core.withOpacity.call(void 0, colorScheme.main, 0.16),
+      shadow: _core.withOpacity.call(void 0, theme.colors.foreground, 0.35)
     };
   }, [colorScheme.main, theme.colors, theme.mode]);
 };
 
 // src/components/toolbar/toolbar.style.ts
-var import_react_native4 = require("react-native");
-var styles = import_react_native4.StyleSheet.create({
+
+var styles = _reactnative.StyleSheet.create({
   container: {
     position: "absolute",
     zIndex: 40
@@ -220,10 +152,10 @@ var styles = import_react_native4.StyleSheet.create({
 });
 
 // src/components/toolbar/toolbar-context.ts
-var import_react7 = require("react");
-var ToolbarContext = (0, import_react7.createContext)(null);
+
+var ToolbarContext = _react.createContext.call(void 0, null);
 var useToolbarContext = () => {
-  return (0, import_react7.useContext)(ToolbarContext);
+  return _react.useContext.call(void 0, ToolbarContext);
 };
 
 // src/components/toolbar/toolbar.tsx
@@ -239,27 +171,27 @@ var Toolbar = ({
   customAppearance
 }) => {
   const variantStyles = useToolbarVariantStyles(variant, position);
-  const colors2 = useToolbarColors(themeColor);
-  const translateValue = (0, import_react_native_reanimated.useSharedValue)(
+  const colors = useToolbarColors(themeColor);
+  const translateValue = _reactnativereanimated.useSharedValue.call(void 0, 
     isVisible ? 0 : getInitialTranslate(position)
   );
-  const opacityValue = (0, import_react_native_reanimated.useSharedValue)(isVisible ? 1 : 0);
-  (0, import_react8.useEffect)(() => {
+  const opacityValue = _reactnativereanimated.useSharedValue.call(void 0, isVisible ? 1 : 0);
+  _react.useEffect.call(void 0, () => {
     if (isVisible) {
-      translateValue.value = (0, import_react_native_reanimated.withSpring)(0, {
+      translateValue.value = _reactnativereanimated.withSpring.call(void 0, 0, {
         damping: 20,
         stiffness: 300
       });
-      opacityValue.value = (0, import_react_native_reanimated.withTiming)(1, { duration: 200 });
+      opacityValue.value = _reactnativereanimated.withTiming.call(void 0, 1, { duration: 200 });
     } else {
-      translateValue.value = (0, import_react_native_reanimated.withSpring)(getInitialTranslate(position), {
+      translateValue.value = _reactnativereanimated.withSpring.call(void 0, getInitialTranslate(position), {
         damping: 20,
         stiffness: 300
       });
-      opacityValue.value = (0, import_react_native_reanimated.withTiming)(0, { duration: 200 });
+      opacityValue.value = _reactnativereanimated.withTiming.call(void 0, 0, { duration: 200 });
     }
   }, [isVisible, position, translateValue, opacityValue]);
-  const animatedStyle = (0, import_react_native_reanimated.useAnimatedStyle)(() => {
+  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, () => {
     const transform = position === "left" || position === "right" ? [{ translateX: translateValue.value }] : [{ translateY: translateValue.value }];
     return {
       opacity: opacityValue.value,
@@ -267,25 +199,25 @@ var Toolbar = ({
     };
   });
   const isVertical = variantStyles.isVertical;
-  const shouldElevate = isElevated ?? variantStyles.isElevated;
+  const shouldElevate = _nullishCoalesce(isElevated, () => ( variantStyles.isElevated));
   const positionStyle = position === "top" ? styles.top : position === "bottom" ? styles.bottom : position === "left" ? styles.left : styles.right;
   const floatingStyle = variant === "floating" ? [
     styles.floating,
     position === "bottom" && styles.floatingBottom,
     position === "top" && styles.floatingTop
   ] : null;
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ _react2.default.createElement(
     ToolbarContext.Provider,
     {
       value: {
-        actionColor: colors2.action,
-        actionPressedColor: colors2.pressed,
+        actionColor: colors.action,
+        actionPressedColor: colors.pressed,
         iconSize: variantStyles.iconSize,
         actionButtonSize: variantStyles.actionSize
       }
     },
-    /* @__PURE__ */ import_react8.default.createElement(
-      import_react_native_reanimated.default.View,
+    /* @__PURE__ */ _react2.default.createElement(
+      _reactnativereanimated2.default.View,
       {
         style: [
           styles.container,
@@ -297,35 +229,35 @@ var Toolbar = ({
             width: variantStyles.containerWidth
           },
           style,
-          customAppearance?.container
+          _optionalChain([customAppearance, 'optionalAccess', _ => _.container])
         ]
       },
-      /* @__PURE__ */ import_react8.default.createElement(
-        import_react_native5.View,
+      /* @__PURE__ */ _react2.default.createElement(
+        _reactnative.View,
         {
           style: [
             isVertical ? styles.contentVertical : styles.content,
             {
-              backgroundColor: colors2.background,
+              backgroundColor: colors.background,
               borderRadius: variantStyles.borderRadius,
               paddingHorizontal: variantStyles.paddingHorizontal,
               paddingVertical: variantStyles.paddingVertical,
               borderBottomWidth: showDivider ? 1 : 0,
-              borderBottomColor: showDivider ? colors2.divider : "transparent",
+              borderBottomColor: showDivider ? colors.divider : "transparent",
               height: "100%",
               width: "100%"
             },
-            shouldElevate && [styles.elevated, { shadowColor: colors2.shadow }],
-            customAppearance?.topRow
+            shouldElevate && [styles.elevated, { shadowColor: colors.shadow }],
+            _optionalChain([customAppearance, 'optionalAccess', _2 => _2.topRow])
           ]
         },
-        /* @__PURE__ */ import_react8.default.createElement(
-          import_react_native5.View,
+        /* @__PURE__ */ _react2.default.createElement(
+          _reactnative.View,
           {
             style: [
               isVertical ? styles.actionsVertical : styles.actions,
               { gap: variantStyles.gap },
-              customAppearance?.actionsContainer
+              _optionalChain([customAppearance, 'optionalAccess', _3 => _3.actionsContainer])
             ]
           },
           children
@@ -350,8 +282,8 @@ function getInitialTranslate(position) {
 }
 
 // src/components/toolbar/toolbar-action.tsx
-var import_react9 = __toESM(require("react"), 1);
-var import_react_native6 = require("react-native");
+
+
 var ToolbarAction = ({
   icon,
   isDisabled = false,
@@ -363,11 +295,11 @@ var ToolbarAction = ({
 }) => {
   const context = useToolbarContext();
   const iconNode = typeof icon === "function" ? icon({
-    color: context?.actionColor ?? "#000000",
-    size: context?.iconSize ?? 26
+    color: _nullishCoalesce(_optionalChain([context, 'optionalAccess', _4 => _4.actionColor]), () => ( "#000000")),
+    size: _nullishCoalesce(_optionalChain([context, 'optionalAccess', _5 => _5.iconSize]), () => ( 26))
   }) : icon;
-  return /* @__PURE__ */ import_react9.default.createElement(
-    import_react_native6.Pressable,
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Pressable,
     {
       onPress: isDisabled ? void 0 : onPress,
       onLongPress: isDisabled ? void 0 : onLongPress,
@@ -377,9 +309,9 @@ var ToolbarAction = ({
       style: ({ pressed }) => [
         styles.actionButton,
         {
-          width: context?.actionButtonSize ?? 40,
-          height: context?.actionButtonSize ?? 40,
-          backgroundColor: pressed ? context?.actionPressedColor ?? "transparent" : "transparent"
+          width: _nullishCoalesce(_optionalChain([context, 'optionalAccess', _6 => _6.actionButtonSize]), () => ( 40)),
+          height: _nullishCoalesce(_optionalChain([context, 'optionalAccess', _7 => _7.actionButtonSize]), () => ( 40)),
+          backgroundColor: pressed ? _nullishCoalesce(_optionalChain([context, 'optionalAccess', _8 => _8.actionPressedColor]), () => ( "transparent")) : "transparent"
         },
         isDisabled && styles.disabledAction,
         style
@@ -388,8 +320,7 @@ var ToolbarAction = ({
     iconNode
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Toolbar,
-  ToolbarAction
-});
+
+
+
+exports.Toolbar = Toolbar; exports.ToolbarAction = ToolbarAction;

package/dist/toolbar/index.js

@@ -1,6 +1,7 @@
+import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-4KSZLONZ.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/toolbar/toolbar.tsx
 import React, { useEffect } from "react";

package/dist/typography/index.cjs

@@ -1,96 +1,27 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }require('../chunk-HSPTLUFA.cjs');
 
-// src/components/typography/index.ts
-var typography_exports = {};
-__export(typography_exports, {
-  Typography: () => Typography
-});
-module.exports = __toCommonJS(typography_exports);
+
+var _chunkOQ2BLOOGcjs = require('../chunk-OQ2BLOOG.cjs');
 
 // src/components/typography/typography.tsx
-var import_react7 = __toESM(require("react"), 1);
-var import_react_native5 = require("react-native");
+var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+var _reactnative = require('react-native');
 
 // src/components/typography/typography.style.ts
-var import_react_native = require("react-native");
-var styles = import_react_native.StyleSheet.create({
+
+var styles = _reactnative.StyleSheet.create({
   text: {
     includeFontPadding: false
   }
 });
 
 // src/components/typography/typography.hook.ts
-var import_react6 = require("react");
-
-// src/core/theme-context.tsx
-var import_react4 = __toESM(require("react"), 1);
-var import_react_native3 = require("react-native");
-var import_theme = require("@xaui/core/theme");
-var import_palette = require("@xaui/core/palette");
-
-// src/core/portal/portal.tsx
-var import_react2 = require("react");
-
-// src/core/portal/portal-context.ts
-var import_react = require("react");
-var PortalContext = (0, import_react.createContext)(null);
-
-// src/core/portal/portal-host.tsx
-var import_react3 = __toESM(require("react"), 1);
-var import_react_native2 = require("react-native");
-var hostStyles = import_react_native2.StyleSheet.create({
-  container: {
-    flex: 1
-  }
-});
-
-// src/core/theme-context.tsx
-var XUIThemeContext = (0, import_react4.createContext)(null);
-
-// src/core/theme-hooks.ts
-var import_react5 = require("react");
-var import_react_native4 = require("react-native");
-function useXUITheme() {
-  const theme = (0, import_react5.useContext)(XUIThemeContext);
-  if (!theme) {
-    throw new Error("useXUITheme must be used within XUIProvider");
-  }
-  return theme;
-}
 
-// src/core/index.ts
-var import_theme2 = require("@xaui/core/theme");
-
-// src/components/typography/typography.hook.ts
-var import_core2 = require("@xaui/core");
+var _core = require('@xaui/core');
 var knownVariants = {
+  displayLarge: true,
+  displayMedium: true,
+  displaySmall: true,
   caption: true,
   headlineLarge: true,
   headlineMedium: true,
@@ -106,19 +37,19 @@ var isKnownVariant = (variant) => {
   return Boolean(knownVariants[variant]);
 };
 var useTypographyColor = (themeColor) => {
-  const theme = useXUITheme();
-  const color = (0, import_react6.useMemo)(() => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const color = _react.useMemo.call(void 0, () => {
     if (themeColor === "default") {
       return theme.colors.foreground;
     }
-    const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
+    const safeThemeColor = _core.getSafeThemeColor.call(void 0, themeColor);
     return theme.colors[safeThemeColor].main;
   }, [theme, themeColor]);
   return color;
 };
 var useTypographyVariantStyles = (variant) => {
-  const theme = useXUITheme();
-  const variantStyles = (0, import_react6.useMemo)(() => {
+  const theme = _chunkOQ2BLOOGcjs.useXUITheme.call(void 0, );
+  const variantStyles = _react.useMemo.call(void 0, () => {
     if (!isKnownVariant(variant)) {
       return {
         fontFamily: theme.fontFamilies.body,
@@ -127,6 +58,21 @@ var useTypographyVariantStyles = (variant) => {
       };
     }
     const styles2 = {
+      displayLarge: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: 72,
+        fontWeight: theme.fontWeights.semibold
+      },
+      displayMedium: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: 57,
+        fontWeight: theme.fontWeights.semibold
+      },
+      displaySmall: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: 45,
+        fontWeight: theme.fontWeights.semibold
+      },
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,
@@ -196,13 +142,13 @@ var Typography = ({
   const color = useTypographyColor(themeColor);
   const variantStyles = useTypographyVariantStyles(variant);
   const colorStyle = { color };
-  const ellipsizeMode = (0, import_react7.useMemo)(() => {
+  const ellipsizeMode = _react.useMemo.call(void 0, () => {
     if (!maxLines) return void 0;
     if (overflow === "clip") return "clip";
     return "tail";
   }, [maxLines, overflow]);
-  return /* @__PURE__ */ import_react7.default.createElement(
-    import_react_native5.Text,
+  return /* @__PURE__ */ _react2.default.createElement(
+    _reactnative.Text,
     {
       numberOfLines: maxLines,
       ellipsizeMode,
@@ -217,7 +163,6 @@ var Typography = ({
     children
   );
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Typography
-});
+
+
+exports.Typography = Typography;

package/dist/typography/index.d.cts

@@ -3,7 +3,7 @@ import { StyleProp, TextStyle } from 'react-native';
 import { T as ThemeColor } from '../index-BOw6tbkc.cjs';
 
 type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
-type TypographyVariant = 'caption' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'subtitleLarge' | 'subtitleMedium' | 'subtitleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | string;
+type TypographyVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'caption' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'subtitleLarge' | 'subtitleMedium' | 'subtitleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | string;
 type TypographyProps = {
     /**
      * The content to display inside the typography component.

package/dist/typography/index.d.ts

@@ -3,7 +3,7 @@ import { StyleProp, TextStyle } from 'react-native';
 import { T as ThemeColor } from '../index-BOw6tbkc.js';
 
 type TypographyAlign = 'center' | 'justify' | 'left' | 'right';
-type TypographyVariant = 'caption' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'subtitleLarge' | 'subtitleMedium' | 'subtitleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | string;
+type TypographyVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'caption' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'subtitleLarge' | 'subtitleMedium' | 'subtitleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | string;
 type TypographyProps = {
     /**
      * The content to display inside the typography component.

package/dist/typography/index.js

@@ -1,6 +1,7 @@
+import "../chunk-DXXNBF5P.js";
 import {
   useXUITheme
-} from "../chunk-URBEEDFX.js";
+} from "../chunk-LTKYHG5V.js";
 
 // src/components/typography/typography.tsx
 import React, { useMemo as useMemo2 } from "react";
@@ -18,6 +19,9 @@ var styles = StyleSheet.create({
 import { useMemo } from "react";
 import { getSafeThemeColor } from "@xaui/core";
 var knownVariants = {
+  displayLarge: true,
+  displayMedium: true,
+  displaySmall: true,
   caption: true,
   headlineLarge: true,
   headlineMedium: true,
@@ -54,6 +58,21 @@ var useTypographyVariantStyles = (variant) => {
       };
     }
     const styles2 = {
+      displayLarge: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: 72,
+        fontWeight: theme.fontWeights.semibold
+      },
+      displayMedium: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: 57,
+        fontWeight: theme.fontWeights.semibold
+      },
+      displaySmall: {
+        fontFamily: theme.fontFamilies.heading,
+        fontSize: 45,
+        fontWeight: theme.fontWeights.semibold
+      },
       caption: {
         fontFamily: theme.fontFamilies.body,
         fontSize: theme.fontSizes.xs,