@hero-design/rn 7.1.3-alpha5 → 7.1.3-alpha6

package/lib/index.js

@@ -8140,7 +8140,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$5 = ["inputs"],
+var _excluded$6 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8157,7 +8157,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$5);
+      defaults = _objectWithoutProperties$1(json, _excluded$6);
 
   if (ownInputs) {
     inputs = [];
@@ -9970,12 +9970,6 @@ 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 radii = {
     "default": "4px"
   };
@@ -9983,8 +9977,6 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     borderWidths: borderWidths,
     colors: colors,
     padding: padding,
-    fonts: fonts,
-    fontSizes: fontSizes,
     radii: radii
   };
 };
@@ -10003,10 +9995,14 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     radius: "4.65px",
     elevation: 10
   };
+  var space = {
+    titleMarginTop: "".concat(theme.space.xsmall, "px")
+  };
   return {
     colors: colors,
     shadows: shadows,
-    sizes: sizes
+    sizes: sizes,
+    space: space
   };
 };
 
@@ -10044,6 +10040,24 @@ var getDividerTheme = function getDividerTheme(theme) {
   };
 };
 
+var getTabsTheme = function getTabsTheme(theme) {
+  var colors = {
+    background: theme.colors.primary,
+    active: theme.colors.invertedText,
+    inactive: "".concat(theme.colors.invertedText, "50")
+  };
+  var space = {
+    flatListHorizontalPadding: "".concat(theme.space.small, "px"),
+    titleMarginLeft: "".concat(theme.space.small, "px"),
+    itemHorizontalPadding: "".concat(theme.space.medium, "px"),
+    itemVerticalPadding: "".concat(theme.space.large, "px")
+  };
+  return {
+    colors: colors,
+    space: space
+  };
+};
+
 var getIconTheme = function getIconTheme(theme) {
   var colors = {
     text: theme.colors.text,
@@ -10127,11 +10141,11 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemPaddingRight: "".concat(theme.space.medium, "px"),
     actionItemPaddingTop: "".concat(theme.space.small, "px"),
     actionItemPaddingBottom: "".concat(theme.space.small, "px"),
-    actionItemMargin: "".concat(theme.space.small, "px"),
+    actionItemMargin: "".concat(theme.space.xsmall, "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")
+    headerTextMarginBottom: "".concat(theme.space.medium, "px")
   };
   var radii = {
     actionItem: "999px"
@@ -10156,6 +10170,7 @@ var getTheme = function getTheme() {
       card: getCardTheme(theme),
       divider: getDividerTheme(theme),
       icon: getIconTheme(theme),
+      tabs: getTabsTheme(theme),
       typography: getTypographyTheme(theme),
       fab: getFABTheme(theme)
     }
@@ -10164,6 +10179,77 @@ var getTheme = function getTheme() {
 
 var theme = getTheme();
 
+var _templateObject$a, _templateObject2$7, _templateObject3$5, _templateObject4$5, _templateObject5$4, _templateObject6$3, _templateObject7$3, _templateObject8$2, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+var StyledText$1 = styled(require$$0$1.Text)(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var themeFontSize = _ref.themeFontSize,
+      theme = _ref.theme;
+
+  switch (themeFontSize) {
+    case 'small':
+      return css(_templateObject2$7 || (_templateObject2$7 = _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$5 || (_templateObject3$5 = _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$5 || (_templateObject4$5 = _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$4 || (_templateObject5$4 = _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,
+      theme = _ref2.theme;
+
+  switch (themeFontWeight) {
+    case 'light':
+      return css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.light);
+
+    case 'regular':
+      return css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.regular);
+
+    case 'semi-bold':
+      return css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.semiBold);
+  }
+}, function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+      theme = _ref3.theme;
+
+  switch (themeIntent) {
+    case 'body':
+      return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.body);
+
+    case 'subdued':
+      return css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.subdued);
+
+    case 'primary':
+      return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.primary);
+  }
+});
+
+var _excluded$5 = ["children", "fontSize", "fontWeight", "intent"];
+
+var Text = function Text(_ref) {
+  var children = _ref.children,
+      _ref$fontSize = _ref.fontSize,
+      fontSize = _ref$fontSize === void 0 ? 'medium' : _ref$fontSize,
+      _ref$fontWeight = _ref.fontWeight,
+      fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'body' : _ref$intent,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$5);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledText$1, _extends$1({
+    themeFontSize: fontSize,
+    themeFontWeight: fontWeight,
+    themeIntent: intent
+  }, nativeProps), children);
+};
+
+var Typography = {
+  Text: Text
+};
+
 var _templateObject$9, _templateObject2$6, _templateObject3$4, _templateObject4$4;
 var BACKGROUND_INTENTS = {
   success: 'successBackground',
@@ -10190,16 +10276,10 @@ var StyledView = styled(require$$0$1.View)(_templateObject$9 || (_templateObject
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
-  var theme = _ref7.theme;
-  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$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (_ref10) {
-    var theme = _ref10.theme;
+var StyledText = styled(Typography.Text)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref7) {
+  var themeIntent = _ref7.themeIntent;
+  return css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (_ref8) {
+    var theme = _ref8.theme;
     return theme.__hd__.badge.colors[themeIntent];
   });
 });
@@ -10218,8 +10298,10 @@ var Badge = function Badge(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
-    themeIntent: intent
+  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledText, {
+    themeIntent: intent,
+    fontSize: "small",
+    fontWeight: "semi-bold"
   }, content));
 };
 
