### Development Setup

Source: https://github.com/ensdomains/thorin/blob/main/README.md

Clones the Thorin repository, installs dependencies using pnpm, and starts the development server.

```bash
gh clone repo @ensdomains/thorin
pnpm i
pnpm dev
```

--------------------------------

### Setup Thorin Project

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/guides/development.mdx

Steps to clone the Thorin repository, install dependencies using pnpm, and start the development server. This is the initial setup required for contributing to the project.

```bash
gh repo clone @ensdomains/thorin
cd thorin
pnpm i
```

--------------------------------

### Install Thorin Package

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/index.mdx

Installs the Thorin UI library and its peer dependencies using pnpm. Ensure you have React and ReactDOM installed.

```sh
pnpm i react react-dom @ensdomains/thorin@next
```

--------------------------------

### Toast Component Live Example

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/organisms/Toast.docs.mdx

Demonstrates a live, interactive example of the Toast component. It includes a button to toggle the toast's visibility and shows how to configure its title, description, variant, and close behavior.

```tsx
<>
  <Button onClick={() => toggleState('toast')}>Show Toast</Button>
  <Toast
    description="This is an example toast."
    open={getState('toast')}
    title="Example Toast"
    variant="desktop"
    onClose={() => setState('toast', false)}
  >
    <Button shadowless size="small">
      Click Me
    </Button>
  </Toast>
</>
```

--------------------------------

### SkeletonGroup Live Example

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/SkeletonGroup.docs.mdx

Demonstrates the SkeletonGroup component in a live React example. It wraps multiple Skeleton components and allows toggling the loading state via a button.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <SkeletonGroup loading={getState('loading')}>
    <Skeleton>
      <Heading level="1">Foo Bar Baz</Heading>
    </Skeleton>
    <Skeleton>
      <Typography>The quick brown fox jumped over the lazy dogs.</Typography>
    </Skeleton>
  </SkeletonGroup>
  <VisuallyHidden>{setDefaultState('loading', true)}</VisuallyHidden>
  <Button size="small" onClick={() => toggleState('loading')}> 
    Toggle Skeleton Group
  </Button>
</Box>
```

--------------------------------

### Install Thorin Package

Source: https://github.com/ensdomains/thorin/blob/main/README.md

Installs the Thorin design system package along with its React dependencies using pnpm.

```bash
pnpm i react react-dom @ensdomains/thorin@next
```

--------------------------------

### Basic Dropdown Example

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Dropdown.docs.mdx

Demonstrates a basic Dropdown component with a label and a list of items, including icons and click handlers.

```tsx
<Dropdown
  align="left"
  items={[
    {
      label: 'Dashboard',
      onClick: () => null,
      color: 'text',
      icon: DotGridSVG,
    },
    {
      label: 'Disconnect',
      onClick: () => null,
      color: 'red',
      icon: ExitSVG,
    },
  ]}
  label="Account"
/>
```

--------------------------------

### Basic Thorin Card Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/Card.docs.mdx

Shows a simple Card component containing a Heading and Typography. This example requires the Thorin UI library to be installed and configured.

```tsx
<Card>
  <Heading>Hello World</Heading>
  <Typography>The quick brown fox…</Typography>
