@hero-design/rn 7.1.1 → 7.1.2

package/lib/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var require$$0$1 = require('react-native');
+var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -8139,7 +8140,7 @@ Processor$1["default"] = Processor$1;
 Root$2.registerProcessor(Processor$1);
 Document$1.registerProcessor(Processor$1);
 
-var _excluded$4 = ["inputs"],
+var _excluded$5 = ["inputs"],
     _excluded2 = ["inputId"];
 
 var Declaration$1 = declaration;
@@ -8156,7 +8157,7 @@ function fromJSON$1(json, inputs) {
   });
 
   var ownInputs = json.inputs,
-      defaults = _objectWithoutProperties$1(json, _excluded$4);
+      defaults = _objectWithoutProperties$1(json, _excluded$5);
 
   if (ownInputs) {
     inputs = [];
@@ -9981,6 +9982,27 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   };
 };
 
+var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
+  var colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground
+  };
+  var sizes = {
+    height: 72
+  };
+  var shadows = {
+    offset: "0px 3px",
+    opacity: 0.27,
+    radius: "4.65px",
+    elevation: 10
+  };
+  return {
+    colors: colors,
+    shadows: shadows,
+    sizes: sizes
+  };
+};
+
 var getCardTheme = function getCardTheme(theme) {
   var radii = {
     "default": "12px"
@@ -10040,7 +10062,8 @@ var getIconTheme = function getIconTheme(theme) {
 var getTypographyTheme = function getTypographyTheme(theme) {
   var colors = {
     body: theme.colors.text,
-    subdued: theme.colors.disabledText
+    subdued: theme.colors.disabledText,
+    primary: theme.colors.primary
   };
   var fontSizes = {
     small: theme.fontSizes.small,
@@ -10091,6 +10114,7 @@ var getTheme = function getTheme() {
   return _objectSpread2(_objectSpread2({}, theme), {}, {
     __hd__: {
       badge: getBadgeTheme(theme),
+      bottomNavigation: getBottomNavigationTheme(theme),
       card: getCardTheme(theme),
       divider: getDividerTheme(theme),
       icon: getIconTheme(theme),
@@ -10102,14 +10126,14 @@ var getTheme = function getTheme() {
 
 var theme = getTheme();
 
-var _templateObject$6, _templateObject2$3, _templateObject3$2, _templateObject4$2;
+var _templateObject$7, _templateObject2$4, _templateObject3$3, _templateObject4$3;
 var BACKGROUND_INTENTS = {
   success: 'successBackground',
   warning: 'warningBackground',
   danger: 'dangerBackground',
   info: 'infoBackground'
 };
-var StyledView = styled(require$$0$1.View)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
+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 theme = _ref.theme;
   return theme.__hd__.badge.borderWidths["default"];
 }, function (_ref2) {
@@ -10120,7 +10144,7 @@ var StyledView = styled(require$$0$1.View)(_templateObject$6 || (_templateObject
   return theme.__hd__.badge.padding["default"];
 }, function (_ref4) {
   var themeIntent = _ref4.themeIntent;
-  return css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n    border-color: ", ";\n    background-color: ", ";\n  "])), function (_ref5) {
+  return css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n    border-color: ", ";\n    background-color: ", ";\n  "])), function (_ref5) {
     var theme = _ref5.theme;
     return theme.__hd__.badge.colors[themeIntent];
   }, function (_ref6) {
@@ -10128,7 +10152,7 @@ var StyledView = styled(require$$0$1.View)(_templateObject$6 || (_templateObject
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+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 theme = _ref7.theme;
   return theme.__hd__.badge.fontWeights["default"];
 }, function (_ref8) {
@@ -10136,13 +10160,13 @@ var StyledText$1 = styled(require$$0$1.Text)(_templateObject3$2 || (_templateObj
   return theme.__hd__.badge.fontSizes["default"];
 }, function (_ref9) {
   var themeIntent = _ref9.themeIntent;
-  return css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (_ref10) {
+  return css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), function (_ref10) {
     var theme = _ref10.theme;
     return theme.__hd__.badge.colors[themeIntent];
   });
 });
 
-var _excluded$3 = ["content", "intent", "style", "testID"];
+var _excluded$4 = ["content", "intent", "style", "testID"];
 
 var Badge = function Badge(_ref) {
   var content = _ref.content,
@@ -10150,7 +10174,7 @@ var Badge = function Badge(_ref) {
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$3);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$4);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({
     themeIntent: intent,
@@ -10161,91 +10185,6 @@ var Badge = function Badge(_ref) {
   }, content));
 };
 
-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) {
-  var theme = _ref2.theme;
-  return theme.__hd__.card.padding["default"];
-});
-
-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$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _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) {
-  var theme = _ref2.theme;
-  return theme.__hd__.divider.colors["default"];
-}, function (_ref3) {
-  var themeMarginHorizontal = _ref3.themeMarginHorizontal,
-      theme = _ref3.theme;
-
-  switch (themeMarginHorizontal) {
-    case undefined:
-      return css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral([""])));
-
-    case 'xsmall':
-      return css(_templateObject3$1 || (_templateObject3$1 = _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);
-
-    case 'medium':
-      return css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.medium);
-
-    case 'large':
-      return css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.large);
-
-    case 'xlarge':
-      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
-  }
-}, function (_ref4) {
-  var themeMarginVertical = _ref4.themeMarginVertical,
-      theme = _ref4.theme;
-
-  switch (themeMarginVertical) {
-    case undefined:
-      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral([""])));
-
-    case 'xsmall':
-      return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
-
-    case 'small':
-      return css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.small);
-
-    case 'medium':
-      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.medium);
-
-    case 'large':
-      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.large);
-
-    case 'xlarge':
-      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
-  }
-});
-
-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$2);
-
-  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({
-    themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical,
-    style: style,
-    testID: testID
-  }, nativeProps));
-};
-
 var dist = {};
 
 function _interopRequireDefault$5(obj) {
@@ -19874,12 +19813,12 @@ var heroIconConfig = {
 	preferences: preferences
 };
 
-var _templateObject$3, _templateObject2$1;
+var _templateObject$6, _templateObject2$3;
 var HeroIcon = dist.createIconSetFromIcoMoon(heroIconConfig, 'hero-icons', 'hero-icons.ttf');
-var StyledHeroIcon = styled(HeroIcon)(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+var StyledHeroIcon = styled(HeroIcon)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
   var themeIntent = _ref.themeIntent,
       themeSize = _ref.themeSize;
-  return css(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", "px;\n  "])), function (_ref2) {
+  return css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n    color: ", ";\n    font-size: ", "px;\n  "])), function (_ref2) {
     var theme = _ref2.theme;
     return theme.__hd__.icon.colors[themeIntent];
   }, function (_ref3) {
@@ -19905,23 +19844,29 @@ var Icon = function Icon(_ref) {
   });
 };
 
-var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var StyledText = styled(require$$0$1.Text)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var IconList = ['activate', 'add-person', 'adjustment', 'alignment', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'carat-down-small', 'carat-down', 'carat-left', 'carat-right', 'carat-up', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'folder-user', 'folder', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'home', 'image', 'import', 'incident-siren', 'instapay', 'list', 'loading', 'loading-2', 'location', 'lock', 'media-content', 'menu', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane', 'play-circle', 'print', 'raising-hands', 'reply', 'reschedule', 'rostering', 'save', 'schedule', 'search-person', 'send', 'speaker', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'survey', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'activate-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'arrow-down', 'arrow-left', 'arrow-right', 'arrow-up', 'at-sign', 'bell-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'camera-outlined', 'cancel', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'comment-outlined', 'contacts-outlined', 'credit-card-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-coin-shine-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-verified-outlined', 'folder-outlined', 'folder-user-outlined', 'funnel-filter-outline', 'graph-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'link-1', 'link-2', 'list-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'node-outlined', 'number-points', 'number', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-outlined', 're-assign', 'refresh', 'remove', 'reply-outlined', 'restart', 'return-arrow', 'rostering-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'send-outlined', 'share-1', 'share-2', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-outlined', 'transfer', 'trash-bin-outlined', 'unavailable', 'underline', 'unlock-outlined', 'upload-outlined', 'user-outlined', 'video-1-outlined', 'video-2-outlined'];
+
+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 themeFontSize = _ref.themeFontSize,
       theme = _ref.theme;
 
   switch (themeFontSize) {
     case 'small':
-      return css(_templateObject2 || (_templateObject2 = _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$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);
 
     case 'medium':
-      return css(_templateObject3 || (_templateObject3 = _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$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);
 
     case 'large':
-      return css(_templateObject4 || (_templateObject4 = _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$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);
 
     case 'xlarge':
-      return css(_templateObject5 || (_templateObject5 = _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$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);
   }
 }, function (_ref2) {
   var themeFontWeight = _ref2.themeFontWeight,
@@ -19929,13 +19874,13 @@ var StyledText = styled(require$$0$1.Text)(_templateObject$2 || (_templateObject
 
   switch (themeFontWeight) {
     case 'light':
-      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.light);
+      return css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.light);
 
     case 'regular':
-      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.regular);
+      return css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.regular);
 
     case 'semi-bold':
-      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.semiBold);
+      return css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n          font-weight: ", ";\n        "])), theme.__hd__.typography.fontWeights.semiBold);
   }
 }, function (_ref3) {
   var themeIntent = _ref3.themeIntent,
@@ -19943,14 +19888,17 @@ var StyledText = styled(require$$0$1.Text)(_templateObject$2 || (_templateObject
 
   switch (themeIntent) {
     case 'body':
-      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.body);
+      return css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.body);
 
     case 'subdued':
-      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          color: ", ";\n        "])), theme.__hd__.typography.colors.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$1 = ["children", "fontSize", "fontWeight", "intent"];
+var _excluded$3 = ["children", "fontSize", "fontWeight", "intent"];
 
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -19960,7 +19908,7 @@ var Text = function Text(_ref) {
       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$1);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$3);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledText, _extends$1({
     themeFontSize: fontSize,
@@ -19973,6 +19921,228 @@ 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 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 theme = _ref2.theme,
+      themeInsets = _ref2.themeInsets;
+  return theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom;
+}, function (_ref3) {
+  var themeInsets = _ref3.themeInsets;
+  return themeInsets.bottom;
+}, function (_ref4) {
+  var themeInsets = _ref4.themeInsets;
+  return Math.max(themeInsets.left, themeInsets.right);
+}, function (_ref5) {
+  var themeInsets = _ref5.themeInsets;
+  return Math.max(themeInsets.left, themeInsets.right);
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.__hd__.bottomNavigation.colors.background;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.__hd__.bottomNavigation.colors.shadow;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.__hd__.bottomNavigation.shadows.offset;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.__hd__.bottomNavigation.shadows.opacity;
+}, function (_ref10) {
+  var theme = _ref10.theme;
+  return theme.__hd__.bottomNavigation.shadows.radius;
+}, function (_ref11) {
+  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 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';
+require$$0$1.Platform.OS === 'android';
+
+var _excluded$2 = ["onChange", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+
+var getInactiveIcon = function getInactiveIcon(icon) {
+  var inactiveIcon = "".concat(icon, "-outlined");
+  return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
+};
+
+var BottomNavigation = function BottomNavigation(_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$2);
+
+  var theme = useTheme();
+  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(BottomNavigationContainer, nativeProps, /*#__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(BottomNavigationTab, {
+      key: key,
+      testID: "route-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);
+  })), /*#__PURE__*/React__default["default"].createElement(BottomBarWrapper, {
+    themeInsets: insets
+  }, /*#__PURE__*/React__default["default"].createElement(BottomBar, null, tabs.map(function (tab) {
+    var key = tab.key,
+        icon = tab.icon,
+        title = tab.title,
+        testID = tab.testID;
+    var active = selectedTabKey === key;
+    var inactiveIcon = getInactiveIcon(icon);
+    return /*#__PURE__*/React__default["default"].createElement(require$$0$1.TouchableWithoutFeedback, {
+      key: key,
+      onPress: function onPress() {
+        if (key !== selectedTabKey) {
+          onChange(key);
+        }
+      },
+      testID: testID
+    }, /*#__PURE__*/React__default["default"].createElement(BottomBarItem, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: active ? icon : inactiveIcon,
+      intent: active ? 'primary' : 'text',
+      testID: "hero-icon-".concat(icon)
+    }), title && /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+      fontSize: "small",
+      fontWeight: "semi-bold",
+      intent: active ? 'primary' : 'body',
+      style: {
+        marginTop: theme.space.xsmall
+      },
+      numberOfLines: 1
+    }, title)));
+  }))));
+};
+
+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 theme = _ref.theme;
+  return theme.__hd__.card.radii["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.card.padding["default"];
+});
+
+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 theme = _ref.theme;
+  return theme.__hd__.divider.borderWidths["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.divider.colors["default"];
+}, function (_ref3) {
+  var themeMarginHorizontal = _ref3.themeMarginHorizontal,
+      theme = _ref3.theme;
+
+  switch (themeMarginHorizontal) {
+    case undefined:
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+
+    case 'xsmall':
+      return css(_templateObject3 || (_templateObject3 = _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);
+
+    case 'medium':
+      return css(_templateObject5 || (_templateObject5 = _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);
+
+    case 'xlarge':
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          margin-horizontal: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
+  }
+}, function (_ref4) {
+  var themeMarginVertical = _ref4.themeMarginVertical,
+      theme = _ref4.theme;
+
+  switch (themeMarginVertical) {
+    case undefined:
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral([""])));
+
+    case 'xsmall':
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xsmall);
+
+    case 'small':
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.small);
+
+    case 'medium':
+      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.medium);
+
+    case 'large':
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.large);
+
+    case 'xlarge':
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          margin-vertical: ", ";\n        "])), theme.__hd__.divider.space.xlarge);
+  }
+});
+
+var _excluded$1 = ["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);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }, nativeProps));
+};
+
 var _templateObject$1;
 var StyledFABIcon = styled(Icon)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
@@ -20050,6 +20220,7 @@ var FAB = function FAB(_ref) {
 };
 
 exports.Badge = Badge;
+exports.BottomNavigation = BottomNavigation;
 exports.Card = Card;
 exports.Divider = Divider;
 exports.FAB = FAB;

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.1.1",
+  "version": "7.1.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "types": "types/index.d.ts",
+  "types": "types/src/index.d.ts",
   "scripts": {
     "lint": "eslint src playground --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
     "type-check": "tsc --noEmit",
@@ -18,12 +18,13 @@
     "publish:npm": "yarn publish --access public"
   },
   "dependencies": {
-    "@hero-design/colors": "7.1.1",
+    "@hero-design/colors": "7.1.2",
     "styled-components": "6.0.0-alpha.5"
   },
   "peerDependencies": {
     "react": "17.0.2",
     "react-native": "0.65.1",
+    "react-native-safe-area-context": "^4.2.5",
     "react-native-vector-icons": "^9.1.0"
   },
   "devDependencies": {