@hero-design/rn 7.1.2 → 7.1.3-alpha3

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 } from 'react-native';
+import require$$0$1, { 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) {
@@ -9898,6 +9898,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,13 +9915,11 @@ 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,
+  xxxlarge: fontSizes.xxxlarge + 8,
+  xxlarge: fontSizes.xxlarge + 8,
   xlarge: fontSizes.xlarge + 8,
   large: fontSizes.large + 8,
   medium: fontSizes.medium + 8,
@@ -9931,8 +9934,8 @@ var borderWidths = {
 var globalTheme = {
   colors: _objectSpread2({}, systemPalette),
   space: space,
+  fonts: fonts,
   fontSizes: fontSizes,
-  fontWeights: fontWeights,
   lineHeights: lineHeights,
   borderWidths: borderWidths
 };
@@ -9954,12 +9957,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"
   };
@@ -9967,8 +9970,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     borderWidths: borderWidths,
     colors: colors,
     padding: padding,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     radii: radii
   };
 };
@@ -10056,17 +10059,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"),
@@ -10075,8 +10078,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
   return {
     colors: colors,
+    fonts: fonts,
     fontSizes: fontSizes,
-    fontWeights: fontWeights,
     lineHeights: lineHeights
   };
 };
@@ -10084,19 +10087,50 @@ var getTypographyTheme = function getTypographyTheme(theme) {
 var getFABTheme = function getFABTheme(theme) {
   var colors = {
     buttonBackground: theme.colors.backgroundDark,
-    icon: theme.colors.invertedText
+    icon: theme.colors.invertedText,
+    headerText: theme.colors.text,
+    actionItemBackground: theme.colors.infoLight,
+    backdropBackground: theme.colors.platformBackground
   };
   var sizes = {
     width: '64px',
     height: '64px'
   };
+  var fonts = {
+    header: theme.fonts.semiBold,
+    actionItemText: theme.fonts.regular
+  };
   var fontSizes = {
-    "default": "".concat(theme.fontSizes.xxxxlarge, "px")
+    header: "".concat(theme.fontSizes.xxxlarge, "px"),
+    buttonIcon: "".concat(theme.fontSizes.xxxlarge, "px"),
+    actionItemText: "".concat(theme.fontSizes.medium, "px")
+  };
+  var lineHeights = {
+    header: "".concat(theme.lineHeights.xxxlarge, "px"),
+    actionItemText: "".concat(theme.lineHeights.medium, "px")
+  };
+  var space = {
+    actionItemPaddingLeft: "".concat(theme.space.medium, "px"),
+    actionItemPaddingRight: "".concat(theme.space.medium, "px"),
+    actionItemPaddingTop: "".concat(theme.space.small, "px"),
+    actionItemPaddingBottom: "".concat(theme.space.small, "px"),
+    actionItemMargin: "".concat(theme.space.small, "px"),
+    actionItemMarginRight: "".concat(theme.space.large, "px"),
+    actionItemTextPaddingLeft: "".concat(theme.space.small, "px"),
+    headerTextMarginRight: "".concat(theme.space.large, "px"),
+    headerTextMarginBottom: "".concat(theme.space.large, "px")
+  };
+  var radii = {
+    actionItem: "999px"
   };
   return {
+    radii: radii,
+    fonts: fonts,
     fontSizes: fontSizes,
     colors: colors,
-    sizes: sizes
+    sizes: sizes,
+    lineHeights: lineHeights,
+    space: space
   };
 };
 
@@ -10117,14 +10151,14 @@ var getTheme = function getTheme() {
 
 var theme = getTheme();
 
-var _templateObject$7, _templateObject2$4, _templateObject3$3, _templateObject4$3;
+var _templateObject$9, _templateObject2$6, _templateObject3$4, _templateObject4$4;
 var BACKGROUND_INTENTS = {
   success: 'successBackground',
   warning: 'warningBackground',
   danger: 'dangerBackground',
   info: 'infoBackground'
 };
-var StyledView = styled(View)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
+var StyledView = styled(View)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.badge.borderWidths["default"];
 }, function (_ref2) {
@@ -10135,7 +10169,7 @@ var StyledView = styled(View)(_templateObject$7 || (_templateObject$7 = _taggedT
   return theme.__hd__.badge.padding["default"];
 }, function (_ref4) {
   var themeIntent = _ref4.themeIntent;
-  return css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n    border-color: ", ";\n    background-color: ", ";\n  "])), function (_ref5) {
+  return css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n    border-color: ", ";\n    background-color: ", ";\n  "])), function (_ref5) {
     var theme = _ref5.theme;
     return theme.__hd__.badge.colors[themeIntent];
   }, function (_ref6) {
@@ -10143,15 +10177,15 @@ var StyledView = styled(View)(_templateObject$7 || (_templateObject$7 = _taggedT
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(Text$1)(_templateObject3$3 || (_templateObject3$3 = _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"];
 }, function (_ref9) {
   var themeIntent = _ref9.themeIntent;
-  return css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (_ref10) {
+  return css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (_ref10) {
     var theme = _ref10.theme;
     return theme.__hd__.badge.colors[themeIntent];
   });
@@ -19804,12 +19838,12 @@ var heroIconConfig = {
 	preferences: preferences
 };
 
-var _templateObject$6, _templateObject2$3;
+var _templateObject$8, _templateObject2$5;
 var HeroIcon = dist.createIconSetFromIcoMoon(heroIconConfig, 'hero-icons', 'hero-icons.ttf');
-var StyledHeroIcon = styled(HeroIcon)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+var StyledHeroIcon = styled(HeroIcon)(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
   var themeIntent = _ref.themeIntent,
       themeSize = _ref.themeSize;
-  return css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", "px;\n  "])), function (_ref2) {
+  return css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", "px;\n  "])), function (_ref2) {
     var theme = _ref2.theme;
     return theme.__hd__.icon.colors[themeIntent];
   }, function (_ref3) {
@@ -19841,23 +19875,23 @@ var isHeroIcon = function isHeroIcon(x) {
   return IconList.includes(x);
 };
 
-var _templateObject$5, _templateObject2$2, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1;
-var StyledText = styled(Text$1)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$7, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+var StyledText = styled(Text$1)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var themeFontSize = _ref.themeFontSize,
       theme = _ref.theme;
 
   switch (themeFontSize) {
     case 'small':
-      return css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          line-height: ", ";\n          letter-spacing: ", "px;\n        "])), theme.__hd__.typography.fontSizes.small, theme.__hd__.typography.lineHeights.small, theme.__hd__.typography.fontSizes.small * 0.03);
+      return css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          line-height: ", ";\n          letter-spacing: ", "px;\n        "])), theme.__hd__.typography.fontSizes.small, theme.__hd__.typography.lineHeights.small, theme.__hd__.typography.fontSizes.small * 0.03);
 
     case 'medium':
-      return css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          line-height: ", ";\n          letter-spacing: ", "px;\n        "])), theme.__hd__.typography.fontSizes.medium, theme.__hd__.typography.lineHeights.medium, theme.__hd__.typography.fontSizes.medium * 0.03);
+      return css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          line-height: ", ";\n          letter-spacing: ", "px;\n        "])), theme.__hd__.typography.fontSizes.medium, theme.__hd__.typography.lineHeights.medium, theme.__hd__.typography.fontSizes.medium * 0.03);
 
     case 'large':
-      return css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          line-height: ", ";\n          letter-spacing: ", "px;\n        "])), theme.__hd__.typography.fontSizes.large, theme.__hd__.typography.lineHeights.large, theme.__hd__.typography.fontSizes.large * 0.03);
+      return css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          line-height: ", ";\n          letter-spacing: ", "px;\n        "])), theme.__hd__.typography.fontSizes.large, theme.__hd__.typography.lineHeights.large, theme.__hd__.typography.fontSizes.large * 0.03);
 
     case 'xlarge':
-      return css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          line-height: ", ";\n          letter-spacing: ", "px;\n        "])), theme.__hd__.typography.fontSizes.xlarge, theme.__hd__.typography.lineHeights.xlarge, theme.__hd__.typography.fontSizes.xlarge * 0.03);
+      return css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n          font-size: ", "px;\n          line-height: ", ";\n          letter-spacing: ", "px;\n        "])), theme.__hd__.typography.fontSizes.xlarge, theme.__hd__.typography.lineHeights.xlarge, theme.__hd__.typography.fontSizes.xlarge * 0.03);
   }
 }, function (_ref2) {
   var themeFontWeight = _ref2.themeFontWeight,
@@ -19865,13 +19899,13 @@ var StyledText = styled(Text$1)(_templateObject$5 || (_templateObject$5 = _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,
@@ -19912,14 +19946,14 @@ var Typography = {
   Text: Text
 };
 
-var _templateObject$4, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1;
-var BottomNavigationTab = styled(View)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: ", ";\n"])), function (_ref) {
+var _templateObject$6, _templateObject2$3, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$1;
+var BottomNavigationTab = styled(View)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: ", ";\n"])), function (_ref) {
   var themeVisibility = _ref.themeVisibility;
   return themeVisibility === false ? 'none' : 'flex';
 });
-var BottomNavigationContainer = styled(View)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow: hidden;\n"])));
-var ContentWrapper = styled(View)(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
-var BottomBarWrapper = styled(View)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  height: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  background-color: ", ";\n  shadow-color: ", ";\n  shadow-offset: ", ";\n  shadow-opacity: ", ";\n  shadow-radius: ", ";\n  elevation: ", ";\n"])), function (_ref2) {
+var BottomNavigationContainer = styled(View)(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow: hidden;\n"])));
+var ContentWrapper = styled(View)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
+var BottomBarWrapper = styled(View)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  height: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  background-color: ", ";\n  shadow-color: ", ";\n  shadow-offset: ", ";\n  shadow-opacity: ", ";\n  shadow-radius: ", ";\n  elevation: ", ";\n"])), function (_ref2) {
   var theme = _ref2.theme,
       themeInsets = _ref2.themeInsets;
   return theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom;
@@ -19951,7 +19985,7 @@ var BottomBarWrapper = styled(View)(_templateObject4$1 || (_templateObject4$1 =
   var theme = _ref11.theme;
   return theme.__hd__.bottomNavigation.shadows.elevation;
 });
-var BottomBar = styled(View)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: row;\n  overflow: hidden;\n  align-items: center;\n"])));
+var BottomBar = styled(View)(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: row;\n  overflow: hidden;\n  align-items: center;\n"])));
 var BottomBarItem = styled(View)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  align-items: center;\n"])));
 
 var isIOS = Platform.OS === 'ios';
@@ -20049,8 +20083,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
-var _templateObject$3;
-var StyledCard = styled(View)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n  overflow: hidden;\n"])), function (_ref) {
+var _templateObject$5;
+var StyledCard = styled(View)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.card.radii["default"];
 }, function (_ref2) {
@@ -20062,8 +20096,8 @@ var Card = function Card(props) {
   return /*#__PURE__*/React.createElement(StyledCard, props);
 };
 
-var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-var StyledDivider = styled(View)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var _templateObject$4, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var StyledDivider = styled(View)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  border-bottom-width: ", ";\n  border-bottom-color: ", ";\n  max-width: 100%;\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.divider.borderWidths["default"];
 }, function (_ref2) {
@@ -20075,16 +20109,16 @@ var StyledDivider = styled(View)(_templateObject$2 || (_templateObject$2 = _tagg
 
   switch (themeMarginHorizontal) {
     case undefined:
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+      return css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral([""])));
 
     case 'xsmall':
-      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
+      return css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
 
     case 'small':
-      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.small);
+      return css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.small);
 
     case 'medium':
-      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.medium);
+      return css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.medium);
 
     case 'large':
       return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.large);
@@ -20134,13 +20168,13 @@ var Divider = function Divider(_ref) {
   }, nativeProps));
 };
 
-var _templateObject$1;
-var StyledFABIcon = styled(Icon)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n"])), function (_ref) {
+var _templateObject$3;
+var StyledFABIcon = styled(Icon)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.fab.colors.icon;
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.__hd__.fab.fontSizes["default"];
+  return theme.__hd__.fab.fontSizes.buttonIcon;
 });
 
 var _excluded = ["active"];
@@ -20174,8 +20208,8 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   }, /*#__PURE__*/React.createElement(AnimatedIcons, iconProps));
 };
 