</Card>
```

--------------------------------

### Profile Component API Documentation

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Profile.docs.mdx

Detailed API documentation for the Thorin Profile component, including all available props, their types, descriptions, and usage examples.

```APIDOC
Profile:
  Props:
    address: string
      - The Ethereum wallet address to display.
      - Required.
    ensName?: string
      - The ENS name associated with the address.
      - Optional.
    avatar?: string
      - URL for a custom avatar image.
      - Optional.
    size?: "small" | "medium" | "large"
      - Controls the visual size of the profile display.
      - Defaults to "medium".
    dropdownItems?: DropdownItem[]
      - An array of objects to populate a dropdown menu.
      - Each object should conform to the DropdownItem interface.
      - Optional.
    showIndicator?: boolean
      - Controls the visibility of the indicator on dropdown items.
      - This prop is deprecated; use `showIndicator` within `dropdownItems` instead.
      - Optional.
    indicatorColor?: "blue" | "green" | "indigo" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "grey" | "accent" | "accentSecondary" | "accentSecondaryHover" | "accentTertiary" | "accentText" | "accentGradient" | "background" | "backgroundHide" | "backgroundSecondary" | "backgroundTertiary" | "border" | "borderSecondary" | "borderTertiary" | "foreground" | "foregroundSecondary" | "foregroundSecondaryHover" | "foregroundTertiary" | "groupBackground" | "groupBorder" | "gradients" | "text" | "textPlaceholder" | "textSecondary" | "textTertiary"
      - Sets a custom color for the indicator on dropdown items.
      - Optional.

  DropdownItem:
    label: string
      - The text label for the dropdown menu item.
      - Required.
    onClick: () => void
      - An event handler function to be called when the item is clicked.
      - Required.
    color?: "blue" | "green" | "indigo" | "orange" | "pink" | "purple" | "red" | "teal" | "yellow" | "grey" | "accent" | "accentSecondary" | "accentSecondaryHover" | "accentTertiary" | "accentText" | "accentGradient" | "background" | "backgroundHide" | "backgroundSecondary" | "backgroundTertiary" | "border" | "borderSecondary" | "borderTertiary" | "foreground" | "foregroundSecondary" | "foregroundSecondaryHover" | "foregroundTertiary" | "groupBackground" | "groupBorder" | "gradients" | "text" | "textPlaceholder" | "textSecondary" | "textTertiary"
      - The color of the label or associated icon.
      - Optional.
    icon?: React.ReactNode
      - An optional icon component to display next to the label.
      - Optional.
    showIndicator?: boolean
      - If true, displays an indicator next to the item.
      - Optional.
```

--------------------------------

### Example Thorin Button Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/index.mdx

Shows a practical example of using the Thorin Button component with a prefix icon (LockSVG) and primary variant, within a Box layout for alignment and spacing.

```tsx
<Box alignItems="center" gap="4">
  <div style={{ width: '180px' }}>
    <Button prefix={LockSVG} variant="primary">
      Connect Wallet
    </Button>
  </div>
</Box>
```

--------------------------------

### Setup ThemeProvider with Light Theme

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/index.mdx

Wraps the root of your React application with Thorin's ThemeProvider. It requires importing ThorinGlobalStyles and passing a theme object, such as lightTheme, to the provider.

```tsx
import React, { useState } from 'react'
import { ThemeProvider } from '@ensdomains/thorin'
import '@ensdomains/thorin/dist/thorin.css'

const App = () => {
  return (
    <ThemeProvider theme={lightTheme}>
      {children}
    </ThemeProvider>
  )
}
```

--------------------------------

### Import Thorin Toggle Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Toggle.docs.mdx

Imports the Toggle component from the '@ensdomains/thorin' library. This is the initial setup required before using the component in your application.

```tsx
import { Toggle } from '@ensdomains/thorin'
```

--------------------------------

### Basic FieldSet Example

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/FieldSet.docs.mdx

Demonstrates the fundamental usage of the FieldSet component, including a legend and nested Input elements for basic form structure.

```tsx
<FieldSet legend="Token">
  <Input label="Name" placeholder="Ethereum Name Service" />
  <Input
    label="Symbol"
    placeholder="ENS"
    prefix="$"
    textTransform="uppercase"
  />
</FieldSet>
```

--------------------------------

### Setup ThemeProvider with Dark Theme

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/index.mdx

Configures the application's root with Thorin's ThemeProvider, specifically utilizing the dark theme. This involves importing darkTheme and passing it to the ThemeProvider component.

```tsx
import React, { useState } from 'react'
import { ThemeProvider, darkTheme } from '@ensdomains/thorin'
import '@ensdomains/thorin/dist/thorin.css'

const App = () => {
  return (
    <ThemeProvider theme={darkTheme}>
      {children}
    </ThemeProvider>
  )
}
```

--------------------------------

### Basic Thorin Select Example

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Select.docs.mdx

Demonstrates a functional Thorin Select component with various options, including prefixes (like EthSVG, WalletSVG, MoonSVG, CopySVG) and a disabled option. It showcases the autocomplete and placeholder props for user interaction.

```tsx
<Card>
  <Select
    autocomplete
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      {
        value: '4',
        label: 'Four',
        prefix: <CopySVG />,
        disabled: true,
      },
      { value: '5', label: 'Four', prefix: <CopySVG /> },
    ]}
    placeholder="Select an option..."
    tabIndex="2"
  />
