@hero-design/rn 8.124.2 → 8.126.0

package/src/components/TextInput/index.tsx

@@ -2,20 +2,20 @@ import React, {
   useMemo,
   forwardRef,
   useRef,
-  useCallback,
   useEffect,
+  useCallback,
 } from 'react';
-import { StyleSheet, Animated, Easing, View } from 'react-native';
+import { StyleSheet, Animated, Easing, Pressable, View } from 'react-native';
 import type {
   TextInputProps as RNTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
-  LayoutChangeEvent,
   TextInput as RNTextInput,
   BlurEvent,
   FocusEvent,
 } from 'react-native';
+import { hexToRgba, omit, pick } from '../../utils/helpers';
 import {
   StyledTextInputContainer,
   StyledLabelInsideTextInput,
@@ -25,6 +25,7 @@ import {
   StyledMaxLengthMessage,
   StyledErrorContainer,
   StyledAsteriskLabelInsideTextInput,
+  StyledInputContentContainer,
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
@@ -37,7 +38,6 @@ import type { Theme } from '../../theme';
 import { useTheme } from '../../theme';
 import type { State } from './StyledTextInput';
 import type { IconName } from '../Icon';
-import { omit, pick } from '../../utils/helpers';
 import Typography from '../Typography';
 
 export type TextInputHandles = Pick<
@@ -187,13 +187,6 @@ export const renderErrorOrHelpText = ({
 }) => {
   return error ? (
     <StyledErrorContainer>
-      <Icon
-        testID="input-error-icon"
-        icon="circle-info"
-        size="xsmall"
-        intent="danger"
-      />
-
       <StyledError testID="input-error-message">{error}</StyledError>
     </StyledErrorContainer>
   ) : (
@@ -252,7 +245,7 @@ export const renderSuffix = ({
   const actualSuffix = loading ? 'loading' : suffix;
   return typeof actualSuffix === 'string' ? (
     <Icon
-      intent={state === 'disabled' ? 'disabled-text' : 'text'}
+      intent={state === 'disabled' ? 'disabled-text' : 'muted'}
       testID="input-suffix"
       icon={actualSuffix}
       spin={actualSuffix === 'loading'}
@@ -272,10 +265,10 @@ export const renderPrefix = ({
 }) => {
   return typeof prefix === 'string' ? (
     <Icon
-      intent={state === 'disabled' ? 'disabled-text' : 'text'}
+      intent={state === 'disabled' ? 'disabled-text' : 'muted'}
       testID="input-prefix"
       icon={prefix}
-      size="xsmall"
+      size="medium"
     />
   ) : (
     prefix
@@ -337,10 +330,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
     const displayText = getDisplayText(value, defaultValue);
     const isEmptyValue = displayText.length === 0;
 
-    const [inputSize, setInputSize] = React.useState<{
-      height: number;
-      width: number;
-    }>({ height: 0, width: 0 });
+    const [containerHeight, setContainerHeight] = React.useState(0);
 
     const [isFocused, setIsFocused] = React.useState(false);
 
@@ -366,12 +356,17 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       }).start();
     }, [focusAnimation, isEmptyValue, isFocused]);
 
-    const onLayout = useCallback((event: LayoutChangeEvent) => {
-      const { height, width } = event.nativeEvent.layout;
-      setInputSize((prev) => ({ ...prev, height, width }));
-    }, []);
-
     const innerTextInput = React.useRef<RNTextInput | undefined | null>(null);
+    const focusInnerTextInput = useCallback(
+      () => innerTextInput.current?.focus(),
+      []
+    );
+    const onContentLayout = useCallback(
+      (e: { nativeEvent: { layout: { height: number } } }) => {
+        setContainerHeight(e.nativeEvent.layout.height);
+      },
+      []
+    );
     React.useImperativeHandle(
       ref,
       () => ({
@@ -404,24 +399,30 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       };
     }, [textStyle]);
 
+    const readonlyBackground = hexToRgba(
+      theme.__hd__.textInput.colors.readonlyBackground,
+      0.7
+    );
+
     const { backgroundColor, styleWithoutBackgroundColor } = useMemo(() => {
+      const defaultBackground =
+        state === 'readonly'
+          ? readonlyBackground
+          : theme.__hd__.textInput.colors.containerBackground;
+
       if (!style) {
-        return {
-          backgroundColor: theme.__hd__.textInput.colors.containerBackground,
-        };
+        return { backgroundColor: defaultBackground };
       }
 
       const flattenTextStyle = StyleSheet.flatten(style);
       return {
-        backgroundColor:
-          flattenTextStyle.backgroundColor ??
-          theme.__hd__.textInput.colors.containerBackground,
+        backgroundColor: flattenTextStyle.backgroundColor ?? defaultBackground,
         styleWithoutBackgroundColor: omit(
           ['backgroundColor'],
           flattenTextStyle
         ),
       };
-    }, [style, theme]);
+    }, [style, theme, state, readonlyBackground]);
 
     const nativeInputTestIDSuffix = testID ? `-${testID}` : '';
 
@@ -429,7 +430,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       style: StyleSheet.flatten([
         {
           backgroundColor,
-          color: theme.__hd__.textInput.colors.text,
+          color: theme.__hd__.textInput.colors.text[state],
         },
         textStyleWithoutBorderStyle,
       ]),
@@ -467,90 +468,112 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       <StyledContainer
         style={styleWithoutBackgroundColor}
         pointerEvents={
-          state === 'disabled' || state === 'readonly' ? 'none' : 'auto'
+          state === 'disabled' || state === 'readonly' || loading
+            ? 'none'
+            : 'auto'
         }
         testID={testID}
       >
-        <StyledTextInputContainer onLayout={onLayout}>
-          <StyledBorderBackDrop
-            themeFocused={isFocused}
-            themeState={state}
-            testID="text-input-border"
-            style={[{ backgroundColor }, borderStyle]}
-          />
-
-          <View>{renderPrefix({ state, prefix })}</View>
-          <StyledLabelContainerInsideTextInput
-            themeHasPrefix={!!prefix}
-            themeVariant={variant}
-            pointerEvents="none"
-            style={[
-              {
-                transformOrigin: 'left top',
-              },
-              {
-                transform: [
+        <Pressable
+          onPress={focusInnerTextInput}
+          accessible={false}
+          importantForAccessibility="no"
+        >
+          <StyledTextInputContainer themeVariant={variant} themeState={state}>
+            <StyledBorderBackDrop
+              themeFocused={isFocused}
+              themeState={state}
+              themeFilled={!isEmptyValue}
+              testID="text-input-border"
+              style={[{ backgroundColor }, borderStyle]}
+            />
+
+            {prefix !== undefined && (
+              <View>{renderPrefix({ state, prefix })}</View>
+            )}
+            <StyledInputContentContainer
+              themeHasLabel={!!label}
+              onLayout={onContentLayout}
+            >
+              <StyledLabelContainerInsideTextInput
+                themeVariant={variant}
+                pointerEvents="none"
+                style={[
                   {
-                    translateY: focusAnimation.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [
-                        variant !== 'textarea'
-                          ? inputSize.height / 2
-                          : theme.space.large,
-                        theme.space.xsmall,
-                      ],
-                    }),
+                    transformOrigin: 'left top',
                   },
                   {
-                    scale: focusAnimation.interpolate({
-                      inputRange: [0, 1],
-                      outputRange: [1, 0.75],
-                    }),
+                    transform: [
+                      {
+                        translateY: focusAnimation.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [
+                            variant !== 'textarea'
+                              ? Math.max(
+                                  0,
+                                  (containerHeight -
+                                    theme.__hd__.textInput.lineHeights.label) /
+                                    2
+                                )
+                              : theme.__hd__.textInput.space
+                                  .textareaLabelIdleTranslateY,
+                            0,
+                          ],
+                        }),
+                      },
+                      {
+                        scale: focusAnimation.interpolate({
+                          inputRange: [0, 1],
+                          outputRange: [1, 0.75],
+                        }),
+                      },
+                    ],
                   },
-                ],
-              },
-            ]}
-          >
-            {!!label && (
-              <StyledLabelInsideTextInput
-                style={{ backgroundColor }}
-                nativeID={accessibilityLabelledBy}
-                testID={`input-label${nativeInputTestIDSuffix}`}
-                themeState={state}
+                ]}
               >
-                {required && (
-                  <StyledAsteriskLabelInsideTextInput
+                {!!label && (
+                  <StyledLabelInsideTextInput
                     style={{ backgroundColor }}
+                    nativeID={accessibilityLabelledBy}
+                    testID={`input-label${nativeInputTestIDSuffix}`}
                     themeState={state}
-                    testID="input-label-asterisk"
                   >
-                    *
-                  </StyledAsteriskLabelInsideTextInput>
+                    {required && (
+                      <StyledAsteriskLabelInsideTextInput
+                        style={{ backgroundColor }}
+                        themeState={state}
+                        testID="input-label-asterisk"
+                      >
+                        *
+                      </StyledAsteriskLabelInsideTextInput>
+                    )}
+                    <Typography.Body
+                      testID={`input-label-text${nativeInputTestIDSuffix}`}
+                      numberOfLines={1}
+                      intent="muted"
+                    >
+                      {label}
+                    </Typography.Body>
+                  </StyledLabelInsideTextInput>
                 )}
-                <Typography.Body
-                  testID={`input-label-text${nativeInputTestIDSuffix}`}
-                  numberOfLines={1}
-                >
-                  {label}
-                </Typography.Body>
-              </StyledLabelInsideTextInput>
-            )}
-          </StyledLabelContainerInsideTextInput>
-
-          <StyledTextInputAndLabelContainer>
-            {renderInput({
-              variant,
-              nativeInputProps,
-              renderInputValue,
-              ref: (rnTextInputRef) => {
-                innerTextInput.current = rnTextInputRef;
-              },
-              theme,
-              state,
-            })}
-          </StyledTextInputAndLabelContainer>
-          {renderSuffix({ state, loading, suffix })}
-        </StyledTextInputContainer>
+              </StyledLabelContainerInsideTextInput>
+
+              <StyledTextInputAndLabelContainer themeHasLabel={!!label}>
+                {renderInput({
+                  variant,
+                  nativeInputProps,
+                  renderInputValue,
+                  ref: (rnTextInputRef) => {
+                    innerTextInput.current = rnTextInputRef;
+                  },
+                  theme,
+                  state,
+                })}
+              </StyledTextInputAndLabelContainer>
+            </StyledInputContentContainer>
+            {renderSuffix({ state, loading, suffix })}
+          </StyledTextInputContainer>
+        </Pressable>
         <StyledErrorAndHelpTextContainer>
           <StyledErrorAndMaxLengthContainer>
             {renderErrorOrHelpText({ error, helpText })}

package/src/components/Typography/Body/StyledBody.tsx

@@ -2,12 +2,20 @@ import styled from '@emotion/native';
 import { Text } from 'react-native';
 import type { TypographyColorIntent } from '../types';
 
-type ThemeVariant = 'small' | 'small-bold' | 'regular' | 'regular-bold';
-type FontWeights = 'regular' | 'semiBold';
+type ThemeVariant =
+  | 'small'
+  | 'small-bold'
+  | 'small-medium'
+  | 'regular'
+  | 'regular-bold'
+  | 'regular-medium';
+type FontWeights = 'regular' | 'medium' | 'semiBold';
 
 const FONTWEIGHT_MAP: Record<ThemeVariant, FontWeights> = {
   regular: 'regular',
   small: 'regular',
+  'regular-medium': 'medium',
+  'small-medium': 'medium',
   'regular-bold': 'semiBold',
   'small-bold': 'semiBold',
 } as const;
@@ -16,6 +24,8 @@ type FontSizes = 'regular' | 'small';
 const FONTSIZE_MAP: Record<ThemeVariant, FontSizes> = {
   regular: 'regular',
   small: 'small',
+  'regular-medium': 'regular',
+  'small-medium': 'small',
   'regular-bold': 'regular',
   'small-bold': 'small',
 } as const;
@@ -25,10 +35,10 @@ const StyledBody = styled(Text)<{
   themeVariant: ThemeVariant;
   themeIsItalic?: boolean;
 }>(({ themeIntent, theme, themeTypeface, themeVariant, themeIsItalic }) => {
-  const baseFontWeight = FONTWEIGHT_MAP[themeVariant];
+  const fontWeight = FONTWEIGHT_MAP[themeVariant];
   const fontFamily = themeIsItalic
-    ? theme.__hd__.typography.fonts[themeTypeface][`${baseFontWeight}Italic`]
-    : theme.__hd__.typography.fonts[themeTypeface][baseFontWeight];
+    ? theme.__hd__.typography.fonts[themeTypeface][`${fontWeight}Italic`]
+    : theme.__hd__.typography.fonts[themeTypeface][fontWeight];
 
   return {
     fontSize:
@@ -40,9 +50,7 @@ const StyledBody = styled(Text)<{
         FONTSIZE_MAP[themeVariant]
       ],
     letterSpacing:
-      theme.__hd__.typography.letterSpacings.body[themeTypeface][
-        FONTWEIGHT_MAP[themeVariant]
-      ],
+      theme.__hd__.typography.letterSpacings.body[themeTypeface][fontWeight],
     fontFamily,
     color: theme.__hd__.typography.colors[themeIntent],
   };

package/src/components/Typography/Body/index.tsx

@@ -31,12 +31,21 @@ export interface BodyProps extends NativeTextProps {
    * The typeface to render the text in:
    * - `neutral`: The default typeface for the platform.
    * - `playful`: To visualise a playful content.
+   *
+   * Note: `regular-medium` and `small-medium` variants are only available with the `neutral` typeface.
    */
   typeface?: 'neutral' | 'playful';
   /**
-   * size variant of the text.
-   * */
-  variant?: 'regular' | 'regular-bold' | 'small' | 'small-bold';
+   * Size and weight variant of the text.
+   * Medium variants (`regular-medium`, `small-medium`) are available with the `neutral` typeface only.
+   */
+  variant?:
+    | 'regular'
+    | 'regular-medium'
+    | 'regular-bold'
+    | 'small'
+    | 'small-medium'
+    | 'small-bold';
   /**
    * Font style to apply to the text.
    */

package/src/components/Typography/Caption/StyledCaption.tsx

@@ -3,8 +3,14 @@ import styled from '@emotion/native';
 import type { TypographyColorIntent } from '../types';
 import { FONTWEIGHT_MAP } from '../types';
 
+const LETTER_SPACING_MAP: Record<'regular' | 'medium' | 'semi-bold', number> = {
+  regular: 0.36,
+  medium: 0.3,
+  'semi-bold': 0.24,
+} as const;
+
 const StyledCaption = styled(Text)<{
-  themeFontWeight: 'regular' | 'semi-bold';
+  themeFontWeight: 'regular' | 'medium' | 'semi-bold';
   themeIntent: TypographyColorIntent;
   themeIsItalic?: boolean;
 }>(({ themeFontWeight, themeIntent, theme, themeIsItalic }) => {
@@ -13,10 +19,12 @@ const StyledCaption = styled(Text)<{
     ? theme.__hd__.typography.fonts.neutral[`${baseFontWeight}Italic`]
     : theme.__hd__.typography.fonts.neutral[baseFontWeight];
 
+  const 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,
     color: theme.__hd__.typography.colors[themeIntent],
     fontFamily,
   };

package/src/components/Typography/Caption/index.tsx

@@ -18,7 +18,7 @@ export interface CaptionProps extends NativeTextProps {
   /**
    * Font weight of the text.
    */
-  fontWeight?: 'regular' | 'semi-bold';
+  fontWeight?: 'regular' | 'medium' | 'semi-bold';
   /**
    * Visual intent color to apply to the text.
    */

package/src/components/Typography/Label/StyledLabel.tsx

@@ -5,12 +5,11 @@ import type { TypographyColorIntent } from '../types';
 const StyledLabel = styled(Text)<{
   themeIntent: TypographyColorIntent;
   themeIsItalic?: boolean;
-}>(({ themeIntent, theme, themeIsItalic }) => {
-  // For Label, we assume 'regular' weight for base font family
-  const baseFontWeight = 'regular';
+  themeFontWeight?: 'regular' | 'medium';
+}>(({ themeIntent, theme, themeIsItalic, themeFontWeight = 'regular' }) => {
   const fontFamily = themeIsItalic
-    ? theme.__hd__.typography.fonts.neutral[`${baseFontWeight}Italic`]
-    : theme.__hd__.typography.fonts.neutral[baseFontWeight];
+    ? theme.__hd__.typography.fonts.neutral[`${themeFontWeight}Italic`]
+    : theme.__hd__.typography.fonts.neutral[themeFontWeight];
 
   return {
     fontSize: theme.__hd__.typography.fontSizes.label,

package/src/components/Typography/Label/index.tsx

@@ -31,6 +31,11 @@ export interface LabelProps extends NativeTextProps {
    * Font style to apply to the text.
    */
   fontStyle?: 'normal' | 'italic';
+  /**
+   * Font weight. Only `'medium'` (500) is available in addition to the default `'regular'` (400).
+   * Medium weight is supported for the neutral typeface only.
+   */
+  fontWeight?: 'regular' | 'medium';
 }
 
 const Label = ({
@@ -38,6 +43,7 @@ const Label = ({
   intent = 'body',
   allowFontScaling = false,
   fontStyle = 'normal',
+  fontWeight = 'regular',
   style,
   testID,
   ...nativeProps
@@ -49,6 +55,7 @@ const Label = ({
       {...nativeProps}
       themeIntent={isAi ? 'body' : intent}
       themeIsItalic={fontStyle === 'italic'}
+      themeFontWeight={fontWeight}
       allowFontScaling={allowFontScaling}
       style={style}
       testID={testID}

package/src/components/Typography/types.ts

@@ -1,6 +1,7 @@
 export const FONTWEIGHT_MAP = {
   light: 'light',
   regular: 'regular',
+  medium: 'medium',
   'semi-bold': 'semiBold',
 } as const;
 

package/src/theme/components/badge.ts

@@ -9,6 +9,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     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,
@@ -19,6 +20,7 @@ const getBadgeTheme = (theme: GlobalTheme) => {
       success: theme.colors.successSurface,
       warning: theme.colors.warningSurface,
       archived: theme.colors.archivedSurface,
+      neutral: theme.colors.neutralGlobalSurface,
     },
     stringText: {
       primary: theme.colors.primary,
@@ -27,12 +29,13 @@ const getBadgeTheme = (theme: GlobalTheme) => {
       success: theme.colors.onSuccessSurface,
       warning: theme.colors.onWarningSurface,
       archived: theme.colors.onArchivedSurface,
+      neutral: theme.colors.onDefaultGlobalSurface,
     },
   };
 
   const fonts = {
-    medium: theme.fonts.neutral.regular,
-    small: theme.fonts.neutral.semiBold,
+    medium: theme.fonts.neutral.medium,
+    small: theme.fonts.neutral.medium,
   };
 
   const fontSizes = {

package/src/theme/components/textInput.ts

@@ -1,4 +1,5 @@
 import type { GlobalTheme } from '../global';
+import { scale } from '../../utils/scale';
 
 const getTextInputTheme = (theme: GlobalTheme) => {
   const colors = {
@@ -7,33 +8,41 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     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,
@@ -51,19 +60,21 @@ const getTextInputTheme = (theme: GlobalTheme) => {
   };
 
   const 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,
+    labelInsideTextInputMarginTop: 0,
     errorAndHelpTextContainerPaddingTop: theme.space.xxsmall,
+    inputAndLabelContainerPaddingTop: theme.lineHeights.medium,
+    labelFocusedTranslateY: theme.space.xsmall * 2,
+    textareaLabelIdleTranslateY: theme.space.large,
   };
 
   const fonts = {
@@ -82,7 +93,7 @@ const getTextInputTheme = (theme: GlobalTheme) => {
   const borderWidths = {
     container: {
       normal: theme.borderWidths.base,
-      focused: theme.borderWidths.medium,
+      focused: theme.borderWidths.base,
     },
   };
 
@@ -91,13 +102,15 @@ const getTextInputTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    errorAndHelpTextContainerHeight: theme.sizes.medium,
-    textareaHeight: theme.sizes['15xlarge'],
+    errorAndHelpTextContainerMinHeight: theme.space.large,
+    containerMinHeight: scale(58),
+    textareaHeight: scale(120),
     textInputMaxHeight: theme.sizes['15xlarge'],
   };
 
   const lineHeights = {
     topLabel: theme.lineHeights.large / 2,
+    label: theme.lineHeights.large,
   };
 
   return {

package/src/theme/components/typography.ts

@@ -125,11 +125,13 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     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,
       },