@@ -19888,85 +19970,14 @@ var isHeroIcon = function isHeroIcon(x) {
   return IconList.includes(x);
 };
 
-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$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$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$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$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,
-      theme = _ref2.theme;
-
-  switch (themeFontWeight) {
-    case '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-family: ", ";\n        "])), theme.__hd__.typography.fonts.regular);
-
-    case 'semi-bold':
-      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-family: ", ";\n        "])), theme.__hd__.typography.fonts.semiBold);
-  }
-}, function (_ref3) {
-  var themeIntent = _ref3.themeIntent,
-      theme = _ref3.theme;
-
-  switch (themeIntent) {
-    case 'body':
-      return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.body);
-
-    case 'subdued':
-      return css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.subdued);
-
-    case 'primary':
-      return css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.primary);
-  }
-});
-
-var _excluded$3 = ["children", "fontSize", "fontWeight", "intent"];
-
-var Text = function Text(_ref) {
-  var children = _ref.children,
-      _ref$fontSize = _ref.fontSize,
-      fontSize = _ref$fontSize === void 0 ? 'medium' : _ref$fontSize,
-      _ref$fontWeight = _ref.fontWeight,
-      fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
-      _ref$intent = _ref.intent,
-      intent = _ref$intent === void 0 ? 'body' : _ref$intent,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$3);
-
-  return /*#__PURE__*/React__default["default"].createElement(StyledText, _extends$1({
-    themeFontSize: fontSize,
-    themeFontWeight: fontWeight,
-    themeIntent: intent
-  }, nativeProps), children);
-};
-
-var Typography = {
-  Text: Text
-};
-
-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 _templateObject$7, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$2;
+var BottomNavigationTab = styled(require$$0$1.View)(_templateObject$7 || (_templateObject$7 = _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$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 BottomNavigationContainer = styled(require$$0$1.View)(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow: hidden;\n"])));
+var ContentWrapper$1 = styled(require$$0$1.View)(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
+var BottomBarWrapper = styled(require$$0$1.View)(_templateObject4$3 || (_templateObject4$3 = _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;
@@ -19998,13 +20009,17 @@ var BottomBarWrapper = styled(require$$0$1.View)(_templateObject4$2 || (_templat
   var theme = _ref11.theme;
   return theme.__hd__.bottomNavigation.shadows.elevation;
 });
-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 BottomBar = styled(require$$0$1.View)(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: row;\n  overflow: hidden;\n  align-items: center;\n"])));
+var BottomBarItem = styled(require$$0$1.View)(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n  flex: 1;\n  align-items: center;\n"])));
+var StyledBottomBarText = styled(Typography.Text)(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.__hd__.bottomNavigation.space.titleMarginTop;
+});
 
 var isIOS = require$$0$1.Platform.OS === 'ios';
 require$$0$1.Platform.OS === 'android';
 
-var _excluded$2 = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$3 = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -20017,9 +20032,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
       tabs = _ref.tabs,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$3);
 
-  var theme = useTheme();
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -20037,7 +20051,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper, null, tabs.map(function (tab) {
+  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$1, null, tabs.map(function (tab) {
     var key = tab.key,
         component = tab.component;
     var active = selectedTabKey === key;
@@ -20084,20 +20098,17 @@ var BottomNavigation = function BottomNavigation(_ref) {
       icon: active ? icon : inactiveIcon,
       intent: active ? 'primary' : 'text',
       testID: "hero-icon-".concat(icon)
-    }), title && /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+    }), title && /*#__PURE__*/React__default["default"].createElement(StyledBottomBarText, {
       fontSize: "small",
       fontWeight: "semi-bold",
       intent: active ? 'primary' : 'body',
-      style: {
-        marginTop: theme.space.xsmall
-      },
       numberOfLines: 1
     }, title)));
   }))));
 };
 
