@hero-design/rn 7.2.2 → 7.3.0

package/lib/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var reactNative = require('react-native');
+var ReactNative = require('react-native');
 var React = require('react');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 
@@ -26,8 +26,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var reactNative__namespace = /*#__PURE__*/_interopNamespace(reactNative);
-var reactNative__default = /*#__PURE__*/_interopDefaultLegacy(reactNative);
+var ReactNative__namespace = /*#__PURE__*/_interopNamespace(ReactNative);
+var ReactNative__default = /*#__PURE__*/_interopDefaultLegacy(ReactNative);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 function ownKeys(object, enumerableOnly) {
@@ -47,7 +47,7 @@ function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
     i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty$1(target, key, source[key]);
+      _defineProperty$2(target, key, source[key]);
     }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
@@ -66,7 +66,32 @@ function _typeof$2(obj) {
   }, _typeof$2(obj);
 }
 
-function _defineProperty$1(obj, key, value) {
+function _classCallCheck$1(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+function _defineProperties$1(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass$1(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties$1(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties$1(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+function _defineProperty$2(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -81,8 +106,8 @@ function _defineProperty$1(obj, key, value) {
   return obj;
 }
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -96,7 +121,54 @@ function _extends$2() {
     return target;
   };
 
-  return _extends$2.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
+}
+
+function _inherits$1(subClass, superClass) {
+  if (typeof superClass !== "function" && superClass !== null) {
+    throw new TypeError("Super expression must either be null or a function");
+  }
+
+  subClass.prototype = Object.create(superClass && superClass.prototype, {
+    constructor: {
+      value: subClass,
+      writable: true,
+      configurable: true
+    }
+  });
+  Object.defineProperty(subClass, "prototype", {
+    writable: false
+  });
+  if (superClass) _setPrototypeOf$1(subClass, superClass);
+}
+
+function _getPrototypeOf$1(o) {
+  _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+    return o.__proto__ || Object.getPrototypeOf(o);
+  };
+  return _getPrototypeOf$1(o);
+}
+
+function _setPrototypeOf$1(o, p) {
+  _setPrototypeOf$1 = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+
+  return _setPrototypeOf$1(o, p);
+}
+
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+  if (Reflect.construct.sham) return false;
+  if (typeof Proxy === "function") return true;
+
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+    return true;
+  } catch (e) {
+    return false;
+  }
 }
 
 function _objectWithoutPropertiesLoose$1(source, excluded) {
@@ -135,6 +207,43 @@ function _objectWithoutProperties$1(source, excluded) {
   return target;
 }
 
+function _assertThisInitialized$1(self) {
+  if (self === void 0) {
+    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  }
+
+  return self;
+}
+
+function _possibleConstructorReturn$1(self, call) {
+  if (call && (typeof call === "object" || typeof call === "function")) {
+    return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
+  }
+
+  return _assertThisInitialized$1(self);
+}
+
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf$1(Derived),
+        result;
+
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf$1(this).constructor;
+
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+
+    return _possibleConstructorReturn$1(this, result);
+  };
+}
+
 function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
@@ -1214,6 +1323,21 @@ function prefixer(element, index, children, callback) {
   }
 }
 
+var weakMemoize = function weakMemoize(func) {
+  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
+  var cache = new WeakMap();
+  return function (arg) {
+    if (cache.has(arg)) {
+      // $FlowFixMe
+      return cache.get(arg);
+    }
+
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
   var previous = 0;
   var character = 0;
@@ -1434,8 +1558,8 @@ var createCache = function createCache(options) {
   return cache;
 };
 
-function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+function _extends$2() {
+  _extends$2 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -1448,24 +1572,9 @@ function _extends$1() {
 
     return target;
   };
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
-var weakMemoize = function weakMemoize(func) {
-  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
-  var cache = new WeakMap();
-  return function (arg) {
-    if (cache.has(arg)) {
-      // $FlowFixMe
-      return cache.get(arg);
-    }
-
-    var ret = func(arg);
-    cache.set(arg, ret);
-    return ret;
-  };
-};
-
 var EmotionCacheContext = /* #__PURE__ */React.createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
@@ -1491,7 +1600,7 @@ var getTheme$1 = function getTheme(outerTheme, theme) {
     return mergedTheme;
   }
 
-  return _extends$1({}, outerTheme, theme);
+  return _extends$2({}, outerTheme, theme);
 };
 
 var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
@@ -1516,11 +1625,13 @@ var BASE_BORDER_WIDTH = 1;
 var BASE_SPACE = 8;
 var BASE_FONT = 'BeVietnamPro';
 var BASE_FONT_SIZE = 10;
+var BASE_RADIUS = 4;
 var scale$1 = {
   borderWidth: BASE_BORDER_WIDTH,
   space: BASE_SPACE,
   font: BASE_FONT,
-  fontSize: BASE_FONT_SIZE
+  fontSize: BASE_FONT_SIZE,
+  radius: BASE_RADIUS
 };
 
 var palette = {
@@ -1577,6 +1688,7 @@ var palette = {
   pinkLight75: '#fcd5ea',
   pinkLight90: '#ffeef7',
   purple: '#be83cf',
+  purpleDark15: '#a26fb0',
   red: '#de350b',
   redDark15: '#bd2d09',
   redDark30: '#9b2508',
@@ -1612,12 +1724,15 @@ var palette = {
 var systemPalette = {
   primary: palette.violet,
   primaryLight: palette.violetLight60,
+  primaryDark: palette.purpleDark15,
+  primaryBackground: palette.violetLight90,
+  secondary: palette.dodgerBlue,
+  secondaryLight: palette.dodgerBlueLight75,
   info: palette.dodgerBlue,
   infoLight: palette.dodgerBlueLight75,
   infoBackground: palette.dodgerBlueLight90,
   success: palette.green,
   successDark: palette.greenDark30,
-  successLight: palette.greenDark75,
   successBackground: palette.grotesqueGreenLight90,
   danger: palette.red,
   dangerLight: palette.redLight60,
@@ -1630,14 +1745,16 @@ var systemPalette = {
   backgroundDark: palette.greyDark75,
   text: palette.greyDark75,
   disabledText: palette.greyDark15,
+  disabledLightText: palette.greyLight45,
   invertedText: palette.white,
-  outline: palette.greyLight60
+  outline: palette.greyLight60,
+  archived: palette.greyLight45
 };
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 
 var horizontalScale = function horizontalScale(size) {
-  var _Dimensions$get = reactNative.Dimensions.get('window'),
+  var _Dimensions$get = ReactNative.Dimensions.get('window'),
       width = _Dimensions$get.width,
       height = _Dimensions$get.height;
 
@@ -1723,56 +1840,64 @@ var getBorderWidths = function getBorderWidths(baseBorderWidth) {
   };
 };
 
+var getRadii = function getRadii(baseRadius) {
+  return {
+    rounded: 999,
+    base: baseRadius,
+    medium: baseRadius * 2
+  };
+};
+
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var fonts = getFonts(scale.font);
   var fontSizes = getFontSizes(scale.fontSize);
   var lineHeights = getLineHeights(fontSizes);
   var borderWidths = getBorderWidths(scale.borderWidth);
   var space = getSpace(scale.space);
+  var radii = getRadii(scale.radius);
   return {
     colors: _objectSpread2({}, systemPalette),
     fonts: fonts,
     fontSizes: fontSizes,
     lineHeights: lineHeights,
     borderWidths: borderWidths,
-    space: space
+    space: space,
+    radii: radii
   };
 };
 
 var getBadgeTheme = function getBadgeTheme(theme) {
-  var borderWidths = {
-    "default": theme.borderWidths.base
-  };
   var colors = {
     danger: theme.colors.danger,
-    dangerBackground: theme.colors.dangerBackground,
     info: theme.colors.info,
-    infoBackground: theme.colors.infoBackground,
     success: theme.colors.successDark,
-    successBackground: theme.colors.successBackground,
     warning: theme.colors.warningDark,
-    warningBackground: theme.colors.warningBackground
+    archived: theme.colors.archived,
+    text: theme.colors.invertedText
   };
-  var font = {
+  var fonts = {
     "default": theme.fonts.semiBold
   };
-  var fontSize = {
+  var fontSizes = {
     "default": theme.fontSizes.small
   };
+  var sizes = {
+    height: theme.fontSizes.small + theme.space.small,
+    minWidth: theme.fontSizes.small + theme.space.small,
+    statusHeight: theme.space.small,
+    statusWidth: theme.space.small
+  };
   var space = {
     horizontalPadding: theme.space.small,
-    verticalPadding: theme.space.xxsmall
-  };
-  var radii = {
-    "default": 4
+    statusPositionTop: -theme.space.xxsmall,
+    statusPositionRight: -theme.space.xxsmall
   };
   return {
-    borderWidths: borderWidths,
     colors: colors,
-    font: font,
-    fontSize: fontSize,
-    space: space,
-    radii: radii
+    fonts: fonts,
+    fontSizes: fontSizes,
+    sizes: sizes,
+    space: space
   };
 };
 
@@ -1804,11 +1929,61 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
   };
 };
 
-var getCardTheme = function getCardTheme() {
+var getButtonTheme = function getButtonTheme(theme) {
+  var fonts = {
+    "default": theme.fonts.semiBold
+  };
+  var fontSize = {
+    "default": theme.fontSizes.xlarge
+  };
+  var lineHeight = {
+    "default": theme.lineHeights.large
+  };
+  var borderWidth = {
+    "default": theme.space.xxsmall
+  };
+  var space = {
+    buttonPadding: theme.space.medium,
+    iconPadding: theme.space.small
+  };
+  var sizes = {
+    iconSize: theme.fontSizes.xxlarge
+  };
+  var radii = {
+    "default": theme.space.xlarge
+  };
+  var colors = {
+    primary: theme.colors.primary,
+    pressedPrimary: theme.colors.primaryLight,
+    secondary: theme.colors.secondary,
+    pressedSecondary: theme.colors.secondaryLight,
+    defaultText: theme.colors.text,
+    disabledText: theme.colors.disabledLightText,
+    disabledBorder: theme.colors.disabledLightText,
+    disabledBackground: theme.colors.disabledLightText,
+    invertedText: theme.colors.invertedText
+  };
+  return {
+    borderWidth: borderWidth,
+    fonts: fonts,
+    fontSize: fontSize,
+    sizes: sizes,
+    radii: radii,
+    colors: colors,
+    lineHeight: lineHeight,
+    space: space
+  };
+};
+
+var getCardTheme = function getCardTheme(theme) {
+  var colors = {
+    dataCardIndicator: theme.colors.primaryDark
+  };
   var radii = {
     "default": 12
   };
   return {
+    colors: colors,
     radii: radii
   };
 };
@@ -1834,21 +2009,98 @@ var getDividerTheme = function getDividerTheme(theme) {
   };
 };
 
+var getDrawerTheme = function getDrawerTheme(theme) {
+  var colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground,
+    backdrop: theme.colors.backgroundDark
+  };
+  var radii = {
+    "default": 16
+  };
+  var shadows = {
+    offset: {
+      width: 0,
+      height: 3
+    },
+    opacity: 0.27,
+    radius: 4.65,
+    elevation: 10
+  };
+  return {
+    colors: colors,
+    radii: radii,
+    shadows: shadows
+  };
+};
+
 var getTabsTheme = function getTabsTheme(theme) {
   var colors = {
-    background: theme.colors.primary,
-    active: theme.colors.invertedText,
-    inactive: "".concat(theme.colors.invertedText, "50")
+    active: theme.colors.primary,
+    inactive: theme.colors.text,
+    activeBackground: theme.colors.primaryBackground,
+    headerBottom: theme.colors.outline,
+    text: theme.colors.text
   };
   var space = {
     flatListHorizontalPadding: theme.space.small,
-    titleMarginLeft: theme.space.small,
-    itemHorizontalPadding: theme.space.medium,
-    itemVerticalPadding: theme.space.large
+    itemHorizontalPadding: theme.space.small,
+    itemVerticalPadding: theme.space.small,
+    outlineHorizontalPadding: theme.space.small,
+    outlineVerticalPadding: theme.space.xsmall
+  };
+  var radii = {
+    outline: theme.radii.medium
+  };
+  var borderWidths = {
+    headerBottom: theme.borderWidths.base
+  };
+  var sizes = {
+    indicator: theme.space.xxsmall
   };
   return {
+    borderWidths: borderWidths,
     colors: colors,
-    space: space
+    space: space,
+    radii: radii,
+    sizes: sizes
+  };
+};
+
+var getTagTheme = function getTagTheme(theme) {
+  var borderWidths = {
+    "default": theme.borderWidths.base
+  };
+  var colors = {
+    danger: theme.colors.danger,
+    dangerBackground: theme.colors.dangerBackground,
+    info: theme.colors.info,
+    infoBackground: theme.colors.infoBackground,
+    success: theme.colors.successDark,
+    successBackground: theme.colors.successBackground,
+    warning: theme.colors.warningDark,
+    warningBackground: theme.colors.warningBackground
+  };
+  var fonts = {
+    "default": theme.fonts.semiBold
+  };
+  var fontSizes = {
+    "default": theme.fontSizes.small
+  };
+  var space = {
+    horizontalPadding: theme.space.small,
+    verticalPadding: theme.space.xxsmall
+  };
+  var radii = {
+    "default": theme.radii.base
+  };
+  return {
+    borderWidths: borderWidths,
+    colors: colors,
+    fonts: fonts,
+    fontSizes: fontSizes,
+    space: space,
+    radii: radii
   };
 };
 
@@ -1874,6 +2126,31 @@ var getIconTheme = function getIconTheme(theme) {
   };
 };
 
+var getProgressTheme = function getProgressTheme(theme) {
+  var colors = {
+    primary: theme.colors.primary,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    danger: theme.colors.danger,
+    info: theme.colors.info,
+    background: theme.colors.outline,
+    innerBackground: theme.colors.platformBackground
+  };
+  var sizes = {
+    radius: theme.space.xxxlarge,
+    strokeWidth: theme.space.small,
+    barHeight: theme.space.xsmall
+  };
+  var radii = {
+    "default": theme.radii.rounded
+  };
+  return {
+    colors: colors,
+    sizes: sizes,
+    radii: radii
+  };
+};
+
 var getTypographyTheme = function getTypographyTheme(theme) {
   var colors = {
     body: theme.colors.text,
@@ -1911,7 +2188,8 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.colors.invertedText,
     headerText: theme.colors.text,
     actionItemBackground: theme.colors.infoLight,
-    backdropBackground: theme.colors.platformBackground
+    backdropBackground: theme.colors.platformBackground,
+    titleText: theme.colors.invertedText
   };
   var sizes = {
     width: 64,
@@ -1919,16 +2197,19 @@ var getFABTheme = function getFABTheme(theme) {
   };
   var fonts = {
     header: theme.fonts.semiBold,
-    actionItemText: theme.fonts.regular
+    actionItemText: theme.fonts.regular,
+    title: theme.fonts.semiBold
   };
   var fontSizes = {
     header: theme.fontSizes.xxxlarge,
-    buttonIcon: theme.fontSizes.xxxlarge,
-    actionItemText: theme.fontSizes.medium
+    actionItemText: theme.fontSizes.medium,
+    title: theme.fontSizes.large
   };
   var lineHeights = {
     header: theme.lineHeights.xxxlarge,
-    actionItemText: theme.lineHeights.medium
+    actionItemText: theme.lineHeights.medium,
+    title: theme.lineHeights.large,
+    icon: theme.lineHeights.large
   };
   var space = {
     actionItemPaddingLeft: theme.space.medium,
@@ -1941,10 +2222,13 @@ var getFABTheme = function getFABTheme(theme) {
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
     headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large
+    headerTextMarginBottom: theme.space.large,
+    containerPaddingHorizontal: theme.space.medium,
+    containerPaddingVertical: theme.space.medium,
+    titleMarginHorizontal: theme.space.small
   };
   var radii = {
-    actionItem: 999
+    actionItem: theme.radii.rounded
   };
   return {
     radii: radii,
@@ -1957,18 +2241,61 @@ var getFABTheme = function getFABTheme(theme) {
   };
 };
 
-var getTheme = function getTheme() {
-  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
-  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
-  var globalTheme = getGlobalTheme(scale, systemPallete);
-  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
+var getAvatarTheme = function getAvatarTheme(theme) {
+  var colors = {
+    primary: theme.colors.primary,
+    info: theme.colors.info,
+    danger: theme.colors.danger,
+    success: theme.colors.success,
+    warning: theme.colors.warning
+  };
+  var sizes = {
+    small: theme.space.xlarge,
+    medium: theme.space.xxlarge,
+    large: theme.space.xxxlarge,
+    xlarge: theme.space.xxxxlarge
+  };
+  var fontSizes = {
+    small: theme.fontSizes.large,
+    medium: theme.fontSizes.xlarge,
+    large: theme.fontSizes.xxlarge,
+    xlarge: theme.fontSizes.xxxlarge
+  };
+  var radii = {
+    small: theme.space.xlarge / 2,
+    medium: theme.space.xxlarge / 2,
+    large: theme.space.xxxlarge / 2,
+    xlarge: theme.space.xxxxlarge / 2
+  };
+  var borderWidths = {
+    "default": theme.borderWidths.base
+  };
+  return {
+    colors: colors,
+    sizes: sizes,
+    radii: radii,
+    borderWidths: borderWidths,
+    fontSizes: fontSizes
+  };
+};
+
+var getTheme = function getTheme() {
+  var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
+  var globalTheme = getGlobalTheme(scale, systemPallete);
+  return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
+      avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
-      card: getCardTheme(),
+      button: getButtonTheme(globalTheme),
+      card: getCardTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
+      drawer: getDrawerTheme(globalTheme),
+      progress: getProgressTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
+      tag: getTagTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       fab: getFABTheme(globalTheme)
     }
@@ -3895,65 +4222,241 @@ var getDisplayName = function getDisplayName(primitive) {
  * a function that returns a styled component which render styles in React Native
  */
 
-var styled = createStyled(reactNative.StyleSheet);
+var styled = createStyled(ReactNative.StyleSheet);
 var components = ['ActivityIndicator', 'Button', 'DatePickerIOS', 'DrawerLayoutAndroid', 'FlatList', 'Image', 'ImageBackground', 'KeyboardAvoidingView', 'ListView', 'Modal', 'NavigatorIOS', 'Picker', 'PickerIOS', 'Pressable', 'ProgressBarAndroid', 'ProgressViewIOS', 'RecyclerViewBackedScrollView', 'RefreshControl', 'SafeAreaView', 'ScrollView', 'SectionList', 'SegmentedControlIOS', 'Slider', 'SnapshotViewIOS', 'StatusBar', 'SwipeableListView', 'Switch', 'SwitchIOS', 'TabBarIOS', 'Text', 'TextInput', 'ToolbarAndroid', 'TouchableHighlight', 'TouchableNativeFeedback', 'TouchableOpacity', 'TouchableWithoutFeedback', 'View', 'ViewPagerAndroid'];
-var index$1 = components.reduce(function (acc, comp) {
+var index$2 = components.reduce(function (acc, comp) {
   return Object.defineProperty(acc, comp, {
     enumerable: true,
     configurable: false,
     get: function get() {
-      return styled(reactNative__namespace[comp]);
+      return styled(ReactNative__namespace[comp]);
     }
   });
 }, styled);
 
-var BACKGROUND_INTENTS = {
-  success: 'successBackground',
-  warning: 'warningBackground',
-  danger: 'dangerBackground',
-  info: 'infoBackground'
+var StyledPressable = index$2(ReactNative.TouchableOpacity)(function (_ref) {
+  var themeSize = _ref.themeSize,
+      themeIntent = _ref.themeIntent,
+      theme = _ref.theme;
+  return {
+    borderWidth: theme.__hd__.avatar.borderWidths["default"],
+    borderRadius: theme.__hd__.avatar.radii[themeSize],
+    borderColor: theme.__hd__.avatar.colors[themeIntent],
+    width: theme.__hd__.avatar.sizes[themeSize],
+    height: theme.__hd__.avatar.sizes[themeSize],
+    overflow: 'hidden'
+  };
+});
+var StyledView$2 = index$2(ReactNative.View)(function (_ref2) {
+  var themeSize = _ref2.themeSize,
+      themeIntent = _ref2.themeIntent,
+      theme = _ref2.theme;
+  return {
+    borderWidth: theme.__hd__.avatar.borderWidths["default"],
+    borderRadius: theme.__hd__.avatar.radii[themeSize],
+    borderColor: theme.__hd__.avatar.colors[themeIntent],
+    width: theme.__hd__.avatar.sizes[themeSize],
+    height: theme.__hd__.avatar.sizes[themeSize],
+    overflow: 'hidden'
+  };
+});
+var StyledTextWrapper = index$2(ReactNative.View)(function () {
+  return {
+    alignItems: 'center',
+    justifyContent: 'center',
+    display: 'flex',
+    width: '100%',
+    height: '100%'
+  };
+});
+var StyledText$3 = index$2(ReactNative.Text)(function (_ref3) {
+  var themeSize = _ref3.themeSize,
+      themeIntent = _ref3.themeIntent,
+      theme = _ref3.theme;
+  return {
+    fontSize: theme.__hd__.avatar.fontSizes[themeSize],
+    color: theme.__hd__.avatar.colors[themeIntent],
+    overflow: 'hidden'
+  };
+});
+var StyledImage = index$2(ReactNative.Image)(function (_ref4) {
+  var themeSize = _ref4.themeSize,
+      theme = _ref4.theme;
+  return {
+    width: theme.__hd__.avatar.sizes[themeSize],
+    height: theme.__hd__.avatar.sizes[themeSize]
+  };
+});
+
+var Avatar = function Avatar(_ref) {
+  var onPress = _ref.onPress,
+      source = _ref.source,
+      testID = _ref.testID,
+      style = _ref.style,
+      title = _ref.title,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'small' : _ref$size,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'primary' : _ref$intent;
+  var Wrapper = onPress ? StyledPressable : StyledView$2;
+  return title !== undefined || source !== undefined ? /*#__PURE__*/React__default["default"].createElement(Wrapper, {
+    testID: testID,
+    onPress: onPress,
+    themeIntent: intent,
+    themeSize: size,
+    style: style
+  }, title !== undefined && source === undefined && /*#__PURE__*/React__default["default"].createElement(StyledTextWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledText$3, {
+    themeIntent: intent,
+    themeSize: size
+  }, title)), source !== undefined && /*#__PURE__*/React__default["default"].createElement(StyledImage, {
+    resizeMode: "cover",
+    source: source,
+    themeSize: size
+  })) : null;
 };
-var StyledView = index$1(reactNative.View)(function (_ref) {
+
+var StyledView$1 = index$2(ReactNative.Animated.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
+      themePadding = _ref.themePadding,
       theme = _ref.theme;
   return {
-    borderWidth: theme.__hd__.badge.borderWidths["default"],
-    borderRadius: theme.__hd__.badge.radii["default"],
-    paddingVertical: theme.__hd__.badge.space.verticalPadding,
-    paddingHorizontal: theme.__hd__.badge.space.horizontalPadding,
-    borderColor: theme.__hd__.badge.colors[themeIntent],
-    backgroundColor: theme.__hd__.badge.colors[BACKGROUND_INTENTS[themeIntent]]
+    height: theme.__hd__.badge.sizes.height,
+    minWidth: theme.__hd__.badge.sizes.minWidth,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.__hd__.badge.colors[themeIntent],
+    borderRadius: theme.radii.rounded,
+    paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space.horizontalPadding : undefined
+  };
+});
+var StyledText$2 = index$2(ReactNative.Text)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    fontFamily: theme.__hd__.badge.fonts["default"],
+    fontSize: theme.__hd__.badge.fontSizes["default"],
+    color: theme.__hd__.badge.colors.text,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+    textAlign: 'center'
   };
 });
-var StyledText$1 = index$1(reactNative.Text)(function (_ref2) {
-  var themeIntent = _ref2.themeIntent,
-      theme = _ref2.theme;
+var StyledStatus = index$2(ReactNative.Animated.View)(function (_ref3) {
+  var themeIntent = _ref3.themeIntent,
+      theme = _ref3.theme;
   return {
-    fontFamily: theme.__hd__.badge.font["default"],
-    fontSize: theme.__hd__.badge.fontSize["default"],
-    color: theme.__hd__.badge.colors[themeIntent]
+    position: 'absolute',
+    top: theme.__hd__.badge.space.statusPositionTop,
+    right: theme.__hd__.badge.space.statusPositionRight,
+    height: theme.__hd__.badge.sizes.statusHeight,
+    width: theme.__hd__.badge.sizes.statusWidth,
+    backgroundColor: theme.__hd__.badge.colors[themeIntent],
+    borderRadius: theme.radii.rounded
   };
 });
 
-var _excluded$5 = ["content", "intent", "style", "testID"];
+var _excluded$a = ["children", "visible", "intent", "style", "testID"];
 
-var Badge = function Badge(_ref) {
-  var content = _ref.content,
+var Status = function Status(_ref) {
+  var children = _ref.children,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? true : _ref$visible,
       _ref$intent = _ref.intent,
-      intent = _ref$intent === void 0 ? 'info' : _ref$intent,
+      intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$5);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$a);
 
-  return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$2({
-    themeIntent: intent,
+  var _React$useRef = React__default["default"].useRef(new ReactNative.Animated.Value(visible ? 1 : 0)),
+      opacity = _React$useRef.current;
+
+  var isFirstRendering = React__default["default"].useRef(true);
+  React__default["default"].useEffect(function () {
+    // Do not run animation on very first rendering
+    if (isFirstRendering.current) {
+      isFirstRendering.current = false;
+      return;
+    }
+
+    ReactNative.Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 150,
+      useNativeDriver: true
+    }).start();
+  }, [visible, opacity]);
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.View, _extends$3({}, nativeProps, {
     style: style,
     testID: testID
-  }, nativeProps), /*#__PURE__*/React__default["default"].createElement(StyledText$1, {
+  }), children, /*#__PURE__*/React__default["default"].createElement(StyledStatus, {
+    style: {
+      opacity: opacity,
+      transform: [{
+        scale: opacity.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.5, 1]
+        })
+      }]
+    },
     themeIntent: intent
-  }, content));
+  }));
+};
+
+var _excluded$9 = ["content", "visible", "max", "intent", "style", "testID"];
+var DEFAULT_MAX_NUMBER = 99;
+
+var getPaddingState = function getPaddingState(content) {
+  return content.length > 1 ? 'wideContent' : 'narrowContent';
+};
+
+var Badge = function Badge(_ref) {
+  var originalContent = _ref.content,
+      _ref$visible = _ref.visible,
+      visible = _ref$visible === void 0 ? true : _ref$visible,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? DEFAULT_MAX_NUMBER : _ref$max,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
+      style = _ref.style,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$9);
+
+  var _React$useRef = React__default["default"].useRef(new ReactNative.Animated.Value(visible ? 1 : 0)),
+      opacity = _React$useRef.current;
+
+  var isFirstRendering = React__default["default"].useRef(true);
+  React__default["default"].useEffect(function () {
+    // Do not run animation on very first rendering
+    if (isFirstRendering.current) {
+      isFirstRendering.current = false;
+      return;
+    }
+
+    ReactNative.Animated.timing(opacity, {
+      toValue: visible ? 1 : 0,
+      duration: 150,
+      useNativeDriver: true
+    }).start();
+  }, [visible, opacity]);
+  var content = typeof originalContent === 'number' && originalContent > max ? "".concat(max, "+") : String(originalContent);
+  return /*#__PURE__*/React__default["default"].createElement(StyledView$1, _extends$3({}, nativeProps, {
+    themeIntent: intent,
+    themePadding: getPaddingState(content),
+    style: [{
+      opacity: opacity,
+      transform: [{
+        scale: opacity.interpolate({
+          inputRange: [0, 1],
+          outputRange: [0.5, 1]
+        })
+      }]
+    }, style],
+    testID: testID
+  }), /*#__PURE__*/React__default["default"].createElement(StyledText$2, null, content));
 };
 
+var Badge$1 = Object.assign(Badge, {
+  Status: Status
+});
+
 var dist = {};
 
 function _interopRequireDefault$5(obj) {
@@ -4705,8 +5208,8 @@ var runtime = {exports: {}};
 
 var regenerator = runtime.exports;
 
-function _extends() {
-  _extends_1 = _extends = Object.assign || function (target) {
+function _extends$1() {
+  _extends_1 = _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4720,10 +5223,10 @@ function _extends() {
     return target;
   };
 
-  return _extends.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
-var _extends_1 = _extends;
+var _extends_1 = _extends$1;
 
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
@@ -4975,7 +5478,7 @@ Object.defineProperty(ensureNativeModuleAvailable$1, "__esModule", {
 
 ensureNativeModuleAvailable$1["default"] = ensureNativeModuleAvailable;
 
-var _reactNative$2 = reactNative__default["default"];
+var _reactNative$2 = ReactNative__default["default"];
 var NativeIconAPI$1 = _reactNative$2.NativeModules.RNVectorIconsManager || _reactNative$2.NativeModules.RNVectorIconsModule;
 
 function ensureNativeModuleAvailable() {
@@ -5103,7 +5606,7 @@ var _react$2 = _interopRequireWildcard$2(React__default["default"]);
 
 var _propTypes$2 = _interopRequireDefault$4(propTypes.exports);
 
-var _reactNative$1 = reactNative__default["default"];
+var _reactNative$1 = ReactNative__default["default"];
 var _objectUtils = objectUtils;
 var _jsxFileName$2 = "/home/runner/work/react-native-vector-icons/react-native-vector-icons/lib/icon-button.js";
 
@@ -5285,7 +5788,7 @@ var _react$1 = _interopRequireWildcard$1(React__default["default"]);
 
 var _propTypes$1 = _interopRequireDefault$3(propTypes.exports);
 
-var _reactNative = reactNative__default["default"];
+var _reactNative = ReactNative__default["default"];
 
 var _ensureNativeModuleAvailable = _interopRequireDefault$3(ensureNativeModuleAvailable$1);
 
@@ -5600,7 +6103,7 @@ function createIconSet(glyphMap, fontFamily, fontFile, fontStyle) {
 
 var createMultiStyleIconSet$1 = {};
 
-function _defineProperty(obj, key, value) {
+function _defineProperty$1(obj, key, value) {
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value: value,
@@ -5615,7 +6118,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-var defineProperty = _defineProperty;
+var defineProperty = _defineProperty$1;
 
 var _interopRequireDefault$2 = interopRequireDefault;
 Object.defineProperty(createMultiStyleIconSet$1, "__esModule", {
@@ -13583,7 +14086,7 @@ var heroIconConfig = {
 };
 
 var HeroIcon = dist.createIconSetFromIcoMoon(heroIconConfig, 'hero-icons', 'hero-icons.ttf');
-var StyledHeroIcon = index$1(HeroIcon)(function (_ref) {
+var StyledHeroIcon = index$2(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
       themeSize = _ref.themeSize,
       theme = _ref.theme;
@@ -13621,7 +14124,7 @@ var FONTWEIGHT_MAP = {
   regular: 'regular',
   'semi-bold': 'semiBold'
 };
-var StyledText = index$1(reactNative.Text)(function (_ref) {
+var StyledText$1 = index$2(ReactNative.Text)(function (_ref) {
   var themeFontSize = _ref.themeFontSize,
       themeFontWeight = _ref.themeFontWeight,
       themeIntent = _ref.themeIntent,
@@ -13637,7 +14140,7 @@ var StyledText = index$1(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$4 = ["children", "fontSize", "fontWeight", "intent"];
+var _excluded$8 = ["children", "fontSize", "fontWeight", "intent"];
 
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -13647,34 +14150,34 @@ 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$4);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$8);
 
-  return /*#__PURE__*/React__default["default"].createElement(StyledText, _extends$2({
+  return /*#__PURE__*/React__default["default"].createElement(StyledText$1, _extends$3({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
     themeIntent: intent
-  }, nativeProps), children);
+  }), children);
 };
 
 var Typography = {
   Text: Text
 };
 
-var BottomNavigationTab = index$1(reactNative.View)(function (_ref) {
+var BottomNavigationTab = index$2(ReactNative.View)(function (_ref) {
   var themeVisibility = _ref.themeVisibility;
   return {
     flex: 1,
     display: themeVisibility === false ? 'none' : 'flex'
   };
 });
-var BottomNavigationContainer = index$1(reactNative.View)({
+var BottomNavigationContainer = index$2(ReactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper$1 = index$1(reactNative.View)({
+var ContentWrapper$2 = index$2(ReactNative.View)({
   flex: 1
 });
-var BottomBarWrapper = index$1(reactNative.View)(function (_ref2) {
+var BottomBarWrapper = index$2(ReactNative.View)(function (_ref2) {
   var themeInsets = _ref2.themeInsets,
       theme = _ref2.theme;
   return {
@@ -13690,27 +14193,27 @@ var BottomBarWrapper = index$1(reactNative.View)(function (_ref2) {
     elevation: theme.__hd__.bottomNavigation.shadows.elevation
   };
 });
-var BottomBar = index$1(reactNative.View)({
+var BottomBar = index$2(ReactNative.View)({
   flex: 1,
   flexDirection: 'row',
   overflow: 'hidden',
   alignItems: 'center'
 });
-var BottomBarItem = index$1(reactNative.View)({
+var BottomBarItem = index$2(ReactNative.View)({
   flex: 1,
   alignItems: 'center'
 });
-var StyledBottomBarText = index$1(Typography.Text)(function (_ref3) {
+var StyledBottomBarText = index$2(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
   };
 });
 
-var isIOS = reactNative.Platform.OS === 'ios';
-reactNative.Platform.OS === 'android';
+var isIOS = ReactNative.Platform.OS === 'ios';
+ReactNative.Platform.OS === 'android';
 
-var _excluded$3 = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$7 = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -13723,7 +14226,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
       tabs = _ref.tabs,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded$3);
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$7);
 
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
@@ -13742,7 +14245,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     });
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$1, null, tabs.map(function (tab) {
+  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$2, null, tabs.map(function (tab) {
     var key = tab.key,
         component = tab.component,
         testID = tab.testID;
@@ -13778,7 +14281,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
         testID = tab.testID;
     var active = selectedTabKey === key;
     var inactiveIcon = getInactiveIcon(icon);
-    return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
+    return /*#__PURE__*/React__default["default"].createElement(ReactNative.TouchableWithoutFeedback, {
       key: key,
       onPress: function onPress() {
         return onTabPress(key);
@@ -13797,388 +14300,1621 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
-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(reactNative.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
-};
-
-var StyledCard = index$1(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
+var genLoadingIndicatorStyles = function genLoadingIndicatorStyles(theme, intent) {
   return {
-    borderRadius: theme.__hd__.card.radii["default"],
-    overflow: 'hidden'
+    backgroundColor: theme.__hd__.button.colors[intent]
   };
-});
-
-var Card = function Card(props) {
-  return /*#__PURE__*/React__default["default"].createElement(StyledCard, props);
-};
-
-var StyledDivider = index$1(reactNative.View)(function (_ref) {
-  var themeMarginHorizontal = _ref.themeMarginHorizontal,
-      themeMarginVertical = _ref.themeMarginVertical,
-      theme = _ref.theme;
-  var horizontalMargin = themeMarginHorizontal !== undefined ? {
-    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
-  } : {};
-  var verticalMargin = themeMarginVertical !== undefined ? {
-    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
-  } : {};
-  return _objectSpread2(_objectSpread2({
-    maxWidth: '100%',
-    borderBottomColor: theme.__hd__.divider.colors["default"],
-    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
-  }, horizontalMargin), verticalMargin);
-});
-
-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$2({
-    themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical,
-    style: style,
-    testID: testID
-  }, nativeProps));
 };
 
-var StyledFABContainer = index$1(reactNative.TouchableHighlight)(function (_ref) {
+var StyledLoadingIndicatorWrapper = index$2(ReactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
-    height: theme.__hd__.fab.sizes.height,
-    width: theme.__hd__.fab.sizes.width,
-    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
-    borderRadius: 999,
-    alignItems: 'center',
+    flexDirection: 'row',
     justifyContent: 'center',
-    overflow: 'hidden'
+    alignItems: 'center',
+    paddingVertical: theme.space.xxsmall
   };
 });
-var StyledFABIcon = index$1(Icon)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    color: theme.__hd__.fab.colors.icon,
-    fontSize: theme.__hd__.fab.fontSizes.buttonIcon
+var StyledLoadingDot = index$2(ReactNative.View)(function (_ref2) {
+  var _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 12 : _ref2$size,
+      themeVariant = _ref2.themeVariant,
+      theme = _ref2.theme;
+
+  var themeStyling = function themeStyling() {
+    switch (themeVariant) {
+      case 'basic-transparent':
+      case 'filled-primary':
+      case 'filled-secondary':
+        return {
+          backgroundColor: theme.__hd__.button.colors.invertedText
+        };
+
+      case 'outlined-primary':
+        return genLoadingIndicatorStyles(theme, 'primary');
+
+      case 'outlined-secondary':
+        return genLoadingIndicatorStyles(theme, 'secondary');
+    }
   };
+
+  return _objectSpread2({
+    width: size,
+    height: size,
+    marginTop: theme.space.xsmall,
+    marginBottom: theme.space.xsmall,
+    marginHorizontal: theme.space.small,
+    borderRadius: theme.space.small
+  }, themeStyling());
 });
 
-var _excluded$1 = ["active"];
-var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
+var _excluded$6 = ["count", "size", "testID", "themeVariant"];
+var AnimatedLoadingIndicatorWrapper = ReactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
+var AnimatedLoadingDot = ReactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 
-var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
-  var active = _ref.active,
-      iconProps = _objectWithoutProperties$1(_ref, _excluded$1);
+var renderDotComponent = function renderDotComponent(_ref) {
+  var index = _ref.index,
+      size = _ref.size,
+      count = _ref.count,
+      animation = _ref.animation,
+      themeVariant = _ref.themeVariant;
+  var interpolatedProgressAnimation = animation.current.interpolate({
+    inputRange: [0.0, (index + 0.5) / (count + 1), (index + 1.0) / (count + 1), (index + 1.5) / (count + 1), 1.0],
+    outputRange: [1.0, 1.36, 1.56, 1.06, 1.0]
+  });
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.Animated.View, {
+    style: ReactNative.StyleSheet.flatten([{
+      transform: [{
+        scale: interpolatedProgressAnimation
+      }]
+    }]),
+    key: index
+  }, /*#__PURE__*/React__default["default"].createElement(AnimatedLoadingDot, {
+    size: size,
+    themeVariant: themeVariant
+  }));
+};
+
+var LoadingIndicator = function LoadingIndicator(_ref2) {
+  var _ref2$count = _ref2.count,
+      count = _ref2$count === void 0 ? 3 : _ref2$count,
+      _ref2$size = _ref2.size,
+      size = _ref2$size === void 0 ? 12 : _ref2$size,
+      testID = _ref2.testID,
+      themeVariant = _ref2.themeVariant,
+      nativeProps = _objectWithoutProperties$1(_ref2, _excluded$6);
 
-  var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
+  var progressAnimation = React.useRef(new ReactNative.Animated.Value(0));
   React.useEffect(function () {
-    var animation = reactNative.Animated.timing(rotateAnimation.current, {
-      toValue: active ? 1 : 0,
+    var animation = ReactNative.Animated.loop(ReactNative.Animated.timing(progressAnimation.current, {
+      toValue: 1,
+      duration: 1200,
+      easing: ReactNative.Easing.linear,
       useNativeDriver: true
-    });
+    }));
     animation.start();
     return function () {
       animation.stop();
     };
-  }, [active]);
-  var interpolatedRotateAnimation = rotateAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '-45deg']
-  });
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: reactNative.StyleSheet.flatten([{
-      transform: [{
-        rotate: interpolatedRotateAnimation
-      }]
-    }])
-  }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, iconProps));
+  }, []);
+
+  var renderLoadingDot = function renderLoadingDot(item, index) {
+    if (typeof renderDotComponent === 'function') {
+      return renderDotComponent({
+        index: index,
+        count: count,
+        size: size,
+        animation: progressAnimation,
+        themeVariant: themeVariant
+      });
+    }
+
+    return null;
+  };
+
+  return /*#__PURE__*/React__default["default"].createElement(AnimatedLoadingIndicatorWrapper, _extends$3({
+    testID: testID
+  }, nativeProps), Array.from(new Array(count), renderLoadingDot, themeVariant));
 };
 
-var FAB = function FAB(_ref) {
-  var onPress = _ref.onPress,
-      icon = _ref.icon,
-      animated = _ref.animated,
-      testID = _ref.testID,
-      active = _ref.active,
-      style = _ref.style;
-  return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
-    testID: testID,
-    onPress: onPress,
-    activeOpacity: 0.6,
-    style: style
-  }, animated ? /*#__PURE__*/React__default["default"].createElement(AnimatedFABIcon, {
-    active: active,
-    icon: icon,
-    testID: "animated-fab-icon"
-  }) : /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
-    icon: icon,
-    testID: "styled-fab-icon"
-  }));
+var PRESSED_COLORS = {
+  primary: 'pressedPrimary',
+  secondary: 'pressedSecondary'
 };
 
-var StyledActionItem = index$1(reactNative.TouchableOpacity)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
-    paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
-    paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
-    paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
-    margin: theme.__hd__.fab.space.actionItemMargin,
-    marginRight: theme.__hd__.fab.space.actionItemMarginRight,
-    backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
-    borderRadius: theme.__hd__.fab.radii.actionItem,
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-end',
-    overflow: 'hidden'
-  };
+var genBasicTransparentContainerStyles = function genBasicTransparentContainerStyles(theme, pressed, disabled) {
+  var borderColorStyling = function borderColorStyling() {
+    if (disabled) {
+      return {
+        borderColor: theme.__hd__.button.colors.disabledBorder
+      };
+    }
+
+    return {
+      borderColor: theme.__hd__.button.colors.invertedText
+    };
+  };
+
+  return _objectSpread2({
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.__hd__.button.space.buttonPadding - theme.__hd__.button.borderWidth["default"],
+    borderWidth: theme.__hd__.button.borderWidth["default"],
+    borderRadius: theme.__hd__.button.radii["default"],
+    backgroundColor: 'transparent',
+    opacity: pressed ? 0.6 : 1
+  }, borderColorStyling());
+};
+
+var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, pressed, disabled) {
+  var backgroundColorStyling = function backgroundColorStyling() {
+    if (disabled) {
+      return {
+        backgroundColor: theme.__hd__.button.colors.disabledBorder
+      };
+    }
+
+    if (pressed) {
+      return {
+        backgroundColor: theme.__hd__.button.colors[PRESSED_COLORS[intent]]
+      };
+    }
+
+    return {
+      backgroundColor: theme.__hd__.button.colors[intent]
+    };
+  };
+
+  return _objectSpread2({
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.__hd__.button.space.buttonPadding,
+    borderRadius: theme.__hd__.button.radii["default"]
+  }, backgroundColorStyling());
+};
+
+var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, pressed, disabled) {
+  var borderColorStyling = function borderColorStyling() {
+    if (disabled) {
+      return {
+        borderColor: theme.__hd__.button.colors.disabledBorder
+      };
+    }
+
+    if (pressed) {
+      return {
+        borderColor: theme.__hd__.button.colors[PRESSED_COLORS[intent]]
+      };
+    }
+
+    return {
+      borderColor: theme.__hd__.button.colors[intent]
+    };
+  };
+
+  return _objectSpread2({
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: theme.__hd__.button.space.buttonPadding - theme.__hd__.button.borderWidth["default"],
+    borderWidth: theme.__hd__.button.borderWidth["default"],
+    borderRadius: theme.__hd__.button.radii["default"],
+    backgroundColor: 'transparent'
+  }, borderColorStyling());
+};
+
+var genOutlineTextStyles = function genOutlineTextStyles(theme, intent, pressed, disabled) {
+  var textColorStyling = function textColorStyling() {
+    if (disabled) {
+      return {
+        color: theme.__hd__.button.colors.disabledText
+      };
+    }
+
+    if (pressed) {
+      return {
+        color: theme.__hd__.button.colors[PRESSED_COLORS[intent]]
+      };
+    }
+
+    return {
+      color: theme.__hd__.button.colors[intent]
+    };
+  };
+
+  return _objectSpread2({
+    fontSize: theme.__hd__.button.fontSize["default"],
+    lineHeight: theme.__hd__.button.lineHeight["default"]
+  }, textColorStyling());
+};
+
+var StyledButtonContainer = index$2(ReactNative.View)(function (_ref) {
+  var _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$pressed = _ref.pressed,
+      pressed = _ref$pressed === void 0 ? false : _ref$pressed,
+      themeVariant = _ref.themeVariant,
+      theme = _ref.theme;
+
+  switch (themeVariant) {
+    case 'basic-transparent':
+      return genBasicTransparentContainerStyles(theme, pressed, disabled);
+
+    case 'filled-primary':
+      return genFilledContainerStyles(theme, 'primary', pressed, disabled);
+
+    case 'filled-secondary':
+      return genFilledContainerStyles(theme, 'secondary', pressed, disabled);
+
+    case 'outlined-primary':
+      return genOutlineContainerStyles(theme, 'primary', pressed, disabled);
+
+    case 'outlined-secondary':
+      return genOutlineContainerStyles(theme, 'secondary', pressed, disabled);
+  }
+});
+var StyledButtonText = index$2(Typography.Text)(function (_ref2) {
+  var disabled = _ref2.disabled,
+      pressed = _ref2.pressed,
+      themeVariant = _ref2.themeVariant,
+      theme = _ref2.theme;
+
+  var themeStyling = function themeStyling() {
+    switch (themeVariant) {
+      case 'basic-transparent':
+        return {
+          fontSize: theme.__hd__.button.fontSize["default"],
+          lineHeight: theme.__hd__.button.lineHeight["default"],
+          color: disabled ? theme.__hd__.button.colors.disabledText : theme.__hd__.button.colors.invertedText
+        };
+
+      case 'filled-primary':
+      case 'filled-secondary':
+        return {
+          fontSize: theme.__hd__.button.fontSize["default"],
+          lineHeight: theme.__hd__.button.lineHeight["default"],
+          color: theme.__hd__.button.colors.invertedText
+        };
+
+      case 'outlined-primary':
+        return genOutlineTextStyles(theme, 'primary', pressed, disabled);
+
+      case 'outlined-secondary':
+        return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+    }
+  };
+
+  return _objectSpread2({
+    flexShrink: 1,
+    textAlign: 'center',
+    fontFamily: theme.__hd__.button.fonts["default"]
+  }, themeStyling());
+});
+var StyledButtonIconWrapper = index$2(ReactNative.View)(function (_ref3) {
+  var themePosition = _ref3.themePosition,
+      theme = _ref3.theme;
+
+  switch (themePosition) {
+    case 'left':
+      return {
+        paddingRight: theme.__hd__.button.space.iconPadding
+      };
+
+    case 'right':
+      return {
+        paddingLeft: theme.__hd__.button.space.iconPadding
+      };
+  }
+});
+var StyledButtonIcon = index$2(Icon)(function (_ref4) {
+  var disabled = _ref4.disabled,
+      pressed = _ref4.pressed,
+      themeVariant = _ref4.themeVariant,
+      theme = _ref4.theme;
+
+  var themeStyling = function themeStyling() {
+    switch (themeVariant) {
+      case 'basic-transparent':
+        return {
+          color: disabled ? theme.__hd__.button.colors.disabledText : theme.__hd__.button.colors.invertedText
+        };
+
+      case 'filled-primary':
+      case 'filled-secondary':
+        return {
+          color: theme.__hd__.button.colors.invertedText
+        };
+
+      case 'outlined-primary':
+        return genOutlineTextStyles(theme, 'primary', pressed, disabled);
+
+      case 'outlined-secondary':
+        return genOutlineTextStyles(theme, 'secondary', pressed, disabled);
+    }
+  };
+
+  return _objectSpread2({
+    fontSize: theme.__hd__.button.sizes.iconSize
+  }, themeStyling());
+});
+
+var FILLED_VARIANTS = {
+  primary: 'filled-primary',
+  secondary: 'filled-secondary'
+};
+var OUTLINED_VARIANTS = {
+  primary: 'outlined-primary',
+  secondary: 'outlined-secondary'
+};
+var getThemeVariant = function getThemeVariant(variant, intent) {
+  switch (variant) {
+    case 'basic-transparent':
+      return variant;
+
+    case 'filled':
+      return FILLED_VARIANTS[intent];
+
+    case 'outlined':
+      return OUTLINED_VARIANTS[intent];
+  }
+};
+
+var Button = function Button(_ref) {
+  var accessibilityHint = _ref.accessibilityHint,
+      accessibilityLabel = _ref.accessibilityLabel,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      icon = _ref.icon,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
+      _ref$loading = _ref.loading,
+      loading = _ref$loading === void 0 ? false : _ref$loading,
+      onPress = _ref.onPress,
+      rightIcon = _ref.rightIcon,
+      style = _ref.style,
+      testID = _ref.testID,
+      text = _ref.text,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.Pressable, {
+    accessibilityHint: accessibilityHint,
+    accessibilityLabel: accessibilityLabel,
+    disabled: disabled || loading,
+    onPress: onPress,
+    testID: testID
+  }, function (_ref2) {
+    var pressed = _ref2.pressed;
+    return /*#__PURE__*/React__default["default"].createElement(StyledButtonContainer, {
+      disabled: disabled,
+      pressed: pressed,
+      style: style,
+      themeVariant: getThemeVariant(variant, intent)
+    }, loading === true ? /*#__PURE__*/React__default["default"].createElement(LoadingIndicator, {
+      testID: "".concat(testID, "-loading-indicator"),
+      themeVariant: getThemeVariant(variant, intent)
+    }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, icon !== undefined && /*#__PURE__*/React__default["default"].createElement(StyledButtonIconWrapper, {
+      themePosition: "left"
+    }, /*#__PURE__*/React__default["default"].createElement(StyledButtonIcon, {
+      disabled: disabled,
+      icon: icon,
+      pressed: pressed,
+      testID: "".concat(testID, "-left-icon"),
+      themeVariant: getThemeVariant(variant, intent)
+    })), /*#__PURE__*/React__default["default"].createElement(StyledButtonText, {
+      disabled: disabled,
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      pressed: pressed,
+      themeVariant: getThemeVariant(variant, intent)
+    }, text), rightIcon !== undefined && /*#__PURE__*/React__default["default"].createElement(StyledButtonIconWrapper, {
+      themePosition: "right"
+    }, /*#__PURE__*/React__default["default"].createElement(StyledButtonIcon, {
+      disabled: disabled,
+      icon: rightIcon,
+      pressed: pressed,
+      testID: "".concat(testID, "-right-icon"),
+      themeVariant: getThemeVariant(variant, intent)
+    }))));
+  });
+};
+
+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(ReactNative.TouchableOpacity, {
+    style: style,
+    onPress: onPress,
+    testID: testID,
+    hitSlop: hitSlop
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon,
+    size: size,
+    intent: intent
+  }));
+};
+
+var CompoundButton = Button;
+CompoundButton.Icon = IconButton;
+
+var StyledCard = index$2(ReactNative.View)(function (_ref) {
+  var themeVariant = _ref.themeVariant,
+      theme = _ref.theme;
+  var sharedStyles = {
+    borderRadius: theme.__hd__.card.radii["default"],
+    overflow: 'hidden'
+  };
+  var dataStyles = {
+    flex: 1,
+    flexDirection: 'row'
+  };
+
+  switch (themeVariant) {
+    case 'basic':
+      return sharedStyles;
+
+    case 'data':
+      return _objectSpread2(_objectSpread2({}, sharedStyles), dataStyles);
+  }
 });
-var StyledActionItemText = index$1(Typography.Text)(function (_ref2) {
+var LeftDataCard = index$2(ReactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    paddingLeft: theme.__hd__.fab.space.actionItemTextPaddingLeft,
-    fontSize: theme.__hd__.fab.fontSizes.actionItemText,
-    lineHeight: theme.__hd__.fab.lineHeights.actionItemText,
-    fontFamily: theme.__hd__.fab.fonts.actionItemText
+    backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
+    width: scale(16),
+    height: '100%'
+  };
+});
+
+var _excluded$5 = ["variant", "children"];
+
+var Card = function Card(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
+      children = _ref.children,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$5);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends$3({}, nativeProps, {
+    testID: "card",
+    themeVariant: variant
+  }), variant === 'data' && /*#__PURE__*/React__default["default"].createElement(LeftDataCard, {
+    testID: "data-card-indicator"
+  }), children);
+};
+
+var StyledWrapper$1 = index$2(ReactNative.Animated.View)(function () {
+  return {
+    margin: 0,
+    padding: 0,
+    overflow: 'hidden'
+  };
+});
+var StyledChildWrapper = index$2(ReactNative.View)(function () {
+  return {
+    margin: 0,
+    padding: 0
+  };
+});
+
+var usePrevious = function usePrevious(value) {
+  var ref = React__default["default"].useRef();
+  React__default["default"].useEffect(function () {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+var Collapse = function Collapse(_ref) {
+  var _ref$open = _ref.open,
+      open = _ref$open === void 0 ? false : _ref$open,
+      _ref$keepChildrenMoun = _ref.keepChildrenMounted,
+      keepChildrenMounted = _ref$keepChildrenMoun === void 0 ? false : _ref$keepChildrenMoun,
+      children = _ref.children,
+      testID = _ref.testID,
+      style = _ref.style;
+  var collapseAnim = React__default["default"].useRef(new ReactNative.Animated.Value(0)).current;
+  var innerRef = React__default["default"].useRef(null);
+
+  var _React$useState = React__default["default"].useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      contentHeight = _React$useState2[0],
+      setContentHeight = _React$useState2[1];
+
+  var _React$useState3 = React__default["default"].useState(0),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      maxHeight = _React$useState4[0],
+      setMaxHeight = _React$useState4[1];
+
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isWaitingToClose = _useState2[0],
+      setIsWaitingToClose = _useState2[1];
+
+  var _useState3 = React.useState('percent'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      heightSource = _useState4[0],
+      setHeightSource = _useState4[1];
+
+  var previousOpenState = usePrevious(open);
+  var animatedCallback = React.useCallback(function () {
+    if (open === true) {
+      setIsWaitingToClose(true);
+      setMaxHeight(contentHeight);
+    } else {
+      setIsWaitingToClose(false);
+    }
+  }, [open, contentHeight]);
+  React.useEffect(function () {
+    if (open !== previousOpenState && previousOpenState !== undefined) {
+      var useHeightValue = maxHeight || 100;
+      setHeightSource(useHeightValue > 100 ? 'container' : 'percent');
+      ReactNative.Animated.timing(collapseAnim, {
+        toValue: open ? useHeightValue : 0,
+        easing: ReactNative.Easing.inOut(ReactNative.Easing.ease),
+        useNativeDriver: false
+      }).start(animatedCallback);
+    }
+  }, [open, previousOpenState, maxHeight]);
+  var checkMaxHeight = React.useCallback(function (_ref2) {
+    var height = _ref2.height;
+
+    if (height > contentHeight) {
+      setContentHeight(height);
+    }
+  }, [contentHeight]);
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
+    onLayout: function onLayout(event) {
+      return checkMaxHeight(event.nativeEvent.layout);
+    },
+    style: [style, {
+      maxHeight: heightSource === 'container' ? collapseAnim : collapseAnim.interpolate({
+        inputRange: [0, 100],
+        outputRange: ['0%', '100%']
+      })
+    }],
+    testID: testID
+  }, (keepChildrenMounted === true || open === true || open === false && isWaitingToClose === true) && /*#__PURE__*/React__default["default"].createElement(StyledChildWrapper, {
+    ref: innerRef
+  }, children));
+};
+
+var StyledDivider = index$2(ReactNative.View)(function (_ref) {
+  var themeMarginHorizontal = _ref.themeMarginHorizontal,
+      themeMarginVertical = _ref.themeMarginVertical,
+      theme = _ref.theme;
+  var horizontalMargin = themeMarginHorizontal !== undefined ? {
+    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
+  } : {};
+  var verticalMargin = themeMarginVertical !== undefined ? {
+    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
+  } : {};
+  return _objectSpread2(_objectSpread2({
+    maxWidth: '100%',
+    borderBottomColor: theme.__hd__.divider.colors["default"],
+    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
+  }, horizontalMargin), verticalMargin);
+});
+
+var _excluded$4 = ["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$4);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$3({}, nativeProps, {
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }));
+};
+
+var AnimatedPressable = ReactNative.Animated.createAnimatedComponent(ReactNative.Pressable);
+var StyledContainer$1 = index$2(ReactNative.View)(function (_ref) {
+  var theme = _ref.theme,
+      enableShadow = _ref.enableShadow;
+  return _objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
+    shadowColor: enableShadow ? theme.__hd__.drawer.colors.shadow : 'transparent',
+    shadowOffset: theme.__hd__.drawer.shadows.offset,
+    shadowOpacity: theme.__hd__.drawer.shadows.opacity,
+    shadowRadius: theme.__hd__.drawer.shadows.radius,
+    overflow: 'hidden',
+    zIndex: 9999,
+    elevation: 9999
+  });
+});
+var StyledBackdrop$1 = index$2(AnimatedPressable)(function (_ref2) {
+  var theme = _ref2.theme;
+  return _objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
+    backgroundColor: theme.__hd__.drawer.colors.backdrop
+  });
+});
+var StyledDrawerContainer = index$2(ReactNative.Animated.View)(function (_ref3) {
+  var theme = _ref3.theme,
+      enableShadow = _ref3.enableShadow;
+  return {
+    borderBottomLeftRadius: theme.__hd__.drawer.radii["default"],
+    borderBottomRightRadius: theme.__hd__.drawer.radii["default"],
+    backgroundColor: theme.__hd__.drawer.colors.background,
+    elevation: enableShadow ? theme.__hd__.drawer.shadows.elevation : undefined,
+    overflow: 'hidden'
   };
 });
 
-var ActionItem = function ActionItem(_ref) {
-  var icon = _ref.icon,
-      title = _ref.title,
-      onPress = _ref.onPress,
-      style = _ref.style,
-      testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(StyledActionItem, {
-    style: style,
-    onPress: onPress,
-    testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    icon: icon
-  }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title));
-};
+var Drawer = function Drawer(_ref) {
+  var visible = _ref.visible,
+      children = _ref.children,
+      _ref$hasBackdrop = _ref.hasBackdrop,
+      hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
+      onDismiss = _ref.onDismiss,
+      testID = _ref.testID;
+  var animatedValue = React.useRef(new ReactNative.Animated.Value(visible ? 1 : 0)).current;
+
+  var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      height = _useState2[0],
+      setHeight = _useState2[1];
+
+  var enableShadow = visible && !hasBackdrop;
+  var interpolateTranslateY = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-height, 0]
+  });
+  var interpolateBackdropOpacity = hasBackdrop ? animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.35]
+  }) : 0;
+  React.useEffect(function () {
+    var animation = ReactNative.Animated.timing(animatedValue, {
+      toValue: visible ? 1 : 0,
+      easing: ReactNative.Easing.inOut(ReactNative.Easing.cubic),
+      useNativeDriver: true
+    });
+    animation.start();
+    return function () {
+      return animation.stop();
+    };
+  }, [visible]);
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$1, {
+    testID: testID,
+    enableShadow: enableShadow,
+    pointerEvents: "box-none"
+  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop$1, {
+    pointerEvents: visible ? 'auto' : 'box-none',
+    onPress: onDismiss,
+    style: {
+      opacity: interpolateBackdropOpacity
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(StyledDrawerContainer, {
+    enableShadow: enableShadow,
+    onLayout: function onLayout(_ref2) {
+      var nativeEvent = _ref2.nativeEvent;
+      return setHeight(nativeEvent.layout.height);
+    },
+    style: {
+      transform: [{
+        translateY: interpolateTranslateY
+      }]
+    }
+  }, children));
+};
+
+var StyledFABContainer = index$2(ReactNative.TouchableHighlight)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: theme.__hd__.fab.colors.buttonBackground,
+    borderRadius: theme.radii.rounded,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    alignSelf: 'flex-start',
+    paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
+    paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
+    flexDirection: 'row'
+  };
+});
+var StyledFABIcon = index$2(Icon)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    color: theme.__hd__.fab.colors.icon,
+    lineHeight: theme.__hd__.fab.lineHeights.icon,
+    textAlignVertical: 'center',
+    textAlign: 'center'
+  };
+});
+var StyledFABText = index$2(ReactNative.Text)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    fontFamily: theme.__hd__.fab.fonts.title,
+    fontSize: theme.__hd__.fab.fontSizes.title,
+    lineHeight: theme.__hd__.fab.lineHeights.title,
+    color: theme.__hd__.fab.colors.titleText,
+    textAlignVertical: 'center',
+    textAlign: 'center',
+    marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
+  };
+});
+
+var _excluded$3 = ["active"];
+var AnimatedIcons = ReactNative.Animated.createAnimatedComponent(StyledFABIcon);
+
+var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
+  var active = _ref.active,
+      iconProps = _objectWithoutProperties$1(_ref, _excluded$3);
+
+  var rotateAnimation = React.useRef(new ReactNative.Animated.Value(active ? 1 : 0));
+  React.useEffect(function () {
+    var animation = ReactNative.Animated.timing(rotateAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true
+    });
+    animation.start();
+    return function () {
+      animation.stop();
+    };
+  }, [active]);
+  var interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '-45deg']
+  });
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.Animated.View, {
+    style: ReactNative.StyleSheet.flatten([{
+      transform: [{
+        rotate: interpolatedRotateAnimation
+      }]
+    }])
+  }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, iconProps));
+};
+
+var IconOnlyContent = function IconOnlyContent(_ref) {
+  var icon = _ref.icon,
+      animated = _ref.animated,
+      active = _ref.active;
+
+  if (animated) {
+    return /*#__PURE__*/React__default["default"].createElement(AnimatedFABIcon, {
+      active: active,
+      icon: icon,
+      testID: "animated-fab-icon"
+    });
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
+    icon: icon,
+    testID: "styled-fab-icon"
+  });
+};
+
+var IconWithTextContent = function IconWithTextContent(_ref2) {
+  var icon = _ref2.icon,
+      title = _ref2.title;
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
+    size: "xsmall",
+    icon: icon,
+    testID: "styled-fab-icon"
+  }), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
+};
+
+var FAB = function FAB(_ref3) {
+  var onPress = _ref3.onPress,
+      title = _ref3.title,
+      icon = _ref3.icon,
+      animated = _ref3.animated,
+      testID = _ref3.testID,
+      active = _ref3.active,
+      style = _ref3.style;
+  var isIconOnly = !title;
+  return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
+    testID: testID,
+    style: style,
+    onPress: onPress,
+    activeOpacity: 0.6
+  }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
+    animated: animated,
+    active: active,
+    icon: icon
+  }) : /*#__PURE__*/React__default["default"].createElement(IconWithTextContent, {
+    icon: icon,
+    title: title
+  }));
+};
+
+var StyledActionItem = index$2(ReactNative.TouchableOpacity)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
+    paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
+    paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
+    paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
+    margin: theme.__hd__.fab.space.actionItemMargin,
+    marginRight: theme.__hd__.fab.space.actionItemMarginRight,
+    backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
+    borderRadius: theme.__hd__.fab.radii.actionItem,
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-end',
+    overflow: 'hidden'
+  };
+});
+var StyledActionItemText = index$2(Typography.Text)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    paddingLeft: theme.__hd__.fab.space.actionItemTextPaddingLeft,
+    fontSize: theme.__hd__.fab.fontSizes.actionItemText,
+    lineHeight: theme.__hd__.fab.lineHeights.actionItemText,
+    fontFamily: theme.__hd__.fab.fonts.actionItemText
+  };
+});
+
+var ActionItem = function ActionItem(_ref) {
+  var icon = _ref.icon,
+      title = _ref.title,
+      onPress = _ref.onPress,
+      style = _ref.style,
+      testID = _ref.testID;
+  return /*#__PURE__*/React__default["default"].createElement(StyledActionItem, {
+    style: style,
+    onPress: onPress,
+    testID: testID
+  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    icon: icon
+  }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title));
+};
+
+var StyledContainer = index$2(ReactNative.View)({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end'
+});
+var StyledActionGroupContainer = index$2(ReactNative.Animated.View)({
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+  width: '70%'
+});
+var StyledFAB = index$2(FAB)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    marginRight: theme.__hd__.fab.space.buttonMarginRight,
+    marginTop: theme.__hd__.fab.space.buttonMarginTop,
+    alignSelf: 'flex-end'
+  };
+});
+var StyledBackdrop = index$2(ReactNative.Animated.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: theme.__hd__.fab.colors.backdropBackground
+  };
+});
+var StyledHeaderText = index$2(Typography.Text)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    fontSize: theme.__hd__.fab.fontSizes.header,
+    lineHeight: theme.__hd__.fab.lineHeights.header,
+    fontFamily: theme.__hd__.fab.fonts.header,
+    marginRight: theme.__hd__.fab.space.headerTextMarginRight,
+    marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
+    textAlign: 'right'
+  };
+});
+
+var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
+  var style = _ref.style,
+      items = _ref.items;
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.View, {
+    style: style
+  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
+    return /*#__PURE__*/React__default["default"].createElement(ActionItem, _extends$3({
+      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,
+      fabTitle = _ref2.fabTitle;
+  var tranlateXAnimation = React.useRef(new ReactNative.Animated.Value(active ? 1 : 0));
+  React.useEffect(function () {
+    var animation = ReactNative.Animated.timing(tranlateXAnimation.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: true
+    });
+    animation.start();
+  }, [active]);
+  var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [400, 0]
+  });
+  var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 0.9]
+  });
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
+    testID: testID,
+    pointerEvents: "box-none",
+    style: style
+  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
+    pointerEvents: active ? 'auto' : 'box-none',
+    testID: "back-drop",
+    style: {
+      opacity: interpolatedOpacityAnimation
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
+    testID: "action-group",
+    style: {
+      transform: [{
+        translateX: interpolatedTranlateXAnimation
+      }]
+    }
+  }, headerTitle && /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
+    testID: "header-text"
+  }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
+    items: items
+  })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+    testID: "fab",
+    icon: "add",
+    onPress: onPress,
+    animated: true,
+    active: active,
+    title: fabTitle
+  }));
+};
+
+var index$1 = Object.assign(FAB, {
+  ActionGroup: ActionGroup
+});
+
+var HalfCircleWrapper = index$2(ReactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    width: theme.__hd__.progress.sizes.radius,
+    height: theme.__hd__.progress.sizes.radius * 2,
+    overflow: 'hidden'
+  };
+});
+var HalfCircleInnerFG = index$2(ReactNative.View)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeIntent = _ref2.themeIntent;
+  return {
+    width: theme.__hd__.progress.sizes.radius * 2,
+    height: theme.__hd__.progress.sizes.radius * 2,
+    backgroundColor: theme.__hd__.progress.colors[themeIntent],
+    borderRadius: theme.__hd__.progress.radii["default"]
+  };
+});
+var HalfCircleInnerBG = index$2(ReactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    width: theme.__hd__.progress.sizes.radius * 2,
+    height: theme.__hd__.progress.sizes.radius * 2,
+    backgroundColor: theme.__hd__.progress.colors.background,
+    borderRadius: theme.__hd__.progress.radii["default"]
+  };
+});
+var DonutCircle = index$2(ReactNative.View)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    position: 'absolute',
+    top: theme.__hd__.progress.sizes.strokeWidth,
+    left: theme.__hd__.progress.sizes.strokeWidth,
+    width: theme.__hd__.progress.sizes.radius * 2 - theme.__hd__.progress.sizes.strokeWidth * 2,
+    height: theme.__hd__.progress.sizes.radius * 2 - theme.__hd__.progress.sizes.strokeWidth * 2,
+    zIndex: 3,
+    backgroundColor: theme.__hd__.progress.colors.innerBackground,
+    borderRadius: theme.__hd__.progress.radii["default"],
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+});
+var StrokeEnd = index$2(ReactNative.View)(function (_ref5) {
+  var theme = _ref5.theme,
+      themeIntent = _ref5.themeIntent;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: theme.__hd__.progress.sizes.radius - theme.__hd__.progress.sizes.strokeWidth / 2,
+    width: theme.__hd__.progress.sizes.strokeWidth,
+    height: theme.__hd__.progress.sizes.strokeWidth,
+    borderRadius: theme.__hd__.progress.radii["default"],
+    backgroundColor: theme.__hd__.progress.colors[themeIntent],
+    zIndex: 2
+  };
+});
+
+var _excluded$2 = ["value", "intent", "style", "testID"];
+
+var HalfCircle = function HalfCircle(_ref) {
+  var type = _ref.type,
+      _ref$themeIntent = _ref.themeIntent,
+      themeIntent = _ref$themeIntent === void 0 ? 'primary' : _ref$themeIntent;
+  return /*#__PURE__*/React__default["default"].createElement(HalfCircleWrapper, null, type === 'background' ? /*#__PURE__*/React__default["default"].createElement(HalfCircleInnerBG, null) : /*#__PURE__*/React__default["default"].createElement(HalfCircleInnerFG, {
+    themeIntent: themeIntent
+  }));
+};
+
+var ProgressCircle = function ProgressCircle(_ref2) {
+  var value = _ref2.value,
+      _ref2$intent = _ref2.intent,
+      intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
+      style = _ref2.style,
+      testID = _ref2.testID,
+      nativeProps = _objectWithoutProperties$1(_ref2, _excluded$2);
+
+  var theme = useTheme();
+  var radius = theme.__hd__.progress.sizes.radius;
+  var progressAnimatedValue = React.useRef(new ReactNative.Animated.Value(0));
+  React.useEffect(function () {
+    var animation = ReactNative.Animated.timing(progressAnimatedValue.current, {
+      toValue: value,
+      useNativeDriver: true
+    });
+    animation.start();
+    return function () {
+      return animation.stop();
+    };
+  }, [value]); // Animate progress circle: 0% => 50%
+
+  var interpolateRotateRightHalf = progressAnimatedValue.current.interpolate({
+    inputRange: [0, 50],
+    outputRange: ['0deg', '180deg'],
+    extrapolate: 'clamp'
+  });
+  var interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate({
+    inputRange: [50, 51],
+    outputRange: [1, 0],
+    extrapolate: 'clamp'
+  }); // Animate progress circle: 50% => 100%
+
+  var interpolateRotateSecondHalf = progressAnimatedValue.current.interpolate({
+    inputRange: [50, 100],
+    outputRange: ['0deg', '180deg'],
+    extrapolate: 'clamp'
+  }); // Curve at the end of progress stroke
+
+  var interpolateDotRotate = progressAnimatedValue.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: ['0deg', '360deg'],
+    extrapolate: 'clamp'
+  });
+  return /*#__PURE__*/React__default["default"].createElement(ReactNative.View, _extends$3({}, nativeProps, {
+    testID: testID,
+    style: style
+  }), /*#__PURE__*/React__default["default"].createElement(ReactNative.View, {
+    style: {
+      flexDirection: 'row'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(ReactNative.View, null, /*#__PURE__*/React__default["default"].createElement(HalfCircle, {
+    type: "foreground",
+    themeIntent: intent
+  }), /*#__PURE__*/React__default["default"].createElement(ReactNative.Animated.View, {
+    style: _objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
+      transform: [{
+        translateX: radius / 2
+      }, {
+        rotate: interpolateRotateSecondHalf
+      }, {
+        translateX: -radius / 2
+      }]
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(HalfCircle, {
+    type: "background"
+  }))), /*#__PURE__*/React__default["default"].createElement(ReactNative.View, {
+    style: {
+      transform: [{
+        rotate: '180deg'
+      }],
+      zIndex: 1
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(HalfCircle, {
+    type: "foreground",
+    themeIntent: intent
+  }), /*#__PURE__*/React__default["default"].createElement(ReactNative.Animated.View, {
+    style: _objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
+      transform: [{
+        translateX: radius / 2
+      }, {
+        rotate: interpolateRotateRightHalf
+      }, {
+        translateX: -radius / 2
+      }],
+      opacity: interpolateOpacityRightHalf
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(HalfCircle, {
+    type: "background"
+  }))), /*#__PURE__*/React__default["default"].createElement(StrokeEnd, {
+    themeIntent: intent
+  }), /*#__PURE__*/React__default["default"].createElement(ReactNative.Animated.View, {
+    style: _objectSpread2(_objectSpread2({}, ReactNative.StyleSheet.absoluteFillObject), {}, {
+      zIndex: 2,
+      transform: [{
+        rotate: interpolateDotRotate
+      }]
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(StrokeEnd, {
+    themeIntent: intent
+  })), /*#__PURE__*/React__default["default"].createElement(DonutCircle, null, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+    fontSize: "xlarge"
+  }, "".concat(value, "%")))));
+};
+
+var StyledWrapper = index$2(ReactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.progress.sizes.barHeight,
+    alignSelf: 'stretch',
+    backgroundColor: theme.__hd__.progress.colors.background,
+    overflow: 'hidden'
+  };
+});
+var StyledInner = index$2(ReactNative.Animated.View)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeIntent = _ref2.themeIntent;
+  return {
+    flex: 1,
+    alignSelf: 'stretch',
+    backgroundColor: theme.__hd__.progress.colors[themeIntent]
+  };
+});
+
+var _excluded$1 = ["value", "intent", "style", "testID"];
+
+var ProgressBar = function ProgressBar(_ref) {
+  var value = _ref.value,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
+      style = _ref.style,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded$1);
+
+  var _useState = React.useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      width = _useState2[0],
+      setWidth = _useState2[1];
+
+  var progressAnimatedValue = React.useRef(new ReactNative.Animated.Value(0));
+  React.useEffect(function () {
+    var animation = ReactNative.Animated.timing(progressAnimatedValue.current, {
+      toValue: value,
+      useNativeDriver: true
+    });
+    animation.start();
+    return function () {
+      return animation.stop();
+    };
+  }, [value]);
+  var interpolateTranslateX = progressAnimatedValue.current.interpolate({
+    inputRange: [0, 100],
+    outputRange: [-width, 0],
+    extrapolate: 'clamp'
+  });
+  var interpolateBorderRadius = progressAnimatedValue.current.interpolate({
+    inputRange: [99, 100],
+    outputRange: [999, 0],
+    extrapolate: 'clamp'
+  });
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper, _extends$3({}, nativeProps, {
+    testID: testID,
+    style: style
+  }), /*#__PURE__*/React__default["default"].createElement(StyledInner, {
+    themeIntent: intent,
+    onLayout: function onLayout(_ref2) {
+      var nativeEvent = _ref2.nativeEvent;
+      return setWidth(nativeEvent.layout.width);
+    },
+    style: {
+      transform: [{
+        translateX: interpolateTranslateX
+      }],
+      borderTopRightRadius: interpolateBorderRadius,
+      borderBottomRightRadius: interpolateBorderRadius
+    }
+  }));
+};
+
+var Progress = {
+  Circle: ProgressCircle,
+  Bar: ProgressBar
+};
+
+var childrenWithOverriddenStyle = function childrenWithOverriddenStyle(children) {
+  return React.Children.map(children, function (child) {
+    var element = child;
+    return (
+      /*#__PURE__*/
+      // Add a wrapper to ensure layout is calculated correctly
+      React__default["default"].createElement(ReactNative.View, {
+        style: ReactNative.StyleSheet.absoluteFill,
+        collapsable: false
+      }, /*#__PURE__*/React__default["default"].cloneElement(element, _objectSpread2(_objectSpread2({}, element.props), {}, {
+        // Override styles so that each page will fill the parent.
+        style: [element.props.style, ReactNative.StyleSheet.absoluteFill]
+      })))
+    );
+  });
+};
+
+var VIEW_MANAGER_NAME = 'RNCViewPager';
+var PagerViewViewManager = ReactNative.requireNativeComponent(VIEW_MANAGER_NAME);
+function getViewManagerConfig() {
+  var viewManagerName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : VIEW_MANAGER_NAME;
+  return ReactNative.UIManager.getViewManagerConfig(viewManagerName);
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+/**
+ * Container that allows to flip left and right between child views. Each
+ * child view of the `PagerView` will be treated as a separate page
+ * and will be stretched to fill the `PagerView`.
+ *
+ * It is important all children are `<View>`s and not composite components.
+ * You can set style properties like `padding` or `backgroundColor` for each
+ * child. It is also important that each child have a `key` prop.
+ *
+ * Example:
+ *
+ * ```
+ * render: function() {
+ *   return (
+ *     <PagerView
+ *       style={styles.PagerView}
+ *       initialPage={0}>
+ *       <View style={styles.pageStyle} key="1">
+ *         <Text>First page</Text>
+ *       </View>
+ *       <View style={styles.pageStyle} key="2">
+ *         <Text>Second page</Text>
+ *       </View>
+ *     </PagerView>
+ *   );
+ * }
+ *
+ * ...
+ *
+ * var styles = {
+ *   ...
+ *   PagerView: {
+ *     flex: 1
+ *   },
+ *   pageStyle: {
+ *     alignItems: 'center',
+ *     padding: 20,
+ *   }
+ * }
+ * ```
+ */
+
+var PagerView = /*#__PURE__*/function (_React$Component) {
+  _inherits$1(PagerView, _React$Component);
+
+  var _super = _createSuper(PagerView);
+
+  function PagerView() {
+    var _this;
+
+    _classCallCheck$1(this, PagerView);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized$1(_this), "isScrolling", false);
+
+    _defineProperty(_assertThisInitialized$1(_this), "PagerView", /*#__PURE__*/React__default["default"].createRef());
+
+    _defineProperty(_assertThisInitialized$1(_this), "getInnerViewNode", function () {
+      return _this.PagerView.current.getInnerViewNode();
+    });
+
+    _defineProperty(_assertThisInitialized$1(_this), "_onPageScroll", function (e) {
+      if (_this.props.onPageScroll) {
+        _this.props.onPageScroll(e);
+      } // Not implemented on iOS yet
+
+
+      if (ReactNative.Platform.OS === 'android') {
+        if (_this.props.keyboardDismissMode === 'on-drag') {
+          ReactNative.Keyboard.dismiss();
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized$1(_this), "_onPageScrollStateChanged", function (e) {
+      if (_this.props.onPageScrollStateChanged) {
+        _this.props.onPageScrollStateChanged(e);
+      }
+
+      _this.isScrolling = e.nativeEvent.pageScrollState === 'dragging';
+    });
+
+    _defineProperty(_assertThisInitialized$1(_this), "_onPageSelected", function (e) {
+      if (_this.props.onPageSelected) {
+        _this.props.onPageSelected(e);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized$1(_this), "setPage", function (selectedPage) {
+      ReactNative.UIManager.dispatchViewManagerCommand(ReactNative__default["default"].findNodeHandle(_assertThisInitialized$1(_this)), getViewManagerConfig().Commands.setPage, [selectedPage]);
+    });
+
+    _defineProperty(_assertThisInitialized$1(_this), "setPageWithoutAnimation", function (selectedPage) {
+      ReactNative.UIManager.dispatchViewManagerCommand(ReactNative__default["default"].findNodeHandle(_assertThisInitialized$1(_this)), getViewManagerConfig().Commands.setPageWithoutAnimation, [selectedPage]);
+    });
+
+    _defineProperty(_assertThisInitialized$1(_this), "setScrollEnabled", function (scrollEnabled) {
+      ReactNative.UIManager.dispatchViewManagerCommand(ReactNative__default["default"].findNodeHandle(_assertThisInitialized$1(_this)), getViewManagerConfig().Commands.setScrollEnabled, [scrollEnabled]);
+    });
+
+    _defineProperty(_assertThisInitialized$1(_this), "_onMoveShouldSetResponderCapture", function () {
+      return _this.isScrolling;
+    });
+
+    return _this;
+  }
+
+  _createClass$1(PagerView, [{
+    key: "deducedLayoutDirection",
+    get: function get() {
+      var shouldUseDeviceRtlSetup = !this.props.layoutDirection || this.props.layoutDirection === 'locale';
+
+      if (shouldUseDeviceRtlSetup) {
+        return ReactNative.I18nManager.isRTL ? 'rtl' : 'ltr';
+      } else {
+        return this.props.layoutDirection;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React__default["default"].createElement(PagerViewViewManager, _extends({}, this.props, {
+        ref: this.PagerView
+        /** TODO: Fix ref type */
+        ,
+        style: this.props.style,
+        layoutDirection: this.deducedLayoutDirection,
+        onPageScroll: this._onPageScroll,
+        onPageScrollStateChanged: this._onPageScrollStateChanged,
+        onPageSelected: this._onPageSelected,
+        onMoveShouldSetResponderCapture: this._onMoveShouldSetResponderCapture,
+        children: childrenWithOverriddenStyle(this.props.children)
+      }));
+    }
+  }]);
+
+  return PagerView;
+}(React__default["default"].Component);
 
-var StyledContainer = index$1(reactNative.View)({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-  alignItems: 'flex-end',
-  justifyContent: 'flex-end'
-});
-var StyledActionGroupContainer = index$1(reactNative.Animated.View)({
-  alignItems: 'flex-end',
-  justifyContent: 'flex-end',
-  width: '70%'
+var AnimatedPagerView = ReactNative.Animated.createAnimatedComponent(PagerView);
+var TabContainer$1 = index$2(ReactNative.View)({
+  flex: 1,
+  overflow: 'hidden'
 });
-var StyledFAB = index$1(FAB)(function (_ref) {
-  var theme = _ref.theme;
+var HeaderTabWrapper$1 = index$2(ReactNative.View)(function (_ref) {
+  var theme = _ref.theme,
+      themeInsets = _ref.themeInsets;
   return {
-    marginRight: theme.__hd__.fab.space.buttonMarginRight,
-    marginTop: theme.__hd__.fab.space.buttonMarginTop,
-    alignSelf: 'flex-end'
+    paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
+    borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+    borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom
   };
 });
-var StyledBackdrop = index$1(reactNative.Animated.View)(function (_ref2) {
+var HeaderTab = index$2(ReactNative.View)({
+  flexDirection: 'row'
+});
+var HeaderTabItem$1 = index$2(ReactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    backgroundColor: theme.__hd__.fab.colors.backdropBackground
+    flex: 1,
+    alignItems: 'center',
+    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var StyledHeaderText = index$1(Typography.Text)(function (_ref3) {
-  var theme = _ref3.theme;
+var ContentWrapper$1 = index$2(AnimatedPagerView)({
+  flex: 1
+});
+var TabScreen$1 = index$2(ReactNative.View)({
+  flex: 1
+});
+var StyledIndicator = index$2(ReactNative.Animated.View)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeWidth = _ref3.themeWidth;
   return {
-    fontSize: theme.__hd__.fab.fontSizes.header,
-    lineHeight: theme.__hd__.fab.lineHeights.header,
-    fontFamily: theme.__hd__.fab.fonts.header,
-    marginRight: theme.__hd__.fab.space.headerTextMarginRight,
-    marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
-    textAlign: 'right'
+    width: themeWidth,
+    height: theme.__hd__.tabs.sizes.indicator,
+    backgroundColor: theme.__hd__.tabs.colors.text,
+    position: 'absolute',
+    bottom: 0
   };
 });
 
-var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
-  var style = _ref.style,
-      items = _ref.items;
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    style: style
-  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
-    return /*#__PURE__*/React__default["default"].createElement(ActionItem, _extends$2({
-      key: itemProp.icon
-    }, itemProp));
-  }));
-};
-
-var ActionGroup = function ActionGroup(_ref2) {
-  var headerTitle = _ref2.headerTitle,
-      onPress = _ref2.onPress,
-      active = _ref2.active,
-      style = _ref2.style,
-      items = _ref2.items,
-      testID = _ref2.testID;
-  var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
-  React.useEffect(function () {
-    var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: true
-    });
-    animation.start();
-  }, [active]);
-  var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [400, 0]
-  });
-  var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.9]
+var ActiveTabIndicator = function ActiveTabIndicator(_ref) {
+  var scrollOffsetAnimatedValue = _ref.scrollOffsetAnimatedValue,
+      positionAnimatedValue = _ref.positionAnimatedValue,
+      tabsLength = _ref.tabsLength,
+      tabsWidth = _ref.tabsWidth;
+  var inputRange = [0, tabsLength];
+  var indicatorWidth = tabsWidth / tabsLength;
+  var translateX = ReactNative.Animated.add(scrollOffsetAnimatedValue, positionAnimatedValue).interpolate({
+    inputRange: inputRange,
+    outputRange: [0, tabsLength * indicatorWidth]
   });
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer, {
-    testID: testID,
-    pointerEvents: "box-none",
-    style: style
-  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
-    pointerEvents: active ? 'auto' : 'box-none',
-    testID: "back-drop",
-    style: {
-      opacity: interpolatedOpacityAnimation
-    }
-  }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
-    testID: "action-group",
+  return /*#__PURE__*/React__default["default"].createElement(StyledIndicator, {
+    themeWidth: indicatorWidth,
     style: {
       transform: [{
-        translateX: interpolatedTranlateXAnimation
+        translateX: translateX
       }]
     }
-  }, headerTitle && /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
-    testID: "header-text"
-  }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
-    items: items
-  })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
-    testID: "fab",
-    icon: "add",
-    onPress: onPress,
-    animated: true,
-    active: active
-  }));
+  });
 };
 
