@utilitywarehouse/hearth-react-native 0.34.5 → 0.35.1

package/public/llms/docs/ai-tooling.md

@@ -0,0 +1,188 @@
+# AI Tooling
+
+- [Figma MCP Server](#figma-mcp-server)
+- [llms.txt and markdown docs](#llms-txt-and-markdown-docs)
+- [Agent Skill](#agent-skill)
+- [Hearth React Native MCP Server](#hearth-react-native-mcp-server)
+
+The Hearth React Native AI Tools are intended to help your AI agents use Hearth React Native
+components to build Utility Warehouse UIs. They provide access to APIs,
+component documentation and usage guidelines, so your agent has the context it
+needs to build with Hearth correctly.
+
+If you're building UI from a Figma design, start with Figma's own
+[Figma MCP Server](#figma-mcp-server), for most people building UI, this is
+the first step, since it gives your agent direct access to the design you're
+implementing. Hearth's own AI tooling then supplements it for most use cases,
+filling in the parts of the Hearth React Native API and usage guidance that
+the design alone doesn't capture:
+
+- [llms.txt](https://hearth.prod.uw.systems/react-native/llms.txt) and markdown docs
+- [SKILL.md](https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/SKILL.md)
+- [Hearth MCP Server](https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp)
+
+## Figma MCP Server
+
+If you're implementing a Figma design, this should be the first tool you reach
+for. Figma's [Dev Mode MCP Server](https://developers.figma.com/docs/figma-mcp-server/)
+gives your agent direct access to the design file itself, layout, variables,
+and generated code for a selected frame or component. This is a Figma-provided
+tool, separate from the Hearth React Native MCP Server below.
+
+### If you're using Claude
+
+Utility Warehouse has the [Figma connector](https://claude.com/connectors/figma)
+enabled at an organisation level. It already includes the Figma MCP Server's
+tools, so if you have it connected there's nothing else to set up — just
+prompt Claude with a link to the Figma design you want to build, and it will
+pull in the design context itself.
+
+To check it's connected for you:
+
+1. In Claude, go to **Customize > Connectors**.
+2. Find **Figma** and click **Connect**, authenticating with your Figma account if prompted.
+3. In a conversation, open the **+** menu (or type `/`) in the chat box, then **Connectors**, and toggle **Figma** on. Once it's connected, Claude can also bring it into a conversation on its own when a Figma link is relevant, so you don't have to toggle it every time.
+
+If you're not using Claude, or don't have the connector available, set up the
+Figma MCP Server manually instead.
+
+### Manual setup
+
+Figma recommends the **remote server** for most people, as it supports the
+broadest set of features. Add an entry to your `mcp.json` file:
+
+```json
+{
+  "servers": {
+    "figma": {
+      "url": "https://mcp.figma.com/mcp",
+      "type": "http"
+    }
+  }
+}
+```
+
+See Figma's [remote server installation guide](https://developers.figma.com/docs/figma-mcp-server/remote-server-installation/)
+for the full setup flow, including the OAuth step required to grant the server
+access to your Figma account.
+
+Alternatively, a **local server** runs from the Figma desktop app itself (Dev
+Mode → enable desktop MCP server), which some organisations use instead of the
+remote option:
+
+```json
+{
+  "servers": {
+    "figma-desktop": {
+      "url": "http://127.0.0.1:3845/mcp",
+      "type": "http"
+    }
+  }
+}
+```
+
+See Figma's [local server installation guide](https://developers.figma.com/docs/figma-mcp-server/local-server-installation/)
+for prerequisites and setup.
+
+### Works with Hearth components
+
+Hearth publishes [Figma Code Connect](https://help.figma.com/hc/en-us/articles/23920389749655-Code-Connect)
+mappings for its React Native components. In practice, this means: when the
+Figma frame you're implementing uses a component we've mapped, the Figma MCP
+Server returns real Hearth code, for example `<Button variant="emphasis">`,
+rather than generic markup reconstructed from layer names and styles. You
+don't need to know how these mappings work under the hood, just that a mapped
+component gets you code that's ready to use, with little to no rework needed.
+
+### Supplement it with Hearth's AI tooling
+
+The Figma MCP Server tells your agent what design it's looking at, and, via
+Code Connect, which Hearth component to use. It doesn't know the rest of the
+Hearth React Native API: prop combinations a mapping doesn't cover,
+accessibility guidance, or usage conventions.
+
+For most use cases, that's exactly what the tools below are for. Set up the
+Figma MCP Server alongside the Hearth Agent Skill and/or Hearth MCP Server,
+rather than in place of them, so your agent can confirm the full prop API,
+correct usage, and any guidance the Figma mapping doesn't capture.
+
+## llms.txt and markdown docs
+
+The [llms.txt](https://hearth.prod.uw.systems/react-native/llms.txt) file is a list of
+all Hearth React Native documentation, and each documentation page has a corresponding
+markdown, file for use by AI agents.
+
+This documentation is also included in the Hearth React Native package, so your agent
+can access it locally if you have the package installed. The easiest way to do
+this is via the Hearth React Native Agent Skill.
+
+## Agent Skill
+
+The [Hearth React Native Agent Skill](https://github.com/utilitywarehouse/hearth/blob/main/packages/react-native/SKILL.md)
+is a skill for your AI agent to use when building any React Native UI.
+
+This skill is focused on usage of the Hearth React Native component library, and
+doesn't attempt to cover any other aspects of building a React application, or
+local custom components.
+
+The skill is packaged with the Hearth React Native package, so your agent can access
+it locally if you have the package installed. To ensure your agent has access
+to the skill, you can add an entry to your local `AGENTS.md` or `CLAUDE.md` file.
+
+You can do this by using the `init-ai` tool:
+
+```console
+npx @utilitywarehouse/hearth-react-native init-ai
+```
+
+This will add an entry to your `AGENTS.md` or `CLAUDE.md` file pointing to the
+skill file.
+
+Alternatively, you can add an entry manually to your `AGENTS.md` or `CLAUDE.md`
+file like this:
+
+```markdown
+<!-- @utilitywarehouse/hearth-react — AI skill for component library usage guidance -->
+
+@node_modules/@utilitywarehouse/hearth-react-native/SKILL.md
+```
+
+or if you are using a monorepo with the Hearth React Native package in a subdirectory,
+you can add an entry like this:
+
+```markdown
+<!-- @utilitywarehouse/hearth-react-native — AI skill for component library usage guidance -->
+
+@../../node_modules/@utilitywarehouse/hearth-react-native/SKILL.md
+```
+
+We recommend having `v0.34.5` or later of the Hearth React Native package installed,
+as this version includes the latest updates to the skill.
+
+## Hearth React Native MCP Server
+
+The remote [Hearth React Native MCP Server](https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp),
+built on the [Storybook MCP Server](https://storybook.js.org/docs/ai/mcp/overview#docs),
+provides tools for agents to use Hearth React Native documentation and components.
+
+It is referenced in the Hearth React Native Agent Skill, so your agent can access it
+remotely if you have the skill installed, and the MCP server configured in your
+agent.
+
+To configure your agent to use the MCP server, you can add an entry to your
+configuration file like this:
+
+```json
+{
+  "servers": {
+    "hearth-react-native": {
+      "url": "https://main--68e3ad5c6e80b57678cad6c6.chromatic.com/mcp",
+      "type": "http"
+    }
+  }
+}
+```
+
+This is an example for adding to the VS Code `mcp.json` file, but the
+configuration format may vary depending on your agent. We are in the process of
+adding support for the MCP Server to the organisation's Claude configuration.

package/public/llms/docs/all-components.md

@@ -0,0 +1,3 @@
+# All Components
+
+This page showcases all the components available in the Hearth React Native library.

package/{docs/dark-mode-best-practice.mdx → public/llms/docs/dark-mode-best-practice.md}

@@ -1,17 +1,3 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import SceneBroadbandDark from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-dark.svg';
-import SceneBroadbandLight from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-light.svg';
-import SpotPiggyBankDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-piggy-bank-dark.svg';
-import SpotPiggyBankLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-piggy-bank-light.svg';
-import { ScopedTheme } from 'react-native-unistyles';
-import StorybookLink from '../../../shared/storybook/StorybookLink';
-import { Alert, BodyText, Box, Center, Flex, Heading, Icon } from '../src';
-import { BackToTopButton, NextPrevPage, UsageWrap } from './components';
-
-<Meta title="Guides / Dark Mode Best Practice" />
-<BackToTopButton />
-
 # Dark Mode Best Practice
 
 When designing for dark mode in Hearth React Native, it's important to ensure that your UI remains visually appealing and accessible. Here are some best practices to follow:
@@ -26,9 +12,6 @@ When designing for dark mode in Hearth React Native, it's important to ensure th
 - [`ThemedImage` component](#themedimage-component)
 
 <br />
-<Box my="400">
-  <Alert text="By default, all components adapt to the current themed colour mode. This guide will help you understand how to work with and easily support dark mode in your apps using Hearth React Native." />
-</Box>
 <br />
 <br />
 
@@ -38,6 +21,7 @@ By default Hearth React Native theme is set to light mode. To enable dark mode,
 This will automatically apply the dark mode color palette and styles across your app.
 
 ```tsx
+// Example usage
 import { useEffect } from 'react';
 import { Appearance } from 'react-native';
 import { useColorMode } from '@utilitywarehouse/hearth-react-native';
@@ -64,6 +48,7 @@ const App = () => {
 You can also use the Unistyles runtime to set the theme outside of React components, [read more here](https://www.unistyl.es/v3/guides/theming/#change-theme):
 
 ```tsx
+// Example usage
 import { UnistylesRuntime } from 'react-native-unistyles';
 
 const toggleTheme = () => {
@@ -80,6 +65,7 @@ automatically adapt to both light and dark modes without needing to write custom
 To use the semantic colours, you can access them from the theme object in your styles:
 
 ```tsx
+// Example usage
 import { StyleSheet } from '@utilitywarehouse/hearth-react-native';
 
 const styles = StyleSheet.create(theme => ({
@@ -91,28 +77,8 @@ const styles = StyleSheet.create(theme => ({
 
 You can also use the `useTheme` hook to access the theme colours directly in your components:
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg">
-      <ScopedTheme name="dark">
-        <Box backgroundColor="primary" p="400">
-          <Center>
-            <BodyText>This text adapts to dark mode!</BodyText>
-          </Center>
-        </Box>
-      </ScopedTheme>
-      <ScopedTheme name="light">
-        <Box backgroundColor="primary" p="400">
-          <Center>
-            <BodyText>This text adapts to light mode!</BodyText>
-          </Center>
-        </Box>
-      </ScopedTheme>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useTheme } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -122,7 +88,7 @@ const MyComponent = () => {
 };
 ```
 
-To learn more about the available colours in the Hearth theme, check out the <StorybookLink to="theme-tokens">theme tokens documentation</StorybookLink>.
+To learn more about the available colours in the Hearth theme, check out the theme tokens documentation.
 
 ## Use Semantic Utility Props
 
@@ -131,48 +97,8 @@ These props are designed to work with the theme and will automatically adjust th
 
 For example, instead of setting a background colour directly, you can use the `backgroundColor` or, for text, the `color` prop with a semantic colour value:
 
-<UsageWrap>
-  <Center spacing="lg">
-    <Box>
-      <BodyText weight="semibold" mb="100">
-        {'Light Mode'}
-      </BodyText>
-      <Flex direction="row" spacing="lg">
-        <ScopedTheme name="light">
-          <Box backgroundColor="brand" p="400">
-            <BodyText color="inverted">
-              This branded box and text adapt to light or dark mode!
-            </BodyText>
-          </Box>
-          <Box backgroundColor="secondary" p="400">
-            <BodyText color="primary">This box and text adapt to light or dark mode!</BodyText>
-            <BodyText color="secondary">This secondary text adapt to light or dark mode!</BodyText>
-          </Box>
-        </ScopedTheme>
-      </Flex>
-    </Box>
-    <Box>
-      <BodyText weight="semibold" mb="100">
-        {'Dark Mode'}
-      </BodyText>
-      <Flex direction="row" spacing="lg">
-        <ScopedTheme name="dark">
-          <Box backgroundColor="brand" p="400">
-            <BodyText color="inverted">
-              This branded box and text adapt to light or dark mode!
-            </BodyText>
-          </Box>
-          <Box backgroundColor="secondary" p="400">
-            <BodyText color="primary">This box and text adapt to light or dark mode!</BodyText>
-            <BodyText color="secondary">This secondary text adapt to light or dark mode!</BodyText>
-          </Box>
-        </ScopedTheme>
-      </Flex>
-    </Box>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 <Box backgroundColor="brand" p="400">
   <BodyText color="inverted">This branded box and text adapt to light or dark mode!</BodyText>
 </Box>
@@ -196,24 +122,8 @@ When using icons from the `@utilitywarehouse/hearth-react-native-icons` library,
 by using the `color` prop and the `Icon` component with a semantic colour token (by default the `Icon` will use the `theme.colors.icon.primary`
 colour which adapts to light and dark mode):
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg">
-      <ScopedTheme name="light">
-        <Box p="400" backgroundColor="secondary">
-          <Icon as={SearchMediumIcon} />
-        </Box>
-      </ScopedTheme>
-      <ScopedTheme name="dark">
-        <Box p="400" backgroundColor="secondary">
-          <Icon as={SearchMediumIcon} color="warmWhite0" />
-        </Box>
-      </ScopedTheme>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Icon , useTheme } from '@utilitywarehouse/hearth-react-native';
 import { SearchMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
 
@@ -232,24 +142,8 @@ To learn more about the available icons, check out the [icon library documentati
 When using illustrations from the `@utilitywarehouse/hearth-svg-assets` library, you'll need to import both the light and dark versions
 of the illustration and conditionally render the appropriate one based on the current colour mode.
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg">
-      <ScopedTheme name="light">
-        <Box p="400" backgroundColor="secondary">
-          <SceneBroadbandLight width={200} height={200} />
-        </Box>
-      </ScopedTheme>
-      <ScopedTheme name="dark">
-        <Box p="400" backgroundColor="secondary">
-          <SceneBroadbandDark width={200} height={200} />
-        </Box>
-      </ScopedTheme>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useColorMode } from '@utilitywarehouse/hearth-react-native';
 import SceneBroadbandDark from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-dark.svg';
 import SceneBroadbandLight from '@utilitywarehouse/hearth-svg-assets/lib/scene-broadband-light.svg';
@@ -284,24 +178,8 @@ You can view the available animations in the [Hearth JSON asset library document
 To simplify the process of handling light and dark mode for images, you can create a reusable `ThemedImage` component that takes both light and dark versions of an image as props and automatically renders the correct one based on the current colour mode.
 Here's an example implementation of a `ThemedImage` component:
 
-<UsageWrap>
-  <Center>
-    <Flex direction="row" spacing="lg">
-      <ScopedTheme name="light">
-        <Box p="400" backgroundColor="secondary">
-          <SpotPiggyBankLight width={200} height={200} />
-        </Box>
-      </ScopedTheme>
-      <ScopedTheme name="dark">
-        <Box p="400" backgroundColor="secondary">
-          <SpotPiggyBankDark width={200} height={200} />
-        </Box>
-      </ScopedTheme>
-    </Flex>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import React from 'react';
 import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
 import SpotPiggyBankLight from '@utilitywarehouse/hearth-svg-assets/lib/spot-piggy-bank-light.svg';
@@ -318,11 +196,4 @@ const MyComponent = () => {
 };
 ```
 
-See the full `ThemedImage` docs and implementation in the <StorybookLink to="utility-components-themed-image">`ThemedImage` documentation</StorybookLink>.
-
-<NextPrevPage
-  prevLink="guides-adding-shadows"
-  prevTitle="Adding Shadows"
-  nextLink="primitives-box"
-  nextTitle="Box"
-/>
+See the full `ThemedImage` docs and implementation in the `ThemedImage` documentation.

package/{docs/getting-started.mdx → public/llms/docs/getting-started.md}

@@ -1,9 +1,3 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton, NextPrevPage } from './components';
-
-<Meta title="Getting Started" />
-<BackToTopButton />
-
 # Getting Started
 
 You can just start using the components from the `@utilitywarehouse/hearth-react-native` package.
@@ -11,6 +5,7 @@ Although there are a few components that require a `BottomSheetModalProvider` to
 You should also make sure you're app is wrapped in a `GestureHandlerRootView` from `react-native-gesture-handler`.
 
 ```tsx
+// Example usage
 import {
   Box,
   Alert,
@@ -37,6 +32,7 @@ By default the light colour mode is enabled. If you want to enable dark mode, yo
 use the `useColorMode` hook to toggle between light and dark modes.
 
 ```tsx
+// Example usage
 import {
   useColorMode,
   Box,
@@ -65,10 +61,3 @@ const App: React.FC = () => {
   );
 };
 ```
-
-<NextPrevPage
-  prevLink="introduction"
-  prevTitle="Introduction"
-  nextLink="changelog"
-  nextTitle="Changelog"
-/>

package/{docs/hooks.mdx → public/llms/docs/hooks.md}

@@ -1,9 +1,3 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { BackToTopButton, NextPrevPage } from './components';
-
-<Meta title="Hooks" />
-<BackToTopButton />
-
 # Hooks
 
 Hearth React Native provides a set of powerful hooks that help you build responsive, themeable, and accessible applications. These hooks integrate seamlessly with the Unistyles theming system and provide utilities for responsive design, color mode management, and design token access.
@@ -19,12 +13,14 @@ Hearth React Native provides a set of powerful hooks that help you build respons
 `useTheme` is a custom hook that returns the current theme object with all design tokens and theme values. This is the primary way to access theme values in your components.
 
 ```tsx
+// Example usage
 import { useTheme } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text } from 'react-native';
 import { useTheme } from '@utilitywarehouse/hearth-react-native';
 
@@ -56,6 +52,7 @@ function ThemedComponent() {
 ### Accessing Different Token Categories
 
 ```tsx
+// Example usage
 function ExampleComponent() {
   const theme = useTheme();
 
@@ -110,12 +107,14 @@ function ExampleComponent() {
 `useToken` is a custom hook that resolves specific design tokens from the theme. It provides a convenient way to access individual token values without importing the entire theme.
 
 ```tsx
+// Example usage
 import { useToken } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text } from 'react-native';
 import { useToken } from '@utilitywarehouse/hearth-react-native';
 
@@ -149,12 +148,14 @@ function TokenExample() {
 `useColorMode` is a custom hook that provides access to the current color mode and allows you to programmatically change between light and dark themes.
 
 ```tsx
+// Example usage
 import { useColorMode } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text, TouchableOpacity } from 'react-native';
 import { useColorMode } from '@utilitywarehouse/hearth-react-native';
 
@@ -200,6 +201,7 @@ function ColorModeToggle() {
 ### Conditional Styling Based on Color Mode
 
 ```tsx
+// Example usage
 function AdaptiveComponent() {
   const [colorMode] = useColorMode();
 
@@ -244,12 +246,14 @@ function AdaptiveComponent() {
 `useBreakpointValue` is a custom hook that returns different values based on the current screen breakpoint. It's perfect for creating responsive designs that adapt to different screen sizes.
 
 ```tsx
+// Example usage
 import { useBreakpointValue } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text } from 'react-native';
 import { useBreakpointValue } from '@utilitywarehouse/hearth-react-native';
 
@@ -290,6 +294,7 @@ function ResponsiveLayout() {
 ### Responsive Typography
 
 ```tsx
+// Example usage
 function ResponsiveText() {
   const fontSize = useBreakpointValue({
     default: 16,
@@ -323,6 +328,7 @@ function ResponsiveText() {
 ### Complex Responsive Values
 
 ```tsx
+// Example usage
 function ResponsiveCard() {
   const cardStyle = useBreakpointValue({
     default: {
@@ -369,12 +375,14 @@ function ResponsiveCard() {
 `useMedia` is a custom hook that returns an object with boolean values for each breakpoint, indicating whether the current screen size matches that breakpoint. It's useful for conditional rendering based on screen size.
 
 ```tsx
+// Example usage
 import { useMedia } from '@utilitywarehouse/hearth-react-native';
 ```
 
 ### Basic Usage
 
 ```tsx
+// Example usage
 import { View, Text } from 'react-native';
 import { useMedia } from '@utilitywarehouse/hearth-react-native';
 
@@ -407,6 +415,7 @@ function MediaExample() {
 ### Conditional Components
 
 ```tsx
+// Example usage
 function ConditionalLayout() {
   const media = useMedia();
 
@@ -475,6 +484,7 @@ function ConditionalLayout() {
 ### Responsive Grid
 
 ```tsx
+// Example usage
 function ResponsiveGrid({ items }) {
   const media = useMedia();
 
@@ -517,10 +527,3 @@ function ResponsiveGrid({ items }) {
   );
 }
 ```
-
-<NextPrevPage
-  prevLink="theme-tokens"
-  prevTitle="Theme Tokens"
-  nextLink="layout-components"
-  nextTitle="Layout Components"
-/>

package/{docs/introduction.mdx → public/llms/docs/introduction.md}

@@ -1,16 +1,7 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-import { version } from '../package.json';
-import { Box } from '../src';
-import { BackToTopButton, NextPrevPage } from './components';
-
-<Meta title="Introduction" />
-
-<BackToTopButton />
-
 # Hearth React Native
 
 React Native component library for building UIs at Utility Warehouse.<br/>
-Current version: v{version}
+Current version: v0.35.1
 
 Hearth React Native is a comprehensive design system library for React Native, providing reusable components, consistent styling, and tools to streamline UI development. It is built to enhance productivity and maintain design consistency across projects.
 
@@ -82,6 +73,7 @@ mkdir -p src/assets/fonts && cp ./node_modules/@utilitywarehouse/hearth-fonts/fi
 Next, create or update your `react-native.config.js` file in the root directory and paste the code below inside it:
 
 ```js
+// Example usage
 module.exports = {
   project: {
     ios: {},
@@ -134,6 +126,7 @@ If you are using Expo, you can use the `expo-font` and [`expo-xml-font`](https:/
 Here is an example of how to load the fonts in your `App.tsx` file:
 
 ```tsx
+// Example usage
 import { useFonts } from 'expo-font';
 import App from './src/App';
 
@@ -162,6 +155,7 @@ Follow the [expo-xml-font](https://github.com/Armster15/expo-xml-font) documenta
 You will need to add the following Babel plugin to your `babel.config.js` file:
 
 ```js
+// Example usage
 const unistylesPluginOptions = {
   autoProcessImports: ['@utilitywarehouse/hearth-react-native'],
   autoProcessPaths: ['@utilitywarehouse/hearth-react-native'],
@@ -184,6 +178,7 @@ module.exports = {
 If you are using Jest for testing, you will need to add the following configuration to your `jest.config.js` file:
 
 ```js
+// Example usage
 module.exports = {
   // other Jest configurations...
   setupFiles: [
@@ -197,6 +192,7 @@ module.exports = {
 You'll also need to add the following to your `jest.setup.js` file:
 
 ```js
+// Example usage
 import { StyleSheet, themes, breakpoints } from '@utilitywarehouse/hearth-react-native';
 
 StyleSheet.configure({
@@ -216,5 +212,3 @@ require('react-native-reanimated').setUpTests();
 
 // rest of your setup...
 ```
-
-<NextPrevPage nextLink="getting-started" nextTitle="Getting Started" />