@hero-design/rn 8.103.2-alpha.0 → 8.103.3

package/es/index.js

@@ -3,7 +3,7 @@ import { StyleSheet as StyleSheet$1, Platform, Dimensions, Animated, View, UIMan
 import * as React from 'react';
 import React__default, { useMemo, useEffect, useCallback, useRef, useLayoutEffect, useState, createContext, forwardRef, useContext, memo, useReducer, useImperativeHandle, isValidElement } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
-import { useSafeAreaInsets, SafeAreaView as SafeAreaView$1 } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import Svg, { G, ForeignObject, Line as Line$1, Path as Path$1, Rect, Mask, Circle as Circle$1, Defs, ClipPath } from 'react-native-svg';
 import DateTimePicker from '@react-native-community/datetimepicker';
@@ -5676,8 +5676,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     footerHorizontalPadding: theme.space.smallMedium,
     floatingContentMargin: theme.space.medium,
     floatingInnerPadding: theme.space.small,
-    floatingHeaderIconPadding: theme.space.small,
-    contentPaddingBottom: theme.space.large
+    floatingHeaderIconPadding: theme.space.small
   };
   var radii = {
     "default": theme.radii.xlarge,
@@ -7633,7 +7632,7 @@ var StyledText$3 = index$b(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$M = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$O = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -7646,7 +7645,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__default.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -7676,7 +7675,7 @@ var StyledCaption = index$b(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -7685,7 +7684,7 @@ var Caption = function Caption(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$N);
   return /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -7704,14 +7703,14 @@ var StyledLabel$1 = index$b(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "intent", "allowFontScaling"];
+var _excluded$M = ["children", "intent", "allowFontScaling"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
   return /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
@@ -7732,7 +7731,7 @@ var StyledTitle$1 = index$b(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$J = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7743,7 +7742,7 @@ var Title = function Title(_ref) {
     level = _ref$level === void 0 ? 'h1' : _ref$level,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$J);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
   return /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -7778,7 +7777,7 @@ var StyledBody$2 = index$b(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$I = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7789,7 +7788,7 @@ var Body = function Body(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$I);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -8390,10 +8389,10 @@ var StyledHeroIcon = index$b(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$H = ["style"];
+var _excluded$J = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$H);
+    otherProps = _objectWithoutProperties(_ref, _excluded$J);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -8498,7 +8497,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$G = ["key"];
+var _excluded$I = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -8519,7 +8518,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$G);
+      props = _objectWithoutProperties(_ref2, _excluded$I);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: key
@@ -8575,7 +8574,7 @@ var StyledBody$1 = index$b(Typography.Body)(function (_ref5) {
     color: theme.__hd__.alert.colors.texts[themeIntent]
   };
 });
-var ContentContainer$2 = index$b(View)(function (_ref6) {
+var ContentContainer$1 = index$b(View)(function (_ref6) {
   var theme = _ref6.theme,
     showDivider = _ref6.showDivider;
   return {
@@ -8637,7 +8636,7 @@ var Alert = function Alert(_ref2) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(ContentContainer$2, {
+  }, /*#__PURE__*/React__default.createElement(ContentContainer$1, {
     showDivider: !!onClose
   }, icon !== null ? /*#__PURE__*/React__default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
@@ -9442,7 +9441,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$F = ["theme"];
+var _excluded$H = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -9469,18 +9468,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$b(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$F);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$H);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$E = ["children", "style", "testID"];
+var _excluded$G = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$E);
+    otherProps = _objectWithoutProperties(_ref, _excluded$G);
   return /*#__PURE__*/React__default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -9747,7 +9746,7 @@ var StyledIcon$4 = index$b(Icon)(function (_ref6) {
   };
 });
 
-var _excluded$D = ["children", "visible", "intent", "style", "testID"];
+var _excluded$F = ["children", "visible", "intent", "style", "testID"];
 var Status$1 = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -9756,7 +9755,7 @@ var Status$1 = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$F);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -9792,7 +9791,7 @@ var Status$1 = function Status(_ref) {
 
 var DEFAULT_MAX_NUMBER = 99;
 
-var _excluded$C = ["children", "visible", "style", "max", "testID", "content"];
+var _excluded$E = ["children", "visible", "style", "max", "testID", "content"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -9802,7 +9801,7 @@ var Status = function Status(_ref) {
     max = _ref$max === void 0 ? DEFAULT_MAX_NUMBER : _ref$max,
     testID = _ref.testID,
     originalContent = _ref.content,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$E);
   var content = useMemo(function () {
     return originalContent > max ? "".concat(max, "+") : String(originalContent);
   }, [originalContent, max]);
@@ -9814,7 +9813,7 @@ var Status = function Status(_ref) {
   }, /*#__PURE__*/React__default.createElement(StyledCountText, null, content)));
 };
 
-var _excluded$B = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
+var _excluded$D = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
 };
@@ -9833,7 +9832,7 @@ var Badge = function Badge(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$B);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
   var _React$useRef = React__default.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default.useRef(true);
@@ -9932,7 +9931,7 @@ var StyledBottomBarText = index$b(Typography.Caption)(function (_ref3) {
   };
 });
 
-var _excluded$A = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$C = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -9943,7 +9942,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$A);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -10012,6 +10011,38 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
 var BottomSheetContext = /*#__PURE__*/createContext({});
 
+var StyledDivider = index$b(View)(function (_ref) {
+  var themeMarginHorizontal = _ref.themeMarginHorizontal,
+    themeMarginVertical = _ref.themeMarginVertical,
+    theme = _ref.theme;
+  var horizontalMargin = themeMarginHorizontal !== undefined ? {
+    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
+  } : {};
+  var verticalMargin = themeMarginVertical !== undefined ? {
+    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
+  } : {};
+  return _objectSpread2(_objectSpread2({
+    maxWidth: '100%',
+    borderBottomColor: theme.__hd__.divider.colors["default"],
+    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
+  }, horizontalMargin), verticalMargin);
+});
+
+var _excluded$B = ["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);
+  return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }));
+};
+
 var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$a = index$b(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -10039,15 +10070,14 @@ var StyledFloatingBottomSheet = index$b(Animated.View)(function (_ref2) {
     padding: theme.__hd__.bottomSheet.space.floatingInnerPadding
   };
 });
