@hero-design/rn 8.12.1 → 8.12.3

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 11519c5263d6ba02
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 31.5s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output eea1c2ee08c7c3cf
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 31.1s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -969,7 +969,7 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$3 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$2 = colorScales.violet,
+  violet$1 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 ({
   black: '#000000',
@@ -1042,16 +1042,16 @@ var blue$1 = colorScales.blue,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$2.base,
-  violetDark15: violet$2.darken15,
-  violetDark30: violet$2.darken30,
-  violetDark45: violet$2.darken45,
-  violetDark60: violet$2.darken60,
-  violetDark75: violet$2.darken75,
-  violetLight30: violet$2.lighten30,
-  violetLight60: violet$2.lighten60,
-  violetLight75: violet$2.lighten75,
-  violetLight90: violet$2.lighten90,
+  violet: violet$1.base,
+  violetDark15: violet$1.darken15,
+  violetDark30: violet$1.darken30,
+  violetDark45: violet$1.darken45,
+  violetDark60: violet$1.darken60,
+  violetDark75: violet$1.darken75,
+  violetLight30: violet$1.lighten30,
+  violetLight60: violet$1.lighten60,
+  violetLight75: violet$1.lighten75,
+  violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
@@ -1191,8 +1191,8 @@ var currant$1 = colorScales.currant,
   pastelRed = colorScales.pastelRed,
   vermilion = colorScales.vermilion,
   mauve$3 = colorScales.mauve,
-  violet1$2 = colorScales.violet1,
-  violet$1 = colorScales.violet,
+  violet1$3 = colorScales.violet1,
+  violet$2 = colorScales.violet,
   scarletGum$2 = colorScales.scarletGum;
 var palette$6 = {
   currant: currant$1.base,
@@ -1211,18 +1211,18 @@ var palette$6 = {
   pastelRed: pastelRed.base,
   vermilion: vermilion.base,
   mauve: mauve$3.base,
-  violetLight30: violet$1.lighten30,
-  violet1: violet1$2.base,
-  violet: violet$1.base,
+  violetLight30: violet$2.lighten30,
+  violet1: violet1$3.base,
+  violet: violet$2.base,
   scarletGum: scarletGum$2.base
 };
-var violet$3 = colorScales.violet,
+var violet1$2 = colorScales.violet1,
   mauve$2 = colorScales.mauve;
 var palette$5 = Object.assign(Object.assign({}, palette$8), {
-  violet: violet$3.base,
-  violetLight20: violet$3.lighten20,
-  violetLight30: violet$3.lighten30,
-  violetLight90: violet$3.lighten90,
+  violet: violet1$2.base,
+  violetLight20: violet1$2.lighten20,
+  violetLight30: violet1$2.lighten30,
+  violetLight90: violet1$2.lighten90,
   mauve: mauve$2.base,
   mauveLight80: mauve$2.lighten80
 });
@@ -1590,7 +1590,8 @@ var getRadii = function getRadii(baseRadius) {
     large: baseRadius * 3,
     xlarge: baseRadius * 4,
     xxlarge: baseRadius * 5,
-    xxxlarge: baseRadius * 6 // 24
+    xxxlarge: baseRadius * 6,
+    '5xlarge': baseRadius * 8 // 32
   };
 };
 
@@ -1853,6 +1854,7 @@ var getButtonTheme = function getButtonTheme(theme) {
   };
   var space = {
     buttonPadding: theme.space.medium,
+    textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small
   };
@@ -1860,8 +1862,9 @@ var getButtonTheme = function getButtonTheme(theme) {
     iconSize: theme.fontSizes.xxlarge
   };
   var radii = {
-    "default": theme.space.xlarge,
-    utilityRadii: theme.space.small
+    "default": theme.radii['5xlarge'],
+    utilityRadii: theme.radii.medium,
+    text: theme.radii.base
   };
   var colors = {
     primary: theme.colors.primary,
@@ -1872,7 +1875,19 @@ var getButtonTheme = function getButtonTheme(theme) {
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    utilityBackground: theme.colors.neutralGlobalSurface
+    utilityBackground: theme.colors.neutralGlobalSurface,
+    textLoadingBackground: theme.colors.highlightedSurface,
+    pressedBackground: {
+      filledPrimary: theme.colors.pressedSurface,
+      filledSecondary: theme.colors.pressedSurface,
+      filledDanger: theme.colors.errorSurface,
+      outlinedPrimary: theme.colors.highlightedSurface,
+      outlinedSecondary: theme.colors.highlightedSurface,
+      outlineDanger: theme.colors.errorSurface,
+      textPrimary: theme.colors.highlightedSurface,
+      textSecondary: theme.colors.highlightedSurface,
+      textDanger: theme.colors.errorSurface
+    }
   };
   return {
     borderWidth: borderWidth,
@@ -2137,9 +2152,11 @@ var getEmptyTheme = function getEmptyTheme(theme) {
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
     buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.primary,
+    actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary
@@ -2852,6 +2869,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     archived: theme.colors.onArchivedSurface
   };
   var fontSizes = {
+    xsmall: theme.fontSizes.xsmall,
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
@@ -2863,6 +2881,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
+    xsmall: theme.lineHeights.xsmall,
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,
@@ -7343,8 +7362,8 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
           backgroundColor: theme.__hd__.button.colors.invertedText
         };
       case 'outlined-primary':
-      case 'text-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
+      case 'text-primary':
       case 'outlined-secondary':
       case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
@@ -7426,9 +7445,9 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
   }, nativeProps), Array.from(new Array(count), renderLoadingDot, themeVariant));
 };
 