-var index = Object.assign(FAB, {
-  ActionGroup: ActionGroup
-});
-
-var TabScreen = index$1(reactNative.View)(function (_ref) {
-  var themeVisibility = _ref.themeVisibility;
-  return {
-    flex: 1,
-    display: themeVisibility === false ? 'none' : 'flex'
-  };
+var TabScreen = index$2(ReactNative.View)({
+  flex: 1
 });
-var TabContainer = index$1(reactNative.View)({
+var TabContainer = index$2(ReactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper = index$1(reactNative.View)({
+var ContentWrapper = index$2(PagerView)({
   flex: 1
 });
-var HeaderTabWrapper = index$1(reactNative.View)(function (_ref2) {
-  var themeInsets = _ref2.themeInsets,
-      theme = _ref2.theme;
+var HeaderTabWrapper = index$2(ReactNative.View)(function (_ref) {
+  var theme = _ref.theme,
+      themeInsets = _ref.themeInsets;
   return {
-    paddingLeft: Math.max(themeInsets.left, themeInsets.right),
-    paddingRight: Math.max(themeInsets.left, themeInsets.right),
-    backgroundColor: theme.__hd__.tabs.colors.background
+    paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
+    borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+    borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom
   };
 });
-var StyledFlatList = index$1(reactNative.FlatList)(function (_ref3) {
-  var theme = _ref3.theme;
+var HeaderTabItem = index$2(ReactNative.Animated.View)(function (_ref2) {
+  var theme = _ref2.theme;
   return {
-    paddingLeft: theme.__hd__.tabs.space.flatListHorizontalPadding,
-    paddingRight: theme.__hd__.tabs.space.flatListHorizontalPadding
+    paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
+    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var HeaderTabItem = index$1(reactNative.View)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingLeft: theme.__hd__.tabs.space.itemHorizontalPadding,
-    paddingRight: theme.__hd__.tabs.space.itemHorizontalPadding,
-    paddingTop: theme.__hd__.tabs.space.itemVerticalPadding,
-    paddingBottom: theme.__hd__.tabs.space.itemVerticalPadding
-  };
+var HeaderTabItemOutlineWrapper = index$2(ReactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return _objectSpread2({
+    paddingHorizontal: theme.__hd__.tabs.space.itemHorizontalPadding,
+    paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
+  }, ReactNative.StyleSheet.absoluteFillObject);
 });
-var StyledHeaderTabIcon = index$1(Icon)(function (_ref5) {
-  var themeActive = _ref5.themeActive,
-      theme = _ref5.theme;
+var HeaderTabItemOutline = index$2(ReactNative.Animated.View)(function (_ref4) {
+  var theme = _ref4.theme,
+      themeActive = _ref4.themeActive;
   return {
-    color: themeActive ? theme.__hd__.tabs.colors.active : theme.__hd__.tabs.colors.inactive
+    borderRadius: theme.__hd__.tabs.radii.outline,
+    backgroundColor: themeActive ? theme.__hd__.tabs.colors.activeBackground : undefined
   };
 });
-var StyledHeaderTabText = index$1(Typography.Text)(function (_ref6) {
-  var themeActive = _ref6.themeActive,
-      theme = _ref6.theme;
+var HeaderTabItemWrapper = index$2(ReactNative.View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
-    marginLeft: theme.__hd__.tabs.space.titleMarginLeft,
-    color: themeActive ? theme.__hd__.tabs.colors.active : theme.__hd__.tabs.colors.inactive
+    paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
+    paddingVertical: theme.__hd__.tabs.space.outlineVerticalPadding
   };
 });
 
-var _excluded = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var useAnimatedValueArray = function useAnimatedValueArray(initialValues) {
+  var refs = React__default["default"].useRef([]);
+  refs.current.length = initialValues.length;
+  initialValues.forEach(function (initialValue, i) {
+    var _refs$current$i;
 
-var Tabs = function Tabs(_ref) {
-  var onTabPress = _ref.onTabPress,
-      _ref$renderActiveTabO = _ref.renderActiveTabOnly,
-      renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
-      selectedTabKey = _ref.selectedTabKey,
-      tabs = _ref.tabs,
-      nativeProps = _objectWithoutProperties$1(_ref, _excluded);
+    refs.current[i] = (_refs$current$i = refs.current[i]) !== null && _refs$current$i !== void 0 ? _refs$current$i : new ReactNative.Animated.Value(initialValue);
+  });
+  return refs.current;
+};
 
-  var flatListRef = React__default["default"].useRef(null);
-  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
-  /**
-   * List of loaded tabs, tabs will be loaded when navigated to.
-   */
+var getTabItem$1 = function getTabItem(_ref) {
+  var item = _ref.item,
+      color = _ref.color,
+      active = _ref.active;
+
+  if (isHeroIcon(item)) {
+    return /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: item,
+      testID: "hero-icon-".concat(item),
+      size: "small",
+      intent: active ? 'info' : 'text'
+    });
+  }
 
-  var _React$useState = React__default["default"].useState([selectedTabKey]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      loaded = _React$useState2[0],
-      setLoaded = _React$useState2[1];
+  if (typeof item === 'string') {
+    return /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+      fontWeight: active ? 'semi-bold' : 'regular',
+      numberOfLines: 1,
+      style: {
+        color: color
+      }
+    }, item);
+  }
 
-  React__default["default"].useEffect(function () {
-    var selectedTabIndex = tabs.findIndex(function (item) {
-      return item.key === selectedTabKey;
-    });
+  return item({
+    color: color
+  });
+};
 
+var ScrollableTab = function ScrollableTab(_ref2) {
+  var onTabPress = _ref2.onTabPress,
+      selectedTabKey = _ref2.selectedTabKey,
+      tabs = _ref2.tabs,
+      containerStyle = _ref2.containerStyle,
+      barStyle = _ref2.barStyle,
+      _ref2$lazy = _ref2.lazy,
+      lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
+      _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
+      lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist;
+  var flatListRef = React__default["default"].useRef(null);
+  var pagerViewRef = React__default["default"].useRef(null);
+  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  var theme = useTheme();
+  var selectedTabIndex = tabs.findIndex(function (item) {
+    return item.key === selectedTabKey;
+  });
+  var tabsAnims = useAnimatedValueArray(tabs.map(function (_, i) {
+    return i === selectedTabIndex ? 1 : 0;
+  }));
+  React__default["default"].useEffect(function () {
     if (selectedTabIndex !== -1) {
       var _flatListRef$current;
 
@@ -14187,18 +15923,25 @@ var Tabs = function Tabs(_ref) {
         viewPosition: 0.5
       });
     }
-  }, [selectedTabKey, tabs]);
-
-  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, {
+    var animation = ReactNative.Animated.parallel(_toConsumableArray$1(tabs.map(function (_, i) {
+      return ReactNative.Animated.timing(tabsAnims[i], {
+        toValue: i === selectedTabIndex ? 1 : 0,
+        duration: 150,
+        useNativeDriver: true
+      });
+    })));
+    animation.start();
+    return function () {
+      return animation.stop();
+    };
+  }, [selectedTabIndex]);
+  return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
+    style: containerStyle
+  }, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper, {
+    themeInsets: insets,
+    style: barStyle
+  }, /*#__PURE__*/React__default["default"].createElement(ReactNative.FlatList, {
     ref: flatListRef,
     horizontal: true,
     data: tabs,
@@ -14206,8 +15949,8 @@ var Tabs = function Tabs(_ref) {
       return String(tab.key);
     },
     showsHorizontalScrollIndicator: false,
-    onScrollToIndexFailed: function onScrollToIndexFailed(_ref2) {
-      var index = _ref2.index;
+    onScrollToIndexFailed: function onScrollToIndexFailed(_ref3) {
+      var index = _ref3.index;
       setTimeout(function () {
         var _flatListRef$current2;
 
@@ -14217,67 +15960,270 @@ var Tabs = function Tabs(_ref) {
         });
       }, 100);
     },
-    renderItem: function renderItem(_ref3) {
-      var tab = _ref3.item;
+    contentContainerStyle: {
+      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding
+    },
+    renderItem: function renderItem(_ref4) {
+      var tab = _ref4.item,
+          index = _ref4.index;
       var key = tab.key,
-          icon = tab.icon,
-          title = tab.title,
-          testID = tab.testID;
+          testID = tab.testID,
+          activeItem = tab.activeItem,
+          originalInactiveItem = tab.inactiveItem,
+          _tab$showBadge = tab.showBadge,
+          showBadge = _tab$showBadge === void 0 ? false : _tab$showBadge;
       var active = selectedTabKey === key;
-      return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
+      var activeAnimated = tabsAnims[index];
+      var outlineScale = active ? activeAnimated.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0.5, 1]
+      }) : 0;
+      var inactiveItem = originalInactiveItem !== null && originalInactiveItem !== void 0 ? originalInactiveItem : activeItem;
+      var tabItem = getTabItem$1({
+        item: active ? activeItem : inactiveItem,
+        color: active ? theme.__hd__.tabs.colors.active : theme.__hd__.tabs.colors.inactive,
+        active: active
+      });
+      return /*#__PURE__*/React__default["default"].createElement(ReactNative.TouchableWithoutFeedback, {
         key: key,
         onPress: function onPress() {
-          return onTabPress(key);
+          var _pagerViewRef$current;
+
+          onTabPress(key);
+          (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(index);
         },
         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) {
+      }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem, null, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutlineWrapper, null, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutline, {
+        themeActive: active,
+        style: {
+          flex: 1,
+          transform: [{
+            scaleX: outlineScale
+          }]
+        }
+      })), /*#__PURE__*/React__default["default"].createElement(HeaderTabItemWrapper, null, /*#__PURE__*/React__default["default"].createElement(Badge$1.Status, {
+        visible: showBadge
+      }, tabItem))));
+    }
+  })), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
+    initialPage: selectedTabIndex,
+    ref: pagerViewRef,
+    onPageSelected: function onPageSelected(e) {
+      var index = e.nativeEvent.position;
+      var selectedItem = tabs[index];
+
+      if (selectedItem) {
+        onTabPress(selectedItem.key);
+      }
+    }
+  }, tabs.map(function (tab, index) {
     var key = tab.key,
         component = tab.component,
         testID = tab.testID;
     var active = selectedTabKey === key;
+    var isLazyScreen = lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
+    return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
+      key: key,
+      testID: testID ? "tab-screen-".concat(testID) : undefined,
+      pointerEvents: active ? 'auto' : 'none',
+      accessibilityElementsHidden: !active,
+      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
+      collapsable: false
+    }, isLazyScreen ? null : component);
+  })));
+};
 
-    if (renderActiveTabOnly && !active) {
-      return null;
-    }
+var getTabItem = function getTabItem(_ref) {
+  var item = _ref.item,
+      color = _ref.color,
+      active = _ref.active;
+
+  if (typeof item === 'string') {
+    return /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+      fontWeight: active ? 'semi-bold' : 'regular',
+      numberOfLines: 1,
+      style: {
+        color: color
+      }
+    }, item);
+  }
 
