@hero-design/rn-work-uikit 1.13.3 → 1.13.5

package/es/index.js

@@ -5485,6 +5485,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")
     },
@@ -5493,6 +5495,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")
     }
@@ -7363,33 +7367,41 @@ var getTextInputTheme$1 = 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,
@@ -7406,19 +7418,21 @@ var getTextInputTheme$1 = 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
@@ -7434,19 +7448,21 @@ var getTextInputTheme$1 = 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,
@@ -7697,11 +7713,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
       }
@@ -9049,9 +9067,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,
@@ -9059,10 +9083,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
   };
@@ -9172,10 +9197,10 @@ var Caption = function Caption(_ref) {
 var StyledLabel$2 = 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,
@@ -9185,7 +9210,7 @@ var StyledLabel$2 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
+var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle", "fontWeight", "style", "testID"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -9194,6 +9219,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$M);
@@ -9201,6 +9228,7 @@ var Label = function Label(_ref) {
   var styledText = /*#__PURE__*/React__default.createElement(StyledLabel$2, _extends$1({}, nativeProps, {
     themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
+    themeFontWeight: fontWeight,
     allowFontScaling: allowFontScaling,
     style: style,
     testID: testID
@@ -9261,12 +9289,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'
 };
@@ -9276,12 +9308,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]
   };
@@ -10314,6 +10346,24 @@ var Box = function Box(_ref) {
   }), children);
 };
 