-var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled) {
+var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading) {
   var backgroundColorStyling = function backgroundColorStyling() {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         backgroundColor: theme.__hd__.button.colors.disabledBorder
       };
@@ -7446,9 +7465,9 @@ var genFilledContainerStyles = function genFilledContainerStyles(theme, intent,
     borderRadius: theme.__hd__.button.radii["default"]
   }, backgroundColorStyling());
 };
-var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled) {
+var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading) {
   var borderColorStyling = function borderColorStyling() {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         borderColor: theme.__hd__.button.colors.disabledBorder
       };
@@ -7500,33 +7519,37 @@ var genTextVariantTextStyles = function genTextVariantTextStyles(theme, intent,
     lineHeight: theme.__hd__.button.lineHeight["default"]
   }, textColorStyling());
 };
-var StyledButtonContainer = index$a(TouchableOpacity)(function (_ref) {
+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,
     theme = _ref.theme;
   switch (themeVariant) {
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled);
+      return genFilledContainerStyles(theme, 'primary', disabled, loading);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled);
+      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled);
+      return genFilledContainerStyles(theme, 'danger', disabled, loading);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled);
+      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled);
+      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled);
+      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
       return {
+        borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: theme.__hd__.button.space.buttonPadding,
-        borderWidth: 0
+        padding: theme.__hd__.button.space.textButtonPadding,
+        borderWidth: 0,
+        backgroundColor: loading ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
   }
 });
@@ -7634,6 +7657,29 @@ var getThemeVariant = function getThemeVariant(variant, intent) {
       return TEXT_VARIANTS[intent];
   }
 };
