@hero-design/rn 7.1.0 → 7.1.3-alpha

package/es/index.js

@@ -1,5 +1,6 @@
 import React, { useContext, useMemo, createElement, useRef, useEffect } from 'react';
-import require$$0$1, { Dimensions, View, Text as Text$1, Animated, StyleSheet as StyleSheet$1, TouchableHighlight } from 'react-native';
+import require$$0$1, { Dimensions, View, Text as Text$1, Platform, TouchableWithoutFeedback, Animated, StyleSheet as StyleSheet$1, TouchableHighlight, TouchableOpacity } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -8130,7 +8131,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;
@@ -8147,7 +8148,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 = [];
@@ -9916,6 +9917,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,
@@ -9972,6 +9977,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"
@@ -10031,7 +10057,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,
@@ -10061,19 +10088,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
   };
 };
 
@@ -10082,6 +10140,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),
@@ -10093,14 +10152,14 @@ var getTheme = function getTheme() {
 
 var theme = getTheme();
 
-var _templateObject$6, _templateObject2$3, _templateObject3$2, _templateObject4$2;
+var _templateObject$9, _templateObject2$6, _templateObject3$4, _templateObject4$4;
 var BACKGROUND_INTENTS = {
   success: 'successBackground',
   warning: 'warningBackground',
   danger: 'dangerBackground',
   info: 'infoBackground'
 };
-var StyledView = styled(View)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
+var StyledView = styled(View)(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n  border-width: ", ";\n  border-radius: ", ";\n  padding: ", ";\n\n  ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.badge.borderWidths["default"];
 }, function (_ref2) {
@@ -10111,7 +10170,7 @@ var StyledView = styled(View)(_templateObject$6 || (_templateObject$6 = _taggedT
   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$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) {
@@ -10119,7 +10178,7 @@ var StyledView = styled(View)(_templateObject$6 || (_templateObject$6 = _taggedT
     return theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]];
   });
 });
