@hero-design/rn 7.1.2 → 7.1.3-alpha

package/lib/index.js

@@ -9926,6 +9926,10 @@ var fontWeights = {
   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,
@@ -10093,19 +10097,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 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 fontWeights = {
+    header: "".concat(theme.fontWeights.semiBold),
+    actionItemText: "".concat(theme.fontWeights.regular)
+  };
+  var lineHeights = {
+    header: "".concat(theme.lineHeights.xxxlarge, "px"),
+    actionItemText: "".concat(theme.lineHeights.medium, "px")
+  };
+  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,
     fontSizes: fontSizes,
     colors: colors,
-    sizes: sizes
+    sizes: sizes,
+    lineHeights: lineHeights,
+    fontWeights: fontWeights,
+    space: space
   };
 };
 
@@ -10126,14 +10161,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(require$$0$1.View)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
+var StyledView = styled(require$$0$1.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) {
@@ -10144,7 +10179,7 @@ var StyledView = styled(require$$0$1.View)(_templateObject$7 || (_templateObject
   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) {
@@ -10152,7 +10187,7 @@ var StyledView = styled(require$$0$1.View)(_templateObject$7 || (_templateObject
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.__hd__.badge.fontWeights["default"];
 }, function (_ref8) {
@@ -10160,7 +10195,7 @@ var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$3 || (_templateObj
   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];
   });
@@ -19813,12 +19848,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) {
@@ -19850,23 +19885,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(require$$0$1.Text)(_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(require$$0$1.Text)(_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,
@@ -19921,14 +19956,14 @@ var Typography = {
   Text: Text
 };
 
-var _templateObject$4, _templateObject2$1, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1;
-var BottomNavigationTab = styled(require$$0$1.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(require$$0$1.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(require$$0$1.View)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow: hidden;\n"])));
-var ContentWrapper = styled(require$$0$1.View)(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
-var BottomBarWrapper = styled(require$$0$1.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(require$$0$1.View)(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow: hidden;\n"])));
+var ContentWrapper = styled(require$$0$1.View)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
+var BottomBarWrapper = styled(require$$0$1.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;
@@ -19960,7 +19995,7 @@ var BottomBarWrapper = styled(require$$0$1.View)(_templateObject4$1 || (_templat
   var theme = _ref11.theme;
   return theme.__hd__.bottomNavigation.shadows.elevation;
 });
-var BottomBar = styled(require$$0$1.View)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: row;\n  overflow: hidden;\n  align-items: center;\n"])));
+var BottomBar = styled(require$$0$1.View)(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: row;\n  overflow: hidden;\n  align-items: center;\n"])));
 var BottomBarItem = styled(require$$0$1.View)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  align-items: center;\n"])));
 
 var isIOS = require$$0$1.Platform.OS === 'ios';
@@ -20058,8 +20093,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
-var _templateObject$3;
-var StyledCard = styled(require$$0$1.View)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n  overflow: hidden;\n"])), function (_ref) {
+var _templateObject$5;
+var StyledCard = styled(require$$0$1.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) {
@@ -20071,8 +20106,8 @@ var Card = function Card(props) {
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, props);
 };
 
-var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
-var StyledDivider = styled(require$$0$1.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(require$$0$1.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) {
@@ -20084,16 +20119,16 @@ var StyledDivider = styled(require$$0$1.View)(_templateObject$2 || (_templateObj
 
   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);
@@ -20143,13 +20178,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"];
@@ -20183,8 +20218,8 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, iconProps));
 };
 
-var _templateObject;
-var StyledFABContainer = styled(require$$0$1.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(require$$0$1.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) {
@@ -20196,7 +20231,7 @@ var StyledFABContainer = styled(require$$0$1.TouchableHighlight)(_templateObject
 });
 
 var FAB = function FAB(_ref) {
-  var _onPress = _ref.onPress,
+  var onPress = _ref.onPress,
       icon = _ref.icon,
       animated = _ref.animated,
       testID = _ref.testID,
@@ -20204,26 +20239,179 @@ var FAB = function FAB(_ref) {
       style = _ref.style;
   return /*#__PURE__*/React__default["default"].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__default["default"].createElement(AnimatedFABIcon, {
     active: active,
     icon: icon,
-    testID: "animatedFABIcon"
+    testID: "animated-fab-icon"
   }) : /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
     icon: icon,
-    testID: "styledFABIcon"
+    testID: "styled-fab-icon"
   }));
 };
 
+var _templateObject$1, _templateObject2$1;
+var StyledActionItem = styled(require$$0$1.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-weight: ", ";\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.fontWeights.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__default["default"].createElement(StyledActionItem, {
+    style: style,
+    onPress: onPress,
+    testID: testID
+  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon
+  }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title)));
+};
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var StyledContainer = styled(require$$0$1.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(require$$0$1.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(require$$0$1.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-weight: ", ";\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.fontWeights.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__default["default"].createElement(require$$0$1.View, {
+    style: style
+  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
+    return /*#__PURE__*/React__default["default"].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 = React.useRef(new require$$0$1.Animated.Value(active ? 1 : 0));
+  React.useEffect(function () {
+    var animation = require$$0$1.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.5]
+  });
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
+    testID: testID,
+    pointerEvents: "box-none",
+    style: style
+  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
+    pointerEvents: active ? 'auto' : 'box-none',
+    testID: "back-drop",
+    style: {
+      opacity: interpolatedOpacityAnimation
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
+    testID: "action-group",
+    style: {
+      transform: [{
+        translateX: interpolatedTranlateXAnimation
+      }]
+    }
+  }, headerTitle && /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
+    testID: "header-text"
+  }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
+    items: items
+  })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+    testID: "fab",
+    icon: "add",
+    onPress: onPress,
+    animated: true,
+    active: active
+  }));
+};
+
+var index = Object.assign(FAB, {
+  ActionGroup: ActionGroup
+});
+
 exports.Badge = Badge;
 exports.BottomNavigation = BottomNavigation;
 exports.Card = Card;
 exports.Divider = Divider;
-exports.FAB = FAB;
+exports.FAB = index;
 exports.Icon = Icon;
 exports.ThemeProvider = ThemeProvider;
 exports.Typography = Typography;

package/package.json

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

package/playground/components/Card.tsx

@@ -16,7 +16,7 @@ type DashboardCardProps = ViewProps & {
 };
 type PendingItemProps = {
   count: number;
-  label: string;
+  title: string;
   onPress?: () => void;
   wrapperTestID?: string;
   countTestID?: string;
@@ -24,17 +24,14 @@ type PendingItemProps = {
 
 const PendingItem = ({
   count,
-  label,
+  title,
   onPress,
   wrapperTestID,
   countTestID,
 }: Omit<PendingItemProps, 'isLoading'>) => (
   <TouchableOpacity
     onPress={onPress}
-    style={{
-      paddingHorizontal: theme.space.small,
-      flex: 1,
-    }}
+    style={{ flex: 1, padding: theme.space.small }}
     testID={wrapperTestID}
   >
     <Typography.Text
@@ -43,27 +40,23 @@ const PendingItem = ({
       style={{
         textAlign: 'center',
         paddingBottom: theme.space.small,
-        color: palette.redLight30,
+        color: palette.redLight15,
       }}
       testID={countTestID}
     >
       {count}
     </Typography.Text>
-    <Typography.Text
-      style={{ textAlign: 'center', color: palette.greyDark75 }}
-      fontSize="large"
-    >
-      {label}
+    <Typography.Text style={{ textAlign: 'center', color: palette.greyDark75 }}>
+      {title}
     </Typography.Text>
   </TouchableOpacity>
 );
 
-const ApprovalsCardLayout = ({ style }: ViewProps) => (
+const ApprovalCard = ({ style }: ViewProps) => (
   <Card
     style={StyleSheet.flatten([
       {
         backgroundColor: palette.greyLight90,
-        marginBottom: theme.space.medium,
         paddingTop: 0,
         paddingRight: 0,
         paddingBottom: 0,
@@ -78,28 +71,17 @@ const ApprovalsCardLayout = ({ style }: ViewProps) => (
         display: 'flex',
         flexDirection: 'row',
         padding: theme.space.medium,
-        marginBottom: theme.space.medium,
       }}
     >
-      <Icon
-        icon="multiple-users"
-        style={{
-          marginRight: theme.space.small,
-        }}
-      />
-      <Typography.Text fontWeight="semi-bold" fontSize="xlarge">
-        Approval card
+      <Icon icon="multiple-users" style={{ marginRight: theme.space.small }} />
+      <Typography.Text fontWeight="semi-bold" fontSize="large">
+        Awaiting your approval
       </Typography.Text>
     </View>
-    <View
-      style={{
-        flex: 1,
-        flexDirection: 'row',
-      }}
-    >
-      <PendingItem count={1} label="Timesheets" />
-      <PendingItem count={2} label="Leave Requests" />
-      <PendingItem count={7} label="Expense Claims" />
+    <View style={{ flex: 1, flexDirection: 'row', padding: theme.space.small }}>
+      <PendingItem count={1} title="Timesheets" />
+      <PendingItem count={2} title="Leave Requests" />
+      <PendingItem count={7} title="Expense Claims" />
     </View>
   </Card>
 );
@@ -293,7 +275,7 @@ const CardPlayground = () => (
     </View>
     <RostersCard style={{ marginTop: theme.space.medium }} />
     <MyLeaveCard style={{ marginTop: theme.space.medium }} />
-    <ApprovalsCardLayout style={{ marginTop: theme.space.medium }} />
+    <ApprovalCard style={{ marginTop: theme.space.medium }} />
   </ScrollView>
 );
 

package/playground/components/FAB.tsx

@@ -1,45 +1,47 @@
 import React, { useState } from 'react';
+import { TouchableHighlight } from 'react-native';
 /* eslint-disable import/no-extraneous-dependencies */
-import {
-  SafeAreaProvider,
-  SafeAreaView,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
-import { FAB, useTheme } from '../../src/index';
+import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import { FAB, Typography, useTheme } from '../../src/index';
 
 const FABPlayground = (): JSX.Element => {
   const [active, setActive] = useState(false);
-  const insets = useSafeAreaInsets();
   const theme = useTheme();
-
   return (
     <SafeAreaProvider>
-      <SafeAreaView style={{ flex: 1 }} edges={['right', 'left']}>
-        <FAB
-          icon="add"
+      <SafeAreaView style={{ flex: 1 }}>
+        <TouchableHighlight
           onPress={() => {
-            setActive(!active);
+            alert('touched');
           }}
-          animated
-          active={active}
+        >
+          <Typography.Text
+            style={{
+              backgroundColor: theme.colors.dangerBackground,
+              margin: theme.space.xxxlarge,
+            }}
+            fontSize="xlarge"
+            fontWeight="semi-bold"
+          >
+            Content View should be blured when menu list is shown
+          </Typography.Text>
+        </TouchableHighlight>
+        <FAB.ActionGroup
           style={{
-            position: 'absolute',
-            bottom: Math.max(insets.bottom, theme.space.large),
-            right: theme.space.large,
+            marginBottom: theme.space.large,
           }}
-        />
-
-        <FAB
-          icon="share-1"
+          items={[
+            { icon: 'speaker', title: 'Give shout out' },
+            { icon: 'target', title: 'Goal' },
+            { icon: 'plane', title: 'Leave request' },
+            { icon: 'health-bag', title: 'Safety incident' },
+            { icon: 'clock', title: 'Timesheets' },
+          ]}
+          headerTitle="What would you like to create?"
           onPress={() => {
-            alert('button pressed');
-          }}
-          style={{
-            backgroundColor: theme.colors.primary,
-            position: 'absolute',
-            bottom: Math.max(insets.bottom, theme.space.large),
-            left: theme.space.large,
+            setActive(!active);
           }}
+          active={active}
         />
       </SafeAreaView>
     </SafeAreaProvider>

package/playground/components/Typography.tsx

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