@hero-design/rn 7.20.1 → 7.22.0

package/lib/index.js

@@ -7,6 +7,7 @@ var React = require('react');
 var reactNativeVectorIcons = require('react-native-vector-icons');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var DateTimePicker = require('@react-native-community/datetimepicker');
+var RnSlider = require('@react-native-community/slider');
 var PagerView = require('react-native-pager-view');
 var events = require('events');
 var reactNativeWebview = require('react-native-webview');
@@ -34,6 +35,7 @@ function _interopNamespace(e) {
 var reactNative__namespace = /*#__PURE__*/_interopNamespace(reactNative);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultLegacy(DateTimePicker);
+var RnSlider__default = /*#__PURE__*/_interopDefaultLegacy(RnSlider);
 var PagerView__default = /*#__PURE__*/_interopDefaultLegacy(PagerView);
 
 function ownKeys(object, enumerableOnly) {
@@ -300,12 +302,14 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
 
 var BASE_BORDER_WIDTH = 1;
 var BASE_SPACE = 8;
+var BASE_SIZE = 8;
 var BASE_FONT = 'BeVietnamPro';
 var BASE_FONT_SIZE = 10;
 var BASE_RADIUS = 4;
 var scale$1 = {
   borderWidth: BASE_BORDER_WIDTH,
   space: BASE_SPACE,
+  size: BASE_SIZE,
   font: BASE_FONT,
   fontSize: BASE_FONT_SIZE,
   radius: BASE_RADIUS
@@ -1337,6 +1341,7 @@ var swagSystemPalette = {
   shadow: palette$5.greyLight45,
   __alpha__globalPrimary: palette$5.maasstrichtBlue,
   __alpha__globalSecondary1: palette$5.maasstrichtBlueLight30,
+  __alpha__globalSecondary4: palette$5.maasstrichtBlueLight90,
   __alpha__globalNeutral3: palette$5.greyLight90,
   __alpha__globalLabel1: palette$5.vermilion,
   __alpha__globalLabel2: palette$5.deepSaffron,
@@ -1347,6 +1352,7 @@ var swagSystemPalette = {
   __alpha__globalLabel7: palette$5.seashell,
   __alpha__globalLabel8: palette$5.honeydew,
   __alpha__globalLabel9: palette$5.aliceBlue,
+  __alpha__primary1: palette$2.scarletGum,
   __alpha__primary2: palette$2.mauve,
   __alpha__secondary1: palette$2.scarletGumLight30,
   __alpha__secondary2: palette$2.scarletGumLight50,
@@ -1454,6 +1460,20 @@ var getSpace = function getSpace(baseSpace) {
   };
 };
 
+var getSizes = function getSizes(baseSize) {
+  return _objectSpread2(_objectSpread2({}, getSpace(baseSize)), {}, {
+    xxxxxlarge: scale(baseSize * 8),
+    '6xlarge': scale(baseSize * 9),
+    '7xlarge': scale(baseSize * 10),
+    '9xlarge': scale(baseSize * 12),
+    '14xlarge': scale(baseSize * 17),
+    '15xlarge': scale(baseSize * 18),
+    '18xlarge': scale(baseSize * 21),
+    '19xlarge': scale(baseSize * 22) // 176
+
+  });
+};
+
 var getBorderWidths = function getBorderWidths(baseBorderWidth) {
   return {
     base: baseBorderWidth,
@@ -1479,6 +1499,7 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var lineHeights = getLineHeights(fontSizes);
   var borderWidths = getBorderWidths(scale.borderWidth);
   var space = getSpace(scale.space);
+  var sizes = getSizes(scale.size);
   var radii = getRadii(scale.radius);
   return {
     colors: _objectSpread2({}, systemPalette),
@@ -1487,6 +1508,7 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
     lineHeights: lineHeights,
     borderWidths: borderWidths,
     space: space,
+    sizes: sizes,
     radii: radii
   };
 };
@@ -1518,7 +1540,7 @@ var getAlertTheme = function getAlertTheme(theme) {
     divider: theme.colors.outline
   };
   var sizes = {
-    height: scale(48)
+    height: theme.sizes.xxxlarge
   };
   var space = {
     contentPaddingHorizontal: theme.space.smallMedium,
@@ -1550,14 +1572,14 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     warning: theme.colors.warning
   };
   var sizes = {
-    small: theme.space.xlarge,
-    medium: theme.space.xxlarge,
-    large: theme.space.xxxlarge,
-    xlarge: theme.space.xxxxlarge,
-    xxlarge: theme.space.xlarge * 2,
-    xxxlarge: theme.space.xxlarge * 2,
-    xxxxlarge: theme.space.xxxlarge * 2,
-    xxxxxlarge: theme.space.small * 17
+    small: theme.sizes.xlarge,
+    medium: theme.sizes.xxlarge,
+    large: theme.sizes.xxxlarge,
+    xlarge: theme.sizes.xxxxlarge,
+    xxlarge: theme.sizes.xxxxxlarge,
+    xxxlarge: theme.sizes['7xlarge'],
+    xxxxlarge: theme.sizes['9xlarge'],
+    xxxxxlarge: theme.sizes['14xlarge']
   };
   var fontSizes = {
     small: theme.fontSizes.large,
@@ -1600,10 +1622,10 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     "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
+    height: theme.fontSizes.small + theme.sizes.small,
+    minWidth: theme.fontSizes.small + theme.sizes.small,
+    statusHeight: theme.sizes.small,
+    statusWidth: theme.sizes.small
   };
   var space = {
     horizontalPadding: theme.space.small,
@@ -1625,7 +1647,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     background: theme.colors.platformBackground
   };
   var sizes = {
-    height: 72
+    height: theme.sizes['6xlarge']
   };
   var shadows = {
     offset: {
@@ -1654,8 +1676,8 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     backdrop: theme.colors.backgroundDark
   };
   var sizes = {
-    sectionHeight: scale(64),
-    closeIcon: scale(48)
+    sectionHeight: theme.sizes.xxxxxlarge,
+    closeIcon: theme.sizes.xxxlarge
   };
   var space = {
     headerWrapperVerticalPadding: theme.space.small,
@@ -1758,13 +1780,15 @@ var getCalendarTheme = function getCalendarTheme(theme) {
     primary: theme.colors.primary,
     inverted: theme.colors.invertedText
   };
+  var cellSize = theme.sizes.xxxlarge;
+  var markSize = theme.sizes.xsmall;
   var sizes = {
-    cellWidth: scale(48),
-    cellHeight: scale(48),
-    cellCircleWidth: scale(44),
-    cellCircleHeight: scale(44),
-    markWidth: scale(4),
-    markHeight: scale(4)
+    cellWidth: cellSize,
+    cellHeight: cellSize,
+    cellCircleWidth: cellSize - markSize,
+    cellCircleHeight: cellSize - markSize,
+    markWidth: markSize,
+    markHeight: markSize
   };
   var space = {
     rowVerticalPadding: theme.space.medium,
@@ -1793,7 +1817,7 @@ var getCardTheme = function getCardTheme(theme) {
     archived: theme.colors.archivedLight
   };
   var sizes = {
-    indicatorWidth: theme.space.medium
+    indicatorWidth: theme.sizes.medium
   };
   var radii = {
     "default": theme.radii.large
@@ -1811,14 +1835,12 @@ var getCheckboxTheme = function getCheckboxTheme(theme) {
     disabledBorder: theme.colors.globalPrimaryLight
   };
   var space = {
-    // to remove the empty space above the check icon
-    // and also to center the check mark
-    iconTop: -scale(3),
+    iconTop: 0,
     wrapperPadding: theme.space.medium,
     iconDescriptionPadding: theme.space.smallMedium
   };
   var sizes = {
-    icon: scale(20)
+    icon: theme.sizes.large
   };
   var radii = {
     wrapper: theme.radii.medium,
@@ -1846,9 +1868,9 @@ var getContentNavigatorTheme = function getContentNavigatorTheme(theme) {
   };
 };
 
-var getDatePickerTheme = function getDatePickerTheme() {
+var getDatePickerTheme = function getDatePickerTheme(theme) {
   var sizes = {
-    height: scale(176)
+    height: theme.sizes['19xlarge']
   };
   return {
     sizes: sizes
@@ -1891,8 +1913,8 @@ var getDrawerTheme = function getDrawerTheme(theme) {
     handlerPaddingVertical: theme.space.small
   };
   var sizes = {
-    handlerWidth: scale(56),
-    handlerHeight: scale(4)
+    handlerWidth: theme.sizes.xxxxlarge,
+    handlerHeight: theme.sizes.xsmall
   };
   var shadows = {
     offset: {
@@ -1915,14 +1937,11 @@ var getDrawerTheme = function getDrawerTheme(theme) {
 var getEmptyTheme = function getEmptyTheme(theme) {
   var space = {
     titleMargin: theme.space.medium,
-    illustrationMargin: theme.space.large,
+    imageMargin: theme.space.large,
     wrapperPadding: theme.space.medium
   };
   var sizes = {
-    illustration: scale(168)
-  };
-  var radii = {
-    illustration: theme.radii.rounded
+    image: theme.sizes['18xlarge']
   };
   var colors = {
     text: theme.colors.text,
@@ -1943,8 +1962,7 @@ var getEmptyTheme = function getEmptyTheme(theme) {
     colors: colors,
     sizes: sizes,
     space: space,
-    fonts: fonts,
-    radii: radii
+    fonts: fonts
   };
 };
 
@@ -1959,8 +1977,8 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemText: theme.colors.invertedText
   };
   var sizes = {
-    width: 64,
-    height: 64
+    width: theme.sizes.xxxxxlarge,
+    height: theme.sizes.xxxxxlarge
   };
   var fonts = {
     header: theme.fonts.semiBold,
@@ -2032,6 +2050,16 @@ var getIconTheme = function getIconTheme(theme) {
   };
 };
 
+var getImageTheme = function getImageTheme(theme) {
+  var sizes = {
+    '6xlarge': theme.sizes['6xlarge'],
+    '15xlarge': theme.sizes['15xlarge']
+  };
+  return {
+    sizes: sizes
+  };
+};
+
 var getListTheme = function getListTheme(theme) {
   var colors = {
     checkedListItemContainerBackground: theme.colors.primaryBackground,
@@ -2101,9 +2129,9 @@ var getPinInputTheme = function getPinInputTheme(theme) {
     errorMessage: theme.fontSizes.small
   };
   var sizes = {
-    cellWidth: theme.space.xxlarge,
-    cellHeight: theme.space.xxxlarge,
-    mask: theme.space.medium
+    cellWidth: theme.sizes.xxlarge,
+    cellHeight: theme.sizes.xxxlarge,
+    mask: theme.sizes.medium
   };
   var space = {
     spacer: theme.space.medium,
@@ -2135,8 +2163,8 @@ var getProgressTheme = function getProgressTheme(theme) {
     innerBackground: theme.colors.platformBackground
   };
   var sizes = {
-    circleWidth: scale(76),
-    barHeight: scale(4)
+    circleWidth: theme.sizes['6xlarge'],
+    barHeight: theme.sizes.xsmall
   };
   var radii = {
     "default": theme.radii.rounded
@@ -2156,9 +2184,13 @@ var getRadioTheme = function getRadioTheme(theme) {
     circleLeftMargin: theme.space.small,
     groupTopMargin: theme.space.xsmall
   };
+  var boundingBoxSize = theme.sizes.large;
+  var innerPadding = theme.space.xsmall;
+  var circle = boundingBoxSize - innerPadding;
+  var innerCircle = circle / 2;
   var sizes = {
-    circle: scale(20),
-    innerCircle: scale(10)
+    circle: circle,
+    innerCircle: innerCircle
   };
   var borderWidths = {
     circle: theme.borderWidths.medium
@@ -2181,10 +2213,10 @@ var getRichTextEditorTheme = function getRichTextEditorTheme(theme) {
     webViewBorderBottomWidth: 0.8
   };
   var sizes = {
-    editorMinHeight: 21,
-    toolbarButtonSize: theme.space.xxxlarge,
-    toolbarSeparatorWidth: 1,
-    toolbarSeparatorHeight: theme.space.medium
+    editorMinHeight: theme.sizes.large,
+    toolbarButtonSize: theme.sizes.xxxlarge,
+    toolbarSeparatorWidth: theme.sizes.xxsmall,
+    toolbarSeparatorHeight: theme.sizes.medium
   };
   var fontSizes = {
     editor: theme.fontSizes.medium
@@ -2242,6 +2274,17 @@ var getSelectTheme = function getSelectTheme(theme) {
   };
 };
 
+var getSliderTheme = function getSliderTheme(theme) {
+  var colors = {
+    minimumTrackTint: theme.colors.__alpha__primary1,
+    thumbTint: theme.colors.__alpha__globalSecondary4,
+    maximumTrackTint: theme.colors.__alpha__secondary4
+  };
+  return {
+    colors: colors
+  };
+};
+
 var getSpinnerTheme = function getSpinnerTheme(theme) {
   var colors = {
     dot1: theme.colors.__alpha__secondary1,
@@ -2281,33 +2324,46 @@ var getSwitchTheme = function getSwitchTheme(theme) {
       'disabled-checked': theme.colors.primaryLight,
       'disabled-unchecked': theme.colors.archived
     },
-    thumb: theme.colors.platformBackground
-  };
-  var thumbSizes = {
-    small: theme.space.medium,
-    medium: theme.space.medium * 1.3
-  };
-  var widths = {
-    small: theme.space.xxxlarge,
-    medium: theme.space.xxxxlarge
+    thumb: theme.colors.platformBackground,
+    selector: {
+      background: theme.colors.__alpha__globalNeutral3,
+      textBackground: theme.colors.__alpha__primary1
+    }
   };
-  var heights = {
-    small: theme.space.large,
-    medium: theme.space.large * 1.2
+  var sizes = {
+    thumbs: {
+      small: theme.sizes.medium,
+      medium: theme.sizes.large
+    },
+    widths: {
+      small: theme.sizes.xxxlarge,
+      medium: theme.sizes.xxxxxlarge
+    },
+    heights: {
+      small: theme.sizes.large,
+      medium: theme.sizes.xlarge
+    },
+    selector: {
+      height: theme.sizes.xxxxlarge
+    }
   };
   var spaces = {
     small: theme.space.xsmall,
     medium: theme.space.xsmall,
-    inactive: 0
+    selector: {
+      iconPadding: theme.space.medium,
+      wrapperPadding: theme.space.xsmall
+    }
   };
   var radii = {
-    rounded: theme.radii.rounded
+    rounded: theme.radii.rounded,
+    selector: {
+      "default": theme.radii.rounded
+    }
   };
   return {
     colors: colors,
-    thumbSizes: thumbSizes,
-    widths: widths,
-    heights: heights,
+    sizes: sizes,
     spaces: spaces,
     radii: radii
   };
@@ -2336,7 +2392,7 @@ var getTabsTheme = function getTabsTheme(theme) {
     headerBottom: theme.borderWidths.base
   };
   var sizes = {
-    indicator: theme.space.xxsmall
+    indicator: theme.sizes.xxsmall
   };
   return {
     borderWidths: borderWidths,
@@ -2479,9 +2535,9 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   };
 };
 
-var getTimePickerTheme = function getTimePickerTheme() {
+var getTimePickerTheme = function getTimePickerTheme(theme) {
   var sizes = {
-    height: scale(176)
+    height: theme.sizes['19xlarge']
   };
   return {
     sizes: sizes
@@ -2500,7 +2556,7 @@ var getToastTheme = function getToastTheme(theme) {
     shadow: theme.colors.backgroundDark
   };
   var sizes = {
-    height: scale(48)
+    height: theme.sizes.xxxlarge
   };
   var space = {
     wrapperVerticalPadding: theme.space.large,
@@ -2617,12 +2673,13 @@ var getTheme$1 = function getTheme() {
       card: getCardTheme(globalTheme),
       checkbox: getCheckboxTheme(globalTheme),
       contentNavigator: getContentNavigatorTheme(globalTheme),
-      datePicker: getDatePickerTheme(),
+      datePicker: getDatePickerTheme(globalTheme),
       divider: getDividerTheme(globalTheme),
       drawer: getDrawerTheme(globalTheme),
       empty: getEmptyTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
@@ -2630,12 +2687,13 @@ var getTheme$1 = function getTheme() {
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
+      slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
       "switch": getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
-      timePicker: getTimePickerTheme(),
+      timePicker: getTimePickerTheme(globalTheme),
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme)
@@ -5870,7 +5928,7 @@ var getDisplayName = function getDisplayName(primitive) {
 
 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$7 = components.reduce(function (acc, comp) {
+var index$8 = components.reduce(function (acc, comp) {
   return Object.defineProperty(acc, comp, {
     enumerable: true,
     configurable: false,
@@ -5880,7 +5938,7 @@ var index$7 = components.reduce(function (acc, comp) {
   });
 }, styled);
 
-var StyledWrapper$8 = index$7(reactNative.Animated.View)(function () {
+var StyledWrapper$9 = index$8(reactNative.Animated.View)(function () {
   return {
     margin: 0,
     padding: 0,
@@ -5893,12 +5951,12 @@ var StyledWrapper$8 = index$7(reactNative.Animated.View)(function () {
  * to use with Animated.timing
  */
 
-var StyledHiddenWrapper = index$7(reactNative.View)(function () {
+var StyledHiddenWrapper = index$8(reactNative.View)(function () {
   return {
     height: reactNative.Dimensions.get('window').height
   };
 });
-var StyledChildWrapper = index$7(reactNative.View)(function () {
+var StyledChildWrapper = index$8(reactNative.View)(function () {
   return {
     margin: 0,
     padding: 0
@@ -5940,7 +5998,7 @@ var Collapse = function Collapse(_ref) {
     var height = _ref2.height;
     setContentHeight(height);
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$8, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$9, {
     style: {
       height: collapseAnim
     },
@@ -5953,10 +6011,10 @@ var Collapse = function Collapse(_ref) {
   }, children)));
 };
 
-var StyledWrapper$7 = index$7(reactNative.View)(function () {
+var StyledWrapper$8 = index$8(reactNative.View)(function () {
   return {};
 });
-var StyledItemWrapper = index$7(reactNative.View)(function (_ref) {
+var StyledItemWrapper = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       themeVariant = _ref.themeVariant;
   return {
@@ -5965,19 +6023,19 @@ var StyledItemWrapper = index$7(reactNative.View)(function (_ref) {
     borderRadius: themeVariant === 'card' ? theme.__hd__.accordion.radii.card : 0
   };
 });
-var StyledHeaderWrapper$1 = index$7(reactNative.TouchableOpacity)(function () {
+var StyledHeaderWrapper$1 = index$8(reactNative.TouchableOpacity)(function () {
   return {
     flexDirection: 'row',
     justifyContent: 'space-between'
   };
 });
-var StyledCollapse = index$7(Collapse)(function (_ref2) {
+var StyledCollapse = index$8(Collapse)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     paddingTop: theme.__hd__.accordion.space.padding
   };
 });
-var Spacer$1 = index$7(reactNative.View)(function (_ref3) {
+var Spacer$1 = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     paddingTop: theme.__hd__.accordion.space.padding
@@ -5989,7 +6047,7 @@ var FONTWEIGHT_MAP = {
   regular: 'regular',
   'semi-bold': 'semiBold'
 };
-var StyledText$3 = index$7(reactNative.Text)(function (_ref) {
+var StyledText$3 = index$8(reactNative.Text)(function (_ref) {
   var themeFontSize = _ref.themeFontSize,
       themeFontWeight = _ref.themeFontWeight,
       themeIntent = _ref.themeIntent,
@@ -6005,7 +6063,7 @@ var StyledText$3 = index$7(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$h = ["children", "fontSize", "fontWeight", "intent"];
+var _excluded$i = ["children", "fontSize", "fontWeight", "intent"];
 
 var Text = function Text(_ref) {
   var children = _ref.children,
@@ -6015,7 +6073,7 @@ var Text = function Text(_ref) {
       fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
       _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'body' : _ref$intent,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$i);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -14550,7 +14608,7 @@ var COLOR_INTENTS = {
   'disabled-text': 'disabledText',
   'text-inverted': 'invertedText'
 };
-var StyledHeroIcon = index$7(HeroIcon)(function (_ref) {
+var StyledHeroIcon = index$8(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
       themeSize = _ref.themeSize,
       theme = _ref.theme;
@@ -14560,11 +14618,11 @@ var StyledHeroIcon = index$7(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$g = ["style"];
+var _excluded$h = ["style"];
 
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-      otherProps = _objectWithoutProperties(_ref, _excluded$g);
+      otherProps = _objectWithoutProperties(_ref, _excluded$h);
 
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
@@ -14654,7 +14712,7 @@ function usePropsOrInternalState(initialState, state, setState) {
   return [state || internalState, setState || setInternalState];
 }
 
-var _excluded$f = ["key"];
+var _excluded$g = ["key"];
 
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
@@ -14673,12 +14731,12 @@ var Accordion = function Accordion(_ref) {
       _activeItemKey = _usePropsOrInternalSt2[0],
       _onItemPress = _usePropsOrInternalSt2[1];
 
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$7, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$8, {
     style: style,
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-        props = _objectWithoutProperties(_ref2, _excluded$f);
+        props = _objectWithoutProperties(_ref2, _excluded$g);
 
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -14695,7 +14753,7 @@ var Accordion = function Accordion(_ref) {
   }));
 };
 
-var Container$1 = index$7(reactNative.View)(function (_ref) {
+var Container$1 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       _ref$themeVariant = _ref.themeVariant,
       themeVariant = _ref$themeVariant === void 0 ? 'default' : _ref$themeVariant,
@@ -14707,21 +14765,21 @@ var Container$1 = index$7(reactNative.View)(function (_ref) {
     flexDirection: 'row'
   };
 });
-var IconContainer$1 = index$7(reactNative.View)(function (_ref2) {
+var IconContainer$1 = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     alignItems: 'center',
     paddingLeft: theme.__hd__.alert.space.iconLeftPadding
   };
 });
-var TextContainer$1 = index$7(reactNative.View)(function (_ref3) {
+var TextContainer$1 = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     paddingHorizontal: theme.__hd__.alert.space.textPaddingHorizontal,
     flex: 1
   };
 });
-var ContentContainer$1 = index$7(reactNative.View)(function (_ref4) {
+var ContentContainer$1 = index$8(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme,
       showDivider = _ref4.showDivider;
   return {
@@ -14732,7 +14790,7 @@ var ContentContainer$1 = index$7(reactNative.View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var CTAWrapper$1 = index$7(reactNative.TouchableOpacity)(function (_ref5) {
+var CTAWrapper$1 = index$8(reactNative.TouchableOpacity)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     paddingHorizontal: theme.__hd__.alert.space.ctaPadding,
@@ -14800,7 +14858,7 @@ var Alert = function Alert(_ref2) {
   })) : null);
 };
 
-var StyledPressable = index$7(reactNative.TouchableOpacity)(function (_ref) {
+var StyledPressable = index$8(reactNative.TouchableOpacity)(function (_ref) {
   var themeSize = _ref.themeSize,
       themeIntent = _ref.themeIntent,
       theme = _ref.theme;
@@ -14813,7 +14871,7 @@ var StyledPressable = index$7(reactNative.TouchableOpacity)(function (_ref) {
     overflow: 'hidden'
   };
 });
-var StyledView$3 = index$7(reactNative.View)(function (_ref2) {
+var StyledView$3 = index$8(reactNative.View)(function (_ref2) {
   var themeSize = _ref2.themeSize,
       themeIntent = _ref2.themeIntent,
       theme = _ref2.theme;
@@ -14826,7 +14884,7 @@ var StyledView$3 = index$7(reactNative.View)(function (_ref2) {
     overflow: 'hidden'
   };
 });
-var StyledTextWrapper = index$7(reactNative.View)(function () {
+var StyledTextWrapper$1 = index$8(reactNative.View)(function () {
   return {
     alignItems: 'center',
     justifyContent: 'center',
@@ -14835,7 +14893,7 @@ var StyledTextWrapper = index$7(reactNative.View)(function () {
     height: '100%'
   };
 });
-var StyledText$2 = index$7(reactNative.Text)(function (_ref3) {
+var StyledText$2 = index$8(reactNative.Text)(function (_ref3) {
   var themeSize = _ref3.themeSize,
       themeIntent = _ref3.themeIntent,
       theme = _ref3.theme;
@@ -14845,7 +14903,7 @@ var StyledText$2 = index$7(reactNative.Text)(function (_ref3) {
     overflow: 'hidden'
   };
 });
-var StyledImage = index$7(reactNative.Image)(function (_ref4) {
+var StyledImage = index$8(reactNative.Image)(function (_ref4) {
   var themeSize = _ref4.themeSize,
       theme = _ref4.theme;
   return {
@@ -14871,7 +14929,7 @@ var Avatar = function Avatar(_ref) {
     themeIntent: intent,
     themeSize: size,
     style: style
-  }, title !== undefined && source === undefined && /*#__PURE__*/React__default["default"].createElement(StyledTextWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledText$2, {
+  }, title !== undefined && source === undefined && /*#__PURE__*/React__default["default"].createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(StyledText$2, {
     themeIntent: intent,
     themeSize: size
   }, title)), source !== undefined && /*#__PURE__*/React__default["default"].createElement(StyledImage, {
@@ -14881,7 +14939,7 @@ var Avatar = function Avatar(_ref) {
   })) : null;
 };
 
-var StyledView$2 = index$7(reactNative.Animated.View)(function (_ref) {
+var StyledView$2 = index$8(reactNative.Animated.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
       themePadding = _ref.themePadding,
       theme = _ref.theme;
@@ -14895,7 +14953,7 @@ var StyledView$2 = index$7(reactNative.Animated.View)(function (_ref) {
     paddingHorizontal: themePadding === 'wideContent' ? theme.__hd__.badge.space.horizontalPadding : undefined
   };
 });
-var StyledText$1 = index$7(reactNative.Text)(function (_ref2) {
+var StyledText$1 = index$8(reactNative.Text)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     fontFamily: theme.__hd__.badge.fonts["default"],
@@ -14906,7 +14964,7 @@ var StyledText$1 = index$7(reactNative.Text)(function (_ref2) {
     textAlign: 'center'
   };
 });
-var StyledStatus = index$7(reactNative.Animated.View)(function (_ref3) {
+var StyledStatus = index$8(reactNative.Animated.View)(function (_ref3) {
   var themeIntent = _ref3.themeIntent,
       theme = _ref3.theme;
   return {
@@ -14920,7 +14978,7 @@ var StyledStatus = index$7(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$e = ["children", "visible", "intent", "style", "testID"];
+var _excluded$f = ["children", "visible", "intent", "style", "testID"];
 
 var Status = function Status(_ref) {
   var children = _ref.children,
@@ -14930,7 +14988,7 @@ var Status = function Status(_ref) {
       intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$f);
 
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
       opacity = _React$useRef.current;
@@ -14966,7 +15024,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$d = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$e = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 
 var getPaddingState = function getPaddingState(content) {
@@ -14983,7 +15041,7 @@ var Badge = function Badge(_ref) {
       intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$d);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$e);
 
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
       opacity = _React$useRef.current;
@@ -15029,21 +15087,21 @@ var isHeroIcon = function isHeroIcon(x) {
   return IconList.includes(x);
 };
 
-var BottomNavigationTab = index$7(reactNative.View)(function (_ref) {
+var BottomNavigationTab = index$8(reactNative.View)(function (_ref) {
   var themeVisibility = _ref.themeVisibility;
   return {
     flex: 1,
     display: themeVisibility === false ? 'none' : 'flex'
   };
 });
-var BottomNavigationContainer = index$7(reactNative.View)({
+var BottomNavigationContainer = index$8(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper$2 = index$7(reactNative.View)({
+var ContentWrapper$2 = index$8(reactNative.View)({
   flex: 1
 });
-var BottomBarWrapper = index$7(reactNative.View)(function (_ref2) {
+var BottomBarWrapper = index$8(reactNative.View)(function (_ref2) {
   var themeInsets = _ref2.themeInsets,
       theme = _ref2.theme;
   return {
@@ -15059,17 +15117,17 @@ var BottomBarWrapper = index$7(reactNative.View)(function (_ref2) {
     elevation: theme.__hd__.bottomNavigation.shadows.elevation
   };
 });
-var BottomBar = index$7(reactNative.View)({
+var BottomBar = index$8(reactNative.View)({
   flex: 1,
   flexDirection: 'row',
   overflow: 'hidden',
   alignItems: 'center'
 });
-var BottomBarItem = index$7(reactNative.View)({
+var BottomBarItem = index$8(reactNative.View)({
   flex: 1,
   alignItems: 'center'
 });
-var StyledBottomBarText = index$7(Typography.Text)(function (_ref3) {
+var StyledBottomBarText = index$8(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
@@ -15079,7 +15137,7 @@ var StyledBottomBarText = index$7(Typography.Text)(function (_ref3) {
 var isIOS = reactNative.Platform.OS === 'ios';
 var isAndroid = reactNative.Platform.OS === 'android';
 
-var _excluded$c = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$d = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
@@ -15092,7 +15150,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
       selectedTabKey = _ref.selectedTabKey,
       tabs = _ref.tabs,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$c);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$d);
 
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
@@ -15166,7 +15224,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
-var StyledDivider = index$7(reactNative.View)(function (_ref) {
+var StyledDivider = index$8(reactNative.View)(function (_ref) {
   var themeMarginHorizontal = _ref.themeMarginHorizontal,
       themeMarginVertical = _ref.themeMarginVertical,
       theme = _ref.theme;
@@ -15183,14 +15241,14 @@ var StyledDivider = index$7(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$b = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$c = ["marginHorizontal", "marginVertical", "style", "testID"];
 
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
       marginVertical = _ref.marginVertical,
       style = _ref.style,
       testID = _ref.testID,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$b);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$c);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
@@ -15202,10 +15260,10 @@ var Divider = function Divider(_ref) {
 
 var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
-var StyledWrapper$6 = index$7(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+var StyledWrapper$7 = index$8(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
-var StyledBottomSheet = index$7(AnimatedSafeAreaView)(function (_ref) {
+var StyledBottomSheet = index$8(AnimatedSafeAreaView)(function (_ref) {
   var theme = _ref.theme;
   return {
     borderTopLeftRadius: theme.__hd__.bottomSheet.radii["default"],
@@ -15220,14 +15278,14 @@ var StyledBottomSheet = index$7(AnimatedSafeAreaView)(function (_ref) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$7(AnimatedPressable$1)(function (_ref2) {
+var StyledBackdrop$2 = index$8(AnimatedPressable$1)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
     opacity: 0.48
   });
 });
-var StyledHeaderWrapper = index$7(reactNative.View)(function (_ref3) {
+var StyledHeaderWrapper = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     flexDirection: 'row',
@@ -15235,11 +15293,11 @@ var StyledHeaderWrapper = index$7(reactNative.View)(function (_ref3) {
     paddingHorizontal: theme.__hd__.bottomSheet.space.headerWrapperHorizontalPadding
   };
 });
-var StyledHeader = index$7(reactNative.View)({
+var StyledHeader = index$8(reactNative.View)({
   flex: 1,
   justifyContent: 'center'
 });
-var StyledFooter = index$7(reactNative.View)(function (_ref4) {
+var StyledFooter = index$8(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     paddingHorizontal: theme.__hd__.bottomSheet.space.footerHorizontalPadding,
@@ -15250,7 +15308,7 @@ var StyledFooter = index$7(reactNative.View)(function (_ref4) {
     flexDirection: 'row'
   };
 });
-var StyledIconWrapper$1 = index$7(reactNative.View)(function (_ref5) {
+var StyledIconWrapper$2 = index$8(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     alignItems: 'center',
@@ -15273,7 +15331,7 @@ var genLoadingIndicatorStyles = function genLoadingIndicatorStyles(theme, intent
   };
 };
 
-var StyledLoadingIndicatorWrapper = index$7(reactNative.View)(function (_ref) {
+var StyledLoadingIndicatorWrapper = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -15282,7 +15340,7 @@ var StyledLoadingIndicatorWrapper = index$7(reactNative.View)(function (_ref) {
     paddingVertical: theme.space.xxsmall
   };
 });
-var StyledLoadingDot = index$7(reactNative.View)(function (_ref2) {
+var StyledLoadingDot = index$8(reactNative.View)(function (_ref2) {
   var _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 12 : _ref2$size,
       themeVariant = _ref2.themeVariant,
@@ -15322,7 +15380,7 @@ var StyledLoadingDot = index$7(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$a = ["count", "size", "testID", "themeVariant"];
+var _excluded$b = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 
@@ -15356,7 +15414,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
       size = _ref2$size === void 0 ? 12 : _ref2$size,
       testID = _ref2.testID,
       themeVariant = _ref2.themeVariant,
-      nativeProps = _objectWithoutProperties(_ref2, _excluded$a);
+      nativeProps = _objectWithoutProperties(_ref2, _excluded$b);
 
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
@@ -15533,7 +15591,7 @@ var genTextVariantTextStyles = function genTextVariantTextStyles(theme, intent,
   }, textColorStyling());
 };
 
-var StyledButtonContainer = index$7(reactNative.TouchableHighlight)(function (_ref) {
+var StyledButtonContainer = index$8(reactNative.TouchableHighlight)(function (_ref) {
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$pressed = _ref.pressed,
@@ -15575,7 +15633,7 @@ var StyledButtonContainer = index$7(reactNative.TouchableHighlight)(function (_r
       };
   }
 });
-var StyledButtonText = index$7(Typography.Text)(function (_ref2) {
+var StyledButtonText = index$8(Typography.Text)(function (_ref2) {
   var disabled = _ref2.disabled,
       pressed = _ref2.pressed,
       themeVariant = _ref2.themeVariant,
@@ -15625,7 +15683,7 @@ var StyledButtonText = index$7(Typography.Text)(function (_ref2) {
     fontFamily: theme.__hd__.button.fonts["default"]
   }, themeStyling());
 });
-var StyledButtonIconWrapper = index$7(reactNative.View)(function (_ref3) {
+var StyledButtonIconWrapper = index$8(reactNative.View)(function (_ref3) {
   var themePosition = _ref3.themePosition,
       theme = _ref3.theme;
 
@@ -15641,7 +15699,7 @@ var StyledButtonIconWrapper = index$7(reactNative.View)(function (_ref3) {
       };
   }
 });
-var StyledButtonIcon = index$7(Icon)(function (_ref4) {
+var StyledButtonIcon = index$8(Icon)(function (_ref4) {
   var disabled = _ref4.disabled,
       pressed = _ref4.pressed,
       themeVariant = _ref4.themeVariant,
@@ -15809,7 +15867,7 @@ var IconButton = function IconButton(_ref) {
   }));
 };
 
-var ButtonContainer = index$7(reactNative.TouchableOpacity)(function (_ref) {
+var ButtonContainer = index$8(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -15821,13 +15879,13 @@ var ButtonContainer = index$7(reactNative.TouchableOpacity)(function (_ref) {
     backgroundColor: theme.__hd__.button.colors.utilityBackground
   };
 });
-var IconWrapper = index$7(reactNative.View)(function (_ref2) {
+var IconWrapper = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     paddingRight: theme.__hd__.button.space.iconPadding
   };
 });
-var ButtonText = index$7(Typography.Text)(function (_ref3) {
+var ButtonText = index$8(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     flexShrink: 1,
@@ -15882,7 +15940,7 @@ var Header = function Header(_ref) {
     style: {
       flex: 1
     }
-  }, content), showCloseButton ? /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(CompoundButton.Icon, {
+  }, content), showCloseButton ? /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$2, null, /*#__PURE__*/React__default["default"].createElement(CompoundButton.Icon, {
     icon: "cancel",
     onPress: onRequestClose,
     intent: "text",
@@ -15896,6 +15954,7 @@ var BottomSheet = function BottomSheet(_ref) {
       header = _ref.header,
       footer = _ref.footer,
       children = _ref.children,
+      onAnimationEnd = _ref.onAnimationEnd,
       onOpen = _ref.onOpen,
       onRequestClose = _ref.onRequestClose,
       onDismiss = _ref.onDismiss,
@@ -15948,7 +16007,7 @@ var BottomSheet = function BottomSheet(_ref) {
       easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
       useNativeDriver: true
     });
-    animation.start();
+    animation.start(onAnimationEnd);
     return function () {
       return animation.stop();
     };
@@ -15968,7 +16027,7 @@ var BottomSheet = function BottomSheet(_ref) {
     transparent: true,
     testID: testID,
     onShow: onOpen
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$6, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$7, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop$2, {
     style: {
@@ -16182,7 +16241,7 @@ var pick = function pick(keys, props) {
   }, {});
 };
 
-var _excluded$9 = ["theme"];
+var _excluded$a = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -16213,22 +16272,22 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 };
 
 var configKeys = Object.keys(config);
-var StyledBox = index$7(reactNative.View)(function (_ref5) {
+var StyledBox = index$8(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
-      otherProps = _objectWithoutProperties(_ref5, _excluded$9);
+      otherProps = _objectWithoutProperties(_ref5, _excluded$a);
 
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$8 = ["children", "style", "testID"];
+var _excluded$9 = ["children", "style", "testID"];
 
 var Box = function Box(_ref) {
   var children = _ref.children,
       style = _ref.style,
       testID = _ref.testID,
-      otherProps = _objectWithoutProperties(_ref, _excluded$8);
+      otherProps = _objectWithoutProperties(_ref, _excluded$9);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
@@ -18632,14 +18691,14 @@ function convertToFP(fn, arity, a) {
 var format = convertToFP(format$1, 2);
 var formatTime = format;
 
-var Wrapper = index$7(reactNative.View)(function () {
+var Wrapper = index$8(reactNative.View)(function () {
   return {
     flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between'
   };
 });
-var Value = index$7(Typography.Text)(function (_ref) {
+var Value = index$8(Typography.Text)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingHorizontal: theme.__hd__.contentNavigator.space.valueHorizontalPadding
@@ -18680,13 +18739,13 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$4 = index$7(reactNative.View)(function (_ref) {
+var StyledContainer$4 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
   };
 });
-var StyledCalendarHeader = index$7(reactNative.View)(function (_ref2) {
+var StyledCalendarHeader = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     flexDirection: 'row',
@@ -18694,7 +18753,7 @@ var StyledCalendarHeader = index$7(reactNative.View)(function (_ref2) {
     paddingVertical: theme.__hd__.calendar.space.headerVerticalPadding
   };
 });
-var StyledCalendarDayNameCell = index$7(reactNative.View)(function (_ref3) {
+var StyledCalendarDayNameCell = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     width: theme.__hd__.calendar.sizes.cellWidth,
@@ -18703,7 +18762,7 @@ var StyledCalendarDayNameCell = index$7(reactNative.View)(function (_ref3) {
     justifyContent: 'center'
   };
 });
-var StyledCalendarCell = index$7(reactNative.TouchableOpacity)(function (_ref4) {
+var StyledCalendarCell = index$8(reactNative.TouchableOpacity)(function (_ref4) {
   var theme = _ref4.theme,
       _ref4$variant = _ref4.variant,
       variant = _ref4$variant === void 0 ? 'default' : _ref4$variant;
@@ -18718,7 +18777,7 @@ var StyledCalendarCell = index$7(reactNative.TouchableOpacity)(function (_ref4)
     height: theme.__hd__.calendar.sizes.cellCircleHeight
   };
 });
-var StyledCalendarRow = index$7(reactNative.View)(function (_ref5) {
+var StyledCalendarRow = index$8(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     flexDirection: 'row',
@@ -18726,7 +18785,7 @@ var StyledCalendarRow = index$7(reactNative.View)(function (_ref5) {
     flexWrap: 'wrap'
   };
 });
-var StyledCalendarRowItem = index$7(reactNative.View)(function (_ref6) {
+var StyledCalendarRowItem = index$8(reactNative.View)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     flexBasis: "".concat(Math.floor(100.0 / 7.0).toString(), "%"),
@@ -18736,7 +18795,7 @@ var StyledCalendarRowItem = index$7(reactNative.View)(function (_ref6) {
     justifyContent: 'center'
   };
 });
-var StyledDisabledCalendarRowItem = index$7(reactNative.View)(function (_ref7) {
+var StyledDisabledCalendarRowItem = index$8(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     flexBasis: "".concat(Math.floor(100.0 / 7.0).toString(), "%"),
@@ -18745,7 +18804,7 @@ var StyledDisabledCalendarRowItem = index$7(reactNative.View)(function (_ref7) {
     height: theme.__hd__.calendar.sizes.cellHeight
   };
 });
-var StyledMark = index$7(reactNative.View)(function (_ref8) {
+var StyledMark = index$8(reactNative.View)(function (_ref8) {
   var theme = _ref8.theme,
       _ref8$variant = _ref8.variant,
       variant = _ref8$variant === void 0 ? 'primary' : _ref8$variant;
@@ -18925,7 +18984,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var StyledDataCard = index$7(reactNative.View)(function (_ref) {
+var StyledDataCard = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     borderRadius: theme.__hd__.card.radii["default"],
@@ -18933,7 +18992,7 @@ var StyledDataCard = index$7(reactNative.View)(function (_ref) {
     flexDirection: 'row'
   };
 });
-var Indicator = index$7(reactNative.View)(function (_ref2) {
+var Indicator = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme,
       themeIntent = _ref2.themeIntent;
   return {
@@ -18943,13 +19002,13 @@ var Indicator = index$7(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$7 = ["intent", "children"];
+var _excluded$8 = ["intent", "children"];
 
 var DataCard = function DataCard(_ref) {
   var _ref$intent = _ref.intent,
       intent = _ref$intent === void 0 ? 'info' : _ref$intent,
       children = _ref.children,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$7);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$8);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
@@ -18957,7 +19016,7 @@ var DataCard = function DataCard(_ref) {
   }), children);
 };
 
-var StyledCard = index$7(reactNative.View)(function (_ref) {
+var StyledCard = index$8(reactNative.View)(function (_ref) {
   var themeVariant = _ref.themeVariant,
       theme = _ref.theme,
       themeIntent = _ref.themeIntent;
@@ -18971,7 +19030,7 @@ var StyledCard = index$7(reactNative.View)(function (_ref) {
   });
 }); // DEPRECATED
 
-var LeftDataCard = index$7(reactNative.View)(function (_ref2) {
+var LeftDataCard = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
@@ -18980,14 +19039,14 @@ var LeftDataCard = index$7(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$6 = ["variant", "intent", "children"];
+var _excluded$7 = ["variant", "intent", "children"];
 
 var Card = function Card(_ref) {
   var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
       intent = _ref.intent,
       children = _ref.children,
-      nativeProps = _objectWithoutProperties(_ref, _excluded$6);
+      nativeProps = _objectWithoutProperties(_ref, _excluded$7);
 
   return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends$1({}, nativeProps, {
     themeVariant: variant,
@@ -18997,11 +19056,11 @@ var Card = function Card(_ref) {
   }), children);
 };
 
-var index$6 = Object.assign(Card, {
+var index$7 = Object.assign(Card, {
   Data: DataCard
 });
 
-var StyledWrapper$5 = index$7(reactNative.TouchableOpacity)(function (_ref) {
+var StyledWrapper$6 = index$8(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
       themeWithBorder = _ref.themeWithBorder,
       themeDisabled = _ref.themeDisabled;
@@ -19015,14 +19074,14 @@ var StyledWrapper$5 = index$7(reactNative.TouchableOpacity)(function (_ref) {
     flexDirection: 'row'
   }, themeWithBorder && borderStyle);
 });
-var StyledDescription$1 = index$7(Typography.Text)(function (_ref2) {
+var StyledDescription$1 = index$8(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     paddingRight: theme.__hd__.checkbox.space.iconDescriptionPadding,
     flex: 1
   };
 });
-var StyledCheckbox = index$7(reactNative.View)(function (_ref3) {
+var StyledCheckbox = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme,
       themeDisabled = _ref3.themeDisabled;
   return {
@@ -19036,7 +19095,7 @@ var StyledCheckbox = index$7(reactNative.View)(function (_ref3) {
     overflow: 'hidden'
   };
 });
-var StyledCheckMark = index$7(Icon)(function (_ref4) {
+var StyledCheckMark = index$8(Icon)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     position: 'absolute',
@@ -19054,7 +19113,7 @@ var Checkbox = function Checkbox(_ref) {
       onPress = _ref.onPress,
       style = _ref.style,
       testID = _ref.testID;
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$6, {
     onPress: onPress,
     disabled: disabled,
     themeDisabled: disabled,
@@ -19072,14 +19131,14 @@ var Checkbox = function Checkbox(_ref) {
   })));
 };
 
-var StyledContainer$3 = index$7(reactNative.View)(function (_ref) {
+var StyledContainer$3 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
     marginVertical: theme.__hd__.textInput.space.containerMarginVertical
   };
 });
-var StyledLabelContainer = index$7(reactNative.View)(function (_ref2) {
+var StyledLabelContainer = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -19091,28 +19150,28 @@ var StyledLabelContainer = index$7(reactNative.View)(function (_ref2) {
     paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding
   };
 });
-var StyledLabel = index$7(Typography.Text)(function (_ref3) {
+var StyledLabel = index$8(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme,
       themeVariant = _ref3.themeVariant;
   return {
     color: theme.__hd__.textInput.colors.labels[themeVariant]
   };
 });
-var StyledAsteriskLabel = index$7(Typography.Text)(function (_ref4) {
+var StyledAsteriskLabel = index$8(Typography.Text)(function (_ref4) {
   var theme = _ref4.theme,
       themeVariant = _ref4.themeVariant;
   return {
     color: theme.__hd__.textInput.colors.asterisks[themeVariant]
   };
 });
-var StyledLabelContainerInsideTextInput = index$7(reactNative.View)(function () {
+var StyledLabelContainerInsideTextInput = index$8(reactNative.View)(function () {
   return _objectSpread2({
     flexDirection: 'row',
     zIndex: 9999,
     alignItems: 'center'
   }, reactNative.StyleSheet.absoluteFillObject);
 });
-var StyledLabelInsideTextInput = index$7(Typography.Text)(function (_ref5) {
+var StyledLabelInsideTextInput = index$8(Typography.Text)(function (_ref5) {
   var theme = _ref5.theme,
       themeVariant = _ref5.themeVariant;
   return {
@@ -19123,7 +19182,7 @@ var StyledLabelInsideTextInput = index$7(Typography.Text)(function (_ref5) {
     color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeVariant]
   };
 });
-var StyledAsteriskLabelInsideTextInput = index$7(Typography.Text)(function (_ref6) {
+var StyledAsteriskLabelInsideTextInput = index$8(Typography.Text)(function (_ref6) {
   var theme = _ref6.theme,
       themeVariant = _ref6.themeVariant;
   return {
@@ -19131,7 +19190,7 @@ var StyledAsteriskLabelInsideTextInput = index$7(Typography.Text)(function (_ref
     fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel
   };
 });
-var StyledErrorContainer$1 = index$7(reactNative.View)(function (_ref7) {
+var StyledErrorContainer$1 = index$8(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
@@ -19141,7 +19200,7 @@ var StyledErrorContainer$1 = index$7(reactNative.View)(function (_ref7) {
     flexGrow: 4
   };
 });
-var StyledError = index$7(Typography.Text)(function (_ref8) {
+var StyledError = index$8(Typography.Text)(function (_ref8) {
   var theme = _ref8.theme;
   return {
     color: theme.__hd__.textInput.colors.error,
@@ -19149,7 +19208,7 @@ var StyledError = index$7(Typography.Text)(function (_ref8) {
     marginLeft: theme.__hd__.textInput.space.errorMarginLeft
   };
 });
-var StyledMaxLengthMessage = index$7(Typography.Text)(function (_ref9) {
+var StyledMaxLengthMessage = index$8(Typography.Text)(function (_ref9) {
   var theme = _ref9.theme,
       themeVariant = _ref9.themeVariant;
   return {
@@ -19162,13 +19221,13 @@ var StyledMaxLengthMessage = index$7(Typography.Text)(function (_ref9) {
     textAlign: 'right'
   };
 });
-var StyledHelperText = index$7(Typography.Text)(function (_ref10) {
+var StyledHelperText = index$8(Typography.Text)(function (_ref10) {
   var theme = _ref10.theme;
   return {
     fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
-var StyledTextInput = index$7(reactNative.TextInput)(function (_ref11) {
+var StyledTextInput = index$8(reactNative.TextInput)(function (_ref11) {
   var theme = _ref11.theme;
   return {
     textAlignVertical: 'center',
@@ -19178,7 +19237,7 @@ var StyledTextInput = index$7(reactNative.TextInput)(function (_ref11) {
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
   };
 });
-var StyledBorderBackDrop = index$7(reactNative.View)(function (_ref12) {
+var StyledBorderBackDrop = index$8(reactNative.View)(function (_ref12) {
   var _theme$__hd__$textInp;
 
   var theme = _ref12.theme,
@@ -19189,7 +19248,7 @@ var StyledBorderBackDrop = index$7(reactNative.View)(function (_ref12) {
     borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   });
 });
-var StyledTextInputContainer = index$7(reactNative.View)(function (_ref13) {
+var StyledTextInputContainer = index$8(reactNative.View)(function (_ref13) {
   var theme = _ref13.theme;
   return {
     flexDirection: 'row',
@@ -19197,7 +19256,7 @@ var StyledTextInputContainer = index$7(reactNative.View)(function (_ref13) {
     padding: theme.__hd__.textInput.space.containerPadding
   };
 });
-var StyledTextInputAndLabelContainer = index$7(reactNative.View)(function () {
+var StyledTextInputAndLabelContainer = index$8(reactNative.View)(function () {
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -19206,20 +19265,20 @@ var StyledTextInputAndLabelContainer = index$7(reactNative.View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$7(reactNative.View)(function (_ref14) {
+var StyledErrorAndHelpTextContainer = index$8(reactNative.View)(function (_ref14) {
   var theme = _ref14.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft
   };
 });
-var StyledErrorAndMaxLengthContainer = index$7(reactNative.View)(function () {
+var StyledErrorAndMaxLengthContainer = index$8(reactNative.View)(function () {
   return {
     flexDirection: 'row',
     justifyContent: 'space-between'
   };
 });
 
-var _excluded$5 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue"];
+var _excluded$6 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
       error = _ref.error,
@@ -19229,26 +19288,26 @@ var getVariant$1 = function getVariant(_ref) {
       isEmptyValue = _ref.isEmptyValue;
 
   if (disabled) {
-    return 'disabled';
+    return "disabled";
   }
 
   if (error) {
-    return 'error';
+    return "error";
   }
 
   if (!editable || loading) {
-    return 'readonly';
+    return "readonly";
   }
 
   if (isFocused) {
-    return 'focused';
+    return "focused";
   }
 
   if (!isEmptyValue) {
-    return 'filled';
+    return "filled";
   }
 
-  return 'default';
+  return "default";
 };
 
 var TextInput = function TextInput(_ref2) {
@@ -19273,12 +19332,12 @@ var TextInput = function TextInput(_ref2) {
       helpText = _ref2.helpText,
       value = _ref2.value,
       defaultValue = _ref2.defaultValue,
-      nativeProps = _objectWithoutProperties(_ref2, _excluded$5);
+      renderInputValue = _ref2.renderInputValue,
+      nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
 
-  var textInputReference = React.useRef(null);
-  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : "";
   var isEmptyValue = displayText.length === 0;
-  var actualSuffix = loading ? 'loading' : suffix;
+  var actualSuffix = loading ? "loading" : suffix;
 
   var _React$useState = React__default["default"].useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19295,49 +19354,18 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    style: style,
-    pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
-    testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
-    themeVariant: variant
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
-    pointerEvents: "none"
-  }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
-    themeVariant: variant,
-    fontSize: "small"
-  }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
-    fontSize: "small",
-    themeVariant: variant
-  }, label)), typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === 'disabled' ? 'disabled-text' : 'text',
-    testID: "input-prefix",
-    icon: prefix,
-    size: "xsmall"
-  }) : prefix, /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
-    pointerEvents: "none"
-  }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabelInsideTextInput, {
-    themeVariant: variant
-  }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabelInsideTextInput, {
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
-    fontSize: "medium",
-    themeVariant: variant
-  }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInput // when input is not editable on Android, the text color is gray
-  // hence, adding this to make the text color the same as iOS
-  , _extends$1({
+
+  var nativeInputProps = _objectSpread2(_objectSpread2({
     style: reactNative.StyleSheet.flatten([{
       color: theme.__hd__.textInput.colors.text
     }, textStyle]),
     testID: "text-input",
     accessibilityState: {
-      disabled: variant === 'disabled' || variant === 'readonly'
-    } // @ts-ignore
-    ,
+      disabled: variant === "disabled" || variant === "readonly"
+    },
+    // @ts-ignore
     accessibilityLabelledBy: accessibilityLabelledBy
-  }, nativeProps, {
+  }, nativeProps), {}, {
     onFocus: function onFocus(event) {
       var _nativeProps$onFocus;
 
@@ -19350,7 +19378,6 @@ var TextInput = function TextInput(_ref2) {
       setIsFocused(false);
       (_nativeProps$onBlur = nativeProps.onBlur) === null || _nativeProps$onBlur === void 0 ? void 0 : _nativeProps$onBlur.call(nativeProps, event);
     },
-    ref: textInputReference,
     editable: editable,
     maxLength: maxLength,
     value: value,
@@ -19360,12 +19387,44 @@ var TextInput = function TextInput(_ref2) {
       (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
     },
     defaultValue: defaultValue,
-    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
-  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === 'disabled' ? 'disabled-text' : 'text',
+    placeholder: variant === "focused" ? nativeProps.placeholder : undefined
+  });
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
+    pointerEvents: variant === "disabled" || variant === "readonly" ? "none" : "auto",
+    testID: testID
+  }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
+    themeVariant: variant,
+    style: style
+  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
+    pointerEvents: "none"
+  }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
+    themeVariant: variant,
+    fontSize: "small"
+  }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    fontSize: "small",
+    themeVariant: variant
+  }, label)), typeof prefix === "string" ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: variant === "disabled" ? "disabled-text" : "text",
+    testID: "input-prefix",
+    icon: prefix,
+    size: "xsmall"
+  }) : prefix, /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
+    pointerEvents: "none"
+  }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabelInsideTextInput, {
+    themeVariant: variant
+  }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabelInsideTextInput, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    fontSize: "medium",
+    themeVariant: variant
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === "string" ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+    intent: variant === "disabled" ? "disabled-text" : "text",
     testID: "input-suffix",
     icon: actualSuffix,
-    spin: actualSuffix === 'loading',
+    spin: actualSuffix === "loading",
     size: "xsmall"
   }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, !!error && /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$1, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
     testID: "input-error-icon",
@@ -19436,7 +19495,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }) : null);
 };
 
-var StyledPickerWrapper$1 = index$7(reactNative.View)(function (_ref) {
+var StyledPickerWrapper$1 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     height: theme.__hd__.datePicker.sizes.height
@@ -19533,7 +19592,7 @@ var DatePicker = function DatePicker(props) {
 };
 
 var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
-var StyledContainer$2 = index$7(reactNative.View)(function (_ref) {
+var StyledContainer$2 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -19546,7 +19605,7 @@ var StyledContainer$2 = index$7(reactNative.View)(function (_ref) {
     elevation: 9999
   });
 });
-var StyledDragableContainer = index$7(reactNative.View)(function (_ref2) {
+var StyledDragableContainer = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme,
       enableShadow = _ref2.enableShadow;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -19560,13 +19619,13 @@ var StyledDragableContainer = index$7(reactNative.View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$7(AnimatedPressable)(function (_ref3) {
+var StyledBackdrop$1 = index$8(AnimatedPressable)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
   });
 });
-var StyledDrawerContainer = index$7(reactNative.Animated.View)(function (_ref4) {
+var StyledDrawerContainer = index$8(reactNative.Animated.View)(function (_ref4) {
   var theme = _ref4.theme,
       enableShadow = _ref4.enableShadow;
   return {
@@ -19577,7 +19636,7 @@ var StyledDrawerContainer = index$7(reactNative.Animated.View)(function (_ref4)
     overflow: 'hidden'
   };
 });
-var StyledDragableDrawerContainer = index$7(reactNative.Animated.View)(function (_ref5) {
+var StyledDragableDrawerContainer = index$8(reactNative.Animated.View)(function (_ref5) {
   var theme = _ref5.theme,
       enableShadow = _ref5.enableShadow;
   return {
@@ -19589,7 +19648,7 @@ var StyledDragableDrawerContainer = index$7(reactNative.Animated.View)(function
     maxHeight: '100%'
   };
 });
-var StyledHandlerContainer = index$7(reactNative.View)(function (_ref6) {
+var StyledHandlerContainer = index$8(reactNative.View)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     backgroundColor: theme.__hd__.drawer.colors.background,
@@ -19597,7 +19656,7 @@ var StyledHandlerContainer = index$7(reactNative.View)(function (_ref6) {
     alignItems: 'center'
   };
 });
-var StyledHandler = index$7(reactNative.View)(function (_ref7) {
+var StyledHandler = index$8(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     width: theme.__hd__.drawer.sizes.handlerWidth,
@@ -19828,11 +19887,11 @@ var Drawer = function Drawer(_ref) {
   }, children));
 };
 
-var index$5 = Object.assign(Drawer, {
+var index$6 = Object.assign(Drawer, {
   Dragable: DragableDrawer
 });
 
-var StyledWrapper$4 = index$7(reactNative.View)(function (_ref) {
+var StyledWrapper$5 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     display: 'flex',
@@ -19843,19 +19902,9 @@ var StyledWrapper$4 = index$7(reactNative.View)(function (_ref) {
     padding: theme.__hd__.empty.space.wrapperPadding
   };
 });
-var StyledIllustration = index$7(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    height: theme.__hd__.empty.sizes.illustration,
-    width: theme.__hd__.empty.sizes.illustration,
-    borderRadius: theme.__hd__.empty.radii.illustration,
-    backgroundColor: theme.__hd__.empty.colors.illustrationBackground,
-    marginBottom: theme.__hd__.empty.space.illustrationMargin
-  };
-});
-var StyledTitle = index$7(reactNative.Text)(function (_ref3) {
-  var theme = _ref3.theme,
-      themeVariant = _ref3.themeVariant;
+var StyledTitle = index$8(reactNative.Text)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeVariant = _ref2.themeVariant;
   return {
     fontFamily: theme.__hd__.empty.fonts.title,
     fontSize: theme.__hd__.empty.fontSizes.title,
@@ -19864,9 +19913,9 @@ var StyledTitle = index$7(reactNative.Text)(function (_ref3) {
     color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.text
   };
 });
-var StyledDescription = index$7(reactNative.Text)(function (_ref4) {
-  var theme = _ref4.theme,
-      themeVariant = _ref4.themeVariant;
+var StyledDescription = index$8(reactNative.Text)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeVariant = _ref3.themeVariant;
   return {
     fontFamily: theme.__hd__.empty.fonts.description,
     fontSize: theme.__hd__.empty.fontSizes.description,
@@ -19876,23 +19925,29 @@ var StyledDescription = index$7(reactNative.Text)(function (_ref4) {
 });
 
 var Empty = function Empty(_ref) {
-  var title = _ref.title,
+  var image = _ref.image,
+      title = _ref.title,
       description = _ref.description,
       style = _ref.style,
       testID = _ref.testID,
       _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? 'light' : _ref$variant;
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
+  var theme = useTheme();
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$5, {
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledIllustration, null), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
+  }, image !== undefined && /*#__PURE__*/React__default["default"].cloneElement(image, _objectSpread2(_objectSpread2({}, image.props), {}, {
+    style: [{
+      marginBottom: theme.__hd__.empty.space.imageMargin
+    }, image.props.style]
+  })), /*#__PURE__*/React__default["default"].createElement(StyledTitle, {
     themeVariant: variant
   }, title), !!description && /*#__PURE__*/React__default["default"].createElement(StyledDescription, {
     themeVariant: variant
   }, description));
 };
 
-var StyledFABContainer = index$7(reactNative.TouchableHighlight)(function (_ref) {
+var StyledFABContainer = index$8(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.fab.colors.buttonBackground,
@@ -19906,7 +19961,7 @@ var StyledFABContainer = index$7(reactNative.TouchableHighlight)(function (_ref)
     flexDirection: 'row'
   };
 });
-var StyledFABIcon = index$7(Icon)(function (_ref2) {
+var StyledFABIcon = index$8(Icon)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     color: theme.__hd__.fab.colors.icon,
@@ -19915,7 +19970,7 @@ var StyledFABIcon = index$7(Icon)(function (_ref2) {
     textAlign: 'center'
   };
 });
-var StyledFABText = index$7(reactNative.Text)(function (_ref3) {
+var StyledFABText = index$8(reactNative.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     fontFamily: theme.__hd__.fab.fonts.title,
@@ -19928,12 +19983,12 @@ var StyledFABText = index$7(reactNative.Text)(function (_ref3) {
   };
 });
 
-var _excluded$4 = ["active"];
+var _excluded$5 = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
 
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-      iconProps = _objectWithoutProperties(_ref, _excluded$4);
+      iconProps = _objectWithoutProperties(_ref, _excluded$5);
 
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
@@ -20012,7 +20067,7 @@ var FAB = function FAB(_ref3) {
   }));
 };
 
-var StyledActionItem = index$7(reactNative.TouchableOpacity)(function (_ref) {
+var StyledActionItem = index$8(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
@@ -20029,7 +20084,7 @@ var StyledActionItem = index$7(reactNative.TouchableOpacity)(function (_ref) {
     overflow: 'hidden'
   };
 });
-var StyledActionItemText = index$7(Typography.Text)(function (_ref2) {
+var StyledActionItemText = index$8(Typography.Text)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     paddingLeft: theme.__hd__.fab.space.actionItemTextPaddingLeft,
@@ -20039,7 +20094,7 @@ var StyledActionItemText = index$7(Typography.Text)(function (_ref2) {
     color: theme.__hd__.fab.colors.actionItemText
   };
 });
-var StyledIcon = index$7(Icon)(function (_ref3) {
+var StyledIcon = index$8(Icon)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     color: theme.__hd__.fab.colors.actionItemText
@@ -20061,7 +20116,7 @@ var ActionItem = function ActionItem(_ref) {
   }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title));
 };
 
-var StyledContainer$1 = index$7(reactNative.View)({
+var StyledContainer$1 = index$8(reactNative.View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -20070,12 +20125,12 @@ var StyledContainer$1 = index$7(reactNative.View)({
   alignItems: 'flex-end',
   justifyContent: 'flex-end'
 });
-var StyledActionGroupContainer = index$7(reactNative.Animated.View)({
+var StyledActionGroupContainer = index$8(reactNative.Animated.View)({
   alignItems: 'flex-end',
   justifyContent: 'flex-end',
   width: '70%'
 });
-var StyledFAB = index$7(FAB)(function (_ref) {
+var StyledFAB = index$8(FAB)(function (_ref) {
   var theme = _ref.theme;
   return {
     marginRight: theme.__hd__.fab.space.buttonMarginRight,
@@ -20083,7 +20138,7 @@ var StyledFAB = index$7(FAB)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var StyledBackdrop = index$7(reactNative.Animated.View)(function (_ref2) {
+var StyledBackdrop = index$8(reactNative.Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -20094,7 +20149,7 @@ var StyledBackdrop = index$7(reactNative.Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
-var StyledHeaderText = index$7(Typography.Text)(function (_ref3) {
+var StyledHeaderText = index$8(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     fontSize: theme.__hd__.fab.fontSizes.header,
@@ -20182,11 +20237,34 @@ var ActionGroup = function ActionGroup(_ref2) {
   }));
 };
 
-var index$4 = Object.assign(FAB, {
+var index$5 = Object.assign(FAB, {
   ActionGroup: ActionGroup
 });
 
-var StyledListItemContainer$1 = index$7(reactNative.TouchableHighlight)(function (_ref) {
+var _excluded$4 = ["rounded", "size", "testID", "style"];
+
+var Image = function Image(_ref) {
+  var _ref$rounded = _ref.rounded,
+      rounded = _ref$rounded === void 0 ? false : _ref$rounded,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? '6xlarge' : _ref$size,
+      testID = _ref.testID,
+      style = _ref.style,
+      imageNativeProps = _objectWithoutProperties(_ref, _excluded$4);
+
+  var theme = useTheme();
+  var imageSize = theme.__hd__.image.sizes[size];
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
+    testID: testID,
+    style: [{
+      width: imageSize,
+      height: imageSize,
+      borderRadius: rounded ? imageSize / 2 : 0
+    }, style]
+  }, imageNativeProps));
+};
+
+var StyledListItemContainer$1 = index$8(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
       _ref$themeSelected = _ref.themeSelected,
       themeSelected = _ref$themeSelected === void 0 ? false : _ref$themeSelected,
@@ -20217,21 +20295,21 @@ var StyledListItemContainer$1 = index$7(reactNative.TouchableHighlight)(function
       return sharedStyles;
   }
 });
-var StyledContentContainer = index$7(reactNative.View)(function () {
+var StyledContentContainer = index$8(reactNative.View)(function () {
   return {
     flexDirection: 'column',
     flex: 1,
     flexGrow: 2
   };
 });
-var StyledChildrenContainer = index$7(reactNative.View)(function () {
+var StyledChildrenContainer = index$8(reactNative.View)(function () {
   return {
     flexDirection: 'column',
     justifyContent: 'flex-start',
     alignItems: 'flex-start'
   };
 });
-var StyledLeadingStatus = index$7(reactNative.View)(function (_ref2) {
+var StyledLeadingStatus = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme,
       themeLeadingStatusIntent = _ref2.themeLeadingStatusIntent;
   return {
@@ -20241,19 +20319,19 @@ var StyledLeadingStatus = index$7(reactNative.View)(function (_ref2) {
     backgroundColor: theme.__hd__.list.colors.leadingStatus[themeLeadingStatusIntent]
   };
 });
-var StyledPrefixContainer$1 = index$7(reactNative.View)(function (_ref3) {
+var StyledPrefixContainer$1 = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     marginRight: theme.__hd__.list.space.prefixContainerMarginRight
   };
 });
-var StyledSuffixContainer$1 = index$7(reactNative.View)(function (_ref4) {
+var StyledSuffixContainer$1 = index$8(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft
   };
 });
-var StyledTitleContainer$1 = index$7(reactNative.View)(function () {
+var StyledTitleContainer$1 = index$8(reactNative.View)(function () {
   return {
     flex: 1
   };
@@ -20308,24 +20386,24 @@ var ListItem = function ListItem(_ref) {
   }) : suffix)), children && /*#__PURE__*/React__default["default"].createElement(StyledChildrenContainer, null, children))));
 };
 
-var StyledPrefixContainer = index$7(reactNative.View)(function (_ref) {
+var StyledPrefixContainer = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     marginRight: theme.__hd__.list.space.prefixContainerMarginRight
   };
 });
-var StyledSuffixContainer = index$7(reactNative.View)(function (_ref2) {
+var StyledSuffixContainer = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     marginLeft: theme.__hd__.list.space.suffixContainerMarginLeft
   };
 });
-var StyledTitleContainer = index$7(reactNative.View)(function () {
+var StyledTitleContainer = index$8(reactNative.View)(function () {
   return {
     flex: 1
   };
 });
-var StyledListItemContainer = index$7(reactNative.TouchableHighlight)(function (_ref3) {
+var StyledListItemContainer = index$8(reactNative.TouchableHighlight)(function (_ref3) {
   var theme = _ref3.theme,
       themeSelected = _ref3.themeSelected,
       themeDisabled = _ref3.themeDisabled;
@@ -20379,17 +20457,17 @@ var List = {
   BasicItem: BasicListItem
 };
 
-var StyledWrapper$3 = index$7(reactNative.View)(function () {
+var StyledWrapper$4 = index$8(reactNative.View)(function () {
   return {
     alignContent: 'flex-start'
   };
 });
-var StyledPinWrapper = index$7(reactNative.View)(function () {
+var StyledPinWrapper = index$8(reactNative.View)(function () {
   return {
     flexDirection: 'row'
   };
 });
-var StyledCell = index$7(reactNative.View)(function (_ref) {
+var StyledCell = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       themeFocused = _ref.themeFocused,
       themeState = _ref.themeState;
@@ -20403,7 +20481,7 @@ var StyledCell = index$7(reactNative.View)(function (_ref) {
     borderColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledCellText = index$7(reactNative.Text)(function (_ref2) {
+var StyledCellText = index$8(reactNative.Text)(function (_ref2) {
   var theme = _ref2.theme,
       themeState = _ref2.themeState;
   return {
@@ -20412,13 +20490,13 @@ var StyledCellText = index$7(reactNative.Text)(function (_ref2) {
     color: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledSpacer = index$7(reactNative.View)(function (_ref3) {
+var StyledSpacer = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     marginLeft: theme.__hd__.pinInput.space.spacer
   };
 });
-var StyledMask = index$7(reactNative.View)(function (_ref4) {
+var StyledMask = index$8(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme,
       themeState = _ref4.themeState;
   return {
@@ -20429,7 +20507,7 @@ var StyledMask = index$7(reactNative.View)(function (_ref4) {
     borderColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledFilledMask = index$7(reactNative.View)(function (_ref5) {
+var StyledFilledMask = index$8(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
       themeState = _ref5.themeState;
   return {
@@ -20441,7 +20519,7 @@ var StyledFilledMask = index$7(reactNative.View)(function (_ref5) {
     backgroundColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledHiddenInput = index$7(reactNative.TextInput)(function (_ref6) {
+var StyledHiddenInput = index$8(reactNative.TextInput)(function (_ref6) {
   var themePinLength = _ref6.themePinLength,
       theme = _ref6.theme;
   var cellWidth = theme.__hd__.pinInput.sizes.cellWidth;
@@ -20455,14 +20533,14 @@ var StyledHiddenInput = index$7(reactNative.TextInput)(function (_ref6) {
     height: '100%'
   };
 });
-var StyledErrorContainer = index$7(reactNative.View)(function (_ref7) {
+var StyledErrorContainer = index$8(reactNative.View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
     flexDirection: 'row',
     paddingTop: theme.__hd__.pinInput.space.errorMessagePadding
   };
 });
-var StyledErrorMessage = index$7(reactNative.Text)(function (_ref8) {
+var StyledErrorMessage = index$8(reactNative.Text)(function (_ref8) {
   var theme = _ref8.theme;
   return {
     fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
@@ -20565,7 +20643,7 @@ function PinInput(_ref2) {
       reactNative.InteractionManager.runAfterInteractions(focus);
     }
   }, [inputRef]);
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledPinWrapper, null, _toConsumableArray(Array(length).keys()).map(function (index) {
@@ -20604,14 +20682,14 @@ var INNER_CIRCLE_PERCENTAGE = 0.85; // 85% width according to design
 
 var STROKE_WIDTH_PERCENTAGE = 0.075; // 7.5% width  according to design
 
-var StyledContainer = index$7(reactNative.View)(function (_ref) {
+var StyledContainer = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var StyledHalfCircleWrapper = index$7(reactNative.View)(function (_ref2) {
+var StyledHalfCircleWrapper = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     width: theme.__hd__.progress.sizes.circleWidth / 2,
@@ -20619,7 +20697,7 @@ var StyledHalfCircleWrapper = index$7(reactNative.View)(function (_ref2) {
     overflow: 'hidden'
   };
 });
-var StyledHalfCircleInnerFG = index$7(reactNative.View)(function (_ref3) {
+var StyledHalfCircleInnerFG = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme,
       themeIntent = _ref3.themeIntent;
   return {
@@ -20629,7 +20707,7 @@ var StyledHalfCircleInnerFG = index$7(reactNative.View)(function (_ref3) {
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var StyledHalfCircleInnerBG = index$7(reactNative.View)(function (_ref4) {
+var StyledHalfCircleInnerBG = index$8(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     width: theme.__hd__.progress.sizes.circleWidth,
@@ -20638,7 +20716,7 @@ var StyledHalfCircleInnerBG = index$7(reactNative.View)(function (_ref4) {
     borderRadius: theme.__hd__.progress.radii["default"]
   };
 });
-var StyledDonutCircle = index$7(reactNative.View)(function (_ref5) {
+var StyledDonutCircle = index$8(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     position: 'absolute',
@@ -20653,7 +20731,7 @@ var StyledDonutCircle = index$7(reactNative.View)(function (_ref5) {
     justifyContent: 'center'
   };
 });
-var StyledStrokeEnd = index$7(reactNative.View)(function (_ref6) {
+var StyledStrokeEnd = index$8(reactNative.View)(function (_ref6) {
   var theme = _ref6.theme,
       themeIntent = _ref6.themeIntent;
   return {
@@ -20781,7 +20859,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   }, "".concat(value, "%")))));
 };
 
-var StyledWrapper$2 = index$7(reactNative.View)(function (_ref) {
+var StyledWrapper$3 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     height: theme.__hd__.progress.sizes.barHeight,
@@ -20790,7 +20868,7 @@ var StyledWrapper$2 = index$7(reactNative.View)(function (_ref) {
     overflow: 'hidden'
   };
 });
-var StyledInner = index$7(reactNative.Animated.View)(function (_ref2) {
+var StyledInner = index$8(reactNative.Animated.View)(function (_ref2) {
   var theme = _ref2.theme,
       themeIntent = _ref2.themeIntent;
   return {
@@ -20836,7 +20914,7 @@ var ProgressBar = function ProgressBar(_ref) {
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });
-  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$2, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, _extends$1({}, nativeProps, {
     testID: testID,
     style: style
   }), /*#__PURE__*/React__default["default"].createElement(StyledInner, {
@@ -20860,13 +20938,47 @@ var Progress = {
   Bar: ProgressBar
 };
 
-var StyledView$1 = index$7(reactNative.View)();
-var StyledSpinnerContainer = index$7(reactNative.View)({
+var Slider = function Slider(_ref) {
+  var _ref$minimumValue = _ref.minimumValue,
+      minimumValue = _ref$minimumValue === void 0 ? 0 : _ref$minimumValue,
+      _ref$maximumValue = _ref.maximumValue,
+      maximumValue = _ref$maximumValue === void 0 ? 1 : _ref$maximumValue,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 0 : _ref$step,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      onValueChange = _ref.onValueChange,
+      onSlidingStart = _ref.onSlidingStart,
+      onSlidingComplete = _ref.onSlidingComplete,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      style = _ref.style,
+      testID = _ref.testID;
+  var theme = useTheme();
+  return /*#__PURE__*/React__default["default"].createElement(RnSlider__default["default"], {
+    minimumValue: minimumValue,
+    maximumValue: maximumValue,
+    step: step,
+    value: value,
+    onValueChange: onValueChange,
+    onSlidingStart: onSlidingStart,
+    onSlidingComplete: onSlidingComplete,
+    disabled: disabled,
+    minimumTrackTintColor: theme.__hd__.slider.colors.minimumTrackTint,
+    thumbTintColor: theme.__hd__.slider.colors.thumbTint,
+    maximumTrackTintColor: theme.__hd__.slider.colors.maximumTrackTint,
+    style: style,
+    testID: testID
+  });
+};
+
+var StyledView$1 = index$8(reactNative.View)();
+var StyledSpinnerContainer = index$8(reactNative.View)({
   height: '100%',
   justifyContent: 'center',
   alignItems: 'center'
 });
-var StyledSpinnerRow = index$7(reactNative.View)(function (_ref) {
+var StyledSpinnerRow = index$8(reactNative.View)(function (_ref) {
   var themePosition = _ref.themePosition,
       _ref$themeSize = _ref.themeSize,
       themeSize = _ref$themeSize === void 0 ? 'medium' : _ref$themeSize,
@@ -20876,7 +20988,7 @@ var StyledSpinnerRow = index$7(reactNative.View)(function (_ref) {
     marginBottom: themePosition === 'top' ? theme.__hd__.spinner.space.spinnerDotPadding[themeSize] : 0
   };
 });
-var StyledSpinnerDot = index$7(reactNative.View)(function (_ref2) {
+var StyledSpinnerDot = index$8(reactNative.View)(function (_ref2) {
   var themePosition = _ref2.themePosition,
       _ref2$themeSize = _ref2.themeSize,
       themeSize = _ref2$themeSize === void 0 ? 'medium' : _ref2$themeSize,
@@ -20980,7 +21092,7 @@ var Spinner = function Spinner(_ref) {
   })));
 };
 
-var Circle = index$7(reactNative.View)(function (_ref) {
+var Circle = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     height: theme.__hd__.radio.sizes.circle,
@@ -20992,7 +21104,7 @@ var Circle = index$7(reactNative.View)(function (_ref) {
     justifyContent: 'center'
   };
 });
-var InnerCircle = index$7(reactNative.View)(function (_ref2) {
+var InnerCircle = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     height: theme.__hd__.radio.sizes.innerCircle,
@@ -21001,7 +21113,7 @@ var InnerCircle = index$7(reactNative.View)(function (_ref2) {
     backgroundColor: theme.__hd__.radio.colors.circle
   };
 });
-var Spacer = index$7(reactNative.View)(function (_ref3) {
+var Spacer = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     marginTop: theme.__hd__.radio.space.groupTopMargin
@@ -21077,7 +21189,7 @@ var CompoundRadio = {
   Group: RadioGroup
 };
 
-var StyledHeading = index$7(reactNative.View)(function (_ref) {
+var StyledHeading = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
@@ -21090,13 +21202,13 @@ var StyledHeading = index$7(reactNative.View)(function (_ref) {
     justifyContent: 'space-between'
   };
 });
-var StyledIconWrapper = index$7(reactNative.View)(function (_ref2) {
+var StyledIconWrapper$1 = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     marginRight: theme.__hd__.sectionHeading.space.iconMarginRight
   };
 });
-var StyledWrapper$1 = index$7(reactNative.View)(function () {
+var StyledWrapper$2 = index$8(reactNative.View)(function () {
   return {
     display: 'flex',
     flexDirection: 'row'
@@ -21130,7 +21242,7 @@ var SectionHeading = function SectionHeading(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(StyledHeading, {
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$2, null, /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$1, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
     size: ICON_SIZE_MAP[fontSize],
     intent: ICON_INTENT_MAP[intent]
@@ -21144,25 +21256,25 @@ var SectionHeading = function SectionHeading(_ref) {
   }, text)), rightChildren);
 };
 
-var SectionSpacer = index$7(reactNative.View)(function (_ref) {
+var SectionSpacer = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     marginTop: theme.__hd__.select.space.sectionSpacing
   };
 });
-var OptionSpacer = index$7(reactNative.View)(function (_ref2) {
+var OptionSpacer = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     marginTop: theme.__hd__.select.space.optionSpacing
   };
 });
-var FooterText = index$7(Typography.Text)(function (_ref3) {
+var FooterText = index$8(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     color: theme.__hd__.select.colors.footerText
   };
 });
-var StyledSearchBar = index$7(reactNative.View)(function (_ref4) {
+var StyledSearchBar = index$8(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     marginTop: theme.__hd__.select.space.searchBarMarginTopSpacing,
@@ -21182,72 +21294,6 @@ var Footer = function Footer(_ref) {
   }, label));
 };
 
-var isSections = function isSections(options) {
-  var firstOption = options[0];
-  return firstOption !== undefined && firstOption.category !== undefined;
-};
-var toSections = function toSections(options) {
-  if (isSections(options)) {
-    return options;
-  }
-
-  return [{
-    category: '',
-    data: options
-  }];
-};
-var toFlatOptions = function toFlatOptions(options) {
-  if (isSections(options)) {
-    return options.flatMap(function (opt) {
-      return opt.data;
-    });
-  }
-
-  return options;
-};
-var getScrollParams = function getScrollParams(value, sections) {
-  var itemIndex = -1;
-  var sectionIndex = sections.findIndex(function (section) {
-    itemIndex = section.data.findIndex(function (opt) {
-      return opt.value === value;
-    });
-    return itemIndex !== -1;
-  });
-  return {
-    sectionIndex: sectionIndex < 0 ? 0 : sectionIndex,
-    itemIndex: itemIndex < 0 ? 0 : itemIndex
-  };
-};
-var useKeyboard = function useKeyboard() {
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isKeyboardVisible = _useState2[0],
-      setKeyboardVisible = _useState2[1];
-
-  var _useState3 = React.useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      keyboardHeight = _useState4[0],
-      setKeyboardHeight = _useState4[1];
-
-  React.useEffect(function () {
-    var keyboardWillShowListener = reactNative.Keyboard.addListener('keyboardWillShow', function (e) {
-      setKeyboardVisible(true);
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    var keyboardWillHideListener = reactNative.Keyboard.addListener('keyboardWillHide', function () {
-      setKeyboardVisible(false);
-    });
-    return function () {
-      keyboardWillShowListener.remove();
-      keyboardWillHideListener.remove();
-    };
-  }, []);
-  return {
-    isKeyboardVisible: isKeyboardVisible,
-    keyboardHeight: keyboardHeight
-  };
-};
-
 var StyledOptionList = function StyledOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
       loading = _ref.loading,
@@ -21255,9 +21301,8 @@ var StyledOptionList = function StyledOptionList(_ref) {
       onQueryChange = _ref.onQueryChange,
       sections = _ref.sections,
       renderItem = _ref.renderItem,
-      scrollParams = _ref.scrollParams;
+      sectionListRef = _ref.sectionListRef;
   var theme = useTheme$1();
-  var sectionListRef = React.useRef(null);
 
   var _useState = React.useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -21276,11 +21321,6 @@ var StyledOptionList = function StyledOptionList(_ref) {
       return setOnEndReachedCalled(true);
     },
     onScrollToIndexFailed: function onScrollToIndexFailed() {},
-    onContentSizeChange: function onContentSizeChange() {
-      var _sectionListRef$curre;
-
-      return sections.length && ((_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams));
-    },
     onMomentumScrollBegin: function onMomentumScrollBegin() {
       if (onEndReached && onEndReachedCalled && !loading) onEndReached();
       setOnEndReachedCalled(false);
@@ -21307,7 +21347,7 @@ var StyledOptionList = function StyledOptionList(_ref) {
   });
 };
 
-var Option$1 = function Option(_ref) {
+var Option$2 = function Option(_ref) {
   var text = _ref.text,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -21334,9 +21374,8 @@ var OptionList$1 = function OptionList(_ref) {
       onQueryChange = _ref.onQueryChange,
       sections = _ref.sections,
       renderOption = _ref.renderOption,
-      value = _ref.value;
-  var firstValue = value === null || value === void 0 ? void 0 : value[0];
-  var scrollParams = getScrollParams(firstValue, sections);
+      value = _ref.value,
+      sectionListRef = _ref.sectionListRef;
 
   var renderItem = function renderItem(info) {
     var item = info.item;
@@ -21355,7 +21394,7 @@ var OptionList$1 = function OptionList(_ref) {
     return renderOption ? renderOption(_objectSpread2(_objectSpread2({}, info), {}, {
       selected: selected,
       onPress: onItemPress
-    })) : /*#__PURE__*/React__default["default"].createElement(Option$1, {
+    })) : /*#__PURE__*/React__default["default"].createElement(Option$2, {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
@@ -21370,10 +21409,76 @@ var OptionList$1 = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    scrollParams: scrollParams
+    sectionListRef: sectionListRef
   });
 };
 
+var isSections = function isSections(options) {
+  var firstOption = options[0];
+  return firstOption !== undefined && firstOption.category !== undefined;
+};
+var toSections = function toSections(options) {
+  if (isSections(options)) {
+    return options;
+  }
+
+  return [{
+    category: '',
+    data: options
+  }];
+};
+var toFlatOptions = function toFlatOptions(options) {
+  if (isSections(options)) {
+    return options.flatMap(function (opt) {
+      return opt.data;
+    });
+  }
+
+  return options;
+};
+var getScrollParams = function getScrollParams(value, sections) {
+  var itemIndex = -1;
+  var sectionIndex = sections.findIndex(function (section) {
+    itemIndex = section.data.findIndex(function (opt) {
+      return opt.value === value;
+    });
+    return itemIndex !== -1;
+  });
+  return {
+    sectionIndex: sectionIndex < 0 ? 0 : sectionIndex,
+    itemIndex: itemIndex < 0 ? 0 : itemIndex
+  };
+};
+var useKeyboard = function useKeyboard() {
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isKeyboardVisible = _useState2[0],
+      setKeyboardVisible = _useState2[1];
+
+  var _useState3 = React.useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      keyboardHeight = _useState4[0],
+      setKeyboardHeight = _useState4[1];
+
+  React.useEffect(function () {
+    var keyboardWillShowListener = reactNative.Keyboard.addListener('keyboardWillShow', function (e) {
+      setKeyboardVisible(true);
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    var keyboardWillHideListener = reactNative.Keyboard.addListener('keyboardWillHide', function () {
+      setKeyboardVisible(false);
+    });
+    return function () {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+  return {
+    isKeyboardVisible: isKeyboardVisible,
+    keyboardHeight: keyboardHeight
+  };
+};
+
 function MultiSelect(_ref) {
   var footerLabel = _ref.footerLabel,
       label = _ref.label,
@@ -21386,6 +21491,7 @@ function MultiSelect(_ref) {
       onQueryChange = _ref.onQueryChange,
       options = _ref.options,
       renderOption = _ref.renderOption,
+      renderSelectedValue = _ref.renderSelectedValue,
       query = _ref.query,
       error = _ref.error,
       _ref$editable = _ref.editable,
@@ -21411,6 +21517,7 @@ function MultiSelect(_ref) {
       selectingValue = _useState4[0],
       setSelectingValue = _useState4[1];
 
+  var sectionListRef = React.useRef(null);
   var sections = toSections(options);
   var flatOptions = toFlatOptions(options);
   var displayedValue = flatOptions.filter(function (opt) {
@@ -21438,7 +21545,10 @@ function MultiSelect(_ref) {
     numberOfLines: numberOfLines,
     pointerEvents: "none",
     style: style,
-    testID: testID
+    testID: testID,
+    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+      return renderSelectedValue(value, props);
+    } : undefined
   })))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
@@ -21455,7 +21565,15 @@ function MultiSelect(_ref) {
         setOpen(false);
         onConfirm(selectingValue);
       }
-    })
+    }),
+    onAnimationEnd: function onAnimationEnd() {
+      if (open === true) {
+        var _sectionListRef$curre;
+
+        var scrollParams = getScrollParams(value === null || value === void 0 ? void 0 : value[0], sections);
+        (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
+      }
+    }
   }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     editable: true,
     placeholder: "Search",
@@ -21469,11 +21587,12 @@ function MultiSelect(_ref) {
     sections: sections,
     renderOption: renderOption,
     value: selectingValue,
-    onPress: setSelectingValue
+    onPress: setSelectingValue,
+    sectionListRef: sectionListRef
   })));
 }
 
-var Option = function Option(_ref) {
+var Option$1 = function Option(_ref) {
   var text = _ref.text,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -21499,8 +21618,8 @@ var OptionList = function OptionList(_ref) {
       onQueryChange = _ref.onQueryChange,
       sections = _ref.sections,
       renderOption = _ref.renderOption,
-      value = _ref.value;
-  var scrollParams = getScrollParams(value, sections);
+      value = _ref.value,
+      sectionListRef = _ref.sectionListRef;
 
   var renderItem = function renderItem(info) {
     var item = info.item;
@@ -21517,7 +21636,7 @@ var OptionList = function OptionList(_ref) {
     return renderOption ? renderOption(_objectSpread2(_objectSpread2({}, info), {}, {
       selected: selected,
       onPress: onItemPress
-    })) : /*#__PURE__*/React__default["default"].createElement(Option, {
+    })) : /*#__PURE__*/React__default["default"].createElement(Option$1, {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
@@ -21532,7 +21651,7 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    scrollParams: scrollParams
+    sectionListRef: sectionListRef
   });
 };
 
@@ -21549,6 +21668,7 @@ var SingleSelect = function SingleSelect(_ref) {
       onQueryChange = _ref.onQueryChange,
       options = _ref.options,
       renderOption = _ref.renderOption,
+      renderSelectedValue = _ref.renderSelectedValue,
       query = _ref.query,
       error = _ref.error,
       _ref$editable = _ref.editable,
@@ -21569,6 +21689,7 @@ var SingleSelect = function SingleSelect(_ref) {
       open = _useState2[0],
       setOpen = _useState2[1];
 
+  var sectionListRef = React.useRef(null);
   var sections = toSections(options);
   var flatOptions = toFlatOptions(options);
   var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
@@ -21594,7 +21715,10 @@ var SingleSelect = function SingleSelect(_ref) {
     numberOfLines: numberOfLines,
     pointerEvents: "none",
     style: style,
-    testID: testID
+    testID: testID,
+    renderInputValue: renderSelectedValue !== undefined ? function (props) {
+      return renderSelectedValue(value, props);
+    } : undefined
   })))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
@@ -21604,6 +21728,14 @@ var SingleSelect = function SingleSelect(_ref) {
     header: label,
     style: {
       paddingBottom: isKeyboardVisible ? keyboardHeight : 0
+    },
+    onAnimationEnd: function onAnimationEnd() {
+      if (open === true) {
+        var _sectionListRef$curre;
+
+        var scrollParams = getScrollParams(value, sections);
+        (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
+      }
     }
   }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     editable: true,
@@ -21621,21 +21753,22 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress(selectedValue) {
       setOpen(false);
       onConfirm(selectedValue);
-    }
+    },
+    sectionListRef: sectionListRef
   })));
 };
 
-var index$3 = Object.assign(SingleSelect, {
+var index$4 = Object.assign(SingleSelect, {
   Multi: MultiSelect
 });
 
-var StyledWrapper = index$7(reactNative.View)(function (_ref) {
+var StyledWrapper$1 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       themeVariant = _ref.themeVariant,
       themeSize = _ref.themeSize;
   return {
-    height: theme.__hd__["switch"].heights[themeSize],
-    width: theme.__hd__["switch"].widths[themeSize],
+    height: theme.__hd__["switch"].sizes.heights[themeSize],
+    width: theme.__hd__["switch"].sizes.widths[themeSize],
     paddingHorizontal: theme.__hd__["switch"].spaces[themeSize],
     borderRadius: theme.__hd__["switch"].radii.rounded,
     backgroundColor: theme.__hd__["switch"].colors.backgroundColors[themeVariant],
@@ -21643,17 +21776,118 @@ var StyledWrapper = index$7(reactNative.View)(function (_ref) {
     justifyContent: 'center'
   };
 });
-var StyledKnot = index$7(reactNative.Animated.View)(function (_ref2) {
+var StyledKnot = index$8(reactNative.Animated.View)(function (_ref2) {
   var theme = _ref2.theme,
       themeSize = _ref2.themeSize;
   return {
-    width: theme.__hd__["switch"].thumbSizes[themeSize],
-    height: theme.__hd__["switch"].thumbSizes[themeSize],
+    width: theme.__hd__["switch"].sizes.thumbs[themeSize],
+    height: theme.__hd__["switch"].sizes.thumbs[themeSize],
     backgroundColor: theme.__hd__["switch"].colors.thumb,
     borderRadius: theme.__hd__["switch"].radii.rounded
   };
 });
 
+var StyledWrapper = index$8(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    flexDirection: 'row',
+    width: '100%',
+    height: theme.__hd__["switch"].sizes.selector.height,
+    borderRadius: theme.__hd__["switch"].radii.selector["default"],
+    backgroundColor: theme.__hd__["switch"].colors.selector.background,
+    padding: theme.__hd__["switch"].spaces.selector.wrapperPadding
+  };
+});
+var StyledTextWrapper = index$8(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    flex: 1,
+    borderRadius: theme.__hd__["switch"].radii.selector["default"],
+    backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
+    justifyContent: 'center',
+    alignItems: 'center'
+  };
+});
+var StyledIconWrapper = index$8(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    paddingHorizontal: theme.__hd__["switch"].spaces.selector.iconPadding,
+    justifyContent: 'center',
+    alignItems: 'center'
+  };
+});
+
+var OptionContent = function OptionContent(_ref) {
+  var content = _ref.content,
+      badge = _ref.badge;
+  var theme = useTheme();
+
+  if (!badge) {
+    return content;
+  }
+
+  if (badge.type === 'status') {
+    return /*#__PURE__*/React__default["default"].createElement(Badge$1.Status, {
+      visible: true,
+      style: {
+        paddingHorizontal: theme.space.small
+      },
+      testID: "selector-switch-status-badge"
+    }, content);
+  }
+
+  return content;
+};
+
+var Option = function Option(_ref2) {
+  var text = _ref2.text,
+      icon = _ref2.icon,
+      badge = _ref2.badge,
+      selected = _ref2.selected;
+
+  if (selected) {
+    return /*#__PURE__*/React__default["default"].createElement(StyledTextWrapper, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
+      content: /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
+        fontSize: "large",
+        intent: "inverted"
+      }, text),
+      badge: badge
+    }));
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
+    content: /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: icon
+    }),
+    badge: badge
+  }));
+};
+
+var SelectorSwitch = function SelectorSwitch(_ref) {
+  var options = _ref.options,
+      value = _ref.value,
+      _onPress = _ref.onPress,
+      style = _ref.style,
+      testID = _ref.testID;
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
+    onPress: function onPress() {
+      return _onPress(value);
+    },
+    testID: testID
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+    style: style
+  }, options.map(function (opt, index) {
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      React__default["default"].createElement(Option, _extends$1({}, opt, {
+        selected: opt.value === value,
+        key: index
+      }))
+    );
+  })));
+};
+
 var getVariant = function getVariant(_ref) {
   var disabled = _ref.disabled,
       checked = _ref.checked;
@@ -21680,7 +21914,7 @@ var Switch = function Switch(_ref2) {
     disabled: disabled,
     checked: checked
   });
-  var offset = checked ? theme.__hd__["switch"].widths[size] - theme.__hd__["switch"].thumbSizes[size] - theme.__hd__["switch"].spaces[size] * 2 : theme.__hd__["switch"].spaces.inactive;
+  var offset = checked ? (theme.__hd__["switch"].sizes.widths[size] - theme.__hd__["switch"].sizes.thumbs[size]) / 2 + theme.__hd__["switch"].sizes.thumbs[size] / 2 : 0;
 
   var _useState = React.useState(function () {
     return new reactNative.Animated.Value(offset);
@@ -21699,7 +21933,7 @@ var Switch = function Switch(_ref2) {
     testID: testID,
     onPress: onPress,
     disabled: disabled
-  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
     themeVariant: variant,
     themeSize: size,
     style: style
@@ -21711,12 +21945,16 @@ var Switch = function Switch(_ref2) {
   })));
 };
 
+var index$3 = Object.assign(Switch, {
+  Selector: SelectorSwitch
+});
+
 var AnimatedPagerView = reactNative.Animated.createAnimatedComponent(PagerView__default["default"]);
-var TabContainer$1 = index$7(reactNative.View)({
+var TabContainer$1 = index$8(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-var HeaderTabWrapper$1 = index$7(reactNative.View)(function (_ref) {
+var HeaderTabWrapper$1 = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       themeInsets = _ref.themeInsets;
   return {
@@ -21725,10 +21963,10 @@ var HeaderTabWrapper$1 = index$7(reactNative.View)(function (_ref) {
     borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom
   };
 });
-var HeaderTab = index$7(reactNative.View)({
+var HeaderTab = index$8(reactNative.View)({
   flexDirection: 'row'
 });
-var HeaderTabItem$1 = index$7(reactNative.View)(function (_ref2) {
+var HeaderTabItem$1 = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     flex: 1,
@@ -21736,13 +21974,13 @@ var HeaderTabItem$1 = index$7(reactNative.View)(function (_ref2) {
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var ContentWrapper$1 = index$7(AnimatedPagerView)({
+var ContentWrapper$1 = index$8(AnimatedPagerView)({
   flex: 1
 });
-var TabScreen$1 = index$7(reactNative.View)({
+var TabScreen$1 = index$8(reactNative.View)({
   flex: 1
 });
-var StyledIndicator = index$7(reactNative.Animated.View)(function (_ref3) {
+var StyledIndicator = index$8(reactNative.Animated.View)(function (_ref3) {
   var theme = _ref3.theme,
       themeWidth = _ref3.themeWidth;
   return {
@@ -21753,7 +21991,7 @@ var StyledIndicator = index$7(reactNative.Animated.View)(function (_ref3) {
     bottom: 0
   };
 });
-var StyledBadgeWrapper = index$7(reactNative.View)({
+var StyledBadgeWrapper = index$8(reactNative.View)({
   flexDirection: 'row',
   alignItems: 'center'
 });
@@ -21779,17 +22017,17 @@ var ActiveTabIndicator = function ActiveTabIndicator(_ref) {
   });
 };
 
-var TabScreen = index$7(reactNative.View)({
+var TabScreen = index$8(reactNative.View)({
   flex: 1
 });
-var TabContainer = index$7(reactNative.View)({
+var TabContainer = index$8(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper = index$7(PagerView__default["default"])({
+var ContentWrapper = index$8(PagerView__default["default"])({
   flex: 1
 });
-var HeaderTabWrapper = index$7(reactNative.View)(function (_ref) {
+var HeaderTabWrapper = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       themeInsets = _ref.themeInsets;
   return {
@@ -21798,7 +22036,7 @@ var HeaderTabWrapper = index$7(reactNative.View)(function (_ref) {
     borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom
   };
 });
-var HeaderTabItem = index$7(reactNative.Animated.View)(function (_ref2) {
+var HeaderTabItem = index$8(reactNative.Animated.View)(function (_ref2) {
   var theme = _ref2.theme,
       isFirstItem = _ref2.isFirstItem;
   return {
@@ -21806,13 +22044,13 @@ var HeaderTabItem = index$7(reactNative.Animated.View)(function (_ref2) {
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var HeaderTabItemOutlineWrapper = index$7(reactNative.View)(function (_ref3) {
+var HeaderTabItemOutlineWrapper = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2({
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   }, reactNative.StyleSheet.absoluteFillObject);
 });
-var HeaderTabItemOutline = index$7(reactNative.Animated.View)(function (_ref4) {
+var HeaderTabItemOutline = index$8(reactNative.Animated.View)(function (_ref4) {
   var theme = _ref4.theme,
       themeActive = _ref4.themeActive;
   return {
@@ -21820,7 +22058,7 @@ var HeaderTabItemOutline = index$7(reactNative.Animated.View)(function (_ref4) {
     backgroundColor: themeActive ? theme.__hd__.tabs.colors.activeBackground : undefined
   };
 });
-var HeaderTabItemWrapper = index$7(reactNative.View)(function (_ref5) {
+var HeaderTabItemWrapper = index$8(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme;
   return {
     paddingHorizontal: theme.__hd__.tabs.space.outlineHorizontalPadding,
@@ -21918,7 +22156,8 @@ var ScrollableTab = function ScrollableTab(_ref2) {
       _ref2$lazy = _ref2.lazy,
       lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
       _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
-      lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist;
+      lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
+      componentTestID = _ref2.testID;
   var flatListRef = React__default["default"].useRef(null);
   var pagerViewRef = React__default["default"].useRef(null);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
@@ -21953,10 +22192,12 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     };
   }, [selectedTabIndex]);
   return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
-    style: containerStyle
+    style: containerStyle,
+    testID: componentTestID
   }, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper, {
     themeInsets: insets,
-    style: barStyle
+    style: barStyle,
+    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
     ref: flatListRef,
     horizontal: true,
@@ -22079,7 +22320,8 @@ var Tabs = function Tabs(_ref2) {
       _ref2$lazy = _ref2.lazy,
       lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
       _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
-      lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist;
+      lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
+      componentTestID = _ref2.testID;
   var theme = useTheme$1();
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   var pagerViewRef = React__default["default"].useRef(null);
@@ -22102,10 +22344,12 @@ var Tabs = function Tabs(_ref2) {
     }
   }, [selectedTabIndex]);
   return /*#__PURE__*/React__default["default"].createElement(TabContainer$1, {
-    style: containerStyle
+    style: containerStyle,
+    testID: componentTestID
   }, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper$1, {
     themeInsets: insets,
-    style: barStyle
+    style: barStyle,
+    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, null, /*#__PURE__*/React__default["default"].createElement(HeaderTab, {
     onLayout: function onLayout(e) {
       var width = e.nativeEvent.layout.width;
@@ -22184,7 +22428,7 @@ var index$2 = Object.assign(Tabs, {
   Scroll: ScrollableTab
 });
 
-var StyledView = index$7(reactNative.View)(function (_ref) {
+var StyledView = index$8(reactNative.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
       theme = _ref.theme;
   return {
@@ -22196,7 +22440,7 @@ var StyledView = index$7(reactNative.View)(function (_ref) {
     backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
   };
 });
-var StyledText = index$7(reactNative.Text)(function (_ref2) {
+var StyledText = index$8(reactNative.Text)(function (_ref2) {
   var themeIntent = _ref2.themeIntent,
       theme = _ref2.theme;
   return {
@@ -22286,7 +22530,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }) : null);
 };
 
-var StyledPickerWrapper = index$7(reactNative.View)(function (_ref) {
+var StyledPickerWrapper = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     height: theme.__hd__.timePicker.sizes.height
@@ -22386,7 +22630,7 @@ var TimePicker = function TimePicker(props) {
   return /*#__PURE__*/React__default["default"].createElement(TimePickerAndroid, props);
 };
 
-var ToastContainerWrapper = index$7(reactNative.View)(function (_ref) {
+var ToastContainerWrapper = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
       position = _ref.position;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -22396,7 +22640,7 @@ var ToastContainerWrapper = index$7(reactNative.View)(function (_ref) {
     elevation: 9999
   });
 });
-var Container = index$7(reactNative.Animated.View)(function (_ref2) {
+var Container = index$8(reactNative.Animated.View)(function (_ref2) {
   var theme = _ref2.theme,
       themeVariant = _ref2.themeVariant,
       themeIntent = _ref2.themeIntent;
@@ -22412,21 +22656,21 @@ var Container = index$7(reactNative.Animated.View)(function (_ref2) {
     elevation: theme.__hd__.toast.shadows.elevation
   };
 });
-var IconContainer = index$7(reactNative.View)(function (_ref3) {
+var IconContainer = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     alignItems: 'center',
     paddingLeft: theme.__hd__.toast.space.iconLeftPadding
   };
 });
-var TextContainer = index$7(reactNative.View)(function (_ref4) {
+var TextContainer = index$8(reactNative.View)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     paddingHorizontal: theme.__hd__.toast.space.textHorizontalPadding,
     flex: 1
   };
 });
-var ContentContainer = index$7(reactNative.View)(function (_ref5) {
+var ContentContainer = index$8(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
       showDivider = _ref5.showDivider;
   return {
@@ -22437,7 +22681,7 @@ var ContentContainer = index$7(reactNative.View)(function (_ref5) {
     flexDirection: 'row'
   };
 });
-var CTAWrapper = index$7(reactNative.TouchableOpacity)(function (_ref6) {
+var CTAWrapper = index$8(reactNative.TouchableOpacity)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     paddingHorizontal: theme.__hd__.toast.space.ctaPadding,
@@ -22698,7 +22942,7 @@ var Toast = {
   useToast: useToast
 };
 
-var ToolbarWrapper = index$7(reactNative.View)(function (_ref) {
+var ToolbarWrapper = index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     position: 'absolute',
@@ -22722,7 +22966,7 @@ var alignment = {
   center: 'center',
   right: 'flex-end'
 };
-var ToolbarGroupWrapper = index$7(reactNative.View)(function (_ref2) {
+var ToolbarGroupWrapper = index$8(reactNative.View)(function (_ref2) {
   var align = _ref2.align;
   return {
     flex: 1,
@@ -22731,7 +22975,7 @@ var ToolbarGroupWrapper = index$7(reactNative.View)(function (_ref2) {
     alignItems: 'center'
   };
 });
-var ToolbarItemWrapper = index$7(reactNative.TouchableOpacity)(function (_ref3) {
+var ToolbarItemWrapper = index$8(reactNative.TouchableOpacity)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     paddingVertical: theme.__hd__.toolbar.space.verticalPadding,
@@ -22811,7 +23055,7 @@ var ToolbarEvents;
 var emitter = new events.EventEmitter();
 emitter.setMaxListeners(20);
 
-var StyledToolbarButton = index$7(reactNative.TouchableOpacity)(function (_ref) {
+var StyledToolbarButton = index$8(reactNative.TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
       selected = _ref.selected;
   return {
@@ -22822,7 +23066,7 @@ var StyledToolbarButton = index$7(reactNative.TouchableOpacity)(function (_ref)
     backgroundColor: selected ? theme.__hd__.richTextEditor.colors.toolbarButtonSelectedBackground : undefined
   };
 });
-var StyledToolbar = index$7(reactNative.View)(function (_ref2) {
+var StyledToolbar = index$8(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     flexDirection: 'row',
@@ -22833,7 +23077,7 @@ var StyledToolbar = index$7(reactNative.View)(function (_ref2) {
     paddingHorizontal: theme.__hd__.richTextEditor.space.toolbarHorizontalPadding
   };
 });
-var StyledSeparator = index$7(reactNative.View)(function (_ref3) {
+var StyledSeparator = index$8(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     width: theme.__hd__.richTextEditor.sizes.toolbarSeparatorWidth,
@@ -40804,13 +41048,13 @@ function checkDCE() {
   });
 })(lib);
 
-index$7(reactNative.View)(function (_ref) {
+index$8(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom
   };
 });
-var StyledWebView = index$7(reactNativeWebview.WebView)(function (_ref2) {
+var StyledWebView = index$8(reactNativeWebview.WebView)(function (_ref2) {
   var height = _ref2.height,
       theme = _ref2.theme;
   return {
@@ -41073,25 +41317,27 @@ exports.BottomSheet = BottomSheet;
 exports.Box = Box;
 exports.Button = CompoundButton;
 exports.Calendar = Calendar;
-exports.Card = index$6;
+exports.Card = index$7;
 exports.Checkbox = Checkbox;
 exports.Collapse = Collapse;
 exports.ContentNavigator = ContentNavigator;
 exports.DatePicker = DatePicker;
 exports.Divider = Divider;
-exports.Drawer = index$5;
+exports.Drawer = index$6;
 exports.Empty = Empty;
-exports.FAB = index$4;
+exports.FAB = index$5;
 exports.Icon = Icon;
+exports.Image = Image;
 exports.List = List;
 exports.PinInput = PinInput;
 exports.Progress = Progress;
 exports.Radio = CompoundRadio;
 exports.RichTextEditor = index;
 exports.SectionHeading = SectionHeading;
-exports.Select = index$3;
+exports.Select = index$4;
+exports.Slider = Slider;
 exports.Spinner = Spinner;
-exports.Switch = Switch;
+exports.Switch = index$3;
 exports.Tabs = index$2;
 exports.Tag = Tag;
 exports.TextInput = TextInput;