-var StyledBottomSheet = index$b(Animated.View)(function (_ref3) {
+var StyledBottomSheet = index$b(AnimatedSafeAreaView)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     borderTopLeftRadius: theme.__hd__.bottomSheet.radii["default"],
     borderTopRightRadius: theme.__hd__.bottomSheet.radii["default"],
     backgroundColor: theme.__hd__.bottomSheet.colors.background,
     width: '100%',
-    maxHeight: '100%',
-    paddingBottom: theme.__hd__.bottomSheet.space.contentPaddingBottom
+    maxHeight: '94%'
   };
 });
 var StyledBackdrop$2 = index$b(AnimatedPressable$1)(function (_ref4) {
@@ -10098,54 +10128,6 @@ var StyledFloatingHeaderWrapper = index$b(TouchableOpacity)(function (_ref8) {
   };
 });
 
-var ContentContainer$1 = function ContentContainer(_ref) {
-  var children = _ref.children,
-    variant = _ref.variant,
-    style = _ref.style;
-  return variant === 'fixed' ? /*#__PURE__*/React__default.createElement(SafeAreaView$1, {
-    edges: ['left', 'right', 'top'],
-    style: {
-      maxHeight: '94%'
-    }
-  }, /*#__PURE__*/React__default.createElement(StyledBottomSheet, {
-    style: style
-  }, children)) : /*#__PURE__*/React__default.createElement(StyledFloatingWrapper, null, /*#__PURE__*/React__default.createElement(StyledFloatingBottomSheet, {
-    style: style
-  }, children));
-};
-
-var StyledDivider = index$b(View)(function (_ref) {
-  var themeMarginHorizontal = _ref.themeMarginHorizontal,
-    themeMarginVertical = _ref.themeMarginVertical,
-    theme = _ref.theme;
-  var horizontalMargin = themeMarginHorizontal !== undefined ? {
-    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
-  } : {};
-  var verticalMargin = themeMarginVertical !== undefined ? {
-    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
-  } : {};
-  return _objectSpread2(_objectSpread2({
-    maxWidth: '100%',
-    borderBottomColor: theme.__hd__.divider.colors["default"],
-    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
-  }, horizontalMargin), verticalMargin);
-});
-
-var _excluded$z = ["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$z);
-  return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
-    themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical,
-    style: style,
-    testID: testID
-  }));
-};
-
 var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
     showDivider = _ref.showDivider;