</Card>
```

--------------------------------

### Select Component Sizes

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Select.docs.mdx

Demonstrates how to use the `size` prop to control the visual size of the Select component. Examples for 'small' and 'medium' sizes are provided.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <Select
    label="Small"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
    ]}
    size="small"
  />
  <Select
    label="Medium"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
    ]}
    size="medium"
  />
</Box>
```

--------------------------------

### BackdropSurface Usage Example

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/BackdropSurface.docs.mdx

Demonstrates the usage of the BackdropSurface component within a Portal, containing a Card with Typography. This shows how to render content on a backdrop, providing a visual layer for modal interfaces.

```tsx
<Portal>
  <BackdropSurface>
    <Card>
      <Typography>This text will be highlighted</Typography>
    </Card>
  </BackdropSurface>
</Portal>
```

--------------------------------

### Button States: Loading and Disabled

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/Button.docs.mdx

Demonstrates the Button's interactive states, including 'loading' and 'disabled'. The example shows how to toggle the loading state programmatically.

```tsx
<Box display="flex" flexDirection="row" flexWrap="wrap" gap="4">
  <Button loading width="fit">Loading</Button>
  <Button disabled width="fit">Disabled</Button>
  <Button
    disabled={getState('loading')}
    loading={getState('loading')}
    onClick={() => {
      toggleState('loading')
      setTimeout(() => toggleState('loading'), 1000)
    }}
    width="fit"
  >
    Click Me
  </Button>
</Box>
```

--------------------------------

### Basic Thorin Dialog Example

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/organisms/Dialog.docs.mdx

Demonstrates the basic implementation of the Thorin Dialog component. It includes a button to toggle the dialog's visibility and displays a title, subtitle, and content. The dialog can be dismissed via a provided onDismiss handler.

```tsx
<>
  <Button onClick={() => toggleState('dialog')}>Open Dialog</Button>
  <Dialog
    currentStep={1}
    open={getState('dialog')}
    subtitle="Dialog Subtitle"
    title="Dialog Title"
    onDismiss={() => toggleState('dialog')}
  >
    <Dialog.Content>
      <Typography>Dialog text content.</Typography>
    </Dialog.Content>
    <Dialog.Footer
      leading={<Button colorStyle="accentSecondary">Leading</Button>}
      trailing={<Button>Trailing</Button>}
    />
  </Dialog>
</>
```

--------------------------------

### Basic RadioButtonGroup Example (TSX)

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/RadioButtonGroup.docs.mdx

Demonstrates the basic usage of the RadioButtonGroup component from @ensdomains/thorin. It shows how to manage the state of selected radio buttons using `value` and `onChange` props, with dependencies on `Card`, `FieldSet`, and `RadioButton` components.

```tsx
import { RadioButtonGroup, Card, FieldSet, RadioButton } from '@ensdomains/thorin';

// Assuming getState and setState are defined elsewhere for state management
// Example usage:
<Card shadow>
  <FieldSet
    legend={`Radio Buttons - Current Value: ${getState('radiobuttongroup') || '30'}`}
  >
    <RadioButtonGroup
      value={getState('radiobuttongroup') || '30'}
      onChange={(e) => setState('radiobuttongroup', e.target.value)}
    >
      <RadioButton label="Label 10" name="RadioButtonGroup" value="10" />
      <RadioButton label="Label 20" name="RadioButtonGroup" value="20" />
      <RadioButton label="Label 30" name="RadioButtonGroup" value="30" />
    </RadioButtonGroup>
  </FieldSet>
</Card>
```

--------------------------------

### Dialog Components with 'as' Prop in TSX

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/organisms/Dialog.docs.mdx

Demonstrates the basic structure of a Thorin UI Dialog component. It includes a heading, content area, and footer, with an example of using the 'as' prop on the content to render it as a form. This snippet requires state management functions like 'getState' and 'toggleState'.

```tsx
<>
  <Button onClick={() => toggleState('dialog-components')}>
    Dialog Components
  </Button>
  <Dialog
    open={getState('dialog-components')}
    variant="blank"
    onDismiss={() => toggleState('dialog-components')}
  >
    <Dialog.Heading title="Heading" />
    <Dialog.Content as="form" onSubmit={() => alert('submitted')}> 
    <Typography>Click this button to simulate an submit</Typography>
    <Button type="submit">Submit</Button>
    </Dialog.Content>
    <Dialog.Footer
      leading={<Button colorStyle="accentSecondary">Leading</Button>}
      trailing={<Button>Trailing</Button>}
    />
  </Dialog>
</>
```