-var StyledText$1 = styled(Text$1)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
+var StyledText$1 = styled(Text$1)(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n  font-weight: ", ";\n  font-size: ", ";\n\n  ", ";\n"])), function (_ref7) {
   var theme = _ref7.theme;
   return theme.__hd__.badge.fontWeights["default"];
 }, function (_ref8) {
@@ -10127,13 +10186,13 @@ var StyledText$1 = styled(Text$1)(_templateObject3$2 || (_templateObject3$2 = _t
   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$4 || (_templateObject4$4 = _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,
@@ -10141,7 +10200,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.createElement(StyledView, _extends$1({
     themeIntent: intent,
@@ -10152,91 +10211,6 @@ var Badge = function Badge(_ref) {
   }, content));
 };
 
-var _templateObject$5;
-var StyledCard = styled(View)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\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.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(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.createElement(StyledDivider, _extends$1({
-    themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical,
-    style: style,
-    testID: testID
-  }, nativeProps));
-};
-
 var dist = {};
 
 function _interopRequireDefault$5(obj) {
@@ -19865,12 +19839,12 @@ var heroIconConfig = {
 	preferences: preferences
 };
 
-var _templateObject$3, _templateObject2$1;
+var _templateObject$8, _templateObject2$5;
 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$8 || (_templateObject$8 = _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$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) {
@@ -19896,23 +19870,29 @@ var Icon = function Icon(_ref) {
   });
 };
 
-var _templateObject$2, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
-var StyledText = styled(Text$1)(_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$7, _templateObject2$4, _templateObject3$3, _templateObject4$3, _templateObject5$3, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1;
+var StyledText = styled(Text$1)(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var themeFontSize = _ref.themeFontSize,
       theme = _ref.theme;
 
   switch (themeFontSize) {
     case 'small':
-      return css(_templateObject2 || (_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$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 || (_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$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 || (_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$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 || (_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$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,
@@ -19920,13 +19900,13 @@ var StyledText = styled(Text$1)(_templateObject$2 || (_templateObject$2 = _tagge
 
   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,
@@ -19934,14 +19914,17 @@ var StyledText = styled(Text$1)(_templateObject$2 || (_templateObject$2 = _tagge
 
   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,
@@ -19951,7 +19934,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.createElement(StyledText, _extends$1({
     themeFontSize: fontSize,
@@ -19964,13 +19947,235 @@ var Typography = {
   Text: Text
 };
 
-var _templateObject$1;
-var StyledFABIcon = styled(Icon)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: ", ";\n"])), function (_ref) {
+var _templateObject$6, _templateObject2$3, _templateObject3$2, _templateObject4$2, _templateObject5$2, _templateObject6$1;
+var BottomNavigationTab = styled(View)(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n  flex: 1;\n  display: ", ";\n"])), function (_ref) {
+  var themeVisibility = _ref.themeVisibility;
+  return themeVisibility === false ? 'none' : 'flex';
+});
+var BottomNavigationContainer = styled(View)(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n  flex: 1;\n  overflow: hidden;\n"])));
+var ContentWrapper = styled(View)(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n  flex: 1;\n"])));
+var BottomBarWrapper = styled(View)(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n  height: ", "px;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  background-color: ", ";\n  shadow-color: ", ";\n  shadow-offset: ", ";\n  shadow-opacity: ", ";\n  shadow-radius: ", ";\n  elevation: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme,
+      themeInsets = _ref2.themeInsets;
+  return theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom;
+}, 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(View)(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n  flex: 1;\n  flex-direction: row;\n  overflow: hidden;\n  align-items: center;\n"])));
+var BottomBarItem = styled(View)(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n  flex: 1;\n  align-items: center;\n"])));
+
+var isIOS = Platform.OS === 'ios';
+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 = useSafeAreaInsets();
+  /**
+   * List of loaded tabs, tabs will be loaded when navigated to.
+   */
+
+  var _React$useState = React.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.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React.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.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.createElement(BottomBarWrapper, {
+    themeInsets: insets
+  }, /*#__PURE__*/React.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.createElement(TouchableWithoutFeedback, {
+      key: key,
+      onPress: function onPress() {
+        if (key !== selectedTabKey) {
+          onChange(key);
+        }
+      },
+      testID: testID
+    }, /*#__PURE__*/React.createElement(BottomBarItem, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: active ? icon : inactiveIcon,
+      intent: active ? 'primary' : 'text',
+      testID: "hero-icon-".concat(icon)
+    }), title && /*#__PURE__*/React.createElement(Typography.Text, {
+      fontSize: "small",
+      fontWeight: "semi-bold",
+      intent: active ? 'primary' : 'body',
+      style: {
+        marginTop: theme.space.xsmall
+      },
+      numberOfLines: 1
+    }, title)));
+  }))));
+};
+
+var _templateObject$5;
+var StyledCard = styled(View)(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  border-radius: ", ";\n  padding: ", ";\n  overflow: hidden;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.card.radii["default"];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.card.padding["default"];
+});
+
+var Card = function Card(props) {
+  return /*#__PURE__*/React.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(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 || (_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.createElement(StyledDivider, _extends$1({
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }, nativeProps));
+};
+
+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"];
@@ -20004,8 +20209,8 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   }, /*#__PURE__*/React.createElement(AnimatedIcons, iconProps));
 };
 
-var _templateObject;
-var StyledFABContainer = styled(TouchableHighlight)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (_ref) {
+var _templateObject$2;
+var StyledFABContainer = styled(TouchableHighlight)(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border-radius: 999px;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.__hd__.fab.sizes.height;
 }, function (_ref2) {
@@ -20017,7 +20222,7 @@ var StyledFABContainer = styled(TouchableHighlight)(_templateObject || (_templat
 });
 
 var FAB = function FAB(_ref) {
-  var _onPress = _ref.onPress,
+  var onPress = _ref.onPress,
       icon = _ref.icon,
       animated = _ref.animated,
       testID = _ref.testID,
@@ -20025,19 +20230,172 @@ var FAB = function FAB(_ref) {
       style = _ref.style;
   return /*#__PURE__*/React.createElement(StyledFABContainer, {
     testID: testID,
-    onPress: function onPress() {
-      _onPress === null || _onPress === void 0 ? void 0 : _onPress();
-    },
+    onPress: onPress,
     activeOpacity: 0.6,
     style: style
   }, animated ? /*#__PURE__*/React.createElement(AnimatedFABIcon, {
     active: active,
     icon: icon,
-    testID: "animatedFABIcon"
+    testID: "animated-fab-icon"
   }) : /*#__PURE__*/React.createElement(StyledFABIcon, {
     icon: icon,
-    testID: "styledFABIcon"
+    testID: "styled-fab-icon"
+  }));
+};
+
+var _templateObject$1, _templateObject2$1;
+var StyledActionItem = styled(TouchableOpacity)(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  padding-right: ", ";\n  padding-top: ", ";\n  padding-bottom: ", ";\n  margin: ", ";\n  margin-right: ", ";\n  background: ", ";\n  border-radius: ", ";\n  flex-direction: row;\n  align-items: center;\n  align-self: flex-end;\n  overflow: hidden;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.__hd__.fab.space.actionItemPaddingLeft;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.__hd__.fab.space.actionItemPaddingRight;
+}, function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.__hd__.fab.space.actionItemPaddingTop;
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.__hd__.fab.space.actionItemPaddingBottom;
+}, function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.__hd__.fab.space.actionItemMargin;
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.__hd__.fab.space.actionItemMarginRight;
+}, function (_ref7) {
+  var theme = _ref7.theme;
+  return theme.__hd__.fab.colors.actionItemBackground;
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.__hd__.fab.radii.actionItem;
+});
+var StyledActionItemText = styled(Typography.Text)(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding-left: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  font-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.createElement(StyledActionItem, {
+    style: style,
+    onPress: onPress,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
+};
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var StyledContainer = styled(View)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  align-items: flex-end;\n  justify-content: flex-end;\n"])));
+var StyledActionGroupContainer = styled(Animated.View)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: flex-end;\n  justify-content: flex-end;\n  width: 70%;\n"])));
+var StyledFAB = styled(FAB)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n  align-self: flex-end;\n  margin-top: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.space.large;
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.space.large;
+});
+var StyledBackdrop = styled(Animated.View)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;\n  background: ", ";\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.__hd__.fab.colors.backdropBackground;
+});
+var StyledHeaderText = styled(Typography.Text)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  font-size: ", ";\n  line-height: ", ";\n  font-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.createElement(View, {
+    style: style
+  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
+    return /*#__PURE__*/React.createElement(ActionItem, _extends$1({
+      key: itemProp.icon
+    }, itemProp));
+  }));
+};
+
+var ActionGroup = function ActionGroup(_ref2) {
+  var headerTitle = _ref2.headerTitle,
+      onPress = _ref2.onPress,
+      active = _ref2.active,
+      style = _ref2.style,
+      items = _ref2.items,
+      testID = _ref2.testID;
+  var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
+  useEffect(function () {
+    var animation = Animated.timing(tranlateXAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true
+    });
+    animation.start();
+  }, [active]);
+  var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [400, 0]
+  });
+  var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.5]
+  });
+  return /*#__PURE__*/React.createElement(StyledContainer, {
+    testID: testID,
+    pointerEvents: "box-none",
+    style: style
+  }, /*#__PURE__*/React.createElement(StyledBackdrop, {
+    pointerEvents: active ? 'auto' : 'box-none',
+    testID: "back-drop",
+    style: {
+      opacity: interpolatedOpacityAnimation
+    }
+  }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
+    testID: "action-group",
+    style: {
+      transform: [{
+        translateX: interpolatedTranlateXAnimation
+      }]
+    }
+  }, headerTitle && /*#__PURE__*/React.createElement(StyledHeaderText, {
+    testID: "header-text"
+  }, headerTitle), /*#__PURE__*/React.createElement(ActionItemsListComponent, {
+    items: items
+  })), /*#__PURE__*/React.createElement(StyledFAB, {
+    testID: "fab",
+    icon: "add",
+    onPress: onPress,
+    animated: true,
+    active: active
   }));
 };
 
-export { Badge, Card, Divider, FAB, Icon, ThemeProvider, Typography, getTheme, scale, theme, useTheme };
+var index = Object.assign(FAB, {
+  ActionGroup: ActionGroup
+});
+
+export { Badge, BottomNavigation, Card, Divider, index as FAB, Icon, ThemeProvider, Typography, getTheme, scale, theme, useTheme };