@hero-design/rn 8.124.2 → 8.126.0

package/src/theme/global/typography.ts

@@ -3,9 +3,11 @@ import { scale } from '../../utils/scale';
 interface FontWeights {
   light: string;
   regular: string;
+  medium: string;
   semiBold: string;
   lightItalic: string;
   regularItalic: string;
+  mediumItalic: string;
   semiBoldItalic: string;
 }
 
@@ -47,6 +49,8 @@ const getFonts = ({
     lightItalic: `${neutral}-LightItalic`,
     regular: `${neutral}-Regular`,
     regularItalic: `${neutral}-RegularItalic`,
+    medium: `${neutral}-Medium`,
+    mediumItalic: `${neutral}-MediumItalic`,
     semiBold: `${neutral}-SemiBold`,
     semiBoldItalic: `${neutral}-SemiBoldItalic`,
   },
@@ -55,6 +59,8 @@ const getFonts = ({
     lightItalic: `${playful}-LightItalic`,
     regular: `${playful}-Regular`,
     regularItalic: `${playful}-RegularItalic`,
+    medium: `${playful}-Regular`,
+    mediumItalic: `${playful}-RegularItalic`,
     semiBold: `${playful}-Medium`,
     semiBoldItalic: `${playful}-MediumItalic`,
   },

package/types/components/Badge/Status.d.ts

@@ -9,7 +9,7 @@ export interface StatusProps extends ViewProps {
     /**
      * Visual intent color to apply to Status Badge.
      */
-    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'primary';
+    intent?: 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'primary' | 'neutral';
     /**
      * Additional style.
      */

package/types/components/Badge/StyledBadge.d.ts

@@ -1,5 +1,5 @@
 import { Animated, View } from 'react-native';
-type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'neutral';
 type ThemePadding = 'narrowContent' | 'wideContent';
 type ThemeSize = 'medium' | 'small';
 type ThemeVariant = 'filled' | 'outlined';

package/types/components/Badge/types.d.ts

@@ -12,7 +12,7 @@ interface BaseBadgeProps extends React.ComponentProps<typeof Animated.View> {
     /**
      * Visual intent color to apply to Badge.
      */
-    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+    intent?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived' | 'neutral';
     /**
      * Additional style.
      */

package/types/components/TextInput/StyledTextInput.d.ts

@@ -1,21 +1,21 @@
 import { TextInput, View, Animated } from 'react-native';
+import type { Theme } from '@emotion/react';
 export type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
 type Variant = 'text' | 'textarea';
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledLabelContainerInsideTextInput: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 } & {
     themeVariant: Variant;
-    themeHasPrefix: boolean;
 }, {}, {}>;
 declare const StyledLabelInsideTextInput: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 } & {
     themeState: State;
@@ -23,30 +23,30 @@ declare const StyledLabelInsideTextInput: import("@emotion/native").StyledCompon
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledAsteriskLabelInsideTextInput: import("@emotion/native").StyledComponent<import("../..").BodyProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 } & {
     themeState: State;
 }, {}, {}>;
 declare const StyledErrorContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledError: import("@emotion/native").StyledComponent<import("../..").CaptionProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 }, {}, {}>;
 declare const StyledMaxLengthMessage: import("@emotion/native").StyledComponent<import("../..").CaptionProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 } & {
     themeState: State;
 }, {}, {}>;
 declare const StyledHelperText: ({ children, fontWeight, intent, allowFontScaling, fontStyle, style, testID, ...nativeProps }: import("../..").CaptionProps) => import("react").JSX.Element;
 declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 } & {
     themeVariant: Variant;
@@ -54,36 +54,50 @@ declare const StyledTextInput: import("@emotion/native").StyledComponent<import(
     ref?: import("react").Ref<TextInput> | undefined;
 }>;
 declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 } & {
     themeState: State;
     themeFocused: boolean;
+    themeFilled: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledTextInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
+} & {
+    themeVariant: Variant;
+    themeState: State;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledInputContentContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: Theme;
+    as?: React.ElementType;
+} & {
+    themeHasLabel: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledTextInputAndLabelContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
+} & {
+    themeHasLabel: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledErrorAndHelpTextContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
 declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
+    theme?: Theme;
     as?: React.ElementType;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledTextInputContainer, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };
+export { StyledTextInputContainer, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledInputContentContainer, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };

package/types/components/Typography/Body/StyledBody.d.ts

@@ -1,6 +1,6 @@
 import { Text } from 'react-native';
 import type { TypographyColorIntent } from '../types';