+var getUnderlayColor = function getUnderlayColor(theme, themeVariant) {
+  switch (themeVariant) {
+    case 'filled-primary':
+      return theme.__hd__.button.colors.pressedBackground.filledPrimary;
+    case 'filled-secondary':
+      return theme.__hd__.button.colors.pressedBackground.filledSecondary;
+    case 'filled-danger':
+      return theme.__hd__.button.colors.pressedBackground.filledDanger;
+    case 'outlined-primary':
+      return theme.__hd__.button.colors.pressedBackground.outlinedPrimary;
+    case 'outlined-secondary':
+      return theme.__hd__.button.colors.pressedBackground.outlinedSecondary;
+    case 'outlined-danger':
+      return theme.__hd__.button.colors.pressedBackground.outlineDanger;
+    case 'text-primary':
+      return theme.__hd__.button.colors.pressedBackground.textPrimary;
+    case 'text-secondary':
+      return theme.__hd__.button.colors.pressedBackground.textSecondary;
+    case 'text-danger':
+      return theme.__hd__.button.colors.pressedBackground.textDanger;
+  }
+};
+var deprecatedVariants = ['filled-secondary', 'filled-danger', 'outlined-secondary', 'outlined-danger'];
 var Button = function Button(_ref) {
   var accessibilityHint = _ref.accessibilityHint,
     accessibilityLabel = _ref.accessibilityLabel,
@@ -7652,14 +7698,21 @@ var Button = function Button(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
   var themeVariant = getThemeVariant(variant, intent);
+  var theme = useTheme();
+  var underlayColor = useMemo(function () {
+    return getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant]);
+  useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
   return /*#__PURE__*/React.createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
     disabled: disabled || loading,
+    loading: loading,
     onPress: onPress,
     testID: testID,
     themeVariant: themeVariant,
-    style: style
+    style: style,
+    underlayColor: underlayColor
   }, loading === true ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     testID: "".concat(testID, "-loading-indicator"),
     themeVariant: themeVariant
@@ -12278,11 +12331,12 @@ var FAB = function FAB(_ref3) {
     active = _ref3.active,
     style = _ref3.style;
   var isIconOnly = !title;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(StyledFABContainer, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     testID: testID,
     style: style,
-    onPress: onPress,
-    activeOpacity: 0.6
+    onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React.createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -12293,7 +12347,7 @@ var FAB = function FAB(_ref3) {
   }));
 };
 
