@hero-design/rn 7.1.3-alpha → 7.1.3-alpha4

package/es/index.js

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, createElement, useRef, useEffect } from 'react';
-import require$$0$1, { Dimensions, View, Text as Text$1, Platform, TouchableWithoutFeedback, Animated, StyleSheet as StyleSheet$1, TouchableHighlight, TouchableOpacity } from 'react-native';
+import require$$0$1, { PixelRatio, Dimensions, View, Text as Text$1, Platform, TouchableWithoutFeedback, Animated, StyleSheet as StyleSheet$1, TouchableHighlight, TouchableOpacity } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 function ownKeys(object, enumerableOnly) {
@@ -9875,13 +9875,72 @@ var systemPalette = {
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
+var pixelRatio = PixelRatio.get();
+var deviceHeight = Dimensions.get('window').height;
+var deviceWidth = Dimensions.get('window').width;
 var scale = function scale(size) {
-  var _Dimensions$get = Dimensions.get('window'),
-      width = _Dimensions$get.width,
-      height = _Dimensions$get.height;
+  if (pixelRatio >= 2 && pixelRatio < 3) {
+    // iphone 5s and older Androids
+    if (deviceWidth < BASE_WIDTH) {
+      return size * 0.95;
+    } // iphone 5
 
-  var shortDimension = width < height ? width : height;
-  return shortDimension / BASE_WIDTH * size;
+
+    if (deviceHeight < 667) {
+      return size; // iphone 6-6s
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.15;
+    } // older phablets
+
+
+    return size * 1.25;
+  }
+
+  if (pixelRatio >= 3 && pixelRatio < 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size;
+    } // Catch other weird android width sizings
+
+
+    if (deviceHeight < 667) {
+      return size * 1.15; // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.2;
+    } // catch larger devices
+    // ie iphone 6s plus / 7 plus / mi note 等等
+
+
+    return size * 1.27;
+  }
+
+  if (pixelRatio >= 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size; // Catch other smaller android height sizings
+    }
+
+    if (deviceHeight < 667) {
+      return size * 1.2; // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.25;
+    } // catch larger phablet devices
+
+
+    return size * 1.4;
+  }
+
+  return size;
 };
 
 var BASE$1 = 8;
@@ -9898,6 +9957,11 @@ var space = {
 };
 
 var BASE = 16;
+var fonts = {
+  light: 'Be Vietnam Pro Light',
+  regular: 'Be Vietnam Pro Regular',
+  semiBold: 'Be Vietnam Pro SemiBold'
+};
 var fontSizes = {
   xxxxxlarge: scale(BASE * 2),
   xxxxlarge: scale(BASE * 1.75),
@@ -9910,12 +9974,6 @@ var fontSizes = {
   xsmall: scale(BASE * 0.625) //      10
 
 };
-var fontWeights = {
-  light: 200,
-  regular: 400,
-  semiBold: 600,
-  bold: 700
-};
 var lineHeights = {
   xxxxxlarge: fontSizes.xxxxxlarge + 8,
   xxxxlarge: fontSizes.xxxxlarge + 8,
@@ -9935,8 +9993,8 @@ var borderWidths = {
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
+  fonts: fonts,
   fontSizes: fontSizes,
-  fontWeights: fontWeights,
   lineHeights: lineHeights,
   borderWidths: borderWidths
 };
@@ -9958,12 +10016,12 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   var padding = {
     "default": "".concat(theme.space.xsmall, "px ").concat(theme.space.small, "px")
   };
+  var fonts = {
+    "default": theme.fonts.semiBold
+  };
   var fontSizes = {
     "default": "".concat(theme.fontSizes.small, "px")
   };
-  var fontWeights = {
-    "default": theme.fontWeights.semiBold
-  };
   var radii = {
     "default": "4px"
   };
@@ -9971,8 +10029,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     borderWidths: borderWidths,
     colors: colors,
     padding: padding,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     radii: radii
   };
 };
