@hero-design/rn 7.10.2-rc.0 → 7.11.2

package/es/index.js

@@ -1,5 +1,5 @@
 import * as ReactNative from 'react-native';
-import ReactNative__default, { Dimensions, StyleSheet as StyleSheet$1, Text as Text$1, View, TouchableOpacity, Image, Animated, Platform, TouchableWithoutFeedback, Pressable, Easing, Modal, TouchableHighlight, TextInput as TextInput$1, requireNativeComponent, UIManager, I18nManager, Keyboard, FlatList, LayoutAnimation } from 'react-native';
+import ReactNative__default, { Dimensions, StyleSheet as StyleSheet$1, Text as Text$1, View, TouchableOpacity, Image, Animated, Platform, TouchableWithoutFeedback, Pressable, Easing, Modal, TouchableHighlight, TextInput as TextInput$1, InteractionManager, requireNativeComponent, UIManager, I18nManager, Keyboard, FlatList, LayoutAnimation } from 'react-native';
 import React, { useContext, createContext, createElement, forwardRef, useRef, useEffect, useState, useCallback, Children, useLayoutEffect, useImperativeHandle, useMemo } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -1296,21 +1296,6 @@ function prefixer(element, index, children, callback) {
   }
 }
 
-var weakMemoize = function weakMemoize(func) {
-  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
-  var cache = new WeakMap();
-  return function (arg) {
-    if (cache.has(arg)) {
-      // $FlowFixMe
-      return cache.get(arg);
-    }
-
-    var ret = func(arg);
-    cache.set(arg, ret);
-    return ret;
-  };
-};
-
 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) {
   var previous = 0;
   var character = 0;
@@ -1548,6 +1533,21 @@ function _extends$2() {
   return _extends$2.apply(this, arguments);
 }
 
+var weakMemoize = function weakMemoize(func) {
+  // $FlowFixMe flow doesn't include all non-primitive types as allowed for weakmaps
+  var cache = new WeakMap();
+  return function (arg) {
+    if (cache.has(arg)) {
+      // $FlowFixMe
+      return cache.get(arg);
+    }
+
+    var ret = func(arg);
+    cache.set(arg, ret);
+    return ret;
+  };
+};
+
 var EmotionCacheContext = /* #__PURE__ */createContext( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
@@ -2713,7 +2713,8 @@ var getSpace = function getSpace(baseSpace) {
     xlarge: scale(baseSpace * 4),
     xxlarge: scale(baseSpace * 5),
     xxxlarge: scale(baseSpace * 6),
-    xxxxlarge: scale(baseSpace * 7)
+    xxxxlarge: scale(baseSpace * 7) // 56
+
   };
 };
 
@@ -3162,6 +3163,96 @@ var getIconTheme = function getIconTheme(theme) {
   };
 };
 
