@hero-design/rn 7.20.0 → 7.21.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,
@@ -2295,16 +2338,30 @@ var getSwitchTheme = function getSwitchTheme(theme) {
     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
+    }
+  };
   var spaces = {
     small: theme.space.xsmall,
-    medium: theme.space.xsmall,
-    inactive: 0
+    medium: theme.space.xsmall
   };
   var radii = {
     rounded: theme.radii.rounded
   };
   return {
     colors: colors,
+    sizes: sizes,
     thumbSizes: thumbSizes,
     widths: widths,
     heights: heights,
@@ -2336,7 +2393,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 +2536,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 +2557,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 +2674,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 +2688,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)
@@ -6005,7 +6064,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 +6074,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,
@@ -14560,11 +14619,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 +14713,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,
@@ -14678,7 +14737,7 @@ var Accordion = function Accordion(_ref) {
     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, {
@@ -14920,7 +14979,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 +14989,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 +15025,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 +15042,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;
@@ -15079,7 +15138,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 +15151,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();
   /**
@@ -15183,14 +15242,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,
@@ -15322,7 +15381,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 +15415,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 () {
@@ -15896,6 +15955,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 +16008,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();
     };
@@ -16182,7 +16242,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];
@@ -16215,20 +16275,20 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$7(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,
@@ -18943,13 +19003,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,
@@ -18980,14 +19040,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,
@@ -19219,7 +19279,7 @@ var StyledErrorAndMaxLengthContainer = index$7(reactNative.View)(function () {
   };
 });
 
-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,
@@ -19273,9 +19333,9 @@ 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 isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -19295,6 +19355,42 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
+
+  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
+    accessibilityLabelledBy: accessibilityLabelledBy
+  }, nativeProps), {}, {
+    onFocus: function onFocus(event) {
+      var _nativeProps$onFocus;
+
+      setIsFocused(true);
+      (_nativeProps$onFocus = nativeProps.onFocus) === null || _nativeProps$onFocus === void 0 ? void 0 : _nativeProps$onFocus.call(nativeProps, event);
+    },
+    onBlur: function onBlur(event) {
+      var _nativeProps$onBlur;
+
+      setIsFocused(false);
+      (_nativeProps$onBlur = nativeProps.onBlur) === null || _nativeProps$onBlur === void 0 ? void 0 : _nativeProps$onBlur.call(nativeProps, event);
+    },
+    editable: editable,
+    maxLength: maxLength,
+    value: value,
+    onChangeText: function onChangeText(text) {
+      var _nativeProps$onChange;
+
+      (_nativeProps$onChange = nativeProps.onChangeText) === null || _nativeProps$onChange === void 0 ? void 0 : _nativeProps$onChange.call(nativeProps, text);
+    },
+    defaultValue: defaultValue,
+    placeholder: variant === 'focused' ? nativeProps.placeholder : undefined
+  });
+
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
     style: style,
     pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
@@ -19325,43 +19421,7 @@ var TextInput = function TextInput(_ref2) {
     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({
-    style: reactNative.StyleSheet.flatten([{
-      color: theme.__hd__.textInput.colors.text
-    }, textStyle]),
-    testID: "text-input",
-    accessibilityState: {
-      disabled: variant === 'disabled' || variant === 'readonly'
-    } // @ts-ignore
-    ,
-    accessibilityLabelledBy: accessibilityLabelledBy
-  }, nativeProps, {
-    onFocus: function onFocus(event) {
-      var _nativeProps$onFocus;
-
-      setIsFocused(true);
-      (_nativeProps$onFocus = nativeProps.onFocus) === null || _nativeProps$onFocus === void 0 ? void 0 : _nativeProps$onFocus.call(nativeProps, event);
-    },
-    onBlur: function onBlur(event) {
-      var _nativeProps$onBlur;
-
-      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,
-    onChangeText: function onChangeText(text) {
-      var _nativeProps$onChange;
-
-      (_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, {
+  }, 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,
@@ -19843,19 +19903,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$7(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 +19914,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$7(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,16 +19926,22 @@ 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;
+  var theme = useTheme();
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
     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
@@ -19928,12 +19984,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 () {
@@ -20186,6 +20242,29 @@ var index$4 = Object.assign(FAB, {
   ActionGroup: ActionGroup
 });
 
+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$7(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
       _ref$themeSelected = _ref.themeSelected,
@@ -20860,6 +20939,40 @@ var Progress = {
   Bar: ProgressBar
 };
 
+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$7(reactNative.View)();
 var StyledSpinnerContainer = index$7(reactNative.View)({
   height: '100%',
@@ -21182,72 +21295,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 +21302,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 +21322,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);
@@ -21334,9 +21375,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;
@@ -21370,10 +21410,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 +21492,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 +21518,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 +21546,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 +21566,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,7 +21588,8 @@ function MultiSelect(_ref) {
     sections: sections,
     renderOption: renderOption,
     value: selectingValue,
-    onPress: setSelectingValue
+    onPress: setSelectingValue,
+    sectionListRef: sectionListRef
   })));
 }
 
@@ -21499,8 +21619,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;
@@ -21532,7 +21652,7 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    scrollParams: scrollParams
+    sectionListRef: sectionListRef
   });
 };
 
@@ -21549,6 +21669,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 +21690,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 +21716,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 +21729,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,7 +21754,8 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress(selectedValue) {
       setOpen(false);
       onConfirm(selectedValue);
-    }
+    },
+    sectionListRef: sectionListRef
   })));
 };
 
@@ -21634,8 +21768,8 @@ var StyledWrapper = index$7(reactNative.View)(function (_ref) {
       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],
@@ -21647,8 +21781,8 @@ var StyledKnot = index$7(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
   };
@@ -21680,7 +21814,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);
@@ -22808,19 +22942,6 @@ var ToolbarEvents;
   ToolbarEvents["HeadingTwo"] = "heading-two";
 })(ToolbarEvents || (ToolbarEvents = {}));
 
-var ToolbarButtonName;
-
-(function (ToolbarButtonName) {
-  ToolbarButtonName["Bold"] = "bold";
-  ToolbarButtonName["Italic"] = "italic";
-  ToolbarButtonName["Underline"] = "underline";
-  ToolbarButtonName["BulletedList"] = "bulletedList";
-  ToolbarButtonName["NumberedList"] = "numberedList";
-  ToolbarButtonName["HeadingOne"] = "headingOne";
-  ToolbarButtonName["HeadingTwo"] = "headingTwo";
-  ToolbarButtonName["Seperator"] = "|";
-})(ToolbarButtonName || (ToolbarButtonName = {}));
-
 var emitter = new events.EventEmitter();
 emitter.setMaxListeners(20);
 
@@ -22868,8 +22989,6 @@ var on = function on(emitter, eventName, listener) {
   };
 };
 
-var _buttonConfigs;
-
 var ToolbarButton = function ToolbarButton(_ref) {
   var icon = _ref.icon,
       onPress = _ref.onPress,
@@ -22885,33 +23004,41 @@ var ToolbarButton = function ToolbarButton(_ref) {
   }));
 };
 
-var buttonConfigs = (_buttonConfigs = {}, _defineProperty(_buttonConfigs, ToolbarButtonName.Bold, {
-  icon: 'format-bold',
-  eventName: ToolbarEvents.Bold
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.Italic, {
-  icon: 'format-italic',
-  eventName: ToolbarEvents.Italic
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.Underline, {
-  icon: 'format-underlined',
-  eventName: ToolbarEvents.Underline
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.BulletedList, {
-  icon: 'format-list-bulleted',
-  eventName: ToolbarEvents.BulletedList,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.NumberedList, {
-  icon: 'format-list-numbered',
-  eventName: ToolbarEvents.NumberedList,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.HeadingOne, {
-  icon: 'format-heading1',
-  eventName: ToolbarEvents.HeadingOne,
-  standalone: true
-}), _defineProperty(_buttonConfigs, ToolbarButtonName.HeadingTwo, {
-  icon: 'format-heading2',
-  eventName: ToolbarEvents.HeadingTwo,
-  standalone: true
-}), _buttonConfigs);
-var defaultButtons = [ToolbarButtonName.Bold, ToolbarButtonName.Italic, ToolbarButtonName.Underline, ToolbarButtonName.Seperator, ToolbarButtonName.BulletedList, ToolbarButtonName.NumberedList, ToolbarButtonName.Seperator, ToolbarButtonName.HeadingOne, ToolbarButtonName.HeadingTwo];
+var buttonConfigs = {
+  bold: {
+    icon: 'format-bold',
+    eventName: ToolbarEvents.Bold
+  },
+  italic: {
+    icon: 'format-italic',
+    eventName: ToolbarEvents.Italic
+  },
+  underline: {
+    icon: 'format-underlined',
+    eventName: ToolbarEvents.Underline
+  },
+  bulletedList: {
+    icon: 'format-list-bulleted',
+    eventName: ToolbarEvents.BulletedList,
+    standalone: true
+  },
+  numberedList: {
+    icon: 'format-list-numbered',
+    eventName: ToolbarEvents.NumberedList,
+    standalone: true
+  },
+  headingOne: {
+    icon: 'format-heading1',
+    eventName: ToolbarEvents.HeadingOne,
+    standalone: true
+  },
+  headingTwo: {
+    icon: 'format-heading2',
+    eventName: ToolbarEvents.HeadingTwo,
+    standalone: true
+  }
+};
+var defaultButtons = ['bold', 'italic', 'underline', '|', 'bulletedList', 'numberedList', '|', 'headingOne', 'headingTwo'];
 
 var EditorToolbar = function EditorToolbar(_ref2) {
   var name = _ref2.name,
@@ -22975,7 +23102,7 @@ var EditorToolbar = function EditorToolbar(_ref2) {
   }, []);
   var toolbarButtons = React.useMemo(function () {
     return toolbarButtonArray.map(function (button) {
-      if (button.buttonName === ToolbarButtonName.Seperator) {
+      if (button.buttonName === '|') {
         return /*#__PURE__*/React__default["default"].createElement(StyledSeparator, {
           key: button.id
         });
@@ -40826,8 +40953,6 @@ var StyledWebView = index$7(reactNativeWebview.WebView)(function (_ref2) {
     backgroundColor: 'transparent',
     textAlignVertical: 'center',
     fontSize: theme.__hd__.textInput.fontSizes.text,
-    alignSelf: 'stretch',
-    flexGrow: 2,
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin
   };
 });
@@ -40853,7 +40978,9 @@ var defaultValue = [{
 }];
 
 var RichTextEditor = function RichTextEditor(_ref) {
-  var name = _ref.name,
+  var _ref$autoFocus = _ref.autoFocus,
+      autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+      name = _ref.name,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
       _ref$onChange = _ref.onChange,
@@ -40927,7 +41054,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, []);
   var html = React.useMemo(function () {
     var initialValueString = JSON.stringify(value);
-    return "\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\">\n          <style>\n            body {\n              margin: 0;\n            }\n          </style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script>\n            window.__editorConfigs = {\n              placeholder: \"".concat(placeholder, "\",\n              initialValue: ").concat(initialValueString, ",\n              isAndroid: ").concat(isAndroid ? 'true' : 'false', ",\n              autoFocus: true,\n              style: {\n                padding: '0 !important',\n                fontSize: ").concat(theme.__hd__.richTextEditor.fontSizes.editor, "\n              }\n            };\n            ").concat(heroEditorApp, "\n          </script>\n        </body>\n      </html>\n      ");
+    return "\n      <!DOCTYPE html>\n      <html>\n        <head>\n          <meta charset=\"utf-8\">\n          <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0\">\n          <style>\n            body {\n              margin: 0;\n            }\n          </style>\n        </head>\n        <body>\n          <div id=\"root\"></div>\n          <script>\n            window.__editorConfigs = {\n              placeholder: \"".concat(placeholder, "\",\n              initialValue: ").concat(initialValueString, ",\n              isAndroid: ").concat(isAndroid ? 'true' : 'false', ",\n              autoFocus: ").concat(autoFocus, ",\n              style: {\n                padding: '0 !important',\n                fontSize: ").concat(theme.__hd__.richTextEditor.fontSizes.editor, "\n              }\n            };\n            ").concat(heroEditorApp, "\n          </script>\n        </body>\n      </html>\n      ");
   }, []);
   var requestBlur = React.useCallback(function () {
     if (webview.current) {
@@ -41013,7 +41140,6 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }
   }, []);
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$3, {
-    style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
     themeVariant: variant
@@ -41091,6 +41217,7 @@ exports.Drawer = index$5;
 exports.Empty = Empty;
 exports.FAB = index$4;
 exports.Icon = Icon;
+exports.Image = Image;
 exports.List = List;
 exports.PinInput = PinInput;
 exports.Progress = Progress;
@@ -41098,6 +41225,7 @@ exports.Radio = CompoundRadio;
 exports.RichTextEditor = index;
 exports.SectionHeading = SectionHeading;
 exports.Select = index$3;
+exports.Slider = Slider;
 exports.Spinner = Spinner;
 exports.Switch = Switch;
 exports.Tabs = index$2;