+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$b = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -10323,16 +10373,15 @@ var StyledContainer$b = 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) {
@@ -10367,8 +10416,7 @@ var StyledErrorContainer$2 = index$c(View)(function (_ref5) {
 var StyledError$1 = 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) {
@@ -10390,7 +10438,7 @@ var StyledTextInput$1 = index$c(TextInput$2)(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,
@@ -10398,45 +10446,66 @@ var StyledTextInput$1 = index$c(TextInput$2)(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',
@@ -10474,12 +10543,7 @@ var LABEL_ANIMATION_DURATION$1 = 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$1, {
+  return error ? /*#__PURE__*/React__default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default.createElement(StyledError$1, {
     testID: "input-error-message"
   }, error)) : !!helpText && /*#__PURE__*/React__default.createElement(StyledHelperText$1, null, helpText);
 };
@@ -10509,7 +10573,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',
@@ -10520,10 +10584,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) {
@@ -10570,13 +10634,10 @@ var TextInput$1 = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     nativeProps = _objectWithoutProperties(_ref8, _excluded$G);
   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],
@@ -10598,18 +10659,14 @@ var TextInput$1 = /*#__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
@@ -10617,24 +10674,24 @@ var TextInput$1 = /*#__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]);
@@ -10653,26 +10710,28 @@ var TextInput$1 = /*#__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: {
@@ -10705,22 +10764,30 @@ var TextInput$1 = /*#__PURE__*/forwardRef(function (_ref8, ref) {
   });
   return /*#__PURE__*/React__default.createElement(StyledContainer$b, {
     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: [{
@@ -10729,7 +10796,7 @@ var TextInput$1 = /*#__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({
@@ -10753,8 +10820,11 @@ var TextInput$1 = /*#__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,
@@ -10763,11 +10833,11 @@ var TextInput$1 = /*#__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({
@@ -11444,6 +11514,10 @@ function MultiSelect$1(_ref) {
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
+  var selectSuffix;
+  if (editable && !disabled) {
+    selectSuffix = open ? 'arrow-up' : 'arrow-down';
+  }
   useEffect(function () {
     setSelectingValue(value);
   }, [open, value]);
@@ -11459,7 +11533,7 @@ function MultiSelect$1(_ref) {
   }, /*#__PURE__*/React__default.createElement(TextInputComponent, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
-    suffix: "arrow-down",
+    suffix: selectSuffix,
     multiline: true,
     error: error,
     editable: editable,
@@ -11658,6 +11732,12 @@ var SingleSelect$1 = function SingleSelect(_ref) {
   var onPress = useCallback(function () {
     setOpen(true);
   }, []);
+  var selectSuffix = useMemo(function () {
+    if (editable && !disabled) {
+      return open ? 'arrow-up' : 'arrow-down';
+    }
+    return undefined;
+  }, [editable, disabled, open]);
   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(StyledTouchableOpacity$2, {
@@ -11670,7 +11750,7 @@ var SingleSelect$1 = function SingleSelect(_ref) {
   }, /*#__PURE__*/React__default.createElement(TextInputComponent, _extends$1({}, inputProps, {
     label: label,
     value: renderSelectedValue ? rawValue : displayedValue,
-    suffix: "arrow-down",
+    suffix: selectSuffix,
     multiline: true,
     error: error,
     editable: editable,
@@ -41458,13 +41538,10 @@ var RichTextEditor$1 = 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, {
@@ -41475,16 +41552,9 @@ var RichTextEditor$1 = 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);
@@ -41495,8 +41565,20 @@ var RichTextEditor$1 = function RichTextEditor(_ref) {
   }, [onBlur]);
   return /*#__PURE__*/React__default.createElement(StyledContainer$b, {
     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",
@@ -41506,7 +41588,7 @@ var RichTextEditor$1 = 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({
@@ -41527,13 +41609,11 @@ var RichTextEditor$1 = 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$1, {
+  }, label))), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, {
+    themeHasLabel: !!label
+  }, /*#__PURE__*/React__default.createElement(RichTextEditorInput$1, {
     name: name,
     value: value,
     style: [style, {
@@ -41547,12 +41627,7 @@ var RichTextEditor$1 = 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$1, {
+  })))), /*#__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$1, {
     testID: "input-error-message"
   }, error)) : !!helpText && /*#__PURE__*/React__default.createElement(StyledHelperText$1, null, helpText))));
 };
@@ -41798,7 +41873,7 @@ var StyledInput = index$c(TextInput$2)(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,
@@ -42810,7 +42885,13 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   // Override specific values here as needed
   var colors = _objectSpread2(_objectSpread2({}, baseTextInputTheme.colors), {}, {
     // Example: override specific colors
-    // text: theme.colors.customTextColor,
+    asterisks: {
+      "default": theme.colors.onErrorSurface,
+      error: theme.colors.onErrorSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onErrorSurface
+    },
     borders: {
       "default": theme.colors.secondaryOutline,
       error: theme.colors.onErrorSurface,
@@ -42827,6 +42908,13 @@ var getTextInputTheme = function getTextInputTheme(theme) {
       filled: theme.colors.inactiveOnDefaultGlobalSurface,
       focused: theme.colors.onDefaultGlobalSurface
     },
+    labelsInsideTextInput: {
+      "default": theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onDefaultGlobalSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface
+    },
     maxLengthLabels: {
       "default": theme.colors.onDefaultGlobalSurface,
       error: theme.colors.onErrorSurface,
@@ -42838,22 +42926,20 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   });
   var space = _objectSpread2(_objectSpread2({}, baseTextInputTheme.space), {}, {
     // Example: override specific spacing
-    // containerPadding: theme.space.large,
+    containerPadding: theme.space.medium,
+    errorMarginLeft: theme.space.xsmall,
     inputWrapperMarginVertical: theme.space.small,
     prefixAndInputContainerGap: theme.space.xsmall
   });
   var fonts = _objectSpread2({}, baseTextInputTheme.fonts);
   var fontSizes = _objectSpread2({}, baseTextInputTheme.fontSizes);
-  var borderWidths = _objectSpread2(_objectSpread2({}, baseTextInputTheme.borderWidths), {}, {
-    container: _objectSpread2(_objectSpread2({}, baseTextInputTheme.borderWidths.container), {}, {
-      normal: theme.borderWidths.medium
-    })
-  });
+  var borderWidths = _objectSpread2({}, baseTextInputTheme.borderWidths);
   var radii = _objectSpread2({}, baseTextInputTheme.radii);
   var sizes = _objectSpread2(_objectSpread2({}, baseTextInputTheme.sizes), {}, {
     containerMinHeight: theme.sizes.xxxxlarge,
     errorAndHelpTextContainerHeight: 0,
-    textInputMinHeight: baseTextInputTheme.fontSizes.text + theme.space.small
+    textInputMinHeight: baseTextInputTheme.fontSizes.text + theme.space.small,
+    textareaHeight: theme.sizes['15xlarge']
   });
   var lineHeights = _objectSpread2({}, baseTextInputTheme.lineHeights);
   return {
@@ -43546,7 +43632,7 @@ var InternalTextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: StyleSheet$1.flatten([{
       backgroundColor: backgroundColor,
-      color: theme.__hd__.textInput.colors.text
+      color: theme.__hd__.textInput.colors.text["default"]
     }, textInputStyle]),
     testID: "text-input".concat(nativeInputTestIDSuffix),
     accessibilityState: {