@@ -10060,17 +10118,17 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     subdued: theme.colors.disabledText,
     primary: theme.colors.primary
   };
+  var fonts = {
+    light: theme.fonts.light,
+    regular: theme.fonts.regular,
+    semiBold: theme.fonts.semiBold
+  };
   var fontSizes = {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge
   };
-  var fontWeights = {
-    light: theme.fontWeights.light,
-    regular: theme.fontWeights.regular,
-    semiBold: theme.fontWeights.semiBold
-  };
   var lineHeights = {
     small: "".concat(theme.lineHeights.small, "px"),
     medium: "".concat(theme.lineHeights.medium, "px"),
@@ -10079,8 +10137,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
   return {
     colors: colors,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     lineHeights: lineHeights
   };
 };
@@ -10097,15 +10155,15 @@ var getFABTheme = function getFABTheme(theme) {
     width: '64px',
     height: '64px'
   };
+  var fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular
+  };
   var fontSizes = {
     header: "".concat(theme.fontSizes.xxxlarge, "px"),
     buttonIcon: "".concat(theme.fontSizes.xxxlarge, "px"),
     actionItemText: "".concat(theme.fontSizes.medium, "px")
   };
-  var fontWeights = {
-    header: "".concat(theme.fontWeights.semiBold),
-    actionItemText: "".concat(theme.fontWeights.regular)
-  };
   var lineHeights = {
     header: "".concat(theme.lineHeights.xxxlarge, "px"),
     actionItemText: "".concat(theme.lineHeights.medium, "px")
@@ -10126,11 +10184,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   return {
     radii: radii,
+    fonts: fonts,
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
-    fontWeights: fontWeights,
     space: space
   };
 };