-var StyledActionItem = index$a(TouchableOpacity)(function (_ref) {
+var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
@@ -12333,13 +12387,15 @@ var ActionItem = function ActionItem(_ref) {
     onPress = _ref.onPress,
     style = _ref.style,
     testID = _ref.testID;
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(StyledActionItem, {
+    underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledIcon, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIcon, {
     icon: icon
-  }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title));
+  }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
 };
 
 var StyledContainer$1 = index$a(View)({

package/lib/index.js

@@ -998,7 +998,7 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$3 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$2 = colorScales.violet,
+  violet$1 = colorScales.violet,
   yellow$1 = colorScales.yellow;
 ({
   black: '#000000',
@@ -1071,16 +1071,16 @@ var blue$1 = colorScales.blue,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$2.base,
-  violetDark15: violet$2.darken15,
-  violetDark30: violet$2.darken30,
-  violetDark45: violet$2.darken45,
-  violetDark60: violet$2.darken60,
-  violetDark75: violet$2.darken75,
-  violetLight30: violet$2.lighten30,
-  violetLight60: violet$2.lighten60,
-  violetLight75: violet$2.lighten75,
-  violetLight90: violet$2.lighten90,
+  violet: violet$1.base,
+  violetDark15: violet$1.darken15,
+  violetDark30: violet$1.darken30,
+  violetDark45: violet$1.darken45,
+  violetDark60: violet$1.darken60,
+  violetDark75: violet$1.darken75,
+  violetLight30: violet$1.lighten30,
+  violetLight60: violet$1.lighten60,
+  violetLight75: violet$1.lighten75,
+  violetLight90: violet$1.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
@@ -1220,8 +1220,8 @@ var currant$1 = colorScales.currant,
   pastelRed = colorScales.pastelRed,
   vermilion = colorScales.vermilion,
   mauve$3 = colorScales.mauve,
-  violet1$2 = colorScales.violet1,
-  violet$1 = colorScales.violet,
+  violet1$3 = colorScales.violet1,
+  violet$2 = colorScales.violet,
   scarletGum$2 = colorScales.scarletGum;
 var palette$6 = {
   currant: currant$1.base,
@@ -1240,18 +1240,18 @@ var palette$6 = {
   pastelRed: pastelRed.base,
   vermilion: vermilion.base,
   mauve: mauve$3.base,
-  violetLight30: violet$1.lighten30,
-  violet1: violet1$2.base,
-  violet: violet$1.base,
+  violetLight30: violet$2.lighten30,
+  violet1: violet1$3.base,
+  violet: violet$2.base,
   scarletGum: scarletGum$2.base
 };
-var violet$3 = colorScales.violet,
+var violet1$2 = colorScales.violet1,
   mauve$2 = colorScales.mauve;
 var palette$5 = Object.assign(Object.assign({}, palette$8), {
-  violet: violet$3.base,
-  violetLight20: violet$3.lighten20,
-  violetLight30: violet$3.lighten30,
-  violetLight90: violet$3.lighten90,
+  violet: violet1$2.base,
+  violetLight20: violet1$2.lighten20,
+  violetLight30: violet1$2.lighten30,
+  violetLight90: violet1$2.lighten90,
   mauve: mauve$2.base,
   mauveLight80: mauve$2.lighten80
 });
@@ -1619,7 +1619,8 @@ var getRadii = function getRadii(baseRadius) {
     large: baseRadius * 3,
     xlarge: baseRadius * 4,
     xxlarge: baseRadius * 5,
-    xxxlarge: baseRadius * 6 // 24
+    xxxlarge: baseRadius * 6,
+    '5xlarge': baseRadius * 8 // 32
   };
 };
 
@@ -1882,6 +1883,7 @@ var getButtonTheme = function getButtonTheme(theme) {
   };
   var space = {
     buttonPadding: theme.space.medium,
+    textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
     utilityPadding: theme.space.small
   };
@@ -1889,8 +1891,9 @@ var getButtonTheme = function getButtonTheme(theme) {
     iconSize: theme.fontSizes.xxlarge
   };
   var radii = {
-    "default": theme.space.xlarge,
-    utilityRadii: theme.space.small
+    "default": theme.radii['5xlarge'],
+    utilityRadii: theme.radii.medium,
+    text: theme.radii.base
   };
   var colors = {
     primary: theme.colors.primary,
@@ -1901,7 +1904,19 @@ var getButtonTheme = function getButtonTheme(theme) {
     disabledBorder: theme.colors.disabledOnDefaultGlobalSurface,
     disabledBackground: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    utilityBackground: theme.colors.neutralGlobalSurface
+    utilityBackground: theme.colors.neutralGlobalSurface,
+    textLoadingBackground: theme.colors.highlightedSurface,
+    pressedBackground: {
+      filledPrimary: theme.colors.pressedSurface,
+      filledSecondary: theme.colors.pressedSurface,
+      filledDanger: theme.colors.errorSurface,
+      outlinedPrimary: theme.colors.highlightedSurface,
+      outlinedSecondary: theme.colors.highlightedSurface,
+      outlineDanger: theme.colors.errorSurface,
+      textPrimary: theme.colors.highlightedSurface,
+      textSecondary: theme.colors.highlightedSurface,
+      textDanger: theme.colors.errorSurface
+    }
   };
   return {
     borderWidth: borderWidth,
@@ -2166,9 +2181,11 @@ var getEmptyTheme = function getEmptyTheme(theme) {
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
     buttonBackground: theme.colors.primary,
+    buttonPressedBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.primary,
+    actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary
@@ -2881,6 +2898,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     archived: theme.colors.onArchivedSurface
   };
   var fontSizes = {
+    xsmall: theme.fontSizes.xsmall,
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
@@ -2892,6 +2910,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
+    xsmall: theme.lineHeights.xsmall,
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,
@@ -7372,8 +7391,8 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
           backgroundColor: theme.__hd__.button.colors.invertedText
         };
       case 'outlined-primary':
-      case 'text-primary':
         return genLoadingIndicatorStyles(theme, 'primary');
+      case 'text-primary':
       case 'outlined-secondary':
       case 'text-secondary':
         return genLoadingIndicatorStyles(theme, 'secondary');
@@ -7455,9 +7474,9 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
   }, nativeProps), Array.from(new Array(count), renderLoadingDot, themeVariant));
 };
 
-var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled) {
+var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading) {
   var backgroundColorStyling = function backgroundColorStyling() {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         backgroundColor: theme.__hd__.button.colors.disabledBorder
       };
@@ -7475,9 +7494,9 @@ var genFilledContainerStyles = function genFilledContainerStyles(theme, intent,
     borderRadius: theme.__hd__.button.radii["default"]
   }, backgroundColorStyling());
 };
-var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled) {
+var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading) {
   var borderColorStyling = function borderColorStyling() {
-    if (disabled) {
+    if (!loading && disabled) {
       return {
         borderColor: theme.__hd__.button.colors.disabledBorder
       };
@@ -7529,33 +7548,37 @@ var genTextVariantTextStyles = function genTextVariantTextStyles(theme, intent,
     lineHeight: theme.__hd__.button.lineHeight["default"]
   }, textColorStyling());
 };
-var StyledButtonContainer = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledButtonContainer = index$a(reactNative.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,
     theme = _ref.theme;
   switch (themeVariant) {
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled);
+      return genFilledContainerStyles(theme, 'primary', disabled, loading);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled);
+      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled);
+      return genFilledContainerStyles(theme, 'danger', disabled, loading);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled);
+      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled);
+      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled);
+      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
       return {
+        borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: theme.__hd__.button.space.buttonPadding,
-        borderWidth: 0
+        padding: theme.__hd__.button.space.textButtonPadding,
+        borderWidth: 0,
+        backgroundColor: loading ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
   }
 });