-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 _templateObject$6;
+var StyledCard = styled(require$$0$1.View)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.card.radii["default"];
 }, function (_ref2) {
@@ -20109,8 +20120,8 @@ var Card = function Card(props) {
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, props);
 };
 
-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 _templateObject$5, _templateObject2$3, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var StyledDivider = styled(require$$0$1.View)(_templateObject$5 || (_templateObject$5 = _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) {
@@ -20122,22 +20133,22 @@ var StyledDivider = styled(require$$0$1.View)(_templateObject$4 || (_templateObj
 
   switch (themeMarginHorizontal) {
     case undefined:
-      return css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral([""])));
+      return css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral([""])));
 
     case 'xsmall':
-      return css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
+      return css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
 
     case 'small':
-      return css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.small);
+      return css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.small);
 
     case 'medium':
-      return css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.medium);
+      return css(_templateObject5$2 || (_templateObject5$2 = _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);
+      return css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.large);
 
     case 'xlarge':
-      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
+      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
   }
 }, function (_ref4) {
   var themeMarginVertical = _ref4.themeMarginVertical,
@@ -20145,7 +20156,7 @@ var StyledDivider = styled(require$$0$1.View)(_templateObject$4 || (_templateObj
 
   switch (themeMarginVertical) {
     case undefined:
-      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""])));
+      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral([""])));
 
     case 'xsmall':
       return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
@@ -20164,14 +20175,14 @@ var StyledDivider = styled(require$$0$1.View)(_templateObject$4 || (_templateObj
   }
 });
 
-var _excluded$1 = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$2 = ["marginHorizontal", "marginVertical", "style", "testID"];
 
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
       marginVertical = _ref.marginVertical,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$2);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({
     themeMarginHorizontal: marginHorizontal,
@@ -20181,6 +20192,167 @@ var Divider = function Divider(_ref) {
   }, nativeProps));
 };
 
