@hero-design/rn 8.33.1 → 8.33.2

package/es/index.js

@@ -1973,7 +1973,11 @@ var getButtonTheme = function getButtonTheme(theme) {
       textDanger: theme.colors.errorSurface
     }
   };
+  var lineHeights = {
+    titleOfTextVariant: theme.lineHeights.medium
+  };
   return {
+    lineHeights: lineHeights,
     borderWidth: borderWidth,
     fonts: fonts,
     fontSize: fontSize,
@@ -2960,7 +2964,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     maxLengthLabelMarginLeft: theme.space.xsmall,
     errorAndHelpTextContainerPaddingLeft: theme.space.medium,
     containerMarginTop: theme.space.small,
-    labelInsideTextInputMarginTop: -theme.space.xxsmall
+    labelInsideTextInputMarginTop: -theme.space.xxsmall,
+    errorAndHelpTextContainerPaddingTop: theme.space.xxsmall
   };
   var fonts = {
     text: theme.fonts.neutral.regular
@@ -7118,9 +7123,8 @@ var AccordionItem = function AccordionItem(_ref) {
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledHeaderWrapper$1, {
     onPress: onPress
-  }, typeof header === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large",
-    fontWeight: "semi-bold"
+  }, typeof header === 'string' ? /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "regular-bold"
   }, header) : header, /*#__PURE__*/React.createElement(Icon, {
     icon: open ? 'arrow-up' : 'arrow-down',
     intent: "secondary",
@@ -7256,9 +7260,11 @@ var Alert = function Alert(_ref2) {
     showDivider: !!onClose
   }, icon !== null ? /*#__PURE__*/React.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent)
-  }) : null, /*#__PURE__*/React.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, {
-    fontWeight: "semi-bold"
-  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, null, content) : content)), onClose ? /*#__PURE__*/React.createElement(CTAWrapper$1, {
+  }) : null, /*#__PURE__*/React.createElement(TextContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "small-bold"
+  }, title) : title, typeof content === 'string' ? /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "small"
+  }, content) : content)), onClose ? /*#__PURE__*/React.createElement(CTAWrapper$1, {
     onPress: onClose,
     testID: "alert-close-icon"
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -7316,7 +7322,8 @@ var Attachment = function Attachment(_ref) {
     themeHighlighted: backgroundHighlighted
   }, previewElement, filename ? /*#__PURE__*/React.createElement(StyledTextContainer, {
     testID: "attachment-content"
-  }, /*#__PURE__*/React.createElement(Typography.Text, {
+  }, /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "small",
     numberOfLines: 1
   }, filename)) : null), onDownload ? /*#__PURE__*/React.createElement(StyledCTAWrapper, {
     onPress: onDownload,
@@ -7523,12 +7530,9 @@ var StyledView$2 = index$a(Animated.View)(function (_ref) {
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space.horizontalPadding : undefined
   };
 });
-var StyledText$1 = index$a(Typography.Text)(function (_ref2) {
+var StyledText$1 = index$a(Typography.Caption)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    fontFamily: theme.__hd__.badge.fonts["default"],
-    fontSize: theme.__hd__.badge.fontSizes["default"],
-    lineHeight: theme.__hd__.badge.lineHeights["default"],
     color: theme.__hd__.badge.colors.text,
     includeFontPadding: false,
     textAlignVertical: 'center',
@@ -7686,7 +7690,7 @@ var BottomBarItem = index$a(View)({
   flex: 1,
   alignItems: 'center'
 });
-var StyledBottomBarText = index$a(Typography.Text)(function (_ref3) {
+var StyledBottomBarText = index$a(Typography.Caption)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
@@ -7781,7 +7785,6 @@ var BottomNavigation = function BottomNavigation(_ref) {
       intent: active ? 'primary' : 'text',
       testID: "hero-icon-".concat(icon)
     }), !!title && /*#__PURE__*/React.createElement(StyledBottomBarText, {
-      fontSize: "small",
       fontWeight: "semi-bold",
       intent: active ? 'primary' : 'body',
       numberOfLines: 1
@@ -8050,43 +8053,33 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
   }, borderColorStyling());
 };
 var genOutlineTextStyles = function genOutlineTextStyles(theme, intent, disabled) {
-  var textColorStyling = function textColorStyling() {
-    if (disabled) {
-      return {
-        color: theme.__hd__.button.colors.disabledText
-      };
-    }
+  if (disabled) {
     return {
-      color: theme.__hd__.button.colors[intent]
+      color: theme.__hd__.button.colors.disabledText
     };
+  }
+  return {
+    color: theme.__hd__.button.colors[intent]
   };
-  return _objectSpread2({
-    fontSize: theme.__hd__.button.fontSize["default"]
-  }, textColorStyling());
 };
 var genTextVariantTextStyles = function genTextVariantTextStyles(theme, intent, disabled) {
-  var textColorStyling = function textColorStyling() {
-    if (disabled) {
-      return {
-        color: theme.__hd__.button.colors.disabledText
-      };
-    }
+  if (disabled) {
     return {
-      color: theme.__hd__.button.colors[intent]
+      color: theme.__hd__.button.colors.disabledText
     };
+  }
+  return {
+    color: theme.__hd__.button.colors[intent]
   };
-  return _objectSpread2({
-    fontSize: theme.__hd__.button.fontSize.textVariant
-  }, textColorStyling());
 };
 var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
   var _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
-    themeVariant = _ref.themeVariant,
+    themeButtonVariant = _ref.themeButtonVariant,
     theme = _ref.theme;
-  switch (themeVariant) {
+  switch (themeButtonVariant) {
     case 'filled-primary':
       return genFilledContainerStyles(theme, 'primary', disabled, loading);
     case 'filled-secondary':
@@ -8113,17 +8106,16 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
       };
   }
 });
-var StyledButtonText = index$a(Typography.Text)(function (_ref2) {
+var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
   var disabled = _ref2.disabled,
-    themeVariant = _ref2.themeVariant,
+    themeButtonVariant = _ref2.themeButtonVariant,
     theme = _ref2.theme;
   var themeStyling = function themeStyling() {
-    switch (themeVariant) {
+    switch (themeButtonVariant) {
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':
         return {
-          fontSize: theme.__hd__.button.fontSize["default"],
           color: theme.__hd__.button.colors.invertedText
         };
       case 'outlined-primary':
@@ -8142,13 +8134,32 @@ var StyledButtonText = index$a(Typography.Text)(function (_ref2) {
   };
   return _objectSpread2({
     flexShrink: 1,
-    textAlign: 'center',
-    fontFamily: theme.__hd__.button.fonts["default"]
+    textAlign: 'center'
   }, themeStyling());
 });
-var StyledButtonIconWrapper = index$a(View)(function (_ref3) {
-  var themePosition = _ref3.themePosition,
+var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
+  var disabled = _ref3.disabled,
+    themeButtonVariant = _ref3.themeButtonVariant,
     theme = _ref3.theme;
+  var themeStyling = function themeStyling() {
+    switch (themeButtonVariant) {
+      case 'text-primary':
+        return genTextVariantTextStyles(theme, 'primary', disabled);
+      case 'text-secondary':
+        return genTextVariantTextStyles(theme, 'secondary', disabled);
+      case 'text-danger':
+        return genTextVariantTextStyles(theme, 'danger', disabled);
+    }
+  };
+  return _objectSpread2({
+    flexShrink: 1,
+    lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
+    textAlign: 'center'
+  }, themeStyling());
+});
+var StyledButtonIconWrapper = index$a(View)(function (_ref4) {
+  var themePosition = _ref4.themePosition,
+    theme = _ref4.theme;
   switch (themePosition) {
     case 'left':
       return {
@@ -8160,12 +8171,12 @@ var StyledButtonIconWrapper = index$a(View)(function (_ref3) {
       };
   }
 });
-var StyledButtonIcon = index$a(Icon)(function (_ref4) {
-  var disabled = _ref4.disabled,
-    themeVariant = _ref4.themeVariant,
-    theme = _ref4.theme;
+var StyledButtonIcon = index$a(Icon)(function (_ref5) {
+  var disabled = _ref5.disabled,
+    themeButtonVariant = _ref5.themeButtonVariant,
+    theme = _ref5.theme;
   var themeStyling = function themeStyling() {
-    switch (themeVariant) {
+    switch (themeButtonVariant) {
       case 'filled-primary':
       case 'filled-secondary':
       case 'filled-danger':
@@ -8239,6 +8250,9 @@ var getUnderlayColor = function getUnderlayColor(theme, themeVariant) {
   }
 };
 var deprecatedVariants = ['filled-secondary', 'filled-danger', 'outlined-secondary', 'outlined-danger'];
+function isTextVariant(themeVariant) {
+  return ['text-primary', 'text-secondary', 'text-danger'].includes(themeVariant);
+}
 var Button = function Button(_ref) {
   var accessibilityHint = _ref.accessibilityHint,
     accessibilityLabel = _ref.accessibilityLabel,
@@ -8269,7 +8283,7 @@ var Button = function Button(_ref) {
     loading: loading,
     onPress: onPress,
     testID: testID,
-    themeVariant: themeVariant,
+    themeButtonVariant: themeVariant,
     style: style,
     underlayColor: underlayColor
   }, loading === true ? /*#__PURE__*/React.createElement(LoadingIndicator, {
@@ -8281,19 +8295,26 @@ var Button = function Button(_ref) {
     disabled: disabled,
     icon: icon,
     testID: "".concat(testID, "-left-icon"),
-    themeVariant: themeVariant
-  })), /*#__PURE__*/React.createElement(StyledButtonText, {
+    themeButtonVariant: themeVariant
+  })), isTextVariant(themeVariant) ? /*#__PURE__*/React.createElement(StyledButtonTitleOfVariantText, {
+    variant: "regular-bold",
     ellipsizeMode: "tail",
     numberOfLines: 1,
     disabled: disabled,
-    themeVariant: themeVariant
+    themeButtonVariant: themeVariant
+  }, text) : /*#__PURE__*/React.createElement(StyledButtonText, {
+    level: "h5",
+    ellipsizeMode: "tail",
+    numberOfLines: 1,
+    disabled: disabled,
+    themeButtonVariant: themeVariant
   }, text), rightIcon !== undefined && /*#__PURE__*/React.createElement(StyledButtonIconWrapper, {
     themePosition: "right"
   }, /*#__PURE__*/React.createElement(StyledButtonIcon, {
     disabled: disabled,
     icon: rightIcon,
     testID: "".concat(testID, "-right-icon"),
-    themeVariant: themeVariant
+    themeButtonVariant: themeVariant
   }))));
 };
 
@@ -8337,14 +8358,9 @@ var IconWrapper = index$a(View)(function (_ref2) {
     paddingRight: theme.__hd__.button.space.iconPadding
   };
 });
-var ButtonText = index$a(Typography.Text)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    flexShrink: 1,
-    textAlign: 'center',
-    fontSize: theme.__hd__.button.fontSize.utility,
-    fontFamily: theme.__hd__.button.fonts.utility
-  };
+var ButtonText = index$a(Typography.Body)({
+  flexShrink: 1,
+  textAlign: 'center'
 });
 
 var TEXT_INTENTS = {
@@ -8387,9 +8403,8 @@ var Header = function Header(_ref) {
     _ref$onRequestClose = _ref.onRequestClose,
     onRequestClose = _ref$onRequestClose === void 0 ? noop$1 : _ref$onRequestClose,
     showCloseButton = _ref.showCloseButton;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeaderWrapper, null, typeof content === 'string' ? /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large",
-    fontWeight: "semi-bold"
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledHeaderWrapper, null, typeof content === 'string' ? /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "regular-bold"
   }, content)) : /*#__PURE__*/React.createElement(View, {
     style: {
       flex: 1
@@ -11045,12 +11060,6 @@ var Wrapper = index$a(View)(function () {
     justifyContent: 'space-between'
   };
 });
-var Value = index$a(Typography.Text)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    paddingHorizontal: theme.__hd__.contentNavigator.space.valueHorizontalPadding
-  };
-});
 
 function ContentNavigator(_ref) {
   var onPreviousPress = _ref.onPreviousPress,
@@ -11065,6 +11074,7 @@ function ContentNavigator(_ref) {
     fontSize = _ref$fontSize === void 0 ? 'medium' : _ref$fontSize,
     testID = _ref.testID,
     style = _ref.style;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(Wrapper, {
     testID: testID,
     style: style
@@ -11073,9 +11083,18 @@ function ContentNavigator(_ref) {
     onPress: onPreviousPress,
     disabled: previousDisabled,
     testID: "previous-icon-button"
-  }), /*#__PURE__*/React.createElement(Value, {
-    fontWeight: "semi-bold",
-    fontSize: fontSize,
+  }), fontSize === 'medium' ? /*#__PURE__*/React.createElement(Typography.Body, {
+    style: {
+      paddingHorizontal: theme.__hd__.contentNavigator.space.valueHorizontalPadding
+    },
+    variant: "small-bold",
+    onPress: onPress,
+    testID: "content-navigator-value"
+  }, value) : /*#__PURE__*/React.createElement(Typography.Title, {
+    style: {
+      paddingHorizontal: theme.__hd__.contentNavigator.space.valueHorizontalPadding
+    },
+    level: "h5",
     onPress: onPress,
     testID: "content-navigator-value"
   }, value), /*#__PURE__*/React.createElement(CompoundButton.Icon, {
@@ -11186,7 +11205,8 @@ var CalendarRowItem = function CalendarRowItem(_ref) {
   }, /*#__PURE__*/React.createElement(StyledCalendarCell, {
     variant: getCellVariant(isSelected, isCurrent),
     onPress: onPress
-  }, /*#__PURE__*/React.createElement(Typography.Text, {
+  }, /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "small",
     intent: isSelected ? 'inverted' : textIntent
   }, date ? date.getDate() : ''), marked ? /*#__PURE__*/React.createElement(StyledMark, {
     testID: "calendar-date-mark",
@@ -11283,7 +11303,9 @@ var Calendar = function Calendar(_ref) {
   })), /*#__PURE__*/React.createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
     return /*#__PURE__*/React.createElement(StyledCalendarRowItem, {
       key: day
-    }, /*#__PURE__*/React.createElement(StyledCalendarDayNameCell, null, /*#__PURE__*/React.createElement(Typography.Text, null, day)));
+    }, /*#__PURE__*/React.createElement(StyledCalendarDayNameCell, null, /*#__PURE__*/React.createElement(Typography.Body, {
+      variant: "small"
+    }, day)));
   })), /*#__PURE__*/React.createElement(StyledCalendarRow, null, daysOfPreviousMonth.map(function (date) {
     return date ? /*#__PURE__*/React.createElement(CalendarRowItem, {
       key: date.toDateString(),
@@ -11420,14 +11442,11 @@ var StyledCarouselView = index$a(View)(function () {
     justifyContent: 'space-between'
   };
 });
-var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
+var StyledCarouselHeading = index$a(Typography.Title)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     marginTop: theme.__hd__.carousel.space.headingMarginTop,
-    marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
-    fontFamily: theme.__hd__.carousel.fonts.heading,
-    fontSize: theme.__hd__.carousel.fontSizes.heading,
-    lineHeight: theme.__hd__.carousel.lineHeights.heading
+    marginBottom: theme.__hd__.carousel.space.headingMarginBottom
   };
 });
 var StyledCarouselImage = index$a(Image)(function () {
@@ -11507,9 +11526,10 @@ var CarouselItem = function CarouselItem(_ref) {
     paddingHorizontal: "large",
     marginTop: "large",
     width: width
-  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large"
-  }, body) : null));
+  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, {
+    level: "h1",
+    typeface: "playful"
+  }, heading), body ? /*#__PURE__*/React.createElement(Typography.Body, null, body) : null));
 };
 
 /*
@@ -11908,7 +11928,7 @@ var StyledWrapper$7 = index$a(TouchableOpacity)(function (_ref) {
     flexDirection: 'row'
   }, themeWithBorder && borderStyle);
 });
-var StyledDescription$1 = index$a(Typography.Text)(function (_ref2) {
+var StyledDescription$1 = index$a(Typography.Body)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
@@ -11959,7 +11979,8 @@ var Checkbox = function Checkbox(_ref) {
     style: style,
     testID: testID
   }, !!description && /*#__PURE__*/React.createElement(StyledDescription$1, {
-    intent: disabled ? 'subdued' : 'body'
+    intent: disabled ? 'subdued' : 'body',
+    variant: "small"
   }, description), /*#__PURE__*/React.createElement(StyledCheckboxContainer, null, checked && /*#__PURE__*/React.createElement(StyledCheckMark, {
     icon: "box-check",
     intent: disabled ? 'disabled-text' : 'text',
@@ -11988,21 +12009,19 @@ var StyledLabelContainer = index$a(View)(function (_ref2) {
     paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding
   };
 });
-var StyledLabel = index$a(Typography.Text)(function (_ref3) {
+var StyledLabel = index$a(Typography.Caption)(function (_ref3) {
   var theme = _ref3.theme,
     themeState = _ref3.themeState;
   return {
     color: theme.__hd__.textInput.colors.labels[themeState],
-    fontSize: theme.__hd__.textInput.fontSizes.topLabel,
     lineHeight: theme.__hd__.textInput.lineHeights.topLabel
   };
 });
-var StyledAsteriskLabel = index$a(Typography.Text)(function (_ref4) {
+var StyledAsteriskLabel = index$a(Typography.Caption)(function (_ref4) {
   var theme = _ref4.theme,
     themeState = _ref4.themeState;
   return {
     color: theme.__hd__.textInput.colors.asterisks[themeState],
-    fontSize: theme.__hd__.textInput.fontSizes.topLabel,
     lineHeight: theme.__hd__.textInput.lineHeights.topLabel
   };
 });
@@ -12014,24 +12033,22 @@ var StyledLabelContainerInsideTextInput = index$a(View)(function (_ref5) {
     alignItems: themeVariant === 'text' ? 'center' : 'flex-start'
   }, StyleSheet$1.absoluteFillObject);
 });
-var StyledLabelInsideTextInput = index$a(Typography.Text)(function (_ref6) {
+var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref6) {
   var theme = _ref6.theme,
     themeState = _ref6.themeState;
   return {
     textAlignVertical: 'center',
     alignContent: 'center',
-    fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
     alignItems: 'center',
     color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
     marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop
   };
 });
-var StyledAsteriskLabelInsideTextInput = index$a(Typography.Text)(function (_ref7) {
+var StyledAsteriskLabelInsideTextInput = index$a(Typography.Body)(function (_ref7) {
   var theme = _ref7.theme,
     themeState = _ref7.themeState;
   return {
-    color: theme.__hd__.textInput.colors.asterisks[themeState],
-    fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel
+    color: theme.__hd__.textInput.colors.asterisks[themeState]
   };
 });
 var StyledErrorContainer$2 = index$a(View)(function (_ref8) {
@@ -12044,20 +12061,18 @@ var StyledErrorContainer$2 = index$a(View)(function (_ref8) {
     flexGrow: 4
   };
 });
-var StyledError = index$a(Typography.Text)(function (_ref9) {
+var StyledError = index$a(Typography.Caption)(function (_ref9) {
   var theme = _ref9.theme;
   return {
     color: theme.__hd__.textInput.colors.error,
-    fontSize: theme.__hd__.textInput.fontSizes.error,
     marginLeft: theme.__hd__.textInput.space.errorMarginLeft
   };
 });
-var StyledMaxLengthMessage = index$a(Typography.Text)(function (_ref10) {
+var StyledMaxLengthMessage = index$a(Typography.Caption)(function (_ref10) {
   var theme = _ref10.theme,
     themeState = _ref10.themeState;
   return {
     color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
-    fontSize: theme.__hd__.textInput.fontSizes.maxLength,
     marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
     alignSelf: 'flex-end',
     flex: 1,
@@ -12065,15 +12080,10 @@ var StyledMaxLengthMessage = index$a(Typography.Text)(function (_ref10) {
     textAlign: 'right'
   };
 });
-var StyledHelperText = index$a(Typography.Text)(function (_ref11) {
-  var theme = _ref11.theme;
-  return {
-    fontSize: theme.__hd__.textInput.fontSizes.error
-  };
-});
-var StyledTextInput = index$a(TextInput$1)(function (_ref12) {
-  var theme = _ref12.theme,
-    themeVariant = _ref12.themeVariant;
+var StyledHelperText = Typography.Caption;
+var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
+  var theme = _ref11.theme,
+    themeVariant = _ref11.themeVariant;
   return {
     textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
     fontSize: theme.__hd__.textInput.fontSizes.text,
@@ -12086,19 +12096,19 @@ var StyledTextInput = index$a(TextInput$1)(function (_ref12) {
     fontFamily: theme.__hd__.textInput.fonts.text
   };
 });
-var StyledBorderBackDrop = index$a(View)(function (_ref13) {
+var StyledBorderBackDrop = index$a(View)(function (_ref12) {
   var _theme$__hd__$textInp;
-  var theme = _ref13.theme,
-    themeFocused = _ref13.themeFocused,
-    themeState = _ref13.themeState;
+  var theme = _ref12.theme,
+    themeFocused = _ref12.themeFocused,
+    themeState = _ref12.themeState;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     borderWidth: themeFocused ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
     borderRadius: theme.__hd__.textInput.radii.container,
     borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeState]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   });
 });
-var StyledTextInputContainer = index$a(View)(function (_ref14) {
-  var theme = _ref14.theme;
+var StyledTextInputContainer = index$a(View)(function (_ref13) {
+  var theme = _ref13.theme;
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -12116,11 +12126,12 @@ var StyledTextInputAndLabelContainer = index$a(View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$a(View)(function (_ref15) {
-  var theme = _ref15.theme;
+var StyledErrorAndHelpTextContainer = index$a(View)(function (_ref14) {
+  var theme = _ref14.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
-    minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight
+    minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
+    paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop
   };
 });
 var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
@@ -12332,7 +12343,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    fontSize: "medium",
     themeState: state
   }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
@@ -12354,8 +12364,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React.createElement(StyledError, {
     testID: "input-error-message"
   }, error)) : !!helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText), shouldShowMaxLength && /*#__PURE__*/React.createElement(StyledMaxLengthMessage, {
-    themeState: state,
-    fontSize: "small"
+    themeState: state
   }, displayText.length, "/", maxLength))));
 });
 
@@ -12929,23 +12938,19 @@ var StyledWrapper$6 = index$a(View)(function (_ref) {
     padding: theme.__hd__.empty.space.wrapperPadding
   };
 });
-var StyledTitle = index$a(Typography.Text)(function (_ref2) {
+var StyledTitle = index$a(Typography.Title)(function (_ref2) {
   var theme = _ref2.theme,
     themeVariant = _ref2.themeVariant;
   return {
-    fontFamily: theme.__hd__.empty.fonts.title,
-    fontSize: theme.__hd__.empty.fontSizes.title,
     textAlign: 'center',
     marginBottom: theme.__hd__.empty.space.titleMargin,
     color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.text
   };
 });
-var StyledDescription = index$a(Typography.Text)(function (_ref3) {
+var StyledDescription = index$a(Typography.Body)(function (_ref3) {
   var theme = _ref3.theme,
     themeVariant = _ref3.themeVariant;
   return {
-    fontFamily: theme.__hd__.empty.fonts.description,
-    fontSize: theme.__hd__.empty.fontSizes.description,
     textAlign: 'center',
     color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedSubduedText : theme.__hd__.empty.colors.subduedText
   };
@@ -12968,9 +12973,12 @@ var Empty = function Empty(_ref) {
       marginBottom: theme.__hd__.empty.space.imageMargin
     }, image.props.style]
   })), /*#__PURE__*/React.createElement(StyledTitle, {
-    themeVariant: variant
+    themeVariant: variant,
+    level: "h4",
+    typeface: "playful"
   }, title), !!description && /*#__PURE__*/React.createElement(StyledDescription, {
-    themeVariant: variant
+    themeVariant: variant,
+    typeface: "playful"
   }, description));
 };
 
@@ -13040,25 +13048,19 @@ var StyledErrorImage = index$a(Image)(function (_ref7) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$a(Typography.Text)(function (_ref8) {
+var StyledErrorTitle = index$a(Typography.Title)(function (_ref8) {
   var theme = _ref8.theme;
   return {
-    fontFamily: theme.__hd__.error.fonts.title,
-    fontSize: theme.__hd__.error.fontSizes.title,
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
-    color: theme.__hd__.error.colors.title,
-    lineHeight: theme.__hd__.error.lineHeight.title
+    color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
+var StyledErrorDescription = index$a(Typography.Body)(function (_ref9) {
   var theme = _ref9.theme;
   return {
-    fontFamily: theme.__hd__.error.fonts.description,
-    fontSize: theme.__hd__.error.fontSizes.description,
     textAlign: 'center',
-    color: theme.__hd__.error.colors.description,
-    lineHeight: theme.__hd__.error.lineHeight.description
+    color: theme.__hd__.error.colors.description
   };
 });
 
@@ -13095,7 +13097,12 @@ var ErrorPage = function ErrorPage(_ref) {
   return /*#__PURE__*/React.createElement(StyledErrorContainer$1, _extends$1({
     testID: testID,
     themeVariant: variant
-  }, nativeProps), /*#__PURE__*/React.createElement(StyledErrorContent, null, image && /*#__PURE__*/React.createElement(StyledErrorImageContainer, null, renderImage$1(image)), /*#__PURE__*/React.createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React.createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React.createElement(StyledErrorButtonPrimary, {
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledErrorContent, null, image && /*#__PURE__*/React.createElement(StyledErrorImageContainer, null, renderImage$1(image)), /*#__PURE__*/React.createElement(StyledErrorTitle, {
+    level: "h4",
+    typeface: "playful"
+  }, title), description && /*#__PURE__*/React.createElement(StyledErrorDescription, {
+    typeface: "playful"
+  }, description)), showButtonContainer && /*#__PURE__*/React.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React.createElement(StyledErrorButtonPrimary, {
     variant: "filled",
     text: ctaText,
     onPress: onCtaPress
@@ -13222,12 +13229,9 @@ var StyledFABIcon = index$a(Icon)(function (_ref2) {
     textAlign: 'center'
   };
 });
-var StyledFABText = index$a(Typography.Text)(function (_ref3) {
+var StyledFABText = index$a(Typography.Body)(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    fontFamily: theme.__hd__.fab.fonts.title,
-    fontSize: theme.__hd__.fab.fontSizes.title,
-    lineHeight: theme.__hd__.fab.lineHeights.title,
     color: theme.__hd__.fab.colors.titleText,
     textAlignVertical: 'center',
     textAlign: 'center',
@@ -13405,13 +13409,9 @@ var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
     overflow: 'hidden'
   };
 });
-var StyledActionItemText = index$a(Typography.Text)(function (_ref2) {
+var StyledActionItemText = index$a(Typography.Body)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    paddingLeft: theme.__hd__.fab.space.actionItemTextPaddingLeft,
-    fontSize: theme.__hd__.fab.fontSizes.actionItemText,
-    lineHeight: theme.__hd__.fab.lineHeights.actionItemText,
-    fontFamily: theme.__hd__.fab.fonts.actionItemText,
     color: theme.__hd__.fab.colors.actionItemText
   };
 });
@@ -13494,13 +13494,10 @@ var StyledBackdrop = index$a(Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
-var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
+var StyledHeaderText = index$a(Typography.Title)(function (_ref3) {
   var theme = _ref3.theme;
   return {
-    fontSize: theme.__hd__.fab.fontSizes.header,
-    lineHeight: theme.__hd__.fab.lineHeights.header,
     color: theme.__hd__.fab.colors.headerText,
-    fontFamily: theme.__hd__.fab.fonts.header,
     marginRight: theme.__hd__.fab.space.headerTextMarginRight,
     marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
     textAlign: 'right'
@@ -13580,7 +13577,8 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }]
     }
   }, /*#__PURE__*/React.createElement(StyledHeaderText, {
-    testID: "header-text"
+    testID: "header-text",
+    level: "h4"
   }, headerTitle)), /*#__PURE__*/React.createElement(Box, {
     style: [style, {
       paddingBottom: 0
@@ -13714,12 +13712,10 @@ var ListItem = function ListItem(_ref) {
   }, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer$1, null, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icon: prefix,
     intent: disabled ? 'disabled-text' : 'primary'
-  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, {
-    intent: "body",
-    fontSize: "large"
-  }, title) : title, !!subtitle && /*#__PURE__*/React.createElement(Typography.Text, {
-    intent: "subdued",
-    fontSize: "small"
+  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer$1, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography.Body, {
+    intent: "body"
+  }, title) : title, !!subtitle && /*#__PURE__*/React.createElement(Typography.Caption, {
+    intent: "subdued"
   }, subtitle)), suffix && /*#__PURE__*/React.createElement(StyledSuffixContainer$1, null, typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icon: suffix,
     intent: disabled ? 'disabled-text' : 'primary',
@@ -13782,12 +13778,10 @@ var BasicListItem = function BasicListItem(_ref) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null, prefix && /*#__PURE__*/React.createElement(StyledPrefixContainer, null, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icon: prefix,
     intent: disabled ? 'disabled-text' : 'primary'
-  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, {
-    intent: "body",
-    fontSize: "large"
-  }, title) : title, subtitle && /*#__PURE__*/React.createElement(Typography.Text, {
-    intent: "subdued",
-    fontSize: "small"
+  }) : prefix), /*#__PURE__*/React.createElement(StyledTitleContainer, null, typeof title === 'string' ? /*#__PURE__*/React.createElement(Typography.Body, {
+    intent: "body"
+  }, title) : title, subtitle && /*#__PURE__*/React.createElement(Typography.Caption, {
+    intent: "subdued"
   }, subtitle)), suffix && /*#__PURE__*/React.createElement(StyledSuffixContainer, null, typeof suffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icon: suffix,
     size: "small",
@@ -13824,13 +13818,10 @@ var StyledCell = index$a(View)(function (_ref) {
     borderColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledCellText = index$a(Typography.Text)(function (_ref2) {
+var StyledCellText = index$a(Typography.Title)(function (_ref2) {
   var theme = _ref2.theme,
     themeState = _ref2.themeState;
   return {
-    fontFamily: theme.__hd__.pinInput.fonts.cellText,
-    fontSize: theme.__hd__.pinInput.fontSizes.cellText,
-    lineHeight: theme.__hd__.pinInput.lineHeights.cellText,
     color: theme.__hd__.pinInput.colors[themeState]
   };
 });
@@ -13885,11 +13876,9 @@ var StyledErrorContainer = index$a(View)(function (_ref7) {
     alignItems: 'center'
   };
 });
-var StyledErrorMessage = index$a(Typography.Text)(function (_ref8) {
+var StyledErrorMessage = index$a(Typography.Caption)(function (_ref8) {
   var theme = _ref8.theme;
   return {
-    fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
-    fontSize: theme.__hd__.pinInput.fontSizes.errorMessage,
     color: theme.__hd__.pinInput.colors.error,
     paddingLeft: theme.__hd__.pinInput.space.errorMessagePadding
   };
@@ -13913,7 +13902,8 @@ function PinCell(_ref) {
     themeState: state,
     testID: "pin-cell-filled-mask"
   }), value !== '' && !secure && /*#__PURE__*/React.createElement(StyledCellText, {
-    themeState: state
+    themeState: state,
+    level: "h3"
   }, value));
 }
 
@@ -14214,9 +14204,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     })
   }, /*#__PURE__*/React.createElement(StyledStrokeEnd, {
     themeIntent: intent
-  })), /*#__PURE__*/React.createElement(StyledDonutCircle, null, /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: "large"
-  }, renderValue(value)))));
+  })), /*#__PURE__*/React.createElement(StyledDonutCircle, null, /*#__PURE__*/React.createElement(Typography.Body, null, renderValue(value)))));
 };
 
 var StyledWrapper$4 = index$a(View)(function (_ref) {
@@ -15388,21 +15376,17 @@ var StyledSuccessImageContainer = index$a(View)(function (_ref4) {
     height: theme.__hd__.success.sizes.image
   };
 });
-var StyledSuccessTitle = index$a(Typography.Text)(function (_ref5) {
+var StyledSuccessTitle = index$a(Typography.Title)(function (_ref5) {
   var theme = _ref5.theme;
   return {
-    fontFamily: theme.__hd__.success.fonts.title,
-    fontSize: theme.__hd__.success.fontSizes.title,
     textAlign: 'center',
     marginBottom: theme.__hd__.success.space.titleMarginBottom,
     color: theme.__hd__.success.colors.title
   };
 });
-var StyledSuccessDescription = index$a(Typography.Text)(function (_ref6) {
+var StyledSuccessDescription = index$a(Typography.Body)(function (_ref6) {
   var theme = _ref6.theme;
   return {
-    fontFamily: theme.__hd__.success.fonts.description,
-    fontSize: theme.__hd__.success.fontSizes.description,
     textAlign: 'center',
     color: theme.__hd__.success.colors.description
   };
@@ -15460,7 +15444,10 @@ var SuccessPage = function SuccessPage(_ref) {
   return /*#__PURE__*/React.createElement(StyledSuccessContainer, _extends$1({
     testID: testID,
     themeVariant: variant
-  }, nativeProps), /*#__PURE__*/React.createElement(StyledSuccessContent, null, !!image && /*#__PURE__*/React.createElement(StyledSuccessImageContainer, null, renderImage(image)), /*#__PURE__*/React.createElement(StyledSuccessTitle, null, title), !!description && /*#__PURE__*/React.createElement(StyledSuccessDescription, null, description)), !!ctaText && /*#__PURE__*/React.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React.createElement(StyledSuccessButtonPrimary, {
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledSuccessContent, null, !!image && /*#__PURE__*/React.createElement(StyledSuccessImageContainer, null, renderImage(image)), /*#__PURE__*/React.createElement(StyledSuccessTitle, {
+    level: "h4",
+    typeface: "playful"
+  }, title), !!description && /*#__PURE__*/React.createElement(StyledSuccessDescription, null, description)), !!ctaText && /*#__PURE__*/React.createElement(StyledSuccessButtonContainer, null, /*#__PURE__*/React.createElement(StyledSuccessButtonPrimary, {
     text: ctaText,
     onPress: onCtaPress
   }), !!showSecondaryButton && /*#__PURE__*/React.createElement(StyledSuccessButtonPrimary, {
@@ -15578,9 +15565,7 @@ var Option = function Option(_ref2) {
       },
       onLayout: onLayout
     }, /*#__PURE__*/React.createElement(OptionContent, {
-      content: /*#__PURE__*/React.createElement(Typography.Text, {
-        fontSize: "large"
-      }, text),
+      content: /*#__PURE__*/React.createElement(Typography.Body, null, text),
       badge: badge
     }));
   }
@@ -15949,8 +15934,8 @@ var getTabItem$1 = function getTabItem(_ref) {
     });
   }
   if (typeof item === 'string') {
-    return /*#__PURE__*/React.createElement(Typography.Text, {
-      fontWeight: active ? 'semi-bold' : 'regular',
+    return /*#__PURE__*/React.createElement(Typography.Body, {
+      variant: active ? 'regular-bold' : 'regular',
       numberOfLines: 1,
       style: {
         color: color
@@ -16167,8 +16152,8 @@ var getTabItem = function getTabItem(_ref) {
     color = _ref.color,
     active = _ref.active;
   if (typeof item === 'string') {
-    return /*#__PURE__*/React.createElement(Typography.Text, {
-      fontWeight: active ? 'semi-bold' : 'regular',
+    return /*#__PURE__*/React.createElement(Typography.Body, {
+      variant: active ? 'small-bold' : 'small',
       numberOfLines: 1,
       style: {
         color: color
@@ -16330,16 +16315,13 @@ var StyledView = index$a(View)(function (_ref) {
     backgroundColor: backgroundColor
   };
 });
-var StyledText = index$a(Typography.Text)(function (_ref3) {
+var StyledText = index$a(Typography.Caption)(function (_ref3) {
   var themeIntent = _ref3.themeIntent,
     themeVariant = _ref3.themeVariant,
     theme = _ref3.theme;
   var _ref4 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
     textColor = _ref4.textColor;
   return {
-    fontFamily: theme.__hd__.tag.fonts["default"],
-    fontSize: theme.__hd__.tag.fontSizes["default"],
-    lineHeight: theme.__hd__.tag.lineHeights["default"],
     color: textColor,
     includeFontPadding: false,
     textAlignVertical: 'center',
@@ -16364,7 +16346,8 @@ var Tag = function Tag(_ref) {
     testID: testID
   }), typeof content === 'string' ? /*#__PURE__*/React.createElement(StyledText, {
     themeIntent: intent,
-    themeVariant: variant
+    themeVariant: variant,
+    fontWeight: "semi-bold"
   }, content) : content);
 };
 
@@ -16676,7 +16659,8 @@ var Toast$1 = function Toast(_ref2) {
   }, icon !== null ? /*#__PURE__*/React.createElement(ToastIcon, {
     themeIntent: intent,
     icon: icon || getIntentIcon(intent)
-  }) : null, /*#__PURE__*/React.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, {
+  }) : null, /*#__PURE__*/React.createElement(TextContainer, null, typeof content === 'string' ? /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "small",
     intent: intent === 'snackbar' ? 'inverted' : 'body'
   }, content) : content)), actionLabel ? /*#__PURE__*/React.createElement(CTAWrapper, {
     testID: "toast-action-button",
@@ -16684,8 +16668,8 @@ var Toast$1 = function Toast(_ref2) {
       onAction === null || onAction === void 0 ? void 0 : onAction();
       onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
     }
-  }, typeof actionLabel === 'string' ? /*#__PURE__*/React.createElement(Typography.Text, {
-    fontWeight: "semi-bold",
+  }, typeof actionLabel === 'string' ? /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "small-bold",
     intent: intent === 'snackbar' ? 'inverted' : 'body'
   }, actionLabel) : actionLabel) : null);
 };
@@ -16875,7 +16859,7 @@ var IconButtonWrapper = index$a(View)(function (_ref4) {
     padding: theme.__hd__.toolbar.space.iconButtonWrapperPadding
   };
 });
-var IconButtonLabel = index$a(Typography.Text)(function (_ref5) {
+var IconButtonLabel = index$a(Typography.Body)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     marginLeft: theme.__hd__.toolbar.space.iconButtonLabelMarginLeft
@@ -16893,8 +16877,7 @@ var IconItem = function IconItem(_ref) {
     intent: disabled ? 'disabled-text' : intent,
     testID: "toolbar-item-icon-".concat(icon)
   }), label ? /*#__PURE__*/React.createElement(IconButtonLabel, {
-    fontSize: "large",
-    fontWeight: "semi-bold",
+    variant: "regular-bold",
     intent: disabled ? 'subdued' : intent,
     allowFontScaling: false,
     numberOfLines: 1
@@ -16916,9 +16899,8 @@ var ToolbarItemContent = function ToolbarItemContent(_ref2) {
     });
   }
   if (label) {
-    return /*#__PURE__*/React.createElement(Typography.Text, {
-      fontSize: "large",
-      fontWeight: "semi-bold",
+    return /*#__PURE__*/React.createElement(Typography.Body, {
+      variant: "regular-bold",
       intent: disabled ? 'disabled' : intent,
       allowFontScaling: false,
       numberOfLines: 1
@@ -33376,11 +33358,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
-    themeState: state,
-    fontSize: "small"
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabel, {
     testID: "input-label",
-    fontSize: "small",
     themeState: state
   }, label)), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: "text",
@@ -33389,7 +33369,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     themeState: state
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
     testID: "input-label",
-    fontSize: "medium",
     themeState: state
   }, label)), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
     onPress: function onPress(e) {