-    if (!loaded.includes(key)) {
-      // Don't render a screen if we've never navigated to it
-      return null;
+  return item({
+    color: color
+  });
+};
+
+var Tabs = function Tabs(_ref2) {
+  var onTabPress = _ref2.onTabPress,
+      selectedTabKey = _ref2.selectedTabKey,
+      tabs = _ref2.tabs,
+      containerStyle = _ref2.containerStyle,
+      barStyle = _ref2.barStyle,
+      _ref2$lazy = _ref2.lazy,
+      lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
+      _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
+      lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist;
+  var theme = useTheme();
+  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  var pagerViewRef = React__default["default"].useRef(null);
+  var selectedTabIndex = tabs.findIndex(function (item) {
+    return item.key === selectedTabKey;
+  });
+  var scrollOffsetAnimatedValue = React__default["default"].useRef(new ReactNative.Animated.Value(0)).current;
+  var positionAnimatedValue = React__default["default"].useRef(new ReactNative.Animated.Value(0)).current;
+
+  var _React$useState = React__default["default"].useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      tabsWidth = _React$useState2[0],
+      setTabsWidth = _React$useState2[1];
+
+  return /*#__PURE__*/React__default["default"].createElement(TabContainer$1, {
+    style: containerStyle
+  }, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper$1, {
+    themeInsets: insets,
+    style: barStyle
+  }, /*#__PURE__*/React__default["default"].createElement(ReactNative.View, null, /*#__PURE__*/React__default["default"].createElement(HeaderTab, {
+    onLayout: function onLayout(e) {
+      var width = e.nativeEvent.layout.width;
+
+      if (tabsWidth !== width) {
+        setTabsWidth(width);
+      }
     }
+  }, tabs.map(function (tab, index) {
+    var key = tab.key,
+        testID = tab.testID,
+        activeItem = tab.activeItem,
+        originalInactiveItem = tab.inactiveItem,
+        _tab$showBadge = tab.showBadge,
+        showBadge = _tab$showBadge === void 0 ? false : _tab$showBadge;
+    var active = selectedTabKey === key;
+    var inactiveItem = originalInactiveItem !== null && originalInactiveItem !== void 0 ? originalInactiveItem : activeItem;
+    var tabItem = getTabItem({
+      item: active ? activeItem : inactiveItem,
+      color: theme.__hd__.tabs.colors.text,
+      active: active
+    });
+    return /*#__PURE__*/React__default["default"].createElement(ReactNative.TouchableWithoutFeedback, {
+      key: key,
+      onPress: function onPress() {
+        var _pagerViewRef$current;
 
-    return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
+        onTabPress(key);
+        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(index);
+      },
+      testID: testID
+    }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem$1, null, /*#__PURE__*/React__default["default"].createElement(Badge$1.Status, {
+      visible: showBadge
+    }, tabItem)));
+  })), /*#__PURE__*/React__default["default"].createElement(ActiveTabIndicator, {
+    positionAnimatedValue: positionAnimatedValue,
+    scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
+    tabsLength: tabs.length,
+    tabsWidth: tabsWidth
+  }))), /*#__PURE__*/React__default["default"].createElement(ContentWrapper$1, {
+    initialPage: selectedTabIndex,
+    ref: pagerViewRef,
+    onPageSelected: function onPageSelected(e) {
+      var index = e.nativeEvent.position;
+      var selectedItem = tabs[index];
+
+      if (selectedItem) {
+        onTabPress(selectedItem.key);
+      }
+    },
+    onPageScroll: ReactNative.Animated.event([{
+      nativeEvent: {
+        offset: scrollOffsetAnimatedValue,
+        position: positionAnimatedValue
+      }
+    }], {
+      useNativeDriver: true
+    })
+  }, tabs.map(function (tab, index) {
+    var key = tab.key,
+        component = tab.component,
+        testID = tab.testID;
+    var active = selectedTabKey === key;
+    var isLazyScreen = lazy && Math.abs(selectedTabIndex - index) > lazyPreloadDistance;
+    return /*#__PURE__*/React__default["default"].createElement(TabScreen$1, {
       key: key,
       testID: testID ? "tab-screen-".concat(testID) : undefined,
       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);
+      collapsable: false
+    }, isLazyScreen ? null : component);
   })));
 };
 