--------------------------------

### Basic Typography Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/Typography.docs.mdx

Demonstrates the basic usage of the Typography component by rendering the text 'Hello World'. It shows how to instantiate the component.

```tsx
<Typography>Hello World</Typography>
```

--------------------------------

### Inline RadioButtonGroup Example (TSX)

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/RadioButtonGroup.docs.mdx

Illustrates the inline layout option for the RadioButtonGroup component. This example showcases how to arrange radio buttons horizontally using the `inline` prop, managing state similarly to the basic example.

```tsx
import { RadioButtonGroup, Card, FieldSet, RadioButton } from '@ensdomains/thorin';

// Assuming getState and setState are defined elsewhere for state management
// Example usage:
<Card shadow>
  <FieldSet
    legend={`Radio Buttons - Current Value: ${getState('radiobuttongroup') || '30'}`}
  >
    <RadioButtonGroup
      inline
      value={getState('radiobuttongroup') || '30'}
      onChange={(e) => setState('radiobuttongroup', e.target.value)}
    >
      <RadioButton
        label="Label 10"
        name="RadioButtonGroup"
        value="10"
        width="max"
      />
      <RadioButton
        label="Label 20"
        name="RadioButtonGroup"
        value="20"
        width="max"
      />
      <RadioButton
        label="Label 30"
        name="RadioButtonGroup"
        value="30"
        width="max"
      />
    </RadioButtonGroup>
  </FieldSet>
</Card>
```

--------------------------------

### Build Entire Project

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/guides/development.mdx

Command to build the entire Thorin project, including components and any other necessary assets. This is typically used before deployment or for a full project check.

```bash
pnpm build
```

--------------------------------

### Basic Slider Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Slider.docs.mdx

Shows a basic example of rendering the Slider component with a label. This component provides a ranged slider input functionality.

```tsx
<Slider label="slider" />
```

--------------------------------

### Basic Helper Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Helper.docs.mdx

Demonstrates the basic usage of the Helper component by rendering it with simple text content. It shows how to display a default helper message.

```tsx
<Helper>This is an example helper.</Helper>
```

--------------------------------

### Basic Input with Icons and Affixes

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Input.docs.mdx

Demonstrates a basic Input component with a label, placeholder, and custom prefix and suffix elements, including an icon displayed to the left.

```tsx
<Input
  icon={<MagnifyingGlassSimpleSVG />}
  label="Wallet Address"
  placeholder="0xA0Cf…251e"
  prefix="hello"
  suffix="world"
/>
```

--------------------------------

### ScrollBox Usage Example

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/ScrollBox.docs.mdx

Demonstrates how to use the ScrollBox component with custom height and content. It allows for scrollable content within a defined area.

```tsx
<ScrollBox style={{ height: '100px' }}>
  <Typography>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque cursus
    posuere lacinia. Proin mollis nisl a lacus mollis, a volutpat tortor
    consectetur. Vivamus mattis augue eu nulla molestie, a euismod nunc
    placerat. Fusce vitae elit sed dolor auctor faucibus luctus condimentum
    risus. Aenean pharetra mauris sodales ligula sodales, a tristique magna
    rhoncus. Fusce sit amet arcu suscipit, molestie dolor nec, blandit ipsum.
    Sed sodales blandit elit eget ultrices. Aliquam non blandit lacus. Etiam
    eget tellus vitae risus vestibulum pulvinar at a nibh. Orci varius natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
    volutpat elit odio. Fusce placerat nibh nec ante aliquam, id dictum turpis
    tempor. Sed maximus quam ut ipsum blandit, vel lobortis neque venenatis.
    Maecenas dignissim massa nec risus vestibulum bibendum. Duis malesuada, est
    dapibus porttitor aliquet, massa arcu fermentum nunc, nec feugiat erat magna
    viverra orci. Suspendisse eu ultrices mauris. Aliquam scelerisque mollis
    orci id volutpat. Nunc ac vestibulum odio, vitae feugiat ligula. Nunc
    lacinia nisi in gravida volutpat. Vivamus dui ex, ornare ut ante vel,
    dapibus tempor est. Proin congue sapien non dolor hendrerit, in dignissim
    risus scelerisque. Pellentesque quis egestas ex. Suspendisse quis diam nec
    dui sagittis sollicitudin. In hac habitasse platea dictumst. Vestibulum
    vestibulum dignissim tincidunt. Donec congue nibh lectus, nec facilisis
    tortor tempus sit amet. Phasellus varius mattis metus porta posuere. Integer
    posuere dapibus libero. Maecenas euismod sem sed blandit consectetur.
  </Typography>
</ScrollBox>
```