@@ -7663,6 +7686,29 @@ var getThemeVariant = function getThemeVariant(variant, intent) {
       return TEXT_VARIANTS[intent];
   }
 };
+var getUnderlayColor = function getUnderlayColor(theme, themeVariant) {
+  switch (themeVariant) {
+    case 'filled-primary':
+      return theme.__hd__.button.colors.pressedBackground.filledPrimary;
+    case 'filled-secondary':
+      return theme.__hd__.button.colors.pressedBackground.filledSecondary;
+    case 'filled-danger':
+      return theme.__hd__.button.colors.pressedBackground.filledDanger;
+    case 'outlined-primary':
+      return theme.__hd__.button.colors.pressedBackground.outlinedPrimary;
+    case 'outlined-secondary':
+      return theme.__hd__.button.colors.pressedBackground.outlinedSecondary;
+    case 'outlined-danger':
+      return theme.__hd__.button.colors.pressedBackground.outlineDanger;
+    case 'text-primary':
+      return theme.__hd__.button.colors.pressedBackground.textPrimary;
+    case 'text-secondary':
+      return theme.__hd__.button.colors.pressedBackground.textSecondary;
+    case 'text-danger':
+      return theme.__hd__.button.colors.pressedBackground.textDanger;
+  }
+};
+var deprecatedVariants = ['filled-secondary', 'filled-danger', 'outlined-secondary', 'outlined-danger'];
 var Button = function Button(_ref) {
   var accessibilityHint = _ref.accessibilityHint,
     accessibilityLabel = _ref.accessibilityLabel,
@@ -7681,14 +7727,21 @@ var Button = function Button(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
   var themeVariant = getThemeVariant(variant, intent);
+  var theme = useTheme();
+  var underlayColor = React.useMemo(function () {
+    return getUnderlayColor(theme, themeVariant);
+  }, [theme, themeVariant]);
+  useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
   return /*#__PURE__*/React__default["default"].createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
     disabled: disabled || loading,
+    loading: loading,
     onPress: onPress,
     testID: testID,
     themeVariant: themeVariant,
-    style: style
+    style: style,
+    underlayColor: underlayColor
   }, loading === true ? /*#__PURE__*/React__default["default"].createElement(LoadingIndicator, {
     testID: "".concat(testID, "-loading-indicator"),
     themeVariant: themeVariant
@@ -12307,11 +12360,12 @@ var FAB = function FAB(_ref3) {
     active = _ref3.active,
     style = _ref3.style;
   var isIconOnly = !title;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     testID: testID,
     style: style,
-    onPress: onPress,
-    activeOpacity: 0.6
+    onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -12322,7 +12376,7 @@ var FAB = function FAB(_ref3) {
   }));
 };
 
-var StyledActionItem = index$a(reactNative.TouchableOpacity)(function (_ref) {
+var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
@@ -12362,13 +12416,15 @@ var ActionItem = function ActionItem(_ref) {
     onPress = _ref.onPress,
     style = _ref.style,
     testID = _ref.testID;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledActionItem, {
+    underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
+  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
     icon: icon
-  }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title));
+  }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title)));
 };
 
 var StyledContainer$1 = index$a(reactNative.View)({