@utilitywarehouse/hearth-react-native 0.32.0 → 0.32.2

package/docs/changelog.mdx

@@ -9,6 +9,90 @@ import { BackToTopButton, NextPrevPage } from './components';
 The changelog for the Hearth React Native library. Here you can find all the changes, improvements, and bug fixes for each version.
 
 
+## 0.32.2
+
+### Patch Changes
+
+- [#1164](https://github.com/utilitywarehouse/hearth/pull/1164) [`c8848d9`](https://github.com/utilitywarehouse/hearth/commit/c8848d9b01611e4c25b9caef7f211b8c623432c4) Thanks [@MichalCiesliczka](https://github.com/MichalCiesliczka)! - 🐛 [FIX]: Badge and Tabs now adapt their height for larger accessibility font sizes.
+
+  When larger text sizes are enabled (for example in iOS accessibility settings),
+  Badge and Tabs no longer clip text within fixed-height layouts. Their containers
+  now grow to fit scaled text while keeping the default visual sizing at standard
+  font settings.
+
+  **Components affected**:
+  - Badge
+  - Tab
+
+  **Developer changes**:
+
+  No code changes are required.
+
+- Updated dependencies [[`e4167f2`](https://github.com/utilitywarehouse/hearth/commit/e4167f27325dacc0cbc1feae456697387162aa77)]:
+  - @utilitywarehouse/hearth-react-native-icons@0.8.1
+
+## 0.32.1
+
+### Patch Changes
+
+- [#1144](https://github.com/utilitywarehouse/hearth/pull/1144) [`85459f2`](https://github.com/utilitywarehouse/hearth/commit/85459f2f4d7dcd8a99685a11dcda070530cee8dc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🐛 [FIX]: Add the missing `highlight` color scheme support across the `Banner` and `Card` components.
+
+## 0.32.0
+
+### Minor Changes
+
+- [#1134](https://github.com/utilitywarehouse/hearth/pull/1134) [`8824186`](https://github.com/utilitywarehouse/hearth/commit/ebccb55afebcbd47508d7992614b2495c7839cc6) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `Roundel` status indicator component.
+
+`Roundel` is a compact status indicator with `success`, `pending`, and `error` variants, intended for inline state cues.
+
+**Components affected**:
+
+- `Roundel`
+
+**Developer changes**:
+
+Import and use `Roundel` from `@utilitywarehouse/hearth-react-native`:
+
+```tsx
+import { Roundel } from '@utilitywarehouse/hearth-react-native';
+
+<Roundel variant="success" />;
+```
+
+- [#1132](https://github.com/utilitywarehouse/hearth/pull/1132) [`8824186`](https://github.com/utilitywarehouse/hearth/commit/882418633ee8c3a11e204329d07363dc411996dc) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add the `Rating` component
+
+  **Components affected**:
+  - `Rating`
+
+  **Developer changes**:
+
+  ```tsx
+  import { Rating } from '@utilitywarehouse/hearth-react-native';
+
+  const MyComponent = () => <Rating value={3} />;
+  ```
+
+- [#1129](https://github.com/utilitywarehouse/hearth/pull/1129) [`ec385a8`](https://github.com/utilitywarehouse/hearth/commit/ec385a8185bfa4ec7f4d5f1366ecc069a98cbba8) Thanks [@jordmccord](https://github.com/jordmccord)! - 🌟 [FEATURE]: Add `StepperInput` for controlled numeric input with increment and decrement buttons.
+
+  `StepperInput` is a new React Native form component for adjusting numeric values with direct text entry and dedicated step controls. It supports min and max bounds, configurable step size, validation and helper text through `FormField`, and an opt-in `focusInputOnStepPress` prop for keyboard-first flows.
+
+  **Components affected**:
+  - `StepperInput`
+
+  **Developer changes**:
+
+  Import and use `StepperInput` from `@utilitywarehouse/hearth-react-native`:
+
+  ```tsx
+  import { StepperInput } from '@utilitywarehouse/hearth-react-native';
+
+  <StepperInput label="Guests" min={1} max={10} value={value} onChangeText={setValue} />;
+  ```
+
+### Patch Changes
+
+- [#1133](https://github.com/utilitywarehouse/hearth/pull/1133) [`5cae98e`](https://github.com/utilitywarehouse/hearth/commit/5cae98e640a708a7d99eaf0395b7b52e71b8e6ec) Thanks [@jordmccord](https://github.com/jordmccord)! - 💅 [ENHANCEMENT]: Add a `defaultHeight` prop to `Textarea` so the initial height can be configured.
+
 ## 0.31.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@utilitywarehouse/hearth-react-native",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "description": "Utility Warehouse React Native UI library",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -33,6 +33,7 @@
     "@storybook/addon-vitest": "^10.2.1",
     "@storybook/react-native-web-vite": "^10.2.1",
     "@types/prismjs": "^1.26.5",
+    "@types/react-dom": "^19.1.6",
     "@types/react": "^19.1.10",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
@@ -41,6 +42,7 @@
     "playwright": "^1.55.1",
     "prismjs": "^1.30.0",
     "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "react-native": "0.80.0",
     "react-native-edge-to-edge": "1.6.1",
     "react-native-gesture-handler": "2.28.0",
@@ -58,9 +60,9 @@
     "vite-plugin-svgr": "^4.5.0",
     "vitest": "^3.2.4",
     "@utilitywarehouse/hearth-fonts": "^0.0.4",
-    "@utilitywarehouse/hearth-react-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-react-native-icons": "^0.8.0",
-    "@utilitywarehouse/hearth-svg-assets": "^0.6.0",
+    "@utilitywarehouse/hearth-react-icons": "^0.8.1",
+    "@utilitywarehouse/hearth-react-native-icons": "^0.8.1",
+    "@utilitywarehouse/hearth-svg-assets": "^0.6.1",
     "@utilitywarehouse/hearth-tokens": "^0.2.4"
   },
   "peerDependencies": {
@@ -79,19 +81,19 @@
     "clean": "rm -rf node_modules rm -rf build .turbo",
     "generateColours": "node ./scripts/generateColours.js",
     "copyTokens": "node ./scripts/copyTokens.js",
-    "copyChangelog": "node ./scripts/copyChangelog.js",
+    "copy:changelog": "node ./scripts/copyChangelog.js",
     "lint:fix": "TIMING=1 eslint --fix .",
     "lint": "TIMING=1 eslint .",
     "build": "tsc",
     "watch": "tsc --watch",
     "figma:create": "figma connect create",
     "figma:publish": "figma connect publish",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest run --config vitest.unit.config.ts",
     "test:storybook": "vitest run --project storybook",
-    "dev": "npm run copyChangelog && storybook dev -p 6006",
+    "dev": "npm run copy:changelog && storybook dev -p 6006",
     "dev:docs": "storybook dev -p 6002 --no-open --docs",
-    "build:storybook": "npm run copyChangelog && storybook build",
-    "build:storybook:docs": "npm run copyChangelog && storybook build --docs",
+    "build:storybook": "npm run copy:changelog && storybook build",
+    "build:storybook:docs": "npm run copy:changelog && storybook build --docs",
     "chromatic": "npx chromatic --project-token=chpt_cce0fb1ebd95d2a --build-script-name build:storybook"
   }
 }

package/src/components/Badge/Badge.tsx

@@ -78,11 +78,11 @@ const styles = StyleSheet.create(theme => ({
       size: {
         sm: {
           paddingVertical: theme.components.badge.sm.paddingVertical,
-          height: theme.components.badge.sm.height,
+          minHeight: theme.components.badge.sm.height,
         },
         md: {
           paddingVertical: theme.components.badge.md.paddingVertical,
-          height: theme.components.badge.md.height,
+          minHeight: theme.components.badge.md.height,
         },
       },
       flatBase: {

package/src/components/Banner/Banner.stories.tsx

@@ -55,6 +55,7 @@ const meta = {
         'insurance',
         'cashback',
         'pig',
+        'highlight',
       ],
     },
     iconContainerVariant: {
@@ -548,6 +549,19 @@ export const ColorSchemes: Story = {
               </Button>
             }
           />
+          <Banner
+            icon={HomeMediumIcon}
+            iconContainerColor="highlight"
+            iconContainerVariant="emphasis"
+            colorScheme="highlight"
+            heading="Highlight Yellow"
+            description="Banner with highlight color scheme."
+            button={
+              <Button size="sm" onPress={() => console.log('Action pressed')}>
+                Action
+              </Button>
+            }
+          />
         </Flex>
       </View>
     );

package/src/components/Card/Card.docs.mdx

@@ -61,23 +61,22 @@ const MyComponent = () => (
 
 ## Props
 
-| Property       | Type                                                                                                                                         | Description                                | Default           |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
-| variant        | `'subtle' \| 'emphasis' `                                                                                                                    | The variant of the card.                   | `'subtle'`        |
-| colorScheme    | `'neutralStrong' \| 'neutralSubtle' \| 'purple' \| 'energy'` <br /> `'broadband' \| 'mobile' \| 'insurance' \| 'cashback' \|` <br /> `'pig'` | The color scheme of the card.              | `'neutralStrong'` |
-| shadowColor    | `'functional' \| 'brand' \| 'energy' \| 'broadband' \| 'mobile' `<br /> `'insurance' \| 'cashback' \| 'pig'`                                 | The shadow color of the card.              | `-`               |
-| noPadding      | `boolean`                                                                                                                                    | Whether or not the card has padding.       | `false`           |
-| selected       | `boolean`                                                                                                                                    | Whether the card is selected.              | `false`           |
-| onPress        | `() => void`                                                                                                                                 | Callback function to be called.            | `-`               |
-| disabled       | `boolean`                                                                                                                                    | Whether the card is disabled.              | `false`           |
-| spacing          | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                           | The space between the content.             | `none`            |
-| alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                  | The align items of the flex container.     | `flex-start`      |
-| justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                     | The justify content of the flex container. | `flex-start`      |
-| flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                       | The wrap of the flex container.            | `nowrap`          |
-| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                     | The direction of the flex container.       | `column`          |
-| gap            | `number`                                                                                                                                     | The gap between the content.               | `0`               |
-| rowGap         | `number`                                                                                                                                     | The row gap between the content.           | `0`               |
-| columnGap      | `number`                                                                                                                                     | The column gap between the content.        | `0`               |
+| Property       | Type                                                                                                                                                        | Description                                | Default           |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------------- |
+| variant        | `'subtle' \| 'emphasis' `                                                                                                                                   | The variant of the card.                   | `'subtle'`        |
+| colorScheme    | `'neutralStrong' \| 'neutralSubtle' \| 'brand' \| 'energy'` <br /> `'broadband' \| 'mobile' \| 'insurance' \| 'cashback' \|` <br /> `'highlight' \| 'pig'` | The color scheme of the card.              | `'neutralStrong'` |
+| shadowColor    | `'functional' \| 'brand' \| 'energy' \| 'broadband' \| 'mobile' `<br /> `'insurance' \| 'cashback' \| 'pig'`                                                | The shadow color of the card.              | `-`               |
+| noPadding      | `boolean`                                                                                                                                                   | Whether or not the card has padding.       | `false`           |
+| onPress        | `() => void`                                                                                                                                                | Callback function to be called.            | `-`               |
+| disabled       | `boolean`                                                                                                                                                   | Whether the card is disabled.              | `false`           |
+| spacing        | `'none' \| '2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`                                                                                          | The space between the content.             | `none`            |
+| alignItems     | `'flex-start' \| 'flex-end' \| `<br />`'center' \| 'stretch' \| 'baseline'`                                                                                 | The align items of the flex container.     | `flex-start`      |
+| justifyContent | `'flex-start' \| 'flex-end' \| 'center' \| 'space-between' \| `<br />` 'space-around' \| 'space-evenly'`                                                    | The justify content of the flex container. | `flex-start`      |
+| flexWrap       | `'wrap' \| 'nowrap' \| 'wrap-reverse'`                                                                                                                      | The wrap of the flex container.            | `nowrap`          |
+| flexDirection  | `'row' \| 'column' \| 'row-reverse' \| 'column-reverse'`                                                                                                    | The direction of the flex container.       | `column`          |
+| gap            | `number`                                                                                                                                                    | The gap between the content.               | `0`               |
+| rowGap         | `number`                                                                                                                                                    | The row gap between the content.           | `0`               |
+| columnGap      | `number`                                                                                                                                                    | The column gap between the content.        | `0`               |
 
 ### `CardPressHandler` Props
 

package/src/components/Card/Card.props.ts

@@ -10,6 +10,7 @@ interface CardProps
     | 'brand'
     | 'energy'
     | 'broadband'
+    | 'highlight'
     | 'mobile'
     | 'insurance'
     | 'cashback'

package/src/components/Card/Card.stories.tsx

@@ -1,5 +1,6 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
+import { Meta, StoryObj } from '@storybook/react-native';
 import { BellMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
+import { ComponentProps } from 'react';
 import { Card, CardAction, CardActions, CardPressHandler } from '.';
 import { VariantTitle } from '../../../docs/components';
 import { BodyText } from '../BodyText';
@@ -7,6 +8,8 @@ import { Button } from '../Button';
 import { Flex } from '../Flex';
 import { Heading } from '../Heading';
 
+type CardStoryProps = ComponentProps<typeof Card>;
+
 const meta = {
   title: 'Stories / Card',
   component: Card,
@@ -31,6 +34,7 @@ const meta = {
         'brand',
         'energy',
         'broadband',
+        'highlight',
         'mobile',
         'insurance',
         'cashback',
@@ -65,7 +69,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Card {...props}>
         <BodyText>{children as string}</BodyText>
@@ -75,7 +79,7 @@ export const Playground: Story = {
 };
 
 export const WithActions: Story = {
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex gap="400">
         <Card
@@ -139,7 +143,7 @@ export const WithOnlyAction: Story = {
   args: {
     variant: 'emphasis',
   },
-  render: ({ ...props }) => {
+  render: ({ ...props }: CardStoryProps) => {
     return (
       <Card {...props} flexDirection="column" alignItems="stretch" spacing="md">
         <CardActions>
@@ -159,7 +163,7 @@ export const Variants: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Subtle - White">
@@ -182,76 +186,86 @@ export const Variants: Story = {
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Purple - Subtle">
+        <VariantTitle title="Brand - Subtle">
           <Card {...props} colorScheme="brand" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Purple - Emphasis">
+        <VariantTitle title="Brand - Emphasis">
           <Card {...props} colorScheme="brand" variant="emphasis">
             <BodyText inverted>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Energy Blue - Subtle">
+        <VariantTitle title="Energy - Subtle">
           <Card {...props} colorScheme="energy" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Energy Blue - Emphasis">
+        <VariantTitle title="Energy - Emphasis">
           <Card {...props} colorScheme="energy" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Broadband Green - Subtle">
+        <VariantTitle title="Broadband - Subtle">
           <Card {...props} colorScheme="broadband" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Broadband Green - Emphasis">
+        <VariantTitle title="Broadband - Emphasis">
           <Card {...props} colorScheme="broadband" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Mobile Rose - Subtle">
+        <VariantTitle title="Mobile - Subtle">
           <Card {...props} colorScheme="mobile" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Mobile Rose - Emphasis">
+        <VariantTitle title="Mobile - Emphasis">
           <Card {...props} colorScheme="mobile" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Insurance Orange - Subtle">
+        <VariantTitle title="Insurance - Subtle">
           <Card {...props} colorScheme="insurance" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Insurance Orange - Emphasis">
+        <VariantTitle title="Insurance - Emphasis">
           <Card {...props} colorScheme="insurance" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Cashback Lilac - Subtle">
+        <VariantTitle title="Cashback - Subtle">
           <Card {...props} colorScheme="cashback" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Cashback Lilac - Emphasis">
+        <VariantTitle title="Cashback - Emphasis">
           <Card {...props} colorScheme="cashback" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Piggy Pink - Subtle">
+        <VariantTitle title="Piggy - Subtle">
           <Card {...props} colorScheme="pig" variant="subtle">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
-        <VariantTitle title="Piggy Pink - Emphasis">
+        <VariantTitle title="Piggy - Emphasis">
           <Card {...props} colorScheme="pig" variant="emphasis">
             <BodyText>{children as string}</BodyText>
           </Card>
         </VariantTitle>
+        <VariantTitle title="Highlight - Subtle">
+          <Card {...props} colorScheme="highlight" variant="subtle">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
+        <VariantTitle title="Highlight - Emphasis">
+          <Card {...props} colorScheme="highlight" variant="emphasis">
+            <BodyText>{children as string}</BodyText>
+          </Card>
+        </VariantTitle>
       </Flex>
     );
   },
@@ -264,7 +278,7 @@ export const WithShadow: Story = {
   parameters: {
     controls: { exclude: ['variant'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Subtle - White - Shadow">
@@ -286,7 +300,7 @@ export const Interactive: Story = {
   parameters: {
     controls: { exclude: ['variant', 'colorScheme'] },
   },
-  render: ({ children, ...props }) => {
+  render: ({ children, ...props }: CardStoryProps) => {
     return (
       <Flex spacing="lg">
         <VariantTitle title="Pressable - Subtle - White">

package/src/components/Card/CardRoot.tsx

@@ -164,6 +164,9 @@ const styles = StyleSheet.create(theme => ({
         pig: {
           borderWidth: theme.components.card.brand.borderWidth,
         },
+        highlight: {
+          borderWidth: theme.components.card.brand.borderWidth,
+        },
       },
       shadowColor: {
         functional: {
@@ -331,6 +334,22 @@ const styles = StyleSheet.create(theme => ({
           borderColor: theme.color.border.strong,
         },
       },
+      {
+        variant: 'subtle',
+        colorScheme: 'highlight',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.subtle,
+          borderColor: theme.color.border.strong,
+        },
+      },
+      {
+        variant: 'emphasis',
+        colorScheme: 'highlight',
+        styles: {
+          backgroundColor: theme.color.surface.highlight.default,
+          borderColor: theme.color.border.strong,
+        },
+      },
     ],
   },
 }));

package/src/components/Icon/Icon.docs.mdx

@@ -34,7 +34,7 @@ Icons are often used to enhance the usability and accessibility of digital produ
 You can either use the React Native components directy from our `@utilitywarehouse/hearth-react-native-icons` package or use the `Icon`
 component from our `@utilitywarehouse/hearth-react-native` package to render the icons with utility props such as `color`.
 
-We reccomend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
+We recommend that you use the `Icon` component to ensure that the icons are styled correctly and consistently across your application.
 The `Icon` component also provides additional functionality such as handling different color modes and sizes as well as automatically applying
 light and dark mode colors from the theme.
 

package/src/components/Input/Input.tsx

@@ -9,7 +9,7 @@ import {
   EyeSmallIcon,
   SearchMediumIcon,
 } from '@utilitywarehouse/hearth-react-native-icons';
-import { useTheme } from '../../hooks';
+import { useFormFieldAccessibility, useTheme } from '../../hooks';
 import { BodyText } from '../BodyText';
 import { FormField, useFormFieldContext } from '../FormField';
 import { Spinner } from '../Spinner';
@@ -75,7 +75,7 @@ const Input = forwardRef<TextInput, InputProps>(
       if (formFieldContext?.setShouldHandleAccessibility) {
         formFieldContext.setShouldHandleAccessibility(true);
       }
-    }, []);
+    }, [formFieldContext]);
 
     const [fieldType, setFieldType] = useState<'password' | 'text'>(
       type === 'password' ? 'password' : 'text'
@@ -88,6 +88,16 @@ const Input = forwardRef<TextInput, InputProps>(
 
     const shouldShowPasswordToggle = type === 'password' && showPasswordToggle;
     const shouldShowClear = clearable && !!(props as InputWithoutChildrenProps)?.value;
+    const { accessibilityHint, accessibilityLabel } = useFormFieldAccessibility({
+      label: inputLabel,
+      helperText: inputHelperText,
+      validText: inputValidText,
+      invalidText: inputInvalidText,
+      required: inputRequired,
+      validationStatus: inputValidationStatus,
+      fallbackLabel: props.accessibilityLabel,
+      fallbackHint: props.accessibilityHint,
+    });
 
     const toggleFieldType = () => {
       setFieldType(fieldType === 'password' ? 'text' : 'password');
@@ -107,37 +117,6 @@ const Input = forwardRef<TextInput, InputProps>(
       return undefined;
     })();
 
-    const getAccessibilityLabel = () => {
-      let accessibilityLabel = '';
-      if (inputLabel) {
-        accessibilityLabel = accessibilityLabel + inputLabel;
-      }
-      if (inputRequired) {
-        accessibilityLabel = accessibilityLabel + ', required';
-      }
-
-      return accessibilityLabel || props.accessibilityLabel;
-    };
-
-    const getAccessibilityHint = () => {
-      let accessibilityHint = '';
-      if (inputHelperText) {
-        accessibilityHint = accessibilityHint + inputHelperText;
-      }
-      if (inputValidationStatus !== 'initial') {
-        if (accessibilityHint.length > 0) {
-          accessibilityHint = accessibilityHint + ', ';
-        }
-        if (inputValidationStatus === 'invalid' && inputInvalidText) {
-          accessibilityHint = accessibilityHint + inputInvalidText;
-        }
-        if (inputValidationStatus === 'valid' && inputValidText) {
-          accessibilityHint = accessibilityHint + inputValidText;
-        }
-      }
-      return accessibilityHint || props.accessibilityHint;
-    };
-
     return (
       <FormField
         label={label}
@@ -188,8 +167,8 @@ const Input = forwardRef<TextInput, InputProps>(
                 inputMode={getInputMode}
                 inBottomSheet={inBottomSheet}
                 {...props}
-                aria-label={getAccessibilityLabel()}
-                accessibilityHint={getAccessibilityHint()}
+                aria-label={accessibilityLabel}
+                accessibilityHint={accessibilityHint}
               />
               {shouldShowClear && (
                 <InputSlot>

package/src/components/List/List.docs.mdx

@@ -32,6 +32,8 @@ import {
 import { BackToTopButton, BadgeList, UsageWrap, ViewFigmaButton } from '../../../docs/components';
 import * as Stories from './List.stories';
 
+import StorybookLink from '../../../../../shared/storybook/StorybookLink';
+
 <Meta title="Components / List" />
 
 <ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=1-163" />
@@ -146,11 +148,11 @@ are ignored, so conditional list items will not affect which item loses the top
 
 #### - `ListItemHeading`
 
-Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
+Has all props of the <StorybookLink to="typography-body-text">`BodyText` component</StorybookLink>.
 
 #### - `ListItemHelperText`
 
-Has all props of the [`BodyText` component](?path=/docs/typography-body-text--docs).
+Has all props of the <StorybookLink to="typography-body-text">`BodyText` component</StorybookLink>.
 
 #### - `ListItemTrailingContent`