@@ -10178,9 +10236,9 @@ var StyledView = styled(View)(_templateObject$9 || (_templateObject$9 = _taggedT
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(Text$1)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+var StyledText$1 = styled(Text$1)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
-  return theme.__hd__.badge.fontWeights["default"];
+  return theme.__hd__.badge.fonts["default"];
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.__hd__.badge.fontSizes["default"];
@@ -19900,13 +19958,13 @@ var StyledText = styled(Text$1)(_templateObject$7 || (_templateObject$7 = _tagge
 
   switch (themeFontWeight) {
     case 'light':
-      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.light);
+      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.light);
 
     case 'regular':
-      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.regular);
+      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.regular);
 
     case 'semi-bold':
-      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.semiBold);
+      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.semiBold);
   }
 }, function (_ref3) {
   var themeIntent = _ref3.themeIntent,
@@ -20269,7 +20327,7 @@ var StyledActionItem = styled(TouchableOpacity)(_templateObject$1 || (_templateO
   var theme = _ref8.theme;
   return theme.__hd__.fab.radii.actionItem;
 });
-var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_ref9) {
+var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.__hd__.fab.space.actionItemTextPaddingLeft;
 }, function (_ref10) {
@@ -20280,7 +20338,7 @@ var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templ
   return theme.__hd__.fab.lineHeights.actionItemText;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.__hd__.fab.fontWeights.actionItemText;
+  return theme.__hd__.fab.fonts.actionItemText;
 });
 
 var ActionItem = function ActionItem(_ref) {
@@ -20312,7 +20370,7 @@ var StyledBackdrop = styled(Animated.View)(_templateObject4 || (_templateObject4
   var theme = _ref3.theme;
   return theme.__hd__.fab.colors.backdropBackground;
 });
-var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
+var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.__hd__.fab.fontSizes.header;
 }, function (_ref5) {
@@ -20320,7 +20378,7 @@ var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObj
   return theme.__hd__.fab.lineHeights.header;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.__hd__.fab.fontWeights.header;
+  return theme.__hd__.fab.fonts.header;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.__hd__.fab.space.headerTextMarginRight;
@@ -20362,7 +20420,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.5]
+    outputRange: [0, 0.9]
   });
   return /*#__PURE__*/React.createElement(StyledContainer, {
     testID: testID,

package/lib/index.js

@@ -9884,13 +9884,72 @@ var systemPalette = {
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
+var pixelRatio = require$$0$1.PixelRatio.get();
+var deviceHeight = require$$0$1.Dimensions.get('window').height;
+var deviceWidth = require$$0$1.Dimensions.get('window').width;
 var scale = function scale(size) {
-  var _Dimensions$get = require$$0$1.Dimensions.get('window'),
-      width = _Dimensions$get.width,
-      height = _Dimensions$get.height;
+  if (pixelRatio >= 2 && pixelRatio < 3) {
+    // iphone 5s and older Androids
+    if (deviceWidth < BASE_WIDTH) {
+      return size * 0.95;
+    } // iphone 5
 
-  var shortDimension = width < height ? width : height;
-  return shortDimension / BASE_WIDTH * size;
+
+    if (deviceHeight < 667) {
+      return size; // iphone 6-6s
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.15;
+    } // older phablets
+
+
+    return size * 1.25;
+  }
+
+  if (pixelRatio >= 3 && pixelRatio < 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size;
+    } // Catch other weird android width sizings
+
+
+    if (deviceHeight < 667) {
+      return size * 1.15; // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.2;
+    } // catch larger devices
+    // ie iphone 6s plus / 7 plus / mi note 等等
+
+
+    return size * 1.27;
+  }
+
+  if (pixelRatio >= 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= BASE_WIDTH) {
+      return size; // Catch other smaller android height sizings
+    }
+
+    if (deviceHeight < 667) {
+      return size * 1.2; // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.25;
+    } // catch larger phablet devices
+
+
+    return size * 1.4;
+  }
+
+  return size;
 };
 
 var BASE$1 = 8;
@@ -9907,6 +9966,11 @@ var space = {
 };
 
 var BASE = 16;
+var fonts = {
+  light: 'Be Vietnam Pro Light',
+  regular: 'Be Vietnam Pro Regular',
+  semiBold: 'Be Vietnam Pro SemiBold'
+};
 var fontSizes = {
   xxxxxlarge: scale(BASE * 2),
   xxxxlarge: scale(BASE * 1.75),
@@ -9919,12 +9983,6 @@ var fontSizes = {
   xsmall: scale(BASE * 0.625) //      10
 
 };
-var fontWeights = {
-  light: 200,
-  regular: 400,
-  semiBold: 600,
-  bold: 700
-};
 var lineHeights = {
   xxxxxlarge: fontSizes.xxxxxlarge + 8,
   xxxxlarge: fontSizes.xxxxlarge + 8,
@@ -9944,8 +10002,8 @@ var borderWidths = {
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
+  fonts: fonts,
   fontSizes: fontSizes,
-  fontWeights: fontWeights,
   lineHeights: lineHeights,
   borderWidths: borderWidths
 };
@@ -9967,12 +10025,12 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   var padding = {
     "default": "".concat(theme.space.xsmall, "px ").concat(theme.space.small, "px")
   };
+  var fonts = {
+    "default": theme.fonts.semiBold
+  };
   var fontSizes = {
     "default": "".concat(theme.fontSizes.small, "px")
   };
-  var fontWeights = {
-    "default": theme.fontWeights.semiBold
-  };
   var radii = {
     "default": "4px"
   };
@@ -9980,8 +10038,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     borderWidths: borderWidths,
     colors: colors,
     padding: padding,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     radii: radii
   };
 };
@@ -10069,17 +10127,17 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     subdued: theme.colors.disabledText,
     primary: theme.colors.primary
   };
+  var fonts = {
+    light: theme.fonts.light,
+    regular: theme.fonts.regular,
+    semiBold: theme.fonts.semiBold
+  };
   var fontSizes = {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge
   };