@@ -10201,7 +10183,7 @@ var StyledLoadingDot = index$b(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$y = ["count", "size", "testID", "themeVariant"];
+var _excluded$A = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -10233,7 +10215,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$y);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$A);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -10860,11 +10842,11 @@ var Header = function Header(_ref) {
   }))) : null), showDivider ? /*#__PURE__*/React__default.createElement(Divider, null) : null);
 };
 
-var _excluded$x = ["scrollEventThrottle"];
+var _excluded$z = ["scrollEventThrottle"];
 var BottomSheetScrollView = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$x);
+    props = _objectWithoutProperties(_ref, _excluded$z);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -10972,6 +10954,8 @@ var BottomSheet = function BottomSheet(_ref) {
       setInternalShowDivider: setInternalShowDivider
     };
   }, [setInternalShowDivider]);
+  var BottomSheetWrapperComponent = variant === 'fixed' ? React__default.Fragment : StyledFloatingWrapper;
+  var BottomSheetComponent = variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -10988,8 +10972,7 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React__default.createElement(ContentContainer$1, {
-    variant: variant,
+  }), /*#__PURE__*/React__default.createElement(BottomSheetWrapperComponent, null, /*#__PURE__*/React__default.createElement(BottomSheetComponent, {
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -11007,7 +10990,7 @@ var BottomSheet = function BottomSheet(_ref) {
     value: BottomSheetContextValue
   }, children), footer ? /*#__PURE__*/React__default.createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null))));
+  }, footer) : null)))));
 };
 var BottomSheet$1 = Object.assign(BottomSheet, {
   ScrollView: BottomSheetScrollView
@@ -13941,12 +13924,12 @@ var Indicator = index$b(View)(function (_ref2) {
   };
 });
 
-var _excluded$w = ["intent", "children"];
+var _excluded$y = ["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$w);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -13965,13 +13948,13 @@ var StyledCard$1 = index$b(View)(function (_ref) {
   });
 });
 
-var _excluded$v = ["intent", "children", "variant"];
+var _excluded$x = ["intent", "children", "variant"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'basic' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React__default.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant
@@ -14237,7 +14220,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$u = ["rounded", "size", "testID", "style"];
+var _excluded$w = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -14245,7 +14228,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$u);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$w);
   useDeprecation('Image component will soon be deprecated. Please use `Image` from `react-native` instead.');
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
@@ -14380,7 +14363,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), !!body && /*#__PURE__*/React__default.createElement(Typography.Body, null, body)));
 };
 
-var _excluded$t = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$v = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14407,7 +14390,7 @@ var Carousel = function Carousel(_ref) {
     testID = _ref.testID,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop$1);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -19678,7 +19661,7 @@ var StyledChipIcon = index$b(Icon)(function (_ref2) {
   };
 });
 
