@utilitywarehouse/hearth-react 0.28.7 → 0.29.1

package/public/llms/docs/migrating.md

@@ -0,0 +1,302 @@
+# Migrating from Web UI
+
+- [Components](#components)
+  - [Stack](#stack)
+  - [Grid](#grid)
+  - [Spacer](#spacer)
+  - [CheckboxGridGroup and RadioGridGroup](#checkboxgridgroup-and-radiogridgroup)
+  - [Typography](#typography)
+  - [Button](#button)
+  - [Link](#link)
+  - [Badge](#badge)
+  - [Inputs](#inputs)
+- [Polymorphism](#polymorphism)
+- [Styling](#styling)
+  - [Interoperability](#interoperability)
+  - [ThemeProvider](#themeprovider)
+  - [Portals](#portals)
+  - [The sx prop and styled method API](#the-sx-prop-and-styled-method-api)
+  - [Tokens](#tokens)
+  - [Responsive props](#responsive-props)
+  - [Common props](#common-props)
+  - [Contextual colours](#contextual-colours)
+
+### Stack
+
+This component from Web UI has not been implemented in **Hearth React**. We
+felt it was now redundant with what is available in modern CSS, and that the
+`Flex` component meets all the needs we have for stacked and inline layouts.
+
+```tsx
+<Flex direction="column" gap="400" alignItems="start">
+  {...}
+</Flex>
+```
+
+### Grid
+
+This component is not the same as the `Grid` component in Web UI. The previous
+version of this built on the Material UI `Grid` component, which used `flexbox`
+under the hood. The **Hearth React** `Grid` component is based on CSS Grid,
+providing useful shortcuts to building grid layouts.
+
+Please see the `Grid` component docs for further details about its usage.
+
+```tsx
+<Grid
+  defaultResponsiveColumns // columns={{ mobile: '4', tablet: '8', desktop: '12' }}
+  width={{ mobile: '360px', tablet: '744px', desktop: '1096px' }}
+  padding={{ mobile: '200', tablet: '400' }}
+  gap="200"
+>
+  <Placeholder gridColumnSpan="4" padding="400" />
+  <Placeholder gridColumnSpan="4" padding="400" />
+  <Placeholder gridColumnSpan={{ mobile: '4', tablet: '8', desktop: '4' }} padding="400" />
+</Grid>
+```
+
+### Spacer
+
+This component has not been brought over from Web UI. There was concern that it
+was being unnecessarily overused. If you really need to implement something
+similar you could do so using the `Box` component, however we recommend using
+the `Flex` and `Grid` layout primitives instead.
+
+### CheckboxGridGroup and RadioGridGroup
+
+These components are not currently available in **Hearth React**. At this time
+we don't believe the new designs require any layout beyond what you can achieve
+with the `CheckboxGroup` and `RadioGroup` components. If you need to you can
+compose the `RadioGroup` and `CheckboxGroup` components with the `Grid`
+component.
+
+Please discuss this with your designer, or reach out to us, so that we can
+ensure this is the correct usage for the UI.
+
+```tsx
+<RadioGroup label="Grid layout">
+  <Grid columns="3" gap="150">
+    <RadioTile value="1" label="One" />
+    <RadioTile value="2" label="Two" />
+    <RadioTile value="3" label="Three" />
+    <RadioTile value="4" label="Four" />
+    <RadioTile value="5" label="Five" />
+    <RadioTile value="6" label="Six" />
+  </Grid>
+</RadioGroup>
+```
+
+### Typography
+
+We still have the `Heading` component, however the props have significantly changed.
+There is no longer a `variant` prop, instead we have a `size` prop which
+determines the font size of the text. This prop is not responsive as any needed
+responsiveness is handled internally. There is also no `color` prop as this
+shouldn't be needed.
+
+The `Text` component has been replaced with the `BodyText` component. Again the
+previous `variant` prop has been replaced with a `size` prop.
+
+There is also an additional `DetailText` component, which renders the monospace font.
+
+The other typography components; `Em`, `Strong`, `Label` and `HelperText` are
+mostly the same, with an additional `ValidationText` component.
+
+Please see individual component documentation for details.
+
+### Button
+
+The `Button` component has the same variants as before; `solid`, `outline` &
+`ghost`, with an additional `emphasis` variant. The `colorSchemes` are more
+restricted than before.
+
+### Link
+
+There is no longer a `size` prop on the `Link` component, and the `TextLink`
+component has been replaced with the `InlineLink` component.
+
+### Badge
+
+The `Badge` variants have changed from `soft`, `strong` & `outline` to `solid`
+& `outline`, and the `colorScheme` values have changed to reflect the new
+brand. The `bottomRadiusZero` prop is now called `flatBase`.
+
+### Inputs
+
+There is no longer a `TextField` component, and it's replacements have a completely updated API. We currently have the following inputs:
+
+- `TextInput`
+- `TextArea`
+- `PasswordInput`
+- `SearchInput`
+- `CurrencyInput`
+
+There are plans to add further inputs, such as a `DateInput` and
+`ValidationInput`. Please refer to the specific component documentation pages
+for more in depth usage and API information.
+
+## Polymorphism
+
+We are not attempting to recreate the polymorphism of the Material UI
+`component` prop. This is tricky, and comes with unnecessary overhead.
+
+Some components will have an `as` prop, which works similarly to the
+`component` prop, but with a very specific set of elements it can be set to.
+
+We also include the `asChild` prop where it makes sense, so that you can render
+other elements and have the ability to pass appropriate props without the
+problems inherent in the previous approach.
+
+```tsx
+// render a span element instead of a div
+<Box as="span" />
+
+[...]
+
+// render a section element, with token based padding applied
+<Flex asChild padding="400">
+  <section>{...}</section>
+</Flex>
+
+[...]
+
+// render a link that is visually a button, applying element specific props to each element
+<Button asChild onClick={handleClick}>
+  <a href="https://uw.co.uk/services">View UW services</a>
+</Button>
+```
+
+You can also use `asChild` as a way of applying small styling changes to
+components that don't support specific style props.
+
+```tsx
+<Box asChild width="100%" maxWidth="680px">
+  <Alert colorScheme="danger">
+    {...}
+  </Alert>
+</Box>
+```
+
+## Styling
+
+One of the main aims of the new approach taken with **Hearth React** was to not
+prescribe the CSS-in-JS styling solution that was used with Material UI. We
+want the components to _"get out of the way"_, and for teams to be able to
+decide their own styling solution.
+
+Components do still have styling props available on them, mostly based on the
+new, more extensive, design tokens. However these are implemented using CSS and
+do not require any additional dependencies. The `style` and `className` props
+are available by default, but beyond these, and the common style props, it is up to
+consumers to choose how to implement any custom CSS they may require.
+
+### Interoperability
+
+The CSS only approach we have taken means that there shouldn't be any
+interoperability problems with any additional styling solution you choose to
+implement. Please reach out if you do run into any issues.
+
+### ThemeProvider
+
+The new styling approach does not require any `ThemeProvider` component.
+However you will probably want to properly handle portals.
+
+### Portals
+
+Hearth React uses portals for components that render popups, such as `Dialog`.
+To make portalled components always appear on top of the entire page, add the
+following style to your application layout root.
+
+```html
+<body>
+  <div className="root">{children}</div>
+</body>
+```
+
+```css
+.root {
+  isolation: isolate;
+}
+```
+
+This style creates a separate stacking context for your application’s `.root`
+element. This way, popups will always appear above the page contents, and any
+`z-index` property in your styles won’t interfere with them.
+
+### The sx prop and styled method API
+
+The `sx` prop and `styled` method you are familiar with from Web UI, and
+Material UI, are not available in **Hearth React**. You can, however, install
+and use these from Material UI, or any other library which offers a similar
+API.
+
+```tsx
+import { Box as HearthBox } from '@utilitywarehouse/hearth-react';
+import { styled } from '@mui/material';
+
+export const StyledBox = styled(HearthBox)({});
+
+[...]
+
+<StyledBox padding="200" sx={{ ... }} />
+```
+
+In this example, we're wrapping the `Box` component from **Hearth React** with
+the Material UI `styled` method. This means that on the new `StyledBox`
+component we can make use of the **Hearth React** style props, and also have
+access to Material UI's custom `sx` prop. We could also pass in additional
+styles with the `styled` method.
+
+### Tokens
+
+We no longer export any tokens from the component libraries, you should access
+these from the **Hearth Tokens** package instead.
+
+### Responsive props
+
+The new **Hearth React** styling props are still responsive where it makes
+sense, for instance on `padding` and `margin` props. However, it is only with
+the object syntax, the array syntax that you may have used previously is no
+longer used.
+
+```tsx
+<Box padding={{ mobile: '100', tablet: '200', desktop: '300', wide: '400' }} />
+```
+
+### Common props
+
+There are a number of style props common to multiple components, though not all
+components share all of these props. Individual component documentation will
+indicate which common props are available.
+
+The common props are intended to resolve the majority of styling needs,
+including padding, margin, border, colours, width, and height, as well as
+flexbox and grid layouts. These common props do not mirror the system props
+from Material UI that we used in Web UI.
+
+The values of these common props are based on the design tokens where possible and
+will differ from what you will be used to in Web UI. For example in Web UI the
+padding was based on multiple of 8px, whereas in **Hearth React** it is a scale
+of string values which correspond to the tokens space scale.
+
+```tsx
+// Web UI
+<Box padding={2} />
+
+// Hearth React
+<Box padding="200" />
+```
+
+You can learn more about these props on the Common Props documentation pages.
+
+### Contextual colours
+
+Previously some component colours, mainly typography, have changed depending on
+the context of the background; ie. white text on darker brand backgrounds.
+
+We are not currently taking this approach in **Hearth React**, instead
+including an `inverted` prop where necessary.
+
+This may change as we get a deeper understanding of real world usage of the new
+UI. In the meantime, please reach out to us if you are experiencing issues with
+this approach, or have a valid use case for including contextual colours.

package/public/llms/docs/responsive-design/breakpoints.md

@@ -0,0 +1,119 @@
+# Breakpoints
+
+Each breakpoint matches a fixed screen width. Values are min-width based and
+apply when the screen width is equal or greater.
+
+```tsx
+import { breakpoints } from '@utilitywarehouse/hearth-react';
+```
+
+<Unstyled>
+  <Flex direction="column" gap="100" width="500px" marginBottom="600">
+    {Object.keys(breakpoints).map((bp, i) => (
+      <>
+        <Flex justifyContent="between">
+          <BodyText variant="body" as="span">
+            {`breakpoints.${bp}`}
+          </BodyText>
+          <BodyText variant="body" as="span">
+            {breakpoints[bp]}px
+          </BodyText>
+        </Flex>
+        {i < Object.keys(breakpoints).length - 1 ? <Divider /> : null}
+      </>
+    ))}
+  </Flex>
+</Unstyled>
+
+## Using breakpoints in a Next.js app
+
+Hearth also exposes these breakpoints as **CSS Custom Media Queries** via a
+`breakpoints.css` file in `@utilitywarehouse/hearth-react`. This lets you write
+media queries in plain CSS:
+
+```css
+@media (--h-tablet) {
+  .myComponent {
+    padding: var(--h-space-300);
+  }
+}
+```
+
+### 1. Ensure `breakpoints.css` is available
+
+The React package publishes a raw `breakpoints.css` file alongside `styles.css`, so in your app you can reference:
+
+```css
+@import '@utilitywarehouse/hearth-react/breakpoints.css';
+```
+
+> You typically import this once in your global stylesheet (for example `src/styles/globals.css`).
+
+### 2. Configure PostCSS in your Next.js app
+
+Next.js needs to understand the custom media syntax and load the shared definitions. Install the required plugins in your Next app:
+
+```bash
+pnpm add -D postcss-custom-media @csstools/postcss-global-data autoprefixer
+```
+
+Then create (or update) `postcss.config.js` in the Next.js project root:
+
+```js
+module.exports = {
+  plugins: {
+    '@csstools/postcss-global-data': {
+      files: ['./node_modules/@utilitywarehouse/hearth-react/breakpoints.css'],
+    },
+    'postcss-custom-media': {},
+    autoprefixer: {},
+  },
+};
+```
+
+> **Note:** With this PostCSS setup, the `breakpoints.css` file is only used at
+> build time by PostCSS. You do **not** need to import it in your application
+> CSS for the custom media queries to work.
+
+- `@csstools/postcss-global-data` loads the `@custom-media` rules from `breakpoints.css`.
+- `postcss-custom-media` rewrites `@media (--h-tablet)` into standard `@media (min-width: 740px)` (and similar for other breakpoints).
+
+### 3. Use the custom media queries in your CSS
+
+Once PostCSS is configured, you can use Hearth breakpoints directly in your app
+styles:
+
+```css
+/* src/styles/globals.css */
+.myComponent {
+  padding: var(--h-space-300);
+  background-color: var(--h-color-mobile-rose-50);
+  border: 2px solid var(--h-color-mobile-rose-500);
+}
+
+@media (--h-tablet) {
+  .myComponent {
+    background-color: var(--h-color-orange-50);
+    border-color: var(--h-color-orange-500);
+  }
+}
+
+@media (--h-desktop) {
+  .myComponent {
+    background-color: var(--h-color-green-50);
+    border-color: var(--h-color-green-500);
+  }
+}
+
+@media (--h-wide) {
+  .myComponent {
+    background-color: var(--h-color-blue-50);
+    border-color: var(--h-color-blue-500);
+  }
+}
+```
+
+With this setup, your Next.js app uses the **same breakpoint definitions** as
+Hearth itself, both in React props (via the `breakpoints` object) and in CSS
+(`@media (--h-*)`). This keeps responsive behaviour consistent across component
+library and product code.

package/public/llms/docs/responsive-design/media-queries.md

@@ -0,0 +1,89 @@
+# Media Queries
+
+While you should be able to do most things using the responsive style props, if
+you need to you can use the `media` object to help create responsive styles.
+
+```tsx
+import { media } from '@utilitywarehouse/hearth-react';
+
+[...]
+
+<Box
+  style={{
+    display: 'flex',
+    flexDirection: 'column',
+    [media.desktop]: {
+      flexDirection: 'row'
+    }
+  }}>
+  {...}
+</Box>
+```
+
+<Unstyled>
+  <Flex direction="column" gap="100" width="500px" marginBottom="600">
+    <Flex justifyContent="between" alignItems="center">
+      <BodyText variant="body" as="span">
+        {`media.mobile`}
+      </BodyText>
+      <BodyText variant="body" as="span">
+        {media.mobile}
+      </BodyText>
+    </Flex>
+    <Divider decorative />
+    <Flex justifyContent="between" alignItems="center">
+      <BodyText variant="body" as="span">
+        {`media.tablet`}
+      </BodyText>
+      <BodyText variant="body" as="span">
+        {media.tablet}
+      </BodyText>
+    </Flex>
+    <Divider decorative />
+    <Flex justifyContent="between" alignItems="center">
+      <BodyText variant="body" as="span">
+        {`media.desktop`}
+      </BodyText>
+      <BodyText variant="body" as="span">
+        {media.desktop}
+      </BodyText>
+    </Flex>
+    <Divider decorative />
+    <Flex justifyContent="between" alignItems="center">
+      <BodyText variant="body" as="span">
+        {`media.wide`}
+      </BodyText>
+      <BodyText variant="body" as="span">
+        {media.wide}
+      </BodyText>
+    </Flex>
+  </Flex>
+</Unstyled>
+
+## Media query helpers
+
+There are also some media query helper functions available for more specific
+media queries. These helpers all take only the breakpoint values as arguments
+(`mobile`, `tablet`, `desktop`, `wide`).
+
+| helper          | description                                                                                                                                                                                                          |               example                |             query string             |
+| :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------: | :----------------------------------: |
+| `media.above`   | This function takes a breakpoint key and returns a min-width media query string matching screen widths greater than the screen size given by the breakpoint. This is the same as using the above base media queries. |       `media.above("tablet")`        |       {media.above("tablet")}        |
+| `media.below`   | This function takes a breakpoint key and returns a max-width media query string matching screen widths less than than the screen size given by the breakpoint.                                                       |        `media.below("wide")`         |        {media.below("wide")}         |
+| `media.between` | This function takes a breakpoint key and returns a media query string matching screen widths greater than the given start screen size and less than the given end screen size.                                       | `media.between("tablet", "desktop")` | {media.between("tablet", "desktop")} |
+| `media.only`    | This function takes a breakpoint key and returns a media query string matching screen widths starting from the given screen size and stopping just before the next breakpoint.                                       |        `media.only("tablet")`        |        {media.only("tablet")}        |
+| `media.not`     | This function takes a breakpoint key and returns a media query string matching screen widths stopping at the given screen size and starting just before the next breakpoint.                                         |        `media.not("desktop")`        |        {media.not("desktop")}        |
+
+## useMediaQuery hook
+
+This is a custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
+
+We recommend you use it with the `media` object, however you can pass in your own custom media query strings.
+
+```tsx
+import { useMediaQuery, media } from '@utilitywarehouse/hearth-react';
+
+const isMobileOrTablet = useMediaQuery(media.below('desktop'));
+const isDesktop = useMediaQuery(media.above('desktop'));
+const isTablet = useMediaQuery(media.between('tablet', 'desktop'));
+```

package/public/llms/docs/responsive-design/responsive-props.md

@@ -0,0 +1,37 @@
+# Responsive props
+
+Many layout and styling props support a `Responsive` object for applying prop
+values at different breakpoints. The keys of this object reflect the different
+breakpoints available, and each value will be applied when the screen size is
+greater than or equal to the named breakpoint.
+
+```tsx
+<Box
+  padding={{
+    mobile: "0",
+    tablet: "100",
+    desktop: "200",
+    wide: "400",
+  }}>
+  <BodyText
+    size={{ mobile: 'sm', tablet: 'md', desktop: 'lg' }}
+    weight={{ mobile: 'bold', desktop: 'regular' }}
+  >
+    {...}
+  </BodyText>
+</Box>
+```
+
+These use **mobile-first** media queries so you only need to include a larger
+breakpoint if it is different from the previous smaller breakpoint.
+
+```tsx
+<Box
+  padding={{
+    mobile: '100',
+    // tablet: '100', This breakpoint is not needed as it is the same as the mobile breakpoint.
+    desktop: '200',
+    // wide: '200', This breakpoint value matches the desktop one, so it is unnecessary, and will be covered by the desktop, mobile first, declaration
+  }}
+/>
+```

package/public/llms.txt

@@ -0,0 +1,97 @@
+# Hearth React
+
+> @utilitywarehouse/hearth-react — React component library for Utility Warehouse products.
+
+## Components
+
+- [Accordion](llms/components/accordion.md): Use `Accordion` to allow users to expand or collapse individual content
+- [Alert](llms/components/alert.md): The `Alert` component displays a short, important message in a way that
+- [Avatar](llms/components/avatar.md): Use `Avatar` to help humanise the product experience by connecting users with the product and to each other.
+- [Badge](llms/components/badge.md): A `Badge` is a visual label or indicator used to convey status or highlight content. Badges are read-only status indicators or labels and are not interactive.
+- [BodyText](llms/components/body-text.md): ```tsx
+- [Box](llms/components/box.md): ```tsx
+- [Breadcrumbs](llms/components/breadcrumbs.md): Use the `Breadcrumbs` component when you need to help users understand and move between multiple levels of a website.
+- [Button](llms/components/button.md): Trigger an action or event, such as submitting a form or displaying a dialog.
+- [Card](llms/components/card.md): Use Cards as containers for concise information about a single subject. They can display featured information, related content, or navigational choices. In groups, cards present collections of similar content.
+- [CardAccordion](llms/components/card-accordion.md): `CardAccordion` breaks a form journey into multiple collapsible cards, allowing
+- [Checkbox](llms/components/checkbox.md): The `Checkbox` component is a dual-state checkbox allowing users to toggle
+- [CheckboxGroup](llms/components/checkbox-group.md): `CheckboxGroup` provides a set of interactive buttons where multiple options can be selected at a time. The `CheckboxGroup` uses a fieldset to group related `Checkbox` controls. The `CheckboxGroup` is responsible for handling the value, label, helper text, validation, and disabled state, as well as determining the presentation and selection of the items in the list.
+- [CheckboxTile](llms/components/checkbox-tile.md): The `CheckboxTile` component is a dual-state checkbox allowing users to toggle between checked and not checked. `CheckboxTile` can be used independently, however multiple checkboxes should be used within a `CheckboxGroup` to handle the state control and layout.
+- [Combobox](llms/components/combobox.md): `Combobox` allows users to both type to filter results and select from a predefined list.
+- [Container](llms/components/container.md): ```tsx
+- [CurrencyInput](llms/components/currency-input.md): `CurrencyInput` is an interactive field that specifically used for entering monetary amounts. It’s commonly used across Cashback and payment areas.
+- [DateInput](llms/components/date-input.md): `DateInput` allows users to enter a date manually using separate input fields for day, month, and year. It provides flexibility to show only the date segments you need. Use `DateInput` when you need users to enter dates manually.
+- [DatePicker](llms/components/date-picker.md): `DatePicker` allows a user to specify a date, month or date range through the use of an expandable calendar.
+- [DescriptionList](llms/components/description-list.md): Use the `DescriptionList` component when you need to present pairs of related information together.
+- [DetailText](llms/components/detail-text.md): ```tsx
+- [Divider](llms/components/divider.md): Used to provide a visual break and semantically divide content. Supports
+- [Em](llms/components/em.md): ```tsx
+- [ExpandableCard](llms/components/expandable-card.md): Use `ExpandableCard` to show a summary header with an optional leading icon and helper text, which
+- [Flex](llms/components/flex.md): ```tsx
+- [Grid](llms/components/grid.md): ```tsx
+- [Heading](llms/components/heading.md): ```tsx
+- [HelperText](llms/components/helper-text.md): ```tsx
+- [HighlightBanner](llms/components/highlight-banner.md): `HighlightBanner` can be used to highlight key information or marketing messaging.
+- [IconButton](llms/components/icon-button.md): Icon Buttons are used to trigger an action on a page or to complete tasks in other components. Use Icon Buttons when you want to display an action quickly and visually, and when space is limited.
+- [IconContainer](llms/components/icon-container.md): Use the `IconContainer` when using icons that sit within a coloured container.
+- [InlineLink](llms/components/inline-link.md): [Alternatives](#alternatives)
+- [Label](llms/components/label.md): ```tsx
+- [Link](llms/components/link.md): Links are used to navigate a user to another page or website, another place on the same page, or to open a link in a new tab.
+- [List](llms/components/list.md): The `List` component is a flexible and customizable component for displaying a
+- [Menu](llms/components/menu.md): Use the `Menu` component to present a short list of actions or options in response to a user’s interaction. Menus are ideal for actions like sorting, filtering, or providing additional options without navigating away from the current screen.
+- [Modal](llms/components/modal.md): A `Modal` overlays content to request a decision or inform users of important information. When
+- [Pagination](llms/components/pagination.md): Use the `Pagination` component to help users navigate through multiple pages of content.
+- [PasswordInput](llms/components/password-input.md): `PasswordInput` is an interactive field that is used to securely collect users passwords.
+- [ProgressBar](llms/components/progress-bar.md): `ProgressBar` displays the progress of a task or process in a linear bar format, with support for different visual states.
+- [ProgressStepper](llms/components/progress-stepper.md): Use the `ProgressStepper` component to show users their progress through a multi-step process.
+- [RadioGroup](llms/components/radio-group.md): `RadioGroup` provides an accessible way to group and control a set of `Radio`, `RadioTile` or `RadioCard` components, allowing the user to select one option from a set. The `RadioGroup` is responsible for handling the value, helper text, validation status and text, as well as determining the presentation and selection of the items in the list. Follows the [WAI-ARIA Radio Group Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) for radio groups not contained in a toolbar.
+- [SearchInput](llms/components/search-input.md): `SearchInput` allows users to enter a specific keyword or phrase and obtain results related to the context in which it is placed.
+- [SectionHeader](llms/components/section-header.md): Use the `SectionHeader` component to help define and separate content within a
+- [Select](llms/components/select.md): `Select` enables users to select an option from a list of choices, and generally requires a final submit action to confirm the selection.
+- [Skeleton](llms/components/skeleton.md): `Skeleton` is a collection of components that provide visual placeholders while
+- [Spinner](llms/components/spinner.md): Using a Spinner is a common method for indicating that an asynchronous process is ongoing.
+- [Strong](llms/components/strong.md): The `Strong` component is based on the HTML `strong` element and is used to indicate text that is of
+- [Switch](llms/components/switch.md): `Switch` is used to indicate switching between two opposing options. Switches
+- [Table](llms/components/table.md): Use a `Table` to arrange data in rows and columns. They are used to communicate relationships between content and to display references, comparisons, and choices.
+- [Tabs](llms/components/tabs.md): Use Tabs to organize and navigate between content sections within the same context without leaving the page.
+- [TextArea](llms/components/text-area.md): `TextArea` is a multi-line text input field that allows users to enter longer text content.
+- [TextInput](llms/components/text-input.md): `TextInput` is an interactive field that allows users to enter text and data.
+- [Toast](llms/components/toast.md): A `Toast` is a brief, non-intrusive message that appears temporarily to provide feedback on an action or notify users of important information. Toasts automatically dismiss after a set duration or can be dismissed manually.
+- [ToggleButtonCard](llms/components/toggle-button-card.md): ```tsx
+- [Tooltip](llms/components/tooltip.md): Use `Tooltip` to temporarily display short, contextual text, that
+- [UnstyledIconButton](llms/components/unstyled-icon-button.md): [Icons](#icons)
+- [ValidationText](llms/components/validation-text.md): `ValidationText` should be used with form field components to display validation messages.
+- [VerificationInput](llms/components/verification-input.md): `VerificationInput` allows users to enter a one-time password (OTP) sent via
+
+## Guides
+
+- [Changelog](llms/docs/changelog.md)
+- [Hearth Tokens](llms/docs/design-tokens.md)
+- [Hearth React](llms/docs/getting-started.md)
+- [Layout](llms/docs/layout.md)
+- [Migrating from Web UI](llms/docs/migrating.md)
+
+## Common Props
+
+- [AlignSelf](llms/docs/common-props/align-self.md)
+- [Borders](llms/docs/common-props/border.md)
+- [Colour props](llms/docs/common-props/colour.md)
+- [Flex items](llms/docs/common-props/flex-items.md)
+- [Gap](llms/docs/common-props/gap.md)
+- [Grid items](llms/docs/common-props/grid-items.md)
+- [Margin props](llms/docs/common-props/margin.md)
+- [Opacity](llms/docs/common-props/opacity.md)
+- [Order](llms/docs/common-props/order.md)
+- [Overflow](llms/docs/common-props/overflow.md)
+- [Padding props](llms/docs/common-props/padding.md)
+- [Position](llms/docs/common-props/position.md)
+- [Size](llms/docs/common-props/size.md)
+- [Spacing](llms/docs/common-props/spacing.md)
+- [Text](llms/docs/common-props/text.md)
+- [Z-Index](llms/docs/common-props/z-index.md)
+
+## Responsive Design
+
+- [Breakpoints](llms/docs/responsive-design/breakpoints.md)
+- [Media Queries](llms/docs/responsive-design/media-queries.md)
+- [Responsive props](llms/docs/responsive-design/responsive-props.md)