-  var fontWeights = {
-    light: theme.fontWeights.light,
-    regular: theme.fontWeights.regular,
-    semiBold: theme.fontWeights.semiBold
-  };
   var lineHeights = {
     small: "".concat(theme.lineHeights.small, "px"),
     medium: "".concat(theme.lineHeights.medium, "px"),
@@ -10088,8 +10146,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
   return {
     colors: colors,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     lineHeights: lineHeights
   };
 };
@@ -10106,15 +10164,15 @@ var getFABTheme = function getFABTheme(theme) {
     width: '64px',
     height: '64px'
   };
+  var fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular
+  };
   var fontSizes = {
     header: "".concat(theme.fontSizes.xxxlarge, "px"),
     buttonIcon: "".concat(theme.fontSizes.xxxlarge, "px"),
     actionItemText: "".concat(theme.fontSizes.medium, "px")
   };
-  var fontWeights = {
-    header: "".concat(theme.fontWeights.semiBold),
-    actionItemText: "".concat(theme.fontWeights.regular)
-  };
   var lineHeights = {
     header: "".concat(theme.lineHeights.xxxlarge, "px"),
     actionItemText: "".concat(theme.lineHeights.medium, "px")
@@ -10135,11 +10193,11 @@ var getFABTheme = function getFABTheme(theme) {
   };
   return {
     radii: radii,
+    fonts: fonts,
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     lineHeights: lineHeights,
-    fontWeights: fontWeights,
     space: space
   };
 };
@@ -10187,9 +10245,9 @@ var StyledView = styled(require$$0$1.View)(_templateObject$9 || (_templateObject
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
-  return theme.__hd__.badge.fontWeights["default"];
+  return theme.__hd__.badge.fonts["default"];
 }, function (_ref8) {
   var theme = _ref8.theme;
   return theme.__hd__.badge.fontSizes["default"];
@@ -19909,13 +19967,13 @@ var StyledText = styled(require$$0$1.Text)(_templateObject$7 || (_templateObject
 
   switch (themeFontWeight) {
     case 'light':
-      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.light);
+      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.light);
 
     case 'regular':
-      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.regular);
+      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.regular);
 
     case 'semi-bold':
-      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.semiBold);
+      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.semiBold);
   }
 }, function (_ref3) {
   var themeIntent = _ref3.themeIntent,
@@ -20278,7 +20336,7 @@ var StyledActionItem = styled(require$$0$1.TouchableOpacity)(_templateObject$1 |
   var theme = _ref8.theme;
   return theme.__hd__.fab.radii.actionItem;
 });
-var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n"])), function (_ref9) {
+var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n"])), function (_ref9) {
   var theme = _ref9.theme;
   return theme.__hd__.fab.space.actionItemTextPaddingLeft;
 }, function (_ref10) {
@@ -20289,7 +20347,7 @@ var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templ
   return theme.__hd__.fab.lineHeights.actionItemText;
 }, function (_ref12) {
   var theme = _ref12.theme;
-  return theme.__hd__.fab.fontWeights.actionItemText;
+  return theme.__hd__.fab.fonts.actionItemText;
 });
 
 var ActionItem = function ActionItem(_ref) {
@@ -20321,7 +20379,7 @@ var StyledBackdrop = styled(require$$0$1.Animated.View)(_templateObject4 || (_te
   var theme = _ref3.theme;
   return theme.__hd__.fab.colors.backdropBackground;
 });
-var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
+var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-family: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  text-align: right;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.__hd__.fab.fontSizes.header;
 }, function (_ref5) {
@@ -20329,7 +20387,7 @@ var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObj
   return theme.__hd__.fab.lineHeights.header;
 }, function (_ref6) {
   var theme = _ref6.theme;
-  return theme.__hd__.fab.fontWeights.header;
+  return theme.__hd__.fab.fonts.header;
 }, function (_ref7) {
   var theme = _ref7.theme;
   return theme.__hd__.fab.space.headerTextMarginRight;
@@ -20371,7 +20429,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.5]
+    outputRange: [0, 0.9]
   });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
     testID: testID,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.3-alpha",