-exports.Badge = Badge;
+var index = Object.assign(Tabs, {
+  Scroll: ScrollableTab
+});
+
+var BACKGROUND_INTENTS = {
+  success: 'successBackground',
+  warning: 'warningBackground',
+  danger: 'dangerBackground',
+  info: 'infoBackground'
+};
+var StyledView = index$2(ReactNative.View)(function (_ref) {
+  var themeIntent = _ref.themeIntent,
+      theme = _ref.theme;
+  return {
+    borderWidth: theme.__hd__.tag.borderWidths["default"],
+    borderRadius: theme.__hd__.tag.radii["default"],
+    paddingVertical: theme.__hd__.tag.space.verticalPadding,
+    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
+    borderColor: theme.__hd__.tag.colors[themeIntent],
+    backgroundColor: theme.__hd__.tag.colors[BACKGROUND_INTENTS[themeIntent]]
+  };
+});
+var StyledText = index$2(ReactNative.Text)(function (_ref2) {
+  var themeIntent = _ref2.themeIntent,
+      theme = _ref2.theme;
+  return {
+    fontFamily: theme.__hd__.tag.fonts["default"],
+    fontSize: theme.__hd__.tag.fontSizes["default"],
+    color: theme.__hd__.tag.colors[themeIntent],
+    includeFontPadding: false,
+    textAlignVertical: 'center',
+    textAlign: 'center'
+  };
+});
+
+var _excluded = ["content", "intent", "style", "testID"];
+
+var Tag = function Tag(_ref) {
+  var content = _ref.content,
+      _ref$intent = _ref.intent,
+      intent = _ref$intent === void 0 ? 'info' : _ref$intent,
+      style = _ref.style,
+      testID = _ref.testID,
+      nativeProps = _objectWithoutProperties$1(_ref, _excluded);
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$3({}, nativeProps, {
+    themeIntent: intent,
+    style: style,
+    testID: testID
+  }), /*#__PURE__*/React__default["default"].createElement(StyledText, {
+    themeIntent: intent
+  }, content));
+};
+
+exports.Avatar = Avatar;
+exports.Badge = Badge$1;
 exports.BottomNavigation = BottomNavigation;
-exports.Button = Button;
+exports.Button = CompoundButton;
 exports.Card = Card;
+exports.Collapse = Collapse;
 exports.Divider = Divider;
-exports.FAB = index;
+exports.Drawer = Drawer;
+exports.FAB = index$1;
 exports.Icon = Icon;
-exports.Tabs = Tabs;
+exports.Progress = Progress;
+exports.Tabs = index;
+exports.Tag = Tag;
 exports.ThemeProvider = ThemeProvider;
 exports.Typography = Typography;
 exports.getTheme = getTheme;