+var getListTheme = function getListTheme(theme) {
+  var colors = {
+    checkedListItemContainerBackground: theme.colors.primaryBackground,
+    listItemContainerBackground: theme.colors.platformBackground,
+    leadingStatus: {
+      danger: theme.colors.danger,
+      info: theme.colors.infoLight,
+      success: theme.colors.successDark,
+      warning: theme.colors.warningLight,
+      archived: theme.colors.archived
+    }
+  };
+  var space = {
+    listItemContainerPadding: theme.space.medium,
+    leadingStatusMarginRight: theme.space.small,
+    prefixContainerMarginRight: theme.space.small,
+    suffixContainerMarginLeft: theme.space.small
+  };
+  var radii = {
+    card: theme.radii.medium,
+    cardShadow: theme.radii.base,
+    leadingStatus: theme.radii.rounded
+  };
+  var offsets = {
+    cardShadow: {
+      width: 0,
+      height: 2
+    }
+  };
+  var widths = {
+    leadingStatus: 8
+  };
+  var opacity = {
+    disabled: 0.38,
+    enabled: 1,
+    cardShadow: 1
+  };
+  return {
+    colors: colors,
+    space: space,
+    radii: radii,
+    offsets: offsets,
+    widths: widths,
+    opacity: opacity
+  };
+};
+
+var getPinInputTheme = function getPinInputTheme(theme) {
+  var borderWidths = {
+    "default": theme.borderWidths.base,
+    focused: theme.borderWidths.medium
+  };
+  var colors = {
+    "default": theme.colors.text,
+    mask: theme.colors.subduedText,
+    error: theme.colors.danger,
+    disabled: theme.colors.archivedDark
+  };
+  var fonts = {
+    cellText: theme.fonts.semiBold,
+    errorMessage: theme.fonts.regular
+  };
+  var fontSizes = {
+    cellText: theme.fontSizes.xxxxlarge,
+    errorMessage: theme.fontSizes.small
+  };
+  var sizes = {
+    cellWidth: theme.space.xxlarge,
+    cellHeight: theme.space.xxxlarge,
+    mask: theme.space.medium
+  };
+  var space = {
+    spacer: theme.space.medium,
+    errorMessagePadding: theme.space.xsmall
+  };
+  var radii = {
+    cell: theme.radii.medium,
+    mask: theme.radii.rounded
+  };
+  return {
+    borderWidths: borderWidths,
+    colors: colors,
+    fonts: fonts,
+    fontSizes: fontSizes,
+    sizes: sizes,
+    space: space,
+    radii: radii
+  };
+};
+
 var getProgressTheme = function getProgressTheme(theme) {
   var colors = {
     primary: theme.colors.primary,
@@ -3443,10 +3534,10 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     containerMarginVertical: theme.space.small,
-    errorContainerMarginLeft: theme.space.medium,
     errorContainerMarginRight: theme.space.xsmall,
     errorMarginLeft: theme.space.xsmall,
-    maxLengthLabelMarginLeft: theme.space.xsmall
+    maxLengthLabelMarginLeft: theme.space.xsmall,
+    errorAndHelpTextContainerPaddingLeft: theme.space.medium
   };
   var fontSizes = {
     text: theme.fontSizes.medium,
@@ -3547,13 +3638,15 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     small: theme.fontSizes.small,
     medium: theme.fontSizes.medium,
     large: theme.fontSizes.large,
-    xlarge: theme.fontSizes.xlarge
+    xlarge: theme.fontSizes.xlarge,
+    xxxxxlarge: theme.fontSizes.xxxxxlarge
   };
   var lineHeights = {
     small: theme.lineHeights.small,
     medium: theme.lineHeights.medium,
     large: theme.lineHeights.large,
-    xlarge: theme.lineHeights.xlarge
+    xlarge: theme.lineHeights.xlarge,
+    xxxxxlarge: theme.lineHeights.xxxxxlarge
   };
   return {
     colors: colors,
@@ -3563,53 +3656,6 @@ var getTypographyTheme = function getTypographyTheme(theme) {
   };
 };
 
-var getListTheme = function getListTheme(theme) {
-  var colors = {
-    checkedListItemContainerBackground: theme.colors.primaryBackground,
-    listItemContainerBackground: theme.colors.platformBackground,
-    leadingStatus: {
-      danger: theme.colors.danger,
-      info: theme.colors.infoLight,
-      success: theme.colors.successDark,
-      warning: theme.colors.warningLight,
-      archived: theme.colors.archived
-    }
-  };
-  var space = {
-    listItemContainerPadding: theme.space.medium,
-    leadingStatusMarginRight: theme.space.small,
-    prefixContainerMarginRight: theme.space.small,
-    suffixContainerMarginLeft: theme.space.small
-  };
-  var radii = {
-    card: theme.radii.medium,
-    cardShadow: theme.radii.base,
-    leadingStatus: theme.radii.rounded
-  };
-  var offsets = {
-    cardShadow: {
-      width: 0,
-      height: 2
-    }
-  };
-  var widths = {
-    leadingStatus: 8
-  };
-  var opacity = {
-    disabled: 0.38,
-    enabled: 1,
-    cardShadow: 1
-  };
-  return {
-    colors: colors,
-    space: space,
-    radii: radii,
-    offsets: offsets,
-    widths: widths,
-    opacity: opacity
-  };
-};
-
 var getTheme = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : systemPalette;
@@ -3629,6 +3675,8 @@ var getTheme = function getTheme() {
       drawer: getDrawerTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
+      list: getListTheme(globalTheme),
+      pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
@@ -3640,8 +3688,7 @@ var getTheme = function getTheme() {
       textInput: getTextInputTheme(globalTheme),
       toast: getToastTheme(globalTheme),
       toolbar: getToolbarTheme(globalTheme),
-      typography: getTypographyTheme(globalTheme),
-      list: getListTheme(globalTheme)
+      typography: getTypographyTheme(globalTheme)
     }
   });
 };
