@hero-design/rn 8.124.2 → 8.126.0

package/es/index.js

@@ -5176,6 +5176,8 @@ var getFonts = function getFonts(_ref) {
       lightItalic: "".concat(neutral, "-LightItalic"),
       regular: "".concat(neutral, "-Regular"),
       regularItalic: "".concat(neutral, "-RegularItalic"),
+      medium: "".concat(neutral, "-Medium"),
+      mediumItalic: "".concat(neutral, "-MediumItalic"),
       semiBold: "".concat(neutral, "-SemiBold"),
       semiBoldItalic: "".concat(neutral, "-SemiBoldItalic")
     },
@@ -5184,6 +5186,8 @@ var getFonts = function getFonts(_ref) {
       lightItalic: "".concat(playful, "-LightItalic"),
       regular: "".concat(playful, "-Regular"),
       regularItalic: "".concat(playful, "-RegularItalic"),
+      medium: "".concat(playful, "-Regular"),
+      mediumItalic: "".concat(playful, "-RegularItalic"),
       semiBold: "".concat(playful, "-Medium"),
       semiBoldItalic: "".concat(playful, "-MediumItalic")
     }
@@ -5678,6 +5682,7 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     success: theme.colors.onSuccessSurface,
     warning: theme.colors.onWarningSurface,
     archived: theme.colors.onArchivedSurface,
+    neutral: theme.colors.mutedOnDefaultGlobalSurface,
     text: theme.colors.onDarkGlobalSurface,
     border: theme.colors.defaultGlobalSurface,
     countText: theme.colors.onDarkGlobalSurface,
@@ -5687,7 +5692,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       info: theme.colors.infoSurface,
       success: theme.colors.successSurface,
       warning: theme.colors.warningSurface,