-var _excluded$s = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
+var _excluded$u = ["label", "variant", "selected", "icon", "onPress", "showSelectedIcon"];
 var getChipLabel = function getChipLabel(label) {
   if (typeof label === 'string') {
     return /*#__PURE__*/React__default.createElement(Typography.Body, {
@@ -19711,7 +19694,7 @@ var Chip = function Chip(_ref) {
     onPress = _ref.onPress,
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
-    otherProps = _objectWithoutProperties(_ref, _excluded$s);
+    otherProps = _objectWithoutProperties(_ref, _excluded$u);
   useDeprecation('Chip variant `outlined` and `filled` are deprecated.', variant === 'outlined' || variant === 'filled');
   var renamedVariant = getChipVariant(variant);
   var shouldShowSelectedIcon = (renamedVariant === 'selection' || renamedVariant === 'compact-outlined') && selected && showSelectedIcon;
@@ -19961,7 +19944,7 @@ var StyledErrorAndMaxLengthContainer = index$b(View)(function () {
   };
 });
 
-var _excluded$r = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$t = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
 var getState$3 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -20075,7 +20058,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     allowFontScaling = _ref8$allowFontScalin === void 0 ? false : _ref8$allowFontScalin,
     _ref8$variant = _ref8.variant,
     variant = _ref8$variant === void 0 ? 'text' : _ref8$variant,
-    nativeProps = _objectWithoutProperties(_ref8, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$t);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
   var _React$useState = React__default.useState({
@@ -20651,7 +20634,8 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
 var StyledPickerWrapper$1 = index$b(View)(function (_ref) {
   var theme = _ref.theme;
   return {
-    height: theme.__hd__.datePicker.sizes.height
+    height: theme.__hd__.datePicker.sizes.height,
+    alignItems: 'center'
   };
 });
 
@@ -20808,11 +20792,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }));
 };
 
-var _excluded$q = ["variant"];
+var _excluded$s = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$q);
+    props = _objectWithoutProperties(_ref, _excluded$s);
   if (variant === 'calendar') {
     return /*#__PURE__*/React__default.createElement(DatePickerCalendar, props);
   }
@@ -22096,7 +22080,7 @@ var Portal$1 = Object.assign(Portal, {
   Host: PortalHost
 });
 
-var _excluded$p = ["visible"];
+var _excluded$r = ["visible"];
 var DEFAULT_BACKDROP_OPACITY = 0.4;
 var DEFAULT_ANIMATION_CONFIG = {
   easing: Easing.inOut(Easing.cubic),
@@ -22192,7 +22176,7 @@ var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
 var ModalWrapper = function ModalWrapper(_ref3) {
   var _ref3$visible = _ref3.visible,
     visible = _ref3$visible === void 0 ? true : _ref3$visible,
-    props = _objectWithoutProperties(_ref3, _excluded$p);
+    props = _objectWithoutProperties(_ref3, _excluded$r);
   var modalRef = useRef(null);
   var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
@@ -22303,7 +22287,7 @@ var StyledErrorDescription = index$b(Typography.Body)(function (_ref9) {
   };
 });
 
-var _excluded$o = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress", "icon"],
+var _excluded$q = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress", "icon"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage$1 = function renderImage(image) {
   if (/*#__PURE__*/isValidElement(image)) {
@@ -22344,7 +22328,7 @@ var ErrorPage = function ErrorPage(_ref2) {
     secondaryCtaText = _ref2.secondaryCtaText,
     onSecondaryCtaPress = _ref2.onSecondaryCtaPress,
     icon = _ref2.icon,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$o);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$q);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
@@ -22570,13 +22554,13 @@ var ActionItem = function ActionItem(_ref) {
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
 };
 
-var _excluded$n = ["active"];
+var _excluded$p = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(/*#__PURE__*/React__default.forwardRef(function (props, _) {
   return /*#__PURE__*/React__default.createElement(StyledFABIcon, props);
 }));
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$n);
+    iconProps = _objectWithoutProperties(_ref, _excluded$p);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.spring(rotateAnimation.current, {
@@ -22941,11 +22925,11 @@ var StyledFAB = index$b(FAB$1)(function (_ref) {
   };
 });
 
-var _excluded$m = ["fabConfig", "onCancel"];
+var _excluded$o = ["fabConfig", "onCancel"];
 var Pair = function Pair(_ref) {
   var fabConfig = _ref.fabConfig,
     onCancel = _ref.onCancel,
-    props = _objectWithoutProperties(_ref, _excluded$m);
+    props = _objectWithoutProperties(_ref, _excluded$o);
   var icon = fabConfig.icon,
     title = fabConfig.title,
     onPress = fabConfig.onPress,
@@ -23675,11 +23659,11 @@ var StyledFocusIcon = index$b(Icon)(function (_ref7) {
   };
 });
 
-var _excluded$l = ["style", "testID"];
+var _excluded$n = ["style", "testID"];
 var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
@@ -23689,7 +23673,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   }));
 };
 