-type ThemeVariant = 'small' | 'small-bold' | 'regular' | 'regular-bold';
+type ThemeVariant = 'small' | 'small-bold' | 'small-medium' | 'regular' | 'regular-bold' | 'regular-medium';
 declare const StyledBody: import("@emotion/native").StyledComponent<import("react-native").TextProps & {
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;

package/types/components/Typography/Body/index.d.ts

@@ -23,12 +23,15 @@ 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/types/components/Typography/Caption/StyledCaption.d.ts

@@ -4,7 +4,7 @@ declare const StyledCaption: import("@emotion/native").StyledComponent<import("r
     theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
-    themeFontWeight: "regular" | "semi-bold";
+    themeFontWeight: "regular" | "medium" | "semi-bold";
     themeIntent: TypographyColorIntent;
     themeIsItalic?: boolean;
 }, {}, {

package/types/components/Typography/Caption/index.d.ts

@@ -10,7 +10,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/types/components/Typography/Label/StyledLabel.d.ts

@@ -6,6 +6,7 @@ declare const StyledLabel: import("@emotion/native").StyledComponent<import("rea
 } & {
     themeIntent: TypographyColorIntent;
     themeIsItalic?: boolean;
+    themeFontWeight?: "regular" | "medium";
 }, {}, {
     ref?: import("react").Ref<Text> | undefined;
 }>;

package/types/components/Typography/Label/index.d.ts

@@ -23,6 +23,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';
 }
-declare const Label: ({ children, intent, allowFontScaling, fontStyle, style, testID, ...nativeProps }: LabelProps) => React.JSX.Element;
+declare const Label: ({ children, intent, allowFontScaling, fontStyle, fontWeight, style, testID, ...nativeProps }: LabelProps) => React.JSX.Element;
 export default Label;

package/types/components/Typography/types.d.ts

@@ -1,6 +1,7 @@
 export declare const FONTWEIGHT_MAP: {
     readonly light: "light";
     readonly regular: "regular";
+    readonly medium: "medium";
     readonly 'semi-bold': "semiBold";
 };
 export type TypographyColorIntent = 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted' | 'archived' | 'disabled' | 'muted' | 'inactive';

package/types/theme/components/badge.d.ts

@@ -7,6 +7,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
         success: string;
         warning: string;
         archived: string;
+        neutral: string;
         text: string;
         border: string;
         countText: string;
@@ -17,6 +18,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
             success: string;
             warning: string;
             archived: string;
+            neutral: string;
         };
         stringText: {
             primary: string;
@@ -25,6 +27,7 @@ declare const getBadgeTheme: (theme: GlobalTheme) => {
             success: string;
             warning: string;
             archived: string;
+            neutral: string;
         };
     };
     fonts: {

package/types/theme/components/textInput.d.ts

@@ -11,13 +11,20 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
             filled: string;
         };
         error: string;
-        text: string;
+        text: {
+            default: string;
+            filled: string;
+            error: string;
+            readonly: string;
+            disabled: string;
+        };
         borders: {
             default: string;
             error: string;
             disabled: string;
             readonly: string;
             filled: string;
+            focused: string;
         };
         labels: {
             default: string;
@@ -33,6 +40,7 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
             readonly: string;
             filled: string;
         };
+        readonlyBackground: string;
         maxLengthLabels: {
             default: string;
             error: string;
@@ -49,7 +57,8 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         };
     };
     space: {
-        containerPadding: number;
+        containerHorizontalPadding: number;
+        containerVerticalPadding: number;
         labelLeft: number;
         labelTop: number;
         labelPaddingBottom: number;
@@ -57,11 +66,12 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         inputHorizontalMargin: number;
         errorContainerMarginRight: number;
         errorAndHelpTextContainerMarginTop: number;
-        errorMarginLeft: number;
-        errorAndHelpTextContainerHorizontalPadding: number;
         containerMarginTop: number;
         labelInsideTextInputMarginTop: number;
         errorAndHelpTextContainerPaddingTop: number;
+        inputAndLabelContainerPaddingTop: number;
+        labelFocusedTranslateY: number;
+        textareaLabelIdleTranslateY: number;
     };
     fonts: {
         text: string;
@@ -84,12 +94,14 @@ declare const getTextInputTheme: (theme: GlobalTheme) => {
         container: number;
     };
     sizes: {
-        errorAndHelpTextContainerHeight: number;
+        errorAndHelpTextContainerMinHeight: number;
+        containerMinHeight: number;
         textareaHeight: number;
         textInputMaxHeight: number;
     };
     lineHeights: {
         topLabel: number;
+        label: number;
     };
 };
 export default getTextInputTheme;

package/types/theme/components/typography.d.ts

@@ -122,11 +122,13 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         body: {
             neutral: {
                 semiBold: number;
+                medium: number;
                 regular: number;
                 small: number;
             };
             playful: {
                 semiBold: number;
+                medium: number;
                 regular: number;
                 small: number;
             };

package/types/theme/global/typography.d.ts

@@ -1,9 +1,11 @@
 interface FontWeights {
     light: string;
     regular: string;
+    medium: string;
     semiBold: string;
     lightItalic: string;
     regularItalic: string;
+    mediumItalic: string;
     semiBoldItalic: string;
 }
 interface Fonts {