-      archived: theme.colors.archivedSurface
+      archived: theme.colors.archivedSurface,
+      neutral: theme.colors.neutralGlobalSurface
     },
     stringText: {
       primary: theme.colors.primary,
@@ -5695,12 +5701,13 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       info: theme.colors.onInfoSurface,
       success: theme.colors.onSuccessSurface,
       warning: theme.colors.onWarningSurface,
-      archived: theme.colors.onArchivedSurface
+      archived: theme.colors.onArchivedSurface,
+      neutral: theme.colors.onDefaultGlobalSurface
     }
   };
   var fonts = {
-    medium: theme.fonts.neutral.regular,
-    small: theme.fonts.neutral.semiBold
+    medium: theme.fonts.neutral.medium,
+    small: theme.fonts.neutral.medium
   };
   var fontSizes = {
     medium: theme.fontSizes.small,
@@ -7211,33 +7218,41 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     asterisks: {
       "default": theme.colors.onErrorSurface,
       error: theme.colors.onErrorSurface,
-      disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      disabled: theme.colors.onErrorSurface,
+      readonly: theme.colors.onErrorSurface,
       filled: theme.colors.onErrorSurface
     },
     error: theme.colors.onErrorSurface,
-    text: theme.colors.onDefaultGlobalSurface,
+    text: {
+      "default": theme.colors.onDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onDefaultGlobalSurface,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface,
+      disabled: theme.colors.mutedOnDefaultGlobalSurface
+    },
     borders: {
-      "default": theme.colors.primaryOutline,
+      "default": theme.colors.inactiveOutline,
       error: theme.colors.onErrorSurface,
-      disabled: theme.colors.disabledOutline,
+      disabled: theme.colors.inactiveOutline,
       readonly: theme.colors.inactiveOutline,
-      filled: theme.colors.primaryOutline
+      filled: theme.colors.inactiveOutline,
+      focused: theme.colors.primaryOutline
     },
     labels: {
-      "default": theme.colors.onDefaultGlobalSurface,
+      "default": theme.colors.mutedOnDefaultGlobalSurface,
       error: theme.colors.onDefaultGlobalSurface,
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
       readonly: theme.colors.mutedOnDefaultGlobalSurface,
-      filled: theme.colors.onDefaultGlobalSurface
+      filled: theme.colors.mutedOnDefaultGlobalSurface
     },
     labelsInsideTextInput: {
-      "default": theme.colors.onDefaultGlobalSurface,
+      "default": theme.colors.mutedOnDefaultGlobalSurface,
       error: theme.colors.onDefaultGlobalSurface,
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
-      filled: theme.colors.onDefaultGlobalSurface
+      readonly: theme.colors.mutedOnDefaultGlobalSurface,
+      filled: theme.colors.mutedOnDefaultGlobalSurface
     },
+    readonlyBackground: theme.colors.neutralGlobalSurface,
     maxLengthLabels: {
       "default": theme.colors.onDefaultGlobalSurface,
       error: theme.colors.onErrorSurface,
@@ -7254,19 +7269,21 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     }
   };
   var space = {
-    containerPadding: theme.space.medium,
+    containerHorizontalPadding: theme.space.medium,
+    containerVerticalPadding: theme.space.small,
     labelLeft: theme.space.xlarge,
     labelTop: theme.space.xlarge / 3,
     labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
-    inputHorizontalMargin: theme.space.small,
+    inputHorizontalMargin: theme.space.smallMedium,
     errorContainerMarginRight: theme.space.xsmall,
     errorAndHelpTextContainerMarginTop: theme.space.xxsmall,
-    errorMarginLeft: theme.space.xsmall,
-    errorAndHelpTextContainerHorizontalPadding: theme.space.medium,
     containerMarginTop: theme.space.small,
-    labelInsideTextInputMarginTop: -theme.space.xxsmall,
-    errorAndHelpTextContainerPaddingTop: theme.space.xxsmall
+    labelInsideTextInputMarginTop: 0,
+    errorAndHelpTextContainerPaddingTop: theme.space.xxsmall,
+    inputAndLabelContainerPaddingTop: theme.lineHeights.medium,
+    labelFocusedTranslateY: theme.space.xsmall * 2,
+    textareaLabelIdleTranslateY: theme.space.large
   };
   var fonts = {
     text: theme.fonts.neutral.regular
@@ -7282,19 +7299,21 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   var borderWidths = {
     container: {
       normal: theme.borderWidths.base,
-      focused: theme.borderWidths.medium
+      focused: theme.borderWidths.base
     }
   };
   var radii = {
     container: theme.radii.medium
   };
   var sizes = {
-    errorAndHelpTextContainerHeight: theme.sizes.medium,
-    textareaHeight: theme.sizes['15xlarge'],
+    errorAndHelpTextContainerMinHeight: theme.space.large,
+    containerMinHeight: scale(58),
+    textareaHeight: scale(120),
     textInputMaxHeight: theme.sizes['15xlarge']
   };
   var lineHeights = {
-    topLabel: theme.lineHeights.large / 2
+    topLabel: theme.lineHeights.large / 2,
+    label: theme.lineHeights.large
   };
   return {
     colors: colors,
@@ -7545,11 +7564,13 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     body: {
       neutral: {
         semiBold: 0.24,
+        medium: 0.3,
         regular: 0.48,
         small: 0.48
       },
       playful: {
         semiBold: 0.54,
+        medium: 0.54,
         regular: 0.54,
         small: 0.54
       }
@@ -8191,9 +8212,15 @@ var Text = function Text(_ref) {
 var FONTWEIGHT_MAP$1 = {
   light: 'light',
   regular: 'regular',
+  medium: 'medium',
   'semi-bold': 'semiBold'
 };
 
+var LETTER_SPACING_MAP = {
+  regular: 0.36,
+  medium: 0.3,
+  'semi-bold': 0.24
+};
 var StyledCaption = index$c(Text$1)(function (_ref) {
   var themeFontWeight = _ref.themeFontWeight,
     themeIntent = _ref.themeIntent,
@@ -8201,10 +8228,11 @@ var StyledCaption = index$c(Text$1)(function (_ref) {
     themeIsItalic = _ref.themeIsItalic;
   var baseFontWeight = FONTWEIGHT_MAP$1[themeFontWeight];
   var fontFamily = themeIsItalic ? theme.__hd__.typography.fonts.neutral["".concat(baseFontWeight, "Italic")] : theme.__hd__.typography.fonts.neutral[baseFontWeight];
+  var letterSpacing = LETTER_SPACING_MAP[themeFontWeight];
   return {
     fontSize: theme.__hd__.typography.fontSizes.caption,
     lineHeight: theme.__hd__.typography.lineHeights.caption,
-    letterSpacing: themeFontWeight === 'regular' ? 0.36 : 0.24,
+    letterSpacing: letterSpacing,
     color: theme.__hd__.typography.colors[themeIntent],
     fontFamily: fontFamily
   };
@@ -8314,10 +8342,10 @@ var Caption = function Caption(_ref) {
 var StyledLabel$1 = index$c(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme,
-    themeIsItalic = _ref.themeIsItalic;
-  // For Label, we assume 'regular' weight for base font family
-  var baseFontWeight = 'regular';
-  var fontFamily = themeIsItalic ? theme.__hd__.typography.fonts.neutral["".concat(baseFontWeight, "Italic")] : theme.__hd__.typography.fonts.neutral[baseFontWeight];
+    themeIsItalic = _ref.themeIsItalic,
+    _ref$themeFontWeight = _ref.themeFontWeight,
+    themeFontWeight = _ref$themeFontWeight === void 0 ? 'regular' : _ref$themeFontWeight;
+  var fontFamily = themeIsItalic ? theme.__hd__.typography.fonts.neutral["".concat(themeFontWeight, "Italic")] : theme.__hd__.typography.fonts.neutral[themeFontWeight];
   return {
     fontSize: theme.__hd__.typography.fontSizes.label,
     lineHeight: theme.__hd__.typography.lineHeights.label,
@@ -8327,7 +8355,7 @@ var StyledLabel$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$N = ["children", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
+var _excluded$N = ["children", "intent", "allowFontScaling", "fontStyle", "fontWeight", "style", "testID"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8336,6 +8364,8 @@ var Label = function Label(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    _ref$fontWeight = _ref.fontWeight,
+    fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$N);
@@ -8343,6 +8373,7 @@ var Label = function Label(_ref) {
   var styledText = /*#__PURE__*/React__default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
+    themeFontWeight: fontWeight,
     allowFontScaling: allowFontScaling,
     style: style,
     testID: testID
@@ -8403,12 +8434,16 @@ var Title = function Title(_ref) {
 var FONTWEIGHT_MAP = {
   regular: 'regular',
   small: 'regular',
+  'regular-medium': 'medium',
+  'small-medium': 'medium',
   'regular-bold': 'semiBold',
   'small-bold': 'semiBold'
 };
 var FONTSIZE_MAP = {
   regular: 'regular',
   small: 'small',
+  'regular-medium': 'regular',
+  'small-medium': 'small',
   'regular-bold': 'regular',
   'small-bold': 'small'
 };
@@ -8418,12 +8453,12 @@ var StyledBody$2 = index$c(Text$1)(function (_ref) {
     themeTypeface = _ref.themeTypeface,
     themeVariant = _ref.themeVariant,
     themeIsItalic = _ref.themeIsItalic;
-  var baseFontWeight = FONTWEIGHT_MAP[themeVariant];
-  var fontFamily = themeIsItalic ? theme.__hd__.typography.fonts[themeTypeface]["".concat(baseFontWeight, "Italic")] : theme.__hd__.typography.fonts[themeTypeface][baseFontWeight];
+  var fontWeight = FONTWEIGHT_MAP[themeVariant];
+  var fontFamily = themeIsItalic ? theme.__hd__.typography.fonts[themeTypeface]["".concat(fontWeight, "Italic")] : theme.__hd__.typography.fonts[themeTypeface][fontWeight];
   return {
     fontSize: theme.__hd__.typography.fontSizes.body[themeTypeface][FONTSIZE_MAP[themeVariant]],
     lineHeight: theme.__hd__.typography.lineHeights.body[themeTypeface][FONTSIZE_MAP[themeVariant]],
-    letterSpacing: theme.__hd__.typography.letterSpacings.body[themeTypeface][FONTWEIGHT_MAP[themeVariant]],
+    letterSpacing: theme.__hd__.typography.letterSpacings.body[themeTypeface][fontWeight],
     fontFamily: fontFamily,
     color: theme.__hd__.typography.colors[themeIntent]
   };
@@ -20652,6 +20687,24 @@ var index$9 = Object.assign(DefaultCheckbox, {
   Inline: InlineCheckbox
 });
 
+var genBorderWidth = function genBorderWidth(theme, themeState, themeFocused) {
+  if (themeState === 'readonly') return 0;
+  return themeFocused ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal;
+};
+var genBorderColor = function genBorderColor(theme, themeState, themeFocused, themeFilled) {
+  var _theme$__hd__$textInp2;
+  if (themeState === 'error' && !themeFilled) {
+    return theme.__hd__.textInput.colors.borders["default"];
+  }
+  if (themeState === 'error' && themeFilled) {
+    return theme.__hd__.textInput.colors.borders.error;
+  }
+  if (themeFocused) {
+    var _theme$__hd__$textInp;
+    return (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders.focused) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"];
+  }
+  return (_theme$__hd__$textInp2 = theme.__hd__.textInput.colors.borders[themeState]) !== null && _theme$__hd__$textInp2 !== void 0 ? _theme$__hd__$textInp2 : theme.__hd__.textInput.colors.borders["default"];
+};
 var StyledContainer$7 = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -20661,16 +20714,15 @@ var StyledContainer$7 = index$c(View)(function (_ref) {
 });
 var StyledLabelContainerInsideTextInput = index$c(Animated.View)(function (_ref2) {
   var themeVariant = _ref2.themeVariant,
-    themeHasPrefix = _ref2.themeHasPrefix,
     theme = _ref2.theme;
   return {
     flexDirection: 'row',
     alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
     position: 'absolute',
     zIndex: 1,
-    left: themeHasPrefix ? theme.space.xxlarge : theme.space.medium + theme.space.small,
+    left: 0,
     right: theme.space.medium,
-    top: -theme.__hd__.textInput.space.labelTop
+    top: 0
   };
 });
 var StyledLabelInsideTextInput = index$c(View)(function (_ref3) {
@@ -20705,8 +20757,7 @@ var StyledErrorContainer$2 = index$c(View)(function (_ref5) {
 var StyledError = index$c(Typography.Caption)(function (_ref6) {
   var theme = _ref6.theme;
   return {
-    color: theme.__hd__.textInput.colors.error,
-    marginLeft: theme.__hd__.textInput.space.errorMarginLeft
+    color: theme.__hd__.textInput.colors.error
   };
 });
 var StyledMaxLengthMessage = index$c(Typography.Caption)(function (_ref7) {
@@ -20728,7 +20779,7 @@ var StyledTextInput = index$c(TextInput$1)(function (_ref8) {
     fontSize: theme.__hd__.textInput.fontSizes.text,
     alignSelf: 'stretch',
     flexGrow: 2,
-    marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+    marginHorizontal: 0,
     paddingVertical: 0,
     maxHeight: theme.__hd__.textInput.sizes.textInputMaxHeight,
     height: themeVariant === 'text' ? undefined : theme.__hd__.textInput.sizes.textareaHeight,
@@ -20736,45 +20787,65 @@ var StyledTextInput = index$c(TextInput$1)(function (_ref8) {
   };
 });
 var StyledBorderBackDrop = index$c(View)(function (_ref9) {
-  var _theme$__hd__$textInp;
   var theme = _ref9.theme,
     themeFocused = _ref9.themeFocused,
-    themeState = _ref9.themeState;
+    themeState = _ref9.themeState,
+    themeFilled = _ref9.themeFilled;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
-    borderWidth: themeFocused ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
+    borderWidth: genBorderWidth(theme, themeState, themeFocused),
     borderRadius: theme.__hd__.textInput.radii.container,
-    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeState]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
+    borderColor: genBorderColor(theme, themeState, themeFocused, themeFilled)
   });
 });
 var StyledTextInputContainer = index$c(View)(function (_ref10) {
-  var theme = _ref10.theme;
-  return {
+  var theme = _ref10.theme,
+    themeVariant = _ref10.themeVariant,
+    themeState = _ref10.themeState;
+  return _objectSpread2(_objectSpread2(_objectSpread2({
     flexDirection: 'row',
     alignItems: 'center',
-    padding: theme.__hd__.textInput.space.containerPadding,
-    backgroundColor: theme.__hd__.textInput.colors.containerBackground,
+    paddingHorizontal: theme.__hd__.textInput.space.containerHorizontalPadding,
+    paddingVertical: theme.__hd__.textInput.space.containerVerticalPadding,
     borderRadius: theme.__hd__.textInput.radii.container
-  };
+  }, themeVariant === 'text' && {
+    minHeight: theme.__hd__.textInput.sizes.containerMinHeight
+  }), themeState === 'disabled' && {
+    opacity: 0.5
+  }), {}, {
+    gap: theme.space.smallMedium
+  });
 });
-var StyledTextInputAndLabelContainer = index$c(View)(function () {
+// Outer wrapper that owns flex-grow/shrink and provides the positioning context
+// for StyledLabelContainerInsideTextInput (position: absolute).
+var StyledInputContentContainer = index$c(View)(function (_ref11) {
+  var themeHasLabel = _ref11.themeHasLabel;
   return {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'stretch',
     flexGrow: 2,
-    flexShrink: 1
+    flexShrink: 1,
+    alignSelf: 'stretch',
+    justifyContent: themeHasLabel ? 'flex-start' : 'center'
   };
 });
-var StyledErrorAndHelpTextContainer = index$c(View)(function (_ref11) {
-  var theme = _ref11.theme;
+var StyledTextInputAndLabelContainer = index$c(View)(function (_ref12) {
+  var theme = _ref12.theme,
+    themeHasLabel = _ref12.themeHasLabel;
+  return _objectSpread2({
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'stretch'
+  }, themeHasLabel && {
+    paddingTop: theme.__hd__.textInput.space.inputAndLabelContainerPaddingTop
+  });
+});
+var StyledErrorAndHelpTextContainer = index$c(View)(function (_ref13) {
+  var theme = _ref13.theme;
   return {
-    paddingHorizontal: theme.__hd__.textInput.space.errorAndHelpTextContainerHorizontalPadding,
-    minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
+    minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerMinHeight,
     paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop
   };
 });
-var StyledErrorAndMaxLengthContainer = index$c(View)(function (_ref12) {
-  var theme = _ref12.theme;
+var StyledErrorAndMaxLengthContainer = index$c(View)(function (_ref14) {
+  var theme = _ref14.theme;
   return {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -20811,12 +20882,7 @@ var LABEL_ANIMATION_DURATION = 150;
 var renderErrorOrHelpText = function renderErrorOrHelpText(_ref2) {
   var error = _ref2.error,
     helpText = _ref2.helpText;
-  return error ? /*#__PURE__*/React__default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default.createElement(Icon, {
-    testID: "input-error-icon",
-    icon: "circle-info",
-    size: "xsmall",
-    intent: "danger"
-  }), /*#__PURE__*/React__default.createElement(StyledError, {
+  return error ? /*#__PURE__*/React__default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default.createElement(StyledError, {
     testID: "input-error-message"
   }, error)) : !!helpText && /*#__PURE__*/React__default.createElement(StyledHelperText, null, helpText);
 };
@@ -20846,7 +20912,7 @@ var renderSuffix$1 = function renderSuffix(_ref4) {
     suffix = _ref4.suffix;
   var actualSuffix = loading ? 'loading' : suffix;
   return typeof actualSuffix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    intent: state === 'disabled' ? 'disabled-text' : 'text',
+    intent: state === 'disabled' ? 'disabled-text' : 'muted',
     testID: "input-suffix",
     icon: actualSuffix,
     spin: actualSuffix === 'loading',
@@ -20857,10 +20923,10 @@ var renderPrefix$1 = function renderPrefix(_ref5) {
   var state = _ref5.state,
     prefix = _ref5.prefix;
   return typeof prefix === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
-    intent: state === 'disabled' ? 'disabled-text' : 'text',
+    intent: state === 'disabled' ? 'disabled-text' : 'muted',
     testID: "input-prefix",
     icon: prefix,
-    size: "xsmall"
+    size: "medium"
   }) : prefix;
 };
 var renderMaxLengthMessage = function renderMaxLengthMessage(_ref6) {
@@ -20907,13 +20973,10 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     nativeProps = _objectWithoutProperties(_ref8, _excluded$t);
   var displayText = getDisplayText(value, defaultValue);
   var isEmptyValue = displayText.length === 0;
-  var _React$useState = React__default.useState({
-      height: 0,
-      width: 0
-    }),
+  var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputSize = _React$useState2[0],
-    setInputSize = _React$useState2[1];
+    containerHeight = _React$useState2[0],
+    setContainerHeight = _React$useState2[1];
   var _React$useState3 = React__default.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     isFocused = _React$useState4[0],
@@ -20935,18 +20998,14 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
       useNativeDriver: true
     }).start();
   }, [focusAnimation, isEmptyValue, isFocused]);
-  var onLayout = useCallback(function (event) {
-    var _event$nativeEvent$la = event.nativeEvent.layout,
-      height = _event$nativeEvent$la.height,
-      width = _event$nativeEvent$la.width;
-    setInputSize(function (prev) {
-      return _objectSpread2(_objectSpread2({}, prev), {}, {
-        height: height,
-        width: width
-      });
-    });
-  }, []);
   var innerTextInput = React__default.useRef(null);
+  var focusInnerTextInput = useCallback(function () {
+    var _innerTextInput$curre;
+    return (_innerTextInput$curre = innerTextInput.current) === null || _innerTextInput$curre === void 0 ? void 0 : _innerTextInput$curre.focus();
+  }, []);
+  var onContentLayout = useCallback(function (e) {
+    setContainerHeight(e.nativeEvent.layout.height);
+  }, []);
   React__default.useImperativeHandle(ref, function () {
     return {
       // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
@@ -20954,24 +21013,24 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
         return innerTextInput.current;
       },
       focus: function focus() {
-        var _innerTextInput$curre;
-        (_innerTextInput$curre = innerTextInput.current) === null || _innerTextInput$curre === void 0 || _innerTextInput$curre.focus();
+        var _innerTextInput$curre2;
+        (_innerTextInput$curre2 = innerTextInput.current) === null || _innerTextInput$curre2 === void 0 || _innerTextInput$curre2.focus();
       },
       clear: function clear() {
-        var _innerTextInput$curre2;
-        return (_innerTextInput$curre2 = innerTextInput.current) === null || _innerTextInput$curre2 === void 0 ? void 0 : _innerTextInput$curre2.clear();
+        var _innerTextInput$curre3;
+        return (_innerTextInput$curre3 = innerTextInput.current) === null || _innerTextInput$curre3 === void 0 ? void 0 : _innerTextInput$curre3.clear();
       },
       setNativeProps: function setNativeProps(args) {
-        var _innerTextInput$curre3;
-        return (_innerTextInput$curre3 = innerTextInput.current) === null || _innerTextInput$curre3 === void 0 ? void 0 : _innerTextInput$curre3.setNativeProps(args);
+        var _innerTextInput$curre4;
+        return (_innerTextInput$curre4 = innerTextInput.current) === null || _innerTextInput$curre4 === void 0 ? void 0 : _innerTextInput$curre4.setNativeProps(args);
       },
       isFocused: function isFocused() {
-        var _innerTextInput$curre4;
-        return ((_innerTextInput$curre4 = innerTextInput.current) === null || _innerTextInput$curre4 === void 0 ? void 0 : _innerTextInput$curre4.isFocused()) || false;
+        var _innerTextInput$curre5;
+        return ((_innerTextInput$curre5 = innerTextInput.current) === null || _innerTextInput$curre5 === void 0 ? void 0 : _innerTextInput$curre5.isFocused()) || false;
       },
       blur: function blur() {
-        var _innerTextInput$curre5;
-        return (_innerTextInput$curre5 = innerTextInput.current) === null || _innerTextInput$curre5 === void 0 ? void 0 : _innerTextInput$curre5.blur();
+        var _innerTextInput$curre6;
+        return (_innerTextInput$curre6 = innerTextInput.current) === null || _innerTextInput$curre6 === void 0 ? void 0 : _innerTextInput$curre6.blur();
       }
     };
   }, [innerTextInput]);
@@ -20990,26 +21049,28 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     }, [textStyle]),
     borderStyle = _useMemo.borderStyle,
     textStyleWithoutBorderStyle = _useMemo.textStyleWithoutBorderStyle;
+  var readonlyBackground = hexToRgba(theme.__hd__.textInput.colors.readonlyBackground, 0.7);
   var _useMemo2 = useMemo(function () {
       var _flattenTextStyle$bac;
+      var defaultBackground = state === 'readonly' ? readonlyBackground : theme.__hd__.textInput.colors.containerBackground;
       if (!style) {
         return {
-          backgroundColor: theme.__hd__.textInput.colors.containerBackground
+          backgroundColor: defaultBackground
         };
       }
       var flattenTextStyle = StyleSheet$1.flatten(style);
       return {
-        backgroundColor: (_flattenTextStyle$bac = flattenTextStyle.backgroundColor) !== null && _flattenTextStyle$bac !== void 0 ? _flattenTextStyle$bac : theme.__hd__.textInput.colors.containerBackground,
+        backgroundColor: (_flattenTextStyle$bac = flattenTextStyle.backgroundColor) !== null && _flattenTextStyle$bac !== void 0 ? _flattenTextStyle$bac : defaultBackground,
         styleWithoutBackgroundColor: omit(['backgroundColor'], flattenTextStyle)
       };
-    }, [style, theme]),
+    }, [style, theme, state, readonlyBackground]),
     backgroundColor = _useMemo2.backgroundColor,
     styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
   var nativeInputTestIDSuffix = testID ? "-".concat(testID) : '';
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: StyleSheet$1.flatten([{
       backgroundColor: backgroundColor,
-      color: theme.__hd__.textInput.colors.text
+      color: theme.__hd__.textInput.colors.text[state]
     }, textStyleWithoutBorderStyle]),
     testID: "text-input".concat(nativeInputTestIDSuffix),
     accessibilityState: {
@@ -21042,22 +21103,30 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
   });
   return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     style: styleWithoutBackgroundColor,
-    pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
+    pointerEvents: state === 'disabled' || state === 'readonly' || loading ? 'none' : 'auto',
     testID: testID
+  }, /*#__PURE__*/React__default.createElement(Pressable, {
+    onPress: focusInnerTextInput,
+    accessible: false,
+    importantForAccessibility: "no"
   }, /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
-    onLayout: onLayout
+    themeVariant: variant,
+    themeState: state
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
     themeState: state,
+    themeFilled: !isEmptyValue,
     testID: "text-input-border",
     style: [{
       backgroundColor: backgroundColor
     }, borderStyle]
-  }), /*#__PURE__*/React__default.createElement(View, null, renderPrefix$1({
+  }), prefix !== undefined && /*#__PURE__*/React__default.createElement(View, null, renderPrefix$1({
     state: state,
     prefix: prefix
-  })), /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
-    themeHasPrefix: !!prefix,
+  })), /*#__PURE__*/React__default.createElement(StyledInputContentContainer, {
+    themeHasLabel: !!label,
+    onLayout: onContentLayout
+  }, /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: variant,
     pointerEvents: "none",
     style: [{
@@ -21066,7 +21135,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, theme.space.xsmall]
+          outputRange: [variant !== 'textarea' ? Math.max(0, (containerHeight - theme.__hd__.textInput.lineHeights.label) / 2) : theme.__hd__.textInput.space.textareaLabelIdleTranslateY, 0]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -21090,8 +21159,11 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     testID: "input-label-asterisk"
   }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, {
     testID: "input-label-text".concat(nativeInputTestIDSuffix),
-    numberOfLines: 1
-  }, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+    numberOfLines: 1,
+    intent: "muted"
+  }, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, {
+    themeHasLabel: !!label
+  }, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -21100,11 +21172,11 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     },
     theme: theme,
     state: state
-  })), renderSuffix$1({
+  }))), renderSuffix$1({
     state: state,
     loading: loading,
     suffix: suffix
-  })), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
+  }))), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
     error: error,
     helpText: helpText
   }), renderMaxLengthMessage({
@@ -41334,13 +41406,10 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }
     return 'default';
   }, [isFocused, error, isEmptyValue]);
-  var _React$useState = React__default.useState({
-      height: 0,
-      width: 0
-    }),
+  var _React$useState = React__default.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    inputSize = _React$useState2[0],
-    setInputSize = _React$useState2[1];
+    containerHeight = _React$useState2[0],
+    setContainerHeight = _React$useState2[1];
   var focusAnimation = useRef(new Animated.Value(0)).current;
   useEffect(function () {
     Animated.timing(focusAnimation, {
@@ -41351,16 +41420,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
     }).start();
   }, [focusAnimation, isEmptyValue, isFocused]);
   var onLayout = useCallback(function (event) {
-    var _event$nativeEvent$la = event.nativeEvent.layout,
-      height = _event$nativeEvent$la.height,
-      width = _event$nativeEvent$la.width;
-    setInputSize(function (prev) {
-      return _objectSpread2(_objectSpread2({}, prev), {}, {
-        height: height,
-        width: width
-      });
-    });
+    setContainerHeight(event.nativeEvent.layout.height);
   }, []);
+  var backgroundColor = theme.__hd__.textInput.colors.containerBackground;
   var handleEditorFocus = useCallback(function () {
     onFocus === null || onFocus === void 0 || onFocus();
     setIsFocused(true);
@@ -41371,8 +41433,20 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, [onBlur]);
   return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     testID: testID
+  }, /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
+    onLayout: onLayout,
+    themeVariant: "text",
+    themeState: state
+  }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
+    themeState: state,
+    themeFocused: isFocused,
+    themeFilled: !isEmptyValue,
+    style: {
+      backgroundColor: backgroundColor
+    }
+  }), /*#__PURE__*/React__default.createElement(StyledInputContentContainer, {
+    themeHasLabel: !!label
   }, /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
-    themeHasPrefix: false,
     themeVariant: "text",
     pointerEvents: "none",
     testID: "input-label-container",
@@ -41382,7 +41456,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [inputSize.height / 2, theme.space.xsmall]
+          outputRange: [Math.max(0, (containerHeight - theme.__hd__.textInput.lineHeights.label) / 2), theme.__hd__.textInput.space.labelFocusedTranslateY]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -41403,13 +41477,11 @@ var RichTextEditor = function RichTextEditor(_ref) {
     },
     themeState: state
   }, "*"), /*#__PURE__*/React__default.createElement(Typography.Body, {
+    intent: "muted",
     numberOfLines: 1
-  }, label))), /*#__PURE__*/React__default.createElement(StyledTextInputContainer, {
-    onLayout: onLayout
-  }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
-    themeState: state,
-    themeFocused: isFocused
-  }), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, /*#__PURE__*/React__default.createElement(RichTextEditorInput, {
+  }, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, {
+    themeHasLabel: !!label
+  }, /*#__PURE__*/React__default.createElement(RichTextEditorInput, {
     name: name,
     value: value,
     style: [style, {
@@ -41423,12 +41495,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     onBlur: handleEditorBlur,
     onFocus: handleEditorFocus,
     onCursorChange: onCursorChange
-  }))), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default.createElement(Icon, {
-    testID: "input-error-icon",
-    icon: "circle-info",
-    size: "xsmall",
-    intent: "danger"
-  }), /*#__PURE__*/React__default.createElement(StyledError, {
+  })))), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default.createElement(StyledError, {
     testID: "input-error-message"
   }, error)) : !!helpText && /*#__PURE__*/React__default.createElement(StyledHelperText, null, helpText))));
 };
@@ -41666,7 +41733,7 @@ var StyledInput = index$c(TextInput$1)(function (_ref4) {
   return {
     textAlignVertical: 'center',
     fontSize: theme.__hd__.search.fontSizes.text,
-    color: theme.__hd__.textInput.colors.text,
+    color: theme.__hd__.textInput.colors.text["default"],
     alignSelf: 'stretch',
     flexGrow: 1,
     flexShrink: 1,