@hero-design/rn 7.20.1 → 7.21.0

package/es/index.js

@@ -1,9 +1,10 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image, TouchableWithoutFeedback, Pressable, SafeAreaView, TouchableHighlight, Modal, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, FlatList, LayoutAnimation } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, TouchableHighlight, Modal, TextInput as TextInput$1, PanResponder, InteractionManager, SectionList, Keyboard, FlatList, LayoutAnimation } from 'react-native';
 import React, { useContext, createContext, createElement, forwardRef, useEffect, useCallback, useRef, useMemo, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import DateTimePicker from '@react-native-community/datetimepicker';
+import RnSlider from '@react-native-community/slider';
 import PagerView from 'react-native-pager-view';
 import { EventEmitter } from 'events';
 import { WebView } from 'react-native-webview';
@@ -272,12 +273,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
@@ -1309,6 +1312,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,
@@ -1319,6 +1323,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,
@@ -1426,6 +1431,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,
@@ -1451,6 +1470,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),
@@ -1459,6 +1479,7 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
     lineHeights: lineHeights,
     borderWidths: borderWidths,
     space: space,
+    sizes: sizes,
     radii: radii
   };
 };
@@ -1490,7 +1511,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,
@@ -1522,14 +1543,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,
@@ -1572,10 +1593,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,
@@ -1597,7 +1618,7 @@ var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
     background: theme.colors.platformBackground
   };
   var sizes = {
-    height: 72
+    height: theme.sizes['6xlarge']
   };
   var shadows = {
     offset: {
@@ -1626,8 +1647,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,
@@ -1730,13 +1751,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,
@@ -1765,7 +1788,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
@@ -1783,14 +1806,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,
@@ -1818,9 +1839,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
@@ -1863,8 +1884,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: {
@@ -1887,14 +1908,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,
@@ -1915,8 +1933,7 @@ var getEmptyTheme = function getEmptyTheme(theme) {
     colors: colors,
     sizes: sizes,
     space: space,
-    fonts: fonts,
-    radii: radii
+    fonts: fonts
   };
 };
 
@@ -1931,8 +1948,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,
@@ -2004,6 +2021,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,
@@ -2073,9 +2100,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,
@@ -2107,8 +2134,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
@@ -2128,9 +2155,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
@@ -2153,10 +2184,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
@@ -2214,6 +2245,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,
@@ -2267,16 +2309,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,
@@ -2308,7 +2364,7 @@ var getTabsTheme = function getTabsTheme(theme) {
     headerBottom: theme.borderWidths.base
   };
   var sizes = {
-    indicator: theme.space.xxsmall
+    indicator: theme.sizes.xxsmall
   };
   return {
     borderWidths: borderWidths,
@@ -2451,9 +2507,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
@@ -2472,7 +2528,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,
@@ -2589,12 +2645,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),
@@ -2602,12 +2659,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)
@@ -5977,7 +6035,7 @@ var StyledText$3 = index$7(Text$1)(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,
@@ -5987,7 +6045,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.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -14532,11 +14590,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 = useRef(new Animated.Value(0));
   useEffect(function () {
@@ -14626,7 +14684,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,
@@ -14650,7 +14708,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.createElement(React.Fragment, {
@@ -14817,7 +14875,7 @@ var StyledText$2 = index$7(Text$1)(function (_ref3) {
     overflow: 'hidden'
   };
 });
-var StyledImage = index$7(Image)(function (_ref4) {
+var StyledImage = index$7(Image$1)(function (_ref4) {
   var themeSize = _ref4.themeSize,
       theme = _ref4.theme;
   return {
@@ -14892,7 +14950,7 @@ var StyledStatus = index$7(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,
@@ -14902,7 +14960,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.useRef(new Animated.Value(visible ? 1 : 0)),
       opacity = _React$useRef.current;
@@ -14938,7 +14996,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) {
@@ -14955,7 +15013,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.useRef(new Animated.Value(visible ? 1 : 0)),
       opacity = _React$useRef.current;
@@ -15051,7 +15109,7 @@ var StyledBottomBarText = index$7(Typography.Text)(function (_ref3) {
 var isIOS = Platform.OS === 'ios';
 var isAndroid = 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");
@@ -15064,7 +15122,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 = useSafeAreaInsets();
   /**
@@ -15155,14 +15213,14 @@ var StyledDivider = index$7(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.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
@@ -15294,7 +15352,7 @@ var StyledLoadingDot = index$7(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$a = ["count", "size", "testID", "themeVariant"];
+var _excluded$b = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 
@@ -15328,7 +15386,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 = useRef(new Animated.Value(0));
   useEffect(function () {
@@ -15868,6 +15926,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,
@@ -15920,7 +15979,7 @@ var BottomSheet = function BottomSheet(_ref) {
       easing: Easing.inOut(Easing.cubic),
       useNativeDriver: true
     });
-    animation.start();
+    animation.start(onAnimationEnd);
     return function () {
       return animation.stop();
     };
@@ -16154,7 +16213,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];
@@ -16187,20 +16246,20 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$7(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.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
@@ -18915,13 +18974,13 @@ var Indicator = index$7(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.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
     themeIntent: intent,
@@ -18952,14 +19011,14 @@ var LeftDataCard = index$7(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.createElement(StyledCard, _extends$1({}, nativeProps, {
     themeVariant: variant,
@@ -19191,7 +19250,7 @@ var StyledErrorAndMaxLengthContainer = index$7(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,
@@ -19245,9 +19304,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 = useRef(null);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -19267,6 +19326,42 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
+
+  var nativeInputProps = _objectSpread2(_objectSpread2({
+    style: StyleSheet$1.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.createElement(StyledContainer$3, {
     style: style,
     pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
@@ -19297,43 +19392,7 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "medium",
     themeVariant: variant
-  }, label)), /*#__PURE__*/React.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: StyleSheet$1.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.createElement(Icon, {
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
@@ -19815,19 +19874,9 @@ var StyledWrapper$4 = index$7(View)(function (_ref) {
     padding: theme.__hd__.empty.space.wrapperPadding
   };
 });
-var StyledIllustration = index$7(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(Text$1)(function (_ref3) {
-  var theme = _ref3.theme,
-      themeVariant = _ref3.themeVariant;
+var StyledTitle = index$7(Text$1)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeVariant = _ref2.themeVariant;
   return {
     fontFamily: theme.__hd__.empty.fonts.title,
     fontSize: theme.__hd__.empty.fontSizes.title,
@@ -19836,9 +19885,9 @@ var StyledTitle = index$7(Text$1)(function (_ref3) {
     color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.text
   };
 });
-var StyledDescription = index$7(Text$1)(function (_ref4) {
-  var theme = _ref4.theme,
-      themeVariant = _ref4.themeVariant;
+var StyledDescription = index$7(Text$1)(function (_ref3) {
+  var theme = _ref3.theme,
+      themeVariant = _ref3.themeVariant;
   return {
     fontFamily: theme.__hd__.empty.fonts.description,
     fontSize: theme.__hd__.empty.fontSizes.description,
@@ -19848,16 +19897,22 @@ var StyledDescription = index$7(Text$1)(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.createElement(StyledWrapper$4, {
     style: style,
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledIllustration, null), /*#__PURE__*/React.createElement(StyledTitle, {
+  }, image !== undefined && /*#__PURE__*/React.cloneElement(image, _objectSpread2(_objectSpread2({}, image.props), {}, {
+    style: [{
+      marginBottom: theme.__hd__.empty.space.imageMargin
+    }, image.props.style]
+  })), /*#__PURE__*/React.createElement(StyledTitle, {
     themeVariant: variant
   }, title), !!description && /*#__PURE__*/React.createElement(StyledDescription, {
     themeVariant: variant
@@ -19900,12 +19955,12 @@ var StyledFABText = index$7(Text$1)(function (_ref3) {
   };
 });
 
-var _excluded$4 = ["active"];
+var _excluded$5 = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-      iconProps = _objectWithoutProperties(_ref, _excluded$4);
+      iconProps = _objectWithoutProperties(_ref, _excluded$5);
 
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
@@ -20158,6 +20213,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.createElement(Image$1, _extends$1({
+    testID: testID,
+    style: [{
+      width: imageSize,
+      height: imageSize,
+      borderRadius: rounded ? imageSize / 2 : 0
+    }, style]
+  }, imageNativeProps));
+};
+
 var StyledListItemContainer$1 = index$7(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme,
       _ref$themeSelected = _ref.themeSelected,
@@ -20832,6 +20910,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.createElement(RnSlider, {
+    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(View)();
 var StyledSpinnerContainer = index$7(View)({
   height: '100%',
@@ -21154,72 +21266,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 = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isKeyboardVisible = _useState2[0],
-      setKeyboardVisible = _useState2[1];
-
-  var _useState3 = useState(0),
-      _useState4 = _slicedToArray(_useState3, 2),
-      keyboardHeight = _useState4[0],
-      setKeyboardHeight = _useState4[1];
-
-  useEffect(function () {
-    var keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', function (e) {
-      setKeyboardVisible(true);
-      setKeyboardHeight(e.endCoordinates.height);
-    });
-    var keyboardWillHideListener = 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,
@@ -21227,9 +21273,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 = useRef(null);
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -21248,11 +21293,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);
@@ -21306,9 +21346,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;
@@ -21342,8 +21381,74 @@ 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 = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isKeyboardVisible = _useState2[0],
+      setKeyboardVisible = _useState2[1];
+
+  var _useState3 = useState(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      keyboardHeight = _useState4[0],
+      setKeyboardHeight = _useState4[1];
+
+  useEffect(function () {
+    var keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', function (e) {
+      setKeyboardVisible(true);
+      setKeyboardHeight(e.endCoordinates.height);
+    });
+    var keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', function () {
+      setKeyboardVisible(false);
+    });
+    return function () {
+      keyboardWillShowListener.remove();
+      keyboardWillHideListener.remove();
+    };
+  }, []);
+  return {
+    isKeyboardVisible: isKeyboardVisible,
+    keyboardHeight: keyboardHeight
+  };
 };
 
 function MultiSelect(_ref) {
@@ -21358,6 +21463,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,
@@ -21383,6 +21489,7 @@ function MultiSelect(_ref) {
       selectingValue = _useState4[0],
       setSelectingValue = _useState4[1];
 
+  var sectionListRef = useRef(null);
   var sections = toSections(options);
   var flatOptions = toFlatOptions(options);
   var displayedValue = flatOptions.filter(function (opt) {
@@ -21410,7 +21517,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.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
@@ -21427,7 +21537,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.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
@@ -21441,7 +21559,8 @@ function MultiSelect(_ref) {
     sections: sections,
     renderOption: renderOption,
     value: selectingValue,
-    onPress: setSelectingValue
+    onPress: setSelectingValue,
+    sectionListRef: sectionListRef
   })));
 }
 
@@ -21471,8 +21590,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;
@@ -21504,7 +21623,7 @@ var OptionList = function OptionList(_ref) {
     onQueryChange: onQueryChange,
     sections: sections,
     renderItem: renderItem,
-    scrollParams: scrollParams
+    sectionListRef: sectionListRef
   });
 };
 
@@ -21521,6 +21640,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,
@@ -21541,6 +21661,7 @@ var SingleSelect = function SingleSelect(_ref) {
       open = _useState2[0],
       setOpen = _useState2[1];
 
+  var sectionListRef = useRef(null);
   var sections = toSections(options);
   var flatOptions = toFlatOptions(options);
   var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
@@ -21566,7 +21687,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.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
@@ -21576,6 +21700,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.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
     editable: true,
@@ -21593,7 +21725,8 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress(selectedValue) {
       setOpen(false);
       onConfirm(selectedValue);
-    }
+    },
+    sectionListRef: sectionListRef
   })));
 };
 
@@ -21606,8 +21739,8 @@ var StyledWrapper = index$7(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],
@@ -21619,8 +21752,8 @@ var StyledKnot = index$7(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
   };
@@ -21652,7 +21785,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 = useState(function () {
     return new Animated.Value(offset);
@@ -41036,4 +41169,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, Box, CompoundButton as Button, Calendar, index$6 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$5 as Drawer, Empty, index$4 as FAB, Icon, List, PinInput, Progress, CompoundRadio as Radio, index as RichTextEditor, SectionHeading, index$3 as Select, Spinner, Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, TimePicker, Toast, index$1 as Toolbar, Typography, getTheme$1 as getTheme, scale, swagSystemPalette, defaultTheme as theme, useTheme, workSystemPalette };
+export { Accordion, Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, Box, CompoundButton as Button, Calendar, index$6 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$5 as Drawer, Empty, index$4 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, index as RichTextEditor, SectionHeading, index$3 as Select, Slider, Spinner, Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, TimePicker, Toast, index$1 as Toolbar, Typography, getTheme$1 as getTheme, scale, swagSystemPalette, defaultTheme as theme, useTheme, workSystemPalette };