+var _templateObject$4, _templateObject2$2, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8;
+var TabScreen = styled(require$$0$1.View)(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: ", ";\n"])), function (_ref) {
+  var themeVisibility = _ref.themeVisibility;
+  return themeVisibility === false ? 'none' : 'flex';
+});
+var TabContainer = styled(require$$0$1.View)(_templateObject2$2 || (_templateObject2$2 = _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 HeaderTabWrapper = styled(require$$0$1.View)(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n  padding-left: ", "px;\n  padding-right: ", "px;\n  background-color: ", ";\n"])), function (_ref2) {
+  var themeInsets = _ref2.themeInsets;
+  return Math.max(themeInsets.left, themeInsets.right);
+}, function (_ref3) {
+  var themeInsets = _ref3.themeInsets;
+  return Math.max(themeInsets.left, themeInsets.right);
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.__hd__.tabs.colors.background;
+});
+var StyledFlatList = styled(require$$0$1.FlatList)(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.__hd__.tabs.space.flatListHorizontalPadding;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.__hd__.tabs.space.flatListHorizontalPadding;
+});
+var HeaderTabItem = styled(require$$0$1.View)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  flex-direction: row;\n  align-items: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n"])), function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.__hd__.tabs.space.itemHorizontalPadding;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.__hd__.tabs.space.itemHorizontalPadding;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.__hd__.tabs.space.itemVerticalPadding;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.__hd__.tabs.space.itemVerticalPadding;
+});
+var StyledHeaderTabIcon = styled(Icon)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref11) {
+  var theme = _ref11.theme,
+      themeActive = _ref11.themeActive;
+  return themeActive ? theme.__hd__.tabs.colors.active : theme.__hd__.tabs.colors.inactive;
+});
+var StyledHeaderTabText = styled(Typography.Text)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  color: ", ";\n"])), function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.__hd__.tabs.space.titleMarginLeft;
+}, function (_ref13) {
+  var theme = _ref13.theme,
+      themeActive = _ref13.themeActive;
+  return themeActive ? theme.__hd__.tabs.colors.active : theme.__hd__.tabs.colors.inactive;
+});
+
+var _excluded$1 = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+
+var Tabs = function Tabs(_ref) {
+  var onChange = _ref.onChange,
+      _ref$renderActiveTabO = _ref.renderActiveTabOnly,
+      renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
+      selectedTabKey = _ref.selectedTabKey,
+      tabs = _ref.tabs,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+
+  var flatListRef = React__default["default"].useRef(null);
+  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  /**
+   * List of loaded tabs, tabs will be loaded when navigated to.
+   */
+
+  var _React$useState = React__default["default"].useState([selectedTabKey]),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      loaded = _React$useState2[0],
+      setLoaded = _React$useState2[1];
+
+  if (!loaded.includes(selectedTabKey)) {
+    // Set the current tab to be loaded if it was not loaded before
+    setLoaded(function (loadedState) {
+      return [].concat(_toConsumableArray$1(loadedState), [selectedTabKey]);
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(TabContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper, {
+    themeInsets: insets
+  }, /*#__PURE__*/React__default["default"].createElement(StyledFlatList, {
+    ref: flatListRef,
+    horizontal: true,
+    data: tabs,
+    keyExtractor: function keyExtractor(tab) {
+      return String(tab.key);
+    },
+    showsHorizontalScrollIndicator: false,
+    onScrollToIndexFailed: function onScrollToIndexFailed(_ref2) {
+      var index = _ref2.index;
+      setTimeout(function () {
+        var _flatListRef$current;
+
+        return (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
+          index: index,
+          viewPosition: 0.5
+        });
+      }, 100);
+    },
+    renderItem: function renderItem(_ref3) {
+      var tab = _ref3.item,
+          index = _ref3.index;
+      var key = tab.key,
+          icon = tab.icon,
+          title = tab.title,
+          testID = tab.testID;
+      var active = selectedTabKey === key;
+      return /*#__PURE__*/React__default["default"].createElement(require$$0$1.TouchableOpacity, {
+        key: key,
+        onPress: function onPress() {
+          if (key !== selectedTabKey) {
+            var _flatListRef$current2;
+
+            onChange(key);
+            (_flatListRef$current2 = flatListRef.current) === null || _flatListRef$current2 === void 0 ? void 0 : _flatListRef$current2.scrollToIndex({
+              index: index,
+              viewPosition: 0.5
+            });
+          }
+        },
+        testID: testID
+      }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem, null, /*#__PURE__*/React__default["default"].createElement(StyledHeaderTabIcon, {
+        icon: icon,
+        testID: "hero-icon-".concat(icon),
+        themeActive: active
+      }), /*#__PURE__*/React__default["default"].createElement(StyledHeaderTabText, {
+        fontWeight: "semi-bold",
+        numberOfLines: 1,
+        themeActive: active
+      }, title)));
+    }
+  })), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, null, tabs.map(function (tab) {
+    var key = tab.key,
+        component = tab.component;
+    var active = selectedTabKey === key;
+
+    if (renderActiveTabOnly && !active) {
+      return null;
+    }
+
+    if (!loaded.includes(key)) {
+      // Don't render a screen if we've never navigated to it
+      return null;
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
+      key: key,
+      testID: "tab-screen-".concat(selectedTabKey),
+      pointerEvents: active ? 'auto' : 'none',
+      accessibilityElementsHidden: !active,
+      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
+      collapsable: false,
+      removeClippedSubviews: // On iOS, set removeClippedSubviews to true only when not focused
+      // This is an workaround for a bug where the clipped view never re-appears.
+      isIOS ? selectedTabKey !== key : true,
+      themeVisibility: active
+    }, component);
+  })));
+};
+
 var _templateObject$3;
 var StyledFABIcon = styled(Icon)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -20318,7 +20490,7 @@ var StyledFAB = styled(FAB)(_templateObject3 || (_templateObject3 = _taggedTempl
   return theme.space.large;
 }, function (_ref2) {
   var theme = _ref2.theme;
-  return theme.space.large;
+  return theme.space.small;
 });
 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;
@@ -20410,12 +20582,38 @@ var index = Object.assign(FAB, {
   ActionGroup: ActionGroup
 });
 
+var IconButton = function IconButton(_ref) {
+  var hitSlop = _ref.hitSlop,
+      onPress = _ref.onPress,
+      icon = _ref.icon,
+      testID = _ref.testID,
+      style = _ref.style,
+      size = _ref.size,
+      intent = _ref.intent;
+  return /*#__PURE__*/React__default["default"].createElement(require$$0$1.TouchableOpacity, {
+    style: style,
+    onPress: onPress,
+    testID: testID,
+    hitSlop: hitSlop
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: size,
+    intent: intent
+  }));
+};
+
+var Button = {
+  Icon: IconButton
+};
+
 exports.Badge = Badge;
 exports.BottomNavigation = BottomNavigation;
+exports.Button = Button;
 exports.Card = Card;
 exports.Divider = Divider;
 exports.FAB = index;
 exports.Icon = Icon;
+exports.Tabs = Tabs;
 exports.ThemeProvider = ThemeProvider;
 exports.Typography = Typography;
 exports.getTheme = getTheme;

package/package.json

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