@utilitywarehouse/hearth-react-native 0.34.4 → 0.35.0

package/{src/components/Tabs/Tabs.docs.mdx → public/llms/components/tabs.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { Badge, BodyText, Tab, TabPanel, Tabs, TabsList } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Tabs.stories';
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=6463-1113" />
-
-<Meta title="Components / Tabs" />
-
 # Tabs
 
 Tabs are a navigational component that allows users to move easily between groups of related content.
@@ -25,31 +14,29 @@ Tabs are a navigational component that allows users to move easily between group
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Tabs {...args} defaultValue="account">
+  <TabsList>{children}</TabsList>
+  <TabPanel value="account">
+    <BodyText>Account content</BodyText>
+  </TabPanel>
+  <TabPanel value="billing">
+    <BodyText>Billing content</BodyText>
+  </TabPanel>
+  <TabPanel value="usage">
+    <BodyText>Usage metrics</BodyText>
+  </TabPanel>
+  <TabPanel value="settings">
+    <BodyText>Settings content</BodyText>
+  </TabPanel>
+</Tabs>
+```
 
 ## Usage
 
-<UsageWrap>
-  <Tabs defaultValue="account">
-    <TabsList>
-      <Tab value="account">Account</Tab>
-      <Tab value="billing">Billing</Tab>
-      <Tab value="usage">Usage</Tab>
-    </TabsList>
-    <TabPanel value="account">
-      <BodyText>Account content</BodyText>
-    </TabPanel>
-    <TabPanel value="billing">
-      <BodyText>Billing content</BodyText>
-    </TabPanel>
-    <TabPanel value="usage">
-      <BodyText>Usage metrics content</BodyText>
-    </TabPanel>
-  </Tabs>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Tabs, TabsList, Tab, TabPanel } from '@utilitywarehouse/hearth-react-native';
 
 <Tabs defaultValue="account">
@@ -70,14 +57,13 @@ import { Tabs, TabsList, Tab, TabPanel } from '@utilitywarehouse/hearth-react-na
 </Tabs>;
 ```
 
-## Examples
-
 ### Controlled
 
 Tabs can be controlled by passing `value` and `onValueChange` props to the `Tabs` component.
 This allows you to manage the active tab state externally.
 
 ```tsx
+// Example usage
 const [tab, setTab] = useState('account');
 <Tabs value={tab} onValueChange={setTab}>
   <TabsList>
@@ -99,7 +85,93 @@ const [tab, setTab] = useState('account');
 
 ### Overflow & Scrolling
 
-<Canvas of={Stories.WithScrolling} />
+```tsx
+// Example usage
+<Tabs defaultValue="one">
+  <TabsList>
+    <Tab value="one">One</Tab>
+    <Tab value="two">Two</Tab>
+    <Tab value="three">Three</Tab>
+    <Tab value="four">Four</Tab>
+    <Tab value="five">Five</Tab>
+    <Tab value="six">Six</Tab>
+    <Tab value="seven">Seven</Tab>
+    <Tab value="eight">Eight</Tab>
+    <Tab value="nine">Nine</Tab>
+    <Tab value="ten">Ten</Tab>
+    <Tab value="eleven">Eleven</Tab>
+    <Tab value="twelve">Twelve</Tab>
+    <Tab value="thirteen">Thirteen</Tab>
+    <Tab value="fourteen">Fourteen</Tab>
+    <Tab value="fifteen">Fifteen</Tab>
+    <Tab value="sixteen">Sixteen</Tab>
+    <Tab value="seventeen">Seventeen</Tab>
+    <Tab value="eighteen">Eighteen</Tab>
+    <Tab value="nineteen">Nineteen</Tab>
+    <Tab value="twenty">Twenty</Tab>
+  </TabsList>
+  <TabPanel value="one">
+    <BodyText>One panel</BodyText>
+  </TabPanel>
+  <TabPanel value="two">
+    <BodyText>Two panel</BodyText>
+  </TabPanel>
+  <TabPanel value="three">
+    <BodyText>Three panel</BodyText>
+  </TabPanel>
+  <TabPanel value="four">
+    <BodyText>Four panel</BodyText>
+  </TabPanel>
+  <TabPanel value="five">
+    <BodyText>Five panel</BodyText>
+  </TabPanel>
+  <TabPanel value="six">
+    <BodyText>Six panel</BodyText>
+  </TabPanel>
+  <TabPanel value="seven">
+    <BodyText>Seven panel</BodyText>
+  </TabPanel>
+  <TabPanel value="eight">
+    <BodyText>Eight panel</BodyText>
+  </TabPanel>
+  <TabPanel value="nine">
+    <BodyText>Nine panel</BodyText>
+  </TabPanel>
+  <TabPanel value="ten">
+    <BodyText>Ten panel</BodyText>
+  </TabPanel>
+  <TabPanel value="eleven">
+    <BodyText>Eleven panel</BodyText>
+  </TabPanel>
+  <TabPanel value="twelve">
+    <BodyText>Twelve panel</BodyText>
+  </TabPanel>
+  <TabPanel value="thirteen">
+    <BodyText>Thirteen panel</BodyText>
+  </TabPanel>
+  <TabPanel value="fourteen">
+    <BodyText>Fourteen panel</BodyText>
+  </TabPanel>
+  <TabPanel value="fifteen">
+    <BodyText>Fifteen panel</BodyText>
+  </TabPanel>
+  <TabPanel value="sixteen">
+    <BodyText>Sixteen panel</BodyText>
+  </TabPanel>
+  <TabPanel value="seventeen">
+    <BodyText>Seventeen panel</BodyText>
+  </TabPanel>
+  <TabPanel value="eighteen">
+    <BodyText>Eighteen panel</BodyText>
+  </TabPanel>
+  <TabPanel value="nineteen">
+    <BodyText>Nineteen panel</BodyText>
+  </TabPanel>
+  <TabPanel value="twenty">
+    <BodyText>Twenty panel</BodyText>
+  </TabPanel>
+</Tabs>
+```
 
 When the combined tab labels exceed the horizontal space, the list becomes horizontally scrollable.
 Contextual navigation buttons (previous / next) appear just outside the scrollable area. They:
@@ -113,9 +185,40 @@ Contextual navigation buttons (previous / next) appear just outside the scrollab
 
 You can add icons to each `Tab` by passing an icon component to the `icon` prop. The icon will be placed to the left of the tab label.
 
-<Canvas of={Stories.WithIcons} />
+```tsx
+// Example usage
+<Tabs defaultValue="one">
+  <TabsList>
+    <Tab value="one" icon={ElectricityMediumIcon}>
+      Energy
+    </Tab>
+    <Tab value="two" icon={BroadbandMediumIcon}>
+      Broadband
+    </Tab>
+    <Tab value="three" icon={MobileMediumIcon}>
+      Mobile
+    </Tab>
+    <Tab value="four" icon={InsuranceMediumIcon}>
+      Insurance
+    </Tab>
+  </TabsList>
+  <TabPanel value="one">
+    <BodyText>One panel</BodyText>
+  </TabPanel>
+  <TabPanel value="two">
+    <BodyText>Two panel</BodyText>
+  </TabPanel>
+  <TabPanel value="three">
+    <BodyText>Three panel</BodyText>
+  </TabPanel>
+  <TabPanel value="four">
+    <BodyText>Four panel</BodyText>
+  </TabPanel>
+</Tabs>
+```
 
 ```tsx
+// Example usage
 import { Tabs, TabsList, Tab, TabPanel } from '@utilitywarehouse/hearth-react-native';
 import {
   ElectricityMediumIcon,
@@ -155,8 +258,6 @@ const MyComponent = () => (
 );
 ```
 
-## Props
-
 ### Tabs
 
 | Prop            | Type                      | Description                                                         | Default    |
@@ -171,8 +272,6 @@ const MyComponent = () => (
 
 \*If omitted you can still compose panels manually, but accessibility linkage (`aria-controls` / `id`) is provided when `withPanels` is true.
 
-### TabsList / Tab / TabPanel
-
 #### TabsList
 
 | Prop       | Type        | Description                | Default    |
@@ -198,7 +297,43 @@ const MyComponent = () => (
 
 ## Size Variants
 
-<Canvas of={Stories.Sizes} />
+```tsx
+// Example usage
+<>
+  <Tabs size="md" defaultValue="a">
+    <TabsList>
+      <Tab value="a">Medium A</Tab>
+      <Tab value="b">Medium B</Tab>
+      <Tab value="c">Medium C</Tab>
+    </TabsList>
+    <TabPanel value="a">
+      <BodyText>Medium A panel</BodyText>
+    </TabPanel>
+    <TabPanel value="b">
+      <BodyText>Medium B panel</BodyText>
+    </TabPanel>
+    <TabPanel value="c">
+      <BodyText>Medium C panel</BodyText>
+    </TabPanel>
+  </Tabs>
+  <Tabs size="lg" defaultValue="a" style={{ marginTop: 24 }}>
+    <TabsList>
+      <Tab value="a">Large A</Tab>
+      <Tab value="b">Large B</Tab>
+      <Tab value="c">Large C</Tab>
+    </TabsList>
+    <TabPanel value="a">
+      <BodyText>Large A panel</BodyText>
+    </TabPanel>
+    <TabPanel value="b">
+      <BodyText>Large B panel</BodyText>
+    </TabPanel>
+    <TabPanel value="c">
+      <BodyText>Large C panel</BodyText>
+    </TabPanel>
+  </Tabs>
+</>
+```
 
 ## Accessibility
 

package/{src/components/Textarea/Textarea.docs.mdx → public/llms/components/textarea.md}

@@ -1,15 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import { EmailMediumIcon } from '@utilitywarehouse/hearth-react-native-icons';
-import { Center, Pressable, Textarea, TextareaField } from '../..';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './Textarea.stories';
-
-<Meta title="Forms / Textarea" />
-
-<BackToTopButton />
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components-%26-Tokens?node-id=2356-5180&t=8rlYQ45xy8j75vwM-4" />
-
 # Textarea
 
 The input component is a text field that allows users to enter text, numbers, or other data. It is commonly used in forms and search fields.
@@ -24,21 +12,15 @@ The input component is a text field that allows users to enter text, numbers, or
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<Textarea placeholder="Textarea placeholder" validationStatus="initial" />
+```
 
 ## Usage
 
-<UsageWrap>
-  <Center>
-    <Textarea>
-      <TextareaField placeholder="Placeholder" onChange={() => console.log('###')} />
-    </Textarea>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Textarea } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -50,8 +32,6 @@ const MyComponent = () => {
 };
 ```
 
-## Props
-
 ### `Textarea`
 
 When using the component with basic usage the `Textarea` inherits all of the React Native [`TextTextarea` props](https://reactnative.dev/docs/textinput).
@@ -95,24 +75,12 @@ The `TextareaField` inherits all of the React Native [`TextTextarea` props](http
 | onFocus     | `function`             | `-`      | Callback function that is triggered when the input gains focus.   |
 | placeholder | `string`               | `-`      | The placeholder text for the input.                               |
 
-## Examples
-
 ### With Label and Helper Text
 
 The `Textarea` component can display a label and helper text by passing the appropriate props.
 
-<UsageWrap>
-  <Center>
-    <Textarea
-      label="Description"
-      helperText="Provide a detailed description"
-      placeholder="Enter your text here..."
-      onChange={() => console.log('###')}
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Textarea } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {
@@ -137,18 +105,8 @@ const MyComponent = () => {
 
 Set `resizable` to `true` to let people drag the bottom-right handle and increase the textarea height.
 
-<UsageWrap>
-  <Center>
-    <Textarea
-      label="Additional notes"
-      helperText="Drag the corner handle to resize"
-      placeholder="Enter your text here..."
-      resizable
-    />
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { Textarea } from '@utilitywarehouse/hearth-react-native';
 
 const MyComponent = () => {

package/{src/components/ThemedImage/ThemedImage.docs.mdx → public/llms/components/themed-image.md}

@@ -1,8 +1,3 @@
-import { Canvas, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
-import * as ThemedImageStories from './ThemedImage.stories';
-
-<Meta title="Utility Components / Themed Image" />
-
 # Themed Image
 
 The `ThemedImage` component automatically switches between light and dark mode images or SVG components based on the current theme. It's perfect for illustrations, logos, or any visual assets that need different appearances for light and dark modes.
@@ -21,7 +16,17 @@ The `ThemedImage` component automatically switches between light and dark mode i
 
 ## Basic Usage
 
-<Canvas of={ThemedImageStories.Playground} />
+```tsx
+// Example usage
+<Box gap="200">
+  <ThemedImage
+    // @ts-expect-error - This is a playground
+    light={<SpotBillingLight width={200} height={200} />}
+    // @ts-expect-error - This is a playground
+    dark={<SpotBillingDark width={200} height={200} />}
+  />
+</Box>
+```
 
 ## Props
 
@@ -41,13 +46,12 @@ The `ThemedImage` component automatically switches between light and dark mode i
 - `accessibilityLabel` - Text to be announced by screen readers
 - `testID` - Used to locate this view in end-to-end tests
 
-## Examples
-
 ### With SVG Assets
 
 The most common use case is with SVG components from the `@utilitywarehouse/hearth-svg-assets` package:
 
 ```tsx
+// Example usage
 import { View } from 'react-native';
 import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
 import SpotBillingDark from '@utilitywarehouse/hearth-svg-assets/lib/spot-billing-dark.svg';
@@ -58,13 +62,24 @@ function MyComponent() {
 }
 ```
 
-<Canvas of={ThemedImageStories.WithSpotIllustrations} />
+```tsx
+// Example usage
+<Box flexDirection="row" flexWrap="wrap" gap="200">
+  <ThemedImage
+    // @ts-expect-error - Ignore TS2322 for Storybook stories
+    light={<SpotBillingLight width={120} height={120} />}
+    // @ts-expect-error - Ignore TS2322 for Storybook stories
+    dark={<SpotBillingDark width={120} height={120} />}
+  />
+</Box>
+```
 
 ### With Regular Images
 
 You can also use regular image sources (not just SVG components):
 
 ```tsx
+// Example usage
 import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
 import logoLight from './assets/logo-light.png';
 import logoDark from './assets/logo-dark.png';
@@ -74,19 +89,57 @@ function MyComponent() {
 }
 ```
 
-<Canvas of={ThemedImageStories.WithRegularImages} />
+```tsx
+// Example usage
+<Box gap="200">
+  <ThemedImage
+    light={{
+      uri: pig,
+    }}
+    dark={{
+      uri: pig,
+    }}
+    width={200}
+    height={200}
+    style={{ width: 200, height: 200, borderRadius: 8 }}
+  />
+</Box>
+```
 
 ### With Custom Sizes
 
 When using SVG components, control the size by passing a `style` prop with `width` and `height` to the component:
 
-<Canvas of={ThemedImageStories.WithCustomSize} />
+```tsx
+// Example usage
+<Box flexDirection="row" flexWrap="wrap" gap="200" alignItems="center">
+  <ThemedImage
+    // @ts-expect-error - Ignore TS2322 for Storybook stories
+    light={<SpotBillingLight width={80} height={80} />}
+    // @ts-expect-error - Ignore TS2322 for Storybook stories
+    dark={<SpotBillingDark width={80} height={80} />}
+  />
+  <ThemedImage
+    // @ts-expect-error - Ignore TS2322 for Storybook stories
+    light={<SpotBillingLight width={120} height={120} />}
+    // @ts-expect-error - Ignore TS2322 for Storybook stories
+    dark={<SpotBillingDark width={120} height={120} />}
+  />
+  <ThemedImage
+    // @ts-expect-error - Ignore TS2322 for Storybook stories
+    light={<SpotBillingLight width={160} height={160} />}
+    // @ts-expect-error - Ignore TS2322 for Storybook stories
+    dark={<SpotBillingDark width={160} height={160} />}
+  />
+</Box>
+```
 
 ### With Accessibility
 
 Support screen readers and assistive technologies:
 
 ```tsx
+// Example usage
 import { View } from 'react-native';
 import { ThemedImage } from '@utilitywarehouse/hearth-react-native';
 import MascotEnergyDark from '@utilitywarehouse/hearth-svg-assets/lib/mascot-energy-dark.svg';
@@ -106,7 +159,19 @@ function MyComponent() {
 }
 ```
 
-<Canvas of={ThemedImageStories.WithAccessibility} />
+```tsx
+// Example usage
+<Box gap="200">
+  <ThemedImage
+    // @ts-expect-error - This is a playground
+    light={<MascotEnergyLight width={150} height={150} />}
+    // @ts-expect-error - This is a playground
+    dark={<MascotEnergyDark width={150} height={150} />}
+    accessible={true}
+    accessibilityLabel="Energy service mascot illustration"
+  />
+</Box>
+```
 
 ## Usage with svg-assets Package
 
@@ -158,6 +223,7 @@ npm install react-native-svg react-native-svg-transformer --save-dev
 Configure your `metro.config.js`:
 
 ```js
+// Example usage
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
 
 const config = {
@@ -176,6 +242,7 @@ module.exports = mergeConfig(getDefaultConfig(__dirname), config);
 Add TypeScript declarations (optional):
 
 ```typescript
+// Example usage
 // svg.d.ts
 declare module '*.svg' {
   import React from 'react';
@@ -193,8 +260,6 @@ declare module '*.svg' {
 4. **Consider performance** - Large SVG files may impact performance on older devices
 5. **Test in both modes** - Always test your themed images in both light and dark modes
 
-## Troubleshooting
-
 ### SVG not displaying
 
 Make sure you have configured `react-native-svg-transformer` correctly and that your SVG files are valid.

package/{src/components/TimePickerInput/TimePickerInput.docs.mdx → public/llms/components/time-picker-input.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { BottomSheetModalProvider, Center, FormField, TimePickerInput } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './TimePickerInput.stories';
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-6212&t=Jg2fPJPQNzOyspmQ-4" />
-
-<Meta title="Forms / Time Picker Input" />
-
-<BackToTopButton />
-
 # Time Picker Input
 
 `TimePickerInput` extends the base input to present a time picker trigger while still allowing direct text entry. It keeps the field inline and formats values with Day.js when needed.
@@ -21,22 +10,19 @@ import * as Stories from './TimePickerInput.stories';
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>{picker}</ViewWrap>
+</View>
+```
 
 ## Usage
 
 Wrap the component with `BottomSheetModalProvider` so the underlying picker can render its modal. Provide a controlled `value` if you want to react to changes immediately or let the component manage its own display string.
 
-<UsageWrap>
-  <BottomSheetModalProvider>
-    <Center>
-      <TimePickerInput placeholder="HH:mm" />
-    </Center>
-  </BottomSheetModalProvider>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useState } from 'react';
 import {
   BottomSheetModalProvider,
@@ -62,7 +48,7 @@ const BookingTimeField = () => {
 
 ## Props
 
-`TimePickerInput` inherits all React of the `Input` component props props (except `children`) and adds the following:
+`TimePickerInput` inherits all of the `Input` component's props (except `children`) and adds the following:
 
 | Prop                | Type                                                   | Default              | Description                                                                                               |
 | ------------------- | ------------------------------------------------------ | -------------------- | --------------------------------------------------------------------------------------------------------- |
@@ -88,25 +74,10 @@ const BookingTimeField = () => {
 
 When `format` is left as `'HH:mm'`, the input automatically inserts `:` as people type and requests a numeric keypad on supported platforms.
 
-## Examples
-
 ### With label and helper text
 
-<UsageWrap>
-  <BottomSheetModalProvider>
-    <Center>
-      <TimePickerInput
-        onClear={() => {}}
-        label="Meeting time"
-        helperText="Pick a time for your meeting"
-        validText="Time looks good!"
-        invalidText="Please enter a valid time"
-      />
-    </Center>
-  </BottomSheetModalProvider>
-</UsageWrap>
-
 ```tsx
+// Example usage
 <TimePickerInput
   onClear={() => {}}
   label="Meeting time"
@@ -118,17 +89,8 @@ When `format` is left as `'HH:mm'`, the input automatically inserts `:` as peopl
 
 ### With `FormField`
 
-<UsageWrap>
-  <BottomSheetModalProvider>
-    <Center>
-      <FormField label="Meeting time" helperText="Pick a time">
-        <TimePickerInput onClear={() => {}} />
-      </FormField>
-    </Center>
-  </BottomSheetModalProvider>
-</UsageWrap>
-
 ```tsx
+// Example usage
 <FormField label="Meeting time" helperText="Pick a time">
   <TimePickerInput onClear={() => {}} />
 </FormField>

package/{src/components/TimePicker/TimePicker.docs.mdx → public/llms/components/time-picker.md}

@@ -1,14 +1,3 @@
-import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks';
-import { Button, Center } from '../../';
-import { BackToTopButton, UsageWrap, ViewFigmaButton } from '../../../docs/components';
-import * as Stories from './TimePicker.stories';
-
-<ViewFigmaButton url="https://www.figma.com/design/6NKZXZhFSExXrcbBgc6zTR/Hearth-Components---Tokens?node-id=10334-16770&t=Jg2fPJPQNzOyspmQ-4" />
-
-<Meta title="Components / Time Picker" />
-
-<BackToTopButton />
-
 # Time Picker
 
 `TimePicker` presents a wheel-based time selector inside a bottom sheet, letting people pick hours and minutes without leaving the current context. It supports 12-hour and 24-hour clocks and returns a JavaScript `Date` whenever the selection changes.
@@ -20,21 +9,29 @@ import * as Stories from './TimePicker.stories';
 
 ## Playground
 
-<Canvas of={Stories.Playground} />
-
-<Controls of={Stories.Playground} />
+```tsx
+// Example usage
+<View style={Platform.OS === 'web' ? { width: 400, height: 400 } : {}}>
+  <ViewWrap>
+    <Button onPress={() => modalRef.current?.present()}>Show Time Picker</Button>
+    <TimePicker
+      ref={modalRef}
+      date={selected}
+      use12Hours={args.use12Hours}
+      minuteInterval={args.minuteInterval}
+      onChange={({ date }) => setSelected(date)}
+      onCancel={() => setSelected(undefined)}
+    />
+  </ViewWrap>
+</View>
+```
 
 ## Usage
 
 Use the `TimePicker` with a ref to present the bottom sheet when people tap a trigger button.
 
-<UsageWrap>
-  <Center>
-    <Button onPress={() => {}}>Pick a time</Button>
-  </Center>
-</UsageWrap>
-
 ```tsx
+// Example usage
 import { useRef, useState } from 'react';
 import {
   BottomSheetModalProvider,