@@ -16102,7 +16149,7 @@ var Divider = function Divider(_ref) {
 };
 
 var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
-var StyledWrapper$5 = index$5(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+var StyledWrapper$6 = index$5(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
 var StyledBottomSheet = index$5(Animated.View)(function (_ref) {
@@ -16864,7 +16911,7 @@ var BottomSheet = function BottomSheet(_ref) {
     transparent: true,
     testID: testID,
     onShow: onOpen
-  }, /*#__PURE__*/React.createElement(StyledWrapper$5, {
+  }, /*#__PURE__*/React.createElement(StyledWrapper$6, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React.createElement(StyledBackdrop$2, {
     style: {
@@ -16972,7 +17019,7 @@ var index$4 = Object.assign(Card, {
   Data: DataCard
 });
 
-var StyledWrapper$4 = index$5(Animated.View)(function () {
+var StyledWrapper$5 = index$5(Animated.View)(function () {
   return {
     margin: 0,
     padding: 0,
@@ -17032,7 +17079,7 @@ var Collapse = function Collapse(_ref) {
     var height = _ref2.height;
     setContentHeight(height);
   }, [contentHeight]);
-  return /*#__PURE__*/React.createElement(StyledWrapper$4, {
+  return /*#__PURE__*/React.createElement(StyledWrapper$5, {
     style: [style, {
       height: collapseAnim
     }],
@@ -17044,7 +17091,7 @@ var Collapse = function Collapse(_ref) {
   }, children)));
 };
 
-var StyledWrapper$3 = index$5(TouchableOpacity)(function (_ref) {
+var StyledWrapper$4 = index$5(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
       disabled = _ref.disabled;
   return {
@@ -17066,7 +17113,7 @@ var CheckBox = function CheckBox(_ref) {
       onPress = _ref.onPress,
       style = _ref.style,
       testID = _ref.testID;
-  return /*#__PURE__*/React.createElement(StyledWrapper$3, {
+  return /*#__PURE__*/React.createElement(StyledWrapper$4, {
     onPress: onPress,
     disabled: disabled,
     style: style,
@@ -17455,10 +17502,14 @@ var ActionGroup = function ActionGroup(_ref2) {
     inputRange: [0, 1],
     outputRange: [400, 0]
   });
-  var interpolatedOpacityAnimation = tranlateXAnimation.current.interpolate({
+  var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.9]
   });
+  var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1]
+  });
   return /*#__PURE__*/React.createElement(StyledContainer$1, {
     testID: testID,
     pointerEvents: "box-none",
@@ -17467,11 +17518,13 @@ var ActionGroup = function ActionGroup(_ref2) {
     pointerEvents: active ? 'auto' : 'box-none',
     testID: "back-drop",
     style: {
-      opacity: interpolatedOpacityAnimation
+      opacity: interpolatedBackdropOpacityAnimation
     }
   }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
+    pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
+      opacity: interpolatedActionGroupOpacityAnimation,
       transform: [{
         translateX: interpolatedTranlateXAnimation
       }]
@@ -17683,6 +17736,227 @@ var List = {
   BasicItem: BasicListItem
 };
 
+var StyledWrapper$3 = index$5(View)(function () {
+  return {
+    alignContent: 'flex-start'
+  };
+});
+var StyledPinWrapper = index$5(View)(function () {
+  return {
+    flexDirection: 'row'
+  };
+});
+var StyledCell = index$5(View)(function (_ref) {
+  var theme = _ref.theme,
+      themeFocused = _ref.themeFocused,
+      themeState = _ref.themeState;
+  return {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: theme.__hd__.pinInput.sizes.cellWidth,
+    height: theme.__hd__.pinInput.sizes.cellHeight,
+    borderWidth: themeFocused ? theme.__hd__.pinInput.borderWidths.focused : theme.__hd__.pinInput.borderWidths["default"],
+    borderRadius: theme.__hd__.pinInput.radii.cell,
+    borderColor: theme.__hd__.pinInput.colors[themeState]
+  };
+});
+var StyledCellText = index$5(Text$1)(function (_ref2) {
+  var theme = _ref2.theme,
+      themeState = _ref2.themeState;
+  return {
+    fontFamily: theme.__hd__.pinInput.fonts.cellText,
+    fontSize: theme.__hd__.pinInput.fontSizes.cellText,
+    color: theme.__hd__.pinInput.colors[themeState]
+  };
+});
+var StyledSpacer = index$5(View)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginLeft: theme.__hd__.pinInput.space.spacer
+  };
+});
+var StyledMask = index$5(View)(function (_ref4) {
+  var theme = _ref4.theme,
+      themeState = _ref4.themeState;
+  return {
+    width: theme.__hd__.pinInput.sizes.mask,
+    height: theme.__hd__.pinInput.sizes.mask,
+    borderWidth: theme.__hd__.pinInput.borderWidths["default"],
+    borderRadius: theme.__hd__.pinInput.radii.mask,
+    borderColor: theme.__hd__.pinInput.colors[themeState]
+  };
+});
+var StyledFilledMask = index$5(View)(function (_ref5) {
+  var theme = _ref5.theme,
+      themeState = _ref5.themeState;
+  return {
+    width: theme.__hd__.pinInput.sizes.mask,
+    height: theme.__hd__.pinInput.sizes.mask,
+    borderWidth: theme.__hd__.pinInput.borderWidths["default"],
+    borderRadius: theme.__hd__.pinInput.radii.mask,
+    borderColor: theme.__hd__.pinInput.colors[themeState],
+    backgroundColor: theme.__hd__.pinInput.colors[themeState]
+  };
+});
+var StyledHiddenInput = index$5(TextInput$1)(function (_ref6) {
+  var themePinLength = _ref6.themePinLength,
+      theme = _ref6.theme;
+  var cellWidth = theme.__hd__.pinInput.sizes.cellWidth;
+  var spacerWidth = theme.__hd__.pinInput.space.spacer;
+  return {
+    position: 'absolute',
+    opacity: 0,
+    left: 0,
+    top: 0,
+    width: themePinLength * cellWidth + (themePinLength - 1) * spacerWidth,
+    height: '100%'
+  };
+});
+var StyledErrorContainer$1 = index$5(View)(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    flexDirection: 'row',
+    paddingTop: theme.__hd__.pinInput.space.errorMessagePadding
+  };
+});
+var StyledErrorMessage = index$5(Text$1)(function (_ref8) {
+  var theme = _ref8.theme;
+  return {
+    fontFamily: theme.__hd__.pinInput.fonts.errorMessage,
+    fontSize: theme.__hd__.pinInput.fontSizes.errorMessage,
+    color: theme.__hd__.pinInput.colors.error,
+    paddingLeft: theme.__hd__.pinInput.space.errorMessagePadding
+  };
+});
+
+function PinCell(_ref) {
+  var value = _ref.value,
+      _ref$secure = _ref.secure,
+      secure = _ref$secure === void 0 ? true : _ref$secure,
+      _ref$focused = _ref.focused,
+      focused = _ref$focused === void 0 ? false : _ref$focused,
+      _ref$state = _ref.state,
+      state = _ref$state === void 0 ? 'default' : _ref$state;
+  return /*#__PURE__*/React.createElement(StyledCell, {
+    themeFocused: focused,
+    themeState: state
+  }, value === '' && /*#__PURE__*/React.createElement(StyledMask, {
+    themeState: state,
+    testID: "pin-cell-mask"
+  }), value !== '' && secure && /*#__PURE__*/React.createElement(StyledFilledMask, {
+    themeState: state,
+    testID: "pin-cell-filled-mask"
+  }), value !== '' && !secure && /*#__PURE__*/React.createElement(StyledCellText, {
+    themeState: state
+  }, value));
+}
+
+function getState(_ref) {
+  var disabled = _ref.disabled,
+      error = _ref.error;
+
+  if (disabled) {
+    return 'disabled';
+  }
+
+  if (error) {
+    return 'error';
+  }
+
+  return 'default';
+}
+
+function PinInput(_ref2) {
+  var _ref2$value = _ref2.value,
+      value = _ref2$value === void 0 ? '' : _ref2$value,
+      onChangeText = _ref2.onChangeText,
+      onFulfill = _ref2.onFulfill,
+      _ref2$length = _ref2.length,
+      length = _ref2$length === void 0 ? 4 : _ref2$length,
+      _ref2$disabled = _ref2.disabled,
+      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+      _ref2$secure = _ref2.secure,
+      secure = _ref2$secure === void 0 ? true : _ref2$secure,
+      _ref2$autoFocus = _ref2.autoFocus,
+      autoFocus = _ref2$autoFocus === void 0 ? false : _ref2$autoFocus,
+      error = _ref2.error,
+      style = _ref2.style,
+      testID = _ref2.testID;
+  var inputRef = useRef(null);
+
+  var _useState = useState(autoFocus),
+      _useState2 = _slicedToArray(_useState, 2),
+      focused = _useState2[0],
+      setFocused = _useState2[1];
+
+  var state = getState({
+    disabled: disabled,
+    error: error
+  });
+  var focus = useCallback(function () {
+    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      inputRef.current.focus();
+      setFocused(true);
+    }
+  }, []);
+  var blur = useCallback(function () {
+    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
+      inputRef.current.blur();
+      setFocused(false);
+    }
+  }, []);
+  var changeText = useCallback(function (text) {
+    var pin = (text.match(/[0-9]/g) || []).join('');
+
+    if (onChangeText) {
+      onChangeText(pin);
+    }
+
+    if (pin.length === length && onFulfill) {
+      onFulfill(pin);
+    }
+  }, []);
+  useEffect(function () {
+    // Must run after animations for keyboard to automatically open
+    if (autoFocus) {
+      InteractionManager.runAfterInteractions(focus);
+    }
+  }, [inputRef]);
+  return /*#__PURE__*/React.createElement(StyledWrapper$3, {
+    style: style,
+    testID: testID
+  }, /*#__PURE__*/React.createElement(StyledPinWrapper, null, _toConsumableArray$1(Array(length).keys()).map(function (index) {
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: index
+    }, index !== 0 && /*#__PURE__*/React.createElement(StyledSpacer, null), /*#__PURE__*/React.createElement(PinCell, {
+      value: value.charAt(index),
+      secure: secure,
+      focused: focused && index === value.length,
+      state: state
+    }));
+  })), state === 'error' && /*#__PURE__*/React.createElement(StyledErrorContainer$1, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: "circle-info",
+    size: "xsmall",
+    intent: "danger",
+    testID: "pin-error-icon"
+  }), /*#__PURE__*/React.createElement(StyledErrorMessage, null, error)), /*#__PURE__*/React.createElement(StyledHiddenInput, {
+    themePinLength: length,
+    ref: inputRef,
+    value: value,
+    onChangeText: changeText,
+    secureTextEntry: secure,
+    editable: !disabled,
+    autoFocus: autoFocus,
+    onFocus: focus,
+    onBlur: blur,
+    maxLength: length,
+    keyboardType: "numeric",
+    contextMenuHidden: true,
+    caretHidden: true,
+    testID: "pin-hidden-input"
+  }));
+}
+
 var HalfCircleWrapper = index$5(View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -18372,7 +18646,6 @@ var StyledAsteriskLabelInsideTextInput = index$5(Typography.Text)(function (_ref
 var StyledErrorContainer = index$5(View)(function (_ref7) {
   var theme = _ref7.theme;
   return {
-    marginLeft: theme.__hd__.textInput.space.errorContainerMarginLeft,
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
     flexDirection: 'row',
     alignItems: 'center',
@@ -18404,8 +18677,7 @@ var StyledMaxLengthMessage = index$5(Typography.Text)(function (_ref9) {
 var StyledHelperText = index$5(Typography.Text)(function (_ref10) {
   var theme = _ref10.theme;
   return {
-    fontSize: theme.__hd__.textInput.fontSizes.error,
-    marginLeft: theme.__hd__.textInput.space.errorMarginLeft
+    fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
 var StyledTextInput = index$5(TextInput$1)(function (_ref11) {
@@ -18445,9 +18717,14 @@ var StyledTextInputAndLabelContainer = index$5(View)(function () {
     flexGrow: 2
   };
 });
-var StyledErrorAndHelpTextContainer = index$5(View)(function () {
+var StyledErrorAndHelpTextContainer = index$5(View)(function (_ref14) {
+  var theme = _ref14.theme;
+  return {
+    paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft
+  };
+});
+var StyledErrorAndMaxLengthContainer = index$5(View)(function () {
   return {
-    flex: 1,
     flexDirection: 'row',
     justifyContent: 'space-between'
   };
@@ -18485,6 +18762,8 @@ var getVariant = function getVariant(_ref) {
 };
 
 var TextInput = function TextInput(_ref2) {
+  var _ref3;
+
   var label = _ref2.label,
       prefix = _ref2.prefix,
       suffix = _ref2.suffix,
@@ -18505,7 +18784,7 @@ var TextInput = function TextInput(_ref2) {
       nativeProps = _objectWithoutProperties$1(_ref2, _excluded$1);
 
   var textInputReference = useRef(null);
-  var displayText = value || defaultValue || '';
+  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
 
   var _React$useState = React.useState(false),
@@ -18533,7 +18812,7 @@ var TextInput = function TextInput(_ref2) {
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
     themeVariant: variant,
     fontSize: "small"
-  }, "*"), /*#__PURE__*/React.createElement(StyledLabel, {
+  }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "small",
@@ -18547,7 +18826,7 @@ var TextInput = function TextInput(_ref2) {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabelInsideTextInput, {
     themeVariant: variant
-  }, "*"), /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
+  }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "medium",
@@ -18593,7 +18872,7 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-suffix",
     icon: suffix,
     size: "xsmall"
-  }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, error && /*#__PURE__*/React.createElement(StyledErrorContainer, null, /*#__PURE__*/React.createElement(Icon, {
+  }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React.createElement(StyledErrorAndMaxLengthContainer, null, error && /*#__PURE__*/React.createElement(StyledErrorContainer, null, /*#__PURE__*/React.createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",
     size: "xsmall",
@@ -18603,7 +18882,7 @@ var TextInput = function TextInput(_ref2) {
   }, error)), shouldShowMaxLength && /*#__PURE__*/React.createElement(StyledMaxLengthMessage, {
     themeVariant: variant,
     fontSize: "small"
-  }, displayText.length, "/", maxLength), helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
+  }, displayText.length, "/", maxLength)), helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
 };
 
 function MultiSelect(_ref) {
@@ -18614,7 +18893,6 @@ function MultiSelect(_ref) {
       label = _ref.label,
       footerLabel = _ref.footerLabel,
       onConfirm = _ref.onConfirm;
-  var theme = useTheme$1();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18635,23 +18913,16 @@ function MultiSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayedValue,
-    onPressIn: function onPressIn() {
-      return setOpen(true);
-    },
-    editable: false // when input is not editable on Android, the text color is gray
-    // hence, adding this to make the text color the same as iOS
-    ,
-    textStyle: {
-      color: theme.colors.text
-    },
     suffix: "arrow-down",
     multiline: true,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React.createElement(BottomSheet, {
+  })), /*#__PURE__*/React.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -18721,7 +18992,6 @@ var SingleSelect = function SingleSelect(_ref) {
       style = _ref.style,
       label = _ref.label,
       onConfirm = _ref.onConfirm;
-  var theme = useTheme$1();
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -18740,23 +19010,16 @@ var SingleSelect = function SingleSelect(_ref) {
     onPress: function onPress() {
       return setOpen(true);
     }
+  }, /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none"
   }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayedValue,
-    onPressIn: function onPressIn() {
-      return setOpen(true);
-    },
-    editable: false // when input is not editable on Android, the text color is gray
-    // hence, adding this to make the text color the same as iOS
-    ,
-    textStyle: {
-      color: theme.colors.text
-    },
     suffix: "arrow-down",
     multiline: true,
     style: style,
     testID: testID
-  }), /*#__PURE__*/React.createElement(BottomSheet, {
+  })), /*#__PURE__*/React.createElement(BottomSheet, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -19926,4 +20189,4 @@ var index = Object.assign(Toolbar, {
   Group: ToolbarGroup
 });
 
-export { Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, CompoundButton as Button, index$4 as Card, CheckBox as Checkbox, Collapse, ContentNavigator, Divider, Drawer, index$3 as FAB, Icon, List, Progress, CompoundRadio as Radio, SectionHeading, index$2 as Select, Spinner, Switch, index$1 as Tabs, Tag, TextInput, ThemeProvider, Toast, index as Toolbar, Typography, getTheme, scale, theme, useTheme };
+export { Alert, Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet, CompoundButton as Button, index$4 as Card, CheckBox as Checkbox, Collapse, ContentNavigator, Divider, Drawer, index$3 as FAB, Icon, List, PinInput, Progress, CompoundRadio as Radio, SectionHeading, index$2 as Select, Spinner, Switch, index$1 as Tabs, Tag, TextInput, ThemeProvider, Toast, index as Toolbar, Typography, getTheme, scale, theme, useTheme };