--------------------------------

### Basic CountdownCircle Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/CountdownCircle.docs.mdx

Demonstrates the fundamental usage of the CountdownCircle component. It displays a countdown timer starting from a specified number of seconds.

```tsx
<CountdownCircle countdownSeconds={30} />
```

--------------------------------

### Render ThemeToggle Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/ThemeToggle.docs.mdx

Renders the ThemeToggle component, which provides a user interface for selecting between three distinct theme states. This example shows a basic usage.

```tsx
<ThemeToggle />
```

--------------------------------

### Basic Spinner Usage in Thorin

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/Spinner.docs.mdx

Demonstrates the basic import and usage of the Spinner component from the '@ensdomains/thorin' library. This is the default way to display a loading spinner.

```tsx
import { Spinner } from '@ensdomains/thorin'

<Spinner />
```

--------------------------------

### Import Thorin Tooltip Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Tooltip.docs.mdx

Imports the Tooltip component and its associated props type from the '@ensdomains/thorin' library. This is a common starting point for using the component in a React application.

```tsx
import { Tooltip, TooltipProps } from '@ensdomains/thorin'
```

--------------------------------

### Basic VisuallyHidden Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/VisuallyHidden.docs.mdx

Renders the VisuallyHidden component with 'Hello World' as its content. This content will be visually hidden but still accessible to screen readers.

```tsx
<VisuallyHidden>Hello World</VisuallyHidden>
```

--------------------------------

### Toggle Component Disabled States

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Toggle.docs.mdx

Demonstrates how to disable the Toggle component, preventing user interaction. This example shows disabled toggles in various sizes.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <Toggle disabled size="small" />
  <Toggle disabled size="medium" />
  <Toggle disabled size="large" />