-var _excluded$k = ["style", "testID", "state", "image", "icon"];
+var _excluded$m = ["style", "testID", "state", "image", "icon"];
 var getBadgeIconName = function getBadgeIconName(state) {
   var iconMap = {
     idle: undefined,
@@ -23705,7 +23689,7 @@ var MapPin = function MapPin(_ref) {
     state = _ref$state === void 0 ? 'idle' : _ref$state,
     image = _ref.image,
     icon = _ref.icon,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   var badgeIcon = getBadgeIconName(state);
   return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
     style: style,
@@ -23734,7 +23718,7 @@ var StyledWrapper$6 = index$b(View)(function () {
     alignContent: 'flex-start'
   };
 });
-var StyledPinWrapper = index$b(View)(function () {
+var StyledPinWrapper = index$b(Pressable)(function () {
   return {
     flexDirection: 'row'
   };
@@ -23833,7 +23817,11 @@ function PinCell(_ref) {
     state = _ref$state === void 0 ? 'default' : _ref$state;
   return /*#__PURE__*/React__default.createElement(StyledCell, {
     themeFocused: focused,
-    themeState: state
+    themeState: state,
+    accessibilityState: {
+      selected: focused
+    },
+    testID: "pin-cell"
   }, value === '' && /*#__PURE__*/React__default.createElement(StyledMask, {
     themeState: state,
     testID: "pin-cell-mask"
@@ -23941,7 +23929,11 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   return /*#__PURE__*/React__default.createElement(StyledWrapper$6, {
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(StyledPinWrapper, null, _toConsumableArray(Array(length).keys()).map(function (index) {
+  }, /*#__PURE__*/React__default.createElement(StyledPinWrapper, {
+    onPress: focus,
+    disabled: disabled,
+    testID: "pin-wrapper"
+  }, _toConsumableArray(Array(length).keys()).map(function (index) {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       key: index
     }, index !== 0 && /*#__PURE__*/React__default.createElement(StyledSpacer, null), /*#__PURE__*/React__default.createElement(PinCell, {
@@ -23965,7 +23957,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     autoFocus: autoFocus,
     onFocus: focus,
     onBlur: blur,
-    pointerEvents: "box-none",
+    pointerEvents: "none",
     keyboardType: "numeric",
     testID: "pin-hidden-input",
     textContentType: textContentType,
@@ -24013,7 +24005,7 @@ var THEME_INTENT_MAP = {
   'archived-inverted': 'archivedInverted'
 };
 
-var _excluded$j = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$l = ["value", "renderValue", "intent", "style", "testID"];
 var defaultRenderValue = function defaultRenderValue(value) {
   return "".concat(value, "%");
 };
@@ -24026,7 +24018,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   var theme = useTheme$1();
   var size = theme.__hd__.progress.sizes.circleDiameter;
   var strokeWidth = theme.__hd__.progress.sizes.circleCompletenessHeight;
@@ -24096,14 +24088,14 @@ var StyledInner = index$b(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$i = ["value", "intent", "style", "testID"];
+var _excluded$k = ["value", "intent", "style", "testID"];
 var ProgressBar = function ProgressBar(_ref) {
   var value = _ref.value,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -24193,7 +24185,7 @@ var StyledSingleStep = index$b(Box)(function (_ref3) {
   };
 });
 
-var _excluded$h = ["steps", "current", "onLayout"];
+var _excluded$j = ["steps", "current", "onLayout"];
 var getStepState = function getStepState(current, index) {
   if (index < current) {
     return 'complete';
@@ -24207,7 +24199,7 @@ var ProgressStep = function ProgressStep(_ref) {
   var steps = _ref.steps,
     current = _ref.current,
     onLayout = _ref.onLayout,
-    props = _objectWithoutProperties(_ref, _excluded$h);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var theme = useTheme$1();
   var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -24516,14 +24508,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$g = ["testID", "size", "intent"];
+var _excluded$i = ["testID", "size", "intent"];
 var Spinner = function Spinner(_ref) {
   var testID = _ref.testID,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(StyledView$1, nativeProps, /*#__PURE__*/React__default.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(AnimatedSpinner, {
@@ -24556,7 +24548,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$f = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
+var _excluded$h = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth", "variant"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -24585,7 +24577,7 @@ var Swipeable = function Swipeable(_ref) {
     rightActionsWidth = _ref.rightActionsWidth,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'card' : _ref$variant,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$f);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$h);
   var theme = useTheme();
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
@@ -24912,7 +24904,7 @@ var StyledSectionList = index$b(SectionList)(function (_ref4) {
   };
 });
 
-var _excluded$e = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$g = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -24921,7 +24913,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$e);
+    rest = _objectWithoutProperties(_ref, _excluded$g);
   var theme = useTheme$1();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -25003,7 +24995,7 @@ var isOptionSelected = function isOptionSelected(value, option) {
   });
 };
 
-var _excluded$d = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$f = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -25014,7 +25006,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$d);
+    rest = _objectWithoutProperties(_ref, _excluded$f);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = isOptionSelected(value, item);
@@ -25049,6 +25041,7 @@ var OptionList$1 = function OptionList(_ref) {
   }, rest));
 };
 
+var _excluded$e = ["footerLabel", "label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig"];
 function MultiSelect(_ref) {
   var footerLabel = _ref.footerLabel,
     label = _ref.label,
@@ -25075,7 +25068,8 @@ function MultiSelect(_ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
-    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    rest = _objectWithoutProperties(_ref, _excluded$e);
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -25098,6 +25092,7 @@ function MultiSelect(_ref) {
   var rawValue = value.length > 0 ? value.join(', ') : '';
   var bottomSheetVariant = bottomSheetConfig.variant,
     bottomSheetHeader = bottomSheetConfig.header;
+  var TextInputComponent = rest.TextInputComponent || TextInput;
   useEffect(function () {
     setSelectingValue(value);
   }, [open, value]);
@@ -25109,7 +25104,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInputComponent, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
     suffix: "arrow-down",
@@ -25159,7 +25154,7 @@ function MultiSelect(_ref) {
       }
     },
     supportedOrientations: supportedOrientations
-  }, onQueryChange && /*#__PURE__*/React__default.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React__default.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInputComponent, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -25210,7 +25205,7 @@ var StyledOptionList = index$b(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$c = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$d = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -25221,7 +25216,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$c);
+    rest = _objectWithoutProperties(_ref, _excluded$d);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = _deepCompareValue(item.value, value);
@@ -25257,6 +25252,7 @@ var OptionList = function OptionList(_ref) {
   }, rest));
 };
 
+var _excluded$c = ["label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig"];
 var SingleSelect = function SingleSelect(_ref) {
   var _flatOptions$find;
   var label = _ref.label,
@@ -25283,7 +25279,8 @@ var SingleSelect = function SingleSelect(_ref) {
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
-    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi;
+    bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    rest = _objectWithoutProperties(_ref, _excluded$c);
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -25300,6 +25297,7 @@ var SingleSelect = function SingleSelect(_ref) {
   var rawValue = value ? String(value) : undefined;
   var bottomSheetVariant = bottomSheetConfig.variant,
     bottomSheetHeader = bottomSheetConfig.header;
+  var TextInputComponent = rest.TextInputComponent || TextInput;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
@@ -25308,7 +25306,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default.createElement(TextInputComponent, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
     suffix: "arrow-down",
@@ -25342,7 +25340,7 @@ var SingleSelect = function SingleSelect(_ref) {
       }
     },
     supportedOrientations: supportedOrientations
-  }, onQueryChange && /*#__PURE__*/React__default.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React__default.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInputComponent, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -26708,7 +26706,8 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
 var StyledPickerWrapper = index$b(View)(function (_ref) {
   var theme = _ref.theme;
   return {
-    height: theme.__hd__.timePicker.sizes.height
+    height: theme.__hd__.timePicker.sizes.height,
+    alignItems: 'center'
   };
 });