-var _templateObject;
-var StyledFABContainer = styled(TouchableHighlight)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (_ref) {
+var _templateObject$2;
+var StyledFABContainer = styled(TouchableHighlight)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.fab.sizes.height;
 }, function (_ref2) {
@@ -20187,7 +20221,7 @@ var StyledFABContainer = styled(TouchableHighlight)(_templateObject || (_templat
 });
 
 var FAB = function FAB(_ref) {
-  var _onPress = _ref.onPress,
+  var onPress = _ref.onPress,
       icon = _ref.icon,
       animated = _ref.animated,
       testID = _ref.testID,
@@ -20195,19 +20229,172 @@ var FAB = function FAB(_ref) {
       style = _ref.style;
   return /*#__PURE__*/React.createElement(StyledFABContainer, {
     testID: testID,
-    onPress: function onPress() {
-      _onPress === null || _onPress === void 0 ? void 0 : _onPress();
-    },
+    onPress: onPress,
     activeOpacity: 0.6,
     style: style
   }, animated ? /*#__PURE__*/React.createElement(AnimatedFABIcon, {
     active: active,
     icon: icon,
-    testID: "animatedFABIcon"
+    testID: "animated-fab-icon"
   }) : /*#__PURE__*/React.createElement(StyledFABIcon, {
     icon: icon,
-    testID: "styledFABIcon"
+    testID: "styled-fab-icon"
   }));
 };
 
-export { Badge, BottomNavigation, Card, Divider, FAB, Icon, ThemeProvider, Typography, getTheme, scale, theme, useTheme };
+var _templateObject$1, _templateObject2$1;
+var StyledActionItem = styled(TouchableOpacity)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  margin: ", ";\n  margin-right: ", ";\n  background: ", ";\n  border-radius: ", ";\n  flex-direction: row;\n  align-items: center;\n  align-self: flex-end;\n  overflow: hidden;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.fab.space.actionItemPaddingLeft;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.fab.space.actionItemPaddingRight;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.__hd__.fab.space.actionItemPaddingTop;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.__hd__.fab.space.actionItemPaddingBottom;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.__hd__.fab.space.actionItemMargin;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.__hd__.fab.space.actionItemMarginRight;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.__hd__.fab.colors.actionItemBackground;
+}, function (_ref8) {
+  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-family: ", ";\n"])), function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.__hd__.fab.space.actionItemTextPaddingLeft;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.__hd__.fab.fontSizes.actionItemText;
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.__hd__.fab.lineHeights.actionItemText;
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.__hd__.fab.fonts.actionItemText;
+});
+
+var ActionItem = function ActionItem(_ref) {
+  var icon = _ref.icon,
+      title = _ref.title,
+      onPress = _ref.onPress,
+      style = _ref.style,
+      testID = _ref.testID;
+  return /*#__PURE__*/React.createElement(StyledActionItem, {
+    style: style,
+    onPress: onPress,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
+};
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var StyledContainer = styled(View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n"])));
+var StyledActionGroupContainer = styled(Animated.View)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: flex-end;\n  justify-content: flex-end;\n  width: 70%;\n"])));
+var StyledFAB = styled(FAB)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  align-self: flex-end;\n  margin-top: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.space.large;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.space.large;
+});
+var StyledBackdrop = styled(Animated.View)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background: ", ";\n"])), function (_ref3) {
+  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-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) {
+  var theme = _ref5.theme;
+  return theme.__hd__.fab.lineHeights.header;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.__hd__.fab.fonts.header;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.__hd__.fab.space.headerTextMarginRight;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.__hd__.fab.space.headerTextMarginBottom;
+});
+
+var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
+  var style = _ref.style,
+      items = _ref.items;
+  return /*#__PURE__*/React.createElement(View, {
+    style: style
+  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
+    return /*#__PURE__*/React.createElement(ActionItem, _extends$1({
+      key: itemProp.icon
+    }, itemProp));
+  }));
+};
+
+var ActionGroup = function ActionGroup(_ref2) {
+  var headerTitle = _ref2.headerTitle,
+      onPress = _ref2.onPress,
+      active = _ref2.active,
+      style = _ref2.style,
+      items = _ref2.items,
+      testID = _ref2.testID;
+  var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
+  useEffect(function () {
+    var animation = Animated.timing(tranlateXAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true
+    });
+    animation.start();
+  }, [active]);
+  var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [400, 0]
+  });
+  var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.9]
+  });
+  return /*#__PURE__*/React.createElement(StyledContainer, {
+    testID: testID,
+    pointerEvents: "box-none",
+    style: style
+  }, /*#__PURE__*/React.createElement(StyledBackdrop, {
+    pointerEvents: active ? 'auto' : 'box-none',
+    testID: "back-drop",
+    style: {
+      opacity: interpolatedOpacityAnimation
+    }
+  }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
+    testID: "action-group",
+    style: {
+      transform: [{
+        translateX: interpolatedTranlateXAnimation
+      }]
+    }
+  }, headerTitle && /*#__PURE__*/React.createElement(StyledHeaderText, {
+    testID: "header-text"
+  }, headerTitle), /*#__PURE__*/React.createElement(ActionItemsListComponent, {
+    items: items
+  })), /*#__PURE__*/React.createElement(StyledFAB, {
+    testID: "fab",
+    icon: "add",
+    onPress: onPress,
+    animated: true,
+    active: active
+  }));
+};
+
+var index = Object.assign(FAB, {
+  ActionGroup: ActionGroup
+});
+
+export { Badge, BottomNavigation, Card, Divider, index as FAB, Icon, ThemeProvider, Typography, getTheme, scale, theme, useTheme };