</Box>
```

--------------------------------

### Createable Select Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Select.docs.mdx

Demonstrates enabling the `createable` prop, which allows users to add new options to the Select component if they are not already present.

```tsx
<>
  <Card>
    <Select
      createable
      options={[
        { value: '0', label: 'Zero' },
        { value: '1', label: 'One', prefix: <EthSVG /> },
        { value: '2', label: 'Two', prefix: <WalletSVG /> },
        { value: '3', label: 'Three', prefix: <MoonSVG /> },
        { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
      ]}
    />
  </Card>
</>
```

--------------------------------

### Select Component Direction

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Select.docs.mdx

Illustrates controlling the dropdown direction of the Select component using the `direction` prop. The example shows setting the direction to 'up'.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <div style={{ height: '200px' }} />

  <Select
    createable
    direction="up"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      {
        value: '4',
        label: 'Four',
        prefix: <CopySVG />,
        disabled: true,
      },
      { value: '5', label: 'Four', prefix: <CopySVG /> },
    ]}
    tabIndex="2"
  />
</Box>
```

--------------------------------

### Thorin Tooltip Basic Usage with Placements

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Tooltip.docs.mdx

Demonstrates the basic usage of the Thorin Tooltip component, showcasing different placement options (top, left, bottom, right) and their corresponding target elements. It highlights how to configure content, target IDs, and dimensions for various display scenarios.

```tsx
<div
  style={{
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    gap: 20,
  }}
>
  <Tooltip
    additionalGap={0}
    content={<div>Content</div>}
    mobilePlacement="top"
    mobileWidth={250}
    placement="top"
    targetId="buttonIdTop"
    width={250}
  >
    <Button
      id="buttonIdTop"
      psuedoDisabled
      shadowless
      shouldShowTooltipIndicator
      style={{ width: 250 }}
    >
      Top
    </Button>
  </Tooltip>
  <Tooltip
    content={<div>Content</div>}
    mobilePlacement="left"
    mobileWidth={50}
    placement="left"
    targetId="buttonIdLeft"
    width={100}
  >
    <Button
      id="buttonIdLeft"
      psuedoDisabled
      shadowless
      shouldShowTooltipIndicator
      style={{ width: 250 }}
    >
      Left
    </Button>
  </Tooltip>
  <Tooltip
    additionalGap={0}
    content={<div>Content</div>}
    mobilePlacement="bottom"
    mobileWidth={250}
    open
    placement="bottom"
    targetId="buttonIdBottom"
    width={250}
  >
    <Button
      id="buttonIdBottom"
      psuedoDisabled
      shadowless
      shouldShowTooltipIndicator
      style={{ width: 250 }}
    >
      Bottom
    </Button>
  </Tooltip>
  <Tooltip
    content={<div>Content</div>}
    mobilePlacement="right"
    mobileWidth={50}
    open
    placement="right"
    targetId="buttonIdRight"
    width={100}
  >
    <Button
      id="buttonIdRight"
      psuedoDisabled
      shadowless
      shouldShowTooltipIndicator
      style={{ width: 250 }}
    >
      Right
    </Button>
  </Tooltip>
</div>
```

--------------------------------

### SkeletonGroup Props

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/SkeletonGroup.docs.mdx

API documentation for the SkeletonGroup component's props. This includes details on how to manage the loading state and structure nested content.

```APIDOC
SkeletonGroup:
  Props:
    loading: boolean
      - Description: Controls whether the skeletons are displayed or the actual content is rendered.
      - Type: boolean
      - Required: Yes
    children: ReactNode
      - Description: The content to be displayed, typically including multiple Skeleton components.
      - Type: ReactNode
      - Required: Yes

  Usage:
    The SkeletonGroup component is used to group related skeleton loaders. When the `loading` prop is true, all direct children that are Skeleton components will be displayed. When `loading` is false, the actual content within the Skeleton components will be rendered.

  Related Components:
    - Skeleton: Used as direct children within SkeletonGroup to represent individual loading states.
```

--------------------------------

### CurrencyToggle Disabled States

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/CurrencyToggle.docs.mdx

Demonstrates the disabled state of the CurrencyToggle component. This includes examples of both checked and unchecked toggles in a disabled state, as well as different sizes.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <CurrencyToggle disabled />
  <CurrencyToggle checked disabled />
  <CurrencyToggle disabled size="small" />
  <CurrencyToggle checked disabled size="small" />
</Box>
```

--------------------------------

### Disabled RadioButton States

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/RadioButton.docs.mdx

Shows how to disable RadioButton components using the 'disabled' prop. This example presents both a checked and an unchecked disabled state, arranged vertically with spacing.

```tsx
import { RadioButton, Box } from '@ensdomains/thorin'

<Box display="flex" flexDirection="column" gap="4">
  <RadioButton checked disabled label="Checked" />
  <RadioButton disabled label="UnChecked" />
</Box>
```

--------------------------------

### Build Components Library

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/guides/development.mdx

Command to build the components library, which is necessary for changes to appear in the documentation files. This command compiles the React components into a usable library format.

```bash
pnpm build:components
```

--------------------------------

### Import CurrencyToggle

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/CurrencyToggle.docs.mdx

Imports the CurrencyToggle component from the @ensdomains/thorin library. This is typically the first step before using the component.

```tsx
import { CurrencyToggle } from '@ensdomains/thorin'
```

--------------------------------

### Run Tests

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/guides/development.mdx

Command to execute the project's test suite. This is a crucial step in the development workflow to ensure code quality and functionality.

```bash
pnpm test
```

--------------------------------

### Thorin Tooltip Background Customization

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Tooltip.docs.mdx

Demonstrates how to customize the background color of the Thorin Tooltip component using the 'background' prop. This example shows the tooltip with an 'indigo' background applied to various placements.

```tsx
<Box display="flex" flexDirection="column"
  alignItems="center" gap={"4"}
>
  <Tooltip
    additionalGap={0}
    content={<div>Content</div>}
    mobilePlacement="top"
    mobileWidth={250}
    placement="top"
    targetId="buttonIdTop"
    width={250}
    background="indigo"
  >
    <Button
      id="buttonIdTop"
      shadowless
      style={{ width: 250 }}
    >
      Top
    </Button>
  </Tooltip>
  <Tooltip
    content={<div>Content</div>}
    mobilePlacement="left"
    mobileWidth={50}
    placement="left"
    targetId="buttonIdLeft"
    width={100}
    background="indigo"
  >
    <Button
      id="buttonIdLeft"
      shadowless
      style={{ width: 250 }}
    >
      Left
    </Button>
  </Tooltip>
  <Tooltip
    additionalGap={0}
    content={<div>Content</div>}
    mobilePlacement="bottom"
    mobileWidth={250}
    open
    placement="bottom"
    targetId="buttonIdBottom"
    width={250}
    background="indigo"
  >
    <Button
      id="buttonIdBottom"
      shadowless
      style={{ width: 250 }}
    >
      Bottom
    </Button>
  </Tooltip>
  <Tooltip
    content={<div>Content</div>}
    mobilePlacement="right"
    mobileWidth={50}
    open
    placement="right"
    targetId="buttonIdRight"
    width={100}
    background="indigo"
  >
    <Button
      id="buttonIdRight"
      shadowless
      style={{ width: 250 }}
    >
      Right
    </Button>
  </Tooltip>
</Box>
```

--------------------------------

### Thorin Card with Dividers

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/Card.docs.mdx

Demonstrates using the Card component with CardDivider elements to separate content sections. This example shows a card with a title and two content blocks separated by dividers.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <Card title="Heading" variant="desktop">
    <CardDivider />
    <Typography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </Typography>
    <CardDivider />
    <Typography>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </Typography>
  </Card>
</Box>
```

--------------------------------

### Import ThemeToggle Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/ThemeToggle.docs.mdx

Imports the ThemeToggle component from the @ensdomains/thorin library. This is typically the first step before using the component in your application.

```tsx
import { ThemeToggle } from '@ensdomains/thorin'
```

--------------------------------

### RadioButton Colors

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/RadioButton.docs.mdx

Illustrates how to apply different color themes to RadioButton components using the 'color' prop. This example showcases primary accent, red, and yellow color variants within a FieldSet.

```tsx
import { RadioButton, Card, FieldSet } from '@ensdomains/thorin'

<Card >
  <FieldSet legend="Radio Buttons">
    <RadioButton
      color="accentPrimary"
      label="Label"
      name="RadioButtonGroup"
      value="10"
    />
    <RadioButton
      color="redPrimary"
      label="Label"
      name="RadioButtonGroup"
      value="10"
    />
    <RadioButton
      color="yellowPrimary"
      label="Label"
      name="RadioButtonGroup"
      value="10"
    />
  </FieldSet>
</Card>
```

--------------------------------

### Import Toast Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/organisms/Toast.docs.mdx

Imports the Toast component from the '@ensdomains/thorin' library. This is the initial step required to use the Toast component in your application.

```tsx
import { Toast } from '@ensdomains/thorin'
```

--------------------------------

### Clearable Input Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Input.docs.mdx

Demonstrates the `clearable` prop for the Input component, which adds a button to easily clear the input's current value. Includes examples for both enabled and explicitly disabled clearing.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <Input
    clearable
    label="Clearable input"
    placeholder="Foo bar baz"
    type="text"
  />
  <Input
    clearable={false}
    label="Not clearable input"
    placeholder="Foo bar baz"
  />
</Box>
```

--------------------------------

### Basic Textarea Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Textarea.docs.mdx

Demonstrates the basic usage of the Textarea component with a label and placeholder.

```tsx
<Textarea
  label="Why are you entering $WRITE Race?"
  placeholder="Share your story…"
/>
```

--------------------------------

### Thorin Select Alignment Options

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Select.docs.mdx

Demonstrates the 'align' prop for the Thorin Select component, showing how to align the dropdown to the 'left' or 'right'. This example uses a flexbox layout to display two Select components side-by-side.

```tsx
<Box display="flex" flexDirection="row" justifyContent="space-between" gap="4">
  <div>
    <Select
      align="left"
      label="Label text"
      options={[
        { value: '0', label: 'Zero' },
        { value: '1', label: 'One', prefix: <EthSVG /> },
        { value: '2', label: 'Two', prefix: <WalletSVG /> },
        { value: '3', label: 'Three', prefix: <MoonSVG /> },
        { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
      ]}
    />
  </div>
  <div>
    <Select
      align="right"
      label="Label text"
      options={[
        { value: '0', label: 'Zero' },
        { value: '1', label: 'One', prefix: <EthSVG /> },
        { value: '2', label: 'Two', prefix: <WalletSVG /> },
        { value: '3', label: 'Three', prefix: <MoonSVG /> },
        { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
      ]}
    />
  </div>
</Box>
```

--------------------------------

### Basic CurrencyToggle Usage

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/CurrencyToggle.docs.mdx

Demonstrates the default and basic usage of the CurrencyToggle component. This shows the component rendered without any specific props.

```tsx
<CurrencyToggle />
```

--------------------------------

### Export Component and Props

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/guides/development.mdx

Example of how to export a React component and its associated Props type from an index file within a component's directory. This ensures components are properly exposed for use elsewhere in the project.

```tsx
export { ComponentName } from './ComponentName'
export type { Props as ComponentNameProps } from './ComponentName'
```

--------------------------------

### Import Helper Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Helper.docs.mdx

Imports the Helper component from the '@ensdomains/thorin' library. This is typically the first step to use the component in a React application.

```tsx
import { Helper } from '@ensdomains/thorin'
```

--------------------------------

### Input with Description

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Input.docs.mdx

Shows an Input component configured with a descriptive text displayed below the label, providing additional context or instructions to the user.

```tsx
<Input
  description="The Ethereum address where raised funds will be sent from the crowdfund."
  label="Wallet Address"
  placeholder="0xA0Cf…251e"
/>
```

--------------------------------

### Avatar Placeholder and Error Handling

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/Avatar.docs.mdx

Shows the Avatar component's behavior when the `src` prop is not provided or when the image URL is invalid. In these cases, a placeholder is displayed, ensuring a consistent UI. Examples include an undefined `src` and a broken link.

```tsx
<Box display="flex" alignItems="center" flexDirection="row" flexWrap="wrap" gap="4">
  <Box display="flex" alignItems="center" gap="4">
    <Typography variant="label">undefined src</Typography>
    <div style={{ width: '100px' }}>
      <Avatar />
    </div>
  </Box>
  <Box display="flex" alignItems="center" gap="4">
    <Typography variant="label">broken Link</Typography>
    <div style={{ width: '100px' }}>
      <Avatar src="http://thisisa.com/brockenLink.jpg" />
    </div>
  </Box>
</Box>
```

--------------------------------

### Import BackdropSurface

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/BackdropSurface.docs.mdx

Imports the BackdropSurface component from the '@ensdomains/thorin' library. This is typically the first step before using the component in your application.

```tsx
import { BackdropSurface } from '@ensdomains/thorin'
```

--------------------------------

### Thorin Select with Show Dot Feature

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Select.docs.mdx

Illustrates the 'showDot' prop on the Thorin Select component, which adds a visual indicator. Examples include a default state, a validated state, an error state with a message, and a disabled state, all using the showDot feature.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <Select
    description="Select with placeholder"
    label="Placeholder"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
    ]}
    placeholder="Select option..."
    showDot
  />
  <Select
    description="Select with placeholder"
    label="Validated"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
    ]}
    placeholder="Select option..."
    showDot
    validated
    value="2"
  />
  <Select
    description="Select with placeholder"
    error="Error message"
    label="Error"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
    ]}
    placeholder="Select option..."
    showDot
  />
  <Select
    description="Select with placeholder"
    disabled
    label="Disabled"
    options={[
      { value: '0', label: 'Zero' },
      { value: '1', label: 'One', prefix: <EthSVG /> },
      { value: '2', label: 'Two', prefix: <WalletSVG /> },
      { value: '3', label: 'Three', prefix: <MoonSVG /> },
      { value: '4', label: 'Four', prefix: <CopySVG />, disabled: true },
    ]}
    placeholder="Select option..."
    showDot
  />
</Box>
```

--------------------------------

### Import Thorin Card Component

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/atoms/Card.docs.mdx

Demonstrates how to import the Card component and other necessary UI elements from the @ensdomains/thorin library.

```tsx
import { Card, Heading, Typography, Box, CardDivider } from '@ensdomains/thorin'
```

--------------------------------

### Helper Component Alert Variations

Source: https://github.com/ensdomains/thorin/blob/main/docs/src/reference/mdx/molecules/Helper.docs.mdx

Shows how to use the `alert` prop on the Helper component to display different types of messages: info, warning, and error. This allows for semantic styling of helper messages.

```tsx
<Box display="flex" flexDirection="column" gap="4">
  <Helper alert="info">This is an info helper.</Helper>
  <Helper alert="warning">This is a warning helper.</Helper>
  <Helper alert="error">This is an error helper.</Helper>
</Box>
```