@utilitywarehouse/hearth-react 0.33.0 → 0.33.1

package/public/llms/components/combobox.md

@@ -7,14 +7,6 @@ control. Set `triggerOnlyOnType` when the user must type before options are
 surfaced (e.g. a postcode or address lookup); leave it unset when there is a
 predefined list to choose from by clicking.
 
-- [Usage](#usage)
-- [Trigger only on type](#trigger-only-on-type)
-- [No options found](#no-options-found)
-- [Status text](#status-text)
-- [useComboboxFilter](#usecomboboxfilter)
-- [Virtualised](#virtualised)
-- [API](#api)
-
 ```tsx
 <Combobox {...args} items={fruits} />
 ```

package/public/llms/components/description-list.md

@@ -34,13 +34,6 @@ semantic `dl` element.
 </Box>
 ```
 
-- [Usage](#usage)
-- [Heading](#heading)
-- [Trailing content](#trailing-content)
-- [Direction](#direction)
-- [API](#api)
-- [DescriptionListItem API](#descriptionlistitem-api)
-
 ## Usage
 
 Use the `DescriptionList` element to wrap any number of `DescriptionListItem`

package/public/llms/components/expandable-card.md

@@ -7,17 +7,8 @@ reveal additional content. Group multiple cards with ExpandableCardGroup.
 For multiple sections of content that need to expand and collapse
 independently as a related set, use Accordion instead.
 
-- [Leading icon](#leading-icon)
-- [Default open](#default-open)
-- [Controlled](#controlled)
-- [ExpandableCardGroup](#expandablecardgroup)
-- [Accessibility](#accessibility)
-  - [Keyboard interactions](#keyboard-interactions)
-- [API](#api)
-  - [ExpandableCardGroup](#expandablecardgroup-api)
-
 ```tsx
-<Box width="400px" marginX="auto">
+<Box width="400px">
   <ExpandableCard {...args}>
     <BodyText size="md">
       This is the expandable content area. It can contain any content you need to show when the card
@@ -86,7 +77,7 @@ approach: the card manages its own open/closed state internally after mount.
 ```
 
 ```tsx
-<Box width="400px" marginX="auto">
+<Box width="400px">
   <ExpandableCard
     heading="Heading"
     helperText="This card starts expanded"
@@ -123,7 +114,7 @@ using the `Accordion` component instead, which has built-in support for
 grouping related content.
 
 ```tsx
-<Box width="400px" marginX="auto">
+<Box width="400px">
   <ExpandableCardGroup heading="My services" helperText="Manage your UW services">
     <ExpandableCard
       heading="Broadband"

package/public/llms/components/highlight-banner.md

@@ -11,7 +11,7 @@ for footer content.
     {/* eslint-disable-next-line jsx-a11y/alt-text */}
     <img src={piggies} height="200px" />
     <HighlightBannerFooter>
-      <BodyText size="md" wrap="wrap">
+      <BodyText size="md" textWrap="wrap">
         Homeowners who bundle two or more services with UW and activate the Cashback Card trial will
         receive up to £150 in credit.
       </BodyText>

package/public/llms/components/icon-button.md

@@ -153,17 +153,6 @@ no visible text, a `label` prop is required to provide an accessible name.
 </Flex>
 ```
 
-- [Icons](#icons)
-- [Accessibility](#accessibility)
-  - [Disabled buttons](#disabled-buttons)
-- [Variants](#variants)
-- [Colour schemes](#colour-schemes)
-- [Inverted](#inverted)
-- [Size](#size)
-  - [Responsive icon sizes](#responsive-icon-sizes)
-- [Semantic HTML](#semantic-html)
-- [API](#api)
-
 ```tsx
 <IconButton {...args}>
   <AddMediumIcon />

package/public/llms/components/icon-container.md

@@ -46,15 +46,6 @@ combinations of `colorScheme` and `variant` (e.g. `emphasis` and
 </IconContainer>
 ```
 
-- [Icons](#icons)
-- [Variants](#variants)
-- [Sizes](#sizes)
-- [Color schemes](#color-schemes)
-- [Dead prop combinations](#dead-prop-combinations)
-- [Radius none](#radius-none)
-- [Fill](#fill)
-- [API](#api)
-
 ## Icons
 
 The `IconContainer` component is intended to be used with the `@utilitywarehouse/hearth-react-icons` package.

package/public/llms/components/inline-link.md

@@ -6,13 +6,6 @@ icon and visually-hidden label when `target="_blank"` is set. Use `asChild`
 to render a routing library's link component (e.g. Next.js `Link`) instead.
 For a standalone link not embedded in text, use Link instead.
 
-- [Alternatives](#alternatives)
-- [Semantic HTML](#semantic-html)
-- [Colour](#colour)
-- [Open in new tab](#open-in-new-tab)
-- [Usage with Next.js](#usage-with-next.js)
-- [API](#api)
-
 ```tsx
 <Flex
   direction="column"

package/public/llms/components/label.md

@@ -5,7 +5,7 @@ element by default, styled as `BodyText`. Set `variant="heading"` to style
 it as a `Heading` instead, for labels that need more visual weight.
 
 ```tsx
-<Label marginTop="300">Label</Label>
+<Label>Label</Label>
 ```
 
 ## API

package/public/llms/components/link.md

@@ -7,14 +7,6 @@ on the same page, or to open a resource in a new tab. Renders a semantic
 
 For links within a body of text, use InlineLink instead.
 
-- [Alternatives](#alternatives)
-- [Semantic HTML](#semantic-html)
-- [Open in new tab](#open-in-new-tab)
-- [Icons](#icons)
-- [Inverted colours](#inverted-colours)
-- [Usage with Next.js](#usage-with-next.js)
-- [API](#api)
-
 ```tsx
 <Link href="#">Link</Link>
 ```

package/public/llms/components/list.md

@@ -67,18 +67,6 @@ list falls back to its default appearance.
 </Box>
 ```
 
-- [Usage](#usage)
-- [Appearance](#appearance)
-  - [Variant](#variant)
-  - [ColorScheme](#colorscheme)
-  - [Padding None](#padding-none)
-- [Heading](#heading)
-- [Leading content](#leading-content)
-- [Trailing content](#trailing-content)
-- [Advanced Content](#advanced-content)
-- [List actions](#list-actions)
-- [API](#api)
-
 ## Usage
 
 - The `List` component can be customized with different variants and color schemes.

package/public/llms/components/menu.md

@@ -7,15 +7,6 @@ with MenuTrigger and MenuContent, which wraps any number of MenuItem
 components. Set `modal={false}` when multiple Menu components are used
 together, such as in a navigation bar.
 
-- [Usage](#usage)
-- [MenuTrigger](#menutrigger)
-- [Placement](#placement)
-- [MenuItem](#menuitem)
-- [Accessibility](#accessibility)
-- [SEO](#seo)
-- [Migration](#migration)
-- [API](#api)
-
 ```tsx
 <Menu {...args}>
   <MenuTrigger>

package/public/llms/components/modal.md

@@ -7,16 +7,6 @@ ModalTrigger, ModalContent, ModalFooter, and ModalClose. Pass `heading` and
 `description` for standard content, or custom children alongside
 ModalFooter for more control over layout.
 
-- [Usage Guidelines](#usage-guidelines)
-- [Content](#content)
-- [Accessibility](#accessibility)
-- [Uncontrolled usage](#uncontrolled-usage)
-- [Controlled usage](#controlled-usage)
-- [With Image](#with-image)
-- [Loading](#loading)
-- [Preventing dismissal](#preventing-dismissal)
-- [API](#api)
-
 ```tsx
 <ModalRoot>
   <ModalTrigger>

package/public/llms/components/pagination.md

@@ -7,17 +7,6 @@ Render `as="nav"` when it acts as a standalone navigation landmark — in that
 case also provide an `id` for accessibility. Use the `condensed` prop for
 compact spaces where only a page count needs to be shown.
 
-## Table of Contents
-
-- [Usage Guidelines](#usage-guidelines)
-- [Examples](#examples)
-  - [Condensed](#condensed)
-  - [Without Skip Buttons](#without-skip-buttons)
-  - [Few Pages](#few-pages)
-  - [Many Pages](#many-pages)
-  - [Edge Cases](#edge-cases)
-- [API](#api)
-
 ```tsx
 <Pagination {...args} currentPage={currentPage} onPageChange={setCurrentPage} />
 ```

package/public/llms/components/progress-stepper.md

@@ -7,11 +7,6 @@ triggers an action, or navigates — don't mix step types within the same
 stepper. Render `as="nav"` when the stepper represents site or app
 navigation. For a single continuous task's completion, use ProgressBar instead.
 
-- [Usage](#usage)
-- [Step states](#step-states)
-- [Accessability](#accessability)
-- [API](#api)
-
 ```tsx
 <Flex direction="column" gap="400">
   <BodyText weight="bold">Step {currentStep + 1} Content</BodyText>

package/public/llms/components/radio-group.md

@@ -7,48 +7,9 @@ follows the WAI-ARIA Radio Group pattern for groups not contained in a
 toolbar. For multi-select options, use CheckboxGroup instead.
 
 ```tsx
-<Flex direction="column" gap="400">
-  <Flex direction="row" gap="200">
-    <RadioGroup {...args}>
-      <RadioTile value="england" label="England" />
-      <RadioTile value="wales" label="Wales" />
-      <RadioTile value="scotland" label="Scotland" />
-      <RadioTile value="northern-ireland" label="Northern Ireland" />
-    </RadioGroup>
-    <RadioGroup {...args}>
-      <Radio value="england" label="England" />
-      <Radio value="wales" label="Wales" />
-      <Radio value="scotland" label="Scotland" />
-      <Radio value="northern-ireland" label="Northern Ireland" />
-    </RadioGroup>
-  </Flex>
-  <RadioGroup
-    {...args}
-    label="Do you like living here?"
-    name="do-you-like-living-here"
-    direction="row"
-  >
-    <RadioTile value="y" label="Yes" image={<ThumbsUpSmallIcon />} />
-    <RadioTile value="n" label="No" image={<ThumbsDownSmallIcon />} />
-  </RadioGroup>
-</Flex>
+<RadioGroup label="Label" helperText="Helper text" validationText="Validation text" />
 ```
 
-- [Alternatives](#alternatives)
-- [Usage](#usage)
-- [Accessibility](#accessibility)
-- [Keyboard interactions](#keyboard-interactions)
-- [Custom label](#custom-label)
-- [Helper text](#helper-text)
-- [Validation](#validation)
-- [Content width](#content-width)
-- [Grid layout](#grid-layout)
-- [RadioTile layout](#radiotile-layout)
-- [Controlled](#controlled)
-- [Radio & RadioTile Image](#radio--radiotile-image)
-- [RadioCard](#radiocard)
-- [API](#api)
-
 ## Alternatives
 
 - `CheckboxGroup`: For multi-select.

package/public/llms/components/search-input.md

@@ -7,14 +7,6 @@ fetched. On desktop and tablet it must be paired with a button to trigger
 the search; on mobile the keyboard's search action can trigger it instead.
 For general text entry use TextInput instead.
 
-- [Alternatives](#alternatives)
-- [Accessibility](#accessibility)
-- [Label](#label)
-- [Clear](#clear)
-- [Loading](#loading)
-- [Usage with a button](#usage-with-a-button)
-- [API](#api)
-
 ```tsx
 <SearchInput
   value={value}

package/public/llms/components/segmented-control.md

@@ -7,11 +7,6 @@ be used without a default selected option.
 For navigation between pages or sections, use Tabs instead.
 For binary on/off settings, use Switch instead.
 
-- [Usage](#usage)
-- [Sizes](#sizes)
-- [Icons](#icons)
-- [API](#api)
-
 ```tsx
 <Flex direction="column" gap="400">
   <BodyText as="p" size="md" weight="semibold">

package/public/llms/components/skeleton.md

@@ -4,14 +4,6 @@
 content is loading. It helps improve perceived performance and user experience
 by showing a skeleton of the layout before the actual content is rendered.
 
-- [Usage](#usage)
-- [Accessibility](#accessibility)
-  - [Loading title](#loading-title)
-- [SkeletonBodyText](#skeletonbodytext)
-- [SkeletonHeading](#skeletonheading)
-- [SkeletonBox](#skeletonbox)
-- [API](#api)
-
 ```tsx
 <Skeleton loadingTitle="card placeholder story">
   <Flex direction="column" gap="300" width="320px">

package/public/llms/components/table.md

@@ -6,12 +6,6 @@ it with TableHeader, TableBody, TableRow, TableHeaderCell, and TableCell.
 Pass `variant` to wrap the table in a Card container; omit it for a minimal,
 unwrapped table.
 
-- [Usage](#usage)
-- [Variants](#variants)
-- [Pagination](#pagination)
-- [Header cells](#header-cells)
-- [API](#api)
-
 ```tsx
 <Table {...args}>
   <TableHeader>

package/public/llms/components/tabs.md

@@ -4,16 +4,6 @@ Use Tabs to organize and navigate between content sections within the same
 page context, without leaving the page. Must be used together with
 TabsList, Tab, and TabContent.
 
-- [Usage](#usage)
-- [Examples](#examples)
-  - [Controlled](#controlled)
-  - [Overflow & Scrolling](#overflow--scrolling)
-  - [With icons](#with-icons)
-- [Size variants](#size-variants)
-- [Activation mode](#activation-mode)
-- [Accessibility](#accessibility)
-- [API](#api)
-
 ```tsx
 <Tabs {...args}>
   <TabsList>

package/public/llms/components/text-area.md

@@ -8,15 +8,6 @@ is required and should clearly describe the purpose of the field.
 <TextArea {...args} />
 ```
 
-- [Label](#label)
-- [Helper Text](#helper-text)
-- [Validation](#validation)
-- [Disabled and Read-only](#disabled-and-read-only)
-- [Custom Rows](#custom-rows)
-- [Height](#height)
-- [Controlled Usage](#controlled-usage)
-- [API](#api)
-
 ## Label
 
 A label is required for the `TextArea` component. It should clearly describe

package/public/llms/components/text-input.md

@@ -9,15 +9,6 @@ SearchInput, CurrencyInput, VerificationInput, or DateInput instead. A
 <TextInput {...args} />
 ```
 
-- [Alternatives](#alternatives)
-- [Label](#label)
-- [Required](#required)
-- [Disabled and Read-only](#disabled-and-read-only)
-- [Validation](#validation)
-- [Prefix and Suffix](#prefix-and-suffix)
-- [Grouping inputs](#grouping-inputs)
-- [API](#api)
-
 ## Alternatives
 
 - PasswordInput - For entering

package/public/llms/components/timeline.md

@@ -6,14 +6,8 @@ the sequence represents the user's advancement through it; use `static`
 for a purely informational history or schedule. For a multi-step process
 the user actively navigates, use ProgressStepper instead.
 
-- [Usage](#usage)
-- [Variants](#variants)
-- [States](#states)
-- [Dangling rail](#dangling-rail)
-- [API](#api)
-
 ```tsx
-<Flex direction="column" gap="400">
+<Flex direction="row" gap="600">
   {variants.map(variant => (
     <Timeline key={variant} variant={variant}>
       <TimelineItem state="complete" label="Direct debit set up" helperText="1 March 2026" />

package/public/llms/components/toast.md

@@ -5,17 +5,6 @@ action or notifies users of important information, auto-dismissing after a
 set duration. It must be rendered inside a ToastProvider. For messages that
 require the user to make a decision, use Alert instead.
 
-- [Usage](#usage)
-- [Icon](#icon)
-- [Dismiss toast](#dismiss-toast)
-- [Actions](#actions)
-- [Custom duration](#custom-duration)
-- [Accessibility](#accessibility)
-  - [Sensitivity](#sensitivity)
-  - [Keyboard interactions](#keyboard-interactions)
-- [Duplicate toasts](#duplicate-toasts)
-- [API](#api)
-
 ```tsx
 <div>
   <Button

package/public/llms/components/toggle-button-card.md

@@ -58,14 +58,6 @@
 </Box>
 ```
 
-- [Usage](#usage)
-- [ToggleGroup type](#togglegroup-type)
-- [Layout](#layout)
-- [Interactive content](#interactive-content)
-- [Accessibility](#accessibility)
-- [ToggleButtonCard API](#togglebuttoncard-api)
-- [ToggleGroup API](#togglegroup-api)
-
 ## Usage
 
 Use the `ToggleGroup` to wrap `ToggleButtonCard` components.
@@ -141,7 +133,7 @@ return (
 >
   {['One', 'Two', 'Three', 'Four'].map((label, value) => (
     <ToggleButtonCard key={value} value={`${value}`} label={label} aria-labelledby="">
-      <Placeholder borderColor="subtle" backgroundColor="primary" width="120px" height="50px" />
+      <Placeholder borderColor="subtle" backgroundColor="primary" height="50px" />
     </ToggleButtonCard>
   ))}
 </ToggleGroup>

package/public/llms/components/toggle-button.md

@@ -14,13 +14,6 @@ ToggleGroup, and requires a unique `value` prop.
 </ToggleGroup>
 ```
 
-- [Usage](#usage)
-- [ToggleGroup type](#togglegroup-type)
-- [Custom layout](#custom-layout)
-- [Accessibility](#accessibility)
-- [ToggleButton API](#togglebutton-api)
-- [ToggleGroup API](#togglegroup-api)
-
 ## Usage
 
 Wrap `ToggleButton` components in a `ToggleGroup`. The `value` prop on each

package/public/llms/components/tooltip.md

@@ -5,14 +5,6 @@ related to an element when it receives keyboard focus or is hovered. It
 requires a single child element as its trigger, and must be used within a
 TooltipProvider (or the global HearthProvider).
 
-- [Setup](#setup)
-- [Usage](#usage)
-- [Alignment](#alignment)
-- [Heading](#heading)
-- [Accessibility](#accessibility)
-  - [Keyboard interactions](#keyboard-interactions)
-- [API](#api)
-
 ```tsx
 <Flex justifyContent="center" padding="800">
   <Tooltip {...args}>

package/public/llms/components/unstyled-icon-button.md

@@ -5,14 +5,6 @@ its own: a plain, unstyled base for building custom icon button variants.
 For a fully-styled icon button, use IconButton instead. A `label` is
 required, since the button contains only an icon with no visible text.
 
-- [Icons](#icons)
-- [Accessibility](#accessibility)
-  - [Disabled buttons](#disabled-buttons)
-- [Size](#size)
-  - [Responsive icon sizes](#responsive-icon-sizes)
-- [Semantic HTML](#semantic-html)
-- [API](#api)
-
 ```tsx
 <Flex direction="column">
   <Box padding="200">

package/public/llms/docs/getting-started.md

@@ -1,14 +1,6 @@
 # Hearth React
 
-Current version: v0.33.0
-
-- [Install Hearth](#install-hearth)
-- [Import CSS](#import-css)
-- [HearthProvider](#hearthprovider)
-- [Start building](#start-building)
-- [CSS reset](#css-reset)
-- [Portals](#portals)
-- [React DevTools](#react-devtools)
+Current version: v0.33.1
 
 ## Install Hearth
 

package/public/llms/docs/migration/v0.md

@@ -1,26 +1,5 @@
 # Migration 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