+  "version": "7.1.3-alpha4",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/playground/components/Card.tsx

@@ -245,7 +245,7 @@ const MyLeaveCard = (props: ViewProps) => {
 };
 
 const CardPlayground = () => (
-  <ScrollView style={{ padding: theme.space.medium }}>
+  <ScrollView contentContainerStyle={{ padding: theme.space.medium }}>
     <View style={{ flexDirection: 'row', height: scale(216) }}>
       <View style={{ flex: 1, marginRight: theme.space.medium }}>
         <InductionCard

package/playground/components/Typography.tsx

@@ -12,9 +12,9 @@ const TypographyPlayground = () => {
       </Typography.Text>
       <Typography.Text fontSize="large">This is a subtitle</Typography.Text>
       <Typography.Text>This is a 2nd subtitle</Typography.Text>
-      <Typography.Text>This is body text</Typography.Text>
+      <Typography.Text fontWeight="light">This is body text</Typography.Text>
       <Typography.Text intent="subdued" fontWeight="light">
-        This is body text
+        This is subdued text
       </Typography.Text>
     </View>
   );

package/playground/index.tsx

@@ -6,8 +6,8 @@ import {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack';
 import { useFonts } from 'expo-font';
-import { SafeAreaView, FlatList, Text } from 'react-native';
-import { ThemeProvider, theme, useTheme } from '../src/index';
+import { SafeAreaView, FlatList } from 'react-native';
+import { ThemeProvider, theme, useTheme, Typography } from '../src/index';
 import BadgePlayground from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
 import CardPlayground from './components/Card';
@@ -17,6 +17,9 @@ import TypographyPlayground from './components/Typography';
 import FABPlayground from './components/FAB';
 
 const heroIconFontPath = require('../assets/fonts/hero-icons.ttf');
+const beVietnamProLightFont = require('../assets/fonts/be-vietnam-pro-light.ttf');
+const beVietnamProRegularFont = require('../assets/fonts/be-vietnam-pro-regular.ttf');
+const beVietnamProSemiBoldFont = require('../assets/fonts/be-vietnam-pro-semibold.ttf');
 
 type RootStackParamList = {
   Home: undefined;
@@ -52,15 +55,15 @@ const ComponentItem = ({
 }) => {
   const hdTheme = useTheme();
   return (
-    <Text
+    <Typography.Text
+      fontSize="large"
       onPress={onPress}
       style={{
-        marginTop: hdTheme.space.large,
-        fontSize: hdTheme.fontSizes.large,
+        marginTop: hdTheme.space.medium,
       }}
     >
       {name}
-    </Text>
+    </Typography.Text>
   );
 };
 
@@ -93,7 +96,11 @@ const App = () => {
 
   const [fontsLoaded] = useFonts({
     'hero-icons': heroIconFontPath,
+    'Be Vietnam Pro Light': beVietnamProLightFont,
+    'Be Vietnam Pro Regular': beVietnamProRegularFont,
+    'Be Vietnam Pro SemiBold': beVietnamProSemiBoldFont,
   });
+
   if (!fontsLoaded) {
     return null;
   }

package/src/components/Badge/StyledBadge.tsx

@@ -23,7 +23,7 @@ const StyledView = styled(View)<{ themeIntent: ThemeIntent }>`
 `;
 
 const StyledText = styled(Text)<{ themeIntent: ThemeIntent }>`
-  font-weight: ${({ theme }) => theme.__hd__.badge.fontWeights.default};
+  font-family: ${({ theme }) => theme.__hd__.badge.fonts.default};
   font-size: ${({ theme }) => theme.__hd__.badge.fontSizes.default};
 
   ${({ themeIntent }) => css`