# Hopper Documentation for LLMs

> The complete documentation of Hopper Design System. Follow each section to get full details. Explore Workleap's Design System, where icons, tokens, and components are handpicked for ultimate simplicity and accessibility.

## Getting Started

> This section offers comprehensive guides for installing the Hopper Design System across various frameworks.

### Installation

Learn how to install and set up Hopper in your project

Hopper is [Workleap](https://workleap.com/)'s official design system, offering a robust collection of [React components](/components/component-list.md), [design tokens](/tokens/overview/introduction.md) and [icons](/icons/overview/introduction.md) to streamline application development and maintain brand consistency. We've put together a guide to help you quickly get started with integrating Hopper into your project.

#### Choose Your Installation Path

Hopper supports flexible installation options tailored to different project types.

Select the path that best suits your setup:

* [React Applications](../installation-path/react.md):The most common way to integrate Hopper.
* [Other Frameworks or Libraries](../installation-path/javascript.md):Use Hopper seamlessly with other JavaScript or TypeScript-based setups.

#### Advanced Installation Options

Looking for a more tailored or specialized setup? Hopper offers advanced options to meet unique project requirements.

* Micro Frontend Architecture: Integrate Hopper into modular, micro-frontend-based projects. *Coming Soon*
* Granular CSS Imports: Optimize performance by importing only the CSS needed for specific components. *Coming Soon*

#### Guides

Explore our collection of guides designed to help you get the most out of Hopper. From styling tips to advanced customization techniques, these resources are here to support your journey with our design system. Check back often as we continue to expand with more tutorials and best practices.

* **Text Crop**: Discover how to achieve perfect vertical text alignment with our Text Crop guide. Learn how to compensate for uneven whitespace in web fonts and improve the appearance of your text using simple, effective CSS techniques. [Learn more about Text Crop](../guides/text-crop.md)
* **Customizing Components**: Explore the flexibility of Hopper and Orbiter with our Customizing Components guide. This article introduces various customization options, from minimal styling adjustments to building entirely new components, categorized into distinct tiers to help you make the best choice for your needs. [Learn more about Customizing Components](../guides/components.md)

### React Applications

Getting started with Hopper in a react app.

Hopper is a Design System that provides a collection of [React components](../../components/component-list.md), [tokens](../../tokens/overview/introduction.md), and [icons](../../icons/overview/introduction.md) to help you build applications.

**Requirements:**

* [React 18](https://reactjs.org/) or higher.

#### Installation

##### Install Packages

Run the following command to install Hopper packages and their peer dependencies.

###### pnpm

```bash
pnpm add @hopper-ui/components @hopper-ui/icons @hopper-ui/styled-system react-aria react-aria-components
```

###### yarn

```bash
yarn add @hopper-ui/components @hopper-ui/icons @hopper-ui/styled-system react-aria react-aria-components
```

###### npm

```bash
npm install @hopper-ui/components @hopper-ui/icons @hopper-ui/styled-system react-aria react-aria-components
```

##### Setup provider

Wrap your application with the [HopperProvider](/components/HopperProvider.md) component. This sets up the global styles and context required for Hopper components. Typically, this is done in your `index.tsx` or `app.tsx`, but it may vary depending on your setup.

```tsx
import { HopperProvider } from "@hopper-ui/components";
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root'));
root.render(
    <HopperProvider theme="workleap" withBodyStyle>
        <App />
    </HopperProvider>
);
```

##### Import Styles

Add Hopper styles to your project by importing the following CSS file. Place this in your global CSS file or main stylesheet.

```css
@import url("@hopper-ui/components/index.css");
```

##### New: Import Theme

Add your product's theme to your project by importing the following CSS file. Place this in your global CSS file or main stylesheet. You can add as many themes as you want, in case your application switch between different themes.

```css
@import url("@hopper-ui/styled-system/theme/workleap.css");
/** or */
@import url("@hopper-ui/styled-system/theme/sharegate.css");
```

Make sure to set the theme on your `HopperProvider` to match the imported theme.

##### Enjoy!

Leverage Hopper's components and styled system to build user interfaces efficiently and with ease.

```tsx
import { Button, Stack } from "@hopper-ui/components";

const Demo = () => {
    return (
        <Stack>
            <Button>Click me</Button>
            <Button>Click me</Button>
        </Stack>
    );
}
```

#### Take it Further

Explore advanced features of Hopper to unlock its full potential:

* [Icons](/icons/overview/introduction.md):Use a rich library of icons in your applications.
* [Client Side Routing](/components/client-side-routing.md):Ensure seamless navigation with Hopper components.
* [Color Schemes](/components/color-schemes.md):Implement and customize dark mode for your application seamlessly.
* [Theming](/components/theming.md):Customize the appearance of Hopper components to match your brand.
* [Internationalization](/components/internationalization.md):Build applications for multiple languages and locales.
* [Responsive Styles](/styled-system/concepts/responsive-styles.md):Design interfaces that adapt to different screen sizes.
* [Slots](/components/slots.md):Extend and compose components flexibly.
* [Styling](/styled-system/concepts/styling.md):Style components with Hopper's styled system and override defaults.

### Other Frameworks

Installation procedure for using Hopper in non-React projects

Hopper is a flexible Design System designed to help you create visually consistent and beautiful applications. While Hopper offers React components for building UI elements, its design tokens and icons are framework-agnostic, making them accessible for use in any project, whether you're using a different framework or plain HTML and CSS.

#### What Hopper Offers

* **Design Tokens**: Predefined design decisions such as colors, spacing, and typography, provided as reusable CSS variables for styling your application.
* **Icons**: A comprehensive library of SVG icons, easily accessible through the @hopper-ui/svg-icons package.

This installation procedure provides the steps needed to set up Hopper tokens and icons in non-React projects, enabling you to incorporate these resources directly into your application

#### Tokens Installation

##### Install Package

Run the following command to install Hopper tokens.

###### pnpm

```bash
pnpm add @hopper-ui/tokens
```

###### yarn

```bash
yarn add @hopper-ui/tokens
```

###### npm

```bash
npm install @hopper-ui/tokens
```

##### Import Styles and Themes

Add Hopper styles to your project by importing the following CSS files into your main stylesheet or global CSS file:

```css
@import url("@hopper-ui/tokens/fonts.css"); /* To import Hopper fonts */

@import url("@hopper-ui/tokens/workleap/tokens.css"); /* To import the design tokens */
@import url("@hopper-ui/tokens/workleap/dark/tokens.css"); /* optional - if your application supports dark mode */
```

If your application supports dark mode, you can include the dark mode token styles for seamless theme switching.

##### Enjoy!

You can now use Hopper tokens in your project by referencing the design tokens as CSS variables. For example:

```css
.my-class {
    background-color: var(--hop-primary-surface-weak);
}
```

#### Icons Installation

##### Install Package

Run the following command to install Hopper SVG icons.

###### pnpm

```bash
pnpm add @hopper-ui/svg-icons
```

###### yarn

```bash
yarn add @hopper-ui/svg-icons
```

###### npm

```bash
npm install @hopper-ui/svg-icons
```

##### Usage

You can use Hopper SVG icons in two ways:

###### In JavaScript/TypeScript Files

Import an SVG icon directly into your code. Ensure your bundler (e.g., Webpack, Vite, Rollup) is configured to handle SVG imports correctly.

```tsx
import alertIcon from "@hopper-ui/svg-icons/alert-24.svg";
```

###### In CSS

Use SVG icons directly in your CSS for styles such as background images.

```css
.my-component {
    background-image: url("@hopper-ui/svg-icons/alert-24.svg");
}
```

### Text Crop

A technique to crop the whitespace above and below text to make it appear more centered.

Every web font includes whitespace above and below the text, while useful in some instances, it can be a problem when vertically centering text or aligning text with other elements. This problem arises when a font has uneven whitespace. This is especially true when using a typeface with a large x-height, like *ABC Favorit*.

One way to compensate for this is to use a negative margin on the top and bottom of the text. This will crop the whitespace and make the text appear more centered, while preserving the line-height of the text.

#### Implementation

It is suggested to apply this technique on a text element, such as a `span`, rather than on it's container, such as a `button` element.

Using a negative margin on the top and bottom of the text will crop the whitespace while preserving line height between lines in a multi-line block of text.

If you need to implement this technique, you can use the following CSS. Keep in mind that each font weight and line-height combinations have their own set of values. You need to use the right token for the job, these are documented in the [tokens section](/tokens/semantic/typography.md).

```tsx
<div className="myBadge">
    <span className="off-centered-text">NEW</span>
</div>
```

```css
.off-centered-text {
    font-family: 'ABC Favorit Mono', sans-serif;
}

.off-centenred-text::before,
.off-centered-text::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
}

.off-centered-text::before {
    /* -0.125rem */
    margin-bottom: var(--hop-overline-bottom-offset);
}

.off-centered-text::after {
    /* -0.25rem */
    margin-top: var(--hop-overline-top-offset);
}
```

Feel free to inspect the above examples to see how the solution is applied in different contexts.

New

Bring out the best in your team

### Customizing Components

Learn how to customize Hopper components to meet your product needs.

Hopper components are built with well-considered defaults that meet common product needs. However, we understand that product teams often move quickly, iterating at a pace that can move faster than design system updates. As this article on [pace layering](https://bigmedium.com/ideas/design-system-pace-layers-slow-fast.html) explains, it's natural for design systems to evolve more slowly than the products they support. Rather than being a bottleneck, this approach keeps our design system stable and reliable. To support fast-paced product development, Hopper provides a range of options for customization, from simple styling adjustments to creating entirely new components.

#### Customization Tiers

The Hopper design systems are built on the principle that “components are designed to be overridden, not locked-in.” This allows developers to adjust styles and behaviors to meet specific product needs, while ensuring components remain usable and adaptable.

There are multiple customization methods available, and to highlight why some are better suited than others, I've organized them into four tiers:

| Customization Tier | Description                                                                              |
| ------------------ | ---------------------------------------------------------------------------------------- |
| 🥇 Gold Tier       | Maximize reuse of the Design System, applying only minimal overwrites to fit your needs. |
| 🥈 Silver Tier     | Reuse most of the component's behaviors, but make some modifications to fit your needs.  |
| 🥉 Bronze Tier     | Reassemble the component's behavior using smaller utility methods.                       |
| 🛠️ Do it yourself | Build the behavior from scratch and use low-level styling tools as needed.               |

#### Customization Methods Overview

Here's an overview of the different customization methods:

* 🥇 [Direct styling adjustments](#customization-method-details--direct-styling-adjustments): You can use CSS Classes or the styling props on existing Design System Components to alter the style as needed.

* 🥇 [Behavior modifications](#customization-method-details--behavior-modifications): You can use ref, callbacks and controlled properties to modify its behavior.

* 🥈 [Copying component](#customization-method-details--copying-component): Copy the component code inside your codebase and modify it.

* 🥈 [Custom components using base components](#customization-method-details--custom-components-using-base-components): Create a new component on top of Design System base components or React Aria Components.

* 🥉 [Custom components using hooks](#customization-method-details--custom-components-using-hooks): Create a new component on top of Design System hooks or React Aria hooks.

* 🛠️ [Building components from scratch](#customization-method-details--building-components-from-scratch): Create a component from scratch and leverage Design Tokens if possible

#### Customization Method Details

These customization options provide product teams with the flexibility to adapt Hopper components to specific requirements, without sacrificing consistency. By using this range of customization methods, teams can meet product goals efficiently while maintaining the benefits of a unified design system. These customization methods are presented in the order you should consider when evaluating your options, with details provided in the sections below.

##### 🥇 Direct Styling Adjustments

For straightforward customization needs, you can make adjustments directly by passing style-related props, adding CSS classes, or setting up refs for access to component elements. This approach allows you to override specific styles while keeping the component's behavior and overall styling intact.

###### Styled System Props

Adjust properties such as `backgroundColor`, `width`, or `padding` directly on the component.

```tsx
<Button backgroundColor="primary" UNSAFE_width="148px" paddingTop="stack-xs">Click me</Button>
```

###### CSS Classes

Append custom CSS classes to modify styles.

```tsx
<Button className="custom-class">Click me</Button>
```

```tsx
export function AICard({ children, className, ...rest }: CardProps) {
    const classNames = clsx(className, "ai-gradiant-border");
    return (
        <Card className={classNames} {...rest}>
            {children}
        </Card>
    );
}
```

##### 🥇 Behavior Modifications

To customize a component's behavior, use refs, callbacks and controlled properties. This approach is useful for interactive features and for modifying default component behavior. This approach is ideal when you need to adjust how a component responds to user interactions without altering its visual style or structure. [Read more about Controlled vs Uncontrolled components here](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).

###### Refs for Direct Access

Use refs to access and interact with elements within a component.

```tsx
<Autocomplete wrapperProps={{ ref: myRef }}>
    <Item key="earth">Earth</Item>
</Autocomplete>
```

###### Event Callbacks

Add event handlers for more control, ensuring events continue propagating as expected.

```tsx
<Button onFocus={handleFocus}>Click me</Button>
```

###### Controlled Properties

You can control the component's behavior by passing a controlled property.

```tsx
<PopoverTrigger {...rest} open={isHovered}>
```

```tsx
function MyCustomButtonPopoverTrigger({ children, ...rest }: PopoverTriggerProps) {
    const ref = useRef();
    const isHovered = useHover(ref);
    return (
        <PopoverTrigger {...rest} open={isHovered}>
            <Button ref={ref}>Hoverable Button</Button>
            {children}
        </PopoverTrigger>
    );
}
```

***

##### 🥈 Copying Component

When you need extensive customizations that go beyond simple styling or behavior adjustments, copying the component code can be an effective solution. This allows you to make specific changes while retaining the existing structure, making the customized component reusable across similar use cases.

Take a look to [Hopper's components source code](https://github.com/workleap/wl-hopper/tree/main/packages/components)

> **information**
>
> **Encountering Design System Limitations?**\
> \
> If you need to copy a component due to a design system constraints, let us know! Frequent requests may lead to updates, allowing you to replace your custom component with an official version in the future.\
> \
> Share your needs in **#ds-hopper!**

***

##### 🥈 Custom Components Using Base Components

If the existing Design System component feels too complex for your needs, take a closer look at its underlying structure in the code. In Hopper, it's likely built on a [React Aria](https://react-spectrum.adobe.com/react-aria/hooks.html) component, which you can directly leverage to create a more tailored solution. React Aria offers a robust library of foundational components, making it a versatile starting point. [The Technology team recommends using React Aria](https://workleap.atlassian.net/wiki/spaces/TL/pages/3469508719) as the preferred foundation for building components.

💡[Need Help Getting Started?](#need-help-getting-started)

> **warning**
>
> Using this approach may require you to restyle the entire component, which is fine. At this stage, you're essentially creating something new! Just be sure to use [Hopper tokens](../../tokens/overview/introduction.md) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!

***

##### 🥉 Custom Components Using Hooks

If there is no base components to use, or if the base component is again too strict for you needs, you can use underlying hooks for more granular control. [React Aria](https://react-spectrum.adobe.com/react-aria/hooks.html) also offer hooks that you can tailor components more precisely to your needs. [The Technology team recommends using React Aria](https://workleap.atlassian.net/wiki/spaces/TL/pages/3469508719) as the preferred foundation for building components.

💡[Need Help Getting Started?](#need-help-getting-started)

> **warning**
>
> Using this approach may require you to restyle the entire component, which is fine. At this stage, you're essentially creating something new! Just be sure to use [Hopper tokens](../../tokens/overview/introduction.md) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!

***

##### 🛠️ Building Components From Scratch

For unique needs that go beyond the capabilities of design system components, building a component from scratch may be necessary. At this point, the only recommendation we can give is to refer to the [WAI Aria Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) or [Spec](https://www.w3.org/WAI/ARIA/apg/) to determine the expected behavior of controls. Using this approach you will have to style the entire component, which is fine. Just be sure to use [Hopper tokens](../../tokens/overview/introduction.md) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!

💡[Need Help Getting Started?](#need-help-getting-started)

#### Need Help Getting Started?

Even if you're not using Design System components, we're here to help! The Design System team has deep expertise in React Aria and is eager to collaborate with you.

💡Let's brainstorm together! Reach out to us in **#ds-hopper** for guidance, ideas, or support in finding the perfect starting point for your project.

💡[Need Help Getting Started?](#need-help-getting-started)

> **warning**
>
> Using this approach may require you to restyle the entire component, which is fine. At this stage, you're essentially creating something new! Just be sure to use [Hopper tokens](../../tokens/overview/introduction.md) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!

***

##### 🛠️ Building Components From Scratch

For unique needs that go beyond the capabilities of design system components, building a component from scratch may be necessary. At this point, the only recommendation we can give is to refer to the [WAI Aria Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/) or [Spec](https://www.w3.org/WAI/ARIA/apg/) to determine the expected behavior of controls. Using this approach you will have to style the entire component, which is fine. Just be sure to use [Hopper tokens](../../tokens/overview/introduction.md) to ensure that any future branding updates are automatically applied to your component without needing manual adjustments. If you want to allow customization on your component, you can also use the `useStyledSystem` hook to expose style props!

💡[Need Help Getting Started?](#need-help-getting-started)

#### Need Help Getting Started?

Even if you're not using Design System components, we're here to help! The Design System team has deep expertise in React Aria and is eager to collaborate with you.

💡Let's brainstorm together! Reach out to us in **#ds-hopper** for guidance, ideas, or support in finding the perfect starting point for your project.

## Styled System

> This section explains the structure of the styled system, detailing its components and illustrating how they integrate with design tokens.

### Introduction

All components are designed to be styled using props.

Hopper embraces a **Styled System-inspired** approach to styling components, allowing developers to define styles directly via props rather than writing CSS. This method provides a **type-safe and intuitive API**, making it easier to build consistent, on-brand interfaces without dealing with complex class names or global styles. With built-in **intellisense and static analysis**, developers can confidently apply design tokens without memorizing them, ensuring efficiency and reducing errors.

#### Style Props

Style props are the most fundamental way to style your components in Hopper. They are basically css styles as props. [Learn more about style props](/styled-system/concepts/styling.md)

#### Do's and Don'ts

These guidelines help ensure consistency, maintainability, and design system compliance when using the styled system.

**Rule 1**

* ✅ Do:

  ```tsx
  import { Stack } from "@hopper-ui/components";

  <Stack gap="inline-lg" />;
  ```

  Use styled system props to apply design tokens directly to components

* 🚫 Don't:

  ```tsx
  import { Stack } from "@hopper-ui/components";

  <Stack style={{ gap: "24px" }} />;
  ```

  Use the standard React 'style' prop

**Rule 2**

* ✅ Do:

  Use styled system props to apply design tokens directly to components

* 🚫 Don't:

  Use external CSS files or CSS-in-JS solutions alongside styled system components

**Rule 3**

* ✅ Do:

  ```tsx
  import { Stack } from "@hopper-ui/components";

  <Stack UNSAFE_width="100px" />;
  ```

  Use the UNSAFE\_ prefix when you use a value that is not a token

* 🚫 Don't:

  ```tsx
  import { Stack } from "@hopper-ui/components";

  <Stack style={{ width: "100px" }} />;
  ```

  Use the standard React style prop

#### Key Concepts

Follow these links to learn key concepts about the Styled System:

* [Responsive Styles](/styled-system/concepts/responsive-styles.md)
* [Using Style Props on HTML Elements](/styled-system/concepts/html-elements.md)
* [Using Style Props on custom components](/styled-system/concepts/custom-components.md)

### Style Props

This page describes how styling works in Hopper, including how to customize spacing, sizing, and positioning, and how to create your own custom components using Hopper styles.

Hopper components are designed to be consistent across all Workleap applications. They include built-in styling that has been considered carefully, and extensively tested. In general, customizing Hopper is discouraged, but most components do offer control over layout and other aspects. In addition, you can use Hopper's tokens to ensure your application conforms to design requirements, and is adaptive across color schemes.

#### Style props

A Hopper style property is a mapping of a CSS property to a component property. With style props, Hopper let you easily set style values for a curated set of CSS properties like font-size, margin, padding, width and many more.

All of the available style props are listed in the ["Properties List"](#properties-list) section below.

##### Usage

To use a style prop on a Hopper component, pass the prop as a camelCased string to the component. By default, only tokens are accepted as values for style props. They help promote consistency and maintainability across your application.

If you need to pass a custom value, you can use the `UNSAFE_` prefix to bypass the token system. You can refer to the ["Escape hatches"](#escape-hatches) section for more information.

```tsx
import { Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div
            fontSize="body-lg"
            fontWeight="body-lg"
            paddingTop="inset-md"
            paddingBottom="inset-md"
            marginBottom="stack-lg"
            color="neutral"
            borderRadius="rounded-md"
            backgroundColor="primary"
        >
            Style properties are fun.
        </Div>
    );
}
```

##### Shorthands

Props like border and paddingX are also provided to help you save keystrokes. An exhaustive list of all the supported props is available in the ["Properties List"](#properties-list) section.

```tsx
import { Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div paddingY="inset-md" border="primary">
            Shorthands.
        </Div>
    );
}
```

##### Responsive styles

All style props support responsive values. You can pass an object with breakpoints as keys and values as values to a style prop to set different values for different breakpoints. More information is available in the [Responsive Styles article](./responsive-styles.md).

##### Escape hatches

**CRITICAL: NOT ALL PROPS SUPPORT THE `UNSAFE_` PREFIX.** Only a specific set of props (listed in the [escape-hatches guide](/styled-system/escape-hatches.md)) have `UNSAFE_` versions available.

For these whitelisted props, you can bypass the token system by prefixing the prop name with `UNSAFE_`:

```tsx
  <Div
      position="absolute"           // ✅ position is NOT in the whitelist, use position directly
      top="10px"                    // ✅ top is NOT in the whitelist, use top directly
      top="core_640"                // ❌ Do NOT use tokens for top
      overflow="hidden"             // ✅ overflow is NOT in the whitelist, use overflow directly
      flex="1"                      // ✅ flex is NOT in the whitelist, use flex directly
      UNSAFE_fontSize="1.5rem"      // ✅ fontSize is in the whitelist
      UNSAFE_width="100px"          // ✅ width is in the whitelist
  >
```

Critical Rules:

1. Check the [escape-hatches guide](/styled-system/escape-hatches.md) FIRST - it contains the complete whitelist.
2. If a prop is in the whitelist → use UNSAFE\_propName for custom values
3. If a prop is not in the whitelist:

* Use propName directly (no `UNSAFE_` prefix)
* NEVER use tokens for it (`top="core_640"` or `left="core_0"` are invalid)

5. Props with "Tokens Category" of "none" (like `overflow`, `flex`, `position`) are used directly

While we encourage teams to utilize Hopper styles as it is, we do realize that sometimes product specific customizations may be needed. In these cases, we encourage you or your designers to talk to us. We may be able to suggest an alternative implementation strategy, or perhaps your design can help inform future Hopper additions.

While the traditional className and style props are always supported in Hopper components, we also provide an escape hatch for passing custom values to style props. This is done by prefixing the prop name with `UNSAFE_`.

The `UNSAFE_` prefix might look scary, but it's there to remind you that you're bypassing the token system. It's a way to ensure that you're aware that you're doing something that might not be automatically updated when tokens change. It will also help you to search for these usages when you want to update them, or help us to provide missing tokens.

```tsx
import { Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div
            UNSAFE_fontSize="1.5rem"
            UNSAFE_fontWeight="500"
            UNSAFE_paddingTop="14px"
            UNSAFE_paddingBottom="15rem"
            UNSAFE_marginBottom="12px"
            UNSAFE_color="#FFFFFF"
            UNSAFE_borderRadius="12px"
            UNSAFE_backgroundColor="#000000"
        >
            Style properties are fun.
        </Div>
    );
}
```

##### Pseudo-classes

Style props doesn't support every CSS pseudo-classes. [Location pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#location_pseudo-classes), [input pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#the_input_pseudo-classes), [tree-structural pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes#tree-structural_pseudo-classes), ::before and ::after are not supported and will most likely never be.

When a CSS pseudo-class is not supported by Hopper style props, we recommend using a CSS class.

Since the following user action pseudo-classes are often used, some style props support them. These behaves like their pseudo CSS counterparts.

| Suffix | Pseudo state |
| ------ | ------------ |
| active | :active      |
| hover  | :hover       |
| focus  | :focus       |

Not all style props support user action pseudo-classes. Find out which props support user action pseudo-classes in the ["Properties List"](#properties-list) section.

#### Properties List

The following tables provide a list of all available style props by category.

##### Space

```tsx
<Div padding="inset-md">
    Hopper
</Div>
```

| Property Name | CSS Property                 | Tokens Category                                                       | UNSAFE\_ | Supports    |
| ------------- | ---------------------------- | --------------------------------------------------------------------- | -------- | ----------- |
| margin        | margin                       | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin)   | ✓        | breakpoints |
| marginTop     | margin-top                   | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin)   | ✓        | breakpoints |
| marginBottom  | margin-bottom                | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin)   | ✓        | breakpoints |
| marginRight   | margin-right                 | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin)   | ✓        | breakpoints |
| marginLeft    | margin-left                  | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin)   | ✓        | breakpoints |
| marginX       | margin-left & margin-right   | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin)   | ✓        | breakpoints |
| marginY       | margin-top & margin-bottom   | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin)   | ✓        | breakpoints |
| padding       | padding                      | [Semantic > Spacing > Padding](/tokens/semantic/space.md#tokens-padding) | ✓        | breakpoints |
| paddingTop    | padding-top                  | [Semantic > Spacing > Padding](/tokens/semantic/space.md#tokens-padding) | ✓        | breakpoints |
| paddingBottom | padding-bottom               | [Semantic > Spacing > Padding](/tokens/semantic/space.md#tokens-padding) | ✓        | breakpoints |
| paddingRight  | padding-right                | [Semantic > Spacing > Padding](/tokens/semantic/space.md#tokens-padding) | ✓        | breakpoints |
| paddingLeft   | padding-left                 | [Semantic > Spacing > Padding](/tokens/semantic/space.md#tokens-padding) | ✓        | breakpoints |
| paddingX      | padding-left & padding-right | [Semantic > Spacing > Padding](/tokens/semantic/space.md#tokens-padding) | ✓        | breakpoints |
| paddingY      | padding-top & padding-bottom | [Semantic > Spacing > Padding](/tokens/semantic/space.md#tokens-padding) | ✓        | breakpoints |
| whiteSpace    | white-space                  | none                                                                  | ✗        | breakpoints |

##### Color

```tsx
<Div backgroundColor="primary-weak" color="neutral">
    Hopper
</Div>
```

| Property Name   | CSS Property     | Tokens Category                             | UNSAFE\_ | Supports                         |
| --------------- | ---------------- | ------------------------------------------- | -------- | -------------------------------- |
| color           | color            | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus/hover/active |
| backgroundColor | background-color | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus/hover/active |
| opacity         | opacity          | none                                        | ✗        | breakpoints & focus/hover/active |
| fill            | fill             | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus/hover        |
| stroke          | stroke           | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints                      |
| filter          | filter           | none                                        | ✗        | breakpoints                      |

##### Typography

```tsx
<Header letterSpacing="0.3rem">Hopper</Header>
```

| Property Name  | CSS Property    | Tokens Category                                      | UNSAFE\_ | Supports    |
| -------------- | --------------- | ---------------------------------------------------- | -------- | ----------- |
| fontFamily     | font-family     | [Semantic > Typography](/tokens/semantic/typography.md) | ✓        | breakpoints |
| fontSize       | font-size       | [Semantic > Typography](/tokens/semantic/typography.md) | ✓        | breakpoints |
| fontWeight     | font-weight     | [Semantic > Typography](/tokens/semantic/typography.md) | ✓        | breakpoints |
| lineHeight     | line-height     | [Semantic > Typography](/tokens/semantic/typography.md) | ✓        | breakpoints |
| letterSpacing  | letter-spacing  | [Core > Letter Spacing](/tokens/core/letter-spacing.md) | ✓        | breakpoints |
| textAlign      | text-align      | none                                                 | ✗        | breakpoints |
| textTransform  | text-transform  | none                                                 | ✗        | breakpoints |
| textDecoration | text-decoration | none                                                 | ✗        | breakpoints |
| textOverflow   | text-overflow   | none                                                 | ✗        | breakpoints |
| wordBreak      | word-break      | none                                                 | ✗        | breakpoints |
| fontStyle      | font-style      | none                                                 | ✗        | breakpoints |

##### Layout

```tsx
<Div UNSAFE_width="30rem">
    Hopper
</Div>
```

| Property Name     | CSS Property       | Tokens Category                                                     | UNSAFE\_ | Supports    |
| ----------------- | ------------------ | ------------------------------------------------------------------- | -------- | ----------- |
| width             | width              | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| height            | height             | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| minWidth          | min-width          | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| maxWidth          | max-width          | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| minHeight         | min-height         | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| maxHeight         | max-height         | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| display           | display            | none                                                                | ✗        | breakpoints |
| verticalAlign     | vertical-align     | none                                                                | ✗        | breakpoints |
| overflow          | overflow           | none                                                                | ✗        | breakpoints |
| overflowX         | overflow-x         | none                                                                | ✗        | breakpoints |
| overflowY         | overflow-y         | none                                                                | ✗        | breakpoints |
| gap               | gap                | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin) | ✓        | breakpoints |
| alignSelf         | align-self         | none                                                                | ✗        | breakpoints |
| aspectRatio       | aspect-ratio       | none                                                                | ✗        | breakpoints |
| justifyContent    | justify-content    | none                                                                | ✗        | breakpoints |
| justifyItems      | justify-items      | none                                                                | ✗        | breakpoints |
| justifySelf       | justify-self       | none                                                                | ✗        | breakpoints |
| contentVisibility | content-visibility | none                                                                | ✗        | breakpoints |
| transform         | transform          | none                                                                | ✗        | breakpoints |
| transformOrigin   | transform-origin   | none                                                                | ✗        | breakpoints |
| transformStyle    | transform-style    | none                                                                | ✗        | breakpoints |

##### Flex Layout

```tsx
<Div alignItems="center">
    <Text>Tree frog</Text>
    <Text>Pond frog</Text>
</Div>
```

| Property Name | CSS Property     | Tokens Category | UNSAFE\_ | Supports    |
| ------------- | ---------------- | --------------- | -------- | ----------- |
| alignItems    | align-items      | none            | ✗        | breakpoints |
| alignContent  | align-content    | none            | ✗        | breakpoints |
| flex          | flex (shorthand) | none            | ✗        | breakpoints |
| flexBasis     | flex-basis       | none            | ✗        | breakpoints |
| flexDirection | flex-direction   | none            | ✗        | breakpoints |
| flexFlow      | flex-flow        | none            | ✗        | breakpoints |
| flexGrow      | flex-grow        | none            | ✗        | breakpoints |
| flexShrink    | flex-shrink      | none            | ✗        | breakpoints |
| flexWrap      | flex-wrap        | none            | ✗        | breakpoints |
| order         | order            | none            | ✗        | breakpoints |

##### Grid Layout

```tsx
<Div gridAutoFlow="row dense">
    <Text>Tree frog</Text>
    <Text>Pond frog</Text>
</Div>
```

| Property Name       | CSS Property          | Tokens Category                                                     | UNSAFE\_ | Supports    |
| ------------------- | --------------------- | ------------------------------------------------------------------- | -------- | ----------- |
| grid                | grid (shorthand)      | none                                                                | ✗        | breakpoints |
| gridArea            | grid-area             | none                                                                | ✗        | breakpoints |
| gridAutoColumns     | grid-auto-columns     | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| gridAutoFlow        | grid-auto-flow        | none                                                                | ✗        | breakpoints |
| gridAutoRows        | grid-auto-rows        | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| gridColumn          | grid-column           | none                                                                | ✗        | breakpoints |
| gridColumnEnd       | grid-column-end       | none                                                                | ✗        | breakpoints |
| gridColumnSpan      | grid-column-span      | none                                                                | ✗        | breakpoints |
| gridColumnStart     | grid-column-start     | none                                                                | ✗        | breakpoints |
| gridRow             | grid-row              | none                                                                | ✗        | breakpoints |
| gridRowEnd          | grid-row-end          | none                                                                | ✗        | breakpoints |
| gridRowSpan         | grid-row-span         | none                                                                | ✗        | breakpoints |
| gridRowStart        | grid-row-start        | none                                                                | ✗        | breakpoints |
| gridTemplate        | grid-template         | none                                                                | ✗        | breakpoints |
| gridTemplateAreas   | grid-template-areas   | none                                                                | ✗        | breakpoints |
| gridTemplateColumns | grid-template-columns | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| gridTemplateRows    | grid-template-rows    | [Core > Dimensions](/tokens/core/dimensions.md)                        | ✓        | breakpoints |
| columnGap           | column-gap            | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin) | ✓        | breakpoints |
| rowGap              | row-gap               | [Semantic > Spacing > Margin](/tokens/semantic/space.md#tokens-margin) | ✓        | breakpoints |

##### Background

```tsx
<Div
  backgroundImage="url('/images/dog.png')"
  backgroundPosition="center"
  backgroundRepeat="no-repeat"
/>
```

| Property Name      | CSS Property        | Tokens Category | UNSAFE\_ | Supports    |
| ------------------ | ------------------- | --------------- | -------- | ----------- |
| backgroundImage    | background-image    | none            | ✗        | breakpoints |
| backgroundPosition | background-position | none            | ✗        | breakpoints |
| backgroundRepeat   | background-repeat   | none            | ✗        | breakpoints |
| backgroundSize     | background-size     | none            | ✗        | breakpoints |

##### Border

```tsx
<Div
    border="primary"
    borderRadius="rounded-md"
>
    Tree frog
</Div>
```

Border props (border, borderBottom, borderTop, borderRight, borderLeft) uses an implicit style (solid) and width(1px). These properties only accepts colors for value.

| Property Name           | CSS Property               | Tokens Category                             | UNSAFE\_ | Supports                         |
| ----------------------- | -------------------------- | ------------------------------------------- | -------- | -------------------------------- |
| border                  | border-color               | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus/hover/active |
| borderBottom            | border-bottom-color        | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus/hover/active |
| borderTop               | border-top-color           | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus/hover/active |
| borderLeft              | border-left-color          | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus/hover/active |
| borderRight             | border-right-color         | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus/hover/active |
| borderRadius            | border-radius              | [Semantic > Shape](/tokens/semantic/shape.md)  | ✓        | breakpoints                      |
| borderTopLeftRadius     | border-top-left-radius     | [Semantic > Shape](/tokens/semantic/shape.md)  | ✓        | breakpoints                      |
| borderTopRightRadius    | border-top-right-radius    | [Semantic > Shape](/tokens/semantic/shape.md)  | ✓        | breakpoints                      |
| borderBottomLeftRadius  | border-bottom-left-radius  | [Semantic > Shape](/tokens/semantic/shape.md)  | ✓        | breakpoints                      |
| borderBottomRightRadius | border-bottom-right-radius | [Semantic > Shape](/tokens/semantic/shape.md)  | ✓        | breakpoints                      |
| outline                 | outline                    | [Semantic > Colors](/tokens/semantic/color.md) | ✓        | breakpoints & focus              |

##### Position

```tsx
<Div
    top="12px"
    position="absolute"
/>
```

| Property Name  | CSS Property    | Tokens Category | UNSAFE\_ | Supports    |
| -------------- | --------------- | --------------- | -------- | ----------- |
| position       | position        | none            | ✗        | breakpoints |
| top            | top             | none            | ✗        | breakpoints |
| bottom         | bottom          | none            | ✗        | breakpoints |
| right          | right           | none            | ✗        | breakpoints |
| left           | left            | none            | ✗        | breakpoints |
| zIndex         | z-index         | none            | ✗        | breakpoints |
| objectFit      | object-fit      | none            | ✗        | breakpoints |
| objectPosition | object-position | none            | ✗        | breakpoints |

##### Shadow

```tsx
<Div
    boxShadow="lifted"
/>
```

| Property Name | CSS Property | Tokens Category                                    | UNSAFE\_ | Supports                         |
| ------------- | ------------ | -------------------------------------------------- | -------- | -------------------------------- |
| boxShadow     | box-shadow   | [Semantic > Elevation](/tokens/semantic/elevation.md) | ✓        | breakpoints & focus/hover/active |

##### Miscellaneous

| Property Name | CSS Property   | Tokens Category | UNSAFE\_ | Supports           |
| ------------- | -------------- | --------------- | -------- | ------------------ |
| content       | content        | none            | ✗        | breakpoint         |
| cursor        | cursor         | none            | ✗        | breakpoint & hover |
| pointerEvents | pointer-events | none            | ✗        | breakpoint         |
| resize        | resize         | none            | ✗        | breakpoint         |
| willChange    | will-change    | none            | ✗        | breakpoint         |

### Responsive Styles

Hopper style props accept a specialized syntax to support responsive breakpoints. These responsive properties help build adaptive user interfaces.

#### Introduction

In addition to static values, all style props support object syntax to specify different values for the prop depending on a responsive breakpoint. Breakpoints are named following t-shirt sizing, and correspond to common device resolutions.

##### Example

A `Div` with a default background color overridden at each breakpoint. Resize your browser window to see this in action.

```tsx
import { Div, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div
            backgroundColor={{
                base: "core_moss-200",
                xs: "core_sapphire-200",
                sm: "core_moss-200",
                md: "core_sapphire-200",
                lg: "core_rock-200",
                xl: "core_sunken-treasure-200"
            }}
            UNSAFE_width="30rem"
            maxWidth="100%"
            padding="inset-md"
        >
            <Text>Resize the window to see the background color change!</Text>
        </Div>
    );
}
```

#### Breakpoints

In addition to the base, there are five breakpoints inspired by typical device resolutions.

| Name | Media query       |
| ---- | ----------------- |
| base | min-width: 0px    |
| xs   | min-width: 640px  |
| sm   | min-width: 768px  |
| md   | min-width: 1024px |
| lg   | min-width: 1280px |
| xl   | min-width: 1440px |

#### Mobile-first

Hopper uses a mobile-first breakpoint system, similar to those in frameworks like Bootstrap and Tailwind.

> **error**Don't use `sm:` to target mobile devices

```tsx

import { Div, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div
            // This will only center text on screens 768px and wider, not on small screens
            backgroundColor="primary"
            textAlign={{ sm: "center" }}
            UNSAFE_width="30rem"
            maxWidth="100%"
            padding="inset-md"
        >
            <Text>Text Content</Text>
        </Div>
    );
}
```

> **success**Use `base` to target mobile devices

```tsx

import { Div, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div
            // This will center text on mobile, and left align it on screens 768px and wider
            backgroundColor="primary"
            textAlign={{ base: "center", sm: "left" }}
            UNSAFE_width="30rem"
            maxWidth="100%"
            padding="inset-md"
        >
            <Text>Text Content</Text>
        </Div>
    );
}
```

It's often best to start with the mobile first layout for a design, then add styles as the screen size increases, moving from small to larger screens.

#### Utility Methods

##### useResponsiveValue

To resolve a responsive value within a React component, Hopper provides a `useResponsiveValue` hook.

```tsx

import { Div, useResponsiveValue } from "@hopper-ui/components";

export default function Example() {
    const isFluidValue = useResponsiveValue({ base: true, lg: false });

    return (
        <Div
            UNSAFE_width={isFluidValue ? "100%" : "30rem"}
            backgroundColor="core_moss-200"
            maxWidth="100%"
            padding="inset-md"
        >
            Content
        </Div>
    );
}
```

### HTML Elements

Using Hopper style props on HTML elements.

Hopper provides a set of HTML element components already configured with Hopper styled system. You should choose these components over native HTML elements.

`<A>`, `<Address>`, `<Article>`, `<Aside>`, `<HtmlButton>`, `<Div>`, `<HtmlFooter>`, `<HtmlHeader>`, `<Img>`, `<HtmlInput>`, `<List>`, `<Main>`, `<Nav>`, `<HtmlSection>`, `<Span>`, `<Table>`, `<THead>`, `<TBody>`, `<TFoot>`, `<TR>`, `<TD>`, `<TH>`, `<UL>`, `<OL>`, `<LI>`, `<HtmlLabel>`.

For text elements, prefer a `<Text>` or `<Paragraph>` component rather than `<Span>` or a `<Div>`.

#### Create missing HTML elements

Hopper only re-export the most used HTML elements. If you need to use a less common HTML element, you can create a custom component using the `htmlElement` function.

```tsx
import { htmlElement } from "@hopper-ui/components";

const HtmlUnderline = htmlElement("u");
```

### Custom Components

Using Hopper style props on custom components.

Sometimes, you may find yourself needing to build a component that doesn't exist in Hopper, but this component would benefit from using Hopper's style props.

There are 2 ways to build a custom component with Hopper style properties, as seen below:

##### HTML Element

Instead of using a native HTML element to create your component, you can use one of the Hopper HTML Element components. This way, you can simply forward the style props to the component.

This is an example using a `Div`, but you can use any of the HTML Element components.

```tsx
import { Div, type DivProps } from "@hopper-ui/components";

interface MyCustomComponentProps extends Omit<DivProps, "children"> {
    // your custom props here
}

function MyCustomComponent(props: MyCustomComponentProps) {
    return (
        <Div {...props} >
            My Custom component
        </Div>
    );
}

export default function Example() {
    return (
        <MyCustomComponent
            paddingY="inset-md"
        />
    );
}
```

##### useStyledSystem

If you need to build a more complex component, you can use the `useStyledSystem` function. This function allows you to create a custom component with Hopper style props.

The `useStyledSystem` function returns a `stylingProps` object containing a resulting style object and a className. You can then spread the `stylingProps` object on your component, or merge them with your existing className and style properties.

We don't automatically merge the `className` and `style` props because most of the className and style props in Hopper also accept a function.

```tsx
import { useStyledSystem } from "@hopper-ui/components";
import type { StyledComponentProps } from "@hopper-ui/styled-system";
import { Button as RACButton, ButtonProps as RACButtonProps } from "react-aria-components";

interface MyCustomButtonProps extends StyledComponentProps<RACButtonProps> {
    // your custom props here
}

function MyCustomButton(props: MyCustomButtonProps) {
    const { stylingProps, children, className, style, ...otherProps } = useStyledSystem(props);

    // append or use "classnames" or "clsx" to merge classes
    const classNames = `${stylingProps.className ?? ""} ${className ?? ""}`;
    const mergedStyles = { ...stylingProps.style, ...style };

    return (
        <RACButton style={mergedStyles} className={classNames} {...otherProps}>
            {children}
        </RACButton>
    );
}

export default function Example() {
    return (
        <MyCustomButton
            paddingY="inset-md"
        >
            My Styled Button
        </MyCustomButton>
    );
}
```

## Tokens

> This section outlines comprehensive details about semantic and core tokens.

### Introduction

Getting started with Workleap Design Tokens

Design tokens are central to Workleap's design language, underpinning all UI elements. These tokens encapsulate the Workleap brand and are maintained within the Hopper Design System.

A design token can store any of the following elements:

* A single value such as a `color`, `font-size`, or `border-width`.
* A collection of indivisible values such as a `box-shadow`.

#### Definitions

Hopper aims to provide a three-tier token system, with each tier serving a specific purpose.

##### Core tokens

These tokens represent fundamental values like hexadecimal color codes, border widths, or font sizes. They serve as the building blocks of the design system.

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| core\_sapphire-200   | `--hop-sapphire-200`           | #95b1ff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Semantic tokens

Semantic tokens convey design intent and are context-aware. They should be used in most scenarios.

###### Light

| Component Prop Value | Token Name (CSS Variable Name)   | Value   |
| -------------------- | -------------------------------- | ------- |
| primary-disabled     | `--hop-primary-surface-disabled` | #95b1ff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Dark

| Component Prop Value | Token Name (CSS Variable Name)   | Value   |
| -------------------- | -------------------------------- | ------- |
| primary-disabled     | `--hop-primary-surface-disabled` | #2040c7 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Component tokens

These tokens cover the essential details of component implementation and are provided by the components themselves. They are linked to their specific components and should only be used when building components with a technology other than React.

###### Light

| Component Prop Value             | Token Name (CSS Variable Name)       | Value   |
| -------------------------------- | ------------------------------------ | ------- |
| hop-comp-button-primary-disabled | `--hop-comp-button-primary-disabled` | #95b1ff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Dark

| Component Prop Value             | Token Name (CSS Variable Name)       | Value   |
| -------------------------------- | ------------------------------------ | ------- |
| hop-comp-button-primary-disabled | `--hop-comp-button-primary-disabled` | #2040c7 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

#### When to use

##### For Developers

Tokens should be used whenever Hopper components do not suit your current use case or if you can't use Hopper React components. They are also useful for situations such as setting a background color on an element.

It should be noted that if your current stack prevents you from directly using Hopper components, it is recommended to use component tokens, once released, in priority as they are mapped 1:1 with Hopper implementation.

##### For Designers

When developing features for Workleap, you may need to create new components or enhance existing ones. In this case, you should use semantic tokens to create your components. This ensures consistency with the rest of the design system. Only semantic tokens are available in Figma.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  `<Div backgroundColor="neutral" />`

  Reference the value from the 'Component Prop Value' column in the tokens table when setting component properties.

* 🚫 Don't:

  `<Div backgroundColor="neutral-surface" />`

  Use the 'Token Name (CSS Variable Name)' directly in the component prop value.

### Color

Design tokens are design decisions, translated into data. Explore the semantic color design tokens.

Colors are a clear way to convey meaning in design. Over time, we associate colors with specific meanings based on their context and frequency of use. In the Workleap ecosystem, each color complements the others and has a specific role.

#### Guidelines

* **Communication is key** - Although we value an aesthetically pleasing use of color, we place a higher value on clear communication. Color supports the purpose of the content, communicating things like hierarchy, interactive states and differences between visual elements.
* **Colors have meaning** - Each color has assigned sentiment based on how they function within the interface. Defined color roles make things easy to modify and customize later. Their meaning is also expanded to all Workleap verticals so that users understand that they're in the same ecosystem and can recognize its codes.

#### Deprecation notice

Tokens with the `-active` suffix are deprecated and should not be used in new code. They will be removed in a future release. Prefer using their `-press` counterparts. In some instances, `-active` tokens should be replaced with `-selected` tokens. This should be documented in your Figma files. If in doubt, validate with a designer.

#### Light Tokens

##### Neutral

**🎨 Workleap theme tokens:**

| Component Prop Value                 | Token Name (CSS Variable Name)                       | Value                  |
| ------------------------------------ | ---------------------------------------------------- | ---------------------- |
| neutral-active                       | `--hop-neutral-border-active`                        | #787a7e                |
| neutral-active                       | `--hop-neutral-icon-active`                          | #232426                |
| neutral-weak-active                  | `--hop-neutral-icon-weak-active`                     | #484a4d                |
| neutral-active                       | `--hop-neutral-surface-active`                       | #eef0f2                |
| neutral-weak-active                  | `--hop-neutral-surface-weak-active`                  | #cbcdd2                |
| neutral-active                       | `--hop-neutral-text-active`                          | #232426                |
| neutral-weak-active                  | `--hop-neutral-text-weak-active`                     | #484a4d                |
| neutral                              | `--hop-neutral-border`                               | #b3b5ba                |
| neutral-selected                     | `--hop-neutral-border-selected`                      | #313335                |
| neutral-disabled                     | `--hop-neutral-border-disabled`                      | #eef0f2                |
| neutral-hover                        | `--hop-neutral-border-hover`                         | #96989d                |
| neutral-press                        | `--hop-neutral-border-press`                         | #787a7e                |
| neutral-strong                       | `--hop-neutral-border-strong`                        | #313335                |
| neutral-strong-hover                 | `--hop-neutral-border-strong-hover`                  | #484a4d                |
| neutral-weak                         | `--hop-neutral-border-weak`                          | #e1e3e7                |
| neutral-weakest                      | `--hop-neutral-border-weakest`                       | #eef0f2                |
| neutral                              | `--hop-neutral-icon`                                 | #313335                |
| neutral-selected                     | `--hop-neutral-icon-selected`                        | #ffffff                |
| neutral-disabled                     | `--hop-neutral-icon-disabled`                        | #96989d                |
| neutral-hover                        | `--hop-neutral-icon-hover`                           | #484a4d                |
| neutral-press                        | `--hop-neutral-icon-press`                           | #232426                |
| neutral-strong                       | `--hop-neutral-icon-strong`                          | #ffffff                |
| neutral-strong-hover                 | `--hop-neutral-icon-strong-hover`                    | #ffffff                |
| neutral-weak                         | `--hop-neutral-icon-weak`                            | #787a7e                |
| neutral-weak-hover                   | `--hop-neutral-icon-weak-hover`                      | #5e6064                |
| neutral-weak-press                   | `--hop-neutral-icon-weak-press`                      | #484a4d                |
| neutral-weak-selected                | `--hop-neutral-icon-weak-selected`                   | #5e6064                |
| neutral-weakest                      | `--hop-neutral-icon-weakest`                         | #b3b5ba                |
| neutral-inverse                      | `--hop-neutral-icon-inverse`                         | #232426                |
| neutral-always-light                 | `--hop-neutral-icon-always-light`                    | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-icon-always-dark`                     | #232426                |
| neutral                              | `--hop-neutral-surface`                              | #ffffff                |
| neutral-selected                     | `--hop-neutral-surface-selected`                     | #313335                |
| neutral-disabled                     | `--hop-neutral-surface-disabled`                     | #eef0f2                |
| neutral-hover                        | `--hop-neutral-surface-hover`                        | #f8f9fa                |
| neutral-press                        | `--hop-neutral-surface-press`                        | #eef0f2                |
| neutral-strong                       | `--hop-neutral-surface-strong`                       | #313335                |
| neutral-transparent                  | `--hop-neutral-surface-transparent`                  | rgb(255 255 255 / 0.9) |
| neutral-weak                         | `--hop-neutral-surface-weak`                         | #eef0f2                |
| neutral-weak-transparent-always-dark | `--hop-neutral-surface-weak-transparent-always-dark` | rgb(49 51 53 / 0.75)   |
| neutral-weak-selected                | `--hop-neutral-surface-weak-selected`                | #eef0f2                |
| neutral-weak-hover                   | `--hop-neutral-surface-weak-hover`                   | #e1e3e7                |
| neutral-weak-press                   | `--hop-neutral-surface-weak-press`                   | #cbcdd2                |
| neutral-weakest                      | `--hop-neutral-surface-weakest`                      | #f8f9fa                |
| neutral-weakest-selected             | `--hop-neutral-surface-weakest-selected`             | #eef0f2                |
| neutral-weakest-hover                | `--hop-neutral-surface-weakest-hover`                | #eef0f2                |
| neutral-inverse                      | `--hop-neutral-surface-inverse`                      | #232426                |
| neutral-always-light                 | `--hop-neutral-surface-always-light`                 | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-surface-always-dark`                  | #232426                |
| neutral                              | `--hop-neutral-text`                                 | #313335                |
| neutral-selected                     | `--hop-neutral-text-selected`                        | #ffffff                |
| neutral-disabled                     | `--hop-neutral-text-disabled`                        | #96989d                |
| neutral-hover                        | `--hop-neutral-text-hover`                           | #484a4d                |
| neutral-press                        | `--hop-neutral-text-press`                           | #232426                |
| neutral-strong                       | `--hop-neutral-text-strong`                          | #ffffff                |
| neutral-weak                         | `--hop-neutral-text-weak`                            | #6c6e72                |
| neutral-weak-hover                   | `--hop-neutral-text-weak-hover`                      | #5e6064                |
| neutral-weak-press                   | `--hop-neutral-text-weak-press`                      | #484a4d                |
| neutral-weak-selected                | `--hop-neutral-text-weak-selected`                   | #5e6064                |
| neutral-weakest                      | `--hop-neutral-text-weakest`                         | #96989d                |
| neutral-inverse                      | `--hop-neutral-text-inverse`                         | #232426                |
| neutral-always-light                 | `--hop-neutral-text-always-light`                    | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-text-always-dark`                     | #232426                |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                 | Token Name (CSS Variable Name)                       | Value                  |
| ------------------------------------ | ---------------------------------------------------- | ---------------------- |
| neutral-active                       | `--hop-neutral-border-active`                        | #787a7e                |
| neutral-active                       | `--hop-neutral-icon-active`                          | #232426                |
| neutral-weak-active                  | `--hop-neutral-icon-weak-active`                     | #484a4d                |
| neutral-active                       | `--hop-neutral-surface-active`                       | #eef0f2                |
| neutral-weak-active                  | `--hop-neutral-surface-weak-active`                  | #cbcdd2                |
| neutral-active                       | `--hop-neutral-text-active`                          | #232426                |
| neutral-weak-active                  | `--hop-neutral-text-weak-active`                     | #484a4d                |
| neutral                              | `--hop-neutral-border`                               | #b3b5ba                |
| neutral-selected                     | `--hop-neutral-border-selected`                      | #313335                |
| neutral-disabled                     | `--hop-neutral-border-disabled`                      | #eef0f2                |
| neutral-hover                        | `--hop-neutral-border-hover`                         | #96989d                |
| neutral-press                        | `--hop-neutral-border-press`                         | #787a7e                |
| neutral-strong                       | `--hop-neutral-border-strong`                        | #313335                |
| neutral-strong-hover                 | `--hop-neutral-border-strong-hover`                  | #484a4d                |
| neutral-weak                         | `--hop-neutral-border-weak`                          | #e1e3e7                |
| neutral-weakest                      | `--hop-neutral-border-weakest`                       | #eef0f2                |
| neutral                              | `--hop-neutral-icon`                                 | #313335                |
| neutral-selected                     | `--hop-neutral-icon-selected`                        | #ffffff                |
| neutral-disabled                     | `--hop-neutral-icon-disabled`                        | #96989d                |
| neutral-hover                        | `--hop-neutral-icon-hover`                           | #484a4d                |
| neutral-press                        | `--hop-neutral-icon-press`                           | #232426                |
| neutral-strong                       | `--hop-neutral-icon-strong`                          | #ffffff                |
| neutral-strong-hover                 | `--hop-neutral-icon-strong-hover`                    | #ffffff                |
| neutral-weak                         | `--hop-neutral-icon-weak`                            | #787a7e                |
| neutral-weak-hover                   | `--hop-neutral-icon-weak-hover`                      | #5e6064                |
| neutral-weak-press                   | `--hop-neutral-icon-weak-press`                      | #484a4d                |
| neutral-weak-selected                | `--hop-neutral-icon-weak-selected`                   | #5e6064                |
| neutral-weakest                      | `--hop-neutral-icon-weakest`                         | #b3b5ba                |
| neutral-inverse                      | `--hop-neutral-icon-inverse`                         | #232426                |
| neutral-always-light                 | `--hop-neutral-icon-always-light`                    | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-icon-always-dark`                     | #232426                |
| neutral                              | `--hop-neutral-surface`                              | #ffffff                |
| neutral-selected                     | `--hop-neutral-surface-selected`                     | #313335                |
| neutral-disabled                     | `--hop-neutral-surface-disabled`                     | #eef0f2                |
| neutral-hover                        | `--hop-neutral-surface-hover`                        | #f8f9fa                |
| neutral-press                        | `--hop-neutral-surface-press`                        | #eef0f2                |
| neutral-strong                       | `--hop-neutral-surface-strong`                       | #313335                |
| neutral-transparent                  | `--hop-neutral-surface-transparent`                  | rgb(255 255 255 / 0.9) |
| neutral-weak                         | `--hop-neutral-surface-weak`                         | #eef0f2                |
| neutral-weak-transparent-always-dark | `--hop-neutral-surface-weak-transparent-always-dark` | rgb(49 51 53 / 0.75)   |
| neutral-weak-selected                | `--hop-neutral-surface-weak-selected`                | #eef0f2                |
| neutral-weak-hover                   | `--hop-neutral-surface-weak-hover`                   | #e1e3e7                |
| neutral-weak-press                   | `--hop-neutral-surface-weak-press`                   | #cbcdd2                |
| neutral-weakest                      | `--hop-neutral-surface-weakest`                      | #f8f9fa                |
| neutral-weakest-selected             | `--hop-neutral-surface-weakest-selected`             | #eef0f2                |
| neutral-weakest-hover                | `--hop-neutral-surface-weakest-hover`                | #eef0f2                |
| neutral-inverse                      | `--hop-neutral-surface-inverse`                      | #232426                |
| neutral-always-light                 | `--hop-neutral-surface-always-light`                 | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-surface-always-dark`                  | #232426                |
| neutral                              | `--hop-neutral-text`                                 | #313335                |
| neutral-selected                     | `--hop-neutral-text-selected`                        | #ffffff                |
| neutral-disabled                     | `--hop-neutral-text-disabled`                        | #96989d                |
| neutral-hover                        | `--hop-neutral-text-hover`                           | #484a4d                |
| neutral-press                        | `--hop-neutral-text-press`                           | #232426                |
| neutral-strong                       | `--hop-neutral-text-strong`                          | #ffffff                |
| neutral-weak                         | `--hop-neutral-text-weak`                            | #6c6e72                |
| neutral-weak-hover                   | `--hop-neutral-text-weak-hover`                      | #5e6064                |
| neutral-weak-press                   | `--hop-neutral-text-weak-press`                      | #484a4d                |
| neutral-weak-selected                | `--hop-neutral-text-weak-selected`                   | #5e6064                |
| neutral-weakest                      | `--hop-neutral-text-weakest`                         | #96989d                |
| neutral-inverse                      | `--hop-neutral-text-inverse`                         | #232426                |
| neutral-always-light                 | `--hop-neutral-text-always-light`                    | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-text-always-dark`                     | #232426                |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Primary

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| primary-active          | `--hop-primary-border-active`           | #6c8ffd |
| primary-active          | `--hop-primary-icon-active`             | #2040c7 |
| primary-active          | `--hop-primary-surface-active`          | #6c8ffd |
| primary-strong-active   | `--hop-primary-surface-strong-active`   | #2040c7 |
| primary-weak-active     | `--hop-primary-surface-weak-active`     | #d6e0ff |
| primary-active          | `--hop-primary-text-active`             | #2040c7 |
| primary                 | `--hop-primary-border`                  | #4767fe |
| primary-selected        | `--hop-primary-border-selected`         | #4767fe |
| primary-focus           | `--hop-primary-border-focus`            | #3b57ff |
| primary-press           | `--hop-primary-border-press`            | #3b57ff |
| primary                 | `--hop-primary-icon`                    | #3b57ff |
| primary-selected        | `--hop-primary-icon-selected`           | #3b57ff |
| primary-disabled        | `--hop-primary-icon-disabled`           | #95b1ff |
| primary-hover           | `--hop-primary-icon-hover`              | #2a43e8 |
| primary-press           | `--hop-primary-icon-press`              | #2040c7 |
| primary-strong          | `--hop-primary-icon-strong`             | #ffffff |
| primary-strong-hover    | `--hop-primary-icon-strong-hover`       | #ffffff |
| primary                 | `--hop-primary-surface`                 | #e6ebff |
| primary-selected        | `--hop-primary-surface-selected`        | #e6ebff |
| primary-disabled        | `--hop-primary-surface-disabled`        | #95b1ff |
| primary-focus           | `--hop-primary-surface-focus`           | #f5f6ff |
| primary-hover           | `--hop-primary-surface-hover`           | #95b1ff |
| primary-press           | `--hop-primary-surface-press`           | #6c8ffd |
| primary-strong          | `--hop-primary-surface-strong`          | #4767fe |
| primary-strong-selected | `--hop-primary-surface-strong-selected` | #e6ebff |
| primary-strong-hover    | `--hop-primary-surface-strong-hover`    | #2a43e8 |
| primary-strong-press    | `--hop-primary-surface-strong-press`    | #2040c7 |
| primary-weak            | `--hop-primary-surface-weak`            | #f5f6ff |
| primary-weak-selected   | `--hop-primary-surface-weak-selected`   | #b9cbff |
| primary-weak-hover      | `--hop-primary-surface-weak-hover`      | #e6ebff |
| primary-weak-press      | `--hop-primary-surface-weak-press`      | #d6e0ff |
| primary                 | `--hop-primary-text`                    | #3b57ff |
| primary-selected        | `--hop-primary-text-selected`           | #3b57ff |
| primary-disabled        | `--hop-primary-text-disabled`           | #95b1ff |
| primary-hover           | `--hop-primary-text-hover`              | #2a43e8 |
| primary-press           | `--hop-primary-text-press`              | #2040c7 |
| primary-strong          | `--hop-primary-text-strong`             | #ffffff |
| primary-strong-hover    | `--hop-primary-text-strong-hover`       | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| primary-active          | `--hop-primary-border-active`           | #6c8ffd |
| primary-active          | `--hop-primary-icon-active`             | #2040c7 |
| primary-active          | `--hop-primary-surface-active`          | #6c8ffd |
| primary-strong-active   | `--hop-primary-surface-strong-active`   | #2040c7 |
| primary-weak-active     | `--hop-primary-surface-weak-active`     | #d6e0ff |
| primary-active          | `--hop-primary-text-active`             | #2040c7 |
| primary                 | `--hop-primary-border`                  | #736ad2 |
| primary-selected        | `--hop-primary-border-selected`         | #736ad2 |
| primary-focus           | `--hop-primary-border-focus`            | #685dc9 |
| primary-press           | `--hop-primary-border-press`            | #685dc9 |
| primary                 | `--hop-primary-icon`                    | #685dc9 |
| primary-selected        | `--hop-primary-icon-selected`           | #685dc9 |
| primary-disabled        | `--hop-primary-icon-disabled`           | #b4abff |
| primary-hover           | `--hop-primary-icon-hover`              | #6057b3 |
| primary-press           | `--hop-primary-icon-press`              | #4d468f |
| primary-strong          | `--hop-primary-icon-strong`             | #ffffff |
| primary-strong-hover    | `--hop-primary-icon-strong-hover`       | #ffffff |
| primary                 | `--hop-primary-surface`                 | #eceaff |
| primary-selected        | `--hop-primary-surface-selected`        | #736ad2 |
| primary-disabled        | `--hop-primary-surface-disabled`        | #b4abff |
| primary-focus           | `--hop-primary-surface-focus`           | #f6f6ff |
| primary-hover           | `--hop-primary-surface-hover`           | #b4abff |
| primary-press           | `--hop-primary-surface-press`           | #8e85ec |
| primary-strong          | `--hop-primary-surface-strong`          | #736ad2 |
| primary-strong-selected | `--hop-primary-surface-strong-selected` | #3b356c |
| primary-strong-hover    | `--hop-primary-surface-strong-hover`    | #6057b3 |
| primary-strong-press    | `--hop-primary-surface-strong-press`    | #4d468f |
| primary-weak            | `--hop-primary-surface-weak`            | #f6f6ff |
| primary-weak-selected   | `--hop-primary-surface-weak-selected`   | #c3bcff |
| primary-weak-hover      | `--hop-primary-surface-weak-hover`      | #eceaff |
| primary-weak-press      | `--hop-primary-surface-weak-press`      | #deddff |
| primary                 | `--hop-primary-text`                    | #685dc9 |
| primary-selected        | `--hop-primary-text-selected`           | #685dc9 |
| primary-disabled        | `--hop-primary-text-disabled`           | #b4abff |
| primary-hover           | `--hop-primary-text-hover`              | #6057b3 |
| primary-press           | `--hop-primary-text-press`              | #4d468f |
| primary-strong          | `--hop-primary-text-strong`             | #ffffff |
| primary-strong-hover    | `--hop-primary-text-strong-hover`       | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Success

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| success              | `--hop-success-border`         | #aad89d |
| success              | `--hop-success-icon`           | #115a52 |
| success-weakest      | `--hop-success-icon-weakest`   | #aad89d |
| success-weak         | `--hop-success-icon-weak`      | #47a584 |
| success              | `--hop-success-surface`        | #f4f9e9 |
| success-strong       | `--hop-success-surface-strong` | #aad89d |
| success-weak         | `--hop-success-surface-weak`   | #e3f3b9 |
| success              | `--hop-success-text`           | #115a52 |
| success-hover        | `--hop-success-text-hover`     | #16433d |
| success-weak         | `--hop-success-text-weak`      | #47a584 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| success              | `--hop-success-border`         | #66ecae |
| success              | `--hop-success-icon`           | #0a6042 |
| success-weakest      | `--hop-success-icon-weakest`   | #66ecae |
| success-weak         | `--hop-success-icon-weak`      | #12cb80 |
| success              | `--hop-success-surface`        | #eafdf3 |
| success-strong       | `--hop-success-surface-strong` | #66ecae |
| success-weak         | `--hop-success-surface-weak`   | #d7faea |
| success              | `--hop-success-text`           | #0a6042 |
| success-hover        | `--hop-success-text-hover`     | #084a34 |
| success-weak         | `--hop-success-text-weak`      | #12cb80 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Warning

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| warning              | `--hop-warning-border`         | #ffbf92 |
| warning              | `--hop-warning-icon`           | #8c3504 |
| warning-weakest      | `--hop-warning-icon-weakest`   | #ffbf92 |
| warning-weak         | `--hop-warning-icon-weak`      | #e57723 |
| warning              | `--hop-warning-surface`        | #fff5e9 |
| warning-strong       | `--hop-warning-surface-strong` | #ffbf92 |
| warning-weak         | `--hop-warning-surface-weak`   | #ffe8d3 |
| warning              | `--hop-warning-text`           | #8c3504 |
| warning-weak         | `--hop-warning-text-weak`      | #e57723 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| warning              | `--hop-warning-border`         | #ffd873 |
| warning              | `--hop-warning-icon`           | #705900 |
| warning-weakest      | `--hop-warning-icon-weakest`   | #ffd873 |
| warning-weak         | `--hop-warning-icon-weak`      | #ffb700 |
| warning              | `--hop-warning-surface`        | #fff6e0 |
| warning-strong       | `--hop-warning-surface-strong` | #ffd873 |
| warning-weak         | `--hop-warning-surface-weak`   | #fff1cc |
| warning              | `--hop-warning-text`           | #705900 |
| warning-weak         | `--hop-warning-text-weak`      | #ffb700 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Danger

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)       | Value   |
| -------------------- | ------------------------------------ | ------- |
| danger-active        | `--hop-danger-border-active`         | #ba2d2d |
| danger-active        | `--hop-danger-icon-active`           | #6c2320 |
| danger-weak-active   | `--hop-danger-icon-weak-active`      | #ba2d2d |
| danger-active        | `--hop-danger-surface-active`        | #ba2d2d |
| danger-weak-active   | `--hop-danger-surface-weak-active`   | #ffbcb7 |
| danger-active        | `--hop-danger-text-active`           | #6c2320 |
| danger-weak-active   | `--hop-danger-text-weak-active`      | #ba2d2d |
| danger               | `--hop-danger-border`                | #ffbcb7 |
| danger-selected      | `--hop-danger-border-selected`       | #df3236 |
| danger-strong        | `--hop-danger-border-strong`         | #fa4d59 |
| danger-press         | `--hop-danger-border-press`          | #fa4d59 |
| danger               | `--hop-danger-icon`                  | #952927 |
| danger-selected      | `--hop-danger-icon-selected`         | #df3236 |
| danger-disabled      | `--hop-danger-icon-disabled`         | #ffbcb7 |
| danger-hover         | `--hop-danger-icon-hover`            | #cb2e31 |
| danger-press         | `--hop-danger-icon-press`            | #6c2320 |
| danger-strong        | `--hop-danger-icon-strong`           | #ffffff |
| danger-strong-hover  | `--hop-danger-icon-strong-hover`     | #ffffff |
| danger-weak          | `--hop-danger-icon-weak`             | #df3236 |
| danger-weak-hover    | `--hop-danger-icon-weak-hover`       | #cb2e31 |
| danger-weak-press    | `--hop-danger-icon-weak-press`       | #ba2d2d |
| danger-weakest       | `--hop-danger-icon-weakest`          | #ffd6d3 |
| danger               | `--hop-danger-surface`               | #fdf6f6 |
| danger-selected      | `--hop-danger-surface-selected`      | #fde6e5 |
| danger-disabled      | `--hop-danger-surface-disabled`      | #ffbcb7 |
| danger-hover         | `--hop-danger-surface-hover`         | #cb2e31 |
| danger-press         | `--hop-danger-surface-press`         | #ba2d2d |
| danger-strong        | `--hop-danger-surface-strong`        | #df3236 |
| danger-strong-hover  | `--hop-danger-surface-strong-hover`  | #cb2e31 |
| danger-weak          | `--hop-danger-surface-weak`          | #fde6e5 |
| danger-weak-hover    | `--hop-danger-surface-weak-hover`    | #ffd6d3 |
| danger-weak-press    | `--hop-danger-surface-weak-press`    | #ffbcb7 |
| danger-weak-selected | `--hop-danger-surface-weak-selected` | #ffbcb7 |
| danger               | `--hop-danger-text`                  | #952927 |
| danger-selected      | `--hop-danger-text-selected`         | #df3236 |
| danger-disabled      | `--hop-danger-text-disabled`         | #ffbcb7 |
| danger-hover         | `--hop-danger-text-hover`            | #cb2e31 |
| danger-press         | `--hop-danger-text-press`            | #6c2320 |
| danger-strong        | `--hop-danger-text-strong`           | #ffffff |
| danger-strong-hover  | `--hop-danger-text-strong-hover`     | #ffffff |
| danger-weak          | `--hop-danger-text-weak`             | #df3236 |
| danger-weak-hover    | `--hop-danger-text-weak-hover`       | #cb2e31 |
| danger-weak-press    | `--hop-danger-text-weak-press`       | #ba2d2d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)       | Value   |
| -------------------- | ------------------------------------ | ------- |
| danger-active        | `--hop-danger-border-active`         | #ba2d2d |
| danger-active        | `--hop-danger-icon-active`           | #6c2320 |
| danger-weak-active   | `--hop-danger-icon-weak-active`      | #ba2d2d |
| danger-active        | `--hop-danger-surface-active`        | #ba2d2d |
| danger-weak-active   | `--hop-danger-surface-weak-active`   | #ffbcb7 |
| danger-active        | `--hop-danger-text-active`           | #6c2320 |
| danger-weak-active   | `--hop-danger-text-weak-active`      | #ba2d2d |
| danger               | `--hop-danger-border`                | #fa9ba9 |
| danger-selected      | `--hop-danger-border-selected`       | #de2840 |
| danger-strong        | `--hop-danger-border-strong`         | #f5425d |
| danger-press         | `--hop-danger-border-press`          | #f5425d |
| danger               | `--hop-danger-icon`                  | #711822 |
| danger-selected      | `--hop-danger-icon-selected`         | #de2840 |
| danger-disabled      | `--hop-danger-icon-disabled`         | #fa9ba9 |
| danger-hover         | `--hop-danger-icon-hover`            | #ba1f34 |
| danger-press         | `--hop-danger-icon-press`            | #50161c |
| danger-strong        | `--hop-danger-icon-strong`           | #ffffff |
| danger-strong-hover  | `--hop-danger-icon-strong-hover`     | #ffffff |
| danger-weak          | `--hop-danger-icon-weak`             | #de2840 |
| danger-weak-hover    | `--hop-danger-icon-weak-hover`       | #ba1f34 |
| danger-weak-press    | `--hop-danger-icon-weak-press`       | #951b2a |
| danger-weakest       | `--hop-danger-icon-weakest`          | #fcbcc5 |
| danger               | `--hop-danger-surface`               | #feeaec |
| danger-selected      | `--hop-danger-surface-selected`      | #fdd3d8 |
| danger-disabled      | `--hop-danger-surface-disabled`      | #fa9ba9 |
| danger-hover         | `--hop-danger-surface-hover`         | #ba1f34 |
| danger-press         | `--hop-danger-surface-press`         | #951b2a |
| danger-strong        | `--hop-danger-surface-strong`        | #de2840 |
| danger-strong-hover  | `--hop-danger-surface-strong-hover`  | #ba1f34 |
| danger-weak          | `--hop-danger-surface-weak`          | #fdd3d8 |
| danger-weak-hover    | `--hop-danger-surface-weak-hover`    | #fcbcc5 |
| danger-weak-press    | `--hop-danger-surface-weak-press`    | #fa9ba9 |
| danger-weak-selected | `--hop-danger-surface-weak-selected` | #fa9ba9 |
| danger               | `--hop-danger-text`                  | #711822 |
| danger-selected      | `--hop-danger-text-selected`         | #de2840 |
| danger-disabled      | `--hop-danger-text-disabled`         | #fa9ba9 |
| danger-hover         | `--hop-danger-text-hover`            | #ba1f34 |
| danger-press         | `--hop-danger-text-press`            | #50161c |
| danger-strong        | `--hop-danger-text-strong`           | #ffffff |
| danger-strong-hover  | `--hop-danger-text-strong-hover`     | #ffffff |
| danger-weak          | `--hop-danger-text-weak`             | #de2840 |
| danger-weak-hover    | `--hop-danger-text-weak-hover`       | #ba1f34 |
| danger-weak-press    | `--hop-danger-text-weak-press`       | #951b2a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Information

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)     | Value   |
| -------------------- | ---------------------------------- | ------- |
| information          | `--hop-information-border`         | #9fd2f7 |
| information          | `--hop-information-icon`           | #0a538b |
| information-weakest  | `--hop-information-icon-weakest`   | #bae6ff |
| information-weak     | `--hop-information-icon-weak`      | #5d9acd |
| information          | `--hop-information-surface`        | #f0f8ff |
| information-strong   | `--hop-information-surface-strong` | #9fd2f7 |
| information-weak     | `--hop-information-surface-weak`   | #d9efff |
| information          | `--hop-information-text`           | #003d70 |
| information-weak     | `--hop-information-text-weak`      | #5d9acd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)     | Value   |
| -------------------- | ---------------------------------- | ------- |
| information          | `--hop-information-border`         | #9fd2f7 |
| information          | `--hop-information-icon`           | #0a538b |
| information-weakest  | `--hop-information-icon-weakest`   | #bae6ff |
| information-weak     | `--hop-information-icon-weak`      | #5d9acd |
| information          | `--hop-information-surface`        | #f0f8ff |
| information-strong   | `--hop-information-surface-strong` | #9fd2f7 |
| information-weak     | `--hop-information-surface-weak`   | #d9efff |
| information          | `--hop-information-text`           | #003d70 |
| information-weak     | `--hop-information-text-weak`      | #5d9acd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Upsell

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)     | Value   |
| -------------------- | ---------------------------------- | ------- |
| upsell-active        | `--hop-upsell-border-active`       | #e2a934 |
| upsell-active        | `--hop-upsell-icon-active`         | #2f250d |
| upsell-weak-active   | `--hop-upsell-icon-weak-active`    | #7e5e0a |
| upsell-active        | `--hop-upsell-surface-active`      | #e2a934 |
| upsell-weak-active   | `--hop-upsell-surface-weak-active` | #f7e694 |
| upsell-active        | `--hop-upsell-text-active`         | #2f250d |
| upsell-weak-active   | `--hop-upsell-text-weak-active`    | #7e5e0a |
| upsell               | `--hop-upsell-border`              | #eac96d |
| upsell-selected      | `--hop-upsell-border-selected`     | #996f08 |
| upsell-disabled      | `--hop-upsell-border-disabled`     | #f7e694 |
| upsell-press         | `--hop-upsell-border-press`        | #c28b12 |
| upsell               | `--hop-upsell-icon`                | #654c0d |
| upsell-selected      | `--hop-upsell-icon-selected`       | #996f08 |
| upsell-hover         | `--hop-upsell-icon-hover`          | #4b390f |
| upsell-press         | `--hop-upsell-icon-press`          | #2f250d |
| upsell-weakest       | `--hop-upsell-icon-weakest`        | #f7e694 |
| upsell-weak          | `--hop-upsell-icon-weak`           | #c28b12 |
| upsell-weak-hover    | `--hop-upsell-icon-weak-hover`     | #8b6609 |
| upsell-weak-press    | `--hop-upsell-icon-weak-press`     | #7e5e0a |
| upsell               | `--hop-upsell-surface`             | #fff8d6 |
| upsell-selected      | `--hop-upsell-surface-selected`    | #fff2b8 |
| upsell-disabled      | `--hop-upsell-surface-disabled`    | #fff8d6 |
| upsell-hover         | `--hop-upsell-surface-hover`       | #fff2b8 |
| upsell-press         | `--hop-upsell-surface-press`       | #f7e694 |
| upsell-weak          | `--hop-upsell-surface-weak`        | #f7e694 |
| upsell-weak-hover    | `--hop-upsell-surface-weak-hover`  | #eac96d |
| upsell-weak-press    | `--hop-upsell-surface-weak-press`  | #e2a934 |
| upsell               | `--hop-upsell-text`                | #654c0d |
| upsell-selected      | `--hop-upsell-text-selected`       | #996f08 |
| upsell-disabled      | `--hop-upsell-text-disabled`       | #996f08 |
| upsell-hover         | `--hop-upsell-text-hover`          | #4b390f |
| upsell-press         | `--hop-upsell-text-press`          | #2f250d |
| upsell-weak          | `--hop-upsell-text-weak`           | #c28b12 |
| upsell-weak-hover    | `--hop-upsell-text-weak-hover`     | #8b6609 |
| upsell-weak-press    | `--hop-upsell-text-weak-press`     | #7e5e0a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)     | Value   |
| -------------------- | ---------------------------------- | ------- |
| upsell-active        | `--hop-upsell-border-active`       | #e2a934 |
| upsell-active        | `--hop-upsell-icon-active`         | #2f250d |
| upsell-weak-active   | `--hop-upsell-icon-weak-active`    | #7e5e0a |
| upsell-active        | `--hop-upsell-surface-active`      | #e2a934 |
| upsell-weak-active   | `--hop-upsell-surface-weak-active` | #f7e694 |
| upsell-active        | `--hop-upsell-text-active`         | #2f250d |
| upsell-weak-active   | `--hop-upsell-text-weak-active`    | #7e5e0a |
| upsell               | `--hop-upsell-border`              | #a3df00 |
| upsell-selected      | `--hop-upsell-border-selected`     | #5f8100 |
| upsell-disabled      | `--hop-upsell-border-disabled`     | #b3f400 |
| upsell-press         | `--hop-upsell-border-press`        | #77a300 |
| upsell               | `--hop-upsell-icon`                | #415800 |
| upsell-selected      | `--hop-upsell-icon-selected`       | #4f6c00 |
| upsell-hover         | `--hop-upsell-icon-hover`          | #304200 |
| upsell-press         | `--hop-upsell-icon-press`          | #1f2b00 |
| upsell-weakest       | `--hop-upsell-icon-weakest`        | #b3f400 |
| upsell-weak          | `--hop-upsell-icon-weak`           | #77a300 |
| upsell-weak-hover    | `--hop-upsell-icon-weak-hover`     | #577600 |
| upsell-weak-press    | `--hop-upsell-icon-weak-press`     | #4f6c00 |
| upsell               | `--hop-upsell-surface`             | #edffbc |
| upsell-selected      | `--hop-upsell-surface-selected`    | #ccff42 |
| upsell-disabled      | `--hop-upsell-surface-disabled`    | #edffbc |
| upsell-hover         | `--hop-upsell-surface-hover`       | #ccff42 |
| upsell-press         | `--hop-upsell-surface-press`       | #b3f400 |
| upsell-weak          | `--hop-upsell-surface-weak`        | #b3f400 |
| upsell-weak-hover    | `--hop-upsell-surface-weak-hover`  | #a3df00 |
| upsell-weak-press    | `--hop-upsell-surface-weak-press`  | #8fc300 |
| upsell               | `--hop-upsell-text`                | #415800 |
| upsell-selected      | `--hop-upsell-text-selected`       | #4f6c00 |
| upsell-disabled      | `--hop-upsell-text-disabled`       | #5f8100 |
| upsell-hover         | `--hop-upsell-text-hover`          | #304200 |
| upsell-press         | `--hop-upsell-text-press`          | #1f2b00 |
| upsell-weak          | `--hop-upsell-text-weak`           | #77a300 |
| upsell-weak-hover    | `--hop-upsell-text-weak-hover`     | #577600 |
| upsell-weak-press    | `--hop-upsell-text-weak-press`     | #4f6c00 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Decorative

###### Option 1

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option1            | `--hop-decorative-option1-border`             | #b9cbff |
| decorative-option1            | `--hop-decorative-option1-icon`               | #152450 |
| decorative-option1            | `--hop-decorative-option1-surface`            | #b9cbff |
| decorative-option1-hover      | `--hop-decorative-option1-surface-hover`      | #95b1ff |
| decorative-option1-strong     | `--hop-decorative-option1-surface-strong`     | #95b1ff |
| decorative-option1-weak       | `--hop-decorative-option1-surface-weak`       | #e6ebff |
| decorative-option1-weak-hover | `--hop-decorative-option1-surface-weak-hover` | #d6e0ff |
| decorative-option1-weakest    | `--hop-decorative-option1-surface-weakest`    | #f5f6ff |
| decorative-option1            | `--hop-decorative-option1-text`               | #152450 |
| decorative-option1-weak       | `--hop-decorative-option1-text-weak`          | #6c8ffd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option1            | `--hop-decorative-option1-border`             | #b9cbff |
| decorative-option1            | `--hop-decorative-option1-icon`               | #152450 |
| decorative-option1            | `--hop-decorative-option1-surface`            | #b9cbff |
| decorative-option1-hover      | `--hop-decorative-option1-surface-hover`      | #95b1ff |
| decorative-option1-strong     | `--hop-decorative-option1-surface-strong`     | #95b1ff |
| decorative-option1-weak       | `--hop-decorative-option1-surface-weak`       | #e6ebff |
| decorative-option1-weak-hover | `--hop-decorative-option1-surface-weak-hover` | #d6e0ff |
| decorative-option1-weakest    | `--hop-decorative-option1-surface-weakest`    | #f5f6ff |
| decorative-option1            | `--hop-decorative-option1-text`               | #152450 |
| decorative-option1-weak       | `--hop-decorative-option1-text-weak`          | #6c8ffd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 2

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option2            | `--hop-decorative-option2-border`             | #a3d6cb |
| decorative-option2            | `--hop-decorative-option2-icon`               | #002d1c |
| decorative-option2            | `--hop-decorative-option2-surface`            | #bde8e1 |
| decorative-option2-hover      | `--hop-decorative-option2-surface-hover`      | #a3d6cb |
| decorative-option2-strong     | `--hop-decorative-option2-surface-strong`     | #a3d6cb |
| decorative-option2-weak       | `--hop-decorative-option2-surface-weak`       | #cff4ef |
| decorative-option2-weak-hover | `--hop-decorative-option2-surface-weak-hover` | #bde8e1 |
| decorative-option2-weakest    | `--hop-decorative-option2-surface-weakest`    | #ddfdf9 |
| decorative-option2            | `--hop-decorative-option2-text`               | #002d1c |
| decorative-option2-weak       | `--hop-decorative-option2-text-weak`          | #5da18c |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option2            | `--hop-decorative-option2-border`             | #a3d6cb |
| decorative-option2            | `--hop-decorative-option2-icon`               | #002d1c |
| decorative-option2            | `--hop-decorative-option2-surface`            | #bde8e1 |
| decorative-option2-hover      | `--hop-decorative-option2-surface-hover`      | #a3d6cb |
| decorative-option2-strong     | `--hop-decorative-option2-surface-strong`     | #a3d6cb |
| decorative-option2-weak       | `--hop-decorative-option2-surface-weak`       | #cff4ef |
| decorative-option2-weak-hover | `--hop-decorative-option2-surface-weak-hover` | #bde8e1 |
| decorative-option2-weakest    | `--hop-decorative-option2-surface-weakest`    | #ddfdf9 |
| decorative-option2            | `--hop-decorative-option2-text`               | #002d1c |
| decorative-option2-weak       | `--hop-decorative-option2-text-weak`          | #5da18c |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 3

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option3            | `--hop-decorative-option3-border`             | #ffbf92 |
| decorative-option3            | `--hop-decorative-option3-icon`               | #451a02 |
| decorative-option3            | `--hop-decorative-option3-surface`            | #ffbf92 |
| decorative-option3-hover      | `--hop-decorative-option3-surface-hover`      | #ff9b3f |
| decorative-option3-strong     | `--hop-decorative-option3-surface-strong`     | #ff9b3f |
| decorative-option3-weak       | `--hop-decorative-option3-surface-weak`       | #ffe8d3 |
| decorative-option3-weak-hover | `--hop-decorative-option3-surface-weak-hover` | #ffd8be |
| decorative-option3-weakest    | `--hop-decorative-option3-surface-weakest`    | #fff5e9 |
| decorative-option3            | `--hop-decorative-option3-text`               | #451a02 |
| decorative-option3-weak       | `--hop-decorative-option3-text-weak`          | #e57723 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option3            | `--hop-decorative-option3-border`             | #ffbf92 |
| decorative-option3            | `--hop-decorative-option3-icon`               | #451a02 |
| decorative-option3            | `--hop-decorative-option3-surface`            | #ffbf92 |
| decorative-option3-hover      | `--hop-decorative-option3-surface-hover`      | #ff9b3f |
| decorative-option3-strong     | `--hop-decorative-option3-surface-strong`     | #ff9b3f |
| decorative-option3-weak       | `--hop-decorative-option3-surface-weak`       | #ffe8d3 |
| decorative-option3-weak-hover | `--hop-decorative-option3-surface-weak-hover` | #ffd8be |
| decorative-option3-weakest    | `--hop-decorative-option3-surface-weakest`    | #fff5e9 |
| decorative-option3            | `--hop-decorative-option3-text`               | #451a02 |
| decorative-option3-weak       | `--hop-decorative-option3-text-weak`          | #e57723 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 4

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option4            | `--hop-decorative-option4-border`             | #aad89d |
| decorative-option4            | `--hop-decorative-option4-icon`               | #132a27 |
| decorative-option4            | `--hop-decorative-option4-surface`            | #cde8ac |
| decorative-option4-hover      | `--hop-decorative-option4-surface-hover`      | #aad89d |
| decorative-option4-strong     | `--hop-decorative-option4-surface-strong`     | #aad89d |
| decorative-option4-weak       | `--hop-decorative-option4-surface-weak`       | #e3f3b9 |
| decorative-option4-weak-hover | `--hop-decorative-option4-surface-weak-hover` | #cde8ac |
| decorative-option4-weakest    | `--hop-decorative-option4-surface-weakest`    | #f4f9e9 |
| decorative-option4            | `--hop-decorative-option4-text`               | #132a27 |
| decorative-option4-weak       | `--hop-decorative-option4-text-weak`          | #188a71 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option4            | `--hop-decorative-option4-border`             | #aad89d |
| decorative-option4            | `--hop-decorative-option4-icon`               | #132a27 |
| decorative-option4            | `--hop-decorative-option4-surface`            | #cde8ac |
| decorative-option4-hover      | `--hop-decorative-option4-surface-hover`      | #aad89d |
| decorative-option4-strong     | `--hop-decorative-option4-surface-strong`     | #aad89d |
| decorative-option4-weak       | `--hop-decorative-option4-surface-weak`       | #e3f3b9 |
| decorative-option4-weak-hover | `--hop-decorative-option4-surface-weak-hover` | #cde8ac |
| decorative-option4-weakest    | `--hop-decorative-option4-surface-weakest`    | #f4f9e9 |
| decorative-option4            | `--hop-decorative-option4-text`               | #132a27 |
| decorative-option4-weak       | `--hop-decorative-option4-text-weak`          | #188a71 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 5

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option5            | `--hop-decorative-option5-border`             | #9fd2f7 |
| decorative-option5            | `--hop-decorative-option5-icon`               | #00274b |
| decorative-option5            | `--hop-decorative-option5-surface`            | #bae6ff |
| decorative-option5-hover      | `--hop-decorative-option5-surface-hover`      | #9fd2f7 |
| decorative-option5-strong     | `--hop-decorative-option5-surface-strong`     | #9fd2f7 |
| decorative-option5-weak       | `--hop-decorative-option5-surface-weak`       | #d9efff |
| decorative-option5-weak-hover | `--hop-decorative-option5-surface-weak-hover` | #bae6ff |
| decorative-option5-weakest    | `--hop-decorative-option5-surface-weakest`    | #f0f8ff |
| decorative-option5            | `--hop-decorative-option5-text`               | #00274b |
| decorative-option5-weak       | `--hop-decorative-option5-text-weak`          | #5d9acd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option5            | `--hop-decorative-option5-border`             | #9fd2f7 |
| decorative-option5            | `--hop-decorative-option5-icon`               | #00274b |
| decorative-option5            | `--hop-decorative-option5-surface`            | #bae6ff |
| decorative-option5-hover      | `--hop-decorative-option5-surface-hover`      | #9fd2f7 |
| decorative-option5-strong     | `--hop-decorative-option5-surface-strong`     | #9fd2f7 |
| decorative-option5-weak       | `--hop-decorative-option5-surface-weak`       | #d9efff |
| decorative-option5-weak-hover | `--hop-decorative-option5-surface-weak-hover` | #bae6ff |
| decorative-option5-weakest    | `--hop-decorative-option5-surface-weakest`    | #f0f8ff |
| decorative-option5            | `--hop-decorative-option5-text`               | #00274b |
| decorative-option5-weak       | `--hop-decorative-option5-text-weak`          | #5d9acd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 6

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option6            | `--hop-decorative-option6-border`             | #eac96d |
| decorative-option6            | `--hop-decorative-option6-icon`               | #2f250d |
| decorative-option6            | `--hop-decorative-option6-surface`            | #f7e694 |
| decorative-option6-hover      | `--hop-decorative-option6-surface-hover`      | #eac96d |
| decorative-option6-strong     | `--hop-decorative-option6-surface-strong`     | #eac96d |
| decorative-option6-weak       | `--hop-decorative-option6-surface-weak`       | #fff2b8 |
| decorative-option6-weak-hover | `--hop-decorative-option6-surface-weak-hover` | #f7e694 |
| decorative-option6-weakest    | `--hop-decorative-option6-surface-weakest`    | #fff8d6 |
| decorative-option6            | `--hop-decorative-option6-text`               | #2f250d |
| decorative-option6-weak       | `--hop-decorative-option6-text-weak`          | #e2a934 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option6            | `--hop-decorative-option6-border`             | #eac96d |
| decorative-option6            | `--hop-decorative-option6-icon`               | #2f250d |
| decorative-option6            | `--hop-decorative-option6-surface`            | #f7e694 |
| decorative-option6-hover      | `--hop-decorative-option6-surface-hover`      | #eac96d |
| decorative-option6-strong     | `--hop-decorative-option6-surface-strong`     | #eac96d |
| decorative-option6-weak       | `--hop-decorative-option6-surface-weak`       | #fff2b8 |
| decorative-option6-weak-hover | `--hop-decorative-option6-surface-weak-hover` | #f7e694 |
| decorative-option6-weakest    | `--hop-decorative-option6-surface-weakest`    | #fff8d6 |
| decorative-option6            | `--hop-decorative-option6-text`               | #2f250d |
| decorative-option6-weak       | `--hop-decorative-option6-text-weak`          | #e2a934 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 7

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option7            | `--hop-decorative-option7-border`             | #d4cbc0 |
| decorative-option7            | `--hop-decorative-option7-icon`               | #2a2620 |
| decorative-option7            | `--hop-decorative-option7-surface`            | #e5ded6 |
| decorative-option7-hover      | `--hop-decorative-option7-surface-hover`      | #d4cbc0 |
| decorative-option7-strong     | `--hop-decorative-option7-surface-strong`     | #d4cbc0 |
| decorative-option7-weak       | `--hop-decorative-option7-surface-weak`       | #f0eae3 |
| decorative-option7-weak-hover | `--hop-decorative-option7-surface-weak-hover` | #e5ded6 |
| decorative-option7-weakest    | `--hop-decorative-option7-surface-weakest`    | #fef6ef |
| decorative-option7            | `--hop-decorative-option7-text`               | #2a2620 |
| decorative-option7-weak       | `--hop-decorative-option7-text-weak`          | #776a59 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option7            | `--hop-decorative-option7-border`             | #d4cbc0 |
| decorative-option7            | `--hop-decorative-option7-icon`               | #2a2620 |
| decorative-option7            | `--hop-decorative-option7-surface`            | #e5ded6 |
| decorative-option7-hover      | `--hop-decorative-option7-surface-hover`      | #d4cbc0 |
| decorative-option7-strong     | `--hop-decorative-option7-surface-strong`     | #d4cbc0 |
| decorative-option7-weak       | `--hop-decorative-option7-surface-weak`       | #f0eae3 |
| decorative-option7-weak-hover | `--hop-decorative-option7-surface-weak-hover` | #e5ded6 |
| decorative-option7-weakest    | `--hop-decorative-option7-surface-weakest`    | #fef6ef |
| decorative-option7            | `--hop-decorative-option7-text`               | #2a2620 |
| decorative-option7-weak       | `--hop-decorative-option7-text-weak`          | #776a59 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 8

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option8            | `--hop-decorative-option8-border`             | #ffbcb7 |
| decorative-option8            | `--hop-decorative-option8-icon`               | #431a17 |
| decorative-option8            | `--hop-decorative-option8-surface`            | #ffd6d3 |
| decorative-option8-hover      | `--hop-decorative-option8-surface-hover`      | #ff8e8e |
| decorative-option8-strong     | `--hop-decorative-option8-surface-strong`     | #ffbcb7 |
| decorative-option8-weak       | `--hop-decorative-option8-surface-weak`       | #fde6e5 |
| decorative-option8-weak-hover | `--hop-decorative-option8-surface-weak-hover` | #ffd6d3 |
| decorative-option8-weakest    | `--hop-decorative-option8-surface-weakest`    | #fdf6f6 |
| decorative-option8            | `--hop-decorative-option8-text`               | #431a17 |
| decorative-option8-weak       | `--hop-decorative-option8-text-weak`          | #fa4d59 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option8            | `--hop-decorative-option8-border`             | #ffbcb7 |
| decorative-option8            | `--hop-decorative-option8-icon`               | #431a17 |
| decorative-option8            | `--hop-decorative-option8-surface`            | #ffd6d3 |
| decorative-option8-hover      | `--hop-decorative-option8-surface-hover`      | #ff8e8e |
| decorative-option8-strong     | `--hop-decorative-option8-surface-strong`     | #ffbcb7 |
| decorative-option8-weak       | `--hop-decorative-option8-surface-weak`       | #fde6e5 |
| decorative-option8-weak-hover | `--hop-decorative-option8-surface-weak-hover` | #ffd6d3 |
| decorative-option8-weakest    | `--hop-decorative-option8-surface-weakest`    | #fdf6f6 |
| decorative-option8            | `--hop-decorative-option8-text`               | #431a17 |
| decorative-option8-weak       | `--hop-decorative-option8-text-weak`          | #fa4d59 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 9

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option9            | `--hop-decorative-option9-border`             | #cbcdd2 |
| decorative-option9            | `--hop-decorative-option9-icon`               | #ffffff |
| decorative-option9            | `--hop-decorative-option9-surface`            | #787a7e |
| decorative-option9-hover      | `--hop-decorative-option9-surface-hover`      | #6c6e72 |
| decorative-option9-strong     | `--hop-decorative-option9-surface-strong`     | #313335 |
| decorative-option9-weak       | `--hop-decorative-option9-surface-weak`       | #96989d |
| decorative-option9-weak-hover | `--hop-decorative-option9-surface-weak-hover` | #787a7e |
| decorative-option9-weakest    | `--hop-decorative-option9-surface-weakest`    | #b3b5ba |
| decorative-option9            | `--hop-decorative-option9-text`               | #ffffff |
| decorative-option9-weak       | `--hop-decorative-option9-text-weak`          | #96989d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option9            | `--hop-decorative-option9-border`             | #cbcdd2 |
| decorative-option9            | `--hop-decorative-option9-icon`               | #ffffff |
| decorative-option9            | `--hop-decorative-option9-surface`            | #787a7e |
| decorative-option9-hover      | `--hop-decorative-option9-surface-hover`      | #6c6e72 |
| decorative-option9-strong     | `--hop-decorative-option9-surface-strong`     | #313335 |
| decorative-option9-weak       | `--hop-decorative-option9-surface-weak`       | #96989d |
| decorative-option9-weak-hover | `--hop-decorative-option9-surface-weak-hover` | #787a7e |
| decorative-option9-weakest    | `--hop-decorative-option9-surface-weakest`    | #b3b5ba |
| decorative-option9            | `--hop-decorative-option9-text`               | #ffffff |
| decorative-option9-weak       | `--hop-decorative-option9-text-weak`          | #96989d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Status

###### Neutral

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-neutral          | `--hop-status-neutral-border`           | #313335 |
| status-neutral-disabled | `--hop-status-neutral-border-disabled`  | #eef0f2 |
| status-neutral-hover    | `--hop-status-neutral-border-hover`     | #484a4d |
| status-neutral-press    | `--hop-status-neutral-border-press`     | #232426 |
| status-neutral-selected | `--hop-status-neutral-border-selected`  | #313335 |
| status-neutral          | `--hop-status-neutral-icon`             | #313335 |
| status-neutral-disabled | `--hop-status-neutral-icon-disabled`    | #96989d |
| status-neutral-hover    | `--hop-status-neutral-icon-hover`       | #484a4d |
| status-neutral-press    | `--hop-status-neutral-icon-press`       | #232426 |
| status-neutral-selected | `--hop-status-neutral-icon-selected`    | #ffffff |
| status-neutral          | `--hop-status-neutral-surface`          | #ffffff |
| status-neutral-disabled | `--hop-status-neutral-surface-disabled` | #eef0f2 |
| status-neutral-hover    | `--hop-status-neutral-surface-hover`    | #f8f9fa |
| status-neutral-press    | `--hop-status-neutral-surface-press`    | #eef0f2 |
| status-neutral-selected | `--hop-status-neutral-surface-selected` | #313335 |
| status-neutral-strong   | `--hop-status-neutral-surface-strong`   | #b3b5ba |
| status-neutral          | `--hop-status-neutral-text`             | #313335 |
| status-neutral-disabled | `--hop-status-neutral-text-disabled`    | #96989d |
| status-neutral-hover    | `--hop-status-neutral-text-hover`       | #484a4d |
| status-neutral-press    | `--hop-status-neutral-text-press`       | #232426 |
| status-neutral-selected | `--hop-status-neutral-text-selected`    | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-neutral          | `--hop-status-neutral-border`           | #313335 |
| status-neutral-disabled | `--hop-status-neutral-border-disabled`  | #eef0f2 |
| status-neutral-hover    | `--hop-status-neutral-border-hover`     | #484a4d |
| status-neutral-press    | `--hop-status-neutral-border-press`     | #232426 |
| status-neutral-selected | `--hop-status-neutral-border-selected`  | #313335 |
| status-neutral          | `--hop-status-neutral-icon`             | #313335 |
| status-neutral-disabled | `--hop-status-neutral-icon-disabled`    | #96989d |
| status-neutral-hover    | `--hop-status-neutral-icon-hover`       | #484a4d |
| status-neutral-press    | `--hop-status-neutral-icon-press`       | #232426 |
| status-neutral-selected | `--hop-status-neutral-icon-selected`    | #ffffff |
| status-neutral          | `--hop-status-neutral-surface`          | #ffffff |
| status-neutral-disabled | `--hop-status-neutral-surface-disabled` | #eef0f2 |
| status-neutral-hover    | `--hop-status-neutral-surface-hover`    | #f8f9fa |
| status-neutral-press    | `--hop-status-neutral-surface-press`    | #eef0f2 |
| status-neutral-selected | `--hop-status-neutral-surface-selected` | #313335 |
| status-neutral-strong   | `--hop-status-neutral-surface-strong`   | #b3b5ba |
| status-neutral          | `--hop-status-neutral-text`             | #313335 |
| status-neutral-disabled | `--hop-status-neutral-text-disabled`    | #96989d |
| status-neutral-hover    | `--hop-status-neutral-text-hover`       | #484a4d |
| status-neutral-press    | `--hop-status-neutral-text-press`       | #232426 |
| status-neutral-selected | `--hop-status-neutral-text-selected`    | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Progress

**🎨 Workleap theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-progress          | `--hop-status-progress-border`           | #6c8ffd |
| status-progress-disabled | `--hop-status-progress-border-disabled`  | #e6ebff |
| status-progress-hover    | `--hop-status-progress-border-hover`     | #4767fe |
| status-progress-press    | `--hop-status-progress-border-press`     | #3b57ff |
| status-progress-selected | `--hop-status-progress-border-selected`  | #4767fe |
| status-progress          | `--hop-status-progress-icon`             | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-icon-disabled`    | #95b1ff |
| status-progress-hover    | `--hop-status-progress-icon-hover`       | #2040c7 |
| status-progress-press    | `--hop-status-progress-icon-press`       | #1b3587 |
| status-progress-selected | `--hop-status-progress-icon-selected`    | #3b57ff |
| status-progress          | `--hop-status-progress-surface`          | #e6ebff |
| status-progress-disabled | `--hop-status-progress-surface-disabled` | #f5f6ff |
| status-progress-hover    | `--hop-status-progress-surface-hover`    | #d6e0ff |
| status-progress-press    | `--hop-status-progress-surface-press`    | #b9cbff |
| status-progress-selected | `--hop-status-progress-surface-selected` | #e6ebff |
| status-progress-strong   | `--hop-status-progress-surface-strong`   | #95b1ff |
| status-progress          | `--hop-status-progress-text`             | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-text-disabled`    | #95b1ff |
| status-progress-hover    | `--hop-status-progress-text-hover`       | #2040c7 |
| status-progress-press    | `--hop-status-progress-text-press`       | #1b3587 |
| status-progress-selected | `--hop-status-progress-text-selected`    | #3b57ff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-progress          | `--hop-status-progress-border`           | #6aa3ff |
| status-progress-disabled | `--hop-status-progress-border-disabled`  | #e6f0ff |
| status-progress-hover    | `--hop-status-progress-border-hover`     | #3a82ff |
| status-progress-press    | `--hop-status-progress-border-press`     | #0165fc |
| status-progress-selected | `--hop-status-progress-border-selected`  | #003b99 |
| status-progress          | `--hop-status-progress-icon`             | #004fcc |
| status-progress-disabled | `--hop-status-progress-icon-disabled`    | #99c2ff |
| status-progress-hover    | `--hop-status-progress-icon-hover`       | #003b99 |
| status-progress-press    | `--hop-status-progress-icon-press`       | #002766 |
| status-progress-selected | `--hop-status-progress-icon-selected`    | #003b99 |
| status-progress          | `--hop-status-progress-surface`          | #e6f0ff |
| status-progress-disabled | `--hop-status-progress-surface-disabled` | #f2f7ff |
| status-progress-hover    | `--hop-status-progress-surface-hover`    | #d6e7ff |
| status-progress-press    | `--hop-status-progress-surface-press`    | #c2daff |
| status-progress-selected | `--hop-status-progress-surface-selected` | #e6f0ff |
| status-progress-strong   | `--hop-status-progress-surface-strong`   | #99c2ff |
| status-progress          | `--hop-status-progress-text`             | #004fcc |
| status-progress-disabled | `--hop-status-progress-text-disabled`    | #99c2ff |
| status-progress-hover    | `--hop-status-progress-text-hover`       | #003b99 |
| status-progress-press    | `--hop-status-progress-text-press`       | #002766 |
| status-progress-selected | `--hop-status-progress-text-selected`    | #003b99 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Positive

**🎨 Workleap theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-positive          | `--hop-status-positive-border`           | #47a584 |
| status-positive-disabled | `--hop-status-positive-border-disabled`  | #e3f3b9 |
| status-positive-hover    | `--hop-status-positive-border-hover`     | #188a71 |
| status-positive-press    | `--hop-status-positive-border-press`     | #0c796b |
| status-positive-selected | `--hop-status-positive-border-selected`  | #115a52 |
| status-positive          | `--hop-status-positive-icon`             | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-icon-disabled`    | #7dc291 |
| status-positive-hover    | `--hop-status-positive-icon-hover`       | #115a52 |
| status-positive-press    | `--hop-status-positive-icon-press`       | #16433d |
| status-positive-selected | `--hop-status-positive-icon-selected`    | #115a52 |
| status-positive          | `--hop-status-positive-surface`          | #e3f3b9 |
| status-positive-disabled | `--hop-status-positive-surface-disabled` | #f4f9e9 |
| status-positive-hover    | `--hop-status-positive-surface-hover`    | #cde8ac |
| status-positive-press    | `--hop-status-positive-surface-press`    | #aad89d |
| status-positive-selected | `--hop-status-positive-surface-selected` | #e3f3b9 |
| status-positive-strong   | `--hop-status-positive-surface-strong`   | #7dc291 |
| status-positive          | `--hop-status-positive-text`             | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-text-disabled`    | #7dc291 |
| status-positive-hover    | `--hop-status-positive-text-hover`       | #115a52 |
| status-positive-press    | `--hop-status-positive-text-press`       | #16433d |
| status-positive-selected | `--hop-status-positive-text-selected`    | #115a52 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-positive          | `--hop-status-positive-border`           | #12cb80 |
| status-positive-disabled | `--hop-status-positive-border-disabled`  | #d7faea |
| status-positive-hover    | `--hop-status-positive-border-hover`     | #10a96f |
| status-positive-press    | `--hop-status-positive-border-press`     | #0d8058 |
| status-positive-selected | `--hop-status-positive-border-selected`  | #0a6042 |
| status-positive          | `--hop-status-positive-icon`             | #0b6f4c |
| status-positive-disabled | `--hop-status-positive-icon-disabled`    | #0be57d |
| status-positive-hover    | `--hop-status-positive-icon-hover`       | #0a6042 |
| status-positive-press    | `--hop-status-positive-icon-press`       | #084a34 |
| status-positive-selected | `--hop-status-positive-icon-selected`    | #0a6042 |
| status-positive          | `--hop-status-positive-surface`          | #d7faea |
| status-positive-disabled | `--hop-status-positive-surface-disabled` | #eafdf3 |
| status-positive-hover    | `--hop-status-positive-surface-hover`    | #97f2c8 |
| status-positive-press    | `--hop-status-positive-surface-press`    | #66ecae |
| status-positive-selected | `--hop-status-positive-surface-selected` | #d7faea |
| status-positive-strong   | `--hop-status-positive-surface-strong`   | #0be57d |
| status-positive          | `--hop-status-positive-text`             | #0b6f4c |
| status-positive-disabled | `--hop-status-positive-text-disabled`    | #0be57d |
| status-positive-hover    | `--hop-status-positive-text-hover`       | #0a6042 |
| status-positive-press    | `--hop-status-positive-text-press`       | #084a34 |
| status-positive-selected | `--hop-status-positive-text-selected`    | #0a6042 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Caution

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-caution          | `--hop-status-caution-border`           | #e57723 |
| status-caution-disabled | `--hop-status-caution-border-disabled`  | #ffe8d3 |
| status-caution-hover    | `--hop-status-caution-border-hover`     | #c95109 |
| status-caution-press    | `--hop-status-caution-border-press`     | #ba4705 |
| status-caution-selected | `--hop-status-caution-border-selected`  | #8c3504 |
| status-caution          | `--hop-status-caution-icon`             | #ab4104 |
| status-caution-disabled | `--hop-status-caution-icon-disabled`    | #ff9b3f |
| status-caution-hover    | `--hop-status-caution-icon-hover`       | #8c3504 |
| status-caution-press    | `--hop-status-caution-icon-press`       | #692803 |
| status-caution-selected | `--hop-status-caution-icon-selected`    | #8c3504 |
| status-caution          | `--hop-status-caution-surface`          | #ffe8d3 |
| status-caution-disabled | `--hop-status-caution-surface-disabled` | #fff5e9 |
| status-caution-hover    | `--hop-status-caution-surface-hover`    | #ffd8be |
| status-caution-press    | `--hop-status-caution-surface-press`    | #ffbf92 |
| status-caution-selected | `--hop-status-caution-surface-selected` | #ffe8d3 |
| status-caution-strong   | `--hop-status-caution-surface-strong`   | #ff9b3f |
| status-caution          | `--hop-status-caution-text`             | #ab4104 |
| status-caution-disabled | `--hop-status-caution-text-disabled`    | #ff9b3f |
| status-caution-hover    | `--hop-status-caution-text-hover`       | #8c3504 |
| status-caution-press    | `--hop-status-caution-text-press`       | #692803 |
| status-caution-selected | `--hop-status-caution-text-selected`    | #8c3504 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-caution          | `--hop-status-caution-border`           | #ffb700 |
| status-caution-disabled | `--hop-status-caution-border-disabled`  | #fff1cc |
| status-caution-hover    | `--hop-status-caution-border-hover`     | #cfa000 |
| status-caution-press    | `--hop-status-caution-border-press`     | #a68000 |
| status-caution-selected | `--hop-status-caution-border-selected`  | #705900 |
| status-caution          | `--hop-status-caution-icon`             | #8a6c00 |
| status-caution-disabled | `--hop-status-caution-icon-disabled`    | #ffc94a |
| status-caution-hover    | `--hop-status-caution-icon-hover`       | #705900 |
| status-caution-press    | `--hop-status-caution-icon-press`       | #574500 |
| status-caution-selected | `--hop-status-caution-icon-selected`    | #705900 |
| status-caution          | `--hop-status-caution-surface`          | #fff1cc |
| status-caution-disabled | `--hop-status-caution-surface-disabled` | #fff6e0 |
| status-caution-hover    | `--hop-status-caution-surface-hover`    | #ffe39a |
| status-caution-press    | `--hop-status-caution-surface-press`    | #ffd873 |
| status-caution-selected | `--hop-status-caution-surface-selected` | #fff1cc |
| status-caution-strong   | `--hop-status-caution-surface-strong`   | #ffc94a |
| status-caution          | `--hop-status-caution-text`             | #8a6c00 |
| status-caution-disabled | `--hop-status-caution-text-disabled`    | #ffc94a |
| status-caution-hover    | `--hop-status-caution-text-hover`       | #705900 |
| status-caution-press    | `--hop-status-caution-text-press`       | #574500 |
| status-caution-selected | `--hop-status-caution-text-selected`    | #705900 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Negative

**🎨 Workleap theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-negative          | `--hop-status-negative-border`           | #fa4d59 |
| status-negative-disabled | `--hop-status-negative-border-disabled`  | #fde6e5 |
| status-negative-hover    | `--hop-status-negative-border-hover`     | #df3236 |
| status-negative-press    | `--hop-status-negative-border-press`     | #cb2e31 |
| status-negative-selected | `--hop-status-negative-border-selected`  | #952927 |
| status-negative          | `--hop-status-negative-icon`             | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-icon-disabled`    | #ff8e8e |
| status-negative-hover    | `--hop-status-negative-icon-hover`       | #952927 |
| status-negative-press    | `--hop-status-negative-icon-press`       | #6c2320 |
| status-negative-selected | `--hop-status-negative-icon-selected`    | #952927 |
| status-negative          | `--hop-status-negative-surface`          | #fde6e5 |
| status-negative-disabled | `--hop-status-negative-surface-disabled` | #fdf6f6 |
| status-negative-hover    | `--hop-status-negative-surface-hover`    | #ffd6d3 |
| status-negative-press    | `--hop-status-negative-surface-press`    | #ffbcb7 |
| status-negative-selected | `--hop-status-negative-surface-selected` | #fde6e5 |
| status-negative-strong   | `--hop-status-negative-surface-strong`   | #ff8e8e |
| status-negative          | `--hop-status-negative-text`             | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-text-disabled`    | #ff8e8e |
| status-negative-hover    | `--hop-status-negative-text-hover`       | #952927 |
| status-negative-press    | `--hop-status-negative-text-press`       | #6c2320 |
| status-negative-selected | `--hop-status-negative-text-selected`    | #952927 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-negative          | `--hop-status-negative-border`           | #fa4d59 |
| status-negative-disabled | `--hop-status-negative-border-disabled`  | #fde6e5 |
| status-negative-hover    | `--hop-status-negative-border-hover`     | #df3236 |
| status-negative-press    | `--hop-status-negative-border-press`     | #cb2e31 |
| status-negative-selected | `--hop-status-negative-border-selected`  | #952927 |
| status-negative          | `--hop-status-negative-icon`             | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-icon-disabled`    | #ff8e8e |
| status-negative-hover    | `--hop-status-negative-icon-hover`       | #952927 |
| status-negative-press    | `--hop-status-negative-icon-press`       | #6c2320 |
| status-negative-selected | `--hop-status-negative-icon-selected`    | #952927 |
| status-negative          | `--hop-status-negative-surface`          | #fde6e5 |
| status-negative-disabled | `--hop-status-negative-surface-disabled` | #fdf6f6 |
| status-negative-hover    | `--hop-status-negative-surface-hover`    | #ffd6d3 |
| status-negative-press    | `--hop-status-negative-surface-press`    | #ffbcb7 |
| status-negative-selected | `--hop-status-negative-surface-selected` | #fde6e5 |
| status-negative-strong   | `--hop-status-negative-surface-strong`   | #ff8e8e |
| status-negative          | `--hop-status-negative-text`             | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-text-disabled`    | #ff8e8e |
| status-negative-hover    | `--hop-status-negative-text-hover`       | #952927 |
| status-negative-press    | `--hop-status-negative-text-press`       | #6c2320 |
| status-negative-selected | `--hop-status-negative-text-selected`    | #952927 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Inactive

**🎨 Workleap theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-inactive          | `--hop-status-inactive-border`           | #96989d |
| status-inactive-disabled | `--hop-status-inactive-border-disabled`  | #eef0f2 |
| status-inactive-hover    | `--hop-status-inactive-border-hover`     | #787a7e |
| status-inactive-press    | `--hop-status-inactive-border-press`     | #6c6e72 |
| status-inactive-selected | `--hop-status-inactive-border-selected`  | #484a4d |
| status-inactive          | `--hop-status-inactive-icon`             | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-icon-disabled`    | #b3b5ba |
| status-inactive-hover    | `--hop-status-inactive-icon-hover`       | #484a4d |
| status-inactive-press    | `--hop-status-inactive-icon-press`       | #313335 |
| status-inactive-selected | `--hop-status-inactive-icon-selected`    | #484a4d |
| status-inactive          | `--hop-status-inactive-surface`          | #eef0f2 |
| status-inactive-disabled | `--hop-status-inactive-surface-disabled` | #f8f9fa |
| status-inactive-hover    | `--hop-status-inactive-surface-hover`    | #e1e3e7 |
| status-inactive-press    | `--hop-status-inactive-surface-press`    | #cbcdd2 |
| status-inactive-selected | `--hop-status-inactive-surface-selected` | #eef0f2 |
| status-inactive-strong   | `--hop-status-inactive-surface-strong`   | #cbcdd2 |
| status-inactive          | `--hop-status-inactive-text`             | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-text-disabled`    | #b3b5ba |
| status-inactive-hover    | `--hop-status-inactive-text-hover`       | #484a4d |
| status-inactive-press    | `--hop-status-inactive-text-press`       | #313335 |
| status-inactive-selected | `--hop-status-inactive-text-selected`    | #484a4d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-inactive          | `--hop-status-inactive-border`           | #96989d |
| status-inactive-disabled | `--hop-status-inactive-border-disabled`  | #eef0f2 |
| status-inactive-hover    | `--hop-status-inactive-border-hover`     | #787a7e |
| status-inactive-press    | `--hop-status-inactive-border-press`     | #6c6e72 |
| status-inactive-selected | `--hop-status-inactive-border-selected`  | #484a4d |
| status-inactive          | `--hop-status-inactive-icon`             | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-icon-disabled`    | #b3b5ba |
| status-inactive-hover    | `--hop-status-inactive-icon-hover`       | #484a4d |
| status-inactive-press    | `--hop-status-inactive-icon-press`       | #313335 |
| status-inactive-selected | `--hop-status-inactive-icon-selected`    | #484a4d |
| status-inactive          | `--hop-status-inactive-surface`          | #eef0f2 |
| status-inactive-disabled | `--hop-status-inactive-surface-disabled` | #f8f9fa |
| status-inactive-hover    | `--hop-status-inactive-surface-hover`    | #e1e3e7 |
| status-inactive-press    | `--hop-status-inactive-surface-press`    | #cbcdd2 |
| status-inactive-selected | `--hop-status-inactive-surface-selected` | #eef0f2 |
| status-inactive-strong   | `--hop-status-inactive-surface-strong`   | #cbcdd2 |
| status-inactive          | `--hop-status-inactive-text`             | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-text-disabled`    | #b3b5ba |
| status-inactive-hover    | `--hop-status-inactive-text-hover`       | #484a4d |
| status-inactive-press    | `--hop-status-inactive-text-press`       | #313335 |
| status-inactive-selected | `--hop-status-inactive-text-selected`    | #484a4d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 1

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option1          | `--hop-status-option1-border`           | #5d9acd |
| status-option1-disabled | `--hop-status-option1-border-disabled`  | #d9efff |
| status-option1-hover    | `--hop-status-option1-border-hover`     | #3a7bb2 |
| status-option1-press    | `--hop-status-option1-border-press`     | #2e70a8 |
| status-option1-selected | `--hop-status-option1-border-selected`  | #0a538b |
| status-option1          | `--hop-status-option1-icon`             | #23669f |
| status-option1-disabled | `--hop-status-option1-icon-disabled`    | #81b9e4 |
| status-option1-hover    | `--hop-status-option1-icon-hover`       | #0a538b |
| status-option1-press    | `--hop-status-option1-icon-press`       | #003d70 |
| status-option1-selected | `--hop-status-option1-icon-selected`    | #0a538b |
| status-option1          | `--hop-status-option1-surface`          | #d9efff |
| status-option1-disabled | `--hop-status-option1-surface-disabled` | #f0f8ff |
| status-option1-hover    | `--hop-status-option1-surface-hover`    | #bae6ff |
| status-option1-press    | `--hop-status-option1-surface-press`    | #9fd2f7 |
| status-option1-selected | `--hop-status-option1-surface-selected` | #d9efff |
| status-option1-strong   | `--hop-status-option1-surface-strong`   | #81b9e4 |
| status-option1          | `--hop-status-option1-text`             | #23669f |
| status-option1-disabled | `--hop-status-option1-text-disabled`    | #81b9e4 |
| status-option1-hover    | `--hop-status-option1-text-hover`       | #0a538b |
| status-option1-press    | `--hop-status-option1-text-press`       | #003d70 |
| status-option1-selected | `--hop-status-option1-text-selected`    | #0a538b |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option1          | `--hop-status-option1-border`           | #8e85ec |
| status-option1-disabled | `--hop-status-option1-border-disabled`  | #eceaff |
| status-option1-hover    | `--hop-status-option1-border-hover`     | #736ad2 |
| status-option1-press    | `--hop-status-option1-border-press`     | #685dc9 |
| status-option1-selected | `--hop-status-option1-border-selected`  | #4d468f |
| status-option1          | `--hop-status-option1-icon`             | #6057b3 |
| status-option1-disabled | `--hop-status-option1-icon-disabled`    | #b4abff |
| status-option1-hover    | `--hop-status-option1-icon-hover`       | #4d468f |
| status-option1-press    | `--hop-status-option1-icon-press`       | #3b356c |
| status-option1-selected | `--hop-status-option1-icon-selected`    | #4d468f |
| status-option1          | `--hop-status-option1-surface`          | #eceaff |
| status-option1-disabled | `--hop-status-option1-surface-disabled` | #f6f6ff |
| status-option1-hover    | `--hop-status-option1-surface-hover`    | #deddff |
| status-option1-press    | `--hop-status-option1-surface-press`    | #c3bcff |
| status-option1-selected | `--hop-status-option1-surface-selected` | #eceaff |
| status-option1-strong   | `--hop-status-option1-surface-strong`   | #b4abff |
| status-option1          | `--hop-status-option1-text`             | #6057b3 |
| status-option1-disabled | `--hop-status-option1-text-disabled`    | #b4abff |
| status-option1-hover    | `--hop-status-option1-text-hover`       | #4d468f |
| status-option1-press    | `--hop-status-option1-text-press`       | #3b356c |
| status-option1-selected | `--hop-status-option1-text-selected`    | #4d468f |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 2

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option2          | `--hop-status-option2-border`           | #8d91dc |
| status-option2-disabled | `--hop-status-option2-border-disabled`  | #eae9fb |
| status-option2-hover    | `--hop-status-option2-border-hover`     | #6b6ecc |
| status-option2-press    | `--hop-status-option2-border-press`     | #5f61c5 |
| status-option2-selected | `--hop-status-option2-border-selected`  | #433fac |
| status-option2          | `--hop-status-option2-icon`             | #5454be |
| status-option2-disabled | `--hop-status-option2-icon-disabled`    | #aeb3e8 |
| status-option2-hover    | `--hop-status-option2-icon-hover`       | #433fac |
| status-option2-press    | `--hop-status-option2-icon-press`       | #322b8d |
| status-option2-selected | `--hop-status-option2-icon-selected`    | #433fac |
| status-option2          | `--hop-status-option2-surface`          | #eae9fb |
| status-option2-disabled | `--hop-status-option2-surface-disabled` | #f6f5ff |
| status-option2-hover    | `--hop-status-option2-surface-hover`    | #ddddf7 |
| status-option2-press    | `--hop-status-option2-surface-press`    | #c8caf0 |
| status-option2-selected | `--hop-status-option2-surface-selected` | #eae9fb |
| status-option2-strong   | `--hop-status-option2-surface-strong`   | #aeb3e8 |
| status-option2          | `--hop-status-option2-text`             | #5454be |
| status-option2-disabled | `--hop-status-option2-text-disabled`    | #aeb3e8 |
| status-option2-hover    | `--hop-status-option2-text-hover`       | #433fac |
| status-option2-press    | `--hop-status-option2-text-press`       | #322b8d |
| status-option2-selected | `--hop-status-option2-text-selected`    | #433fac |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option2          | `--hop-status-option2-border`           | #ff5b22 |
| status-option2-disabled | `--hop-status-option2-border-disabled`  | #ffe7df |
| status-option2-hover    | `--hop-status-option2-border-hover`     | #dd3900 |
| status-option2-press    | `--hop-status-option2-border-press`     | #ca3400 |
| status-option2-selected | `--hop-status-option2-border-selected`  | #982700 |
| status-option2          | `--hop-status-option2-icon`             | #ba3000 |
| status-option2-disabled | `--hop-status-option2-icon-disabled`    | #ff9874 |
| status-option2-hover    | `--hop-status-option2-icon-hover`       | #982700 |
| status-option2-press    | `--hop-status-option2-icon-press`       | #731e00 |
| status-option2-selected | `--hop-status-option2-icon-selected`    | #982700 |
| status-option2          | `--hop-status-option2-surface`          | #ffe7df |
| status-option2-disabled | `--hop-status-option2-surface-disabled` | #fff5f2 |
| status-option2-hover    | `--hop-status-option2-surface-hover`    | #ffd8ca |
| status-option2-press    | `--hop-status-option2-surface-press`    | #ffbda7 |
| status-option2-selected | `--hop-status-option2-surface-selected` | #ffe7df |
| status-option2-strong   | `--hop-status-option2-surface-strong`   | #ff9874 |
| status-option2          | `--hop-status-option2-text`             | #ba3000 |
| status-option2-disabled | `--hop-status-option2-text-disabled`    | #ff9874 |
| status-option2-hover    | `--hop-status-option2-text-hover`       | #982700 |
| status-option2-press    | `--hop-status-option2-text-press`       | #731e00 |
| status-option2-selected | `--hop-status-option2-text-selected`    | #982700 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 3

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option3          | `--hop-status-option3-border`           | #5da18c |
| status-option3-disabled | `--hop-status-option3-border-disabled`  | #cff4ef |
| status-option3-hover    | `--hop-status-option3-border-hover`     | #38836a |
| status-option3-press    | `--hop-status-option3-border-press`     | #2b795e |
| status-option3-selected | `--hop-status-option3-border-selected`  | #cff4ef |
| status-option3          | `--hop-status-option3-icon`             | #206f54 |
| status-option3-disabled | `--hop-status-option3-icon-disabled`    | #83beaf |
| status-option3-hover    | `--hop-status-option3-icon-hover`       | #055c41 |
| status-option3-press    | `--hop-status-option3-icon-press`       | #00452d |
| status-option3-selected | `--hop-status-option3-icon-selected`    | #055c41 |
| status-option3          | `--hop-status-option3-surface`          | #cff4ef |
| status-option3-disabled | `--hop-status-option3-surface-disabled` | #ddfdf9 |
| status-option3-hover    | `--hop-status-option3-surface-hover`    | #bde8e1 |
| status-option3-press    | `--hop-status-option3-surface-press`    | #a3d6cb |
| status-option3-selected | `--hop-status-option3-surface-selected` | #055c41 |
| status-option3-strong   | `--hop-status-option3-surface-strong`   | #83beaf |
| status-option3          | `--hop-status-option3-text`             | #206f54 |
| status-option3-disabled | `--hop-status-option3-text-disabled`    | #83beaf |
| status-option3-hover    | `--hop-status-option3-text-hover`       | #055c41 |
| status-option3-press    | `--hop-status-option3-text-press`       | #00452d |
| status-option3-selected | `--hop-status-option3-text-selected`    | #055c41 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option3          | `--hop-status-option3-border`           | #47a584 |
| status-option3-disabled | `--hop-status-option3-border-disabled`  | #e3f3b9 |
| status-option3-hover    | `--hop-status-option3-border-hover`     | #188a71 |
| status-option3-press    | `--hop-status-option3-border-press`     | #0c796b |
| status-option3-selected | `--hop-status-option3-border-selected`  | #115a52 |
| status-option3          | `--hop-status-option3-icon`             | #0a6f64 |
| status-option3-disabled | `--hop-status-option3-icon-disabled`    | #7dc291 |
| status-option3-hover    | `--hop-status-option3-icon-hover`       | #115a52 |
| status-option3-press    | `--hop-status-option3-icon-press`       | #16433d |
| status-option3-selected | `--hop-status-option3-icon-selected`    | #115a52 |
| status-option3          | `--hop-status-option3-surface`          | #e3f3b9 |
| status-option3-disabled | `--hop-status-option3-surface-disabled` | #f4f9e9 |
| status-option3-hover    | `--hop-status-option3-surface-hover`    | #cde8ac |
| status-option3-press    | `--hop-status-option3-surface-press`    | #aad89d |
| status-option3-selected | `--hop-status-option3-surface-selected` | #e3f3b9 |
| status-option3-strong   | `--hop-status-option3-surface-strong`   | #7dc291 |
| status-option3          | `--hop-status-option3-text`             | #0a6f64 |
| status-option3-disabled | `--hop-status-option3-text-disabled`    | #7dc291 |
| status-option3-hover    | `--hop-status-option3-text-hover`       | #115a52 |
| status-option3-press    | `--hop-status-option3-text-press`       | #16433d |
| status-option3-selected | `--hop-status-option3-text-selected`    | #115a52 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 4

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option4          | `--hop-status-option4-border`           | #7c9aa3 |
| status-option4-disabled | `--hop-status-option4-border-disabled`  | #e1eef1 |
| status-option4-hover    | `--hop-status-option4-border-hover`     | #5e7b84 |
| status-option4-press    | `--hop-status-option4-border-press`     | #557079 |
| status-option4-selected | `--hop-status-option4-border-selected`  | #40535a |
| status-option4          | `--hop-status-option4-icon`             | #4e6770 |
| status-option4-disabled | `--hop-status-option4-icon-disabled`    | #9cb7be |
| status-option4-hover    | `--hop-status-option4-icon-hover`       | #40535a |
| status-option4-press    | `--hop-status-option4-icon-press`       | #313e43 |
| status-option4-selected | `--hop-status-option4-icon-selected`    | #40535a |
| status-option4          | `--hop-status-option4-surface`          | #e1eef1 |
| status-option4-disabled | `--hop-status-option4-surface-disabled` | #f2f8fa |
| status-option4-hover    | `--hop-status-option4-surface-hover`    | #d2e3e7 |
| status-option4-press    | `--hop-status-option4-surface-press`    | #bad0d5 |
| status-option4-selected | `--hop-status-option4-surface-selected` | #e1eef1 |
| status-option4-strong   | `--hop-status-option4-surface-strong`   | #9cb7be |
| status-option4          | `--hop-status-option4-text`             | #4e6770 |
| status-option4-disabled | `--hop-status-option4-text-disabled`    | #9cb7be |
| status-option4-hover    | `--hop-status-option4-text-hover`       | #40535a |
| status-option4-press    | `--hop-status-option4-text-press`       | #313e43 |
| status-option4-selected | `--hop-status-option4-text-selected`    | #40535a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option4          | `--hop-status-option4-border`           | #7c9aa3 |
| status-option4-disabled | `--hop-status-option4-border-disabled`  | #e1eef1 |
| status-option4-hover    | `--hop-status-option4-border-hover`     | #5e7b84 |
| status-option4-press    | `--hop-status-option4-border-press`     | #557079 |
| status-option4-selected | `--hop-status-option4-border-selected`  | #40535a |
| status-option4          | `--hop-status-option4-icon`             | #4e6770 |
| status-option4-disabled | `--hop-status-option4-icon-disabled`    | #9cb7be |
| status-option4-hover    | `--hop-status-option4-icon-hover`       | #40535a |
| status-option4-press    | `--hop-status-option4-icon-press`       | #313e43 |
| status-option4-selected | `--hop-status-option4-icon-selected`    | #40535a |
| status-option4          | `--hop-status-option4-surface`          | #e1eef1 |
| status-option4-disabled | `--hop-status-option4-surface-disabled` | #f2f8fa |
| status-option4-hover    | `--hop-status-option4-surface-hover`    | #d2e3e7 |
| status-option4-press    | `--hop-status-option4-surface-press`    | #bad0d5 |
| status-option4-selected | `--hop-status-option4-surface-selected` | #e1eef1 |
| status-option4-strong   | `--hop-status-option4-surface-strong`   | #9cb7be |
| status-option4          | `--hop-status-option4-text`             | #4e6770 |
| status-option4-disabled | `--hop-status-option4-text-disabled`    | #9cb7be |
| status-option4-hover    | `--hop-status-option4-text-hover`       | #40535a |
| status-option4-press    | `--hop-status-option4-text-press`       | #313e43 |
| status-option4-selected | `--hop-status-option4-text-selected`    | #40535a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 5

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option5          | `--hop-status-option5-border`           | #a19382 |
| status-option5-disabled | `--hop-status-option5-border-disabled`  | #f0eae3 |
| status-option5-hover    | `--hop-status-option5-border-hover`     | #837463 |
| status-option5-press    | `--hop-status-option5-border-press`     | #776a59 |
| status-option5-selected | `--hop-status-option5-border-selected`  | #594f41 |
| status-option5          | `--hop-status-option5-icon`             | #6e6151 |
| status-option5-disabled | `--hop-status-option5-icon-disabled`    | #bdb1a3 |
| status-option5-hover    | `--hop-status-option5-icon-hover`       | #594f41 |
| status-option5-press    | `--hop-status-option5-icon-press`       | #433b31 |
| status-option5-selected | `--hop-status-option5-icon-selected`    | #594f41 |
| status-option5          | `--hop-status-option5-surface`          | #f0eae3 |
| status-option5-disabled | `--hop-status-option5-surface-disabled` | #fef6ef |
| status-option5-hover    | `--hop-status-option5-surface-hover`    | #e5ded6 |
| status-option5-press    | `--hop-status-option5-surface-press`    | #d4cbc0 |
| status-option5-selected | `--hop-status-option5-surface-selected` | #f0eae3 |
| status-option5-strong   | `--hop-status-option5-surface-strong`   | #bdb1a3 |
| status-option5          | `--hop-status-option5-text`             | #6e6151 |
| status-option5-disabled | `--hop-status-option5-text-disabled`    | #bdb1a3 |
| status-option5-hover    | `--hop-status-option5-text-hover`       | #594f41 |
| status-option5-press    | `--hop-status-option5-text-press`       | #433b31 |
| status-option5-selected | `--hop-status-option5-text-selected`    | #594f41 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option5          | `--hop-status-option5-border`           | #a19382 |
| status-option5-disabled | `--hop-status-option5-border-disabled`  | #f0eae3 |
| status-option5-hover    | `--hop-status-option5-border-hover`     | #837463 |
| status-option5-press    | `--hop-status-option5-border-press`     | #776a59 |
| status-option5-selected | `--hop-status-option5-border-selected`  | #594f41 |
| status-option5          | `--hop-status-option5-icon`             | #6e6151 |
| status-option5-disabled | `--hop-status-option5-icon-disabled`    | #bdb1a3 |
| status-option5-hover    | `--hop-status-option5-icon-hover`       | #594f41 |
| status-option5-press    | `--hop-status-option5-icon-press`       | #433b31 |
| status-option5-selected | `--hop-status-option5-icon-selected`    | #594f41 |
| status-option5          | `--hop-status-option5-surface`          | #f0eae3 |
| status-option5-disabled | `--hop-status-option5-surface-disabled` | #fef6ef |
| status-option5-hover    | `--hop-status-option5-surface-hover`    | #e5ded6 |
| status-option5-press    | `--hop-status-option5-surface-press`    | #d4cbc0 |
| status-option5-selected | `--hop-status-option5-surface-selected` | #f0eae3 |
| status-option5-strong   | `--hop-status-option5-surface-strong`   | #bdb1a3 |
| status-option5          | `--hop-status-option5-text`             | #6e6151 |
| status-option5-disabled | `--hop-status-option5-text-disabled`    | #bdb1a3 |
| status-option5-hover    | `--hop-status-option5-text-hover`       | #594f41 |
| status-option5-press    | `--hop-status-option5-text-press`       | #433b31 |
| status-option5-selected | `--hop-status-option5-text-selected`    | #594f41 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 6

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option6          | `--hop-status-option6-border`           | #c28b12 |
| status-option6-disabled | `--hop-status-option6-border-disabled`  | #fff2b8 |
| status-option6-hover    | `--hop-status-option6-border-hover`     | #996f08 |
| status-option6-press    | `--hop-status-option6-border-press`     | #8b6609 |
| status-option6-selected | `--hop-status-option6-border-selected`  | #654c0d |
| status-option6          | `--hop-status-option6-icon`             | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-icon-disabled`    | #e2a934 |
| status-option6-hover    | `--hop-status-option6-icon-hover`       | #654c0d |
| status-option6-press    | `--hop-status-option6-icon-press`       | #4b390f |
| status-option6-selected | `--hop-status-option6-icon-selected`    | #654c0d |
| status-option6          | `--hop-status-option6-surface`          | #fff8d6 |
| status-option6-disabled | `--hop-status-option6-surface-disabled` | #fff8d6 |
| status-option6-hover    | `--hop-status-option6-surface-hover`    | #fff2b8 |
| status-option6-press    | `--hop-status-option6-surface-press`    | #eac96d |
| status-option6-selected | `--hop-status-option6-surface-selected` | #fff2b8 |
| status-option6-strong   | `--hop-status-option6-surface-strong`   | #e2a934 |
| status-option6          | `--hop-status-option6-text`             | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-text-disabled`    | #e2a934 |
| status-option6-hover    | `--hop-status-option6-text-hover`       | #654c0d |
| status-option6-press    | `--hop-status-option6-text-press`       | #4b390f |
| status-option6-selected | `--hop-status-option6-text-selected`    | #654c0d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option6          | `--hop-status-option6-border`           | #77a300 |
| status-option6-disabled | `--hop-status-option6-border-disabled`  | #ccff42 |
| status-option6-hover    | `--hop-status-option6-border-hover`     | #5f8100 |
| status-option6-press    | `--hop-status-option6-border-press`     | #577600 |
| status-option6-selected | `--hop-status-option6-border-selected`  | #415800 |
| status-option6          | `--hop-status-option6-icon`             | #4f6c00 |
| status-option6-disabled | `--hop-status-option6-icon-disabled`    | #8fc300 |
| status-option6-hover    | `--hop-status-option6-icon-hover`       | #415800 |
| status-option6-press    | `--hop-status-option6-icon-press`       | #304200 |
| status-option6-selected | `--hop-status-option6-icon-selected`    | #415800 |
| status-option6          | `--hop-status-option6-surface`          | #ccff42 |
| status-option6-disabled | `--hop-status-option6-surface-disabled` | #edffbc |
| status-option6-hover    | `--hop-status-option6-surface-hover`    | #b3f400 |
| status-option6-press    | `--hop-status-option6-surface-press`    | #a3df00 |
| status-option6-selected | `--hop-status-option6-surface-selected` | #ccff42 |
| status-option6-strong   | `--hop-status-option6-surface-strong`   | #8fc300 |
| status-option6          | `--hop-status-option6-text`             | #4f6c00 |
| status-option6-disabled | `--hop-status-option6-text-disabled`    | #8fc300 |
| status-option6-hover    | `--hop-status-option6-text-hover`       | #415800 |
| status-option6-press    | `--hop-status-option6-text-press`       | #304200 |
| status-option6-selected | `--hop-status-option6-text-selected`    | #415800 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Data Visualization

**🎨 Workleap theme tokens:**

| Component Prop Value        | Token Name (CSS Variable Name)     | Value   |
| --------------------------- | ---------------------------------- | ------- |
| dataviz\_unavailable        | `--hop-dataviz-unavailable`        | #e1e3e7 |
| dataviz\_unavailable-weak   | `--hop-dataviz-unavailable-weak`   | #eef0f2 |
| dataviz\_unavailable-strong | `--hop-dataviz-unavailable-strong` | #cbcdd2 |
| dataviz\_onlight            | `--hop-dataviz-text-onlight`       | #313335 |
| dataviz\_ondark             | `--hop-dataviz-text-ondark`        | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value        | Token Name (CSS Variable Name)     | Value   |
| --------------------------- | ---------------------------------- | ------- |
| dataviz\_unavailable        | `--hop-dataviz-unavailable`        | #e1e3e7 |
| dataviz\_unavailable-weak   | `--hop-dataviz-unavailable-weak`   | #eef0f2 |
| dataviz\_unavailable-strong | `--hop-dataviz-unavailable-strong` | #cbcdd2 |
| dataviz\_onlight            | `--hop-dataviz-text-onlight`       | #313335 |
| dataviz\_ondark             | `--hop-dataviz-text-ondark`        | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Monochromatic - Primary

**🎨 Workleap theme tokens:**

| Component Prop Value                     | Token Name (CSS Variable Name)                  | Value   |
| ---------------------------------------- | ----------------------------------------------- | ------- |
| dataviz\_monochromatic-primary-25        | `--hop-dataviz-monochromatic-primary-25`        | #f5f6ff |
| dataviz\_monochromatic-primary-50        | `--hop-dataviz-monochromatic-primary-50`        | #e6ebff |
| dataviz\_monochromatic-primary-75        | `--hop-dataviz-monochromatic-primary-75`        | #d6e0ff |
| dataviz\_monochromatic-primary-100       | `--hop-dataviz-monochromatic-primary-100`       | #b9cbff |
| dataviz\_monochromatic-primary-200       | `--hop-dataviz-monochromatic-primary-200`       | #95b1ff |
| dataviz\_monochromatic-primary-300       | `--hop-dataviz-monochromatic-primary-300`       | #6c8ffd |
| dataviz\_monochromatic-primary-400       | `--hop-dataviz-monochromatic-primary-400`       | #4767fe |
| dataviz\_monochromatic-primary-500       | `--hop-dataviz-monochromatic-primary-500`       | #3b57ff |
| dataviz\_monochromatic-primary-600       | `--hop-dataviz-monochromatic-primary-600`       | #2a43e8 |
| dataviz\_monochromatic-primary-700       | `--hop-dataviz-monochromatic-primary-700`       | #2040c7 |
| dataviz\_monochromatic-primary-800       | `--hop-dataviz-monochromatic-primary-800`       | #1b3587 |
| dataviz\_monochromatic-primary-900       | `--hop-dataviz-monochromatic-primary-900`       | #152450 |
| dataviz\_monochromatic-primary-25-hover  | `--hop-dataviz-monochromatic-primary-25-hover`  | #e6ebff |
| dataviz\_monochromatic-primary-50-hover  | `--hop-dataviz-monochromatic-primary-50-hover`  | #d6e0ff |
| dataviz\_monochromatic-primary-75-hover  | `--hop-dataviz-monochromatic-primary-75-hover`  | #b9cbff |
| dataviz\_monochromatic-primary-100-hover | `--hop-dataviz-monochromatic-primary-100-hover` | #95b1ff |
| dataviz\_monochromatic-primary-200-hover | `--hop-dataviz-monochromatic-primary-200-hover` | #6c8ffd |
| dataviz\_monochromatic-primary-300-hover | `--hop-dataviz-monochromatic-primary-300-hover` | #4767fe |
| dataviz\_monochromatic-primary-400-hover | `--hop-dataviz-monochromatic-primary-400-hover` | #3b57ff |
| dataviz\_monochromatic-primary-500-hover | `--hop-dataviz-monochromatic-primary-500-hover` | #2a43e8 |
| dataviz\_monochromatic-primary-600-hover | `--hop-dataviz-monochromatic-primary-600-hover` | #2040c7 |
| dataviz\_monochromatic-primary-700-hover | `--hop-dataviz-monochromatic-primary-700-hover` | #1b3587 |
| dataviz\_monochromatic-primary-800-hover | `--hop-dataviz-monochromatic-primary-800-hover` | #152450 |
| dataviz\_monochromatic-primary-900-hover | `--hop-dataviz-monochromatic-primary-900-hover` | #0b173a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                     | Token Name (CSS Variable Name)                  | Value   |
| ---------------------------------------- | ----------------------------------------------- | ------- |
| dataviz\_monochromatic-primary-25        | `--hop-dataviz-monochromatic-primary-25`        | #f5f6ff |
| dataviz\_monochromatic-primary-50        | `--hop-dataviz-monochromatic-primary-50`        | #e6ebff |
| dataviz\_monochromatic-primary-75        | `--hop-dataviz-monochromatic-primary-75`        | #d6e0ff |
| dataviz\_monochromatic-primary-100       | `--hop-dataviz-monochromatic-primary-100`       | #b9cbff |
| dataviz\_monochromatic-primary-200       | `--hop-dataviz-monochromatic-primary-200`       | #95b1ff |
| dataviz\_monochromatic-primary-300       | `--hop-dataviz-monochromatic-primary-300`       | #6c8ffd |
| dataviz\_monochromatic-primary-400       | `--hop-dataviz-monochromatic-primary-400`       | #4767fe |
| dataviz\_monochromatic-primary-500       | `--hop-dataviz-monochromatic-primary-500`       | #3b57ff |
| dataviz\_monochromatic-primary-600       | `--hop-dataviz-monochromatic-primary-600`       | #2a43e8 |
| dataviz\_monochromatic-primary-700       | `--hop-dataviz-monochromatic-primary-700`       | #2040c7 |
| dataviz\_monochromatic-primary-800       | `--hop-dataviz-monochromatic-primary-800`       | #1b3587 |
| dataviz\_monochromatic-primary-900       | `--hop-dataviz-monochromatic-primary-900`       | #152450 |
| dataviz\_monochromatic-primary-25-hover  | `--hop-dataviz-monochromatic-primary-25-hover`  | #e6ebff |
| dataviz\_monochromatic-primary-50-hover  | `--hop-dataviz-monochromatic-primary-50-hover`  | #d6e0ff |
| dataviz\_monochromatic-primary-75-hover  | `--hop-dataviz-monochromatic-primary-75-hover`  | #b9cbff |
| dataviz\_monochromatic-primary-100-hover | `--hop-dataviz-monochromatic-primary-100-hover` | #95b1ff |
| dataviz\_monochromatic-primary-200-hover | `--hop-dataviz-monochromatic-primary-200-hover` | #6c8ffd |
| dataviz\_monochromatic-primary-300-hover | `--hop-dataviz-monochromatic-primary-300-hover` | #4767fe |
| dataviz\_monochromatic-primary-400-hover | `--hop-dataviz-monochromatic-primary-400-hover` | #3b57ff |
| dataviz\_monochromatic-primary-500-hover | `--hop-dataviz-monochromatic-primary-500-hover` | #2a43e8 |
| dataviz\_monochromatic-primary-600-hover | `--hop-dataviz-monochromatic-primary-600-hover` | #2040c7 |
| dataviz\_monochromatic-primary-700-hover | `--hop-dataviz-monochromatic-primary-700-hover` | #1b3587 |
| dataviz\_monochromatic-primary-800-hover | `--hop-dataviz-monochromatic-primary-800-hover` | #152450 |
| dataviz\_monochromatic-primary-900-hover | `--hop-dataviz-monochromatic-primary-900-hover` | #0b173a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Monochromatic - Positive

**🎨 Workleap theme tokens:**

| Component Prop Value                      | Token Name (CSS Variable Name)                   | Value   |
| ----------------------------------------- | ------------------------------------------------ | ------- |
| dataviz\_monochromatic-positive-25        | `--hop-dataviz-monochromatic-positive-25`        | #f4f9e9 |
| dataviz\_monochromatic-positive-50        | `--hop-dataviz-monochromatic-positive-50`        | #e3f3b9 |
| dataviz\_monochromatic-positive-75        | `--hop-dataviz-monochromatic-positive-75`        | #cde8ac |
| dataviz\_monochromatic-positive-100       | `--hop-dataviz-monochromatic-positive-100`       | #aad89d |
| dataviz\_monochromatic-positive-200       | `--hop-dataviz-monochromatic-positive-200`       | #7dc291 |
| dataviz\_monochromatic-positive-300       | `--hop-dataviz-monochromatic-positive-300`       | #47a584 |
| dataviz\_monochromatic-positive-400       | `--hop-dataviz-monochromatic-positive-400`       | #188a71 |
| dataviz\_monochromatic-positive-500       | `--hop-dataviz-monochromatic-positive-500`       | #0c796b |
| dataviz\_monochromatic-positive-600       | `--hop-dataviz-monochromatic-positive-600`       | #0a6f64 |
| dataviz\_monochromatic-positive-700       | `--hop-dataviz-monochromatic-positive-700`       | #115a52 |
| dataviz\_monochromatic-positive-800       | `--hop-dataviz-monochromatic-positive-800`       | #16433d |
| dataviz\_monochromatic-positive-900       | `--hop-dataviz-monochromatic-positive-900`       | #132a27 |
| dataviz\_monochromatic-positive-25-hover  | `--hop-dataviz-monochromatic-positive-25-hover`  | #e3f3b9 |
| dataviz\_monochromatic-positive-50-hover  | `--hop-dataviz-monochromatic-positive-50-hover`  | #cde8ac |
| dataviz\_monochromatic-positive-75-hover  | `--hop-dataviz-monochromatic-positive-75-hover`  | #aad89d |
| dataviz\_monochromatic-positive-100-hover | `--hop-dataviz-monochromatic-positive-100-hover` | #7dc291 |
| dataviz\_monochromatic-positive-200-hover | `--hop-dataviz-monochromatic-positive-200-hover` | #47a584 |
| dataviz\_monochromatic-positive-300-hover | `--hop-dataviz-monochromatic-positive-300-hover` | #188a71 |
| dataviz\_monochromatic-positive-400-hover | `--hop-dataviz-monochromatic-positive-400-hover` | #0c796b |
| dataviz\_monochromatic-positive-500-hover | `--hop-dataviz-monochromatic-positive-500-hover` | #0a6f64 |
| dataviz\_monochromatic-positive-600-hover | `--hop-dataviz-monochromatic-positive-600-hover` | #115a52 |
| dataviz\_monochromatic-positive-700-hover | `--hop-dataviz-monochromatic-positive-700-hover` | #16433d |
| dataviz\_monochromatic-positive-800-hover | `--hop-dataviz-monochromatic-positive-800-hover` | #132a27 |
| dataviz\_monochromatic-positive-900-hover | `--hop-dataviz-monochromatic-positive-900-hover` | #0a1716 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                      | Token Name (CSS Variable Name)                   | Value   |
| ----------------------------------------- | ------------------------------------------------ | ------- |
| dataviz\_monochromatic-positive-25        | `--hop-dataviz-monochromatic-positive-25`        | #f4f9e9 |
| dataviz\_monochromatic-positive-50        | `--hop-dataviz-monochromatic-positive-50`        | #e3f3b9 |
| dataviz\_monochromatic-positive-75        | `--hop-dataviz-monochromatic-positive-75`        | #cde8ac |
| dataviz\_monochromatic-positive-100       | `--hop-dataviz-monochromatic-positive-100`       | #aad89d |
| dataviz\_monochromatic-positive-200       | `--hop-dataviz-monochromatic-positive-200`       | #7dc291 |
| dataviz\_monochromatic-positive-300       | `--hop-dataviz-monochromatic-positive-300`       | #47a584 |
| dataviz\_monochromatic-positive-400       | `--hop-dataviz-monochromatic-positive-400`       | #188a71 |
| dataviz\_monochromatic-positive-500       | `--hop-dataviz-monochromatic-positive-500`       | #0c796b |
| dataviz\_monochromatic-positive-600       | `--hop-dataviz-monochromatic-positive-600`       | #0a6f64 |
| dataviz\_monochromatic-positive-700       | `--hop-dataviz-monochromatic-positive-700`       | #115a52 |
| dataviz\_monochromatic-positive-800       | `--hop-dataviz-monochromatic-positive-800`       | #16433d |
| dataviz\_monochromatic-positive-900       | `--hop-dataviz-monochromatic-positive-900`       | #132a27 |
| dataviz\_monochromatic-positive-25-hover  | `--hop-dataviz-monochromatic-positive-25-hover`  | #e3f3b9 |
| dataviz\_monochromatic-positive-50-hover  | `--hop-dataviz-monochromatic-positive-50-hover`  | #cde8ac |
| dataviz\_monochromatic-positive-75-hover  | `--hop-dataviz-monochromatic-positive-75-hover`  | #aad89d |
| dataviz\_monochromatic-positive-100-hover | `--hop-dataviz-monochromatic-positive-100-hover` | #7dc291 |
| dataviz\_monochromatic-positive-200-hover | `--hop-dataviz-monochromatic-positive-200-hover` | #47a584 |
| dataviz\_monochromatic-positive-300-hover | `--hop-dataviz-monochromatic-positive-300-hover` | #188a71 |
| dataviz\_monochromatic-positive-400-hover | `--hop-dataviz-monochromatic-positive-400-hover` | #0c796b |
| dataviz\_monochromatic-positive-500-hover | `--hop-dataviz-monochromatic-positive-500-hover` | #0a6f64 |
| dataviz\_monochromatic-positive-600-hover | `--hop-dataviz-monochromatic-positive-600-hover` | #115a52 |
| dataviz\_monochromatic-positive-700-hover | `--hop-dataviz-monochromatic-positive-700-hover` | #16433d |
| dataviz\_monochromatic-positive-800-hover | `--hop-dataviz-monochromatic-positive-800-hover` | #132a27 |
| dataviz\_monochromatic-positive-900-hover | `--hop-dataviz-monochromatic-positive-900-hover` | #0a1716 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Monochromatic - Negative

**🎨 Workleap theme tokens:**

| Component Prop Value                      | Token Name (CSS Variable Name)                   | Value   |
| ----------------------------------------- | ------------------------------------------------ | ------- |
| dataviz\_monochromatic-negative-25        | `--hop-dataviz-monochromatic-negative-25`        | #fdf6f6 |
| dataviz\_monochromatic-negative-50        | `--hop-dataviz-monochromatic-negative-50`        | #fde6e5 |
| dataviz\_monochromatic-negative-75        | `--hop-dataviz-monochromatic-negative-75`        | #ffd6d3 |
| dataviz\_monochromatic-negative-100       | `--hop-dataviz-monochromatic-negative-100`       | #ffbcb7 |
| dataviz\_monochromatic-negative-200       | `--hop-dataviz-monochromatic-negative-200`       | #ff8e8e |
| dataviz\_monochromatic-negative-300       | `--hop-dataviz-monochromatic-negative-300`       | #f56263 |
| dataviz\_monochromatic-negative-400       | `--hop-dataviz-monochromatic-negative-400`       | #df3236 |
| dataviz\_monochromatic-negative-500       | `--hop-dataviz-monochromatic-negative-500`       | #cb2e31 |
| dataviz\_monochromatic-negative-600       | `--hop-dataviz-monochromatic-negative-600`       | #ba2d2d |
| dataviz\_monochromatic-negative-700       | `--hop-dataviz-monochromatic-negative-700`       | #952927 |
| dataviz\_monochromatic-negative-800       | `--hop-dataviz-monochromatic-negative-800`       | #6c2320 |
| dataviz\_monochromatic-negative-900       | `--hop-dataviz-monochromatic-negative-900`       | #431a17 |
| dataviz\_monochromatic-negative-25-hover  | `--hop-dataviz-monochromatic-negative-25-hover`  | #fde6e5 |
| dataviz\_monochromatic-negative-50-hover  | `--hop-dataviz-monochromatic-negative-50-hover`  | #ffd6d3 |
| dataviz\_monochromatic-negative-75-hover  | `--hop-dataviz-monochromatic-negative-75-hover`  | #ffbcb7 |
| dataviz\_monochromatic-negative-100-hover | `--hop-dataviz-monochromatic-negative-100-hover` | #ff8e8e |
| dataviz\_monochromatic-negative-200-hover | `--hop-dataviz-monochromatic-negative-200-hover` | #f56263 |
| dataviz\_monochromatic-negative-300-hover | `--hop-dataviz-monochromatic-negative-300-hover` | #df3236 |
| dataviz\_monochromatic-negative-400-hover | `--hop-dataviz-monochromatic-negative-400-hover` | #cb2e31 |
| dataviz\_monochromatic-negative-500-hover | `--hop-dataviz-monochromatic-negative-500-hover` | #ba2d2d |
| dataviz\_monochromatic-negative-600-hover | `--hop-dataviz-monochromatic-negative-600-hover` | #952927 |
| dataviz\_monochromatic-negative-700-hover | `--hop-dataviz-monochromatic-negative-700-hover` | #6c2320 |
| dataviz\_monochromatic-negative-800-hover | `--hop-dataviz-monochromatic-negative-800-hover` | #431a17 |
| dataviz\_monochromatic-negative-900-hover | `--hop-dataviz-monochromatic-negative-900-hover` | #2d100d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                      | Token Name (CSS Variable Name)                   | Value   |
| ----------------------------------------- | ------------------------------------------------ | ------- |
| dataviz\_monochromatic-negative-25        | `--hop-dataviz-monochromatic-negative-25`        | #fdf6f6 |
| dataviz\_monochromatic-negative-50        | `--hop-dataviz-monochromatic-negative-50`        | #fde6e5 |
| dataviz\_monochromatic-negative-75        | `--hop-dataviz-monochromatic-negative-75`        | #ffd6d3 |
| dataviz\_monochromatic-negative-100       | `--hop-dataviz-monochromatic-negative-100`       | #ffbcb7 |
| dataviz\_monochromatic-negative-200       | `--hop-dataviz-monochromatic-negative-200`       | #ff8e8e |
| dataviz\_monochromatic-negative-300       | `--hop-dataviz-monochromatic-negative-300`       | #f56263 |
| dataviz\_monochromatic-negative-400       | `--hop-dataviz-monochromatic-negative-400`       | #df3236 |
| dataviz\_monochromatic-negative-500       | `--hop-dataviz-monochromatic-negative-500`       | #cb2e31 |
| dataviz\_monochromatic-negative-600       | `--hop-dataviz-monochromatic-negative-600`       | #ba2d2d |
| dataviz\_monochromatic-negative-700       | `--hop-dataviz-monochromatic-negative-700`       | #952927 |
| dataviz\_monochromatic-negative-800       | `--hop-dataviz-monochromatic-negative-800`       | #6c2320 |
| dataviz\_monochromatic-negative-900       | `--hop-dataviz-monochromatic-negative-900`       | #431a17 |
| dataviz\_monochromatic-negative-25-hover  | `--hop-dataviz-monochromatic-negative-25-hover`  | #fde6e5 |
| dataviz\_monochromatic-negative-50-hover  | `--hop-dataviz-monochromatic-negative-50-hover`  | #ffd6d3 |
| dataviz\_monochromatic-negative-75-hover  | `--hop-dataviz-monochromatic-negative-75-hover`  | #ffbcb7 |
| dataviz\_monochromatic-negative-100-hover | `--hop-dataviz-monochromatic-negative-100-hover` | #ff8e8e |
| dataviz\_monochromatic-negative-200-hover | `--hop-dataviz-monochromatic-negative-200-hover` | #f56263 |
| dataviz\_monochromatic-negative-300-hover | `--hop-dataviz-monochromatic-negative-300-hover` | #df3236 |
| dataviz\_monochromatic-negative-400-hover | `--hop-dataviz-monochromatic-negative-400-hover` | #cb2e31 |
| dataviz\_monochromatic-negative-500-hover | `--hop-dataviz-monochromatic-negative-500-hover` | #ba2d2d |
| dataviz\_monochromatic-negative-600-hover | `--hop-dataviz-monochromatic-negative-600-hover` | #952927 |
| dataviz\_monochromatic-negative-700-hover | `--hop-dataviz-monochromatic-negative-700-hover` | #6c2320 |
| dataviz\_monochromatic-negative-800-hover | `--hop-dataviz-monochromatic-negative-800-hover` | #431a17 |
| dataviz\_monochromatic-negative-900-hover | `--hop-dataviz-monochromatic-negative-900-hover` | #2d100d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Diverging Sequence 1

**🎨 Workleap theme tokens:**

| Component Prop Value                           | Token Name (CSS Variable Name)                        | Value   |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_diverging-sequence-1-positive9        | `--hop-dataviz-diverging-sequence-1-positive9`        | #16433d |
| dataviz\_diverging-sequence-1-positive9-hover  | `--hop-dataviz-diverging-sequence-1-positive9-hover`  | #132a27 |
| dataviz\_diverging-sequence-1-positive8        | `--hop-dataviz-diverging-sequence-1-positive8`        | #115a52 |
| dataviz\_diverging-sequence-1-positive8-hover  | `--hop-dataviz-diverging-sequence-1-positive8-hover`  | #16433d |
| dataviz\_diverging-sequence-1-positive7        | `--hop-dataviz-diverging-sequence-1-positive7`        | #0a6f64 |
| dataviz\_diverging-sequence-1-positive7-hover  | `--hop-dataviz-diverging-sequence-1-positive7-hover`  | #115a52 |
| dataviz\_diverging-sequence-1-positive6        | `--hop-dataviz-diverging-sequence-1-positive6`        | #0c796b |
| dataviz\_diverging-sequence-1-positive6-hover  | `--hop-dataviz-diverging-sequence-1-positive6-hover`  | #0a6f64 |
| dataviz\_diverging-sequence-1-positive5        | `--hop-dataviz-diverging-sequence-1-positive5`        | #188a71 |
| dataviz\_diverging-sequence-1-positive5-hover  | `--hop-dataviz-diverging-sequence-1-positive5-hover`  | #0c796b |
| dataviz\_diverging-sequence-1-positive4        | `--hop-dataviz-diverging-sequence-1-positive4`        | #47a584 |
| dataviz\_diverging-sequence-1-positive-4-hover | `--hop-dataviz-diverging-sequence-1-positive-4-hover` | #188a71 |
| dataviz\_diverging-sequence-1-positive3        | `--hop-dataviz-diverging-sequence-1-positive3`        | #7dc291 |
| dataviz\_diverging-sequence-1-positive3-hover  | `--hop-dataviz-diverging-sequence-1-positive3-hover`  | #47a584 |
| dataviz\_diverging-sequence-1-positive2        | `--hop-dataviz-diverging-sequence-1-positive2`        | #aad89d |
| dataviz\_diverging-sequence-1-positive2-hover  | `--hop-dataviz-diverging-sequence-1-positive2-hover`  | #7dc291 |
| dataviz\_diverging-sequence-1-positive1        | `--hop-dataviz-diverging-sequence-1-positive1`        | #cde8ac |
| dataviz\_diverging-sequence-1-positive1-hover  | `--hop-dataviz-diverging-sequence-1-positive1-hover`  | #aad89d |
| dataviz\_diverging-sequence-1-neutral          | `--hop-dataviz-diverging-sequence-1-neutral`          | #f7e694 |
| dataviz\_diverging-sequence-1-neutral-hover    | `--hop-dataviz-diverging-sequence-1-neutral-hover`    | #eac96d |
| dataviz\_diverging-sequence-1-negative1        | `--hop-dataviz-diverging-sequence-1-negative1`        | #ffd8be |
| dataviz\_diverging-sequence-1-negative1-hover  | `--hop-dataviz-diverging-sequence-1-negative1-hover`  | #ffbcb7 |
| dataviz\_diverging-sequence-1-negative2        | `--hop-dataviz-diverging-sequence-1-negative2`        | #ffbcb7 |
| dataviz\_diverging-sequence-1-negative2-hover  | `--hop-dataviz-diverging-sequence-1-negative2-hover`  | #ff8e8e |
| dataviz\_diverging-sequence-1-negative3        | `--hop-dataviz-diverging-sequence-1-negative3`        | #ff8e8e |
| dataviz\_diverging-sequence-1-negative3-hover  | `--hop-dataviz-diverging-sequence-1-negative3-hover`  | #f56263 |
| dataviz\_diverging-sequence-1-negative4        | `--hop-dataviz-diverging-sequence-1-negative4`        | #f56263 |
| dataviz\_diverging-sequence-1-negative4-hover  | `--hop-dataviz-diverging-sequence-1-negative4-hover`  | #df3236 |
| dataviz\_diverging-sequence-1-negative5        | `--hop-dataviz-diverging-sequence-1-negative5`        | #df3236 |
| dataviz\_diverging-sequence-1-negative5-hover  | `--hop-dataviz-diverging-sequence-1-negative5-hover`  | #cb2e31 |
| dataviz\_diverging-sequence-1-negative6        | `--hop-dataviz-diverging-sequence-1-negative6`        | #cb2e31 |
| dataviz\_diverging-sequence-1-negative6-hover  | `--hop-dataviz-diverging-sequence-1-negative6-hover`  | #ba2d2d |
| dataviz\_diverging-sequence-1-negative7        | `--hop-dataviz-diverging-sequence-1-negative7`        | #ba2d2d |
| dataviz\_diverging-sequence-1-negative7-hover  | `--hop-dataviz-diverging-sequence-1-negative7-hover`  | #952927 |
| dataviz\_diverging-sequence-1-negative8        | `--hop-dataviz-diverging-sequence-1-negative8`        | #952927 |
| dataviz\_diverging-sequence-1-negative8-hover  | `--hop-dataviz-diverging-sequence-1-negative8-hover`  | #6c2320 |
| dataviz\_diverging-sequence-1-negative9        | `--hop-dataviz-diverging-sequence-1-negative9`        | #6c2320 |
| dataviz\_diverging-sequence-1-negative9-hover  | `--hop-dataviz-diverging-sequence-1-negative9-hover`  | #431a17 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                           | Token Name (CSS Variable Name)                        | Value   |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_diverging-sequence-1-positive9        | `--hop-dataviz-diverging-sequence-1-positive9`        | #16433d |
| dataviz\_diverging-sequence-1-positive9-hover  | `--hop-dataviz-diverging-sequence-1-positive9-hover`  | #132a27 |
| dataviz\_diverging-sequence-1-positive8        | `--hop-dataviz-diverging-sequence-1-positive8`        | #115a52 |
| dataviz\_diverging-sequence-1-positive8-hover  | `--hop-dataviz-diverging-sequence-1-positive8-hover`  | #16433d |
| dataviz\_diverging-sequence-1-positive7        | `--hop-dataviz-diverging-sequence-1-positive7`        | #0a6f64 |
| dataviz\_diverging-sequence-1-positive7-hover  | `--hop-dataviz-diverging-sequence-1-positive7-hover`  | #115a52 |
| dataviz\_diverging-sequence-1-positive6        | `--hop-dataviz-diverging-sequence-1-positive6`        | #0c796b |
| dataviz\_diverging-sequence-1-positive6-hover  | `--hop-dataviz-diverging-sequence-1-positive6-hover`  | #0a6f64 |
| dataviz\_diverging-sequence-1-positive5        | `--hop-dataviz-diverging-sequence-1-positive5`        | #188a71 |
| dataviz\_diverging-sequence-1-positive5-hover  | `--hop-dataviz-diverging-sequence-1-positive5-hover`  | #0c796b |
| dataviz\_diverging-sequence-1-positive4        | `--hop-dataviz-diverging-sequence-1-positive4`        | #47a584 |
| dataviz\_diverging-sequence-1-positive-4-hover | `--hop-dataviz-diverging-sequence-1-positive-4-hover` | #188a71 |
| dataviz\_diverging-sequence-1-positive3        | `--hop-dataviz-diverging-sequence-1-positive3`        | #7dc291 |
| dataviz\_diverging-sequence-1-positive3-hover  | `--hop-dataviz-diverging-sequence-1-positive3-hover`  | #47a584 |
| dataviz\_diverging-sequence-1-positive2        | `--hop-dataviz-diverging-sequence-1-positive2`        | #aad89d |
| dataviz\_diverging-sequence-1-positive2-hover  | `--hop-dataviz-diverging-sequence-1-positive2-hover`  | #7dc291 |
| dataviz\_diverging-sequence-1-positive1        | `--hop-dataviz-diverging-sequence-1-positive1`        | #cde8ac |
| dataviz\_diverging-sequence-1-positive1-hover  | `--hop-dataviz-diverging-sequence-1-positive1-hover`  | #aad89d |
| dataviz\_diverging-sequence-1-neutral          | `--hop-dataviz-diverging-sequence-1-neutral`          | #f7e694 |
| dataviz\_diverging-sequence-1-neutral-hover    | `--hop-dataviz-diverging-sequence-1-neutral-hover`    | #eac96d |
| dataviz\_diverging-sequence-1-negative1        | `--hop-dataviz-diverging-sequence-1-negative1`        | #ffd8be |
| dataviz\_diverging-sequence-1-negative1-hover  | `--hop-dataviz-diverging-sequence-1-negative1-hover`  | #ffbcb7 |
| dataviz\_diverging-sequence-1-negative2        | `--hop-dataviz-diverging-sequence-1-negative2`        | #ffbcb7 |
| dataviz\_diverging-sequence-1-negative2-hover  | `--hop-dataviz-diverging-sequence-1-negative2-hover`  | #ff8e8e |
| dataviz\_diverging-sequence-1-negative3        | `--hop-dataviz-diverging-sequence-1-negative3`        | #ff8e8e |
| dataviz\_diverging-sequence-1-negative3-hover  | `--hop-dataviz-diverging-sequence-1-negative3-hover`  | #f56263 |
| dataviz\_diverging-sequence-1-negative4        | `--hop-dataviz-diverging-sequence-1-negative4`        | #f56263 |
| dataviz\_diverging-sequence-1-negative4-hover  | `--hop-dataviz-diverging-sequence-1-negative4-hover`  | #df3236 |
| dataviz\_diverging-sequence-1-negative5        | `--hop-dataviz-diverging-sequence-1-negative5`        | #df3236 |
| dataviz\_diverging-sequence-1-negative5-hover  | `--hop-dataviz-diverging-sequence-1-negative5-hover`  | #cb2e31 |
| dataviz\_diverging-sequence-1-negative6        | `--hop-dataviz-diverging-sequence-1-negative6`        | #cb2e31 |
| dataviz\_diverging-sequence-1-negative6-hover  | `--hop-dataviz-diverging-sequence-1-negative6-hover`  | #ba2d2d |
| dataviz\_diverging-sequence-1-negative7        | `--hop-dataviz-diverging-sequence-1-negative7`        | #ba2d2d |
| dataviz\_diverging-sequence-1-negative7-hover  | `--hop-dataviz-diverging-sequence-1-negative7-hover`  | #952927 |
| dataviz\_diverging-sequence-1-negative8        | `--hop-dataviz-diverging-sequence-1-negative8`        | #952927 |
| dataviz\_diverging-sequence-1-negative8-hover  | `--hop-dataviz-diverging-sequence-1-negative8-hover`  | #6c2320 |
| dataviz\_diverging-sequence-1-negative9        | `--hop-dataviz-diverging-sequence-1-negative9`        | #6c2320 |
| dataviz\_diverging-sequence-1-negative9-hover  | `--hop-dataviz-diverging-sequence-1-negative9-hover`  | #431a17 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Diverging Sequence 2

**🎨 Workleap theme tokens:**

| Component Prop Value                           | Token Name (CSS Variable Name)                        | Value   |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_diverging-sequence-2-positive10       | `--hop-dataviz-diverging-sequence-2-positive10`       | #16433d |
| dataviz\_diverging-sequence-2-positive10-hover | `--hop-dataviz-diverging-sequence-2-positive10-hover` | #132a27 |
| dataviz\_diverging-sequence-2-positive9        | `--hop-dataviz-diverging-sequence-2-positive9`        | #115a52 |
| dataviz\_diverging-sequence-2-positive9-hover  | `--hop-dataviz-diverging-sequence-2-positive9-hover`  | #16433d |
| dataviz\_diverging-sequence-2-positive8        | `--hop-dataviz-diverging-sequence-2-positive8`        | #0a6f64 |
| dataviz\_diverging-sequence-2-positive8-hover  | `--hop-dataviz-diverging-sequence-2-positive8-hover`  | #115a52 |
| dataviz\_diverging-sequence-2-positive7        | `--hop-dataviz-diverging-sequence-2-positive7`        | #0c796b |
| dataviz\_diverging-sequence-2-positive7-hover  | `--hop-dataviz-diverging-sequence-2-positive7-hover`  | #0a6f64 |
| dataviz\_diverging-sequence-2-positive6        | `--hop-dataviz-diverging-sequence-2-positive6`        | #188a71 |
| dataviz\_diverging-sequence-2-positive6-hover  | `--hop-dataviz-diverging-sequence-2-positive6-hover`  | #0c796b |
| dataviz\_diverging-sequence-2-positive5        | `--hop-dataviz-diverging-sequence-2-positive5`        | #47a584 |
| dataviz\_diverging-sequence-2-positive5-hover  | `--hop-dataviz-diverging-sequence-2-positive5-hover`  | #188a71 |
| dataviz\_diverging-sequence-2-positive4        | `--hop-dataviz-diverging-sequence-2-positive4`        | #7dc291 |
| dataviz\_diverging-sequence-2-positive4-hover  | `--hop-dataviz-diverging-sequence-2-positive4-hover`  | #47a584 |
| dataviz\_diverging-sequence-2-positive3        | `--hop-dataviz-diverging-sequence-2-positive3`        | #aad89d |
| dataviz\_diverging-sequence-2-positive3-hover  | `--hop-dataviz-diverging-sequence-2-positive3-hover`  | #7dc291 |
| dataviz\_diverging-sequence-2-positive2        | `--hop-dataviz-diverging-sequence-2-positive2`        | #cde8ac |
| dataviz\_diverging-sequence-2-positive2-hover  | `--hop-dataviz-diverging-sequence-2-positive2-hover`  | #aad89d |
| dataviz\_diverging-sequence-2-positive1        | `--hop-dataviz-diverging-sequence-2-positive1`        | #e3f3b9 |
| dataviz\_diverging-sequence-2-positive1-hover  | `--hop-dataviz-diverging-sequence-2-positive1-hover`  | #cde8ac |
| dataviz\_diverging-sequence-2-negative1        | `--hop-dataviz-diverging-sequence-2-negative1`        | #fde6e5 |
| dataviz\_diverging-sequence-2-negative1-hover  | `--hop-dataviz-diverging-sequence-2-negative1-hover`  | #ffd6d3 |
| dataviz\_diverging-sequence-2-negative2        | `--hop-dataviz-diverging-sequence-2-negative2`        | #ffd6d3 |
| dataviz\_diverging-sequence-2-negative2-hover  | `--hop-dataviz-diverging-sequence-2-negative2-hover`  | #ffbcb7 |
| dataviz\_diverging-sequence-2-negative3        | `--hop-dataviz-diverging-sequence-2-negative3`        | #ffbcb7 |
| dataviz\_diverging-sequence-2-negative3-hover  | `--hop-dataviz-diverging-sequence-2-negative3-hover`  | #ff8e8e |
| dataviz\_diverging-sequence-2-negative4        | `--hop-dataviz-diverging-sequence-2-negative4`        | #ff8e8e |
| dataviz\_diverging-sequence-2-negative4-hover  | `--hop-dataviz-diverging-sequence-2-negative4-hover`  | #f56263 |
| dataviz\_diverging-sequence-2-negative5        | `--hop-dataviz-diverging-sequence-2-negative5`        | #f56263 |
| dataviz\_diverging-sequence-2-negative5-hover  | `--hop-dataviz-diverging-sequence-2-negative5-hover`  | #df3236 |
| dataviz\_diverging-sequence-2-negative6        | `--hop-dataviz-diverging-sequence-2-negative6`        | #df3236 |
| dataviz\_diverging-sequence-2-negative6-hover  | `--hop-dataviz-diverging-sequence-2-negative6-hover`  | #cb2e31 |
| dataviz\_diverging-sequence-2-negative7        | `--hop-dataviz-diverging-sequence-2-negative7`        | #cb2e31 |
| dataviz\_diverging-sequence-2-negative7-hover  | `--hop-dataviz-diverging-sequence-2-negative7-hover`  | #ba2d2d |
| dataviz\_diverging-sequence-2-negative8        | `--hop-dataviz-diverging-sequence-2-negative8`        | #ba2d2d |
| dataviz\_diverging-sequence-2-negative8-hover  | `--hop-dataviz-diverging-sequence-2-negative8-hover`  | #952927 |
| dataviz\_diverging-sequence-2-negative9        | `--hop-dataviz-diverging-sequence-2-negative9`        | #952927 |
| dataviz\_diverging-sequence-2-negative9-hover  | `--hop-dataviz-diverging-sequence-2-negative9-hover`  | #6c2320 |
| dataviz\_diverging-sequence-2-negative10       | `--hop-dataviz-diverging-sequence-2-negative10`       | #6c2320 |
| dataviz\_diverging-sequence-2-negative10-hover | `--hop-dataviz-diverging-sequence-2-negative10-hover` | #431a17 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                           | Token Name (CSS Variable Name)                        | Value   |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_diverging-sequence-2-positive10       | `--hop-dataviz-diverging-sequence-2-positive10`       | #16433d |
| dataviz\_diverging-sequence-2-positive10-hover | `--hop-dataviz-diverging-sequence-2-positive10-hover` | #132a27 |
| dataviz\_diverging-sequence-2-positive9        | `--hop-dataviz-diverging-sequence-2-positive9`        | #115a52 |
| dataviz\_diverging-sequence-2-positive9-hover  | `--hop-dataviz-diverging-sequence-2-positive9-hover`  | #16433d |
| dataviz\_diverging-sequence-2-positive8        | `--hop-dataviz-diverging-sequence-2-positive8`        | #0a6f64 |
| dataviz\_diverging-sequence-2-positive8-hover  | `--hop-dataviz-diverging-sequence-2-positive8-hover`  | #115a52 |
| dataviz\_diverging-sequence-2-positive7        | `--hop-dataviz-diverging-sequence-2-positive7`        | #0c796b |
| dataviz\_diverging-sequence-2-positive7-hover  | `--hop-dataviz-diverging-sequence-2-positive7-hover`  | #0a6f64 |
| dataviz\_diverging-sequence-2-positive6        | `--hop-dataviz-diverging-sequence-2-positive6`        | #188a71 |
| dataviz\_diverging-sequence-2-positive6-hover  | `--hop-dataviz-diverging-sequence-2-positive6-hover`  | #0c796b |
| dataviz\_diverging-sequence-2-positive5        | `--hop-dataviz-diverging-sequence-2-positive5`        | #47a584 |
| dataviz\_diverging-sequence-2-positive5-hover  | `--hop-dataviz-diverging-sequence-2-positive5-hover`  | #188a71 |
| dataviz\_diverging-sequence-2-positive4        | `--hop-dataviz-diverging-sequence-2-positive4`        | #7dc291 |
| dataviz\_diverging-sequence-2-positive4-hover  | `--hop-dataviz-diverging-sequence-2-positive4-hover`  | #47a584 |
| dataviz\_diverging-sequence-2-positive3        | `--hop-dataviz-diverging-sequence-2-positive3`        | #aad89d |
| dataviz\_diverging-sequence-2-positive3-hover  | `--hop-dataviz-diverging-sequence-2-positive3-hover`  | #7dc291 |
| dataviz\_diverging-sequence-2-positive2        | `--hop-dataviz-diverging-sequence-2-positive2`        | #cde8ac |
| dataviz\_diverging-sequence-2-positive2-hover  | `--hop-dataviz-diverging-sequence-2-positive2-hover`  | #aad89d |
| dataviz\_diverging-sequence-2-positive1        | `--hop-dataviz-diverging-sequence-2-positive1`        | #e3f3b9 |
| dataviz\_diverging-sequence-2-positive1-hover  | `--hop-dataviz-diverging-sequence-2-positive1-hover`  | #cde8ac |
| dataviz\_diverging-sequence-2-negative1        | `--hop-dataviz-diverging-sequence-2-negative1`        | #fde6e5 |
| dataviz\_diverging-sequence-2-negative1-hover  | `--hop-dataviz-diverging-sequence-2-negative1-hover`  | #ffd6d3 |
| dataviz\_diverging-sequence-2-negative2        | `--hop-dataviz-diverging-sequence-2-negative2`        | #ffd6d3 |
| dataviz\_diverging-sequence-2-negative2-hover  | `--hop-dataviz-diverging-sequence-2-negative2-hover`  | #ffbcb7 |
| dataviz\_diverging-sequence-2-negative3        | `--hop-dataviz-diverging-sequence-2-negative3`        | #ffbcb7 |
| dataviz\_diverging-sequence-2-negative3-hover  | `--hop-dataviz-diverging-sequence-2-negative3-hover`  | #ff8e8e |
| dataviz\_diverging-sequence-2-negative4        | `--hop-dataviz-diverging-sequence-2-negative4`        | #ff8e8e |
| dataviz\_diverging-sequence-2-negative4-hover  | `--hop-dataviz-diverging-sequence-2-negative4-hover`  | #f56263 |
| dataviz\_diverging-sequence-2-negative5        | `--hop-dataviz-diverging-sequence-2-negative5`        | #f56263 |
| dataviz\_diverging-sequence-2-negative5-hover  | `--hop-dataviz-diverging-sequence-2-negative5-hover`  | #df3236 |
| dataviz\_diverging-sequence-2-negative6        | `--hop-dataviz-diverging-sequence-2-negative6`        | #df3236 |
| dataviz\_diverging-sequence-2-negative6-hover  | `--hop-dataviz-diverging-sequence-2-negative6-hover`  | #cb2e31 |
| dataviz\_diverging-sequence-2-negative7        | `--hop-dataviz-diverging-sequence-2-negative7`        | #cb2e31 |
| dataviz\_diverging-sequence-2-negative7-hover  | `--hop-dataviz-diverging-sequence-2-negative7-hover`  | #ba2d2d |
| dataviz\_diverging-sequence-2-negative8        | `--hop-dataviz-diverging-sequence-2-negative8`        | #ba2d2d |
| dataviz\_diverging-sequence-2-negative8-hover  | `--hop-dataviz-diverging-sequence-2-negative8-hover`  | #952927 |
| dataviz\_diverging-sequence-2-negative9        | `--hop-dataviz-diverging-sequence-2-negative9`        | #952927 |
| dataviz\_diverging-sequence-2-negative9-hover  | `--hop-dataviz-diverging-sequence-2-negative9-hover`  | #6c2320 |
| dataviz\_diverging-sequence-2-negative10       | `--hop-dataviz-diverging-sequence-2-negative10`       | #6c2320 |
| dataviz\_diverging-sequence-2-negative10-hover | `--hop-dataviz-diverging-sequence-2-negative10-hover` | #431a17 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Categorical - Sequences

**🎨 Workleap theme tokens:**

| Component Prop Value                           | Token Name (CSS Variable Name)                        | Value   |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_categorical-sequence-category1        | `--hop-dataviz-categorical-sequence-category1`        | #c7ebff |
| dataviz\_categorical-sequence-category1-hover  | `--hop-dataviz-categorical-sequence-category1-hover`  | #ade2ff |
| dataviz\_categorical-sequence-category2        | `--hop-dataviz-categorical-sequence-category2`        | #ecd599 |
| dataviz\_categorical-sequence-category2-hover  | `--hop-dataviz-categorical-sequence-category2-hover`  | #e6c675 |
| dataviz\_categorical-sequence-category3        | `--hop-dataviz-categorical-sequence-category3`        | #d2cdf8 |
| dataviz\_categorical-sequence-category3-hover  | `--hop-dataviz-categorical-sequence-category3-hover`  | #bfb8f5 |
| dataviz\_categorical-sequence-category4        | `--hop-dataviz-categorical-sequence-category4`        | #b6bead |
| dataviz\_categorical-sequence-category4-hover  | `--hop-dataviz-categorical-sequence-category4-hover`  | #a4ae98 |
| dataviz\_categorical-sequence-category5        | `--hop-dataviz-categorical-sequence-category5`        | #fbbdcf |
| dataviz\_categorical-sequence-category5-hover  | `--hop-dataviz-categorical-sequence-category5-hover`  | #f99fb8 |
| dataviz\_categorical-sequence-category6        | `--hop-dataviz-categorical-sequence-category6`        | #bfdca9 |
| dataviz\_categorical-sequence-category6-hover  | `--hop-dataviz-categorical-sequence-category6-hover`  | #a9d08b |
| dataviz\_categorical-sequence-category7        | `--hop-dataviz-categorical-sequence-category7`        | #fbe997 |
| dataviz\_categorical-sequence-category7-hover  | `--hop-dataviz-categorical-sequence-category7-hover`  | #fae275 |
| dataviz\_categorical-sequence-category8        | `--hop-dataviz-categorical-sequence-category8`        | #e8ddd0 |
| dataviz\_categorical-sequence-category8-hover  | `--hop-dataviz-categorical-sequence-category8-hover`  | #ddcebb |
| dataviz\_categorical-sequence-category9        | `--hop-dataviz-categorical-sequence-category9`        | #a7e6dc |
| dataviz\_categorical-sequence-category9-hover  | `--hop-dataviz-categorical-sequence-category9-hover`  | #90e0d2 |
| dataviz\_categorical-sequence-category10       | `--hop-dataviz-categorical-sequence-category10`       | #aecdd5 |
| dataviz\_categorical-sequence-category10-hover | `--hop-dataviz-categorical-sequence-category10-hover` | #93bdc8 |
| dataviz\_categorical-sequence-category11       | `--hop-dataviz-categorical-sequence-category11`       | #ffbf92 |
| dataviz\_categorical-sequence-category11-hover | `--hop-dataviz-categorical-sequence-category11-hover` | #ffac70 |
| dataviz\_categorical-sequence-category12       | `--hop-dataviz-categorical-sequence-category12`       | #a0b8fa |
| dataviz\_categorical-sequence-category12-hover | `--hop-dataviz-categorical-sequence-category12-hover` | #779af8 |
| dataviz\_categorical-sequence-category13       | `--hop-dataviz-categorical-sequence-category13`       | #69bfa0 |
| dataviz\_categorical-sequence-category13-hover | `--hop-dataviz-categorical-sequence-category13-hover` | #54b692 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                           | Token Name (CSS Variable Name)                        | Value   |
| ---------------------------------------------- | ----------------------------------------------------- | ------- |
| dataviz\_categorical-sequence-category1        | `--hop-dataviz-categorical-sequence-category1`        | #c7ebff |
| dataviz\_categorical-sequence-category1-hover  | `--hop-dataviz-categorical-sequence-category1-hover`  | #ade2ff |
| dataviz\_categorical-sequence-category2        | `--hop-dataviz-categorical-sequence-category2`        | #ecd599 |
| dataviz\_categorical-sequence-category2-hover  | `--hop-dataviz-categorical-sequence-category2-hover`  | #e6c675 |
| dataviz\_categorical-sequence-category3        | `--hop-dataviz-categorical-sequence-category3`        | #d2cdf8 |
| dataviz\_categorical-sequence-category3-hover  | `--hop-dataviz-categorical-sequence-category3-hover`  | #bfb8f5 |
| dataviz\_categorical-sequence-category4        | `--hop-dataviz-categorical-sequence-category4`        | #b6bead |
| dataviz\_categorical-sequence-category4-hover  | `--hop-dataviz-categorical-sequence-category4-hover`  | #a4ae98 |
| dataviz\_categorical-sequence-category5        | `--hop-dataviz-categorical-sequence-category5`        | #fbbdcf |
| dataviz\_categorical-sequence-category5-hover  | `--hop-dataviz-categorical-sequence-category5-hover`  | #f99fb8 |
| dataviz\_categorical-sequence-category6        | `--hop-dataviz-categorical-sequence-category6`        | #bfdca9 |
| dataviz\_categorical-sequence-category6-hover  | `--hop-dataviz-categorical-sequence-category6-hover`  | #a9d08b |
| dataviz\_categorical-sequence-category7        | `--hop-dataviz-categorical-sequence-category7`        | #fbe997 |
| dataviz\_categorical-sequence-category7-hover  | `--hop-dataviz-categorical-sequence-category7-hover`  | #fae275 |
| dataviz\_categorical-sequence-category8        | `--hop-dataviz-categorical-sequence-category8`        | #e8ddd0 |
| dataviz\_categorical-sequence-category8-hover  | `--hop-dataviz-categorical-sequence-category8-hover`  | #ddcebb |
| dataviz\_categorical-sequence-category9        | `--hop-dataviz-categorical-sequence-category9`        | #a7e6dc |
| dataviz\_categorical-sequence-category9-hover  | `--hop-dataviz-categorical-sequence-category9-hover`  | #90e0d2 |
| dataviz\_categorical-sequence-category10       | `--hop-dataviz-categorical-sequence-category10`       | #aecdd5 |
| dataviz\_categorical-sequence-category10-hover | `--hop-dataviz-categorical-sequence-category10-hover` | #93bdc8 |
| dataviz\_categorical-sequence-category11       | `--hop-dataviz-categorical-sequence-category11`       | #ffbf92 |
| dataviz\_categorical-sequence-category11-hover | `--hop-dataviz-categorical-sequence-category11-hover` | #ffac70 |
| dataviz\_categorical-sequence-category12       | `--hop-dataviz-categorical-sequence-category12`       | #a0b8fa |
| dataviz\_categorical-sequence-category12-hover | `--hop-dataviz-categorical-sequence-category12-hover` | #779af8 |
| dataviz\_categorical-sequence-category13       | `--hop-dataviz-categorical-sequence-category13`       | #69bfa0 |
| dataviz\_categorical-sequence-category13-hover | `--hop-dataviz-categorical-sequence-category13-hover` | #54b692 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Categorical - 2 Color Groups

**🎨 Workleap theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-2colorgroup-option6-category2 | `--hop-dataviz-categorical-2colorgroup-option6-category2` | #69bfa0 |
| dataviz\_categorical-2colorgroup-option6-category1 | `--hop-dataviz-categorical-2colorgroup-option6-category1` | #ffbf92 |
| dataviz\_categorical-2colorgroup-option5-category2 | `--hop-dataviz-categorical-2colorgroup-option5-category2` | #a0b8fa |
| dataviz\_categorical-2colorgroup-option5-category1 | `--hop-dataviz-categorical-2colorgroup-option5-category1` | #a7e6dc |
| dataviz\_categorical-2colorgroup-option4-category2 | `--hop-dataviz-categorical-2colorgroup-option4-category2` | #6c8ffd |
| dataviz\_categorical-2colorgroup-option4-category1 | `--hop-dataviz-categorical-2colorgroup-option4-category1` | #bfdca9 |
| dataviz\_categorical-2colorgroup-option3-category2 | `--hop-dataviz-categorical-2colorgroup-option3-category2` | #ff9b3f |
| dataviz\_categorical-2colorgroup-option3-category1 | `--hop-dataviz-categorical-2colorgroup-option3-category1` | #2f48ff |
| dataviz\_categorical-2colorgroup-option2-category2 | `--hop-dataviz-categorical-2colorgroup-option2-category2` | #fbe997 |
| dataviz\_categorical-2colorgroup-option2-category1 | `--hop-dataviz-categorical-2colorgroup-option2-category1` | #fbbdcf |
| dataviz\_categorical-2colorgroup-option1-category2 | `--hop-dataviz-categorical-2colorgroup-option1-category2` | #c7ebff |
| dataviz\_categorical-2colorgroup-option1-category1 | `--hop-dataviz-categorical-2colorgroup-option1-category1` | #b6bead |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-2colorgroup-option6-category2 | `--hop-dataviz-categorical-2colorgroup-option6-category2` | #69bfa0 |
| dataviz\_categorical-2colorgroup-option6-category1 | `--hop-dataviz-categorical-2colorgroup-option6-category1` | #ffbf92 |
| dataviz\_categorical-2colorgroup-option5-category2 | `--hop-dataviz-categorical-2colorgroup-option5-category2` | #a0b8fa |
| dataviz\_categorical-2colorgroup-option5-category1 | `--hop-dataviz-categorical-2colorgroup-option5-category1` | #a7e6dc |
| dataviz\_categorical-2colorgroup-option4-category2 | `--hop-dataviz-categorical-2colorgroup-option4-category2` | #6c8ffd |
| dataviz\_categorical-2colorgroup-option4-category1 | `--hop-dataviz-categorical-2colorgroup-option4-category1` | #bfdca9 |
| dataviz\_categorical-2colorgroup-option3-category2 | `--hop-dataviz-categorical-2colorgroup-option3-category2` | #ff9b3f |
| dataviz\_categorical-2colorgroup-option3-category1 | `--hop-dataviz-categorical-2colorgroup-option3-category1` | #2f48ff |
| dataviz\_categorical-2colorgroup-option2-category2 | `--hop-dataviz-categorical-2colorgroup-option2-category2` | #fbe997 |
| dataviz\_categorical-2colorgroup-option2-category1 | `--hop-dataviz-categorical-2colorgroup-option2-category1` | #fbbdcf |
| dataviz\_categorical-2colorgroup-option1-category2 | `--hop-dataviz-categorical-2colorgroup-option1-category2` | #c7ebff |
| dataviz\_categorical-2colorgroup-option1-category1 | `--hop-dataviz-categorical-2colorgroup-option1-category1` | #b6bead |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Categorical - 3 Color Groups

**🎨 Workleap theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-3colorgroup-option1-category1 | `--hop-dataviz-categorical-3colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-3colorgroup-option1-category2 | `--hop-dataviz-categorical-3colorgroup-option1-category2` | #d2cdf8 |
| dataviz\_categorical-3colorgroup-option1-category3 | `--hop-dataviz-categorical-3colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-3colorgroup-option2-category1 | `--hop-dataviz-categorical-3colorgroup-option2-category1` | #ecd599 |
| dataviz\_categorical-3colorgroup-option2-category2 | `--hop-dataviz-categorical-3colorgroup-option2-category2` | #a7e6dc |
| dataviz\_categorical-3colorgroup-option2-category3 | `--hop-dataviz-categorical-3colorgroup-option2-category3` | #69bfa0 |
| dataviz\_categorical-3colorgroup-option3-category1 | `--hop-dataviz-categorical-3colorgroup-option3-category1` | #69bfa0 |
| dataviz\_categorical-3colorgroup-option3-category2 | `--hop-dataviz-categorical-3colorgroup-option3-category2` | #fbe997 |
| dataviz\_categorical-3colorgroup-option3-category3 | `--hop-dataviz-categorical-3colorgroup-option3-category3` | #aecdd5 |
| dataviz\_categorical-3colorgroup-option4-category1 | `--hop-dataviz-categorical-3colorgroup-option4-category1` | #b6bead |
| dataviz\_categorical-3colorgroup-option4-category2 | `--hop-dataviz-categorical-3colorgroup-option4-category2` | #a0b8fa |
| dataviz\_categorical-3colorgroup-option4-category3 | `--hop-dataviz-categorical-3colorgroup-option4-category3` | #fbbdcf |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-3colorgroup-option1-category1 | `--hop-dataviz-categorical-3colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-3colorgroup-option1-category2 | `--hop-dataviz-categorical-3colorgroup-option1-category2` | #d2cdf8 |
| dataviz\_categorical-3colorgroup-option1-category3 | `--hop-dataviz-categorical-3colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-3colorgroup-option2-category1 | `--hop-dataviz-categorical-3colorgroup-option2-category1` | #ecd599 |
| dataviz\_categorical-3colorgroup-option2-category2 | `--hop-dataviz-categorical-3colorgroup-option2-category2` | #a7e6dc |
| dataviz\_categorical-3colorgroup-option2-category3 | `--hop-dataviz-categorical-3colorgroup-option2-category3` | #69bfa0 |
| dataviz\_categorical-3colorgroup-option3-category1 | `--hop-dataviz-categorical-3colorgroup-option3-category1` | #69bfa0 |
| dataviz\_categorical-3colorgroup-option3-category2 | `--hop-dataviz-categorical-3colorgroup-option3-category2` | #fbe997 |
| dataviz\_categorical-3colorgroup-option3-category3 | `--hop-dataviz-categorical-3colorgroup-option3-category3` | #aecdd5 |
| dataviz\_categorical-3colorgroup-option4-category1 | `--hop-dataviz-categorical-3colorgroup-option4-category1` | #b6bead |
| dataviz\_categorical-3colorgroup-option4-category2 | `--hop-dataviz-categorical-3colorgroup-option4-category2` | #a0b8fa |
| dataviz\_categorical-3colorgroup-option4-category3 | `--hop-dataviz-categorical-3colorgroup-option4-category3` | #fbbdcf |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Categorical - 4 Color Groups

**🎨 Workleap theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-4colorgroup-option1-category1 | `--hop-dataviz-categorical-4colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-4colorgroup-option1-category2 | `--hop-dataviz-categorical-4colorgroup-option1-category2` | #d2cdf8 |
| dataviz\_categorical-4colorgroup-option1-category3 | `--hop-dataviz-categorical-4colorgroup-option1-category3` | #cde8ac |
| dataviz\_categorical-4colorgroup-option1-category4 | `--hop-dataviz-categorical-4colorgroup-option1-category4` | #fbbdcf |
| dataviz\_categorical-4colorgroup-option2-category1 | `--hop-dataviz-categorical-4colorgroup-option2-category1` | #b6bead |
| dataviz\_categorical-4colorgroup-option2-category2 | `--hop-dataviz-categorical-4colorgroup-option2-category2` | #c7ebff |
| dataviz\_categorical-4colorgroup-option2-category3 | `--hop-dataviz-categorical-4colorgroup-option2-category3` | #84d0b4 |
| dataviz\_categorical-4colorgroup-option2-category4 | `--hop-dataviz-categorical-4colorgroup-option2-category4` | #fbe997 |
| dataviz\_categorical-4colorgroup-option3-category1 | `--hop-dataviz-categorical-4colorgroup-option3-category1` | #ffbf92 |
| dataviz\_categorical-4colorgroup-option3-category2 | `--hop-dataviz-categorical-4colorgroup-option3-category2` | #b6bead |
| dataviz\_categorical-4colorgroup-option3-category3 | `--hop-dataviz-categorical-4colorgroup-option3-category3` | #2e70a8 |
| dataviz\_categorical-4colorgroup-option3-category4 | `--hop-dataviz-categorical-4colorgroup-option3-category4` | #ecd599 |
| dataviz\_categorical-4colorgroup-option4-category1 | `--hop-dataviz-categorical-4colorgroup-option4-category1` | #69bfa0 |
| dataviz\_categorical-4colorgroup-option4-category2 | `--hop-dataviz-categorical-4colorgroup-option4-category2` | #c7ebff |
| dataviz\_categorical-4colorgroup-option4-category3 | `--hop-dataviz-categorical-4colorgroup-option4-category3` | #fa4d59 |
| dataviz\_categorical-4colorgroup-option4-category4 | `--hop-dataviz-categorical-4colorgroup-option4-category4` | #d2cdf8 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-4colorgroup-option1-category1 | `--hop-dataviz-categorical-4colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-4colorgroup-option1-category2 | `--hop-dataviz-categorical-4colorgroup-option1-category2` | #d2cdf8 |
| dataviz\_categorical-4colorgroup-option1-category3 | `--hop-dataviz-categorical-4colorgroup-option1-category3` | #cde8ac |
| dataviz\_categorical-4colorgroup-option1-category4 | `--hop-dataviz-categorical-4colorgroup-option1-category4` | #fbbdcf |
| dataviz\_categorical-4colorgroup-option2-category1 | `--hop-dataviz-categorical-4colorgroup-option2-category1` | #b6bead |
| dataviz\_categorical-4colorgroup-option2-category2 | `--hop-dataviz-categorical-4colorgroup-option2-category2` | #c7ebff |
| dataviz\_categorical-4colorgroup-option2-category3 | `--hop-dataviz-categorical-4colorgroup-option2-category3` | #84d0b4 |
| dataviz\_categorical-4colorgroup-option2-category4 | `--hop-dataviz-categorical-4colorgroup-option2-category4` | #fbe997 |
| dataviz\_categorical-4colorgroup-option3-category1 | `--hop-dataviz-categorical-4colorgroup-option3-category1` | #ffbf92 |
| dataviz\_categorical-4colorgroup-option3-category2 | `--hop-dataviz-categorical-4colorgroup-option3-category2` | #b6bead |
| dataviz\_categorical-4colorgroup-option3-category3 | `--hop-dataviz-categorical-4colorgroup-option3-category3` | #2e70a8 |
| dataviz\_categorical-4colorgroup-option3-category4 | `--hop-dataviz-categorical-4colorgroup-option3-category4` | #ecd599 |
| dataviz\_categorical-4colorgroup-option4-category1 | `--hop-dataviz-categorical-4colorgroup-option4-category1` | #69bfa0 |
| dataviz\_categorical-4colorgroup-option4-category2 | `--hop-dataviz-categorical-4colorgroup-option4-category2` | #c7ebff |
| dataviz\_categorical-4colorgroup-option4-category3 | `--hop-dataviz-categorical-4colorgroup-option4-category3` | #fa4d59 |
| dataviz\_categorical-4colorgroup-option4-category4 | `--hop-dataviz-categorical-4colorgroup-option4-category4` | #d2cdf8 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Categorical - 5 Color Groups

**🎨 Workleap theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-5colorgroup-option1-category1 | `--hop-dataviz-categorical-5colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-5colorgroup-option1-category2 | `--hop-dataviz-categorical-5colorgroup-option1-category2` | #ff9b3f |
| dataviz\_categorical-5colorgroup-option1-category3 | `--hop-dataviz-categorical-5colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-5colorgroup-option1-category4 | `--hop-dataviz-categorical-5colorgroup-option1-category4` | #ecd599 |
| dataviz\_categorical-5colorgroup-option1-category5 | `--hop-dataviz-categorical-5colorgroup-option1-category5` | #69bfa0 |
| dataviz\_categorical-5colorgroup-option2-category1 | `--hop-dataviz-categorical-5colorgroup-option2-category1` | #ff9b3f |
| dataviz\_categorical-5colorgroup-option2-category2 | `--hop-dataviz-categorical-5colorgroup-option2-category2` | #b6bead |
| dataviz\_categorical-5colorgroup-option2-category3 | `--hop-dataviz-categorical-5colorgroup-option2-category3` | #2e70a8 |
| dataviz\_categorical-5colorgroup-option2-category4 | `--hop-dataviz-categorical-5colorgroup-option2-category4` | #fbe997 |
| dataviz\_categorical-5colorgroup-option2-category5 | `--hop-dataviz-categorical-5colorgroup-option2-category5` | #c5bef6 |
| dataviz\_categorical-5colorgroup-option3-category1 | `--hop-dataviz-categorical-5colorgroup-option3-category1` | #d2cdf8 |
| dataviz\_categorical-5colorgroup-option3-category2 | `--hop-dataviz-categorical-5colorgroup-option3-category2` | #ecd599 |
| dataviz\_categorical-5colorgroup-option3-category3 | `--hop-dataviz-categorical-5colorgroup-option3-category3` | #aecdd5 |
| dataviz\_categorical-5colorgroup-option3-category4 | `--hop-dataviz-categorical-5colorgroup-option3-category4` | #b6bead |
| dataviz\_categorical-5colorgroup-option3-category5 | `--hop-dataviz-categorical-5colorgroup-option3-category5` | #ffbf92 |
| dataviz\_categorical-5colorgroup-option4-category1 | `--hop-dataviz-categorical-5colorgroup-option4-category1` | #69bfa0 |
| dataviz\_categorical-5colorgroup-option4-category2 | `--hop-dataviz-categorical-5colorgroup-option4-category2` | #c7ebff |
| dataviz\_categorical-5colorgroup-option4-category3 | `--hop-dataviz-categorical-5colorgroup-option4-category3` | #fa4d59 |
| dataviz\_categorical-5colorgroup-option4-category4 | `--hop-dataviz-categorical-5colorgroup-option4-category4` | #d2cdf8 |
| dataviz\_categorical-5colorgroup-option4-category5 | `--hop-dataviz-categorical-5colorgroup-option4-category5` | #b6bead |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-5colorgroup-option1-category1 | `--hop-dataviz-categorical-5colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-5colorgroup-option1-category2 | `--hop-dataviz-categorical-5colorgroup-option1-category2` | #ff9b3f |
| dataviz\_categorical-5colorgroup-option1-category3 | `--hop-dataviz-categorical-5colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-5colorgroup-option1-category4 | `--hop-dataviz-categorical-5colorgroup-option1-category4` | #ecd599 |
| dataviz\_categorical-5colorgroup-option1-category5 | `--hop-dataviz-categorical-5colorgroup-option1-category5` | #69bfa0 |
| dataviz\_categorical-5colorgroup-option2-category1 | `--hop-dataviz-categorical-5colorgroup-option2-category1` | #ff9b3f |
| dataviz\_categorical-5colorgroup-option2-category2 | `--hop-dataviz-categorical-5colorgroup-option2-category2` | #b6bead |
| dataviz\_categorical-5colorgroup-option2-category3 | `--hop-dataviz-categorical-5colorgroup-option2-category3` | #2e70a8 |
| dataviz\_categorical-5colorgroup-option2-category4 | `--hop-dataviz-categorical-5colorgroup-option2-category4` | #fbe997 |
| dataviz\_categorical-5colorgroup-option2-category5 | `--hop-dataviz-categorical-5colorgroup-option2-category5` | #c5bef6 |
| dataviz\_categorical-5colorgroup-option3-category1 | `--hop-dataviz-categorical-5colorgroup-option3-category1` | #d2cdf8 |
| dataviz\_categorical-5colorgroup-option3-category2 | `--hop-dataviz-categorical-5colorgroup-option3-category2` | #ecd599 |
| dataviz\_categorical-5colorgroup-option3-category3 | `--hop-dataviz-categorical-5colorgroup-option3-category3` | #aecdd5 |
| dataviz\_categorical-5colorgroup-option3-category4 | `--hop-dataviz-categorical-5colorgroup-option3-category4` | #b6bead |
| dataviz\_categorical-5colorgroup-option3-category5 | `--hop-dataviz-categorical-5colorgroup-option3-category5` | #ffbf92 |
| dataviz\_categorical-5colorgroup-option4-category1 | `--hop-dataviz-categorical-5colorgroup-option4-category1` | #69bfa0 |
| dataviz\_categorical-5colorgroup-option4-category2 | `--hop-dataviz-categorical-5colorgroup-option4-category2` | #c7ebff |
| dataviz\_categorical-5colorgroup-option4-category3 | `--hop-dataviz-categorical-5colorgroup-option4-category3` | #fa4d59 |
| dataviz\_categorical-5colorgroup-option4-category4 | `--hop-dataviz-categorical-5colorgroup-option4-category4` | #d2cdf8 |
| dataviz\_categorical-5colorgroup-option4-category5 | `--hop-dataviz-categorical-5colorgroup-option4-category5` | #b6bead |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Categorical - 6 Color Groups

**🎨 Workleap theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-6colorgroup-option1-category1 | `--hop-dataviz-categorical-6colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-6colorgroup-option1-category2 | `--hop-dataviz-categorical-6colorgroup-option1-category2` | #a0b8fa |
| dataviz\_categorical-6colorgroup-option1-category3 | `--hop-dataviz-categorical-6colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-6colorgroup-option1-category4 | `--hop-dataviz-categorical-6colorgroup-option1-category4` | #fa4d59 |
| dataviz\_categorical-6colorgroup-option1-category5 | `--hop-dataviz-categorical-6colorgroup-option1-category5` | #ecd599 |
| dataviz\_categorical-6colorgroup-option1-category6 | `--hop-dataviz-categorical-6colorgroup-option1-category6` | #69bfa0 |
| dataviz\_categorical-6colorgroup-option2-category1 | `--hop-dataviz-categorical-6colorgroup-option2-category1` | #2e70a8 |
| dataviz\_categorical-6colorgroup-option2-category2 | `--hop-dataviz-categorical-6colorgroup-option2-category2` | #fbe997 |
| dataviz\_categorical-6colorgroup-option2-category3 | `--hop-dataviz-categorical-6colorgroup-option2-category3` | #69bfa0 |
| dataviz\_categorical-6colorgroup-option2-category4 | `--hop-dataviz-categorical-6colorgroup-option2-category4` | #ff9b3f |
| dataviz\_categorical-6colorgroup-option2-category5 | `--hop-dataviz-categorical-6colorgroup-option2-category5` | #a7e6dc |
| dataviz\_categorical-6colorgroup-option2-category6 | `--hop-dataviz-categorical-6colorgroup-option2-category6` | #d2cdf8 |
| dataviz\_categorical-6colorgroup-option3-category1 | `--hop-dataviz-categorical-6colorgroup-option3-category1` | #b6bead |
| dataviz\_categorical-6colorgroup-option3-category2 | `--hop-dataviz-categorical-6colorgroup-option3-category2` | #aecdd5 |
| dataviz\_categorical-6colorgroup-option3-category3 | `--hop-dataviz-categorical-6colorgroup-option3-category3` | #e8ddd0 |
| dataviz\_categorical-6colorgroup-option3-category4 | `--hop-dataviz-categorical-6colorgroup-option3-category4` | #a7e6dc |
| dataviz\_categorical-6colorgroup-option3-category5 | `--hop-dataviz-categorical-6colorgroup-option3-category5` | #2e70a8 |
| dataviz\_categorical-6colorgroup-option3-category6 | `--hop-dataviz-categorical-6colorgroup-option3-category6` | #fbbdcf |
| dataviz\_categorical-6colorgroup-option4-category1 | `--hop-dataviz-categorical-6colorgroup-option4-category1` | #fbbdcf |
| dataviz\_categorical-6colorgroup-option4-category2 | `--hop-dataviz-categorical-6colorgroup-option4-category2` | #a0b8fa |
| dataviz\_categorical-6colorgroup-option4-category3 | `--hop-dataviz-categorical-6colorgroup-option4-category3` | #ffbf92 |
| dataviz\_categorical-6colorgroup-option4-category4 | `--hop-dataviz-categorical-6colorgroup-option4-category4` | #c7ebff |
| dataviz\_categorical-6colorgroup-option4-category5 | `--hop-dataviz-categorical-6colorgroup-option4-category5` | #bfdca9 |
| dataviz\_categorical-6colorgroup-option4-category6 | `--hop-dataviz-categorical-6colorgroup-option4-category6` | #fbe997 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                               | Token Name (CSS Variable Name)                            | Value   |
| -------------------------------------------------- | --------------------------------------------------------- | ------- |
| dataviz\_categorical-6colorgroup-option1-category1 | `--hop-dataviz-categorical-6colorgroup-option1-category1` | #b6bead |
| dataviz\_categorical-6colorgroup-option1-category2 | `--hop-dataviz-categorical-6colorgroup-option1-category2` | #a0b8fa |
| dataviz\_categorical-6colorgroup-option1-category3 | `--hop-dataviz-categorical-6colorgroup-option1-category3` | #bfdca9 |
| dataviz\_categorical-6colorgroup-option1-category4 | `--hop-dataviz-categorical-6colorgroup-option1-category4` | #fa4d59 |
| dataviz\_categorical-6colorgroup-option1-category5 | `--hop-dataviz-categorical-6colorgroup-option1-category5` | #ecd599 |
| dataviz\_categorical-6colorgroup-option1-category6 | `--hop-dataviz-categorical-6colorgroup-option1-category6` | #69bfa0 |
| dataviz\_categorical-6colorgroup-option2-category1 | `--hop-dataviz-categorical-6colorgroup-option2-category1` | #2e70a8 |
| dataviz\_categorical-6colorgroup-option2-category2 | `--hop-dataviz-categorical-6colorgroup-option2-category2` | #fbe997 |
| dataviz\_categorical-6colorgroup-option2-category3 | `--hop-dataviz-categorical-6colorgroup-option2-category3` | #69bfa0 |
| dataviz\_categorical-6colorgroup-option2-category4 | `--hop-dataviz-categorical-6colorgroup-option2-category4` | #ff9b3f |
| dataviz\_categorical-6colorgroup-option2-category5 | `--hop-dataviz-categorical-6colorgroup-option2-category5` | #a7e6dc |
| dataviz\_categorical-6colorgroup-option2-category6 | `--hop-dataviz-categorical-6colorgroup-option2-category6` | #d2cdf8 |
| dataviz\_categorical-6colorgroup-option3-category1 | `--hop-dataviz-categorical-6colorgroup-option3-category1` | #b6bead |
| dataviz\_categorical-6colorgroup-option3-category2 | `--hop-dataviz-categorical-6colorgroup-option3-category2` | #aecdd5 |
| dataviz\_categorical-6colorgroup-option3-category3 | `--hop-dataviz-categorical-6colorgroup-option3-category3` | #e8ddd0 |
| dataviz\_categorical-6colorgroup-option3-category4 | `--hop-dataviz-categorical-6colorgroup-option3-category4` | #a7e6dc |
| dataviz\_categorical-6colorgroup-option3-category5 | `--hop-dataviz-categorical-6colorgroup-option3-category5` | #2e70a8 |
| dataviz\_categorical-6colorgroup-option3-category6 | `--hop-dataviz-categorical-6colorgroup-option3-category6` | #fbbdcf |
| dataviz\_categorical-6colorgroup-option4-category1 | `--hop-dataviz-categorical-6colorgroup-option4-category1` | #fbbdcf |
| dataviz\_categorical-6colorgroup-option4-category2 | `--hop-dataviz-categorical-6colorgroup-option4-category2` | #a0b8fa |
| dataviz\_categorical-6colorgroup-option4-category3 | `--hop-dataviz-categorical-6colorgroup-option4-category3` | #ffbf92 |
| dataviz\_categorical-6colorgroup-option4-category4 | `--hop-dataviz-categorical-6colorgroup-option4-category4` | #c7ebff |
| dataviz\_categorical-6colorgroup-option4-category5 | `--hop-dataviz-categorical-6colorgroup-option4-category5` | #bfdca9 |
| dataviz\_categorical-6colorgroup-option4-category6 | `--hop-dataviz-categorical-6colorgroup-option4-category6` | #fbe997 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

#### Dark Tokens

##### Neutral

**🎨 Workleap theme tokens:**

| Component Prop Value                 | Token Name (CSS Variable Name)                       | Value                  |
| ------------------------------------ | ---------------------------------------------------- | ---------------------- |
| neutral-active                       | `--hop-neutral-border-active`                        | #787a7e                |
| neutral-active                       | `--hop-neutral-icon-active`                          | #232426                |
| neutral-weak-active                  | `--hop-neutral-icon-weak-active`                     | #484a4d                |
| neutral-active                       | `--hop-neutral-surface-active`                       | #eef0f2                |
| neutral-weak-active                  | `--hop-neutral-surface-weak-active`                  | #cbcdd2                |
| neutral-active                       | `--hop-neutral-text-active`                          | #232426                |
| neutral-weak-active                  | `--hop-neutral-text-weak-active`                     | #484a4d                |
| neutral                              | `--hop-neutral-border`                               | #b3b5ba                |
| neutral-selected                     | `--hop-neutral-border-selected`                      | #313335                |
| neutral-disabled                     | `--hop-neutral-border-disabled`                      | #eef0f2                |
| neutral-hover                        | `--hop-neutral-border-hover`                         | #96989d                |
| neutral-press                        | `--hop-neutral-border-press`                         | #787a7e                |
| neutral-strong                       | `--hop-neutral-border-strong`                        | #313335                |
| neutral-strong-hover                 | `--hop-neutral-border-strong-hover`                  | #484a4d                |
| neutral-weak                         | `--hop-neutral-border-weak`                          | #e1e3e7                |
| neutral-weakest                      | `--hop-neutral-border-weakest`                       | #eef0f2                |
| neutral                              | `--hop-neutral-icon`                                 | #313335                |
| neutral-selected                     | `--hop-neutral-icon-selected`                        | #ffffff                |
| neutral-disabled                     | `--hop-neutral-icon-disabled`                        | #96989d                |
| neutral-hover                        | `--hop-neutral-icon-hover`                           | #484a4d                |
| neutral-press                        | `--hop-neutral-icon-press`                           | #232426                |
| neutral-strong                       | `--hop-neutral-icon-strong`                          | #ffffff                |
| neutral-strong-hover                 | `--hop-neutral-icon-strong-hover`                    | #ffffff                |
| neutral-weak                         | `--hop-neutral-icon-weak`                            | #787a7e                |
| neutral-weak-hover                   | `--hop-neutral-icon-weak-hover`                      | #5e6064                |
| neutral-weak-press                   | `--hop-neutral-icon-weak-press`                      | #484a4d                |
| neutral-weak-selected                | `--hop-neutral-icon-weak-selected`                   | #5e6064                |
| neutral-weakest                      | `--hop-neutral-icon-weakest`                         | #b3b5ba                |
| neutral-inverse                      | `--hop-neutral-icon-inverse`                         | #232426                |
| neutral-always-light                 | `--hop-neutral-icon-always-light`                    | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-icon-always-dark`                     | #232426                |
| neutral                              | `--hop-neutral-surface`                              | #ffffff                |
| neutral-selected                     | `--hop-neutral-surface-selected`                     | #313335                |
| neutral-disabled                     | `--hop-neutral-surface-disabled`                     | #eef0f2                |
| neutral-hover                        | `--hop-neutral-surface-hover`                        | #f8f9fa                |
| neutral-press                        | `--hop-neutral-surface-press`                        | #eef0f2                |
| neutral-strong                       | `--hop-neutral-surface-strong`                       | #313335                |
| neutral-transparent                  | `--hop-neutral-surface-transparent`                  | rgb(255 255 255 / 0.9) |
| neutral-weak                         | `--hop-neutral-surface-weak`                         | #eef0f2                |
| neutral-weak-transparent-always-dark | `--hop-neutral-surface-weak-transparent-always-dark` | rgb(49 51 53 / 0.75)   |
| neutral-weak-selected                | `--hop-neutral-surface-weak-selected`                | #eef0f2                |
| neutral-weak-hover                   | `--hop-neutral-surface-weak-hover`                   | #e1e3e7                |
| neutral-weak-press                   | `--hop-neutral-surface-weak-press`                   | #cbcdd2                |
| neutral-weakest                      | `--hop-neutral-surface-weakest`                      | #f8f9fa                |
| neutral-weakest-selected             | `--hop-neutral-surface-weakest-selected`             | #eef0f2                |
| neutral-weakest-hover                | `--hop-neutral-surface-weakest-hover`                | #eef0f2                |
| neutral-inverse                      | `--hop-neutral-surface-inverse`                      | #232426                |
| neutral-always-light                 | `--hop-neutral-surface-always-light`                 | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-surface-always-dark`                  | #232426                |
| neutral                              | `--hop-neutral-text`                                 | #313335                |
| neutral-selected                     | `--hop-neutral-text-selected`                        | #ffffff                |
| neutral-disabled                     | `--hop-neutral-text-disabled`                        | #96989d                |
| neutral-hover                        | `--hop-neutral-text-hover`                           | #484a4d                |
| neutral-press                        | `--hop-neutral-text-press`                           | #232426                |
| neutral-strong                       | `--hop-neutral-text-strong`                          | #ffffff                |
| neutral-weak                         | `--hop-neutral-text-weak`                            | #6c6e72                |
| neutral-weak-hover                   | `--hop-neutral-text-weak-hover`                      | #5e6064                |
| neutral-weak-press                   | `--hop-neutral-text-weak-press`                      | #484a4d                |
| neutral-weak-selected                | `--hop-neutral-text-weak-selected`                   | #5e6064                |
| neutral-weakest                      | `--hop-neutral-text-weakest`                         | #96989d                |
| neutral-inverse                      | `--hop-neutral-text-inverse`                         | #232426                |
| neutral-always-light                 | `--hop-neutral-text-always-light`                    | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-text-always-dark`                     | #232426                |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value                 | Token Name (CSS Variable Name)                       | Value                  |
| ------------------------------------ | ---------------------------------------------------- | ---------------------- |
| neutral-active                       | `--hop-neutral-border-active`                        | #787a7e                |
| neutral-active                       | `--hop-neutral-icon-active`                          | #232426                |
| neutral-weak-active                  | `--hop-neutral-icon-weak-active`                     | #484a4d                |
| neutral-active                       | `--hop-neutral-surface-active`                       | #eef0f2                |
| neutral-weak-active                  | `--hop-neutral-surface-weak-active`                  | #cbcdd2                |
| neutral-active                       | `--hop-neutral-text-active`                          | #232426                |
| neutral-weak-active                  | `--hop-neutral-text-weak-active`                     | #484a4d                |
| neutral                              | `--hop-neutral-border`                               | #b3b5ba                |
| neutral-selected                     | `--hop-neutral-border-selected`                      | #313335                |
| neutral-disabled                     | `--hop-neutral-border-disabled`                      | #eef0f2                |
| neutral-hover                        | `--hop-neutral-border-hover`                         | #96989d                |
| neutral-press                        | `--hop-neutral-border-press`                         | #787a7e                |
| neutral-strong                       | `--hop-neutral-border-strong`                        | #313335                |
| neutral-strong-hover                 | `--hop-neutral-border-strong-hover`                  | #484a4d                |
| neutral-weak                         | `--hop-neutral-border-weak`                          | #e1e3e7                |
| neutral-weakest                      | `--hop-neutral-border-weakest`                       | #eef0f2                |
| neutral                              | `--hop-neutral-icon`                                 | #313335                |
| neutral-selected                     | `--hop-neutral-icon-selected`                        | #ffffff                |
| neutral-disabled                     | `--hop-neutral-icon-disabled`                        | #96989d                |
| neutral-hover                        | `--hop-neutral-icon-hover`                           | #484a4d                |
| neutral-press                        | `--hop-neutral-icon-press`                           | #232426                |
| neutral-strong                       | `--hop-neutral-icon-strong`                          | #ffffff                |
| neutral-strong-hover                 | `--hop-neutral-icon-strong-hover`                    | #ffffff                |
| neutral-weak                         | `--hop-neutral-icon-weak`                            | #787a7e                |
| neutral-weak-hover                   | `--hop-neutral-icon-weak-hover`                      | #5e6064                |
| neutral-weak-press                   | `--hop-neutral-icon-weak-press`                      | #484a4d                |
| neutral-weak-selected                | `--hop-neutral-icon-weak-selected`                   | #5e6064                |
| neutral-weakest                      | `--hop-neutral-icon-weakest`                         | #b3b5ba                |
| neutral-inverse                      | `--hop-neutral-icon-inverse`                         | #232426                |
| neutral-always-light                 | `--hop-neutral-icon-always-light`                    | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-icon-always-dark`                     | #232426                |
| neutral                              | `--hop-neutral-surface`                              | #ffffff                |
| neutral-selected                     | `--hop-neutral-surface-selected`                     | #313335                |
| neutral-disabled                     | `--hop-neutral-surface-disabled`                     | #eef0f2                |
| neutral-hover                        | `--hop-neutral-surface-hover`                        | #f8f9fa                |
| neutral-press                        | `--hop-neutral-surface-press`                        | #eef0f2                |
| neutral-strong                       | `--hop-neutral-surface-strong`                       | #313335                |
| neutral-transparent                  | `--hop-neutral-surface-transparent`                  | rgb(255 255 255 / 0.9) |
| neutral-weak                         | `--hop-neutral-surface-weak`                         | #eef0f2                |
| neutral-weak-transparent-always-dark | `--hop-neutral-surface-weak-transparent-always-dark` | rgb(49 51 53 / 0.75)   |
| neutral-weak-selected                | `--hop-neutral-surface-weak-selected`                | #eef0f2                |
| neutral-weak-hover                   | `--hop-neutral-surface-weak-hover`                   | #e1e3e7                |
| neutral-weak-press                   | `--hop-neutral-surface-weak-press`                   | #cbcdd2                |
| neutral-weakest                      | `--hop-neutral-surface-weakest`                      | #f8f9fa                |
| neutral-weakest-selected             | `--hop-neutral-surface-weakest-selected`             | #eef0f2                |
| neutral-weakest-hover                | `--hop-neutral-surface-weakest-hover`                | #eef0f2                |
| neutral-inverse                      | `--hop-neutral-surface-inverse`                      | #232426                |
| neutral-always-light                 | `--hop-neutral-surface-always-light`                 | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-surface-always-dark`                  | #232426                |
| neutral                              | `--hop-neutral-text`                                 | #313335                |
| neutral-selected                     | `--hop-neutral-text-selected`                        | #ffffff                |
| neutral-disabled                     | `--hop-neutral-text-disabled`                        | #96989d                |
| neutral-hover                        | `--hop-neutral-text-hover`                           | #484a4d                |
| neutral-press                        | `--hop-neutral-text-press`                           | #232426                |
| neutral-strong                       | `--hop-neutral-text-strong`                          | #ffffff                |
| neutral-weak                         | `--hop-neutral-text-weak`                            | #6c6e72                |
| neutral-weak-hover                   | `--hop-neutral-text-weak-hover`                      | #5e6064                |
| neutral-weak-press                   | `--hop-neutral-text-weak-press`                      | #484a4d                |
| neutral-weak-selected                | `--hop-neutral-text-weak-selected`                   | #5e6064                |
| neutral-weakest                      | `--hop-neutral-text-weakest`                         | #96989d                |
| neutral-inverse                      | `--hop-neutral-text-inverse`                         | #232426                |
| neutral-always-light                 | `--hop-neutral-text-always-light`                    | #ffffff                |
| neutral-always-dark                  | `--hop-neutral-text-always-dark`                     | #232426                |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Primary

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| primary-active          | `--hop-primary-border-active`           | #6c8ffd |
| primary-active          | `--hop-primary-icon-active`             | #2040c7 |
| primary-active          | `--hop-primary-surface-active`          | #6c8ffd |
| primary-strong-active   | `--hop-primary-surface-strong-active`   | #2040c7 |
| primary-weak-active     | `--hop-primary-surface-weak-active`     | #d6e0ff |
| primary-active          | `--hop-primary-text-active`             | #2040c7 |
| primary                 | `--hop-primary-border`                  | #4767fe |
| primary-selected        | `--hop-primary-border-selected`         | #4767fe |
| primary-focus           | `--hop-primary-border-focus`            | #3b57ff |
| primary-press           | `--hop-primary-border-press`            | #3b57ff |
| primary                 | `--hop-primary-icon`                    | #3b57ff |
| primary-selected        | `--hop-primary-icon-selected`           | #3b57ff |
| primary-disabled        | `--hop-primary-icon-disabled`           | #95b1ff |
| primary-hover           | `--hop-primary-icon-hover`              | #2a43e8 |
| primary-press           | `--hop-primary-icon-press`              | #2040c7 |
| primary-strong          | `--hop-primary-icon-strong`             | #ffffff |
| primary-strong-hover    | `--hop-primary-icon-strong-hover`       | #ffffff |
| primary                 | `--hop-primary-surface`                 | #e6ebff |
| primary-selected        | `--hop-primary-surface-selected`        | #e6ebff |
| primary-disabled        | `--hop-primary-surface-disabled`        | #95b1ff |
| primary-focus           | `--hop-primary-surface-focus`           | #f5f6ff |
| primary-hover           | `--hop-primary-surface-hover`           | #95b1ff |
| primary-press           | `--hop-primary-surface-press`           | #6c8ffd |
| primary-strong          | `--hop-primary-surface-strong`          | #4767fe |
| primary-strong-selected | `--hop-primary-surface-strong-selected` | #e6ebff |
| primary-strong-hover    | `--hop-primary-surface-strong-hover`    | #2a43e8 |
| primary-strong-press    | `--hop-primary-surface-strong-press`    | #2040c7 |
| primary-weak            | `--hop-primary-surface-weak`            | #f5f6ff |
| primary-weak-selected   | `--hop-primary-surface-weak-selected`   | #b9cbff |
| primary-weak-hover      | `--hop-primary-surface-weak-hover`      | #e6ebff |
| primary-weak-press      | `--hop-primary-surface-weak-press`      | #d6e0ff |
| primary                 | `--hop-primary-text`                    | #3b57ff |
| primary-selected        | `--hop-primary-text-selected`           | #3b57ff |
| primary-disabled        | `--hop-primary-text-disabled`           | #95b1ff |
| primary-hover           | `--hop-primary-text-hover`              | #2a43e8 |
| primary-press           | `--hop-primary-text-press`              | #2040c7 |
| primary-strong          | `--hop-primary-text-strong`             | #ffffff |
| primary-strong-hover    | `--hop-primary-text-strong-hover`       | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| primary-active          | `--hop-primary-border-active`           | #6c8ffd |
| primary-active          | `--hop-primary-icon-active`             | #2040c7 |
| primary-active          | `--hop-primary-surface-active`          | #6c8ffd |
| primary-strong-active   | `--hop-primary-surface-strong-active`   | #2040c7 |
| primary-weak-active     | `--hop-primary-surface-weak-active`     | #d6e0ff |
| primary-active          | `--hop-primary-text-active`             | #2040c7 |
| primary                 | `--hop-primary-border`                  | #736ad2 |
| primary-selected        | `--hop-primary-border-selected`         | #736ad2 |
| primary-focus           | `--hop-primary-border-focus`            | #685dc9 |
| primary-press           | `--hop-primary-border-press`            | #685dc9 |
| primary                 | `--hop-primary-icon`                    | #685dc9 |
| primary-selected        | `--hop-primary-icon-selected`           | #685dc9 |
| primary-disabled        | `--hop-primary-icon-disabled`           | #b4abff |
| primary-hover           | `--hop-primary-icon-hover`              | #6057b3 |
| primary-press           | `--hop-primary-icon-press`              | #4d468f |
| primary-strong          | `--hop-primary-icon-strong`             | #ffffff |
| primary-strong-hover    | `--hop-primary-icon-strong-hover`       | #ffffff |
| primary                 | `--hop-primary-surface`                 | #eceaff |
| primary-selected        | `--hop-primary-surface-selected`        | #736ad2 |
| primary-disabled        | `--hop-primary-surface-disabled`        | #b4abff |
| primary-focus           | `--hop-primary-surface-focus`           | #f6f6ff |
| primary-hover           | `--hop-primary-surface-hover`           | #b4abff |
| primary-press           | `--hop-primary-surface-press`           | #8e85ec |
| primary-strong          | `--hop-primary-surface-strong`          | #736ad2 |
| primary-strong-selected | `--hop-primary-surface-strong-selected` | #3b356c |
| primary-strong-hover    | `--hop-primary-surface-strong-hover`    | #6057b3 |
| primary-strong-press    | `--hop-primary-surface-strong-press`    | #4d468f |
| primary-weak            | `--hop-primary-surface-weak`            | #f6f6ff |
| primary-weak-selected   | `--hop-primary-surface-weak-selected`   | #c3bcff |
| primary-weak-hover      | `--hop-primary-surface-weak-hover`      | #eceaff |
| primary-weak-press      | `--hop-primary-surface-weak-press`      | #deddff |
| primary                 | `--hop-primary-text`                    | #685dc9 |
| primary-selected        | `--hop-primary-text-selected`           | #685dc9 |
| primary-disabled        | `--hop-primary-text-disabled`           | #b4abff |
| primary-hover           | `--hop-primary-text-hover`              | #6057b3 |
| primary-press           | `--hop-primary-text-press`              | #4d468f |
| primary-strong          | `--hop-primary-text-strong`             | #ffffff |
| primary-strong-hover    | `--hop-primary-text-strong-hover`       | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Success

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| success              | `--hop-success-border`         | #aad89d |
| success              | `--hop-success-icon`           | #115a52 |
| success-weakest      | `--hop-success-icon-weakest`   | #aad89d |
| success-weak         | `--hop-success-icon-weak`      | #47a584 |
| success              | `--hop-success-surface`        | #f4f9e9 |
| success-strong       | `--hop-success-surface-strong` | #aad89d |
| success-weak         | `--hop-success-surface-weak`   | #e3f3b9 |
| success              | `--hop-success-text`           | #115a52 |
| success-hover        | `--hop-success-text-hover`     | #16433d |
| success-weak         | `--hop-success-text-weak`      | #47a584 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| success              | `--hop-success-border`         | #66ecae |
| success              | `--hop-success-icon`           | #0a6042 |
| success-weakest      | `--hop-success-icon-weakest`   | #66ecae |
| success-weak         | `--hop-success-icon-weak`      | #12cb80 |
| success              | `--hop-success-surface`        | #eafdf3 |
| success-strong       | `--hop-success-surface-strong` | #66ecae |
| success-weak         | `--hop-success-surface-weak`   | #d7faea |
| success              | `--hop-success-text`           | #0a6042 |
| success-hover        | `--hop-success-text-hover`     | #084a34 |
| success-weak         | `--hop-success-text-weak`      | #12cb80 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Warning

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| warning              | `--hop-warning-border`         | #ffbf92 |
| warning              | `--hop-warning-icon`           | #8c3504 |
| warning-weakest      | `--hop-warning-icon-weakest`   | #ffbf92 |
| warning-weak         | `--hop-warning-icon-weak`      | #e57723 |
| warning              | `--hop-warning-surface`        | #fff5e9 |
| warning-strong       | `--hop-warning-surface-strong` | #ffbf92 |
| warning-weak         | `--hop-warning-surface-weak`   | #ffe8d3 |
| warning              | `--hop-warning-text`           | #8c3504 |
| warning-weak         | `--hop-warning-text-weak`      | #e57723 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| warning              | `--hop-warning-border`         | #ffd873 |
| warning              | `--hop-warning-icon`           | #705900 |
| warning-weakest      | `--hop-warning-icon-weakest`   | #ffd873 |
| warning-weak         | `--hop-warning-icon-weak`      | #ffb700 |
| warning              | `--hop-warning-surface`        | #fff6e0 |
| warning-strong       | `--hop-warning-surface-strong` | #ffd873 |
| warning-weak         | `--hop-warning-surface-weak`   | #fff1cc |
| warning              | `--hop-warning-text`           | #705900 |
| warning-weak         | `--hop-warning-text-weak`      | #ffb700 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Danger

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)       | Value   |
| -------------------- | ------------------------------------ | ------- |
| danger-active        | `--hop-danger-border-active`         | #ba2d2d |
| danger-active        | `--hop-danger-icon-active`           | #6c2320 |
| danger-weak-active   | `--hop-danger-icon-weak-active`      | #ba2d2d |
| danger-active        | `--hop-danger-surface-active`        | #ba2d2d |
| danger-weak-active   | `--hop-danger-surface-weak-active`   | #ffbcb7 |
| danger-active        | `--hop-danger-text-active`           | #6c2320 |
| danger-weak-active   | `--hop-danger-text-weak-active`      | #ba2d2d |
| danger               | `--hop-danger-border`                | #ffbcb7 |
| danger-selected      | `--hop-danger-border-selected`       | #df3236 |
| danger-strong        | `--hop-danger-border-strong`         | #fa4d59 |
| danger-press         | `--hop-danger-border-press`          | #fa4d59 |
| danger               | `--hop-danger-icon`                  | #952927 |
| danger-selected      | `--hop-danger-icon-selected`         | #df3236 |
| danger-disabled      | `--hop-danger-icon-disabled`         | #ffbcb7 |
| danger-hover         | `--hop-danger-icon-hover`            | #cb2e31 |
| danger-press         | `--hop-danger-icon-press`            | #6c2320 |
| danger-strong        | `--hop-danger-icon-strong`           | #ffffff |
| danger-strong-hover  | `--hop-danger-icon-strong-hover`     | #ffffff |
| danger-weak          | `--hop-danger-icon-weak`             | #df3236 |
| danger-weak-hover    | `--hop-danger-icon-weak-hover`       | #cb2e31 |
| danger-weak-press    | `--hop-danger-icon-weak-press`       | #ba2d2d |
| danger-weakest       | `--hop-danger-icon-weakest`          | #ffd6d3 |
| danger               | `--hop-danger-surface`               | #fdf6f6 |
| danger-selected      | `--hop-danger-surface-selected`      | #fde6e5 |
| danger-disabled      | `--hop-danger-surface-disabled`      | #ffbcb7 |
| danger-hover         | `--hop-danger-surface-hover`         | #cb2e31 |
| danger-press         | `--hop-danger-surface-press`         | #ba2d2d |
| danger-strong        | `--hop-danger-surface-strong`        | #df3236 |
| danger-strong-hover  | `--hop-danger-surface-strong-hover`  | #cb2e31 |
| danger-weak          | `--hop-danger-surface-weak`          | #fde6e5 |
| danger-weak-hover    | `--hop-danger-surface-weak-hover`    | #ffd6d3 |
| danger-weak-press    | `--hop-danger-surface-weak-press`    | #ffbcb7 |
| danger-weak-selected | `--hop-danger-surface-weak-selected` | #ffbcb7 |
| danger               | `--hop-danger-text`                  | #952927 |
| danger-selected      | `--hop-danger-text-selected`         | #df3236 |
| danger-disabled      | `--hop-danger-text-disabled`         | #ffbcb7 |
| danger-hover         | `--hop-danger-text-hover`            | #cb2e31 |
| danger-press         | `--hop-danger-text-press`            | #6c2320 |
| danger-strong        | `--hop-danger-text-strong`           | #ffffff |
| danger-strong-hover  | `--hop-danger-text-strong-hover`     | #ffffff |
| danger-weak          | `--hop-danger-text-weak`             | #df3236 |
| danger-weak-hover    | `--hop-danger-text-weak-hover`       | #cb2e31 |
| danger-weak-press    | `--hop-danger-text-weak-press`       | #ba2d2d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)       | Value   |
| -------------------- | ------------------------------------ | ------- |
| danger-active        | `--hop-danger-border-active`         | #ba2d2d |
| danger-active        | `--hop-danger-icon-active`           | #6c2320 |
| danger-weak-active   | `--hop-danger-icon-weak-active`      | #ba2d2d |
| danger-active        | `--hop-danger-surface-active`        | #ba2d2d |
| danger-weak-active   | `--hop-danger-surface-weak-active`   | #ffbcb7 |
| danger-active        | `--hop-danger-text-active`           | #6c2320 |
| danger-weak-active   | `--hop-danger-text-weak-active`      | #ba2d2d |
| danger               | `--hop-danger-border`                | #fa9ba9 |
| danger-selected      | `--hop-danger-border-selected`       | #de2840 |
| danger-strong        | `--hop-danger-border-strong`         | #f5425d |
| danger-press         | `--hop-danger-border-press`          | #f5425d |
| danger               | `--hop-danger-icon`                  | #711822 |
| danger-selected      | `--hop-danger-icon-selected`         | #de2840 |
| danger-disabled      | `--hop-danger-icon-disabled`         | #fa9ba9 |
| danger-hover         | `--hop-danger-icon-hover`            | #ba1f34 |
| danger-press         | `--hop-danger-icon-press`            | #50161c |
| danger-strong        | `--hop-danger-icon-strong`           | #ffffff |
| danger-strong-hover  | `--hop-danger-icon-strong-hover`     | #ffffff |
| danger-weak          | `--hop-danger-icon-weak`             | #de2840 |
| danger-weak-hover    | `--hop-danger-icon-weak-hover`       | #ba1f34 |
| danger-weak-press    | `--hop-danger-icon-weak-press`       | #951b2a |
| danger-weakest       | `--hop-danger-icon-weakest`          | #fcbcc5 |
| danger               | `--hop-danger-surface`               | #feeaec |
| danger-selected      | `--hop-danger-surface-selected`      | #fdd3d8 |
| danger-disabled      | `--hop-danger-surface-disabled`      | #fa9ba9 |
| danger-hover         | `--hop-danger-surface-hover`         | #ba1f34 |
| danger-press         | `--hop-danger-surface-press`         | #951b2a |
| danger-strong        | `--hop-danger-surface-strong`        | #de2840 |
| danger-strong-hover  | `--hop-danger-surface-strong-hover`  | #ba1f34 |
| danger-weak          | `--hop-danger-surface-weak`          | #fdd3d8 |
| danger-weak-hover    | `--hop-danger-surface-weak-hover`    | #fcbcc5 |
| danger-weak-press    | `--hop-danger-surface-weak-press`    | #fa9ba9 |
| danger-weak-selected | `--hop-danger-surface-weak-selected` | #fa9ba9 |
| danger               | `--hop-danger-text`                  | #711822 |
| danger-selected      | `--hop-danger-text-selected`         | #de2840 |
| danger-disabled      | `--hop-danger-text-disabled`         | #fa9ba9 |
| danger-hover         | `--hop-danger-text-hover`            | #ba1f34 |
| danger-press         | `--hop-danger-text-press`            | #50161c |
| danger-strong        | `--hop-danger-text-strong`           | #ffffff |
| danger-strong-hover  | `--hop-danger-text-strong-hover`     | #ffffff |
| danger-weak          | `--hop-danger-text-weak`             | #de2840 |
| danger-weak-hover    | `--hop-danger-text-weak-hover`       | #ba1f34 |
| danger-weak-press    | `--hop-danger-text-weak-press`       | #951b2a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Information

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)     | Value   |
| -------------------- | ---------------------------------- | ------- |
| information          | `--hop-information-border`         | #9fd2f7 |
| information          | `--hop-information-icon`           | #0a538b |
| information-weakest  | `--hop-information-icon-weakest`   | #bae6ff |
| information-weak     | `--hop-information-icon-weak`      | #5d9acd |
| information          | `--hop-information-surface`        | #f0f8ff |
| information-strong   | `--hop-information-surface-strong` | #9fd2f7 |
| information-weak     | `--hop-information-surface-weak`   | #d9efff |
| information          | `--hop-information-text`           | #003d70 |
| information-weak     | `--hop-information-text-weak`      | #5d9acd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)     | Value   |
| -------------------- | ---------------------------------- | ------- |
| information          | `--hop-information-border`         | #9fd2f7 |
| information          | `--hop-information-icon`           | #0a538b |
| information-weakest  | `--hop-information-icon-weakest`   | #bae6ff |
| information-weak     | `--hop-information-icon-weak`      | #5d9acd |
| information          | `--hop-information-surface`        | #f0f8ff |
| information-strong   | `--hop-information-surface-strong` | #9fd2f7 |
| information-weak     | `--hop-information-surface-weak`   | #d9efff |
| information          | `--hop-information-text`           | #003d70 |
| information-weak     | `--hop-information-text-weak`      | #5d9acd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Upsell

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)     | Value   |
| -------------------- | ---------------------------------- | ------- |
| upsell-active        | `--hop-upsell-border-active`       | #e2a934 |
| upsell-active        | `--hop-upsell-icon-active`         | #2f250d |
| upsell-weak-active   | `--hop-upsell-icon-weak-active`    | #7e5e0a |
| upsell-active        | `--hop-upsell-surface-active`      | #e2a934 |
| upsell-weak-active   | `--hop-upsell-surface-weak-active` | #f7e694 |
| upsell-active        | `--hop-upsell-text-active`         | #2f250d |
| upsell-weak-active   | `--hop-upsell-text-weak-active`    | #7e5e0a |
| upsell               | `--hop-upsell-border`              | #eac96d |
| upsell-selected      | `--hop-upsell-border-selected`     | #996f08 |
| upsell-disabled      | `--hop-upsell-border-disabled`     | #f7e694 |
| upsell-press         | `--hop-upsell-border-press`        | #c28b12 |
| upsell               | `--hop-upsell-icon`                | #654c0d |
| upsell-selected      | `--hop-upsell-icon-selected`       | #996f08 |
| upsell-hover         | `--hop-upsell-icon-hover`          | #4b390f |
| upsell-press         | `--hop-upsell-icon-press`          | #2f250d |
| upsell-weakest       | `--hop-upsell-icon-weakest`        | #f7e694 |
| upsell-weak          | `--hop-upsell-icon-weak`           | #c28b12 |
| upsell-weak-hover    | `--hop-upsell-icon-weak-hover`     | #8b6609 |
| upsell-weak-press    | `--hop-upsell-icon-weak-press`     | #7e5e0a |
| upsell               | `--hop-upsell-surface`             | #fff8d6 |
| upsell-selected      | `--hop-upsell-surface-selected`    | #fff2b8 |
| upsell-disabled      | `--hop-upsell-surface-disabled`    | #fff8d6 |
| upsell-hover         | `--hop-upsell-surface-hover`       | #fff2b8 |
| upsell-press         | `--hop-upsell-surface-press`       | #f7e694 |
| upsell-weak          | `--hop-upsell-surface-weak`        | #f7e694 |
| upsell-weak-hover    | `--hop-upsell-surface-weak-hover`  | #eac96d |
| upsell-weak-press    | `--hop-upsell-surface-weak-press`  | #e2a934 |
| upsell               | `--hop-upsell-text`                | #654c0d |
| upsell-selected      | `--hop-upsell-text-selected`       | #996f08 |
| upsell-disabled      | `--hop-upsell-text-disabled`       | #996f08 |
| upsell-hover         | `--hop-upsell-text-hover`          | #4b390f |
| upsell-press         | `--hop-upsell-text-press`          | #2f250d |
| upsell-weak          | `--hop-upsell-text-weak`           | #c28b12 |
| upsell-weak-hover    | `--hop-upsell-text-weak-hover`     | #8b6609 |
| upsell-weak-press    | `--hop-upsell-text-weak-press`     | #7e5e0a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name)     | Value   |
| -------------------- | ---------------------------------- | ------- |
| upsell-active        | `--hop-upsell-border-active`       | #e2a934 |
| upsell-active        | `--hop-upsell-icon-active`         | #2f250d |
| upsell-weak-active   | `--hop-upsell-icon-weak-active`    | #7e5e0a |
| upsell-active        | `--hop-upsell-surface-active`      | #e2a934 |
| upsell-weak-active   | `--hop-upsell-surface-weak-active` | #f7e694 |
| upsell-active        | `--hop-upsell-text-active`         | #2f250d |
| upsell-weak-active   | `--hop-upsell-text-weak-active`    | #7e5e0a |
| upsell               | `--hop-upsell-border`              | #a3df00 |
| upsell-selected      | `--hop-upsell-border-selected`     | #5f8100 |
| upsell-disabled      | `--hop-upsell-border-disabled`     | #b3f400 |
| upsell-press         | `--hop-upsell-border-press`        | #77a300 |
| upsell               | `--hop-upsell-icon`                | #415800 |
| upsell-selected      | `--hop-upsell-icon-selected`       | #4f6c00 |
| upsell-hover         | `--hop-upsell-icon-hover`          | #304200 |
| upsell-press         | `--hop-upsell-icon-press`          | #1f2b00 |
| upsell-weakest       | `--hop-upsell-icon-weakest`        | #b3f400 |
| upsell-weak          | `--hop-upsell-icon-weak`           | #77a300 |
| upsell-weak-hover    | `--hop-upsell-icon-weak-hover`     | #577600 |
| upsell-weak-press    | `--hop-upsell-icon-weak-press`     | #4f6c00 |
| upsell               | `--hop-upsell-surface`             | #edffbc |
| upsell-selected      | `--hop-upsell-surface-selected`    | #ccff42 |
| upsell-disabled      | `--hop-upsell-surface-disabled`    | #edffbc |
| upsell-hover         | `--hop-upsell-surface-hover`       | #ccff42 |
| upsell-press         | `--hop-upsell-surface-press`       | #b3f400 |
| upsell-weak          | `--hop-upsell-surface-weak`        | #b3f400 |
| upsell-weak-hover    | `--hop-upsell-surface-weak-hover`  | #a3df00 |
| upsell-weak-press    | `--hop-upsell-surface-weak-press`  | #8fc300 |
| upsell               | `--hop-upsell-text`                | #415800 |
| upsell-selected      | `--hop-upsell-text-selected`       | #4f6c00 |
| upsell-disabled      | `--hop-upsell-text-disabled`       | #5f8100 |
| upsell-hover         | `--hop-upsell-text-hover`          | #304200 |
| upsell-press         | `--hop-upsell-text-press`          | #1f2b00 |
| upsell-weak          | `--hop-upsell-text-weak`           | #77a300 |
| upsell-weak-hover    | `--hop-upsell-text-weak-hover`     | #577600 |
| upsell-weak-press    | `--hop-upsell-text-weak-press`     | #4f6c00 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Decorative

###### Option 1

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option1            | `--hop-decorative-option1-border`             | #b9cbff |
| decorative-option1            | `--hop-decorative-option1-icon`               | #152450 |
| decorative-option1            | `--hop-decorative-option1-surface`            | #b9cbff |
| decorative-option1-hover      | `--hop-decorative-option1-surface-hover`      | #95b1ff |
| decorative-option1-strong     | `--hop-decorative-option1-surface-strong`     | #95b1ff |
| decorative-option1-weak       | `--hop-decorative-option1-surface-weak`       | #e6ebff |
| decorative-option1-weak-hover | `--hop-decorative-option1-surface-weak-hover` | #d6e0ff |
| decorative-option1-weakest    | `--hop-decorative-option1-surface-weakest`    | #f5f6ff |
| decorative-option1            | `--hop-decorative-option1-text`               | #152450 |
| decorative-option1-weak       | `--hop-decorative-option1-text-weak`          | #6c8ffd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option1            | `--hop-decorative-option1-border`             | #b9cbff |
| decorative-option1            | `--hop-decorative-option1-icon`               | #152450 |
| decorative-option1            | `--hop-decorative-option1-surface`            | #b9cbff |
| decorative-option1-hover      | `--hop-decorative-option1-surface-hover`      | #95b1ff |
| decorative-option1-strong     | `--hop-decorative-option1-surface-strong`     | #95b1ff |
| decorative-option1-weak       | `--hop-decorative-option1-surface-weak`       | #e6ebff |
| decorative-option1-weak-hover | `--hop-decorative-option1-surface-weak-hover` | #d6e0ff |
| decorative-option1-weakest    | `--hop-decorative-option1-surface-weakest`    | #f5f6ff |
| decorative-option1            | `--hop-decorative-option1-text`               | #152450 |
| decorative-option1-weak       | `--hop-decorative-option1-text-weak`          | #6c8ffd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 2

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option2            | `--hop-decorative-option2-border`             | #a3d6cb |
| decorative-option2            | `--hop-decorative-option2-icon`               | #002d1c |
| decorative-option2            | `--hop-decorative-option2-surface`            | #bde8e1 |
| decorative-option2-hover      | `--hop-decorative-option2-surface-hover`      | #a3d6cb |
| decorative-option2-strong     | `--hop-decorative-option2-surface-strong`     | #a3d6cb |
| decorative-option2-weak       | `--hop-decorative-option2-surface-weak`       | #cff4ef |
| decorative-option2-weak-hover | `--hop-decorative-option2-surface-weak-hover` | #bde8e1 |
| decorative-option2-weakest    | `--hop-decorative-option2-surface-weakest`    | #ddfdf9 |
| decorative-option2            | `--hop-decorative-option2-text`               | #002d1c |
| decorative-option2-weak       | `--hop-decorative-option2-text-weak`          | #5da18c |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option2            | `--hop-decorative-option2-border`             | #a3d6cb |
| decorative-option2            | `--hop-decorative-option2-icon`               | #002d1c |
| decorative-option2            | `--hop-decorative-option2-surface`            | #bde8e1 |
| decorative-option2-hover      | `--hop-decorative-option2-surface-hover`      | #a3d6cb |
| decorative-option2-strong     | `--hop-decorative-option2-surface-strong`     | #a3d6cb |
| decorative-option2-weak       | `--hop-decorative-option2-surface-weak`       | #cff4ef |
| decorative-option2-weak-hover | `--hop-decorative-option2-surface-weak-hover` | #bde8e1 |
| decorative-option2-weakest    | `--hop-decorative-option2-surface-weakest`    | #ddfdf9 |
| decorative-option2            | `--hop-decorative-option2-text`               | #002d1c |
| decorative-option2-weak       | `--hop-decorative-option2-text-weak`          | #5da18c |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 3

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option3            | `--hop-decorative-option3-border`             | #ffbf92 |
| decorative-option3            | `--hop-decorative-option3-icon`               | #451a02 |
| decorative-option3            | `--hop-decorative-option3-surface`            | #ffbf92 |
| decorative-option3-hover      | `--hop-decorative-option3-surface-hover`      | #ff9b3f |
| decorative-option3-strong     | `--hop-decorative-option3-surface-strong`     | #ff9b3f |
| decorative-option3-weak       | `--hop-decorative-option3-surface-weak`       | #ffe8d3 |
| decorative-option3-weak-hover | `--hop-decorative-option3-surface-weak-hover` | #ffd8be |
| decorative-option3-weakest    | `--hop-decorative-option3-surface-weakest`    | #fff5e9 |
| decorative-option3            | `--hop-decorative-option3-text`               | #451a02 |
| decorative-option3-weak       | `--hop-decorative-option3-text-weak`          | #e57723 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option3            | `--hop-decorative-option3-border`             | #ffbf92 |
| decorative-option3            | `--hop-decorative-option3-icon`               | #451a02 |
| decorative-option3            | `--hop-decorative-option3-surface`            | #ffbf92 |
| decorative-option3-hover      | `--hop-decorative-option3-surface-hover`      | #ff9b3f |
| decorative-option3-strong     | `--hop-decorative-option3-surface-strong`     | #ff9b3f |
| decorative-option3-weak       | `--hop-decorative-option3-surface-weak`       | #ffe8d3 |
| decorative-option3-weak-hover | `--hop-decorative-option3-surface-weak-hover` | #ffd8be |
| decorative-option3-weakest    | `--hop-decorative-option3-surface-weakest`    | #fff5e9 |
| decorative-option3            | `--hop-decorative-option3-text`               | #451a02 |
| decorative-option3-weak       | `--hop-decorative-option3-text-weak`          | #e57723 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 4

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option4            | `--hop-decorative-option4-border`             | #aad89d |
| decorative-option4            | `--hop-decorative-option4-icon`               | #132a27 |
| decorative-option4            | `--hop-decorative-option4-surface`            | #cde8ac |
| decorative-option4-hover      | `--hop-decorative-option4-surface-hover`      | #aad89d |
| decorative-option4-strong     | `--hop-decorative-option4-surface-strong`     | #aad89d |
| decorative-option4-weak       | `--hop-decorative-option4-surface-weak`       | #e3f3b9 |
| decorative-option4-weak-hover | `--hop-decorative-option4-surface-weak-hover` | #cde8ac |
| decorative-option4-weakest    | `--hop-decorative-option4-surface-weakest`    | #f4f9e9 |
| decorative-option4            | `--hop-decorative-option4-text`               | #132a27 |
| decorative-option4-weak       | `--hop-decorative-option4-text-weak`          | #188a71 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option4            | `--hop-decorative-option4-border`             | #aad89d |
| decorative-option4            | `--hop-decorative-option4-icon`               | #132a27 |
| decorative-option4            | `--hop-decorative-option4-surface`            | #cde8ac |
| decorative-option4-hover      | `--hop-decorative-option4-surface-hover`      | #aad89d |
| decorative-option4-strong     | `--hop-decorative-option4-surface-strong`     | #aad89d |
| decorative-option4-weak       | `--hop-decorative-option4-surface-weak`       | #e3f3b9 |
| decorative-option4-weak-hover | `--hop-decorative-option4-surface-weak-hover` | #cde8ac |
| decorative-option4-weakest    | `--hop-decorative-option4-surface-weakest`    | #f4f9e9 |
| decorative-option4            | `--hop-decorative-option4-text`               | #132a27 |
| decorative-option4-weak       | `--hop-decorative-option4-text-weak`          | #188a71 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 5

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option5            | `--hop-decorative-option5-border`             | #9fd2f7 |
| decorative-option5            | `--hop-decorative-option5-icon`               | #00274b |
| decorative-option5            | `--hop-decorative-option5-surface`            | #bae6ff |
| decorative-option5-hover      | `--hop-decorative-option5-surface-hover`      | #9fd2f7 |
| decorative-option5-strong     | `--hop-decorative-option5-surface-strong`     | #9fd2f7 |
| decorative-option5-weak       | `--hop-decorative-option5-surface-weak`       | #d9efff |
| decorative-option5-weak-hover | `--hop-decorative-option5-surface-weak-hover` | #bae6ff |
| decorative-option5-weakest    | `--hop-decorative-option5-surface-weakest`    | #f0f8ff |
| decorative-option5            | `--hop-decorative-option5-text`               | #00274b |
| decorative-option5-weak       | `--hop-decorative-option5-text-weak`          | #5d9acd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option5            | `--hop-decorative-option5-border`             | #9fd2f7 |
| decorative-option5            | `--hop-decorative-option5-icon`               | #00274b |
| decorative-option5            | `--hop-decorative-option5-surface`            | #bae6ff |
| decorative-option5-hover      | `--hop-decorative-option5-surface-hover`      | #9fd2f7 |
| decorative-option5-strong     | `--hop-decorative-option5-surface-strong`     | #9fd2f7 |
| decorative-option5-weak       | `--hop-decorative-option5-surface-weak`       | #d9efff |
| decorative-option5-weak-hover | `--hop-decorative-option5-surface-weak-hover` | #bae6ff |
| decorative-option5-weakest    | `--hop-decorative-option5-surface-weakest`    | #f0f8ff |
| decorative-option5            | `--hop-decorative-option5-text`               | #00274b |
| decorative-option5-weak       | `--hop-decorative-option5-text-weak`          | #5d9acd |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 6

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option6            | `--hop-decorative-option6-border`             | #eac96d |
| decorative-option6            | `--hop-decorative-option6-icon`               | #2f250d |
| decorative-option6            | `--hop-decorative-option6-surface`            | #f7e694 |
| decorative-option6-hover      | `--hop-decorative-option6-surface-hover`      | #eac96d |
| decorative-option6-strong     | `--hop-decorative-option6-surface-strong`     | #eac96d |
| decorative-option6-weak       | `--hop-decorative-option6-surface-weak`       | #fff2b8 |
| decorative-option6-weak-hover | `--hop-decorative-option6-surface-weak-hover` | #f7e694 |
| decorative-option6-weakest    | `--hop-decorative-option6-surface-weakest`    | #fff8d6 |
| decorative-option6            | `--hop-decorative-option6-text`               | #2f250d |
| decorative-option6-weak       | `--hop-decorative-option6-text-weak`          | #e2a934 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option6            | `--hop-decorative-option6-border`             | #eac96d |
| decorative-option6            | `--hop-decorative-option6-icon`               | #2f250d |
| decorative-option6            | `--hop-decorative-option6-surface`            | #f7e694 |
| decorative-option6-hover      | `--hop-decorative-option6-surface-hover`      | #eac96d |
| decorative-option6-strong     | `--hop-decorative-option6-surface-strong`     | #eac96d |
| decorative-option6-weak       | `--hop-decorative-option6-surface-weak`       | #fff2b8 |
| decorative-option6-weak-hover | `--hop-decorative-option6-surface-weak-hover` | #f7e694 |
| decorative-option6-weakest    | `--hop-decorative-option6-surface-weakest`    | #fff8d6 |
| decorative-option6            | `--hop-decorative-option6-text`               | #2f250d |
| decorative-option6-weak       | `--hop-decorative-option6-text-weak`          | #e2a934 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 7

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option7            | `--hop-decorative-option7-border`             | #d4cbc0 |
| decorative-option7            | `--hop-decorative-option7-icon`               | #2a2620 |
| decorative-option7            | `--hop-decorative-option7-surface`            | #e5ded6 |
| decorative-option7-hover      | `--hop-decorative-option7-surface-hover`      | #d4cbc0 |
| decorative-option7-strong     | `--hop-decorative-option7-surface-strong`     | #d4cbc0 |
| decorative-option7-weak       | `--hop-decorative-option7-surface-weak`       | #f0eae3 |
| decorative-option7-weak-hover | `--hop-decorative-option7-surface-weak-hover` | #e5ded6 |
| decorative-option7-weakest    | `--hop-decorative-option7-surface-weakest`    | #fef6ef |
| decorative-option7            | `--hop-decorative-option7-text`               | #2a2620 |
| decorative-option7-weak       | `--hop-decorative-option7-text-weak`          | #776a59 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option7            | `--hop-decorative-option7-border`             | #d4cbc0 |
| decorative-option7            | `--hop-decorative-option7-icon`               | #2a2620 |
| decorative-option7            | `--hop-decorative-option7-surface`            | #e5ded6 |
| decorative-option7-hover      | `--hop-decorative-option7-surface-hover`      | #d4cbc0 |
| decorative-option7-strong     | `--hop-decorative-option7-surface-strong`     | #d4cbc0 |
| decorative-option7-weak       | `--hop-decorative-option7-surface-weak`       | #f0eae3 |
| decorative-option7-weak-hover | `--hop-decorative-option7-surface-weak-hover` | #e5ded6 |
| decorative-option7-weakest    | `--hop-decorative-option7-surface-weakest`    | #fef6ef |
| decorative-option7            | `--hop-decorative-option7-text`               | #2a2620 |
| decorative-option7-weak       | `--hop-decorative-option7-text-weak`          | #776a59 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 8

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option8            | `--hop-decorative-option8-border`             | #ffbcb7 |
| decorative-option8            | `--hop-decorative-option8-icon`               | #431a17 |
| decorative-option8            | `--hop-decorative-option8-surface`            | #ffd6d3 |
| decorative-option8-hover      | `--hop-decorative-option8-surface-hover`      | #ff8e8e |
| decorative-option8-strong     | `--hop-decorative-option8-surface-strong`     | #ffbcb7 |
| decorative-option8-weak       | `--hop-decorative-option8-surface-weak`       | #fde6e5 |
| decorative-option8-weak-hover | `--hop-decorative-option8-surface-weak-hover` | #ffd6d3 |
| decorative-option8-weakest    | `--hop-decorative-option8-surface-weakest`    | #fdf6f6 |
| decorative-option8            | `--hop-decorative-option8-text`               | #431a17 |
| decorative-option8-weak       | `--hop-decorative-option8-text-weak`          | #fa4d59 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option8            | `--hop-decorative-option8-border`             | #ffbcb7 |
| decorative-option8            | `--hop-decorative-option8-icon`               | #431a17 |
| decorative-option8            | `--hop-decorative-option8-surface`            | #ffd6d3 |
| decorative-option8-hover      | `--hop-decorative-option8-surface-hover`      | #ff8e8e |
| decorative-option8-strong     | `--hop-decorative-option8-surface-strong`     | #ffbcb7 |
| decorative-option8-weak       | `--hop-decorative-option8-surface-weak`       | #fde6e5 |
| decorative-option8-weak-hover | `--hop-decorative-option8-surface-weak-hover` | #ffd6d3 |
| decorative-option8-weakest    | `--hop-decorative-option8-surface-weakest`    | #fdf6f6 |
| decorative-option8            | `--hop-decorative-option8-text`               | #431a17 |
| decorative-option8-weak       | `--hop-decorative-option8-text-weak`          | #fa4d59 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 9

**🎨 Workleap theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option9            | `--hop-decorative-option9-border`             | #cbcdd2 |
| decorative-option9            | `--hop-decorative-option9-icon`               | #ffffff |
| decorative-option9            | `--hop-decorative-option9-surface`            | #787a7e |
| decorative-option9-hover      | `--hop-decorative-option9-surface-hover`      | #6c6e72 |
| decorative-option9-strong     | `--hop-decorative-option9-surface-strong`     | #313335 |
| decorative-option9-weak       | `--hop-decorative-option9-surface-weak`       | #96989d |
| decorative-option9-weak-hover | `--hop-decorative-option9-surface-weak-hover` | #787a7e |
| decorative-option9-weakest    | `--hop-decorative-option9-surface-weakest`    | #b3b5ba |
| decorative-option9            | `--hop-decorative-option9-text`               | #ffffff |
| decorative-option9-weak       | `--hop-decorative-option9-text-weak`          | #96989d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value          | Token Name (CSS Variable Name)                | Value   |
| ----------------------------- | --------------------------------------------- | ------- |
| decorative-option9            | `--hop-decorative-option9-border`             | #cbcdd2 |
| decorative-option9            | `--hop-decorative-option9-icon`               | #ffffff |
| decorative-option9            | `--hop-decorative-option9-surface`            | #787a7e |
| decorative-option9-hover      | `--hop-decorative-option9-surface-hover`      | #6c6e72 |
| decorative-option9-strong     | `--hop-decorative-option9-surface-strong`     | #313335 |
| decorative-option9-weak       | `--hop-decorative-option9-surface-weak`       | #96989d |
| decorative-option9-weak-hover | `--hop-decorative-option9-surface-weak-hover` | #787a7e |
| decorative-option9-weakest    | `--hop-decorative-option9-surface-weakest`    | #b3b5ba |
| decorative-option9            | `--hop-decorative-option9-text`               | #ffffff |
| decorative-option9-weak       | `--hop-decorative-option9-text-weak`          | #96989d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Status

###### Neutral

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-neutral          | `--hop-status-neutral-border`           | #313335 |
| status-neutral-disabled | `--hop-status-neutral-border-disabled`  | #eef0f2 |
| status-neutral-hover    | `--hop-status-neutral-border-hover`     | #484a4d |
| status-neutral-press    | `--hop-status-neutral-border-press`     | #232426 |
| status-neutral-selected | `--hop-status-neutral-border-selected`  | #313335 |
| status-neutral          | `--hop-status-neutral-icon`             | #313335 |
| status-neutral-disabled | `--hop-status-neutral-icon-disabled`    | #96989d |
| status-neutral-hover    | `--hop-status-neutral-icon-hover`       | #484a4d |
| status-neutral-press    | `--hop-status-neutral-icon-press`       | #232426 |
| status-neutral-selected | `--hop-status-neutral-icon-selected`    | #ffffff |
| status-neutral          | `--hop-status-neutral-surface`          | #ffffff |
| status-neutral-disabled | `--hop-status-neutral-surface-disabled` | #eef0f2 |
| status-neutral-hover    | `--hop-status-neutral-surface-hover`    | #f8f9fa |
| status-neutral-press    | `--hop-status-neutral-surface-press`    | #eef0f2 |
| status-neutral-selected | `--hop-status-neutral-surface-selected` | #313335 |
| status-neutral-strong   | `--hop-status-neutral-surface-strong`   | #b3b5ba |
| status-neutral          | `--hop-status-neutral-text`             | #313335 |
| status-neutral-disabled | `--hop-status-neutral-text-disabled`    | #96989d |
| status-neutral-hover    | `--hop-status-neutral-text-hover`       | #484a4d |
| status-neutral-press    | `--hop-status-neutral-text-press`       | #232426 |
| status-neutral-selected | `--hop-status-neutral-text-selected`    | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-neutral          | `--hop-status-neutral-border`           | #313335 |
| status-neutral-disabled | `--hop-status-neutral-border-disabled`  | #eef0f2 |
| status-neutral-hover    | `--hop-status-neutral-border-hover`     | #484a4d |
| status-neutral-press    | `--hop-status-neutral-border-press`     | #232426 |
| status-neutral-selected | `--hop-status-neutral-border-selected`  | #313335 |
| status-neutral          | `--hop-status-neutral-icon`             | #313335 |
| status-neutral-disabled | `--hop-status-neutral-icon-disabled`    | #96989d |
| status-neutral-hover    | `--hop-status-neutral-icon-hover`       | #484a4d |
| status-neutral-press    | `--hop-status-neutral-icon-press`       | #232426 |
| status-neutral-selected | `--hop-status-neutral-icon-selected`    | #ffffff |
| status-neutral          | `--hop-status-neutral-surface`          | #ffffff |
| status-neutral-disabled | `--hop-status-neutral-surface-disabled` | #eef0f2 |
| status-neutral-hover    | `--hop-status-neutral-surface-hover`    | #f8f9fa |
| status-neutral-press    | `--hop-status-neutral-surface-press`    | #eef0f2 |
| status-neutral-selected | `--hop-status-neutral-surface-selected` | #313335 |
| status-neutral-strong   | `--hop-status-neutral-surface-strong`   | #b3b5ba |
| status-neutral          | `--hop-status-neutral-text`             | #313335 |
| status-neutral-disabled | `--hop-status-neutral-text-disabled`    | #96989d |
| status-neutral-hover    | `--hop-status-neutral-text-hover`       | #484a4d |
| status-neutral-press    | `--hop-status-neutral-text-press`       | #232426 |
| status-neutral-selected | `--hop-status-neutral-text-selected`    | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Progress

**🎨 Workleap theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-progress          | `--hop-status-progress-border`           | #6c8ffd |
| status-progress-disabled | `--hop-status-progress-border-disabled`  | #e6ebff |
| status-progress-hover    | `--hop-status-progress-border-hover`     | #4767fe |
| status-progress-press    | `--hop-status-progress-border-press`     | #3b57ff |
| status-progress-selected | `--hop-status-progress-border-selected`  | #4767fe |
| status-progress          | `--hop-status-progress-icon`             | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-icon-disabled`    | #95b1ff |
| status-progress-hover    | `--hop-status-progress-icon-hover`       | #2040c7 |
| status-progress-press    | `--hop-status-progress-icon-press`       | #1b3587 |
| status-progress-selected | `--hop-status-progress-icon-selected`    | #3b57ff |
| status-progress          | `--hop-status-progress-surface`          | #e6ebff |
| status-progress-disabled | `--hop-status-progress-surface-disabled` | #f5f6ff |
| status-progress-hover    | `--hop-status-progress-surface-hover`    | #d6e0ff |
| status-progress-press    | `--hop-status-progress-surface-press`    | #b9cbff |
| status-progress-selected | `--hop-status-progress-surface-selected` | #e6ebff |
| status-progress-strong   | `--hop-status-progress-surface-strong`   | #95b1ff |
| status-progress          | `--hop-status-progress-text`             | #2a43e8 |
| status-progress-disabled | `--hop-status-progress-text-disabled`    | #95b1ff |
| status-progress-hover    | `--hop-status-progress-text-hover`       | #2040c7 |
| status-progress-press    | `--hop-status-progress-text-press`       | #1b3587 |
| status-progress-selected | `--hop-status-progress-text-selected`    | #3b57ff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-progress          | `--hop-status-progress-border`           | #6aa3ff |
| status-progress-disabled | `--hop-status-progress-border-disabled`  | #e6f0ff |
| status-progress-hover    | `--hop-status-progress-border-hover`     | #3a82ff |
| status-progress-press    | `--hop-status-progress-border-press`     | #0165fc |
| status-progress-selected | `--hop-status-progress-border-selected`  | #003b99 |
| status-progress          | `--hop-status-progress-icon`             | #004fcc |
| status-progress-disabled | `--hop-status-progress-icon-disabled`    | #99c2ff |
| status-progress-hover    | `--hop-status-progress-icon-hover`       | #003b99 |
| status-progress-press    | `--hop-status-progress-icon-press`       | #002766 |
| status-progress-selected | `--hop-status-progress-icon-selected`    | #003b99 |
| status-progress          | `--hop-status-progress-surface`          | #e6f0ff |
| status-progress-disabled | `--hop-status-progress-surface-disabled` | #f2f7ff |
| status-progress-hover    | `--hop-status-progress-surface-hover`    | #d6e7ff |
| status-progress-press    | `--hop-status-progress-surface-press`    | #c2daff |
| status-progress-selected | `--hop-status-progress-surface-selected` | #e6f0ff |
| status-progress-strong   | `--hop-status-progress-surface-strong`   | #99c2ff |
| status-progress          | `--hop-status-progress-text`             | #004fcc |
| status-progress-disabled | `--hop-status-progress-text-disabled`    | #99c2ff |
| status-progress-hover    | `--hop-status-progress-text-hover`       | #003b99 |
| status-progress-press    | `--hop-status-progress-text-press`       | #002766 |
| status-progress-selected | `--hop-status-progress-text-selected`    | #003b99 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Positive

**🎨 Workleap theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-positive          | `--hop-status-positive-border`           | #47a584 |
| status-positive-disabled | `--hop-status-positive-border-disabled`  | #e3f3b9 |
| status-positive-hover    | `--hop-status-positive-border-hover`     | #188a71 |
| status-positive-press    | `--hop-status-positive-border-press`     | #0c796b |
| status-positive-selected | `--hop-status-positive-border-selected`  | #115a52 |
| status-positive          | `--hop-status-positive-icon`             | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-icon-disabled`    | #7dc291 |
| status-positive-hover    | `--hop-status-positive-icon-hover`       | #115a52 |
| status-positive-press    | `--hop-status-positive-icon-press`       | #16433d |
| status-positive-selected | `--hop-status-positive-icon-selected`    | #115a52 |
| status-positive          | `--hop-status-positive-surface`          | #e3f3b9 |
| status-positive-disabled | `--hop-status-positive-surface-disabled` | #f4f9e9 |
| status-positive-hover    | `--hop-status-positive-surface-hover`    | #cde8ac |
| status-positive-press    | `--hop-status-positive-surface-press`    | #aad89d |
| status-positive-selected | `--hop-status-positive-surface-selected` | #e3f3b9 |
| status-positive-strong   | `--hop-status-positive-surface-strong`   | #7dc291 |
| status-positive          | `--hop-status-positive-text`             | #0a6f64 |
| status-positive-disabled | `--hop-status-positive-text-disabled`    | #7dc291 |
| status-positive-hover    | `--hop-status-positive-text-hover`       | #115a52 |
| status-positive-press    | `--hop-status-positive-text-press`       | #16433d |
| status-positive-selected | `--hop-status-positive-text-selected`    | #115a52 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-positive          | `--hop-status-positive-border`           | #12cb80 |
| status-positive-disabled | `--hop-status-positive-border-disabled`  | #d7faea |
| status-positive-hover    | `--hop-status-positive-border-hover`     | #10a96f |
| status-positive-press    | `--hop-status-positive-border-press`     | #0d8058 |
| status-positive-selected | `--hop-status-positive-border-selected`  | #0a6042 |
| status-positive          | `--hop-status-positive-icon`             | #0b6f4c |
| status-positive-disabled | `--hop-status-positive-icon-disabled`    | #0be57d |
| status-positive-hover    | `--hop-status-positive-icon-hover`       | #0a6042 |
| status-positive-press    | `--hop-status-positive-icon-press`       | #084a34 |
| status-positive-selected | `--hop-status-positive-icon-selected`    | #0a6042 |
| status-positive          | `--hop-status-positive-surface`          | #d7faea |
| status-positive-disabled | `--hop-status-positive-surface-disabled` | #eafdf3 |
| status-positive-hover    | `--hop-status-positive-surface-hover`    | #97f2c8 |
| status-positive-press    | `--hop-status-positive-surface-press`    | #66ecae |
| status-positive-selected | `--hop-status-positive-surface-selected` | #d7faea |
| status-positive-strong   | `--hop-status-positive-surface-strong`   | #0be57d |
| status-positive          | `--hop-status-positive-text`             | #0b6f4c |
| status-positive-disabled | `--hop-status-positive-text-disabled`    | #0be57d |
| status-positive-hover    | `--hop-status-positive-text-hover`       | #0a6042 |
| status-positive-press    | `--hop-status-positive-text-press`       | #084a34 |
| status-positive-selected | `--hop-status-positive-text-selected`    | #0a6042 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Caution

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-caution          | `--hop-status-caution-border`           | #e57723 |
| status-caution-disabled | `--hop-status-caution-border-disabled`  | #ffe8d3 |
| status-caution-hover    | `--hop-status-caution-border-hover`     | #c95109 |
| status-caution-press    | `--hop-status-caution-border-press`     | #ba4705 |
| status-caution-selected | `--hop-status-caution-border-selected`  | #8c3504 |
| status-caution          | `--hop-status-caution-icon`             | #ab4104 |
| status-caution-disabled | `--hop-status-caution-icon-disabled`    | #ff9b3f |
| status-caution-hover    | `--hop-status-caution-icon-hover`       | #8c3504 |
| status-caution-press    | `--hop-status-caution-icon-press`       | #692803 |
| status-caution-selected | `--hop-status-caution-icon-selected`    | #8c3504 |
| status-caution          | `--hop-status-caution-surface`          | #ffe8d3 |
| status-caution-disabled | `--hop-status-caution-surface-disabled` | #fff5e9 |
| status-caution-hover    | `--hop-status-caution-surface-hover`    | #ffd8be |
| status-caution-press    | `--hop-status-caution-surface-press`    | #ffbf92 |
| status-caution-selected | `--hop-status-caution-surface-selected` | #ffe8d3 |
| status-caution-strong   | `--hop-status-caution-surface-strong`   | #ff9b3f |
| status-caution          | `--hop-status-caution-text`             | #ab4104 |
| status-caution-disabled | `--hop-status-caution-text-disabled`    | #ff9b3f |
| status-caution-hover    | `--hop-status-caution-text-hover`       | #8c3504 |
| status-caution-press    | `--hop-status-caution-text-press`       | #692803 |
| status-caution-selected | `--hop-status-caution-text-selected`    | #8c3504 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-caution          | `--hop-status-caution-border`           | #ffb700 |
| status-caution-disabled | `--hop-status-caution-border-disabled`  | #fff1cc |
| status-caution-hover    | `--hop-status-caution-border-hover`     | #cfa000 |
| status-caution-press    | `--hop-status-caution-border-press`     | #a68000 |
| status-caution-selected | `--hop-status-caution-border-selected`  | #705900 |
| status-caution          | `--hop-status-caution-icon`             | #8a6c00 |
| status-caution-disabled | `--hop-status-caution-icon-disabled`    | #ffc94a |
| status-caution-hover    | `--hop-status-caution-icon-hover`       | #705900 |
| status-caution-press    | `--hop-status-caution-icon-press`       | #574500 |
| status-caution-selected | `--hop-status-caution-icon-selected`    | #705900 |
| status-caution          | `--hop-status-caution-surface`          | #fff1cc |
| status-caution-disabled | `--hop-status-caution-surface-disabled` | #fff6e0 |
| status-caution-hover    | `--hop-status-caution-surface-hover`    | #ffe39a |
| status-caution-press    | `--hop-status-caution-surface-press`    | #ffd873 |
| status-caution-selected | `--hop-status-caution-surface-selected` | #fff1cc |
| status-caution-strong   | `--hop-status-caution-surface-strong`   | #ffc94a |
| status-caution          | `--hop-status-caution-text`             | #8a6c00 |
| status-caution-disabled | `--hop-status-caution-text-disabled`    | #ffc94a |
| status-caution-hover    | `--hop-status-caution-text-hover`       | #705900 |
| status-caution-press    | `--hop-status-caution-text-press`       | #574500 |
| status-caution-selected | `--hop-status-caution-text-selected`    | #705900 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Negative

**🎨 Workleap theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-negative          | `--hop-status-negative-border`           | #fa4d59 |
| status-negative-disabled | `--hop-status-negative-border-disabled`  | #fde6e5 |
| status-negative-hover    | `--hop-status-negative-border-hover`     | #df3236 |
| status-negative-press    | `--hop-status-negative-border-press`     | #cb2e31 |
| status-negative-selected | `--hop-status-negative-border-selected`  | #952927 |
| status-negative          | `--hop-status-negative-icon`             | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-icon-disabled`    | #ff8e8e |
| status-negative-hover    | `--hop-status-negative-icon-hover`       | #952927 |
| status-negative-press    | `--hop-status-negative-icon-press`       | #6c2320 |
| status-negative-selected | `--hop-status-negative-icon-selected`    | #952927 |
| status-negative          | `--hop-status-negative-surface`          | #fde6e5 |
| status-negative-disabled | `--hop-status-negative-surface-disabled` | #fdf6f6 |
| status-negative-hover    | `--hop-status-negative-surface-hover`    | #ffd6d3 |
| status-negative-press    | `--hop-status-negative-surface-press`    | #ffbcb7 |
| status-negative-selected | `--hop-status-negative-surface-selected` | #fde6e5 |
| status-negative-strong   | `--hop-status-negative-surface-strong`   | #ff8e8e |
| status-negative          | `--hop-status-negative-text`             | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-text-disabled`    | #ff8e8e |
| status-negative-hover    | `--hop-status-negative-text-hover`       | #952927 |
| status-negative-press    | `--hop-status-negative-text-press`       | #6c2320 |
| status-negative-selected | `--hop-status-negative-text-selected`    | #952927 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-negative          | `--hop-status-negative-border`           | #fa4d59 |
| status-negative-disabled | `--hop-status-negative-border-disabled`  | #fde6e5 |
| status-negative-hover    | `--hop-status-negative-border-hover`     | #df3236 |
| status-negative-press    | `--hop-status-negative-border-press`     | #cb2e31 |
| status-negative-selected | `--hop-status-negative-border-selected`  | #952927 |
| status-negative          | `--hop-status-negative-icon`             | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-icon-disabled`    | #ff8e8e |
| status-negative-hover    | `--hop-status-negative-icon-hover`       | #952927 |
| status-negative-press    | `--hop-status-negative-icon-press`       | #6c2320 |
| status-negative-selected | `--hop-status-negative-icon-selected`    | #952927 |
| status-negative          | `--hop-status-negative-surface`          | #fde6e5 |
| status-negative-disabled | `--hop-status-negative-surface-disabled` | #fdf6f6 |
| status-negative-hover    | `--hop-status-negative-surface-hover`    | #ffd6d3 |
| status-negative-press    | `--hop-status-negative-surface-press`    | #ffbcb7 |
| status-negative-selected | `--hop-status-negative-surface-selected` | #fde6e5 |
| status-negative-strong   | `--hop-status-negative-surface-strong`   | #ff8e8e |
| status-negative          | `--hop-status-negative-text`             | #ba2d2d |
| status-negative-disabled | `--hop-status-negative-text-disabled`    | #ff8e8e |
| status-negative-hover    | `--hop-status-negative-text-hover`       | #952927 |
| status-negative-press    | `--hop-status-negative-text-press`       | #6c2320 |
| status-negative-selected | `--hop-status-negative-text-selected`    | #952927 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Inactive

**🎨 Workleap theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-inactive          | `--hop-status-inactive-border`           | #96989d |
| status-inactive-disabled | `--hop-status-inactive-border-disabled`  | #eef0f2 |
| status-inactive-hover    | `--hop-status-inactive-border-hover`     | #787a7e |
| status-inactive-press    | `--hop-status-inactive-border-press`     | #6c6e72 |
| status-inactive-selected | `--hop-status-inactive-border-selected`  | #484a4d |
| status-inactive          | `--hop-status-inactive-icon`             | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-icon-disabled`    | #b3b5ba |
| status-inactive-hover    | `--hop-status-inactive-icon-hover`       | #484a4d |
| status-inactive-press    | `--hop-status-inactive-icon-press`       | #313335 |
| status-inactive-selected | `--hop-status-inactive-icon-selected`    | #484a4d |
| status-inactive          | `--hop-status-inactive-surface`          | #eef0f2 |
| status-inactive-disabled | `--hop-status-inactive-surface-disabled` | #f8f9fa |
| status-inactive-hover    | `--hop-status-inactive-surface-hover`    | #e1e3e7 |
| status-inactive-press    | `--hop-status-inactive-surface-press`    | #cbcdd2 |
| status-inactive-selected | `--hop-status-inactive-surface-selected` | #eef0f2 |
| status-inactive-strong   | `--hop-status-inactive-surface-strong`   | #cbcdd2 |
| status-inactive          | `--hop-status-inactive-text`             | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-text-disabled`    | #b3b5ba |
| status-inactive-hover    | `--hop-status-inactive-text-hover`       | #484a4d |
| status-inactive-press    | `--hop-status-inactive-text-press`       | #313335 |
| status-inactive-selected | `--hop-status-inactive-text-selected`    | #484a4d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value     | Token Name (CSS Variable Name)           | Value   |
| ------------------------ | ---------------------------------------- | ------- |
| status-inactive          | `--hop-status-inactive-border`           | #96989d |
| status-inactive-disabled | `--hop-status-inactive-border-disabled`  | #eef0f2 |
| status-inactive-hover    | `--hop-status-inactive-border-hover`     | #787a7e |
| status-inactive-press    | `--hop-status-inactive-border-press`     | #6c6e72 |
| status-inactive-selected | `--hop-status-inactive-border-selected`  | #484a4d |
| status-inactive          | `--hop-status-inactive-icon`             | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-icon-disabled`    | #b3b5ba |
| status-inactive-hover    | `--hop-status-inactive-icon-hover`       | #484a4d |
| status-inactive-press    | `--hop-status-inactive-icon-press`       | #313335 |
| status-inactive-selected | `--hop-status-inactive-icon-selected`    | #484a4d |
| status-inactive          | `--hop-status-inactive-surface`          | #eef0f2 |
| status-inactive-disabled | `--hop-status-inactive-surface-disabled` | #f8f9fa |
| status-inactive-hover    | `--hop-status-inactive-surface-hover`    | #e1e3e7 |
| status-inactive-press    | `--hop-status-inactive-surface-press`    | #cbcdd2 |
| status-inactive-selected | `--hop-status-inactive-surface-selected` | #eef0f2 |
| status-inactive-strong   | `--hop-status-inactive-surface-strong`   | #cbcdd2 |
| status-inactive          | `--hop-status-inactive-text`             | #5e6064 |
| status-inactive-disabled | `--hop-status-inactive-text-disabled`    | #b3b5ba |
| status-inactive-hover    | `--hop-status-inactive-text-hover`       | #484a4d |
| status-inactive-press    | `--hop-status-inactive-text-press`       | #313335 |
| status-inactive-selected | `--hop-status-inactive-text-selected`    | #484a4d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 1

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option1          | `--hop-status-option1-border`           | #5d9acd |
| status-option1-disabled | `--hop-status-option1-border-disabled`  | #d9efff |
| status-option1-hover    | `--hop-status-option1-border-hover`     | #3a7bb2 |
| status-option1-press    | `--hop-status-option1-border-press`     | #2e70a8 |
| status-option1-selected | `--hop-status-option1-border-selected`  | #0a538b |
| status-option1          | `--hop-status-option1-icon`             | #23669f |
| status-option1-disabled | `--hop-status-option1-icon-disabled`    | #81b9e4 |
| status-option1-hover    | `--hop-status-option1-icon-hover`       | #0a538b |
| status-option1-press    | `--hop-status-option1-icon-press`       | #003d70 |
| status-option1-selected | `--hop-status-option1-icon-selected`    | #0a538b |
| status-option1          | `--hop-status-option1-surface`          | #d9efff |
| status-option1-disabled | `--hop-status-option1-surface-disabled` | #f0f8ff |
| status-option1-hover    | `--hop-status-option1-surface-hover`    | #bae6ff |
| status-option1-press    | `--hop-status-option1-surface-press`    | #9fd2f7 |
| status-option1-selected | `--hop-status-option1-surface-selected` | #d9efff |
| status-option1-strong   | `--hop-status-option1-surface-strong`   | #81b9e4 |
| status-option1          | `--hop-status-option1-text`             | #23669f |
| status-option1-disabled | `--hop-status-option1-text-disabled`    | #81b9e4 |
| status-option1-hover    | `--hop-status-option1-text-hover`       | #0a538b |
| status-option1-press    | `--hop-status-option1-text-press`       | #003d70 |
| status-option1-selected | `--hop-status-option1-text-selected`    | #0a538b |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option1          | `--hop-status-option1-border`           | #8e85ec |
| status-option1-disabled | `--hop-status-option1-border-disabled`  | #eceaff |
| status-option1-hover    | `--hop-status-option1-border-hover`     | #736ad2 |
| status-option1-press    | `--hop-status-option1-border-press`     | #685dc9 |
| status-option1-selected | `--hop-status-option1-border-selected`  | #4d468f |
| status-option1          | `--hop-status-option1-icon`             | #6057b3 |
| status-option1-disabled | `--hop-status-option1-icon-disabled`    | #b4abff |
| status-option1-hover    | `--hop-status-option1-icon-hover`       | #4d468f |
| status-option1-press    | `--hop-status-option1-icon-press`       | #3b356c |
| status-option1-selected | `--hop-status-option1-icon-selected`    | #4d468f |
| status-option1          | `--hop-status-option1-surface`          | #eceaff |
| status-option1-disabled | `--hop-status-option1-surface-disabled` | #f6f6ff |
| status-option1-hover    | `--hop-status-option1-surface-hover`    | #deddff |
| status-option1-press    | `--hop-status-option1-surface-press`    | #c3bcff |
| status-option1-selected | `--hop-status-option1-surface-selected` | #eceaff |
| status-option1-strong   | `--hop-status-option1-surface-strong`   | #b4abff |
| status-option1          | `--hop-status-option1-text`             | #6057b3 |
| status-option1-disabled | `--hop-status-option1-text-disabled`    | #b4abff |
| status-option1-hover    | `--hop-status-option1-text-hover`       | #4d468f |
| status-option1-press    | `--hop-status-option1-text-press`       | #3b356c |
| status-option1-selected | `--hop-status-option1-text-selected`    | #4d468f |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 2

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option2          | `--hop-status-option2-border`           | #8d91dc |
| status-option2-disabled | `--hop-status-option2-border-disabled`  | #eae9fb |
| status-option2-hover    | `--hop-status-option2-border-hover`     | #6b6ecc |
| status-option2-press    | `--hop-status-option2-border-press`     | #5f61c5 |
| status-option2-selected | `--hop-status-option2-border-selected`  | #433fac |
| status-option2          | `--hop-status-option2-icon`             | #5454be |
| status-option2-disabled | `--hop-status-option2-icon-disabled`    | #aeb3e8 |
| status-option2-hover    | `--hop-status-option2-icon-hover`       | #433fac |
| status-option2-press    | `--hop-status-option2-icon-press`       | #322b8d |
| status-option2-selected | `--hop-status-option2-icon-selected`    | #433fac |
| status-option2          | `--hop-status-option2-surface`          | #eae9fb |
| status-option2-disabled | `--hop-status-option2-surface-disabled` | #f6f5ff |
| status-option2-hover    | `--hop-status-option2-surface-hover`    | #ddddf7 |
| status-option2-press    | `--hop-status-option2-surface-press`    | #c8caf0 |
| status-option2-selected | `--hop-status-option2-surface-selected` | #eae9fb |
| status-option2-strong   | `--hop-status-option2-surface-strong`   | #aeb3e8 |
| status-option2          | `--hop-status-option2-text`             | #5454be |
| status-option2-disabled | `--hop-status-option2-text-disabled`    | #aeb3e8 |
| status-option2-hover    | `--hop-status-option2-text-hover`       | #433fac |
| status-option2-press    | `--hop-status-option2-text-press`       | #322b8d |
| status-option2-selected | `--hop-status-option2-text-selected`    | #433fac |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option2          | `--hop-status-option2-border`           | #ff5b22 |
| status-option2-disabled | `--hop-status-option2-border-disabled`  | #ffe7df |
| status-option2-hover    | `--hop-status-option2-border-hover`     | #dd3900 |
| status-option2-press    | `--hop-status-option2-border-press`     | #ca3400 |
| status-option2-selected | `--hop-status-option2-border-selected`  | #982700 |
| status-option2          | `--hop-status-option2-icon`             | #ba3000 |
| status-option2-disabled | `--hop-status-option2-icon-disabled`    | #ff9874 |
| status-option2-hover    | `--hop-status-option2-icon-hover`       | #982700 |
| status-option2-press    | `--hop-status-option2-icon-press`       | #731e00 |
| status-option2-selected | `--hop-status-option2-icon-selected`    | #982700 |
| status-option2          | `--hop-status-option2-surface`          | #ffe7df |
| status-option2-disabled | `--hop-status-option2-surface-disabled` | #fff5f2 |
| status-option2-hover    | `--hop-status-option2-surface-hover`    | #ffd8ca |
| status-option2-press    | `--hop-status-option2-surface-press`    | #ffbda7 |
| status-option2-selected | `--hop-status-option2-surface-selected` | #ffe7df |
| status-option2-strong   | `--hop-status-option2-surface-strong`   | #ff9874 |
| status-option2          | `--hop-status-option2-text`             | #ba3000 |
| status-option2-disabled | `--hop-status-option2-text-disabled`    | #ff9874 |
| status-option2-hover    | `--hop-status-option2-text-hover`       | #982700 |
| status-option2-press    | `--hop-status-option2-text-press`       | #731e00 |
| status-option2-selected | `--hop-status-option2-text-selected`    | #982700 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 3

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option3          | `--hop-status-option3-border`           | #5da18c |
| status-option3-disabled | `--hop-status-option3-border-disabled`  | #cff4ef |
| status-option3-hover    | `--hop-status-option3-border-hover`     | #38836a |
| status-option3-press    | `--hop-status-option3-border-press`     | #2b795e |
| status-option3-selected | `--hop-status-option3-border-selected`  | #cff4ef |
| status-option3          | `--hop-status-option3-icon`             | #206f54 |
| status-option3-disabled | `--hop-status-option3-icon-disabled`    | #83beaf |
| status-option3-hover    | `--hop-status-option3-icon-hover`       | #055c41 |
| status-option3-press    | `--hop-status-option3-icon-press`       | #00452d |
| status-option3-selected | `--hop-status-option3-icon-selected`    | #055c41 |
| status-option3          | `--hop-status-option3-surface`          | #cff4ef |
| status-option3-disabled | `--hop-status-option3-surface-disabled` | #ddfdf9 |
| status-option3-hover    | `--hop-status-option3-surface-hover`    | #bde8e1 |
| status-option3-press    | `--hop-status-option3-surface-press`    | #a3d6cb |
| status-option3-selected | `--hop-status-option3-surface-selected` | #055c41 |
| status-option3-strong   | `--hop-status-option3-surface-strong`   | #83beaf |
| status-option3          | `--hop-status-option3-text`             | #206f54 |
| status-option3-disabled | `--hop-status-option3-text-disabled`    | #83beaf |
| status-option3-hover    | `--hop-status-option3-text-hover`       | #055c41 |
| status-option3-press    | `--hop-status-option3-text-press`       | #00452d |
| status-option3-selected | `--hop-status-option3-text-selected`    | #055c41 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option3          | `--hop-status-option3-border`           | #47a584 |
| status-option3-disabled | `--hop-status-option3-border-disabled`  | #e3f3b9 |
| status-option3-hover    | `--hop-status-option3-border-hover`     | #188a71 |
| status-option3-press    | `--hop-status-option3-border-press`     | #0c796b |
| status-option3-selected | `--hop-status-option3-border-selected`  | #115a52 |
| status-option3          | `--hop-status-option3-icon`             | #0a6f64 |
| status-option3-disabled | `--hop-status-option3-icon-disabled`    | #7dc291 |
| status-option3-hover    | `--hop-status-option3-icon-hover`       | #115a52 |
| status-option3-press    | `--hop-status-option3-icon-press`       | #16433d |
| status-option3-selected | `--hop-status-option3-icon-selected`    | #115a52 |
| status-option3          | `--hop-status-option3-surface`          | #e3f3b9 |
| status-option3-disabled | `--hop-status-option3-surface-disabled` | #f4f9e9 |
| status-option3-hover    | `--hop-status-option3-surface-hover`    | #cde8ac |
| status-option3-press    | `--hop-status-option3-surface-press`    | #aad89d |
| status-option3-selected | `--hop-status-option3-surface-selected` | #e3f3b9 |
| status-option3-strong   | `--hop-status-option3-surface-strong`   | #7dc291 |
| status-option3          | `--hop-status-option3-text`             | #0a6f64 |
| status-option3-disabled | `--hop-status-option3-text-disabled`    | #7dc291 |
| status-option3-hover    | `--hop-status-option3-text-hover`       | #115a52 |
| status-option3-press    | `--hop-status-option3-text-press`       | #16433d |
| status-option3-selected | `--hop-status-option3-text-selected`    | #115a52 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 4

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option4          | `--hop-status-option4-border`           | #7c9aa3 |
| status-option4-disabled | `--hop-status-option4-border-disabled`  | #e1eef1 |
| status-option4-hover    | `--hop-status-option4-border-hover`     | #5e7b84 |
| status-option4-press    | `--hop-status-option4-border-press`     | #557079 |
| status-option4-selected | `--hop-status-option4-border-selected`  | #40535a |
| status-option4          | `--hop-status-option4-icon`             | #4e6770 |
| status-option4-disabled | `--hop-status-option4-icon-disabled`    | #9cb7be |
| status-option4-hover    | `--hop-status-option4-icon-hover`       | #40535a |
| status-option4-press    | `--hop-status-option4-icon-press`       | #313e43 |
| status-option4-selected | `--hop-status-option4-icon-selected`    | #40535a |
| status-option4          | `--hop-status-option4-surface`          | #e1eef1 |
| status-option4-disabled | `--hop-status-option4-surface-disabled` | #f2f8fa |
| status-option4-hover    | `--hop-status-option4-surface-hover`    | #d2e3e7 |
| status-option4-press    | `--hop-status-option4-surface-press`    | #bad0d5 |
| status-option4-selected | `--hop-status-option4-surface-selected` | #e1eef1 |
| status-option4-strong   | `--hop-status-option4-surface-strong`   | #9cb7be |
| status-option4          | `--hop-status-option4-text`             | #4e6770 |
| status-option4-disabled | `--hop-status-option4-text-disabled`    | #9cb7be |
| status-option4-hover    | `--hop-status-option4-text-hover`       | #40535a |
| status-option4-press    | `--hop-status-option4-text-press`       | #313e43 |
| status-option4-selected | `--hop-status-option4-text-selected`    | #40535a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option4          | `--hop-status-option4-border`           | #7c9aa3 |
| status-option4-disabled | `--hop-status-option4-border-disabled`  | #e1eef1 |
| status-option4-hover    | `--hop-status-option4-border-hover`     | #5e7b84 |
| status-option4-press    | `--hop-status-option4-border-press`     | #557079 |
| status-option4-selected | `--hop-status-option4-border-selected`  | #40535a |
| status-option4          | `--hop-status-option4-icon`             | #4e6770 |
| status-option4-disabled | `--hop-status-option4-icon-disabled`    | #9cb7be |
| status-option4-hover    | `--hop-status-option4-icon-hover`       | #40535a |
| status-option4-press    | `--hop-status-option4-icon-press`       | #313e43 |
| status-option4-selected | `--hop-status-option4-icon-selected`    | #40535a |
| status-option4          | `--hop-status-option4-surface`          | #e1eef1 |
| status-option4-disabled | `--hop-status-option4-surface-disabled` | #f2f8fa |
| status-option4-hover    | `--hop-status-option4-surface-hover`    | #d2e3e7 |
| status-option4-press    | `--hop-status-option4-surface-press`    | #bad0d5 |
| status-option4-selected | `--hop-status-option4-surface-selected` | #e1eef1 |
| status-option4-strong   | `--hop-status-option4-surface-strong`   | #9cb7be |
| status-option4          | `--hop-status-option4-text`             | #4e6770 |
| status-option4-disabled | `--hop-status-option4-text-disabled`    | #9cb7be |
| status-option4-hover    | `--hop-status-option4-text-hover`       | #40535a |
| status-option4-press    | `--hop-status-option4-text-press`       | #313e43 |
| status-option4-selected | `--hop-status-option4-text-selected`    | #40535a |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 5

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option5          | `--hop-status-option5-border`           | #a19382 |
| status-option5-disabled | `--hop-status-option5-border-disabled`  | #f0eae3 |
| status-option5-hover    | `--hop-status-option5-border-hover`     | #837463 |
| status-option5-press    | `--hop-status-option5-border-press`     | #776a59 |
| status-option5-selected | `--hop-status-option5-border-selected`  | #594f41 |
| status-option5          | `--hop-status-option5-icon`             | #6e6151 |
| status-option5-disabled | `--hop-status-option5-icon-disabled`    | #bdb1a3 |
| status-option5-hover    | `--hop-status-option5-icon-hover`       | #594f41 |
| status-option5-press    | `--hop-status-option5-icon-press`       | #433b31 |
| status-option5-selected | `--hop-status-option5-icon-selected`    | #594f41 |
| status-option5          | `--hop-status-option5-surface`          | #f0eae3 |
| status-option5-disabled | `--hop-status-option5-surface-disabled` | #fef6ef |
| status-option5-hover    | `--hop-status-option5-surface-hover`    | #e5ded6 |
| status-option5-press    | `--hop-status-option5-surface-press`    | #d4cbc0 |
| status-option5-selected | `--hop-status-option5-surface-selected` | #f0eae3 |
| status-option5-strong   | `--hop-status-option5-surface-strong`   | #bdb1a3 |
| status-option5          | `--hop-status-option5-text`             | #6e6151 |
| status-option5-disabled | `--hop-status-option5-text-disabled`    | #bdb1a3 |
| status-option5-hover    | `--hop-status-option5-text-hover`       | #594f41 |
| status-option5-press    | `--hop-status-option5-text-press`       | #433b31 |
| status-option5-selected | `--hop-status-option5-text-selected`    | #594f41 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option5          | `--hop-status-option5-border`           | #a19382 |
| status-option5-disabled | `--hop-status-option5-border-disabled`  | #f0eae3 |
| status-option5-hover    | `--hop-status-option5-border-hover`     | #837463 |
| status-option5-press    | `--hop-status-option5-border-press`     | #776a59 |
| status-option5-selected | `--hop-status-option5-border-selected`  | #594f41 |
| status-option5          | `--hop-status-option5-icon`             | #6e6151 |
| status-option5-disabled | `--hop-status-option5-icon-disabled`    | #bdb1a3 |
| status-option5-hover    | `--hop-status-option5-icon-hover`       | #594f41 |
| status-option5-press    | `--hop-status-option5-icon-press`       | #433b31 |
| status-option5-selected | `--hop-status-option5-icon-selected`    | #594f41 |
| status-option5          | `--hop-status-option5-surface`          | #f0eae3 |
| status-option5-disabled | `--hop-status-option5-surface-disabled` | #fef6ef |
| status-option5-hover    | `--hop-status-option5-surface-hover`    | #e5ded6 |
| status-option5-press    | `--hop-status-option5-surface-press`    | #d4cbc0 |
| status-option5-selected | `--hop-status-option5-surface-selected` | #f0eae3 |
| status-option5-strong   | `--hop-status-option5-surface-strong`   | #bdb1a3 |
| status-option5          | `--hop-status-option5-text`             | #6e6151 |
| status-option5-disabled | `--hop-status-option5-text-disabled`    | #bdb1a3 |
| status-option5-hover    | `--hop-status-option5-text-hover`       | #594f41 |
| status-option5-press    | `--hop-status-option5-text-press`       | #433b31 |
| status-option5-selected | `--hop-status-option5-text-selected`    | #594f41 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Option 6

**🎨 Workleap theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option6          | `--hop-status-option6-border`           | #c28b12 |
| status-option6-disabled | `--hop-status-option6-border-disabled`  | #fff2b8 |
| status-option6-hover    | `--hop-status-option6-border-hover`     | #996f08 |
| status-option6-press    | `--hop-status-option6-border-press`     | #8b6609 |
| status-option6-selected | `--hop-status-option6-border-selected`  | #654c0d |
| status-option6          | `--hop-status-option6-icon`             | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-icon-disabled`    | #e2a934 |
| status-option6-hover    | `--hop-status-option6-icon-hover`       | #654c0d |
| status-option6-press    | `--hop-status-option6-icon-press`       | #4b390f |
| status-option6-selected | `--hop-status-option6-icon-selected`    | #654c0d |
| status-option6          | `--hop-status-option6-surface`          | #fff8d6 |
| status-option6-disabled | `--hop-status-option6-surface-disabled` | #fff8d6 |
| status-option6-hover    | `--hop-status-option6-surface-hover`    | #fff2b8 |
| status-option6-press    | `--hop-status-option6-surface-press`    | #eac96d |
| status-option6-selected | `--hop-status-option6-surface-selected` | #fff2b8 |
| status-option6-strong   | `--hop-status-option6-surface-strong`   | #e2a934 |
| status-option6          | `--hop-status-option6-text`             | #7e5e0a |
| status-option6-disabled | `--hop-status-option6-text-disabled`    | #e2a934 |
| status-option6-hover    | `--hop-status-option6-text-hover`       | #654c0d |
| status-option6-press    | `--hop-status-option6-text-press`       | #4b390f |
| status-option6-selected | `--hop-status-option6-text-selected`    | #654c0d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value    | Token Name (CSS Variable Name)          | Value   |
| ----------------------- | --------------------------------------- | ------- |
| status-option6          | `--hop-status-option6-border`           | #77a300 |
| status-option6-disabled | `--hop-status-option6-border-disabled`  | #ccff42 |
| status-option6-hover    | `--hop-status-option6-border-hover`     | #5f8100 |
| status-option6-press    | `--hop-status-option6-border-press`     | #577600 |
| status-option6-selected | `--hop-status-option6-border-selected`  | #415800 |
| status-option6          | `--hop-status-option6-icon`             | #4f6c00 |
| status-option6-disabled | `--hop-status-option6-icon-disabled`    | #8fc300 |
| status-option6-hover    | `--hop-status-option6-icon-hover`       | #415800 |
| status-option6-press    | `--hop-status-option6-icon-press`       | #304200 |
| status-option6-selected | `--hop-status-option6-icon-selected`    | #415800 |
| status-option6          | `--hop-status-option6-surface`          | #ccff42 |
| status-option6-disabled | `--hop-status-option6-surface-disabled` | #edffbc |
| status-option6-hover    | `--hop-status-option6-surface-hover`    | #b3f400 |
| status-option6-press    | `--hop-status-option6-surface-press`    | #a3df00 |
| status-option6-selected | `--hop-status-option6-surface-selected` | #ccff42 |
| status-option6-strong   | `--hop-status-option6-surface-strong`   | #8fc300 |
| status-option6          | `--hop-status-option6-text`             | #4f6c00 |
| status-option6-disabled | `--hop-status-option6-text-disabled`    | #8fc300 |
| status-option6-hover    | `--hop-status-option6-text-hover`       | #415800 |
| status-option6-press    | `--hop-status-option6-text-press`       | #304200 |
| status-option6-selected | `--hop-status-option6-text-selected`    | #415800 |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Data Visualization

**🎨 Workleap theme tokens:**

| Component Prop Value        | Token Name (CSS Variable Name)     | Value   |
| --------------------------- | ---------------------------------- | ------- |
| dataviz\_unavailable        | `--hop-dataviz-unavailable`        | #e1e3e7 |
| dataviz\_unavailable-weak   | `--hop-dataviz-unavailable-weak`   | #eef0f2 |
| dataviz\_unavailable-strong | `--hop-dataviz-unavailable-strong` | #cbcdd2 |
| dataviz\_onlight            | `--hop-dataviz-text-onlight`       | #313335 |
| dataviz\_ondark             | `--hop-dataviz-text-ondark`        | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value        | Token Name (CSS Variable Name)     | Value   |
| --------------------------- | ---------------------------------- | ------- |
| dataviz\_unavailable        | `--hop-dataviz-unavailable`        | #e1e3e7 |
| dataviz\_unavailable-weak   | `--hop-dataviz-unavailable-weak`   | #eef0f2 |
| dataviz\_unavailable-strong | `--hop-dataviz-unavailable-strong` | #cbcdd2 |
| dataviz\_onlight            | `--hop-dataviz-text-onlight`       | #313335 |
| dataviz\_ondark             | `--hop-dataviz-text-ondark`        | #ffffff |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Elevation

Design tokens are design decisions, translated into data. Explore the semantic elevation design tokens.

#### Guidelines

* **Working with elevation** - Elevation allows to bring a sense of materiality and depth to an interface. Use elevation to infer information hierarchy.
* **Don't skip elevation levels** - When applying elevation to visual elements, ensure that each level is used progressively so users can understand the layering of elements on the page. Start with no elevation at the background level and build interfaces by 'piling up' containers and other elements step by step. Avoid jumping from a raised token to a floating token without using the intermediate lifted level.
* **Use elevation purposefully** - Each elevation has a purpose and allow users to see what is closer to them – what requires their attention now. Always respect how elements are stacked on top of each other so that users understand the materiality of the application.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value                                  |
| -------------------- | ------------------------------ | -------------------------------------- |
| none                 | `--hop-elevation-none`         | none                                   |
| raised               | `--hop-elevation-raised`       | 0 1px 6px 0 rgba(60, 60, 60, 0.10)     |
| lifted               | `--hop-elevation-lifted`       | 0 4px 10px 4px rgba(60, 60, 60, 0.08)  |
| floating             | `--hop-elevation-floating`     | 0 10px 18px 8px rgba(60, 60, 60, 0.08) |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value                                  |
| -------------------- | ------------------------------ | -------------------------------------- |
| none                 | `--hop-elevation-none`         | none                                   |
| raised               | `--hop-elevation-raised`       | 0 1px 6px 0 rgba(60, 60, 60, 0.10)     |
| lifted               | `--hop-elevation-lifted`       | 0 4px 10px 4px rgba(60, 60, 60, 0.08)  |
| floating             | `--hop-elevation-floating`     | 0 10px 18px 8px rgba(60, 60, 60, 0.08) |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Shape

Design tokens are design decisions, translated into data. Explore the semantic shape design tokens.

Shape tokens refer to the border radius of a visual element. Border radius is the amount of smoothness applied to the corners of a shape. The higher the value, the smoother the corners are. In addition to t-shirt-sized tokens, there are some utility tokens used for specific elements such as pill and circle.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value       |
| -------------------- | ------------------------------ | ----------- |
| circle               | `--hop-shape-circle`           | 624.9375rem |
| pill                 | `--hop-shape-pill`             | 1.5rem      |
| rounded-lg           | `--hop-shape-rounded-lg`       | 1rem        |
| rounded-md           | `--hop-shape-rounded-md`       | 0.5rem      |
| rounded-sm           | `--hop-shape-rounded-sm`       | 0.25rem     |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value       |
| -------------------- | ------------------------------ | ----------- |
| circle               | `--hop-shape-circle`           | 624.9375rem |
| pill                 | `--hop-shape-pill`             | 1.5rem      |
| rounded-lg           | `--hop-shape-rounded-lg`       | 1rem        |
| rounded-md           | `--hop-shape-rounded-md`       | 0.5rem      |
| rounded-sm           | `--hop-shape-rounded-sm`       | 0.25rem     |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Space

Design tokens are design decisions, translated into data. Explore the semantic space design tokens.

#### Guidelines

* **Working with space** - Space is the distance between two objects in your design. It should be used to complement the purpose of a page by creating hierarchy and making the content clearer and more comprehensible.
* **Be harmonious** - Use space tokens in a way that is consistent with the rest of the experience. Some spaces are used in specific context, follow the proper documentation to apply space at the right places.
* **Create visual groups** - The more visual elements are related, the closer they should be to each other.

#### Designing with space

Every part of a UI should be intentional including the empty space between elements. The amount of space between items creates relationships and hierarchy.

##### Creating relationships

Elements in a design that are near each other are seen as being meaningfully related. As more space is added between elements, their perceived relationship weakens.

Patterns created through spacing can also create relationships. Elements arranged in the same spacing pattern are seen as related pieces that have equal weight.

Space can also be used to denote groups of associated information. This creates content sections on a page without having to use lines or other graphical elements as a divider.

##### Creating hierarchy

Elements that have more spacing around them tend to be perceived as higher in importance than elements that have less space around them. Take this page for instance. The top level headers have more space surrounding them giving them focus and prominence. Then as the headers descend in importance they receive less space, signaling they are subordinate.

Elements that are set close to each other can be easily overlooked. Users may see the grouping but not process each individual item. Therefore, if you have an element or content of high importance on the page, consider giving it extra surrounding space to help it attract focus.

##### White space

Empty space — also known as white space — is important in design. It can be used to break up sections on a page or to help create focus on certain element(s). White space helps with information processing; too much dense information can be disorienting or overwhelming for a user. Sections of a UI are allowed to be dense, but the whole page should not be crowded; there should be white space to let the user's eye rest.

##### Staying consistent with the 8px grid

We use an 8px spacing grid to keep layouts consistent and clear. Most spacing should follow 8px increments: 8, 16, 24, and so on. In tighter layouts, a half step of 4px can be used when needed. This system builds rhythm, reinforces visual relationships, and makes spacing easier to apply across design and code. It helps keep interfaces clean, intentional, and easy to scan.

#### Tokens

##### Padding

Padding refers to the space within a block or container from which elements are separated from the edge. Is is refered as inset in Hopper.

###### Inset

By default, the inset is equal on all four sides.

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| inset-xs             | `--hop-space-inset-xs`         | 0.25rem |
| inset-sm             | `--hop-space-inset-sm`         | 0.5rem  |
| inset-md             | `--hop-space-inset-md`         | 1rem    |
| inset-lg             | `--hop-space-inset-lg`         | 1.5rem  |
| inset-xl             | `--hop-space-inset-xl`         | 2rem    |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| inset-xs             | `--hop-space-inset-xs`         | 0.25rem |
| inset-sm             | `--hop-space-inset-sm`         | 0.5rem  |
| inset-md             | `--hop-space-inset-md`         | 1rem    |
| inset-lg             | `--hop-space-inset-lg`         | 1.5rem  |
| inset-xl             | `--hop-space-inset-xl`         | 2rem    |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Inset Squish

Squish inset reduces the top and bottom padding by one increment relative to the declared inset space.

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value          |
| -------------------- | ------------------------------ | -------------- |
| inset-squish-sm      | `--hop-space-inset-squish-sm`  | 0.25rem 0.5rem |
| inset-squish-md      | `--hop-space-inset-squish-md`  | 0.5rem 1rem    |
| inset-squish-lg      | `--hop-space-inset-squish-lg`  | 1rem 2rem      |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value          |
| -------------------- | ------------------------------ | -------------- |
| inset-squish-sm      | `--hop-space-inset-squish-sm`  | 0.25rem 0.5rem |
| inset-squish-md      | `--hop-space-inset-squish-md`  | 0.5rem 1rem    |
| inset-squish-lg      | `--hop-space-inset-squish-lg`  | 1rem 2rem      |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Inset Stretch

Stretch inset increases the top and bottom padding by one increment relative to the declared inset space.

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value       |
| -------------------- | ------------------------------ | ----------- |
| inset-stretch-sm     | `--hop-space-inset-stretch-sm` | 1rem 0.5rem |
| inset-stretch-md     | `--hop-space-inset-stretch-md` | 1.5rem 1rem |
| inset-stretch-lg     | `--hop-space-inset-stretch-lg` | 3rem 1.5rem |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value       |
| -------------------- | ------------------------------ | ----------- |
| inset-stretch-sm     | `--hop-space-inset-stretch-sm` | 1rem 0.5rem |
| inset-stretch-md     | `--hop-space-inset-stretch-md` | 1.5rem 1rem |
| inset-stretch-lg     | `--hop-space-inset-stretch-lg` | 3rem 1.5rem |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Margin

Margin refers to the traditional meaning of space between elements. It can be used as a margin or gap when in a grid or flex layout. It is refered as stack in Hopper. The last element of a stack should omit this space.

###### Stack

Stack is the space that separates elements or containers arranged vertically within a column.

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| stack-xs             | `--hop-space-stack-xs`         | 0.25rem |
| stack-sm             | `--hop-space-stack-sm`         | 0.5rem  |
| stack-md             | `--hop-space-stack-md`         | 1rem    |
| stack-lg             | `--hop-space-stack-lg`         | 1.5rem  |
| stack-xl             | `--hop-space-stack-xl`         | 2rem    |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| stack-xs             | `--hop-space-stack-xs`         | 0.25rem |
| stack-sm             | `--hop-space-stack-sm`         | 0.5rem  |
| stack-md             | `--hop-space-stack-md`         | 1rem    |
| stack-lg             | `--hop-space-stack-lg`         | 1.5rem  |
| stack-xl             | `--hop-space-stack-xl`         | 2rem    |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

###### Inline

Inline refers to the space that separates inline elements arranged horizontally.

**🎨 Workleap theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| inline-xs            | `--hop-space-inline-xs`        | 0.25rem |
| inline-sm            | `--hop-space-inline-sm`        | 0.5rem  |
| inline-md            | `--hop-space-inline-md`        | 1rem    |
| inline-lg            | `--hop-space-inline-lg`        | 1.5rem  |
| inline-xl            | `--hop-space-inline-xl`        | 2rem    |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

**🎨 Sharegate theme tokens:**

| Component Prop Value | Token Name (CSS Variable Name) | Value   |
| -------------------- | ------------------------------ | ------- |
| inline-xs            | `--hop-space-inline-xs`        | 0.25rem |
| inline-sm            | `--hop-space-inline-sm`        | 0.5rem  |
| inline-md            | `--hop-space-inline-md`        | 1rem    |
| inline-lg            | `--hop-space-inline-lg`        | 1.5rem  |
| inline-xl            | `--hop-space-inline-xl`        | 2rem    |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Typography

Design tokens are design decisions, translated into data. Explore the semantic typography design tokens.

Typography tokens are composite tokens, meaning they are made up of multiple other tokens. This allows us to create a consistent typographic scale across our products.

#### Guidelines

* **Use the bounding box to align with the grid** - The bounding box is the vertical height of the text and is defined by the line height. That value of the line height is critical to make sure text is aligned to the 8px grid of the interface.
* **Use text-crop when a font looks off-centered** - Some fonts, such as *ABC Favorit* requires a little help to look centered. In those cases, apply a [text-crop](/getting-started/guides/text-crop.md) to adjust the line height. These values are available as tokens and are documented below. Hopper Components already make use of these values when necessary.
* **Align text using baseline** - When aligning different text boxes together horizontally, use their baselines as a guide instead of their true center for a more harmonious look.
* **Line length should be between 40 to 60 characters** - Lines of text that are too short make the eyes strain while long lines make it hard to concentrate. As a way to give users the best reading experience, aim for lines of text between 40 to 60 characters, including spaces. If your text doesn't fit this rule, review the content length, font size or even information hierarchy.

#### Tokens

##### Heading

Headings are used to create a hierarchy of content. They are used to help users scan and understand the content on a page.

| Component Prop Name | Component Prop Value      | Token Name                      | Value                                       |
| ------------------- | ------------------------- | ------------------------------- | ------------------------------------------- |
| fontSize            | heading-3xl               | `hop-heading-3xl-font-size`     | 2.25rem                                     |
| fontWeight          | heading-3xl               | `hop-heading-3xl-font-weight`   | 680                                         |
| lineHeight          | heading-3xl               | `hop-heading-3xl-line-height`   | 1.3333333                                   |
| fontFamily          | heading-3xl               | `hop-heading-3xl-font-family`   | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset           | heading-3xl-top-offset    | `hop-heading-3xl-top-offset`    | -0.9375rem                                  |
| bottomOffset        | heading-3xl-bottom-offset | `hop-heading-3xl-bottom-offset` | -0.5625rem                                  |
| fontSize            | heading-2xl               | `hop-heading-2xl-font-size`     | 2rem                                        |
| fontWeight          | heading-2xl               | `hop-heading-2xl-font-weight`   | 580                                         |
| lineHeight          | heading-2xl               | `hop-heading-2xl-line-height`   | 1.25                                        |
| fontFamily          | heading-2xl               | `hop-heading-2xl-font-family`   | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset           | heading-2xl-top-offset    | `hop-heading-2xl-top-offset`    | -0.6667rem                                  |
| bottomOffset        | heading-2xl-bottom-offset | `hop-heading-2xl-bottom-offset` | -0.3334rem                                  |
| fontSize            | heading-xl                | `hop-heading-xl-font-size`      | 1.75rem                                     |
| fontWeight          | heading-xl                | `hop-heading-xl-font-weight`    | 680                                         |
| lineHeight          | heading-xl                | `hop-heading-xl-line-height`    | 1.1428571                                   |
| fontFamily          | heading-xl                | `hop-heading-xl-font-family`    | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset           | heading-xl-top-offset     | `hop-heading-xl-top-offset`     | -0.5rem                                     |
| bottomOffset        | heading-xl-bottom-offset  | `hop-heading-xl-bottom-offset`  | -0.1875rem                                  |
| fontSize            | heading-lg                | `hop-heading-lg-font-size`      | 1.5rem                                      |
| fontWeight          | heading-lg                | `hop-heading-lg-font-weight`    | 680                                         |
| lineHeight          | heading-lg                | `hop-heading-lg-line-height`    | 1.3333333                                   |
| fontFamily          | heading-lg                | `hop-heading-lg-font-family`    | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset           | heading-lg-top-offset     | `hop-heading-lg-top-offset`     | -0.5625rem                                  |
| bottomOffset        | heading-lg-bottom-offset  | `hop-heading-lg-bottom-offset`  | -0.3125rem                                  |
| fontSize            | heading-md                | `hop-heading-md-font-size`      | 1.25rem                                     |
| fontWeight          | heading-md                | `hop-heading-md-font-weight`    | 580                                         |
| lineHeight          | heading-md                | `hop-heading-md-line-height`    | 1.2                                         |
| fontFamily          | heading-md                | `hop-heading-md-font-family`    | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset           | heading-md-top-offset     | `hop-heading-md-top-offset`     | -0.3333rem                                  |
| bottomOffset        | heading-md-bottom-offset  | `hop-heading-md-bottom-offset`  | -0.125rem                                   |
| fontSize            | heading-sm                | `hop-heading-sm-font-size`      | 1.125rem                                    |
| fontWeight          | heading-sm                | `hop-heading-sm-font-weight`    | 580                                         |
| lineHeight          | heading-sm                | `hop-heading-sm-line-height`    | 1.3333333                                   |
| fontFamily          | heading-sm                | `hop-heading-sm-font-family`    | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset           | heading-sm-top-offset     | `hop-heading-sm-top-offset`     | -0.375rem                                   |
| bottomOffset        | heading-sm-bottom-offset  | `hop-heading-sm-bottom-offset`  | -0.1875rem                                  |
| fontSize            | heading-xs                | `hop-heading-xs-font-size`      | 1rem                                        |
| fontWeight          | heading-xs                | `hop-heading-xs-font-weight`    | 410                                         |
| lineHeight          | heading-xs                | `hop-heading-xs-line-height`    | 1.5                                         |
| fontFamily          | heading-xs                | `hop-heading-xs-font-family`    | 'ABC Favorit', Helvetica, Arial, sans-serif |
| topOffset           | heading-xs-top-offset     | `hop-heading-xs-top-offset`     | -0.4166rem                                  |
| bottomOffset        | heading-xs-bottom-offset  | `hop-heading-xs-bottom-offset`  | -0.25rem                                    |

###### Variations

| Token Name                          | Value |
| ----------------------------------- | ----- |
| `hop-heading-xs-medium-font-weight` | 580   |

##### Overline

Used to introduce a headline.

*Adding a text-transform of uppercase is necessary in order to render overline as intended by the Design. A letter spacing of `0.24px` is also necessary.*

| Component Prop Name | Token Name                   | Value                                              |
| ------------------- | ---------------------------- | -------------------------------------------------- |
| fontSize            | `hop-overline-font-size`     | 0.75rem                                            |
| fontWeight          | `hop-overline-font-weight`   | 400                                                |
| lineHeight          | `hop-overline-line-height`   | 1.3333333                                          |
| fontFamily          | `hop-overline-font-family`   | 'ABC Favorit Mono', Consolas, 'SF Mono', monospace |
| topOffset           | `hop-overline-top-offset`    | -0.25rem                                           |
| bottomOffset        | `hop-overline-bottom-offset` | -0.25rem                                           |

##### Body

Body text is used to communicate the main content of a page.

| Component Prop Name | Component Prop Value | Token Name                 | Value                                 |
| ------------------- | -------------------- | -------------------------- | ------------------------------------- |
| fontSize            | body-2xl             | `hop-body-2xl-font-size`   | 2rem                                  |
| fontWeight          | body-2xl             | `hop-body-2xl-font-weight` | 410                                   |
| lineHeight          | body-2xl             | `hop-body-2xl-line-height` | 1.125                                 |
| fontFamily          | body-2xl             | `hop-body-2xl-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize            | body-xl              | `hop-body-xl-font-size`    | 1.75rem                               |
| fontWeight          | body-xl              | `hop-body-xl-font-weight`  | 410                                   |
| lineHeight          | body-xl              | `hop-body-xl-line-height`  | 1.1428571                             |
| fontFamily          | body-xl              | `hop-body-xl-font-family`  | 'Inter', Helvetica, Arial, sans-serif |
| fontSize            | body-lg              | `hop-body-lg-font-size`    | 1.125rem                              |
| fontWeight          | body-lg              | `hop-body-lg-font-weight`  | 410                                   |
| lineHeight          | body-lg              | `hop-body-lg-line-height`  | 1.3333333                             |
| fontFamily          | body-lg              | `hop-body-lg-font-family`  | 'Inter', Helvetica, Arial, sans-serif |
| fontSize            | body-md              | `hop-body-md-font-size`    | 1rem                                  |
| fontWeight          | body-md              | `hop-body-md-font-weight`  | 410                                   |
| lineHeight          | body-md              | `hop-body-md-line-height`  | 1.5                                   |
| fontFamily          | body-md              | `hop-body-md-font-family`  | 'Inter', Helvetica, Arial, sans-serif |
| fontSize            | body-sm              | `hop-body-sm-font-size`    | 0.875rem                              |
| fontWeight          | body-sm              | `hop-body-sm-font-weight`  | 410                                   |
| lineHeight          | body-sm              | `hop-body-sm-line-height`  | 1.4285714                             |
| fontFamily          | body-sm              | `hop-body-sm-font-family`  | 'Inter', Helvetica, Arial, sans-serif |
| fontSize            | body-xs              | `hop-body-xs-font-size`    | 0.75rem                               |
| fontWeight          | body-xs              | `hop-body-xs-font-weight`  | 410                                   |
| lineHeight          | body-xs              | `hop-body-xs-line-height`  | 1.3333333                             |
| fontFamily          | body-xs              | `hop-body-xs-font-family`  | 'Inter', Helvetica, Arial, sans-serif |

###### Variations

| Token Name                         | Value |
| ---------------------------------- | ----- |
| `hop-body-lg-medium-font-weight`   | 505   |
| `hop-body-lg-semibold-font-weight` | 590   |
| `hop-body-lg-bold-font-weight`     | 690   |
| `hop-body-md-medium-font-weight`   | 505   |
| `hop-body-md-semibold-font-weight` | 590   |
| `hop-body-md-bold-font-weight`     | 690   |
| `hop-body-sm-medium-font-weight`   | 505   |
| `hop-body-sm-semibold-font-weight` | 590   |
| `hop-body-sm-bold-font-weight`     | 690   |
| `hop-body-xs-medium-font-weight`   | 505   |
| `hop-body-xs-semibold-font-weight` | 590   |
| `hop-body-xs-bold-font-weight`     | 690   |

##### Accent

Accent text is used to highlight important information on a page.

| Component Prop Name | Component Prop Value | Token Name                  | Value                                       |
| ------------------- | -------------------- | --------------------------- | ------------------------------------------- |
| fontSize            | accent-lg            | `hop-accent-lg-font-size`   | 3rem                                        |
| fontWeight          | accent-lg            | `hop-accent-lg-font-weight` | 580                                         |
| lineHeight          | accent-lg            | `hop-accent-lg-line-height` | 1.125                                       |
| fontFamily          | accent-lg            | `hop-accent-lg-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| fontSize            | accent-md            | `hop-accent-md-font-size`   | 1.75rem                                     |
| fontWeight          | accent-md            | `hop-accent-md-font-weight` | 580                                         |
| lineHeight          | accent-md            | `hop-accent-md-line-height` | 1.1428571                                   |
| fontFamily          | accent-md            | `hop-accent-md-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| fontSize            | accent-sm            | `hop-accent-sm-font-size`   | 1.125rem                                    |
| fontWeight          | accent-sm            | `hop-accent-sm-font-weight` | 580                                         |
| lineHeight          | accent-sm            | `hop-accent-sm-line-height` | 1.3333333                                   |
| fontFamily          | accent-sm            | `hop-accent-sm-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |
| fontSize            | accent-xs            | `hop-accent-xs-font-size`   | 0.875rem                                    |
| fontWeight          | accent-xs            | `hop-accent-xs-font-weight` | 580                                         |
| lineHeight          | accent-xs            | `hop-accent-xs-line-height` | 1.4285714                                   |
| fontFamily          | accent-xs            | `hop-accent-xs-font-family` | 'ABC Favorit', Helvetica, Arial, sans-serif |

##### Caption

Caption text is used for supporting stand-alone labels such as buttons, card titles, or section titles.

| Component Prop Name | Component Prop Value | Token Name                   | Value                                 |
| ------------------- | -------------------- | ---------------------------- | ------------------------------------- |
| fontSize            | caption-xl           | `hop-caption-xl-font-size`   | 1rem                                  |
| fontWeight          | caption-xl           | `hop-caption-xl-font-weight` | 410                                   |
| lineHeight          | caption-xl           | `hop-caption-xl-line-height` | 1.5                                   |
| fontFamily          | caption-xl           | `hop-caption-xl-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize            | caption-lg           | `hop-caption-lg-font-size`   | 0.875rem                              |
| fontWeight          | caption-lg           | `hop-caption-lg-font-weight` | 410                                   |
| lineHeight          | caption-lg           | `hop-caption-lg-line-height` | 1.4285714                             |
| fontFamily          | caption-lg           | `hop-caption-lg-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize            | caption-md           | `hop-caption-md-font-size`   | 0.75rem                               |
| fontWeight          | caption-md           | `hop-caption-md-font-weight` | 410                                   |
| lineHeight          | caption-md           | `hop-caption-md-line-height` | 1.3333333                             |
| fontFamily          | caption-md           | `hop-caption-md-font-family` | 'Inter', Helvetica, Arial, sans-serif |
| fontSize            | caption-sm           | `hop-caption-sm-font-size`   | 0.625rem                              |
| fontWeight          | caption-sm           | `hop-caption-sm-font-weight` | 410                                   |
| lineHeight          | caption-sm           | `hop-caption-sm-line-height` | 1.3333333                             |
| fontFamily          | caption-sm           | `hop-caption-sm-font-family` | 'Inter', Helvetica, Arial, sans-serif |

### Border Radius

Design tokens are design decisions, translated into data. Explore the core border-radius design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value       |
| -------------------- | ------------------------------ | ----------- |
| core\_0              | `--hop-border-radius-0`        | 0           |
| core\_1              | `--hop-border-radius-1`        | 0.25rem     |
| core\_2              | `--hop-border-radius-2`        | 0.5rem      |
| core\_3              | `--hop-border-radius-3`        | 1rem        |
| core\_4              | `--hop-border-radius-4`        | 1.5rem      |
| core\_9999           | `--hop-border-radius-9999`     | 624.9375rem |
| core\_2-5            | `--hop-border-radius-2-5`      | 0.75rem     |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value       |
| -------------------- | ------------------------------ | ----------- |
| core\_0              | `--hop-border-radius-0`        | 0           |
| core\_1              | `--hop-border-radius-1`        | 0.25rem     |
| core\_2              | `--hop-border-radius-2`        | 0.5rem      |
| core\_3              | `--hop-border-radius-3`        | 1rem        |
| core\_4              | `--hop-border-radius-4`        | 1.5rem      |
| core\_9999           | `--hop-border-radius-9999`     | 624.9375rem |
| core\_2-5            | `--hop-border-radius-2-5`      | 0.75rem     |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Color

Design tokens are design decisions, translated into data. Explore the core color design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value      | Token Name (CSS Variable Name) | Value   |
| ------------------------- | ------------------------------ | ------- |
| core\_coastal-25          | `--hop-coastal-25`             | #f0f8ff |
| core\_coastal-50          | `--hop-coastal-50`             | #d9efff |
| core\_coastal-75          | `--hop-coastal-75`             | #bae6ff |
| core\_coastal-100         | `--hop-coastal-100`            | #9fd2f7 |
| core\_coastal-200         | `--hop-coastal-200`            | #81b9e4 |
| core\_coastal-300         | `--hop-coastal-300`            | #5d9acd |
| core\_coastal-400         | `--hop-coastal-400`            | #3a7bb2 |
| core\_coastal-500         | `--hop-coastal-500`            | #2e70a8 |
| core\_coastal-600         | `--hop-coastal-600`            | #23669f |
| core\_coastal-700         | `--hop-coastal-700`            | #0a538b |
| core\_coastal-800         | `--hop-coastal-800`            | #003d70 |
| core\_coastal-900         | `--hop-coastal-900`            | #00274b |
| core\_quetzal-25          | `--hop-quetzal-25`             | #ddfdf9 |
| core\_quetzal-50          | `--hop-quetzal-50`             | #cff4ef |
| core\_quetzal-75          | `--hop-quetzal-75`             | #bde8e1 |
| core\_quetzal-100         | `--hop-quetzal-100`            | #a3d6cb |
| core\_quetzal-200         | `--hop-quetzal-200`            | #83beaf |
| core\_quetzal-300         | `--hop-quetzal-300`            | #5da18c |
| core\_quetzal-400         | `--hop-quetzal-400`            | #38836a |
| core\_quetzal-500         | `--hop-quetzal-500`            | #2b795e |
| core\_quetzal-600         | `--hop-quetzal-600`            | #206f54 |
| core\_quetzal-700         | `--hop-quetzal-700`            | #055c41 |
| core\_quetzal-800         | `--hop-quetzal-800`            | #00452d |
| core\_quetzal-900         | `--hop-quetzal-900`            | #002d1c |
| core\_orchid-bloom-25     | `--hop-orchid-bloom-25`        | #f6f5ff |
| core\_orchid-bloom-50     | `--hop-orchid-bloom-50`        | #eae9fb |
| core\_orchid-bloom-75     | `--hop-orchid-bloom-75`        | #ddddf7 |
| core\_orchid-bloom-100    | `--hop-orchid-bloom-100`       | #c8caf0 |
| core\_orchid-bloom-200    | `--hop-orchid-bloom-200`       | #aeb3e8 |
| core\_orchid-bloom-300    | `--hop-orchid-bloom-300`       | #8d91dc |
| core\_orchid-bloom-400    | `--hop-orchid-bloom-400`       | #6b6ecc |
| core\_orchid-bloom-500    | `--hop-orchid-bloom-500`       | #5f61c5 |
| core\_orchid-bloom-600    | `--hop-orchid-bloom-600`       | #5454be |
| core\_orchid-bloom-700    | `--hop-orchid-bloom-700`       | #433fac |
| core\_orchid-bloom-800    | `--hop-orchid-bloom-800`       | #322b8d |
| core\_orchid-bloom-900    | `--hop-orchid-bloom-900`       | #1e1c5d |
| core\_persimmon-25        | `--hop-persimmon-25`           | #fff5f2 |
| core\_persimmon-50        | `--hop-persimmon-50`           | #ffe7df |
| core\_persimmon-75        | `--hop-persimmon-75`           | #ffd8ca |
| core\_persimmon-100       | `--hop-persimmon-100`          | #ffbda7 |
| core\_persimmon-200       | `--hop-persimmon-200`          | #ff9874 |
| core\_persimmon-300       | `--hop-persimmon-300`          | #ff5b22 |
| core\_persimmon-400       | `--hop-persimmon-400`          | #dd3900 |
| core\_persimmon-500       | `--hop-persimmon-500`          | #ca3400 |
| core\_persimmon-600       | `--hop-persimmon-600`          | #ba3000 |
| core\_persimmon-700       | `--hop-persimmon-700`          | #982700 |
| core\_persimmon-800       | `--hop-persimmon-800`          | #731e00 |
| core\_persimmon-900       | `--hop-persimmon-900`          | #4c1300 |
| core\_sapphire-25         | `--hop-sapphire-25`            | #f5f6ff |
| core\_sapphire-50         | `--hop-sapphire-50`            | #e6ebff |
| core\_sapphire-75         | `--hop-sapphire-75`            | #d6e0ff |
| core\_sapphire-100        | `--hop-sapphire-100`           | #b9cbff |
| core\_sapphire-200        | `--hop-sapphire-200`           | #95b1ff |
| core\_sapphire-300        | `--hop-sapphire-300`           | #6c8ffd |
| core\_sapphire-400        | `--hop-sapphire-400`           | #4767fe |
| core\_sapphire-500        | `--hop-sapphire-500`           | #3b57ff |
| core\_sapphire-600        | `--hop-sapphire-600`           | #2a43e8 |
| core\_sapphire-700        | `--hop-sapphire-700`           | #2040c7 |
| core\_sapphire-800        | `--hop-sapphire-800`           | #1b3587 |
| core\_sapphire-900        | `--hop-sapphire-900`           | #152450 |
| core\_fog-25              | `--hop-fog-25`                 | #f2f8fa |
| core\_fog-50              | `--hop-fog-50`                 | #e1eef1 |
| core\_fog-75              | `--hop-fog-75`                 | #d2e3e7 |
| core\_fog-100             | `--hop-fog-100`                | #bad0d5 |
| core\_fog-200             | `--hop-fog-200`                | #9cb7be |
| core\_fog-300             | `--hop-fog-300`                | #7c9aa3 |
| core\_fog-400             | `--hop-fog-400`                | #5e7b84 |
| core\_fog-500             | `--hop-fog-500`                | #557079 |
| core\_fog-600             | `--hop-fog-600`                | #4e6770 |
| core\_fog-700             | `--hop-fog-700`                | #40535a |
| core\_fog-800             | `--hop-fog-800`                | #313e43 |
| core\_fog-900             | `--hop-fog-900`                | #20282a |
| core\_iris-25             | `--hop-iris-25`                | #f6f6ff |
| core\_iris-50             | `--hop-iris-50`                | #eceaff |
| core\_iris-75             | `--hop-iris-75`                | #deddff |
| core\_iris-100            | `--hop-iris-100`               | #c3bcff |
| core\_iris-200            | `--hop-iris-200`               | #b4abff |
| core\_iris-300            | `--hop-iris-300`               | #8e85ec |
| core\_iris-400            | `--hop-iris-400`               | #736ad2 |
| core\_iris-500            | `--hop-iris-500`               | #685dc9 |
| core\_iris-600            | `--hop-iris-600`               | #6057b3 |
| core\_iris-700            | `--hop-iris-700`               | #4d468f |
| core\_iris-800            | `--hop-iris-800`               | #3b356c |
| core\_iris-900            | `--hop-iris-900`               | #292362 |
| core\_toad-25             | `--hop-toad-25`                | #fef6ef |
| core\_toad-50             | `--hop-toad-50`                | #f0eae3 |
| core\_toad-75             | `--hop-toad-75`                | #e5ded6 |
| core\_toad-100            | `--hop-toad-100`               | #d4cbc0 |
| core\_toad-200            | `--hop-toad-200`               | #bdb1a3 |
| core\_toad-300            | `--hop-toad-300`               | #a19382 |
| core\_toad-400            | `--hop-toad-400`               | #837463 |
| core\_toad-500            | `--hop-toad-500`               | #776a59 |
| core\_toad-600            | `--hop-toad-600`               | #6e6151 |
| core\_toad-700            | `--hop-toad-700`               | #594f41 |
| core\_toad-800            | `--hop-toad-800`               | #433b31 |
| core\_toad-900            | `--hop-toad-900`               | #2a2620 |
| core\_sunken-treasure-25  | `--hop-sunken-treasure-25`     | #fff8d6 |
| core\_sunken-treasure-50  | `--hop-sunken-treasure-50`     | #fff2b8 |
| core\_sunken-treasure-75  | `--hop-sunken-treasure-75`     | #f7e694 |
| core\_sunken-treasure-100 | `--hop-sunken-treasure-100`    | #eac96d |
| core\_sunken-treasure-200 | `--hop-sunken-treasure-200`    | #e2a934 |
| core\_sunken-treasure-300 | `--hop-sunken-treasure-300`    | #c28b12 |
| core\_sunken-treasure-400 | `--hop-sunken-treasure-400`    | #996f08 |
| core\_sunken-treasure-500 | `--hop-sunken-treasure-500`    | #8b6609 |
| core\_sunken-treasure-600 | `--hop-sunken-treasure-600`    | #7e5e0a |
| core\_sunken-treasure-700 | `--hop-sunken-treasure-700`    | #654c0d |
| core\_sunken-treasure-800 | `--hop-sunken-treasure-800`    | #4b390f |
| core\_sunken-treasure-900 | `--hop-sunken-treasure-900`    | #2f250d |
| core\_koi-25              | `--hop-koi-25`                 | #fff5e9 |
| core\_koi-50              | `--hop-koi-50`                 | #ffe8d3 |
| core\_koi-75              | `--hop-koi-75`                 | #ffd8be |
| core\_koi-100             | `--hop-koi-100`                | #ffbf92 |
| core\_koi-200             | `--hop-koi-200`                | #ff9b3f |
| core\_koi-300             | `--hop-koi-300`                | #e57723 |
| core\_koi-400             | `--hop-koi-400`                | #c95109 |
| core\_koi-500             | `--hop-koi-500`                | #ba4705 |
| core\_koi-600             | `--hop-koi-600`                | #ab4104 |
| core\_koi-700             | `--hop-koi-700`                | #8c3504 |
| core\_koi-800             | `--hop-koi-800`                | #692803 |
| core\_koi-900             | `--hop-koi-900`                | #451a02 |
| core\_limeburst-25        | `--hop-limeburst-25`           | #edffbc |
| core\_limeburst-50        | `--hop-limeburst-50`           | #ccff42 |
| core\_limeburst-75        | `--hop-limeburst-75`           | #b3f400 |
| core\_limeburst-100       | `--hop-limeburst-100`          | #a3df00 |
| core\_limeburst-200       | `--hop-limeburst-200`          | #8fc300 |
| core\_limeburst-300       | `--hop-limeburst-300`          | #77a300 |
| core\_limeburst-400       | `--hop-limeburst-400`          | #5f8100 |
| core\_limeburst-500       | `--hop-limeburst-500`          | #577600 |
| core\_limeburst-600       | `--hop-limeburst-600`          | #4f6c00 |
| core\_limeburst-700       | `--hop-limeburst-700`          | #415800 |
| core\_limeburst-800       | `--hop-limeburst-800`          | #304200 |
| core\_limeburst-900       | `--hop-limeburst-900`          | #1f2b00 |
| core\_amanita-25          | `--hop-amanita-25`             | #fdf6f6 |
| core\_amanita-50          | `--hop-amanita-50`             | #fde6e5 |
| core\_amanita-75          | `--hop-amanita-75`             | #ffd6d3 |
| core\_amanita-100         | `--hop-amanita-100`            | #ffbcb7 |
| core\_amanita-200         | `--hop-amanita-200`            | #ff8e8e |
| core\_amanita-300         | `--hop-amanita-300`            | #fa4d59 |
| core\_amanita-400         | `--hop-amanita-400`            | #df3236 |
| core\_amanita-500         | `--hop-amanita-500`            | #cb2e31 |
| core\_amanita-600         | `--hop-amanita-600`            | #ba2d2d |
| core\_amanita-700         | `--hop-amanita-700`            | #952927 |
| core\_amanita-800         | `--hop-amanita-800`            | #6c2320 |
| core\_amanita-900         | `--hop-amanita-900`            | #431a17 |
| core\_moss-25             | `--hop-moss-25`                | #f4f9e9 |
| core\_moss-50             | `--hop-moss-50`                | #e3f3b9 |
| core\_moss-75             | `--hop-moss-75`                | #cde8ac |
| core\_moss-100            | `--hop-moss-100`               | #aad89d |
| core\_moss-200            | `--hop-moss-200`               | #7dc291 |
| core\_moss-300            | `--hop-moss-300`               | #47a584 |
| core\_moss-400            | `--hop-moss-400`               | #188a71 |
| core\_moss-500            | `--hop-moss-500`               | #0c796b |
| core\_moss-600            | `--hop-moss-600`               | #0a6f64 |
| core\_moss-700            | `--hop-moss-700`               | #115a52 |
| core\_moss-800            | `--hop-moss-800`               | #16433d |
| core\_moss-900            | `--hop-moss-900`               | #132a27 |
| core\_abyss               | `--hop-abyss`                  | #1d1d1c |
| core\_rock-20             | `--hop-rock-20`                | #fafbfc |
| core\_rock-25             | `--hop-rock-25`                | #f8f9fa |
| core\_rock-50             | `--hop-rock-50`                | #eef0f2 |
| core\_rock-75             | `--hop-rock-75`                | #e1e3e7 |
| core\_rock-100            | `--hop-rock-100`               | #cbcdd2 |
| core\_rock-200            | `--hop-rock-200`               | #b3b5ba |
| core\_rock-300            | `--hop-rock-300`               | #96989d |
| core\_rock-400            | `--hop-rock-400`               | #787a7e |
| core\_rock-500            | `--hop-rock-500`               | #6c6e72 |
| core\_rock-600            | `--hop-rock-600`               | #5e6064 |
| core\_rock-700            | `--hop-rock-700`               | #484a4d |
| core\_rock-800            | `--hop-rock-800`               | #313335 |
| core\_rock-900            | `--hop-rock-900`               | #232426 |
| core\_samoyed             | `--hop-samoyed`                | #ffffff |
| core\_rose-25             | `--hop-rose-25`                | #feeaec |
| core\_rose-50             | `--hop-rose-50`                | #fdd3d8 |
| core\_rose-75             | `--hop-rose-75`                | #fcbcc5 |
| core\_rose-100            | `--hop-rose-100`               | #fa9ba9 |
| core\_rose-200            | `--hop-rose-200`               | #f76d83 |
| core\_rose-300            | `--hop-rose-300`               | #f5425d |
| core\_rose-400            | `--hop-rose-400`               | #de2840 |
| core\_rose-500            | `--hop-rose-500`               | #ba1f34 |
| core\_rose-600            | `--hop-rose-600`               | #951b2a |
| core\_rose-700            | `--hop-rose-700`               | #711822 |
| core\_rose-800            | `--hop-rose-800`               | #50161c |
| core\_rose-900            | `--hop-rose-900`               | #341417 |
| core\_amber-25            | `--hop-amber-25`               | #fff6e0 |
| core\_amber-50            | `--hop-amber-50`               | #fff1cc |
| core\_amber-75            | `--hop-amber-75`               | #ffe39a |
| core\_amber-100           | `--hop-amber-100`              | #ffd873 |
| core\_amber-200           | `--hop-amber-200`              | #ffc94a |
| core\_amber-300           | `--hop-amber-300`              | #ffb700 |
| core\_amber-400           | `--hop-amber-400`              | #cfa000 |
| core\_amber-500           | `--hop-amber-500`              | #a68000 |
| core\_amber-600           | `--hop-amber-600`              | #8a6c00 |
| core\_amber-700           | `--hop-amber-700`              | #705900 |
| core\_amber-800           | `--hop-amber-800`              | #574500 |
| core\_amber-900           | `--hop-amber-900`              | #3d3200 |
| core\_mint-25             | `--hop-mint-25`                | #eafdf3 |
| core\_mint-50             | `--hop-mint-50`                | #d7faea |
| core\_mint-75             | `--hop-mint-75`                | #97f2c8 |
| core\_mint-100            | `--hop-mint-100`               | #66ecae |
| core\_mint-200            | `--hop-mint-200`               | #0be57d |
| core\_mint-300            | `--hop-mint-300`               | #12cb80 |
| core\_mint-400            | `--hop-mint-400`               | #10a96f |
| core\_mint-500            | `--hop-mint-500`               | #0d8058 |
| core\_mint-600            | `--hop-mint-600`               | #0b6f4c |
| core\_mint-700            | `--hop-mint-700`               | #0a6042 |
| core\_mint-800            | `--hop-mint-800`               | #084a34 |
| core\_mint-900            | `--hop-mint-900`               | #063527 |
| core\_cobalt-25           | `--hop-cobalt-25`              | #f2f7ff |
| core\_cobalt-50           | `--hop-cobalt-50`              | #e6f0ff |
| core\_cobalt-75           | `--hop-cobalt-75`              | #d6e7ff |
| core\_cobalt-100          | `--hop-cobalt-100`             | #c2daff |
| core\_cobalt-200          | `--hop-cobalt-200`             | #99c2ff |
| core\_cobalt-300          | `--hop-cobalt-300`             | #6aa3ff |
| core\_cobalt-400          | `--hop-cobalt-400`             | #3a82ff |
| core\_cobalt-500          | `--hop-cobalt-500`             | #0165fc |
| core\_cobalt-600          | `--hop-cobalt-600`             | #004fcc |
| core\_cobalt-700          | `--hop-cobalt-700`             | #003b99 |
| core\_cobalt-800          | `--hop-cobalt-800`             | #002766 |
| core\_cobalt-900          | `--hop-cobalt-900`             | #001a4d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value      | Token Name (CSS Variable Name) | Value   |
| ------------------------- | ------------------------------ | ------- |
| core\_coastal-25          | `--hop-coastal-25`             | #f0f8ff |
| core\_coastal-50          | `--hop-coastal-50`             | #d9efff |
| core\_coastal-75          | `--hop-coastal-75`             | #bae6ff |
| core\_coastal-100         | `--hop-coastal-100`            | #9fd2f7 |
| core\_coastal-200         | `--hop-coastal-200`            | #81b9e4 |
| core\_coastal-300         | `--hop-coastal-300`            | #5d9acd |
| core\_coastal-400         | `--hop-coastal-400`            | #3a7bb2 |
| core\_coastal-500         | `--hop-coastal-500`            | #2e70a8 |
| core\_coastal-600         | `--hop-coastal-600`            | #23669f |
| core\_coastal-700         | `--hop-coastal-700`            | #0a538b |
| core\_coastal-800         | `--hop-coastal-800`            | #003d70 |
| core\_coastal-900         | `--hop-coastal-900`            | #00274b |
| core\_quetzal-25          | `--hop-quetzal-25`             | #ddfdf9 |
| core\_quetzal-50          | `--hop-quetzal-50`             | #cff4ef |
| core\_quetzal-75          | `--hop-quetzal-75`             | #bde8e1 |
| core\_quetzal-100         | `--hop-quetzal-100`            | #a3d6cb |
| core\_quetzal-200         | `--hop-quetzal-200`            | #83beaf |
| core\_quetzal-300         | `--hop-quetzal-300`            | #5da18c |
| core\_quetzal-400         | `--hop-quetzal-400`            | #38836a |
| core\_quetzal-500         | `--hop-quetzal-500`            | #2b795e |
| core\_quetzal-600         | `--hop-quetzal-600`            | #206f54 |
| core\_quetzal-700         | `--hop-quetzal-700`            | #055c41 |
| core\_quetzal-800         | `--hop-quetzal-800`            | #00452d |
| core\_quetzal-900         | `--hop-quetzal-900`            | #002d1c |
| core\_orchid-bloom-25     | `--hop-orchid-bloom-25`        | #f6f5ff |
| core\_orchid-bloom-50     | `--hop-orchid-bloom-50`        | #eae9fb |
| core\_orchid-bloom-75     | `--hop-orchid-bloom-75`        | #ddddf7 |
| core\_orchid-bloom-100    | `--hop-orchid-bloom-100`       | #c8caf0 |
| core\_orchid-bloom-200    | `--hop-orchid-bloom-200`       | #aeb3e8 |
| core\_orchid-bloom-300    | `--hop-orchid-bloom-300`       | #8d91dc |
| core\_orchid-bloom-400    | `--hop-orchid-bloom-400`       | #6b6ecc |
| core\_orchid-bloom-500    | `--hop-orchid-bloom-500`       | #5f61c5 |
| core\_orchid-bloom-600    | `--hop-orchid-bloom-600`       | #5454be |
| core\_orchid-bloom-700    | `--hop-orchid-bloom-700`       | #433fac |
| core\_orchid-bloom-800    | `--hop-orchid-bloom-800`       | #322b8d |
| core\_orchid-bloom-900    | `--hop-orchid-bloom-900`       | #1e1c5d |
| core\_persimmon-25        | `--hop-persimmon-25`           | #fff5f2 |
| core\_persimmon-50        | `--hop-persimmon-50`           | #ffe7df |
| core\_persimmon-75        | `--hop-persimmon-75`           | #ffd8ca |
| core\_persimmon-100       | `--hop-persimmon-100`          | #ffbda7 |
| core\_persimmon-200       | `--hop-persimmon-200`          | #ff9874 |
| core\_persimmon-300       | `--hop-persimmon-300`          | #ff5b22 |
| core\_persimmon-400       | `--hop-persimmon-400`          | #dd3900 |
| core\_persimmon-500       | `--hop-persimmon-500`          | #ca3400 |
| core\_persimmon-600       | `--hop-persimmon-600`          | #ba3000 |
| core\_persimmon-700       | `--hop-persimmon-700`          | #982700 |
| core\_persimmon-800       | `--hop-persimmon-800`          | #731e00 |
| core\_persimmon-900       | `--hop-persimmon-900`          | #4c1300 |
| core\_sapphire-25         | `--hop-sapphire-25`            | #f5f6ff |
| core\_sapphire-50         | `--hop-sapphire-50`            | #e6ebff |
| core\_sapphire-75         | `--hop-sapphire-75`            | #d6e0ff |
| core\_sapphire-100        | `--hop-sapphire-100`           | #b9cbff |
| core\_sapphire-200        | `--hop-sapphire-200`           | #95b1ff |
| core\_sapphire-300        | `--hop-sapphire-300`           | #6c8ffd |
| core\_sapphire-400        | `--hop-sapphire-400`           | #4767fe |
| core\_sapphire-500        | `--hop-sapphire-500`           | #3b57ff |
| core\_sapphire-600        | `--hop-sapphire-600`           | #2a43e8 |
| core\_sapphire-700        | `--hop-sapphire-700`           | #2040c7 |
| core\_sapphire-800        | `--hop-sapphire-800`           | #1b3587 |
| core\_sapphire-900        | `--hop-sapphire-900`           | #152450 |
| core\_fog-25              | `--hop-fog-25`                 | #f2f8fa |
| core\_fog-50              | `--hop-fog-50`                 | #e1eef1 |
| core\_fog-75              | `--hop-fog-75`                 | #d2e3e7 |
| core\_fog-100             | `--hop-fog-100`                | #bad0d5 |
| core\_fog-200             | `--hop-fog-200`                | #9cb7be |
| core\_fog-300             | `--hop-fog-300`                | #7c9aa3 |
| core\_fog-400             | `--hop-fog-400`                | #5e7b84 |
| core\_fog-500             | `--hop-fog-500`                | #557079 |
| core\_fog-600             | `--hop-fog-600`                | #4e6770 |
| core\_fog-700             | `--hop-fog-700`                | #40535a |
| core\_fog-800             | `--hop-fog-800`                | #313e43 |
| core\_fog-900             | `--hop-fog-900`                | #20282a |
| core\_iris-25             | `--hop-iris-25`                | #f6f6ff |
| core\_iris-50             | `--hop-iris-50`                | #eceaff |
| core\_iris-75             | `--hop-iris-75`                | #deddff |
| core\_iris-100            | `--hop-iris-100`               | #c3bcff |
| core\_iris-200            | `--hop-iris-200`               | #b4abff |
| core\_iris-300            | `--hop-iris-300`               | #8e85ec |
| core\_iris-400            | `--hop-iris-400`               | #736ad2 |
| core\_iris-500            | `--hop-iris-500`               | #685dc9 |
| core\_iris-600            | `--hop-iris-600`               | #6057b3 |
| core\_iris-700            | `--hop-iris-700`               | #4d468f |
| core\_iris-800            | `--hop-iris-800`               | #3b356c |
| core\_iris-900            | `--hop-iris-900`               | #292362 |
| core\_toad-25             | `--hop-toad-25`                | #fef6ef |
| core\_toad-50             | `--hop-toad-50`                | #f0eae3 |
| core\_toad-75             | `--hop-toad-75`                | #e5ded6 |
| core\_toad-100            | `--hop-toad-100`               | #d4cbc0 |
| core\_toad-200            | `--hop-toad-200`               | #bdb1a3 |
| core\_toad-300            | `--hop-toad-300`               | #a19382 |
| core\_toad-400            | `--hop-toad-400`               | #837463 |
| core\_toad-500            | `--hop-toad-500`               | #776a59 |
| core\_toad-600            | `--hop-toad-600`               | #6e6151 |
| core\_toad-700            | `--hop-toad-700`               | #594f41 |
| core\_toad-800            | `--hop-toad-800`               | #433b31 |
| core\_toad-900            | `--hop-toad-900`               | #2a2620 |
| core\_sunken-treasure-25  | `--hop-sunken-treasure-25`     | #fff8d6 |
| core\_sunken-treasure-50  | `--hop-sunken-treasure-50`     | #fff2b8 |
| core\_sunken-treasure-75  | `--hop-sunken-treasure-75`     | #f7e694 |
| core\_sunken-treasure-100 | `--hop-sunken-treasure-100`    | #eac96d |
| core\_sunken-treasure-200 | `--hop-sunken-treasure-200`    | #e2a934 |
| core\_sunken-treasure-300 | `--hop-sunken-treasure-300`    | #c28b12 |
| core\_sunken-treasure-400 | `--hop-sunken-treasure-400`    | #996f08 |
| core\_sunken-treasure-500 | `--hop-sunken-treasure-500`    | #8b6609 |
| core\_sunken-treasure-600 | `--hop-sunken-treasure-600`    | #7e5e0a |
| core\_sunken-treasure-700 | `--hop-sunken-treasure-700`    | #654c0d |
| core\_sunken-treasure-800 | `--hop-sunken-treasure-800`    | #4b390f |
| core\_sunken-treasure-900 | `--hop-sunken-treasure-900`    | #2f250d |
| core\_koi-25              | `--hop-koi-25`                 | #fff5e9 |
| core\_koi-50              | `--hop-koi-50`                 | #ffe8d3 |
| core\_koi-75              | `--hop-koi-75`                 | #ffd8be |
| core\_koi-100             | `--hop-koi-100`                | #ffbf92 |
| core\_koi-200             | `--hop-koi-200`                | #ff9b3f |
| core\_koi-300             | `--hop-koi-300`                | #e57723 |
| core\_koi-400             | `--hop-koi-400`                | #c95109 |
| core\_koi-500             | `--hop-koi-500`                | #ba4705 |
| core\_koi-600             | `--hop-koi-600`                | #ab4104 |
| core\_koi-700             | `--hop-koi-700`                | #8c3504 |
| core\_koi-800             | `--hop-koi-800`                | #692803 |
| core\_koi-900             | `--hop-koi-900`                | #451a02 |
| core\_limeburst-25        | `--hop-limeburst-25`           | #edffbc |
| core\_limeburst-50        | `--hop-limeburst-50`           | #ccff42 |
| core\_limeburst-75        | `--hop-limeburst-75`           | #b3f400 |
| core\_limeburst-100       | `--hop-limeburst-100`          | #a3df00 |
| core\_limeburst-200       | `--hop-limeburst-200`          | #8fc300 |
| core\_limeburst-300       | `--hop-limeburst-300`          | #77a300 |
| core\_limeburst-400       | `--hop-limeburst-400`          | #5f8100 |
| core\_limeburst-500       | `--hop-limeburst-500`          | #577600 |
| core\_limeburst-600       | `--hop-limeburst-600`          | #4f6c00 |
| core\_limeburst-700       | `--hop-limeburst-700`          | #415800 |
| core\_limeburst-800       | `--hop-limeburst-800`          | #304200 |
| core\_limeburst-900       | `--hop-limeburst-900`          | #1f2b00 |
| core\_amanita-25          | `--hop-amanita-25`             | #fdf6f6 |
| core\_amanita-50          | `--hop-amanita-50`             | #fde6e5 |
| core\_amanita-75          | `--hop-amanita-75`             | #ffd6d3 |
| core\_amanita-100         | `--hop-amanita-100`            | #ffbcb7 |
| core\_amanita-200         | `--hop-amanita-200`            | #ff8e8e |
| core\_amanita-300         | `--hop-amanita-300`            | #fa4d59 |
| core\_amanita-400         | `--hop-amanita-400`            | #df3236 |
| core\_amanita-500         | `--hop-amanita-500`            | #cb2e31 |
| core\_amanita-600         | `--hop-amanita-600`            | #ba2d2d |
| core\_amanita-700         | `--hop-amanita-700`            | #952927 |
| core\_amanita-800         | `--hop-amanita-800`            | #6c2320 |
| core\_amanita-900         | `--hop-amanita-900`            | #431a17 |
| core\_moss-25             | `--hop-moss-25`                | #f4f9e9 |
| core\_moss-50             | `--hop-moss-50`                | #e3f3b9 |
| core\_moss-75             | `--hop-moss-75`                | #cde8ac |
| core\_moss-100            | `--hop-moss-100`               | #aad89d |
| core\_moss-200            | `--hop-moss-200`               | #7dc291 |
| core\_moss-300            | `--hop-moss-300`               | #47a584 |
| core\_moss-400            | `--hop-moss-400`               | #188a71 |
| core\_moss-500            | `--hop-moss-500`               | #0c796b |
| core\_moss-600            | `--hop-moss-600`               | #0a6f64 |
| core\_moss-700            | `--hop-moss-700`               | #115a52 |
| core\_moss-800            | `--hop-moss-800`               | #16433d |
| core\_moss-900            | `--hop-moss-900`               | #132a27 |
| core\_abyss               | `--hop-abyss`                  | #1d1d1c |
| core\_rock-20             | `--hop-rock-20`                | #fafbfc |
| core\_rock-25             | `--hop-rock-25`                | #f8f9fa |
| core\_rock-50             | `--hop-rock-50`                | #eef0f2 |
| core\_rock-75             | `--hop-rock-75`                | #e1e3e7 |
| core\_rock-100            | `--hop-rock-100`               | #cbcdd2 |
| core\_rock-200            | `--hop-rock-200`               | #b3b5ba |
| core\_rock-300            | `--hop-rock-300`               | #96989d |
| core\_rock-400            | `--hop-rock-400`               | #787a7e |
| core\_rock-500            | `--hop-rock-500`               | #6c6e72 |
| core\_rock-600            | `--hop-rock-600`               | #5e6064 |
| core\_rock-700            | `--hop-rock-700`               | #484a4d |
| core\_rock-800            | `--hop-rock-800`               | #313335 |
| core\_rock-900            | `--hop-rock-900`               | #232426 |
| core\_samoyed             | `--hop-samoyed`                | #ffffff |
| core\_rose-25             | `--hop-rose-25`                | #feeaec |
| core\_rose-50             | `--hop-rose-50`                | #fdd3d8 |
| core\_rose-75             | `--hop-rose-75`                | #fcbcc5 |
| core\_rose-100            | `--hop-rose-100`               | #fa9ba9 |
| core\_rose-200            | `--hop-rose-200`               | #f76d83 |
| core\_rose-300            | `--hop-rose-300`               | #f5425d |
| core\_rose-400            | `--hop-rose-400`               | #de2840 |
| core\_rose-500            | `--hop-rose-500`               | #ba1f34 |
| core\_rose-600            | `--hop-rose-600`               | #951b2a |
| core\_rose-700            | `--hop-rose-700`               | #711822 |
| core\_rose-800            | `--hop-rose-800`               | #50161c |
| core\_rose-900            | `--hop-rose-900`               | #341417 |
| core\_amber-25            | `--hop-amber-25`               | #fff6e0 |
| core\_amber-50            | `--hop-amber-50`               | #fff1cc |
| core\_amber-75            | `--hop-amber-75`               | #ffe39a |
| core\_amber-100           | `--hop-amber-100`              | #ffd873 |
| core\_amber-200           | `--hop-amber-200`              | #ffc94a |
| core\_amber-300           | `--hop-amber-300`              | #ffb700 |
| core\_amber-400           | `--hop-amber-400`              | #cfa000 |
| core\_amber-500           | `--hop-amber-500`              | #a68000 |
| core\_amber-600           | `--hop-amber-600`              | #8a6c00 |
| core\_amber-700           | `--hop-amber-700`              | #705900 |
| core\_amber-800           | `--hop-amber-800`              | #574500 |
| core\_amber-900           | `--hop-amber-900`              | #3d3200 |
| core\_mint-25             | `--hop-mint-25`                | #eafdf3 |
| core\_mint-50             | `--hop-mint-50`                | #d7faea |
| core\_mint-75             | `--hop-mint-75`                | #97f2c8 |
| core\_mint-100            | `--hop-mint-100`               | #66ecae |
| core\_mint-200            | `--hop-mint-200`               | #0be57d |
| core\_mint-300            | `--hop-mint-300`               | #12cb80 |
| core\_mint-400            | `--hop-mint-400`               | #10a96f |
| core\_mint-500            | `--hop-mint-500`               | #0d8058 |
| core\_mint-600            | `--hop-mint-600`               | #0b6f4c |
| core\_mint-700            | `--hop-mint-700`               | #0a6042 |
| core\_mint-800            | `--hop-mint-800`               | #084a34 |
| core\_mint-900            | `--hop-mint-900`               | #063527 |
| core\_cobalt-25           | `--hop-cobalt-25`              | #f2f7ff |
| core\_cobalt-50           | `--hop-cobalt-50`              | #e6f0ff |
| core\_cobalt-75           | `--hop-cobalt-75`              | #d6e7ff |
| core\_cobalt-100          | `--hop-cobalt-100`             | #c2daff |
| core\_cobalt-200          | `--hop-cobalt-200`             | #99c2ff |
| core\_cobalt-300          | `--hop-cobalt-300`             | #6aa3ff |
| core\_cobalt-400          | `--hop-cobalt-400`             | #3a82ff |
| core\_cobalt-500          | `--hop-cobalt-500`             | #0165fc |
| core\_cobalt-600          | `--hop-cobalt-600`             | #004fcc |
| core\_cobalt-700          | `--hop-cobalt-700`             | #003b99 |
| core\_cobalt-800          | `--hop-cobalt-800`             | #002766 |
| core\_cobalt-900          | `--hop-cobalt-900`             | #001a4d |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Dimensions

Design tokens are design decisions, translated into data. Explore the core dimensions design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value     |
| -------------------- | ------------------------------ | --------- |
| core\_0              | `--hop-space-0`                | 0         |
| core\_10             | `--hop-space-10`               | 0.0625rem |
| core\_20             | `--hop-space-20`               | 0.125rem  |
| core\_40             | `--hop-space-40`               | 0.25rem   |
| core\_80             | `--hop-space-80`               | 0.5rem    |
| core\_160            | `--hop-space-160`              | 1rem      |
| core\_240            | `--hop-space-240`              | 1.5rem    |
| core\_320            | `--hop-space-320`              | 2rem      |
| core\_400            | `--hop-space-400`              | 2.5rem    |
| core\_480            | `--hop-space-480`              | 3rem      |
| core\_640            | `--hop-space-640`              | 4rem      |
| core\_800            | `--hop-space-800`              | 5rem      |
| core\_960            | `--hop-space-960`              | 6rem      |
| core\_1280           | `--hop-space-1280`             | 8rem      |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value     |
| -------------------- | ------------------------------ | --------- |
| core\_0              | `--hop-space-0`                | 0         |
| core\_10             | `--hop-space-10`               | 0.0625rem |
| core\_20             | `--hop-space-20`               | 0.125rem  |
| core\_40             | `--hop-space-40`               | 0.25rem   |
| core\_80             | `--hop-space-80`               | 0.5rem    |
| core\_160            | `--hop-space-160`              | 1rem      |
| core\_240            | `--hop-space-240`              | 1.5rem    |
| core\_320            | `--hop-space-320`              | 2rem      |
| core\_400            | `--hop-space-400`              | 2.5rem    |
| core\_480            | `--hop-space-480`              | 3rem      |
| core\_640            | `--hop-space-640`              | 4rem      |
| core\_800            | `--hop-space-800`              | 5rem      |
| core\_960            | `--hop-space-960`              | 6rem      |
| core\_1280           | `--hop-space-1280`             | 8rem      |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Font Family

Design tokens are design decisions, translated into data. Explore the core font-family design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value                                              |
| -------------------- | ------------------------------ | -------------------------------------------------- |
| core\_primary        | `--hop-font-family-primary`    | 'ABC Favorit', Helvetica, Arial, sans-serif        |
| core\_secondary      | `--hop-font-family-secondary`  | 'Inter', Helvetica, Arial, sans-serif              |
| core\_tertiary       | `--hop-font-family-tertiary`   | 'ABC Favorit Mono', Consolas, 'SF Mono', monospace |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value                                              |
| -------------------- | ------------------------------ | -------------------------------------------------- |
| core\_primary        | `--hop-font-family-primary`    | 'ABC Favorit', Helvetica, Arial, sans-serif        |
| core\_secondary      | `--hop-font-family-secondary`  | 'Inter', Helvetica, Arial, sans-serif              |
| core\_tertiary       | `--hop-font-family-tertiary`   | 'ABC Favorit Mono', Consolas, 'SF Mono', monospace |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Font Size

Design tokens are design decisions, translated into data. Explore the core font-size design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value    |
| -------------------- | ------------------------------ | -------- |
| core\_100            | `--hop-font-size-100`          | 0.625rem |
| core\_120            | `--hop-font-size-120`          | 0.75rem  |
| core\_140            | `--hop-font-size-140`          | 0.875rem |
| core\_160            | `--hop-font-size-160`          | 1rem     |
| core\_180            | `--hop-font-size-180`          | 1.125rem |
| core\_200            | `--hop-font-size-200`          | 1.25rem  |
| core\_240            | `--hop-font-size-240`          | 1.5rem   |
| core\_280            | `--hop-font-size-280`          | 1.75rem  |
| core\_320            | `--hop-font-size-320`          | 2rem     |
| core\_360            | `--hop-font-size-360`          | 2.25rem  |
| core\_480            | `--hop-font-size-480`          | 3rem     |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value    |
| -------------------- | ------------------------------ | -------- |
| core\_100            | `--hop-font-size-100`          | 0.625rem |
| core\_120            | `--hop-font-size-120`          | 0.75rem  |
| core\_140            | `--hop-font-size-140`          | 0.875rem |
| core\_160            | `--hop-font-size-160`          | 1rem     |
| core\_180            | `--hop-font-size-180`          | 1.125rem |
| core\_200            | `--hop-font-size-200`          | 1.25rem  |
| core\_240            | `--hop-font-size-240`          | 1.5rem   |
| core\_280            | `--hop-font-size-280`          | 1.75rem  |
| core\_320            | `--hop-font-size-320`          | 2rem     |
| core\_360            | `--hop-font-size-360`          | 2.25rem  |
| core\_480            | `--hop-font-size-480`          | 3rem     |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Font Weight

Design tokens are design decisions, translated into data. Explore the core font-weight design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----- |
| core\_400            | `--hop-font-weight-400`        | 400   |
| core\_410            | `--hop-font-weight-410`        | 410   |
| core\_505            | `--hop-font-weight-505`        | 505   |
| core\_580            | `--hop-font-weight-580`        | 580   |
| core\_590            | `--hop-font-weight-590`        | 590   |
| core\_680            | `--hop-font-weight-680`        | 680   |
| core\_690            | `--hop-font-weight-690`        | 690   |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value |
| -------------------- | ------------------------------ | ----- |
| core\_400            | `--hop-font-weight-400`        | 400   |
| core\_410            | `--hop-font-weight-410`        | 410   |
| core\_505            | `--hop-font-weight-505`        | 505   |
| core\_580            | `--hop-font-weight-580`        | 580   |
| core\_590            | `--hop-font-weight-590`        | 590   |
| core\_680            | `--hop-font-weight-680`        | 680   |
| core\_690            | `--hop-font-weight-690`        | 690   |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Letter Spacing

Design tokens are design decisions, translated into data. Explore the core letter-spacing design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name)  | Value       |
| -------------------- | ------------------------------- | ----------- |
| core\_0              | `--hop-letter-spacing-0`        | 0           |
| core\_dense-10       | `--hop-letter-spacing-dense-10` | -0.0625rem  |
| core\_dense-5        | `--hop-letter-spacing-dense-5`  | -0.03125rem |
| core\_wide-5         | `--hop-letter-spacing-wide-5`   | 0.03125rem  |
| core\_wide-10        | `--hop-letter-spacing-wide-10`  | 0.0625rem   |
| core\_wide-15        | `--hop-letter-spacing-wide-15`  | 0.09375rem  |
| core\_wide-20        | `--hop-letter-spacing-wide-20`  | 0.125rem    |
| core\_wide-25        | `--hop-letter-spacing-wide-25`  | 0.15625rem  |
| core\_wide-30        | `--hop-letter-spacing-wide-30`  | 0.1875rem   |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name)  | Value       |
| -------------------- | ------------------------------- | ----------- |
| core\_0              | `--hop-letter-spacing-0`        | 0           |
| core\_dense-10       | `--hop-letter-spacing-dense-10` | -0.0625rem  |
| core\_dense-5        | `--hop-letter-spacing-dense-5`  | -0.03125rem |
| core\_wide-5         | `--hop-letter-spacing-wide-5`   | 0.03125rem  |
| core\_wide-10        | `--hop-letter-spacing-wide-10`  | 0.0625rem   |
| core\_wide-15        | `--hop-letter-spacing-wide-15`  | 0.09375rem  |
| core\_wide-20        | `--hop-letter-spacing-wide-20`  | 0.125rem    |
| core\_wide-25        | `--hop-letter-spacing-wide-25`  | 0.15625rem  |
| core\_wide-30        | `--hop-letter-spacing-wide-30`  | 0.1875rem   |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Line Height

Design tokens are design decisions, translated into data. Explore the core line-height design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value     |
| -------------------- | ------------------------------ | --------- |
| core\_1-125          | `--hop-line-height-1-125`      | 1.125     |
| core\_1-14           | `--hop-line-height-1-14`       | 1.1428571 |
| core\_1-1666         | `--hop-line-height-1-1666`     | 1.1666666 |
| core\_1-20           | `--hop-line-height-1-20`       | 1.2       |
| core\_1-25           | `--hop-line-height-1-25`       | 1.25      |
| core\_1-2857         | `--hop-line-height-1-2857`     | 1.2857142 |
| core\_1-33           | `--hop-line-height-1-33`       | 1.3333333 |
| core\_1-40           | `--hop-line-height-1-40`       | 1.4       |
| core\_1-4285         | `--hop-line-height-1-4285`     | 1.4285714 |
| core\_1-50           | `--hop-line-height-1-50`       | 1.5       |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value     |
| -------------------- | ------------------------------ | --------- |
| core\_1-125          | `--hop-line-height-1-125`      | 1.125     |
| core\_1-14           | `--hop-line-height-1-14`       | 1.1428571 |
| core\_1-1666         | `--hop-line-height-1-1666`     | 1.1666666 |
| core\_1-20           | `--hop-line-height-1-20`       | 1.2       |
| core\_1-25           | `--hop-line-height-1-25`       | 1.25      |
| core\_1-2857         | `--hop-line-height-1-2857`     | 1.2857142 |
| core\_1-33           | `--hop-line-height-1-33`       | 1.3333333 |
| core\_1-40           | `--hop-line-height-1-40`       | 1.4       |
| core\_1-4285         | `--hop-line-height-1-4285`     | 1.4285714 |
| core\_1-50           | `--hop-line-height-1-50`       | 1.5       |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

### Motion

Design tokens are design decisions, translated into data. Explore the core motion design tokens.

Motion brings meaning and a sense of life to the experience. It should be purposeful, intuitive, and seamless. Our motion utilities consists of two set of values, *durations* and *easings*.

#### Usage

Both variables can be combined in [transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) as well in [CSS animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) to set the tone of an animation/transition (animation is used interchangeably with transition from now on).

In a transition declaration:

```css
.tease {
    transition: color var(--hop-easing-duration-1) var(--hop-easing-focus);
}
```

In an animation declaration:

```css
@keyframes tease-animation  {
    0% {
        opacity: 0;
        transform: scale(1.2);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.tease {
    animation: tease-animation var(--hop-easing-duration-2) var(--hop-easing-productive);
}
```

#### Tokens

##### Duration

Hopper exposes 5 durations, they help convey a message and makes animations smooth and responsive.

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value    | Token Name (CSS Variable Name) | Value |
| ----------------------- | ------------------------------ | ----- |
| core\_easing-duration-1 | `--hop-easing-duration-1`      | 100ms |
| core\_easing-duration-2 | `--hop-easing-duration-2`      | 200ms |
| core\_easing-duration-3 | `--hop-easing-duration-3`      | 300ms |
| core\_easing-duration-4 | `--hop-easing-duration-4`      | 500ms |
| core\_easing-duration-5 | `--hop-easing-duration-5`      | 800ms |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value    | Token Name (CSS Variable Name) | Value |
| ----------------------- | ------------------------------ | ----- |
| core\_easing-duration-1 | `--hop-easing-duration-1`      | 100ms |
| core\_easing-duration-2 | `--hop-easing-duration-2`      | 200ms |
| core\_easing-duration-3 | `--hop-easing-duration-3`      | 300ms |
| core\_easing-duration-4 | `--hop-easing-duration-4`      | 500ms |
| core\_easing-duration-5 | `--hop-easing-duration-5`      | 800ms |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Easings

[Easings](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function) denotes a mathematical function that describes the rate at which a numerical value changes.They add life to motion by providing natural rests and setting the mood of an animation. Hopper provides 3 predefined easings, each having their use.

###### Productive

Used in animations that are not in the way, they quickly change from one state to another.

###### Focus

Used in animations that are designed to draw the user's attention on what changed, in order to let them move on with their next task.

###### Expressive

Used in animations that are meant to give a sense of completeness or resolution to the user. Use them sparsely.

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value    | Token Name (CSS Variable Name) | Value                                |
| ----------------------- | ------------------------------ | ------------------------------------ |
| core\_easing-productive | `--hop-easing-productive`      | cubic-bezier(0.22, 0.61, 0.36, 1)    |
| core\_easing-focus      | `--hop-easing-focus`           | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
| core\_easing-expressive | `--hop-easing-expressive`      | cubic-bezier(0.72, -0.66, 0.15, 1.5) |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value    | Token Name (CSS Variable Name) | Value                                |
| ----------------------- | ------------------------------ | ------------------------------------ |
| core\_easing-productive | `--hop-easing-productive`      | cubic-bezier(0.22, 0.61, 0.36, 1)    |
| core\_easing-focus      | `--hop-easing-focus`           | cubic-bezier(0.46, 0.03, 0.52, 0.96) |
| core\_easing-expressive | `--hop-easing-expressive`      | cubic-bezier(0.72, -0.66, 0.15, 1.5) |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

##### Playground

### Shadow

Design tokens are design decisions, translated into data. Explore the core box-shadow design tokens.

#### Tokens

The values of these tokens are only valid if the current theme is

workleap

| Component Prop Value | Token Name (CSS Variable Name) | Value                                  |
| -------------------- | ------------------------------ | -------------------------------------- |
| core\_none           | `--hop-shadow-none`            | none                                   |
| core\_sm             | `--hop-shadow-sm`              | 0 1px 6px 0 rgba(60, 60, 60, 0.10)     |
| core\_md             | `--hop-shadow-md`              | 0 4px 10px 4px rgba(60, 60, 60, 0.08)  |
| core\_lg             | `--hop-shadow-lg`              | 0 10px 18px 8px rgba(60, 60, 60, 0.08) |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

The values of these tokens are only valid if the current theme is

sharegate

| Component Prop Value | Token Name (CSS Variable Name) | Value                                  |
| -------------------- | ------------------------------ | -------------------------------------- |
| core\_none           | `--hop-shadow-none`            | none                                   |
| core\_sm             | `--hop-shadow-sm`              | 0 1px 6px 0 rgba(60, 60, 60, 0.10)     |
| core\_md             | `--hop-shadow-md`              | 0 4px 10px 4px rgba(60, 60, 60, 0.08)  |
| core\_lg             | `--hop-shadow-lg`              | 0 10px 18px 8px rgba(60, 60, 60, 0.08) |

⚠️ IMPORTANT: You MUST use the EXACT values from the **Component Prop Value** column in your code.

If you have the Token Name (CSS Variable Name) or direct value from your design, you should find the related mapping value from the **Component Prop Value** column by searching this table.

## Components

> This section offers a comprehensive list of components along with best practices to guide their effective usage.

### Component List

A list of all the components available in the design system.

#### Layout

| Component Name | Description                                                                      |
| -------------- | -------------------------------------------------------------------------------- |
| `Flex`         | A flex component is used to create a flex container.                             |
| `Grid`         | The grid component is used to create a grid container.                           |
| `Inline`       | An inline component is a layout primitive used to arrange elements horizontally. |
| `Stack`        | A stack component is a layout primitive used to arrange elements vertically.     |

#### Buttons

| Component Name     | Description                                                                                                                                                                        |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Button`           | A button allows a user to initiate an action.                                                                                                                                      |
| `ButtonGroup`      | A button group handles the spacing and orientation for a grouping of buttons.                                                                                                      |
| `LinkButton`       | A LinkButton looks like a button but behaves like a link.                                                                                                                          |
| `SegmentedControl` | The SegmentedControl component presents a horizontal row of options or actions that are contextually or conceptually related. It allows users to select a single option at a time. |
| `Tile`             | A tile groups information into an interactive element to let users browse and take action on a group of related items.                                                             |
| `TileGroup`        | A TileGroup groups Tiles to let users browse and take action on a group of related items.                                                                                          |
| `ToggleButton`     | Offer a similar experience as a checkbox or radio with the appearance of a button.                                                                                                 |

#### Collections

| Component Name | Description                                                                                                                                                                     |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ListBox`      | A listbox is a list of interactive options that appears when users interact with an element or perform a specific action.                                                       |
| `Menu`         | A menu offers a list of choices to the user, such as a set of actions or functions.                                                                                             |
| `TagGroup`     | The TagGroup is a dynamic UI component that encapsulates a collection of tags. Each tag represents a label, category, keyword, or filter, and can be used for various groupings |
| `Tag`          | A tag represents a label, category, keyword, or filter, and can be used for various groupings. If you need multiple tags, consider using the TagGroup component.                |

#### Date and time

| Component Name    | Description                                                                                              |
| ----------------- | -------------------------------------------------------------------------------------------------------- |
| `Calendar`        | A calendar displays one or more date grids and allows users to select a single date.                     |
| `DatePicker`      | A date picker allows users to select a single date from a calendar.                                      |
| `DateRangePicker` | A date range picker allows users to select a range of dates from a calendar.                             |
| `RangeCalendar`   | A range calendar displays one or more date grids and allows users to select a contiguous range of dates. |

#### Forms

| Component Name  | Description                                                                                                                                                                                                                   |
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Checkbox`      | Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections. |
| `CheckboxGroup` | A checkbox group handles the spacing and orientation for a grouping of checkboxes, as well as providing a label.                                                                                                              |
| `Form`          | Forms are used to gather information from the user.                                                                                                                                                                           |
| `NumberField`   | A number field is a specialized input that allows a user to enter a number.                                                                                                                                                   |
| `PasswordField` | A password field is a specialized text field that allows a user to enter a password.                                                                                                                                          |
| `RadioGroup`    | A radio group is used to group related options together.                                                                                                                                                                      |
| `SearchField`   | A search field is a specialized text input allowing the user to perform a search.                                                                                                                                             |
| `Switch`        | A switch is used to quickly switch between two possible states.                                                                                                                                                               |
| `TextArea`      | A text area serves as a multi-line, plain-text editing interface.                                                                                                                                                             |
| `TextField`     | A text field allows a user to enter a plain text value.                                                                                                                                                                       |

#### Icons

| Component Name | Description                                                 |
| -------------- | ----------------------------------------------------------- |
| `Icon`         | An icon component is used to render a custom icon.          |
| `IconList`     | An IconList encapsulates a collection of icons.             |
| `RichIcon`     | A rich icon component is used to render a rich custom icon. |

#### Navigation

| Component Name | Description                                                                                                           |
| -------------- | --------------------------------------------------------------------------------------------------------------------- |
| `Accordion`    | An Accordion is a grouping of related disclosures. It supports both single and multiple expanded items.               |
| `Disclosure`   | The disclosure component is used to put long sections of information under a block that users can expand or collapse. |
| `Link`         | A link allows a user to navigate to a different location.                                                             |
| `Tabs`         | Tabs are used to organize content by grouping similar information on the same page.                                   |

#### Overlays

| Component Name   | Description                                                                                                                                                                                      |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `Alert`          | An Alert is a “conversation” between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow. |
| `ContextualHelp` | Contextual help shows a user extra information about the state of an adjacent component. It explains a high-level topic about an experience and can point users to more information elsewhere.   |
| `Modal`          | Modals focus the user's attention exclusively on one task or piece of information via a window that sits on top of the page content.                                                             |
| `Popover`        | A popover displays additional content when a user interacts with a trigger element.                                                                                                              |
| `Tooltip`        | Tooltips display additional information upon hover or focus that is contextual, helpful, and nonessential while providing the ability to communicate and give clarity to a user.                 |

#### Pickers

| Component Name | Description                                                                                         |
| -------------- | --------------------------------------------------------------------------------------------------- |
| `ComboBox`     | A combo box allows the user to make a selection from a list of suggested, likely or desired values. |
| `Select`       | A select displays a collapsible list of options from which the user can select one.                 |

#### Status

| Component Name   | Description                                                                                                                                                                                                                                                |
| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Badge`          | A badge is used to bring attention to an element.                                                                                                                                                                                                          |
| `Callout`        | A Callout informs users about important changes or persistent conditions. Use this component to communicate to users in a prominent way. Callouts are placed at the top of the page or section they apply to, and below the page or section header.        |
| `CompactCallout` | A CompactCallout informs users about important changes or persistent conditions. Use this component to communicate to users in a prominent way. Callouts are placed at the top of the page or section they apply to, and below the page or section header. |
| `FloatingBadge`  | A floating badge allows the user to position a badge relative to another component.                                                                                                                                                                        |
| `Spinner`        | A spinner indicates that a part of the product is currently performing a task of unknown duration.                                                                                                                                                         |

#### Content

| Component Name       | Description                                                                                                                                        |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Avatar`             | Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available. |
| `Card`               | Cards are used to group similar concepts and tasks to make it easier for users to scan, read and get things done.                                  |
| `Divider`            | A divider separates sections of content or groups.                                                                                                 |
| `Heading`            | A heading is a primitive component matching Hopper's typography type scale.                                                                        |
| `IllustratedMessage` | An illustrated message display an image and a message, usually for an empty state or an error page.                                                |
| `Illustration`       | An illustration compose an image with a background color. Use an illustration as an hero in a modal.                                               |
| `Image`              | An image component that can be used to display images.                                                                                             |
| `Label`              | A label is a primitive component matching Hopper's typography type scale.                                                                          |
| `Paragraph`          | A paragraph is used to render blocks of text.                                                                                                      |
| `Text`               | A text component is a primitive component matching Hopper's typography type scale.                                                                 |

#### Placeholders

| Component Name | Description                                                |
| -------------- | ---------------------------------------------------------- |
| `Content`      | A placeholder for the main content section of a component. |
| `Footer`       | A placeholder for a footer section.                        |
| `Header`       | A placeholder for an header section.                       |

#### Html elements

| Component Name | Description                                                    |
| -------------- | -------------------------------------------------------------- |
| `A`            | A specialized component to represent an HTML anchor element.   |
| `Address`      | A specialized component to represent an HTML address element.  |
| `Article`      | A specialized component to represent an HTML article element.  |
| `Aside`        | A specialized component to represent an HTML aside element.    |
| `Div`          | A specialized component to represent an HTML div element.      |
| `HtmlButton`   | A specialized button component for HTML button element.        |
| `HtmlFooter`   | A specialized component to represent an HTML footer element.   |
| `HtmlHeader`   | A specialized component to represent an HTML header element.   |
| `HtmlInput`    | A specialized component to represent an HTML input element.    |
| `HtmlSection`  | A specialized component to represent an HTML section element.  |
| `Img`          | A specialized component to represent an HTML img element.      |
| `Main`         | A specialized component to represent an HTML main element.     |
| `Nav`          | A specialized component to represent an HTML nav element.      |
| `Span`         | A specialized component to represent an HTML span element.     |
| `Table`        | A specialized component to represent an HTML table element.    |
| `UL`           | A specialized component to represent an HTML ul/ol/li element. |

#### Building blocks

| Component Name  | Description                                                                                                                                                          |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `Box`           | A flexible container component that can render as any HTML element or React component. Supports all styled system props for consistent spacing, layout, and styling. |
| `ErrorMessage`  | An error message displays validation errors for a form field.                                                                                                        |
| `HelperMessage` | A helper message component displays auxiliary text to guide users in the interface.                                                                                  |
| `PopoverBase`   | A simple React Aria Popover with hopper's styling                                                                                                                    |

### A

A specialized component to represent an HTML anchor element.

```tsx
import { A } from "@hopper-ui/components";

export default function Example() {
    return (
        <A color="neutral-weak" href="https://www.cc.com/shows/futurama">
            Futurama
        </A>
    );
}
```

#### Usage

An anchor component accepts all the [anchor HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Accordion

An Accordion is a grouping of related disclosures. It supports both single and multiple expanded items.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/accordion/src/Accordion.tsx>

```tsx
import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div width="100%" paddingX="core_320" paddingY="core_480">
            <Accordion defaultExpandedKeys={["pingboard"]}>
                <Disclosure id="officevibe">
                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="pingboard">
                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="performance">
                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
                </Disclosure>
            </Accordion>
        </Div>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Accordion>
    <Disclosure> /* (Required) A disclosure for the Accordion */
        <DisclosureHeader> /* (Required) A header for the Disclosure */
            <Text /> /* (Optional) A text description for the DisclosureHeader */
            <Icon /> /* (Optional) An icon for the DisclosureHeader */
        </DisclosureHeader>
        <DisclosurePanel /> /* (Required) A panel for the Disclosure */
    </Disclosure>
</Accordion>
```

##### Composed Components

An `Accordion` uses the following components.

| Component  | Description                                                                                                           |
| ---------- | --------------------------------------------------------------------------------------------------------------------- |
| Disclosure | The disclosure component is used to put long sections of information under a block that users can expand or collapse. |
| Icon       | An icon component is used to render a custom icon.                                                                    |
| Text       | A text component is a primitive component matching Hopper's typography type scale.                                    |

#### Usage

##### Disabled

An accordion can be disabled.

```tsx
import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div width="100%" paddingX="core_320" paddingY="core_480">
            <Accordion isDisabled>
                <Disclosure id="officevibe">
                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="pingboard">
                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="performance">
                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
                </Disclosure>
            </Accordion>
        </Div>
    );
}
```

##### Variants

An accordion has multiple variants.

**Standalone** - Used when the accordion is not inside a container.

```tsx
import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div width="100%" paddingX="core_320" paddingY="core_480">
            <Accordion variant="standalone">
                <Disclosure id="officevibe">
                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="pingboard">
                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="performance">
                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
                </Disclosure>
            </Accordion>
        </Div>
    );
}
```

**Inline** - Used when placing a accordion inside a container.

```tsx
import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div width="100%" paddingX="core_320" paddingY="core_480">
            <Accordion variant="inline">
                <Disclosure id="officevibe">
                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="pingboard">
                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="performance">
                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
                </Disclosure>
            </Accordion>
        </Div>
    );
}
```

##### Expanded

By default, only one disclosure will be expanded at a time. Use `allowsMultipleExpanded` prop to expand multiple disclosures.

```tsx
import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div width="100%" paddingX="core_320" paddingY="core_480">
            <Accordion defaultExpandedKeys={["pingboard", "performance"]} allowsMultipleExpanded>
                <Disclosure id="officevibe">
                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="pingboard">
                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="performance">
                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
                </Disclosure>
            </Accordion>
        </Div>
    );
}
```

##### Icon

An accordion heading can contain an icon.

```tsx
import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Text } from "@hopper-ui/components";
import { PinSolidIcon, SparklesIcon, SproutIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Div width="100%" paddingX="core_320" paddingY="core_480">
            <Accordion defaultExpandedKeys={["pingboard"]}>
                <Disclosure id="officevibe">
                    <DisclosureHeader>
                        <SparklesIcon />
                        <Text>Workleap Officevibe</Text>
                    </DisclosureHeader>
                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="pingboard">
                    <DisclosureHeader>
                        <PinSolidIcon />
                        <Text>Workleap Pingboard</Text>
                    </DisclosureHeader>
                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="performance">
                    <DisclosureHeader>
                        <SproutIcon />
                        <Text>Workleap Performance</Text>
                    </DisclosureHeader>
                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
                </Disclosure>
            </Accordion>
        </Div>
    );
}
```

##### Description

An accordion heading can contain a description.

```tsx
import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Inline, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div width="100%" paddingX="core_320" paddingY="core_480">
            <Accordion>
                <Disclosure id="officevibe">
                    <DisclosureHeader>
                        <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
                            <Text>Workleap Officevibe</Text>
                            <Text color="neutral-weak" size="sm">Engagement survey and feedback</Text>
                        </Inline>
                    </DisclosureHeader>
                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="pingboard">
                    <DisclosureHeader>
                        <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
                            <Text>Workleap Pingboard</Text>
                            <Text color="neutral-weak" size="sm">Interactive org chart and directory</Text>
                        </Inline>
                    </DisclosureHeader>
                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="performance">
                    <DisclosureHeader>
                        <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
                            <Text>Workleap Performance</Text>
                            <Text color="neutral-weak" size="sm">Performance review management and tracking</Text>
                        </Inline>
                    </DisclosureHeader>
                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
                </Disclosure>
            </Accordion>
        </Div>
    );
}
```

##### Controlled

An accordion can handle its opened panels in controlled mode.

```tsx
import { Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Div, Span } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [expandedKeys, setExpandedKeys] = useState<Set<string | number>>(new Set());

    const handleExpandedChange = (keys: Set<string | number>) => {
        setExpandedKeys(keys);
    };

    return (
        <Div width="100%" paddingX="core_320" paddingY="core_480">
            <Span
                display="flex"
                marginBottom="stack-md"
            >
                {expandedKeys.size > 0 ? `${Array.from(expandedKeys).join(", ")} is opened.` : "No sections are opened."}
            </Span>
            <Accordion
                onExpandedChange={handleExpandedChange}
                expandedKeys={expandedKeys}
                allowsMultipleExpanded
            >
                <Disclosure id="officevibe">
                    <DisclosureHeader>Workleap Officevibe</DisclosureHeader>
                    <DisclosurePanel>Help employees speak up and make sure they feel heard. Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="pingboard">
                    <DisclosureHeader>Workleap Pingboard</DisclosureHeader>
                    <DisclosurePanel>Make teamwork work. Use your org chart to create lasting connections across your distributed and hybrid teams to make collaboration easier.</DisclosurePanel>
                </Disclosure>
                <Disclosure id="performance">
                    <DisclosureHeader>Workleap Performance</DisclosureHeader>
                    <DisclosurePanel>Drive impact by simplifying how your leaders and you manage team performance throughout the year.</DisclosurePanel>
                </Disclosure>
            </Accordion>
        </Div>
    );
}
```

#### Props

| Prop                   | Type                                              | Default | Description                                                                                                                                                                        |
| ---------------------- | ------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| variant                | `"standalone" \| "inline"`                        |         |                                                                                                                                                                                    |
| style                  | `StyleOrFunction<DisclosureGroupRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| allowsMultipleExpanded | `boolean`                                         |         | Whether multiple items can be expanded at the same time.                                                                                                                           |
| isDisabled             | `boolean`                                         |         | Whether all items are disabled.                                                                                                                                                    |
| expandedKeys           | `Iterable<Key>`                                   |         | The currently expanded keys in the group (controlled).                                                                                                                             |
| defaultExpandedKeys    | `Iterable<Key>`                                   |         | The initial expanded keys in the group (uncontrolled).                                                                                                                             |
| children               | `ChildrenOrFunction<DisclosureGroupRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className              | `ClassNameOrFunction<DisclosureGroupRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir                    | `string`                                          |         |                                                                                                                                                                                    |
| lang                   | `string`                                          |         |                                                                                                                                                                                    |
| inert                  | `boolean`                                         |         |                                                                                                                                                                                    |
| translate              | `"yes" \| "no"`                                   |         |                                                                                                                                                                                    |

###### Events

| Prop                        | Type                                     | Default | Description                                                  |
| --------------------------- | ---------------------------------------- | ------- | ------------------------------------------------------------ |
| onExpandedChange            | `((keys: Set<Key>) => any)`              |         | Handler that is called when items are expanded or collapsed. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                              |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                              |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                              |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                              |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                              |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                              |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                              |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                              |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                              |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                              |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                              |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                              |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                              |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                              |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                              |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                              |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                              |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                              |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                              |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                              |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                              |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                              |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                              |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                              |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                              |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                              |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                              |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                              |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop | Type     | Default | Description                                                                                                         |
| ---- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id   | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `expansionMode="multiple"` has been replaced with `allowsMultipleExpanded`.
* `borderless` and `bordered` variants are no more. `inline` and `standalone` are the new variants. There is no direct match; the new variants are context-based, depending on whether an accordion is contained or not.
* `autofocus` is removed. It did not make sense to have.
* The `disclosure` component is used instead of `Item`.
* `disabled` is renamed to `isDisabled` on the item/disclosure.

### Address

A specialized component to represent an HTML address element.

```tsx
import { Address, Link } from "@hopper-ui/components";

export default function Example() {
    return (
        <Address color="neutral-weak">
            <Link href="mailto:media@spacex.com">media@spacex.com</Link>
            <br />
            <Link href="tel:+13103636000">(310) 363-6000</Link>
        </Address>
    );
}
```

#### Usage

An address component accepts all the [address HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/address) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Alert

An Alert is a “conversation” between the system and the user. It is prompted when the system needs input from the user or to give the user urgent information concerning their current workflow.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/alert/src/Alert.tsx>

Alerts work best when used for short tasks or to warn the user to task relevant information. Alerts are useful in many scenarios; they are less disorientating than navigating a user to a new page for simple tasks or knowledge gathering. However, Alerts are disruptive and can be distracting to the user. Use them sparingly.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonLabel="Leap ahead!">
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Alert>
    <Heading /> /* (Required) The heading of the Alert */
    <Content /> /* (Required) The content of the Alert */
</Alert>
```

##### Composed Components

A `Alert` uses the following components:

| Component | Description                                                                 |
| --------- | --------------------------------------------------------------------------- |
| Content   | A placeholder for the main content section of a component.                  |
| Heading   | A heading is a primitive component matching Hopper's typography type scale. |

#### Usage

##### Default

An alert must have a heading, some content and a primary button label.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonLabel="Leap ahead!" cancelButtonLabel="Cancel">
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Secondary button

An alert can have a secondary button.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonLabel="Leap ahead!" secondaryButtonLabel="Leap back">
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Cancel button

An alert can have a cancel button.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonLabel="Leap ahead!" cancelButtonLabel="Cancel">
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Disabled buttons

An alert primary and secondary buttons can be disabled.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonDisabled primaryButtonLabel="Leap ahead!" secondaryButtonLabel="Leap back">
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Confirmation

Use a confirmation alert when a non-destructive action is required from a user.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonLabel="Leap ahead!" secondaryButtonLabel="Leap back" variant="confirmation">
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Destructive

Use a destructive alert to confirm a permanent change, like deleting data.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonLabel="Escape the swamp" secondaryButtonLabel="Stay in the mud" variant="destructive">
                <Heading>Frog-tastrophe!</Heading>
                <Content>
                    Something went wrong in the pond. Better leap out before it gets warty!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Not Dismissable

An alert can be undismissable.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open</Button>
            <Alert isDismissable={false} primaryButtonLabel="Leap ahead!" cancelButtonLabel="Cancel">
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Controlled

The open state can be handled in controlled mode.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";
import { useCallback, useState } from "react";

export default function Example() {
    const [isOpen, setIsOpen] = useState(false);

    const handleOpenChange = useCallback((open: boolean) => {
        setIsOpen(open);
    }, [setIsOpen]);

    return (
        <AlertTrigger isOpen={isOpen} onOpenChange={handleOpenChange}>
            <Button variant="secondary">Open</Button>
            <Alert primaryButtonLabel="Leap ahead!" cancelButtonLabel="Cancel">
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Pending

An alert can show a pending state. This is useful when you want to show that an action is in progress.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";
import { useCallback, useState } from "react";

export default function Example() {
    const [isLoading, setIsLoading] = useState(false);
    const [isOpen, setIsOpen] = useState(false);

    const handleOpenChange = useCallback((open: boolean) => {
        if (isLoading && !open) {
            return;
        }

        setIsOpen(open);
    }, [setIsOpen, isLoading]);

    const handlePrimaryButtonClick = useCallback(async () => {
        setIsLoading(true);

        await new Promise(resolve => setTimeout(resolve, 3000));

        setIsLoading(false);
        setIsOpen(false);
    }, []);

    return (
        <AlertTrigger isOpen={isOpen} onOpenChange={handleOpenChange}>
            <Button variant="secondary">Open</Button>
            <Alert
                isLoading={isLoading}
                onPrimaryButtonClick={handlePrimaryButtonClick}
                primaryButtonLabel="Leap ahead!"
                cancelButtonLabel="Cancel"
            >
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

##### Sizes

A Alert can be small or medium. The default size is medium.

```tsx
import { Alert, type AlertProps, AlertTrigger, Button, Content, Heading, Stack } from "@hopper-ui/components";

export default function Example() {
    const alert = (size: AlertProps["size"]) => (
        <AlertTrigger>
            <Button variant="secondary">Open {`${size}`}</Button>
            <Alert primaryButtonLabel="Leap ahead!" cancelButtonLabel="Cancel" size={size}>
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );

    return (
        <Stack gap="stack-md">
            {alert("sm")}
            {alert("md")}
        </Stack>
    );
}
```

##### Responsive sizes

A Alert can have different size in mobile and desktop view.

```tsx
import { Alert, AlertTrigger, Button, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <AlertTrigger>
            <Button variant="secondary">Open responsive alert</Button>
            <Alert
                primaryButtonLabel="Leap ahead!"
                cancelButtonLabel="Cancel"
                size={{
                    xs: "sm",
                    sm: "md"
                }}
            >
                <Heading>Ribbit Reminder!</Heading>
                <Content>
                    Your changes have been saved—no need to leap again. Hop along, hero!
                </Content>
            </Alert>
        </AlertTrigger>
    );
}
```

#### Best Practices

##### Use alerts sparingly

Don't overuse alerts. They are disruptive and can easily annoy the user if used incorrectly or too frequently. When alerts are used for non-workflow related tasks, it is likely a user will start ignoring or dismissing the alert without fully understanding the content. This can cause users to make hurried or impulsive choices when dealing with more critical alerts.

##### Alerts should be user initiated

A user action, such as clicking a button, should trigger the alert to open. Don't interrupt the user by opening an alert when they aren't expecting it. Avoid system generated pop-ups that distract the user while working. Triggers can either be a direct or indirect consequence of a user's action. An example of an indirect action is a user closing a tab with unsaved content that then causes an alert to ask if they want to save their changes before closing. If the system is autogenerating an alert that is not a consequence of a user's action, but a response to processes happening in the background, then a toast notification should be used instead.

##### Keep alert tasks simple and focused

Alert tasks should be direct and easy to complete. Avoid feature creep in alerts where a once simple alert has become bloated with interactions. When deciding to use an alert consider how the task could expand in the future and if an alert will be able to effectively incorporate additions.

##### Dismissing an alert

* Task completion: clicking the primary action will complete the task and automatically close the alert
* Cancel button: clicking the Cancel button will close the modal and return the user to its previous context. Cancel undoes all applied changes.
* X: Clicking the Dismiss button at the upper right will close the alert without submitting any data and return the user to its previous context.
* Esc: Press ESC on the keyboard.

#### Props

##### Alert

| Prop                    | Type                                                    | Default        | Description                                                                                              |
| ----------------------- | ------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------------------- |
| autoFocusButton         | `"primary" \| "secondary" \| "cancel"`                  |                | The button to focus by default when the alert open.                                                      |
| cancelButtonLabel       | `string`                                                |                | The cancel button label.                                                                                 |
| isDismissable           | `boolean`                                               | true           | Whether or not the dialog should close on outside interactions.                                          |
| primaryButtonDisabled   | `boolean`                                               |                | Whether or not the primary button is disabled.                                                           |
| primaryButtonLabel      | `string`                                                |                | The primary button label.                                                                                |
| secondaryButtonDisabled | `boolean`                                               |                | Whether or not the secondary button is disabled.                                                         |
| secondaryButtonLabel    | `string`                                                |                | The secondary button label.                                                                              |
| variant                 | `"confirmation" \| "destructive"`                       | "confirmation" | The visual style of the Alert.                                                                           |
| size                    | `ResponsiveProp<"sm" \| "md">`                          | "md"           | The size of the Alert.                                                                                   |
| overlayProps            | `Partial<BaseModalProps>`                               |                | Additional props to render on the wrapper element.                                                       |
| isLoading               | `boolean`                                               |                | Whether or not the Alert is loading.                                                                     |
| style                   | `CSSProperties`                                         |                | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children                | `ReactNode \| ((opts: DialogRenderProps) => ReactNode)` |                | Children of the dialog. A function may be provided to access a function to close the dialog.             |
| className               | `string`                                                |                | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| dir                     | `string`                                                |                |                                                                                                          |
| lang                    | `string`                                                |                |                                                                                                          |
| inert                   | `boolean`                                               |                |                                                                                                          |
| translate               | `"yes" \| "no"`                                         |                |                                                                                                          |
| isOpen                  | `boolean`                                               |                | Whether the overlay is open by default (controlled).                                                     |
| defaultOpen             | `boolean`                                               |                | Whether the overlay is open by default (uncontrolled).                                                   |

###### Events

| Prop                        | Type                                  | Default | Description                                                                                                                                                                                                                 |
| --------------------------- | ------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onCancelButtonClick         | `(() => void)`                        |         | Called when the cancel button is clicked                                                                                                                                                                                    |
| onPrimaryButtonClick        | `(() => void)`                        |         | Called when the primary button is clicked.                                                                                                                                                                                  |
| onSecondaryButtonClick      | `(() => void)`                        |         | Called when the secondary button is clicked.                                                                                                                                                                                |
| onOpenChange                | `((isOpen: boolean) => void)`         |         | Handler that is called when the alert's open state changes. This handler is only called when the alert is not used inside a `AlertTrigger`. Use the `onOpenChange` prop of `AlertTrigger` instead if it's part of a trigger |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |                                                                                                                                                                                                                             |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |                                                                                                                                                                                                                             |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type                        | Default  | Description                                                                                                         |
| ---------------- | --------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| role             | `"dialog" \| "alertdialog"` | 'dialog' | The accessibility role for the dialog.                                                                              |
| id               | `string`                    |          | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string`                    |          | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string`                    |          | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string`                    |          | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string`                    |          | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

##### AlertTrigger

| Prop        | Type      | Default | Description                                            |
| ----------- | --------- | ------- | ------------------------------------------------------ |
| isOpen      | `boolean` |         | Whether the overlay is open by default (controlled).   |
| defaultOpen | `boolean` |         | Whether the overlay is open by default (uncontrolled). |

###### Events

| Prop         | Type                          | Default | Description                                                   |
| ------------ | ----------------------------- | ------- | ------------------------------------------------------------- |
| onOpenChange | `((isOpen: boolean) => void)` |         | Handler that is called when the overlay's open state changes. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `dismissable` has been renamed `isDismissable`.
* `wrapperProps` has been renamed `overlayProps`.
* `onClose` has been removed.

### Article

A specialized component to represent an HTML article element.

```tsx
import { Aside, Paragraph } from "@hopper-ui/components";

export default function Example() {
    return (
        <Aside color="neutral-weak">
            <Paragraph>
                The Universe is under no obligation to make sense to you. The Earth is the cradle of
                humanity, but mankind cannot stay in the cradle forever.
            </Paragraph>
        </Aside>
    );
}
```

#### Usage

An article component accepts all the [article HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Aside

A specialized component to represent an HTML aside element.

```tsx
import { Aside, Paragraph } from "@hopper-ui/components";

export default function Example() {
    return (
        <Aside color="neutral-weak">
            <Paragraph>
                The Universe is under no obligation to make sense to you. The Earth is the cradle of
                humanity, but mankind cannot stay in the cradle forever.
            </Paragraph>
        </Aside>
    );
}
```

#### Usage

An aside component accepts all the [aside HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/aside) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Avatar

Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/avatar/src/Avatar.tsx>

```tsx
import { Avatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Avatar name="John Doe" />
    );
}
```

#### Usage

##### Local Image

An avatar can display a local image.

```tsx
import { Avatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Avatar name="Kermit Frog" src="/frog.jpg" />
    );
}
```

##### Remote image

An avatar can fetch a remote image.

```tsx
import { Avatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Avatar name="John Doe" src="https://i.pravatar.cc/96?img=1" />
    );
}
```

##### Fallback image

A fallback image can be set in case the `src` fails to load.

```tsx
import { Avatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Avatar
            name="John Doe"
            src="https://example.com/image.jpg"
            fallbackSrc="https://i.pravatar.cc/96?img=2"
        />
    );
}
```

##### Loading Failure

When an image fails to load, a default image will be displayed.

```tsx
import { Avatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Avatar
            name="John Doe"
            src="https://example.com/image.jpg"
        />
    );
}
```

##### Double Failure

When the fallback image fails to load, a default image will be displayed.

```tsx
import { Avatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Avatar
            name="John Doe"
            src="https://example.com/image.jpg"
            fallbackSrc="https://example.com/image2.jpg"
        />
    );
}
```

##### Src and Fallback Bypass

If no fallback image is provided and the image fails to load, the initials will be displayed instead.

```tsx
import { Avatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Avatar
            name="John Doe"
            src="https://example.com/image.jpg"
            fallbackSrc={null}
        />
    );
}
```

##### Anonymous

An anonymous avatar can be displayed.

```tsx
import { AnonymousAvatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <AnonymousAvatar
            aria-label="anonymous"
        />
    );
}
```

##### Deleted

A deleted avatar can be displayed.

```tsx
import { DeletedAvatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <DeletedAvatar
            aria-label="deleted user"
        />
    );
}
```

##### Broken

A broken avatar can be displayed.

```tsx
import { BrokenAvatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <BrokenAvatar
            aria-label="broken"
        />
    );
}
```

##### Sizes

An avatar can be displayed in different sizes.

* Extra small (16px): use in tightly condensed layouts. This size can only accommodate one letter when using the Initials variant.
* Small (24px): use when the medium size is too big for the layout, or when the avatar has less importance in the context.
* Medium (32px): use as the default size
* Large (48px): use when an avatar is a focal point, such on a member page header
* Extra large (64px): use when an avatar is a focal point, such on a member page header

```tsx
import { Avatar, Stack, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <Inline>
                <Avatar name="John Doe" size="xs" />
                <Avatar name="John Doe" size="sm" />
                <Avatar name="John Doe" size="md" />
                <Avatar name="John Doe" size="lg" />
                <Avatar name="John Doe" size="xl" />
                <Avatar name="John Doe" size="2xl" />
            </Inline>
            <Inline>
                <Avatar name="John Doe" size="xs" src="https://i.pravatar.cc/96?img=1" />
                <Avatar name="John Doe" size="sm" src="https://i.pravatar.cc/96?img=1" />
                <Avatar name="John Doe" size="md" src="https://i.pravatar.cc/96?img=1" />
                <Avatar name="John Doe" size="lg" src="https://i.pravatar.cc/96?img=1" />
                <Avatar name="John Doe" size="xl" src="https://i.pravatar.cc/96?img=1" />
                <Avatar name="John Doe" size="2xl" src="https://i.pravatar.cc/96?img=1" />
            </Inline>
            <Inline>
                <Avatar name="John Doe" size="xs" src="https://example.com/image.jpg" />
                <Avatar name="John Doe" size="sm" src="https://example.com/image.jpg" />
                <Avatar name="John Doe" size="md" src="https://example.com/image.jpg" />
                <Avatar name="John Doe" size="lg" src="https://example.com/image.jpg" />
                <Avatar name="John Doe" size="xl" src="https://example.com/image.jpg" />
                <Avatar name="John Doe" size="2xl" src="https://example.com/image.jpg" />
            </Inline>
        </Stack>
    );
}
```

##### Disabled

An avatar can be disabled.

```tsx
import { AnonymousAvatar, Avatar, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Avatar name="John Doe" size="lg" isDisabled />
            <Avatar name="John Doe" size="lg" isDisabled src="https://i.pravatar.cc/96?img=1" />
            <AnonymousAvatar aria-label="anonymous" size="lg" isDisabled />
        </Inline>
    );
}
```

##### Pressable

An avatar can be pressed, which will trigger an action when pressed.

```tsx
import { AnonymousAvatar, Avatar, BrokenAvatar, DeletedAvatar, Inline } from "@hopper-ui/components";
import { useCallback } from "react";

export default function Example() {
    const handlePress = useCallback(() => {
        alert("Avatar pressed!");
    }, []);

    return (
        <Inline>
            <Avatar name="John Doe" onPress={handlePress} />
            <DeletedAvatar aria-label="Deleted User" onPress={handlePress} />
            <AnonymousAvatar aria-label="Anonymous User" onPress={handlePress} />
            <BrokenAvatar aria-label="Broken User" onPress={handlePress} />
        </Inline>
    );
}
```

##### Customize the image props

Using a custom hook to retry loading the image up to 5 times with a 250ms delay.

```tsx
import { Avatar, Paragraph, Stack } from "@hopper-ui/components";
import { type ReactEventHandler, useEffect, useState } from "react";

function useAsyncImage(src: string, retryCount = 5, delay = 250) {
    const [currentSrc, setCurrentSrc] = useState(src);
    const [isLoaded, setIsLoaded] = useState(false);
    const [failureCount, setFailureCount] = useState(0);

    useEffect(() => {
        if (isLoaded || failureCount >= retryCount) {
            return;
        }

        const loadImage = () => {
            const image: HTMLImageElement = new Image();

            image.src = currentSrc;

            image.onload = () => {
                setIsLoaded(true);
            };

            image.onerror = () => {
                if (failureCount < retryCount) {
                    setFailureCount(prevCount => prevCount + 1);
                    setCurrentSrc(src); // Trigger retry by resetting src
                }
            };
        };

        const timeoutId = setTimeout(loadImage, delay);

        return () => {
            clearTimeout(timeoutId);
        };
    }, [currentSrc, isLoaded, failureCount, retryCount, delay, src]);

    const onError: ReactEventHandler<HTMLImageElement> | undefined = () => {
        if (failureCount < retryCount) {
            setFailureCount(prevCount => prevCount + 1);
            setCurrentSrc(src); // Manually trigger retry
        }
    };

    return [isLoaded ? currentSrc : undefined, onError, failureCount] as const;
}

export default function Example() {
    const [src, handleError, failureCount] = useAsyncImage("https://example.com/image.jpg");
    const [src2, handleError2, failureCount2] = useAsyncImage("https://i.pravatar.cc/96?img=1");

    return (
        <Stack>
            <Stack alignX="center">
                <Avatar
                    name="John Doe"
                    src={src}
                    imageProps={{ onError: handleError }}
                />
                <Paragraph>The avatar failed to load <strong>{failureCount}</strong> times.</Paragraph>
            </Stack>
            <Stack alignX="center">
                <Avatar
                    name="John Doe"
                    src={src2}
                    imageProps={{ onError: handleError2 }}
                />
                <Paragraph>The avatar failed to load <strong>{failureCount2}</strong> times.</Paragraph>
            </Stack>
        </Stack>
    );
}
```

##### AvatarGroup

An avatar group can be used to display multiple avatars.

```tsx
import { Avatar, AvatarGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <AvatarGroup>
            <Avatar name="John Doe" />
            <Avatar name="Alex Turner" />
            <Avatar name="Chris Dalton" />
        </AvatarGroup>
    );
}
```

###### Too many avatars

When there are too many avatars, a counter will be displayed.

```tsx
import { AnonymousAvatar, Avatar, AvatarGroup, DeletedAvatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <AvatarGroup>
            <Avatar name="John Doe" />
            <Avatar name="Alex Turner" />
            <Avatar name="Chris Dalton" />
            <Avatar name="Alan Turing" />
            <Avatar name="Ada Lovelace" />
            <Avatar name="Grace Hopper" />
            <Avatar name="Marie Curie" />
            <Avatar name="Rosalind Franklin" />
            <DeletedAvatar aria-label="Alan Sheppard" />
            <AnonymousAvatar aria-label="Anonymous" />
        </AvatarGroup>
    );
}
```

###### Sizes

An avatar group can be displayed in different sizes.

```tsx
import { Avatar, AvatarGroup, Stack } from "@hopper-ui/components";

export default function Example() {
    const avatars = [
        <Avatar name="John Doe" />,
        <Avatar name="Alex Turner" />,
        <Avatar name="Chris Dalton" />
    ];

    return (
        <Stack>
            <AvatarGroup size="xs">
                {avatars}
            </AvatarGroup>
            <AvatarGroup size="sm">
                {avatars}
            </AvatarGroup>
            <AvatarGroup size="md">
                {avatars}
            </AvatarGroup>
            <AvatarGroup size="lg">
                {avatars}
            </AvatarGroup>
            <AvatarGroup size="xl">
                {avatars}
            </AvatarGroup>
            <AvatarGroup size="2xl">
                {avatars}
            </AvatarGroup>
        </Stack>
    );
}
```

###### Pressable avatars

An avatar group can have pressable avatars, which will trigger an action when pressed.

```tsx
import { Avatar, AvatarGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <AvatarGroup>
            <Avatar name="John Doe" onPress={() => alert("John Doe")} />
            <Avatar name="Alex Turner" />
            <Avatar name="Chris Dalton" onPress={() => alert("Chris Dalton")} />
        </AvatarGroup>
    );
}
```

###### Max number of avatars

An avatar group can be limited to a maximum number of avatars.

```tsx
import { AnonymousAvatar, Avatar, AvatarGroup, DeletedAvatar } from "@hopper-ui/components";

export default function Example() {
    return (
        <AvatarGroup maxNumberOfAvatar={7}>
            <Avatar name="John Doe" />
            <Avatar name="Alex Turner" />
            <Avatar name="Chris Dalton" />
            <Avatar name="Alan Turing" />
            <Avatar name="Ada Lovelace" />
            <Avatar name="Grace Hopper" />
            <Avatar name="Marie Curie" />
            <Avatar name="Rosalind Franklin" />
            <DeletedAvatar aria-label="Alan Sheppard" />
            <AnonymousAvatar aria-label="Anonynous" />
        </AvatarGroup>
    );
}
```

#### Best Practices

Any time you use an image to communicate a concept in Workleap, it's important to use descriptive alt text. Doing this is important for accessibility because it allows screen readers to describe what's in the image to people who may not be able to see it.

#### Props

##### Avatar

| Prop        | Type                                                                                                 | Default               | Description                                                                                                                                                                        |
| ----------- | ---------------------------------------------------------------------------------------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| fallbackSrc | `string \| null`                                                                                     | "BrokenImageRichIcon" | The src of the image to display if the image fails to load. If set to null, the initials will be displayed instead.                                                                |
| imageProps  | `AvatarImageBaseProps`                                                                               |                       | Props to add to the img element when src is provided.                                                                                                                              |
| isDisabled  | `boolean`                                                                                            |                       | Whether or not the avatar is disabled.                                                                                                                                             |
| name        | `string`                                                                                             |                       | The name of the Avatar. This will be used for the alt text of the image or the initials if no image is provided.                                                                   |
| size        | `ResponsiveProp<AvatarSize>`                                                                         | "md"                  | The size of the avatar.                                                                                                                                                            |
| src         | `string`                                                                                             |                       | The src of the image to display. If not provided, the initials will be displayed instead.                                                                                          |
| className   | `string \| ((values: AvatarRenderProps & { defaultClassName: string; }) => string)`                  |                       | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style       | `CSSProperties \| ((values: AvatarRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)` |                       | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |

###### Events

| Prop    | Type                            | Default | Description                       |
| ------- | ------------------------------- | ------- | --------------------------------- |
| onPress | `((event: PressEvent) => void)` |         | Called when the avatar is pressed |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

##### AvatarGroup

| Prop              | Type                                         | Default | Description                                                                                              |
| ----------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| size              | `ResponsiveProp<AvatarSize>`                 | "md"    | The size of the avatar.                                                                                  |
| maxNumberOfAvatar | `ResponsiveProp<number>`                     | 3       | The maximum number of avatars to show before showing the overflow indicator.                             |
| wrap              | `ResponsiveProp<boolean>`                    | true    | Whether or not to wrap the avatars.                                                                      |
| reverse           | `boolean`                                    |         | Whether or not to reverse the order of the avatars.                                                      |
| align             | `ResponsiveProp<Align>`                      | 'start' | The alignment of the avatars within the AvatarGroup.                                                     |
| children          | `AvatarGroupElement \| AvatarGroupElement[]` |         | The content of the AvatarGroup.                                                                          |
| style             | `CSSProperties`                              |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| className         | `string`                                     |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `retryCount` has been removed.
* `onClick` has been renamed to `onPress` to be closer to the [React Aria API](https://react-spectrum.adobe.com/react-aria/Button.html#events).

### Badge

A badge is used to bring attention to an element.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/badge/src/Badge.tsx>

A badge will communicate a small piece of information that users may be interested in, but would not impede them from achieving their task. They can also display the amount of item for an object.

```tsx
import { Badge } from "@hopper-ui/components";

export default function Example() {
    return (
        <Badge>12</Badge>
    );
}
```

#### Usage

##### Disabled

A disabled badge is usually used inside other components that may be disabled, like a tag or a list box.

```tsx
import { Badge } from "@hopper-ui/components";

export default function Example() {
    return (
        <Badge isDisabled>12</Badge>
    );
}
```

##### Indeterminate

An indeterminate badge is used when the value is unknown or not applicable.

```tsx
import { Badge } from "@hopper-ui/components";

export default function Example() {
    return (
        <Badge />
    );
}
```

##### Variants

The different variants of a badge.

```tsx
import { Badge, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Badge variant="primary">BETA</Badge>
            <Badge variant="secondary">NEW</Badge>
            <Badge variant="subdued">50</Badge>
        </Inline>
    );
}
```

##### High Count

If a value above 99 is needed, use `99+` instead of the number.

```tsx
import { Badge } from "@hopper-ui/components";

export default function Example() {
    return (
        <Badge>99+</Badge>
    );
}
```

##### Text

A badge can have any text content.

```tsx
import { Badge } from "@hopper-ui/components";

export default function Example() {
    return (
        <Badge>New</Badge>
    );
}
```

#### Best Practices

Badges benefit users by:

* Being clearly labeled with short, scannable text
* Being positioned to clearly identify the object they're informing or labelling.

##### Qualificative Badges

Badges can be used to qualify an object with a word or two. Most likely, badges will be used in specific situations, but are not limited to:

* New: to announce a new functionality or feature in Workleap. This badge should have a defined lifespan where at the end it is removed.
* Beta: to highlight that a functionality or feature is being released early to test and gather feedback. This badge should be accompanied by a Popover to provide more information to the user. This badge should have a defined lifespan where at the end it is removed.

##### Quantitative Badges

Badges can also be used to count the number of item for an object. To ensure the best scannability quantitative badges should:

* Not be displayed if the count is at zero.
* Display “+99” if the count goes beyond 99 items.
* Use the same interaction state of the related object.

#### Props

| Prop            | Type                                                                                                | Default   | Description                                                                                                                                                                        |
| --------------- | --------------------------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| variant         | `BadgeVariant`                                                                                      | "primary" | The visual style of the badge.                                                                                                                                                     |
| isDisabled      | `boolean`                                                                                           |           | Whether or not the badge is disabled.                                                                                                                                              |
| isIndeterminate | `boolean`                                                                                           |           | Whether or not the badge is indeterminate and should just be a dot. This will ignore any children.                                                                                 |
| children        | `ReactNode \| ((values: BadgeRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`          |           | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className       | `string \| ((values: BadgeRenderProps & { defaultClassName: string; }) => string)`                  |           | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style           | `CSSProperties \| ((values: BadgeRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)` |           | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `highlight` is not supported.
* `pushed` is not supported.
* `reverse` is not supported, use `flex-direction` or `row-reverse` instead.
* `size` is not supported.
* `variant` has different values.
* `icon` variant it not supported.
* `wrapperProps` has been removed.
* Badge is no longer floating. Use the `FloatingBadge` component to add this feature.
* `FloatingBadge` has new props such as `placement` and `offset`.
* `overlap` is used inside `FloatingBadge` and the new values are `circular` and `rectangular`.

### Box

A flexible container component that can render as any HTML element or React component. Supports all styled system props for consistent spacing, layout, and styling.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/box/src/Box.tsx>

```tsx
import { Box } from "@hopper-ui/components";

export default function Example() {
    return (
        <Box as="div" border="neutral" padding="inset-md">
            Software built for everyone to do their best work.
        </Box>
    );
}
```

#### Best Practices

The `Box` component should not be used in place of standard HTML elements. Use `Div` or `Span` directly for that purpose. `Box` is meant to provide styled system properties to components that already accept `style` and `className`, such as third-party components.

`Box` should:

* Be used to **augment** components (often third-party) with layout/spacing/visual props when those components accept `className`/`style`.
* Keep the DOM **semantic**: always prefer the correct native element, or [use `htmlElement()` function](/styled-system/concepts/html-elements.md) for missing tags, instead of forcing `Box`.
* Use the `as` prop **sparingly**, and typically only to target non-native components (e.g., `as={RACButton}`) or in rare conditional cases where semantics truly change.
* Avoid introducing conflicting layout: prefer composing spacing on the **outermost** appropriate element.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  ```tsx
  import { Box } from "@hopper-ui/components";
  import { Button as RACButton } from "react-aria-components";

  export function Example() {
      return (
          <Box as={RACButton} padding="inset-sm" border="neutral">
              Click me
          </Box>
      );
  }
  ```

  Use Box to add spacing/layout to a third-party component that accepts className/style

* 🚫 Don't:

  ```tsx
  import { Box } from "@hopper-ui/components";

  export function Example() {
      return (
          <>
              <Box display="flex">
                  This should just be a <code>&lt;Inline&gt;</code>
              </Box>
              <Box display="flex" flexDirection="column">
                  This should just be a <code>&lt;Stack&gt;</code>
              </Box>
          </>
      );
  }
  ```

  Use Box as a generic \<Inline> or \<Stack> substitute

**Rule 2**

* ✅ Do:

  ```tsx
  import { htmlElement } from "@hopper-ui/styled-system";

  const IFrame = htmlElement("iframe");

  export function Example() {
      return (
          <IFrame src="https://example.com" width="core_1280" height="core_1280" />
      );
  }
  ```

  Create missing HTML elements with htmlElement() (e.g., IFrame) and use them directly

* 🚫 Don't:

  ```tsx
  import { Box } from "@hopper-ui/components";

  export function Example() {
      return (
          <Box as="iframe" src="https://example.com" />
      );
  }
  ```

  Render missing HTML tags via Box (e.g., \<Box as='iframe'>)

**Rule 3**

* ✅ Do:

  ```tsx
  import { Box } from "@hopper-ui/components";

  export function Example({ isClickable }: { isClickable: boolean }) {
      return (
          <Box as={isClickable ? "button" : "div"}>
              It is acceptable but not recommended
          </Box>
      );
  }
  ```

  Use the 'as' prop to flip between components

**Rule 4**

* 🚫 Don't:

  ```tsx
  import { Box, Card } from "@hopper-ui/components";

  export function Example() {
      return (
          <Box>
              <Box>
                  <Box>
                      <Card>Too many Boxes…</Card>
                  </Box>
              </Box>
          </Box>
      );
  }
  ```

  Wrap everything in Box or use it to override intrinsic spacing/styles of the child component

#### Props

| Prop | Type          | Default | Description                    |
| ---- | ------------- | ------- | ------------------------------ |
| as   | `ElementType` | "div"   | The element type to render as. |

### Button

A button allows a user to initiate an action.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/buttons/src/Button.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/button/>

```tsx
import { Button, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Button>
            <SparklesIcon />
            <Text>Save</Text>
        </Button>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Button>
    <IconList /> /* (Optional) A list of icons in the button */
    <Icon /> /* (Optional) An icon in the button */
    <Text /> /* (Optional) Text in the button, required if using an Icon or an IconList */
</Button>
```

##### Composed Components

A `Button` uses the following components:

| Component | Description                                                                        |
| --------- | ---------------------------------------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon.                                 |
| IconList  | An IconList encapsulates a collection of icons.                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale. |

#### Usage

##### Variants

Each button variant has a particular function and its design signals that function to the user. It is therefore very important that the different variants are implemented consistently across products so that they message the correct actions.

```tsx
import { Button, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Button variant="primary">Save</Button>
            <Button variant="secondary">Save</Button>
            <Button variant="upsell">Save</Button>
            <Button variant="danger">Save</Button>
            <Button variant="ghost-primary">Save</Button>
            <Button variant="ghost-secondary">Save</Button>
            <Button variant="ghost-danger">Save</Button>
        </Inline>
    );
}
```

| Variant   | Purpose                                                                                                                                                                                                                                                                                         |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Primary   | For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header, modal or side panel).                                                                                                                                   |
| Secondary | For secondary actions on each page. Secondary buttons can be used in conjunction with a primary button or on its own. Paired with a Primary button, the secondary button usually performs the negative action of the set, such as “Cancel.”                                                     |
| Ghost     | For less prominent, and sometimes independent, actions. Ghost buttons can be used in isolation or paired with a primary button when there are multiple calls to action. Ghost buttons can also be used for sub-tasks on a page where a primary button for the main and final action is present. |
| Upsell    | For upsell actions that relates to upgrading an account or a plan. Use the upsell button to distinguish from an existing primary button. In some case a primary button can be used in its place when the general context of the page is about upselling.                                        |
| Danger    | For actions that could have destructive effects on the user's data.                                                                                                                                                                                                                             |

##### Sizes

A button can vary in size.

```tsx
import { Button, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Button variant="primary">Save</Button>
            <Button size="sm" variant="primary">Save</Button>
            <Button size="xs" variant="primary">Save</Button>
        </Inline>
    );
}
```

##### Disabled

A button can be disabled.

```tsx
import { Button, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Button isDisabled variant="primary">Save</Button>
            <Button isDisabled variant="ghost-primary">Save</Button>
        </Inline>
    );
}
```

##### Loading

A button can show a loading indicator. The button text is hidden but the button maintains the width that it would have if the text were visible.

```tsx
import { Button, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Button isLoading variant="primary">Save</Button>
            <Button isLoading variant="secondary">Save</Button>
            <Button isLoading variant="upsell">Save</Button>
            <Button isLoading variant="danger">Save</Button>
            <Button isLoading variant="ghost-primary">Save</Button>
            <Button isLoading variant="ghost-secondary">Save</Button>
            <Button isLoading variant="ghost-danger">Save</Button>
        </Inline>
    );
}
```

##### Pending

Buttons can indicate that a quick progress task is taking place (e.g., saving settings on a server). After a 1 second delay, an indeterminate spinner will be displayed in place of the button label and icon.

```tsx
import { Button } from "@hopper-ui/components";
import { useCallback, useState } from "react";

export default function Example() {
    const [isLoading, setIsLoading] = useState(false);

    const handlePress = useCallback(() => {
        setIsLoading(true);

        setTimeout(() => {
            setIsLoading(false);
        }, 3000);
    }, [setIsLoading]);

    return (
        <Button isLoading={isLoading} onPress={handlePress}>
            Click me!
        </Button>
    );
}
```

##### Fluid

A button can be expanded to full width to fill its parent container.

```tsx
import { Button, Inline, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Button isFluid variant="primary">
                Save
            </Button>
            <Button isFluid variant="primary">
                <SparklesIcon />
                <Text>Save</Text>
            </Button>
            <Button isFluid>
                <Text>Save</Text>
                <SparklesIcon slot="end-icon" />
            </Button>
        </Inline>
    );
}
```

##### Icon Only

A button can contain only an icon. An accessible name must be provided through [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) prop. See also [WCAG practices](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html).

```tsx
import { Button, Inline } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Button aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </Button>
            <Button size="sm" aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </Button>
            <Button size="xs" aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </Button>
        </Inline>
    );
}
```

##### Icon

A button can contain icons.

```tsx
import { Button, Inline, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Button aria-label="Save" variant="secondary">
                <SparklesIcon />
                <Text>Save</Text>
            </Button>
            <Button size="sm" aria-label="Save" variant="secondary">
                <SparklesIcon />
                <Text>Save</Text>
            </Button>
            <Button size="xs" aria-label="Save" variant="secondary">
                <SparklesIcon />
                <Text>Save</Text>
            </Button>
        </Inline>
    );
}
```

##### End Icon

Nonstandard end icons can be provided to handle special cases. However, think twice before adding end icons, start icons should be your go-to.

```tsx
import { Button, Inline, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Button aria-label="Save" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Save</Text>
            </Button>
            <Button size="sm" aria-label="Save" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Save</Text>
            </Button>
            <Button size="xs" aria-label="Save" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Save</Text>
            </Button>
        </Inline>
    );
}
```

#### Best Practices

Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it. Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have only one primary button, and any remaining calls to action should be represented as lower emphasis buttons.

##### Emphasis

You don't necessarily need to use the buttons in the order that their labels imply. For example, you don't always need to use the secondary button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your interface. Keep these best practices in mind.

###### A single, high-emphasis button

As a general rule, a layout should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.

###### Multiple button emphasis

A high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. Keep in mind that you should only groups together calls to action that have a relationship to one another.

##### Alignment

Alignment refers to whether the buttons are aligned to the right or the left of a container or layout. Buttons are unique, more so than any other component, in that their alignment depends on where they appear and whether or not they're contained within another component.

As a general rule, on full-page designs, the primary button is on the right side of the page. When the browser window is large and the user is scrolling to read, it's best to have the primary button where the users's attention has been focused all along. Whereas in wizards, where a user is progressing through a series of steps or modal, the primary action traditionally sits at the bottom right. Buttons within components are also right-aligned.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  ```tsx
  import { Button, Text } from "@hopper-ui/components";
  import { SparklesIcon } from "@hopper-ui/icons";

  <Button>
      <SparklesIcon />
      <Text>Save</Text>
  </Button>;
  ```

  When a Button contains anything other than a single text node, the accompanying text must be wrapped in a \<Text> component.

* 🚫 Don't:

  ```tsx
  import { Button } from "@hopper-ui/components";
  import { SparklesIcon } from "@hopper-ui/icons";

  <Button>
      <SparklesIcon />
      Save
  </Button>;
  ```

  Use text without \<Text> if you have anything other than a single text node inside the Button.

**Rule 2**

* ✅ Do:

  ```tsx
  import { Button } from "@hopper-ui/components";

  export default function Example() {
      return (
          <Button>
              Get started
          </Button>
      );
  }
  ```

  Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces.

* 🚫 Don't:

  ```tsx
  import { Button } from "@hopper-ui/components";

  export default function Example() {
      return (
          <Button>
              Get started and enjoy discount!
          </Button>
      );
  }
  ```

  Use punctuation marks such as periods or exclamation points.

**Rule 3**

* ✅ Do:

  Use links when the desired action is to take the user to a new page.

* 🚫 Don't:

  Use buttons as navigational elements.

#### Props

| Prop           | Type                                     | Default   | Description                                                                                                                                                                                                                    |
| -------------- | ---------------------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| variant        | `ButtonVariant`                          | "primary" | The visual style of the button.                                                                                                                                                                                                |
| size           | `ResponsiveProp<ButtonSize>`             | "md"      | A button can vary in size.                                                                                                                                                                                                     |
| isFluid        | `ResponsiveProp<boolean>`                |           | Whether or not the button takes up the width of its container.                                                                                                                                                                 |
| isLoading      | `boolean`                                |           | A button can show a loading indicator.                                                                                                                                                                                         |
| spinnerProps   | `SpinnerProps`                           |           | The props for the Spinner.                                                                                                                                                                                                     |
| form           | `string`                                 |           | The `<form>` element to associate the button with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). |
| style          | `StyleOrFunction<ButtonRenderProps>`     |           | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                              |
| children       | `ChildrenOrFunction<ButtonRenderProps>`  |           | The children of the component. A function may be provided to alter the children based on component state.                                                                                                                      |
| isDisabled     | `boolean`                                |           | Whether the button is disabled.                                                                                                                                                                                                |
| autoFocus      | `boolean`                                |           | Whether the element should receive focus on render.                                                                                                                                                                            |
| type           | `"button" \| "submit" \| "reset"`        | 'button'  | The behavior of the button when used in an HTML form.                                                                                                                                                                          |
| formAction     | `string`                                 |           | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.                                                                                                     |
| formEncType    | `string`                                 |           | Indicates how to encode the form data that is submitted.                                                                                                                                                                       |
| formMethod     | `string`                                 |           | Indicates the HTTP method used to submit the form.                                                                                                                                                                             |
| formNoValidate | `boolean`                                |           | Indicates that the form is not to be validated when it is submitted.                                                                                                                                                           |
| formTarget     | `string`                                 |           | Overrides the target attribute of the button's form owner.                                                                                                                                                                     |
| name           | `string`                                 |           | Submitted as a pair with the button's value as part of the form data.                                                                                                                                                          |
| value          | `string`                                 |           | The value associated with the button's name when it's submitted with the form data.                                                                                                                                            |
| dir            | `string`                                 |           |                                                                                                                                                                                                                                |
| lang           | `string`                                 |           |                                                                                                                                                                                                                                |
| inert          | `boolean`                                |           |                                                                                                                                                                                                                                |
| translate      | `"yes" \| "no"`                          |           |                                                                                                                                                                                                                                |
| className      | `ClassNameOrFunction<ButtonRenderProps>` |           | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                             |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element receives focus.                                                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element loses focus.                                                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`                          |         | Handler that is called when the element's focus status changes.                                                                                                                                           |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is pressed.                                                                                                                                                             |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is released.                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLButtonElement>`                       |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLButtonElement>`                       |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                | Type                                                                                  | Default | Description                                                                                                                                                                                                                                                                                   |
| ------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-disabled       | `boolean \| "true" \| "false"`                                                        |         | Indicates whether the element is disabled to users of assistive technology.                                                                                                                                                                                                                   |
| aria-expanded       | `boolean \| "true" \| "false"`                                                        |         | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.                                                                                                                                                                                   |
| aria-haspopup       | `boolean \| "dialog" \| "menu" \| "grid" \| "true" \| "false" \| "listbox" \| "tree"` |         | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.                                                                                                                                                                |
| aria-controls       | `string`                                                                              |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| aria-pressed        | `boolean \| "true" \| "false" \| "mixed"`                                             |         | Indicates the current "pressed" state of toggle buttons.                                                                                                                                                                                                                                      |
| aria-current        | `boolean \| "time" \| "true" \| "false" \| "page" \| "step" \| "location" \| "date"`  |         | Indicates whether this element represents the current item within a container or set of related elements.                                                                                                                                                                                     |
| preventFocusOnPress | `boolean`                                                                             |         | Whether to prevent focus from moving to the button when pressing it.Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.                  |
| excludeFromTabOrder | `boolean`                                                                             |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id                  | `string`                                                                              |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).                                                                                                                                                                           |
| aria-label          | `string`                                                                              |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby     | `string`                                                                              |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby    | `string`                                                                              |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details        | `string`                                                                              |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `onClick` has been renamed to `onPress` to be closer to the [React Aria API](https://react-spectrum.adobe.com/react-aria/Button.html#events).
* `Counter` is no longer allowed as a specialized slot.
* `ButtonAsLink` is renamed to `LinkButton`.
* `IconButton` is now integrated into the Button component.
* `as(Button, ReactRouterLink)` is now integrated into the Button component.

### ButtonGroup

A button group handles the spacing and orientation for a grouping of buttons.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/buttons/src/ButtonGroup.tsx>

```tsx
import { Button, ButtonGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <ButtonGroup>
            <Button variant="secondary">No, thanks</Button>
            <Button variant="secondary">Remind me later</Button>
            <Button variant="primary">Rate Now</Button>
        </ButtonGroup>
    );
}
```

#### Anatomy

##### Structure

```tsx
<ButtonGroup>
    {/* ButtonGroup requires at least two button components */}
    <Button /> /* A button in the button group */
    <LinkButton /> /* A link button in the button group */
</ButtonGroup>
```

##### Composed Components

A `ButtonGroup` uses the following component.

| Component  | Description                                               |
| ---------- | --------------------------------------------------------- |
| Button     | A button allows a user to initiate an action.             |
| LinkButton | A LinkButton looks like a button but behaves like a link. |

#### Usage

##### Orientation

A button group can render his items vertically.

```tsx
import { Button, ButtonGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <ButtonGroup orientation="vertical">
            <Button variant="secondary">No, thanks</Button>
            <Button variant="secondary">Remind me later</Button>
            <Button variant="primary">Rate Now</Button>
        </ButtonGroup>
    );
}
```

##### Alignment

A button group can change the alignment of his items.

```tsx
import { Button, ButtonGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <ButtonGroup width="100%" align="end">
            <Button variant="secondary">No, thanks</Button>
            <Button variant="secondary">Remind me later</Button>
            <Button variant="primary">Rate Now</Button>
        </ButtonGroup>
    );
}
```

##### Disabled

A button group can be disabled.

```tsx
import { Button, ButtonGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <ButtonGroup isDisabled>
            <Button variant="secondary">No, thanks</Button>
            <Button variant="secondary">Remind me later</Button>
            <Button variant="primary">Rate Now</Button>
        </ButtonGroup>
    );
}
```

##### Fluid

A button group can be fluid.

```tsx
import { Button, ButtonGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <ButtonGroup isFluid>
            <Button variant="secondary">No, thanks</Button>
            <Button variant="secondary">Remind me later</Button>
            <Button variant="primary">Rate Now</Button>
        </ButtonGroup>
    );
}
```

##### Sizes

A button group can be of different sizes.

```tsx
import { Button, ButtonGroup, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <ButtonGroup>
                <Button variant="secondary">No, thanks</Button>
                <Button variant="secondary">Remind me later</Button>
                <Button variant="primary">Rate Now</Button>
            </ButtonGroup>
            <ButtonGroup size="sm">
                <Button variant="secondary">No, thanks</Button>
                <Button variant="secondary">Remind me later</Button>
                <Button variant="primary">Rate Now</Button>
            </ButtonGroup>
            <ButtonGroup size="xs">
                <Button variant="secondary">No, thanks</Button>
                <Button variant="secondary">Remind me later</Button>
                <Button variant="primary">Rate Now</Button>
            </ButtonGroup>
        </Stack>
    );
}
```

#### Best Practices

##### Emphasis

You don't necessarily need to use the buttons in the order that their labels imply. For example, you don't always need to use the secondary button as the second button in your layout. The most important thing is to establish a visual hierarchy between the buttons in your interface. Keep these best practices in mind.

###### A single, high-emphasis button

As a general rule, a layout should contain a single high-emphasis button that makes it clear that other buttons have less importance in the hierarchy. This high-emphasis button commands the most attention.

###### Multiple button emphasis

A high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions. Keep in mind that you should only groups together calls to action that have a relationship to one another.

##### Alignment

Alignment refers to whether the buttons are aligned to the right or the left of a container or layout. Buttons are unique, more so than any other component, in that their alignment depends on where they appear and whether or not they're contained within another component.

As a general rule, on full-page designs, the primary button is on the right side of the page. When the browser window is large and the user is scrolling to read, it's best to have the primary button where the users's attention has been focused all along. Whereas in wizards, where a user is progressing through a series of steps or modal, the primary action traditionally sits at the bottom right. Buttons within components are also right-aligned.

#### Props

| Prop        | Type                          | Default      | Description                                                                                              |
| ----------- | ----------------------------- | ------------ | -------------------------------------------------------------------------------------------------------- |
| orientation | `ResponsiveProp<Orientation>` | 'horizontal' | The axis the ButtonGroup should align with.                                                              |
| isDisabled  | `boolean`                     |              | Whether the Buttons in the ButtonGroup are all disabled.                                                 |
| isFluid     | `ResponsiveProp<boolean>`     |              | Whether the Buttons in the ButtonGroup are all fluid.                                                    |
| size        | `ResponsiveProp<ButtonSize>`  | "md"         | The size of the buttons in the ButtonGroup.                                                              |
| wrap        | `ResponsiveProp<boolean>`     | true         | Whether elements are forced onto one line or can wrap onto multiple rows.                                |
| align       | `ResponsiveProp<Align>`       | 'start'      | The alignment of the buttons within the ButtonGroup.                                                     |
| style       | `CSSProperties`               |              | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children    | `ReactNode`                   |              | The children of the component.                                                                           |
| className   | `string`                      |              | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `fluid` has been renamed `isFluid`.
* `disabled` has been renamed `isDisabled`.

### Calendar

A calendar displays one or more date grids and allows users to select a single date.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/calendar/src/Calendar.tsx>

```tsx
import { Calendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Calendar aria-label="Appointment date" />
    );
}
```

#### Usage

##### Value

A Calendar has no selection by default. An initial, uncontrolled value can be provided to the Calendar using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.

Date values are provided using objects in the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.

Calendar supports values with both date and time components, but only allows users to modify the date. By default, Calendar will emit `CalendarDate` objects in the onChange event, but if a `CalendarDateTime` or `ZonedDateTime` object is passed as the value or defaultValue, values of that type will be emitted, changing only the date and preserving the time components.

```tsx
import { Calendar, Inline, type DateValue } from "@hopper-ui/components";
import { parseDate } from "@internationalized/date";
import { useState } from "react";

export default function Example() {
    const [value, setValue] = useState<DateValue>(parseDate("2020-02-03"));

    return (
        <Inline>
            <Calendar
                aria-label="Date (uncontrolled)"
                defaultValue={parseDate("2020-02-03")}
            />
            <Calendar
                aria-label="Date (controlled)"
                value={value}
                onChange={setValue}
            />
        </Inline>
    );
}
```

##### Controlled

A calendar can handle value state in controlled mode.

```tsx
import { Calendar, Paragraph, Stack, type DateValue } from "@hopper-ui/components";
import { getLocalTimeZone, parseDate } from "@internationalized/date";
import { useState } from "react";
import { useDateFormatter } from "react-aria";

export default function Example() {
    const [date, setDate] = useState<DateValue>(parseDate("2020-02-03"));
    const formatter = useDateFormatter({ dateStyle: "full" });

    return (
        <Stack>
            <Calendar
                aria-label="Date (controlled)"
                value={date}
                onChange={setDate}
            />
            <Paragraph>Selected date: {formatter.format(date.toDate(getLocalTimeZone()))}</Paragraph>
        </Stack>
    );
}
```

##### Multi-month

Multiple CalendarGrid elements can be rendered to show multiple months at once. The `visibleMonths` prop should be provided to the Calendar component to specify how many months are visible.

```tsx
import { Calendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Calendar aria-label="Appointment date" visibleMonths={3} />
    );
}
```

###### Page Behavior

The `pageBehavior` prop allows you to control how the calendar navigates between months. By default, the calendar will navigate by `visibleMonths`, but by setting `pageBehavior` to `single`, pagination will be by one month.

```tsx
import { Calendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Calendar aria-label="Appointment date" visibleMonths={3} pageBehavior="single" />
    );
}
```

###### Fixed weeks

The `isFixedWeeks` prop allows you to control whether the calendar displays fixed weeks. By default, the calendar will display variable weeks, but by setting `isFixedWeeks` to true, all months will be displayed with 6 weeks. This ensures that the height of the calendar does not change when navigating between months.

```tsx
import { Calendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Calendar aria-label="Appointment date" isFixedWeeks />
    );
}
```

##### Validation

###### Min and Max

The `minValue` and `maxValue` props can be used to limit the range of dates that a user can select.

```tsx
import { Calendar } from "@hopper-ui/components";
import { getLocalTimeZone, today } from "@internationalized/date";

export default function Example() {
    return (
        <Calendar aria-label="Appointment date" minValue={today(getLocalTimeZone())} />
    );
}
```

###### Unavailable Dates

Calendar supports marking certain dates as unavailable. These dates remain focusable with the keyboard so that navigation is consistent, but cannot be selected by the user. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.

This example includes multiple unavailable date ranges, e.g. dates when no appointments are available. In addition, all weekends are unavailable. The `minValue` prop is also used to prevent selecting dates before today.

```tsx
import { Calendar, useLocale, type DateValue } from "@hopper-ui/components";
import { getLocalTimeZone, isWeekend, today } from "@internationalized/date";

export default function Example() {
    const now = today(getLocalTimeZone());
    const disabledRanges = [
        [now, now.add({ days: 5 })],
        [now.add({ days: 14 }), now.add({ days: 16 })],
        [now.add({ days: 23 }), now.add({ days: 24 })]
    ];

    const { locale } = useLocale();
    const getIsDateUnavailable = (date: DateValue) =>
        isWeekend(date, locale) ||
        disabledRanges.some(interval => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);

    return (
        <Calendar aria-label="Appointment date" minValue={today(getLocalTimeZone())} isDateUnavailable={getIsDateUnavailable} />
    );
}
```

###### Error message

Calendar tries to avoid allowing the user to select invalid dates in the first place. However, if according to application logic a selected date is invalid, the `isInvalid` prop can be set. This alerts assistive technology users that the selection is invalid, and can be used for styling purposes as well. In addition, the errorMessage slot may be used to help the user fix the issue.

This example validates that the selected date is a weekday and not a weekend according to the current locale.

```tsx
import { Calendar, useLocale, type DateValue } from "@hopper-ui/components";
import { isWeekend, parseDate } from "@internationalized/date";
import { useState } from "react";

export default function Example() {
    const [date, setDate] = useState<DateValue>(parseDate("2023-06-25"));
    const { locale } = useLocale();
    const isInvalid = isWeekend(date, locale);

    return (
        <Calendar
            aria-label="Appointment date"
            value={date}
            onChange={setDate}
            isInvalid={isInvalid}
            errorMessage="We are closed on weekends"
        />
    );
}
```

##### Disabled

A calendar can be disabled.

```tsx
import { Calendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Calendar aria-label="Appointment date" isDisabled />
    );
}
```

##### Read-only

A calendar can be read-only.

```tsx
import { Calendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Calendar aria-label="Appointment date" isReadOnly />
    );
}
```

##### Custom First Day of the Week

By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to "sun", "mon", "tue", "wed", "thu", "fri", or "sat".

```tsx
import { Calendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <Calendar aria-label="Appointment date" firstDayOfWeek="mon" />
    );
}
```

#### Props

| Prop                | Type                                                          | Default  | Description                                                                                                                                                                                                                                      |
| ------------------- | ------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| errorMessage        | `ReactNode`                                                   |          | The error message to display when the calendar is invalid.                                                                                                                                                                                       |
| visibleMonths       | `number`                                                      | 1        | The number of months to display at once.                                                                                                                                                                                                         |
| isFixedWeeks        | `boolean`                                                     | false    | Whether the calendar should always display 6 weeks.                                                                                                                                                                                              |
| style               | `StyleOrFunction<CalendarRenderProps>`                        |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                |
| minValue            | `DateValue \| null`                                           |          | The minimum allowed date that a user may select.                                                                                                                                                                                                 |
| maxValue            | `DateValue \| null`                                           |          | The maximum allowed date that a user may select.                                                                                                                                                                                                 |
| isDateUnavailable   | `((date: DateValue) => boolean)`                              |          | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                                                                         |
| isDisabled          | `boolean`                                                     | false    | Whether the calendar is disabled.                                                                                                                                                                                                                |
| isReadOnly          | `boolean`                                                     | false    | Whether the calendar value is immutable.                                                                                                                                                                                                         |
| autoFocus           | `boolean`                                                     | false    | Whether to automatically focus the calendar when it mounts.                                                                                                                                                                                      |
| focusedValue        | `DateValue \| null`                                           |          | Controls the currently focused date within the calendar.                                                                                                                                                                                         |
| defaultFocusedValue | `DateValue \| null`                                           |          | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                                                                         |
| isInvalid           | `boolean`                                                     |          | Whether the current selection is invalid according to application logic.                                                                                                                                                                         |
| pageBehavior        | `PageBehavior`                                                | visible  | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                                                                              |
| firstDayOfWeek      | `"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat"` |          | The day that starts the week.                                                                                                                                                                                                                    |
| selectionAlignment  | `"center" \| "start" \| "end"`                                | 'center' | Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection.                                                                                                        |
| value               | `DateValue \| null`                                           |          | The current value (controlled).                                                                                                                                                                                                                  |
| defaultValue        | `DateValue \| null`                                           |          | The default value (uncontrolled).                                                                                                                                                                                                                |
| createCalendar      | `((identifier: CalendarIdentifier) => Calendar)`              |          | A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the `createCalendar` function from `@internationalized/date` will be used. |
| className           | `ClassNameOrFunction<CalendarRenderProps>`                    |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                               |
| dir                 | `string`                                                      |          |                                                                                                                                                                                                                                                  |
| lang                | `string`                                                      |          |                                                                                                                                                                                                                                                  |
| inert               | `boolean`                                                     |          |                                                                                                                                                                                                                                                  |
| translate           | `"yes" \| "no"`                                               |          |                                                                                                                                                                                                                                                  |

###### Events

| Prop                        | Type                                     | Default | Description                                           |
| --------------------------- | ---------------------------------------- | ------- | ----------------------------------------------------- |
| onFocusChange               | `((date: CalendarDate) => void)`         |         | Handler that is called when the focused date changes. |
| onChange                    | `((value: DateValue) => void)`           |         | Handler that is called when the value changes.        |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                       |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                       |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                       |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                       |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                       |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                       |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                       |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                       |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                       |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                       |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                       |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                       |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                       |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                       |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                       |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                       |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                       |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                       |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                       |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                       |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                       |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                       |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                       |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                       |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                       |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                       |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                       |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                       |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

### Callout

A Callout informs users about important changes or persistent conditions. Use this component to communicate to users in a prominent way. Callouts are placed at the top of the page or section they apply to, and below the page or section header.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/callout/src/Callout.tsx>

```tsx
import { Button, Callout, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <Callout onClose={() => alert("Closed")}>
            <Heading>New users will be automatically invited</Heading>
            <Content>You have selected to automatically invite users when they are created.</Content>
            <Button >Undo</Button>
        </Callout>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Callout>
    <Header /> /* (Optional) A header for the callout */
    <Content /> /* (Required) The main content of the callout */
    <Button /> /* (Optional) A button for the callout */
    <RichIcon /> /* (Optional) A rich icon for the callout */
</Callout>
```

##### Composed Components

A `Callout` uses the following components:

| Component | Description                                                 |
| --------- | ----------------------------------------------------------- |
| Button    | A button allows a user to initiate an action.               |
| Content   | A placeholder for the main content section of a component.  |
| Header    | A placeholder for an header section.                        |
| RichIcon  | A rich icon component is used to render a rich custom icon. |

#### Usage

##### Variants

A callout can use different variants.

```tsx
import { Button, Callout, Content, Heading, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <Callout onClose={() => alert("Closed")}>
                <Heading>New users will be automatically invited</Heading>
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button >Undo</Button>
            </Callout>
            <Callout onClose={() => alert("Closed")} variant="success">
                <Heading>New users will be automatically invited</Heading>
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button >Undo</Button>
            </Callout>
            <Callout onClose={() => alert("Closed")} variant="warning">
                <Heading>New users will be automatically invited</Heading>
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button >Undo</Button>
            </Callout>
            <Callout onClose={() => alert("Closed")} variant="upsell">
                <Heading>New users will be automatically invited</Heading>
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button >Undo</Button>
            </Callout>
        </Stack>

    );
}
```

##### Hide Icon

A callout can hide the icon in scenarios where it takes up too much space, such as very small breakpoints.

```tsx
import { Button, Callout, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <Callout onClose={() => alert("Closed")} hideIcon>
            <Heading>New users will be automatically invited</Heading>
            <Content>You have selected to automatically invite users when they are created.</Content>
            <Button >Undo</Button>
        </Callout>
    );
}
```

##### Custom Icon

A callout can have a custom rich icon.

```tsx
import { Button, Callout, Content, Heading } from "@hopper-ui/components";
import { IdeaRichIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Callout onClose={() => alert("Closed")}>
            <IdeaRichIcon />
            <Heading>New users will be automatically invited</Heading>
            <Content>You have selected to automatically invite users when they are created.</Content>
            <Button >Undo</Button>
        </Callout>
    );
}
```

##### Dismissable

A callout is only dismissable when `onClose` prop is set.

Here's an example without `onClose`.

```tsx
import { Button, Callout, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <Callout>
            <Heading>New users will be automatically invited</Heading>
            <Content>You have selected to automatically invite users when they are created.</Content>
            <Button >Undo</Button>
        </Callout>
    );
}
```

##### Inline callout

Within a container, a callout shouldn't have borders. Here's an example of a callout inside a Card.

```tsx
import { Button, Callout, Card, Content, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <Card padding="core_240">
            <Callout onClose={() => alert("Closed")} fillStyle="subtleFill">
                <Heading>New users will be automatically invited</Heading>
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button >Undo</Button>
            </Callout>
        </Card>
    );
}
```

#### Best Practices

Callouts should:

* Be used thoughtfully and sparingly for only the most important information.
* Not be used to call attention to what a user needs to do in the interface instead of making the action clear in the UI itself.
* Not be the primary entry point to information or actions users need to take.
* Remove the icon only in scenarios where it takes up too much space, such as very small breakpoints.

##### Placement

Callouts should be place in the appropriate context:

* Callouts relevant to an entire page should be placed at the top of that page, below the page header. They should occupy the full width of the content area.
* Callouts related to a section of a page should be placed inside that section, below any section heading. These callouts have less spacing and a pared-back design to fit within a content context.
* Banner related to an element more specific than a section should be placed immediately above or below that element.

#### Props

##### Callout

| Prop      | Type                       | Default       | Description                                                                                              |
| --------- | -------------------------- | ------------- | -------------------------------------------------------------------------------------------------------- |
| variant   | `CalloutVariant`           | "information" | The overall hue of the callout.                                                                          |
| fillStyle | `"border" \| "subtleFill"` | "border"      | The appearance of the callout.                                                                           |
| hideIcon  | `ResponsiveProp<boolean>`  |               | If true, the callout won't have an icon                                                                  |
| style     | `CSSProperties`            |               | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children  | `ReactNode`                |               | The children of the component.                                                                           |
| className | `string`                   |               | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Events

| Prop    | Type           | Default | Description                                                   |
| ------- | -------------- | ------- | ------------------------------------------------------------- |
| onClose | `(() => void)` |         | Callback function that happens when the callout is dismissed. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

### Card

Cards are used to group similar concepts and tasks to make it easier for users to scan, read and get things done.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/card/src/Card.tsx>

```tsx
import { Card } from "@hopper-ui/components";

export default function Example() {
    return (
        <Card padding="inset-squish-lg" maxWidth="1/2">
            Software built for everyone to do their best work
        </Card>
    );
}
```

#### Usage

##### Variants

A card can use different variants. Second-level cards need to be used within a first-level card.

| Variant      | Purpose                                                                                                                                                                                |
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| main         | Main cards are used to set the first level of content of the page. They use neutral-surface and border-weak tokens with no elevation. Most content is intended to be set in this card. |
| second-level | Second-level cards are used to group elements that are interactive within a main card with an overarching context, like a small form. They use a neutral-surface-weak token.           |

```tsx
import { Card, H2, H3, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Card padding="inset-squish-lg" width="3/4" gap="stack-md">
            <H2>Roles</H2>
            <Card gap="stack-md" padding="inset-squish-lg" variant="second-level">
                <H3>Manager</H3>
                <Text>A manager leads team operations, aligns goals, and fosters a productive work environment to achieve results.</Text>
            </Card>
        </Card>
    );
}
```

##### Sections

A card can use a header, content, and footer section.

```tsx
import { Card, H3, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Card gap="inline-lg" padding="inset-squish-lg" UNSAFE_maxWidth="30rem" width="100%">
            <H3>Developer</H3>
            <Text>
                A developer builds and maintains software, ensuring functionality, performance, and alignment with project goals.
            </Text>
            <Text>Start date : <em>September 13th</em></Text>
        </Card>
    );
}
```

##### Layout Samples

To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in [Orbiter](https://wl-orbiter-website.netlify.app/?path=/docs/card--default-story).

###### Default

```tsx
import { Card, H3, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Card padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%" gap="stack-md">
            <H3>NASA Headquarters</H3>
            <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
        </Card>
    );
}
```

###### Image

```tsx
import { Card, H3, Image, Stack, Text } from "@hopper-ui/components";

import SpaceLandscape from "./assets/space-landscape.png";

export default function Example() {
    return (
        <Card UNSAFE_maxWidth="30rem" width="100%" overflow="hidden">
            <Image src={SpaceLandscape.src} alt="Space landscape" objectFit="cover" width="100%" UNSAFE_height="8rem" />
            <Stack padding="inset-lg">
                <H3>NASA Headquarters</H3>
                <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
            </Stack>
        </Card>
    );
}
```

###### Illustration

```tsx
import { Card, Flex, H3, Image, Stack, Text } from "@hopper-ui/components";

import planet from "./assets/planet.png";

export default function Example() {
    return (
        <Card UNSAFE_maxWidth="30rem" width="100%" overflow="hidden">
            <Flex UNSAFE_height="8rem" backgroundColor="primary-weak" alignItems="center" justifyContent="center">
                <Image src={planet.src} alt="Planet" />
            </Flex>
            <Stack padding="inset-lg">
                <H3 marginBottom="inline-lg">NASA Headquarters</H3>
                <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
            </Stack>
        </Card>
    );
}
```

###### Size

```tsx
import { Card, H3, Inline, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline gap="inline-sm" wrap="wrap">
            <Card padding="inset-lg" UNSAFE_maxWidth="16rem" width="100%" gap="stack-md">
                <H3>XS Card</H3>
                <Text>
                    300 E. Street SW, Suite 5R30
                    <br />
                    Washington, DC 20546
                    <br />
                    (202) 358-0001 (Office)
                    <br />
                    (202) 358-4338 (Fax)
                </Text>
            </Card>
            <Card padding="inset-lg" UNSAFE_maxWidth="20rem" width="100%" gap="stack-md">
                <H3>SM Card</H3>
                <Text>
                    300 E. Street SW, Suite 5R30
                    <br />
                    Washington, DC 20546
                    <br />
                    (202) 358-0001 (Office)
                    <br />
                    (202) 358-4338 (Fax)
                </Text>
            </Card>
            <Card padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%" gap="stack-md">
                <H3>MD Card</H3>
                <Text>
                    300 E. Street SW, Suite 5R30
                    <br />
                    Washington, DC 20546
                    <br />
                    (202) 358-0001 (Office)
                    <br />
                    (202) 358-4338 (Fax)
                </Text>
            </Card>
            <Card padding="inset-lg" UNSAFE_maxWidth="35rem" width="100%" gap="stack-md">
                <H3>LG Card</H3>
                <Text>
                    300 E. Street SW, Suite 5R30
                    <br />
                    Washington, DC 20546
                    <br />
                    (202) 358-0001 (Office)
                    <br />
                    (202) 358-4338 (Fax)
                </Text>
            </Card>
            <Card padding="inset-lg" UNSAFE_maxWidth="40rem" width="100%" gap="stack-md">
                <H3>XL Card</H3>
                <Text>
                    300 E. Street SW, Suite 5R30
                    <br />
                    Washington, DC 20546
                    <br />
                    (202) 358-0001 (Office)
                    <br />
                    (202) 358-4338 (Fax)
                </Text>
            </Card>
        </Inline>
    );
}
```

###### Button

```tsx
import { Button, Card, H3, Inline, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Card padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%" gap="stack-md">
            <Inline alignX="space-between" wrap gap="inline-md">
                <H3>NASA Headquarters</H3>
                <Text>No visitors allowed.</Text>
            </Inline>
            <Text>NASA Headquarters, officially known as Mary W. Jackson NASA Headquarters or NASA HQ and formerly named Two Independence Square, is a low-rise office building in the two-building Independence Square complex at 300 E Street SW in Washington, D.C.</Text>
            <Button variant="secondary">Plan a visit</Button>
        </Card>
    );
}
```

###### Button group

```tsx
import { Button, ButtonGroup, Card, H3, Stack, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Card gap="stack-md" padding="inset-lg" UNSAFE_maxWidth="30rem" width="100%">
            <H3>NASA Headquarters</H3>
            <Stack>
                <Text>
                    300 E. Street SW, Suite 5R30
                    <br />
                    Washington, DC 20546
                    <br />
                    (202) 358-0001 (Office)
                    <br />
                    (202) 358-4338 (Fax)
                    <br />
                </Text>
                <em>Any trespassers are going to be sent in space.</em>
            </Stack>
            <ButtonGroup>
                <Button>Plan a visit</Button>
                <Button variant="secondary">Cancel a booking</Button>
            </ButtonGroup>
        </Card>
    );
}
```

###### Orientation

```tsx
import { Card, Flex, H3, Image, Stack, Text } from "@hopper-ui/components";

import planet from "./assets/planet.png";

export default function Example() {
    return (
        <Card UNSAFE_maxWidth="30rem" width="100%" display="grid" gridTemplateAreas={["image aside"]} gridTemplateColumns={["max-content", "auto"]} alignItems="start" overflow="hidden" >
            <Flex height="100%" backgroundColor="primary-weak" alignItems="center" justifyContent="center" padding="inset-md">
                <Image src={planet.src} alt="Planet" />
            </Flex>
            <Stack padding="inset-lg">
                <H3>NASA</H3>
                <Text>
                    300 E. Street SW, Suite 5R30
                    <br />
                    Washington, DC 20546
                    <br />
                    (202) 358-0001 (Office)
                    <br />
                    (202) 358-4338 (Fax)
                </Text>
                <em>Please note that we are moving from December 12th to December 23rd.</em>
            </Stack>
        </Card>
    );
}
```

###### Fluid

```tsx
import { Card, Flex, H3, Image, Stack, Text } from "@hopper-ui/components";

import planet from "./assets/planet.png";

export default function Example() {
    return (
        <Card display="grid" gridTemplateAreas={["image aside"]} gridTemplateColumns={["max-content", "auto"]} width="100%" overflow="hidden" >
            <Flex backgroundColor="primary-weak" alignItems="center" justifyContent="center" padding="inset-md">
                <Image src={planet.src} alt="Planet" />
            </Flex>
            <Stack padding="inset-lg">
                <H3>NASA</H3>
                <Text>
                    300 E. Street SW, Suite 5R30
                    <br />
                    Washington, DC 20546
                    <br />
                    (202) 358-0001 (Office)
                    <br />
                    (202) 358-4338 (Fax)
                </Text>
                <em>Please note that we are moving from December 12th to December 23rd.</em>
            </Stack>
        </Card>
    );
}
```

#### Best Practices

Cards are used to group related information together. They follow a specific hierarchy to help users scan through content easily. Whatever the level of hierarchy, Cards all share a 8px border radius.

Cards should:

* Display information that prioritizes what the user needs to know most first.
* Use headings that set clear expectations about the card's purpose.
* Avoid too many CTA or links and only one primary CTA per card

#### Props

| Prop      | Type                       | Default | Description                                                                                              |
| --------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| variant   | `"main" \| "second-level"` | "main"  | The visual style of the card.                                                                            |
| elevation | `"flat" \| "elevated"`     | "flat"  | Whether the card has a shadow or not.                                                                    |
| style     | `CSSProperties`            |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children  | `ReactNode`                |         | The children of the component.                                                                           |
| className | `string`                   |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `outline` variant has been renamed `main`.
* `elevated` variant has been renamed `second-level`. You shouldn't use a `second-level` variant without a parent `main` variant.
* `orientation` has been removed. Refer to this [sample](#orientation) to see an implementation example.
* `fluid` prop has been removed. Refer to this [sample](#fluid) to see an implementation example.
* `size` has been removed. Refer to this [sample](#size) to quickly match old sizes.
* The Hopper Card component does not include predefined layouts; developers are responsible for implementing any required [layouts](#migration-notes-layout-samples) to meet their specific needs..

### Checkbox

Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/checkbox/src/Checkbox.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/>

```tsx
import { Checkbox } from "@hopper-ui/components";

export default function Example() {
    return (
        <Checkbox>Developer</Checkbox>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Checkbox>
    <IconList /> /* (Optional) A list of icons in the checkbox */
    <Icon /> /* (Optional) An icon in the checkbox */
    <Text /> /* (Optional) Text in the checkbox, required if using an Icon or an IconList */
</Checkbox>
```

##### Composed Components

A `Checkbox` uses the following components:

| Component | Description                                                                        |
| --------- | ---------------------------------------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon.                                 |
| IconList  | An IconList encapsulates a collection of icons.                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale. |

#### Usage

##### No Label

A checkbox can be rendered without a label.

```tsx
import { Checkbox } from "@hopper-ui/components";

export default function Example() {
    return (
        <Checkbox aria-label="Developer" />
    );
}
```

##### Checked

A checkbox can be checked.

```tsx
import { Checkbox } from "@hopper-ui/components";

export default function Example() {
    return (
        <Checkbox defaultSelected>Developer</Checkbox>
    );
}
```

##### Indeterminate

A checkbox can be indeterminate.

```tsx
import { Checkbox } from "@hopper-ui/components";

export default function Example() {
    return (
        <Checkbox isSelected isIndeterminate>Developer</Checkbox>
    );
}
```

##### Disabled

A checkbox can be disabled.

```tsx
import { Checkbox } from "@hopper-ui/components";

export default function Example() {
    return (
        <Checkbox isDisabled>Developer</Checkbox>
    );
}
```

##### Read-only

A checkbox can be read-only.

```tsx
import { Checkbox } from "@hopper-ui/components";

export default function Example() {
    return (
        <Checkbox isReadOnly>Developer</Checkbox>
    );
}
```

##### Invalid

A checkbox can be invalid.

```tsx
import { Checkbox } from "@hopper-ui/components";

export default function Example() {
    return (
        <Checkbox isInvalid>Developer</Checkbox>
    );
}
```

##### Sizes

A checkbox can vary in size.

```tsx
import { Checkbox, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Checkbox size="sm">Developer</Checkbox>
            <Checkbox size="md">Designer</Checkbox>
        </Inline>
    );
}
```

##### Icon

A checkbox can be rendered with an icon or an icon list.

```tsx
import { Checkbox, IconList, Inline, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Checkbox>
                <Text>Developer</Text>
                <SparklesIcon />
            </Checkbox>
            <Checkbox>
                <Text>Designer</Text>
                <IconList>
                    <SparklesIcon />
                    <SparklesIcon />
                </IconList>
            </Checkbox>
        </Inline>
    );
}
```

##### Description

A checkbox can have a description to provide more information to the user.

```tsx
import { Checkbox, CheckboxField } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxField description="Team Manager">
            <Checkbox>Manager</Checkbox>
        </CheckboxField>
    );
}
```

#### Best Practices

Checkboxes should:

* Work independently from each other. Selecting one checkbox should not change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection of multiple items.
* Be framed positively.
* Always have a label when used to activate or deactivate a setting.
* Be listed according to a logical order, whether it's alphabetically, numerical, time-based, or some other clear system.
* Link to more information or include a helper text as required to provide more explanation. Don't rely on tooltips to explain a checkbox.

You can use checkboxes in many situations, such as:

* Forms: that can be in a full-page layout, in a modal or a panel.
* Filtering and batch action: to filter data either on a page, in a menu, or within a component. Checkboxes can be used in Tables for batch editing purposes.
* Tiles: to perform a selection over a collection of tiles that are related to one another.

##### Alignment

Checkbox labels are positioned to the right of their inputs. If there is a checkbox grouping, they can be laid out vertically. When possible, arrange the checkbox and radio button groups vertically for easier reading.

##### Placement

The checkbox component is often used in forms. Forms can be placed on a full page, in a modal or in a side panel. A checkbox can also be used for agreeing to terms and conditions or to filter information. Checkboxes in a form should be placed at least 24px below of before the next component. There's a space of 8px between each checkbox within a grouping.

##### Overflow content

We recommend checkbox labels being fewer than three words. If you are tight on space, consider rewording the label. Do not truncate checkbox label text with an ellipsis. Long labels may wrap to a second line, and this is preferable than truncation. The text should wrap beneath the checkbox so the control and label are top aligned.

##### Checkbox vs. Switch

Checkbox and Switch components are very similar in term of results when used in a form. However, a few details tell them apart.

* Checkbox component can offer multiple options to the user, while the Switch only offers one.
* Users can select none to any option with checkboxes, while the Switch always have one active selection at all time (either “on” or “off” position)
* Choices offered in checkbox grouping are independant from each other, while the Switch's mutually exclusive.
* The Switch's selection takes effect immediately, while the checkbox only happens once the user applied the change.

##### Behaviors

###### States

The checkbox input allows for a series of states: unselected, selected and indeterminate. The default view of a set of checkboxes is have no option selected. Use the indeterminate state when the checkbox contains a sublist of selections, some of which are selected, and some unselected.

###### Interactions

Users can trigger an item by clicking the checkbox input directly or by clicking the checkbox label. Having both regions interactive create a more accessible click target. The only hover effect when the mouse is placed over the target is a pointer shape change.

#### Props

##### Checkbox

| Prop               | Type                                                    | Default  | Description                                                                                                                                                                                                                               |
| ------------------ | ------------------------------------------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| size               | `ResponsiveProp<FieldSize>`                             | "md"     | A checkbox can vary in size.                                                                                                                                                                                                              |
| form               | `string`                                                |          | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).              |
| style              | `StyleOrFunction<CheckboxRenderProps>`                  |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                         |
| children           | `ChildrenOrFunction<CheckboxRenderProps>`               |          | The children of the component. A function may be provided to alter the children based on component state.                                                                                                                                 |
| validationBehavior | `"native" \| "aria"`                                    | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                            |
| isIndeterminate    | `boolean`                                               |          | Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.                                                                                                                     |
| value              | `string`                                                |          | The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).                                                                           |
| defaultSelected    | `boolean`                                               |          | Whether the element should be selected (uncontrolled).                                                                                                                                                                                    |
| isSelected         | `boolean`                                               |          | Whether the element should be selected (controlled).                                                                                                                                                                                      |
| isDisabled         | `boolean`                                               |          | Whether the input is disabled.                                                                                                                                                                                                            |
| isReadOnly         | `boolean`                                               |          | Whether the input can be selected but not changed by the user.                                                                                                                                                                            |
| isRequired         | `boolean`                                               |          | Whether user input is required on the input before form submission.                                                                                                                                                                       |
| isInvalid          | `boolean`                                               |          | Whether the input value is invalid.                                                                                                                                                                                                       |
| validate           | `((value: boolean) => true \| ValidationError \| null)` |          | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead. |
| autoFocus          | `boolean`                                               |          | Whether the element should receive focus on render.                                                                                                                                                                                       |
| name               | `string`                                                |          | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                             |
| dir                | `string`                                                |          |                                                                                                                                                                                                                                           |
| lang               | `string`                                                |          |                                                                                                                                                                                                                                           |
| inert              | `boolean`                                               |          |                                                                                                                                                                                                                                           |
| translate          | `"yes" \| "no"`                                         |          |                                                                                                                                                                                                                                           |
| inputRef           | `RefObject<HTMLInputElement \| null>`                   |          | A ref for the HTML input element.                                                                                                                                                                                                         |
| className          | `ClassNameOrFunction<CheckboxRenderProps>`              |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                        |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onChange                    | `((isSelected: boolean) => void)`                         |         | Handler that is called when the element's selection state changes.                                                                                                                                        |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element receives focus.                                                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element loses focus.                                                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`                          |         | Handler that is called when the element's focus status changes.                                                                                                                                           |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is pressed.                                                                                                                                                             |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is released.                                                                                                                                                            |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLLabelElement>`                        |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLLabelElement>`                        |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                | Type      | Default | Description                                                                                                                                                                                                                                                                                   |
| ------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-controls       | `string`  |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| excludeFromTabOrder | `boolean` |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id                  | `string`  |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).                                                                                                                                                                           |
| aria-label          | `string`  |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby     | `string`  |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby    | `string`  |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details        | `string`  |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |
| aria-errormessage   | `string`  |         | Identifies the element that provides an error message for the object.                                                                                                                                                                                                                         |

##### CheckboxField

| Prop        | Type                                                                                                        | Default | Description                                                                                                                                                                        |
| ----------- | ----------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| description | `ReactNode`                                                                                                 |         | The description of the checkbox field.                                                                                                                                             |
| isDisabled  | `boolean`                                                                                                   |         | Whether the checkbox field is disabled.                                                                                                                                            |
| size        | `ResponsiveProp<FieldSize>`                                                                                 | "md"    | A checkbox field can vary in size.                                                                                                                                                 |
| children    | `ReactNode \| ((values: CheckboxFieldRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`          |         | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className   | `string \| ((values: CheckboxFieldRenderProps & { defaultClassName: string; }) => string)`                  |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style       | `CSSProperties \| ((values: CheckboxFieldRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)` |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `onChange` signature has been changed (no event are passed).
* `onValueChange` has been deleted, use `onChange` instead.
* `checked` has been renamed to `isSelected`.
* `disabled` has been renamed to `isDisabled`.
* `required` has been renamed to `isRequired`.
* `indeterminate` has been renamed to `isIndeterminate`.
* `defaultIndeterminate` prop has been removed.
* The `Counter` component is no longer allowed as a specialized slot.
* `reverse` is not supported, use `flex-direction` or `row-reverse` instead.
* `validationState` has been removed. Use `isInvalid` instead. There is no `isValid`.
* Values are not auto-generated when missed.

### CheckboxGroup

A checkbox group handles the spacing and orientation for a grouping of checkboxes, as well as providing a label.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/checkbox/src/CheckboxGroup.tsx>

```tsx
import { Checkbox, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup label="Roles">
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
        </CheckboxGroup>
    );
}
```

#### Anatomy

##### Structure

```tsx
<CheckboxGroup>
    <Checkbox /> /* (Required) A checkbox within the group */
</CheckboxGroup>
```

##### Composed Components

A `CheckboxGroup` uses the following components:

| Component | Description                                                                                                                                                                                                                   |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Checkbox  | Checkboxes are used for multiple choices, not for mutually exclusive choices. Each checkbox works independently from other checkboxes in the list, therefore checking an additional box does not affect any other selections. |

#### Usage

##### Read-only

A checkbox group can be read-only.

```tsx
import { Checkbox, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup isReadOnly label="Roles">
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
        </CheckboxGroup>
    );
}
```

##### Disabled

A checkbox group can be disabled.

```tsx
import { Checkbox, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup isDisabled label="Roles">
            <Checkbox value="option1">Developer</Checkbox>
            <Checkbox value="option2">Designer</Checkbox>
        </CheckboxGroup>
    );
}
```

##### Invalid

A checkbox group can be invalid.

```tsx
import { Checkbox, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup isInvalid label="Roles">
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
        </CheckboxGroup>
    );
}
```

##### Sizes

A checkbox group can vary in size.

```tsx
import { Checkbox, CheckboxGroup, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline gap="inline-xl">
            <CheckboxGroup size="sm" label="Roles">
                <Checkbox value="developer">Developer</Checkbox>
                <Checkbox value="designer">Designer</Checkbox>
            </CheckboxGroup>
            <CheckboxGroup size="md" label="Roles">
                <Checkbox value="developer">Designer</Checkbox>
                <Checkbox value="designer">Developer</Checkbox>
            </CheckboxGroup>
        </Inline>
    );
}
```

##### No Label

A checkbox group can be rendered without a label.

```tsx
import { Checkbox, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup aria-label="Roles">
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
        </CheckboxGroup>
    );
}
```

##### Description

A checkbox group can have a description to provide more information to the user.

```tsx
import { Checkbox, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup label="Roles" description="Select one to continue">
            <Checkbox value="option1">Developer</Checkbox>
            <Checkbox value="option2">Designer</Checkbox>
        </CheckboxGroup>
    );
}
```

##### Bordered

A checkbox group can be bordered.

```tsx
import { Checkbox, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup variant="bordered" label="Roles">
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
        </CheckboxGroup>
    );
}
```

##### Orientation

A checkbox group can have a different orientation.

```tsx
import { Checkbox, CheckboxGroup, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline gap="inline-xl">
            <CheckboxGroup orientation="horizontal" label="Roles">
                <Checkbox value="developer">Developer</Checkbox>
                <Checkbox value="designer">Designer</Checkbox>
            </CheckboxGroup>
            <CheckboxGroup orientation="vertical" label="Roles">
                <Checkbox value="developer">Developer</Checkbox>
                <Checkbox value="designer">Designer</Checkbox>
            </CheckboxGroup>
        </Inline>
    );
}
```

##### Fluid

A checkbox group can be expanded to full width to fill its parent container.

```tsx
import { Checkbox, CheckboxField, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup variant="bordered" isFluid label="Roles">
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
            <CheckboxField description="Team Manager">
                <Checkbox value="manager">Manager</Checkbox>
            </CheckboxField>
        </CheckboxGroup>
    );
}
```

##### Controlled

A checkbox group can handle value state in controlled mode.

```tsx
import { Checkbox, CheckboxGroup } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selected, setSelected] = useState<string[]>(["designer"]);

    return (
        <CheckboxGroup
            label="Roles"
            onChange={setSelected}
            value={selected}
        >
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
            <Checkbox value="manager">Manager</Checkbox>
        </CheckboxGroup>
    );
}
```

##### Description on Items

A checkbox can have a description to provide more information to the user.

```tsx
import { Checkbox, CheckboxField, CheckboxGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup label="Roles">
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
            <CheckboxField description="Team Manager">
                <Checkbox value="manager">Manager</Checkbox>
            </CheckboxField>
        </CheckboxGroup>
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a CheckboxGroup.

```tsx
import { Checkbox, CheckboxGroup, ContextualHelp } from "@hopper-ui/components";

export default function Example() {
    return (
        <CheckboxGroup label="Roles" contextualHelp={<ContextualHelp>This is a list of roles in the project</ContextualHelp>}>
            <Checkbox value="developer">Developer</Checkbox>
            <Checkbox value="designer">Designer</Checkbox>
        </CheckboxGroup>
    );
}
```

#### Best Practices

Checkboxes should:

* Work independently from each other. Selecting one checkbox should not change the selection status of another checkbox in the list. The exception is when a checkbox is used to make a bulk selection of multiple items.
* Be framed positively.
* Always have a label when used to activate or deactivate a setting.
* Be listed according to a logical order, whether it's alphabetically, numerical, time-based, or some other clear system.
* Link to more information or include a helper text as required to provide more explanation. Don't rely on tooltips to explain a checkbox.

You can use checkboxes in many situations, such as:

* Forms: that can be in a full-page layout, in a modal or a panel.
* Filtering and batch action: to filter data either on a page, in a menu, or within a component. Checkboxes can be used in Tables for batch editing purposes.
* Tiles: to perform a selection over a collection of tiles that are related to one another.

##### Alignment

Checkbox labels are positioned to the right of their inputs. If there is a checkbox grouping, they can be laid out vertically. When possible, arrange the checkbox and radio button groups vertically for easier reading.

##### Placement

The checkbox component is often used in forms. Forms can be placed on a full page, in a modal or in a side panel. A checkbox can also be used for agreeing to terms and conditions or to filter information. Checkboxes in a form should be placed at least 24px below of before the next component. There's a space of 8px between each checkbox within a grouping.

##### Overflow content

We recommend checkbox labels being fewer than three words. If you are tight on space, consider rewording the label. Do not truncate checkbox label text with an ellipsis. Long labels may wrap to a second line, and this is preferable than truncation. The text should wrap beneath the checkbox so the control and label are top aligned.

##### Checkbox vs. Switch

Checkbox and Switch components are very similar in term of results when used in a form. However, a few details tell them apart.

* Checkbox component can offer multiple options to the user, while the Switch only offers one.
* Users can select none to any option with checkboxes, while the Switch always have one active selection at all time (either “on” or “off” position)
* Choices offered in checkbox grouping are independant from each other, while the Switch's mutually exclusive.
* The Switch's selection takes effect immediately, while the checkbox only happens once the user applied the change.

#### Props

| Prop               | Type                                                     | Default      | Description                                                                                                                                                                                                                               |
| ------------------ | -------------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| listProps          | `CheckboxListProps`                                      |              | The props of the list element that wraps the Checkbox components.                                                                                                                                                                         |
| orientation        | `ResponsiveProp<Orientation>`                            | "vertical"   | A CheckboxGroup can be displayed horizontally or vertically.                                                                                                                                                                              |
| variant            | `InputGroupVariant`                                      | "borderless" | A CheckboxGroup has two variants: borderless and bordered.                                                                                                                                                                                |
| isFluid            | `ResponsiveProp<boolean>`                                | false        | If `true`, the CheckboxGroup will take all available width.                                                                                                                                                                               |
| form               | `string`                                                 |              | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).              |
| style              | `StyleOrFunction<CheckboxGroupRenderProps>`              |              | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                         |
| children           | `ChildrenOrFunction<CheckboxGroupRenderProps>`           |              | The children of the component. A function may be provided to alter the children based on component state.                                                                                                                                 |
| validationBehavior | `"native" \| "aria"`                                     | 'native'     | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                            |
| name               | `string`                                                 |              | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                             |
| value              | `string[]`                                               |              | The current value (controlled).                                                                                                                                                                                                           |
| defaultValue       | `string[]`                                               |              | The default value (uncontrolled).                                                                                                                                                                                                         |
| isDisabled         | `boolean`                                                |              | Whether the input is disabled.                                                                                                                                                                                                            |
| isReadOnly         | `boolean`                                                |              | Whether the input can be selected but not changed by the user.                                                                                                                                                                            |
| isRequired         | `boolean`                                                |              | Whether user input is required on the input before form submission.                                                                                                                                                                       |
| isInvalid          | `boolean`                                                |              | Whether the input value is invalid.                                                                                                                                                                                                       |
| validate           | `((value: string[]) => true \| ValidationError \| null)` |              | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead. |
| className          | `ClassNameOrFunction<CheckboxGroupRenderProps>`          |              | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                        |
| dir                | `string`                                                 |              |                                                                                                                                                                                                                                           |
| lang               | `string`                                                 |              |                                                                                                                                                                                                                                           |
| inert              | `boolean`                                                |              |                                                                                                                                                                                                                                           |
| translate          | `"yes" \| "no"`                                          |              |                                                                                                                                                                                                                                           |
| description        | `ReactNode`                                              |              | The helper message of the field.                                                                                                                                                                                                          |
| errorMessage       | `ReactNode \| ((v: ValidationResult) => ReactNode)`      |              | The error message of the field.                                                                                                                                                                                                           |
| label              | `ReactNode`                                              |              | The label of the field.                                                                                                                                                                                                                   |
| necessityIndicator | `NecessityIndicator`                                     |              | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                    |
| size               | `ResponsiveProp<FieldSize>`                              | "md"         | A Field can vary in size.                                                                                                                                                                                                                 |
| contextualHelp     | `ReactNode`                                              |              | A ContextualHelp element to place next to the label.                                                                                                                                                                                      |

###### Events

| Prop                        | Type                                          | Default | Description                                                     |
| --------------------------- | --------------------------------------------- | ------- | --------------------------------------------------------------- |
| onChange                    | `((value: string[]) => void)`                 |         | Handler that is called when the value changes.                  |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element receives focus.         |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element loses focus.            |
| onFocusChange               | `((isFocused: boolean) => void)`              |         | Handler that is called when the element's focus status changes. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onScroll                    | `UIEventHandler<HTMLDivElement>`              |         |                                                                 |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`              |         |                                                                 |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`           |         |                                                                 |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop              | Type     | Default | Description                                                                                                         |
| ----------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id                | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label        | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby   | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby  | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details      | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| aria-errormessage | `string` |         | Identifies the element that provides an error message for the object.                                               |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `onChange` signature has been changed – no events are passed.
* `disabled` has been renamed to `isDisabled`.
* `required` has been renamed to `isRequired`.
* `fluid` has been renamed to `isFluid`.
* `reverse` is not supported, use `flex-direction` or `row-reverse` instead.
* `autofocus` is not supported. You must put `autofocus` on the actual Checkbox.
* The default orientation is now vertical instead of horizontal.
* `validationState` is removed. use `isInvalid` instead. There is no `isValid`.
* `wrap` is removed. If horizontal, radios will wrap.
* There is no `align` prop. If needed, the styled system can be used.
* The `inline` prop is not available.

### ComboBox

A combo box allows the user to make a selection from a list of suggested, likely or desired values.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/combobox/src/ComboBox.tsx>

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox label="Roles">
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

#### Anatomy

##### Structure

```tsx
<ComboBox>
    <ComboBoxItem> /* (Required) The items of the combo box */
        <Avatar /> /* (Optional) An avatar for the item */
        <Text /> /* (Optional) The text content of the item, required if using another element */
        <Text slot="description" /> /* (Optional) A description for the item */
        <Badge /> /* (Optional) A badge for the item */
        <Icon /> /* (Optional) An icon for the item */
    </ComboBoxItem>
    <ComboBoxSection> /* (Optional) A section of combo box items */
        <Header /> /* (Optional) A header for the section */
        <ComboBoxItem /> /* (Required) An item in the ComboBoxSection */
    </ComboBoxSection>
</ComboBox>
```

##### Composed Components

A `ComboBox` uses the following components:

| Component | Description                                                                                                                                        |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Avatar    | Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available. |
| Badge     | A badge is used to bring attention to an element.                                                                                                  |
| Header    | A placeholder for an header section.                                                                                                               |
| Icon      | An icon component is used to render a custom icon.                                                                                                 |
| Text      | A text component is a primitive component matching Hopper's typography type scale.                                                                 |

#### Usage

##### Disabled

A combo box in a disabled state shows that it exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox isDisabled label="Roles">
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Disabled Item

A combo box with a disabled item.

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox label="Roles">
            <ComboBoxItem id="designer" isDisabled>Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Error

A combo box can be displayed in an error state to indicate that the selection is invalid.

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox isInvalid label="Roles" errorMessage="This field is required">
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Sizes

A combo box has multiple sizes to choose from. The combo box option also changes size based on the size of the combo box.

```tsx
import { ComboBox, ComboBoxItem, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <ComboBox size="sm" label="Roles">
                <ComboBoxItem id="designer">Designer</ComboBoxItem>
                <ComboBoxItem id="developer">Developer</ComboBoxItem>
                <ComboBoxItem id="manager">Manager</ComboBoxItem>
            </ComboBox>
            <ComboBox size="md" label="Roles">
                <ComboBoxItem id="designer">Designer</ComboBoxItem>
                <ComboBoxItem id="developer">Developer</ComboBoxItem>
                <ComboBoxItem id="manager">Manager</ComboBoxItem>
            </ComboBox>
        </Stack>
    );
}
```

##### Labeling

If a visible label isn't specified, an `aria-label` must be provided to the combo box for accessibility. If the field is labeled by a separate element, an `aria-labelledby` prop must be provided using the ID of the labeling element instead.

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox label="Roles">
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Icon Prefix

An icon can be displayed at the start of the select trigger.

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";
import { OrgChartIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <ComboBox prefix={<OrgChartIcon />} label="Roles">
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Text Prefix

A short text can be displayed at the start of the select trigger.

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox
            prefix="Operations"
            label="Roles"
        >
            <ComboBoxItem id="project-coordinator">Project Coordinator</ComboBoxItem>
            <ComboBoxItem id="qa-specialist">QA Specialist</ComboBoxItem>
            <ComboBoxItem id="system-administrator">System Administrator</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Fluid

A combo box can take the width of its container.

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox isFluid label="Roles">
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Controlled

A combo box can have a controlled selected value. In this example, it shows how it is possible to deselect an option.

```tsx
import { ComboBox, ComboBoxItem, ComboBoxSection, Header, type Key } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selectedKey, setSelectedKey] = useState<Key | null>();

    const handleSelectionChange = (key: Key | null) => {
        if (selectedKey === key) {
            setSelectedKey(null);
        } else {
            setSelectedKey(key);
        }
    };

    return (
        <ComboBox selectedKey={selectedKey} onSelectionChange={handleSelectionChange} label="Roles">
            <ComboBoxSection>
                <Header>Operations</Header>
                <ComboBoxItem id="1">Project Coordinator</ComboBoxItem>
                <ComboBoxItem id="2">QA Specialist</ComboBoxItem>
            </ComboBoxSection>
            <ComboBoxItem id="3">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Custom Filtering

A combo box can overridde the default [useFilter](https://react-spectrum.adobe.com/react-aria/useFilter.html) function from RAC. This can be overridden using the `defaultFilter` prop, or by using the `items` prop to control the filtered list. When `items` is provided rather than `defaultItems`, combo box does no filtering of its own.

```tsx
import { ComboBox, ComboBoxItem, useFilter } from "@hopper-ui/components";
import { useMemo, useState } from "react";

const ROLE_OPTIONS = [
    { id: 1, name: "Designer" },
    { id: 2, name: "Developer" },
    { id: 3, name: "Manager" },
    { id: 4, name: "QA Engineer" },
    { id: 5, name: "Product Owner" },
    { id: 6, name: "Scrum Master" },
    { id: 7, name: "UX Researcher" },
    { id: 8, name: "Business Analyst" },
    { id: 9, name: "DevOps Engineer" },
    { id: 10, name: "Data Scientist" }
];

export default function Example() {
    const filter = useFilter({ sensitivity: "base" });
    const [filterValue, setFilterValue] = useState("");

    const filteredItems = useMemo(() => {
        return ROLE_OPTIONS.filter(item => filter.startsWith(item.name, filterValue));
    }, [filter, filterValue]);

    return (
        <ComboBox
            items={filteredItems}
            inputValue={filterValue}
            onInputChange={setFilterValue}
            label="Roles"
        >
            {item => <ComboBoxItem id={item.id}>{item.name}</ComboBoxItem>}
        </ComboBox>
    );
}
```

##### Allow Empty Collection

A combo box can be rendered with an empty collection. If you want the popover to open with a custom message, you can use the `renderEmptyState` prop within the `listBoxProps` prop.

```tsx
import { ComboBox } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox
            allowsEmptyCollection
            label="Roles"
            listBoxProps={{
                renderEmptyState: () => "No roles found"
            }}
        >
            {[]}
        </ComboBox>
    );
}
```

##### Allow Custom Value

A combo box can allow the user to enter a custom value that does not match the list.

```tsx
import { ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox allowsCustomValue label="Roles">
            <ComboBoxSection>
                <Header>Creative Department</Header>
                <ComboBoxItem id="1">Designer</ComboBoxItem>
                <ComboBoxItem id="2">Content creator</ComboBoxItem>
            </ComboBoxSection>
            <ComboBoxItem id="3">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Form

A combo box can be part of a form. To submit the value of a combo box, make sure you specify the `name` property.

```tsx
import { ComboBox, ComboBoxItem, Form } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form>
            <ComboBox name="Roles" label="Roles">
                <ComboBoxItem id="designer">Designer</ComboBoxItem>
                <ComboBoxItem id="developer">Developer</ComboBoxItem>
                <ComboBoxItem id="manager">Manager</ComboBoxItem>
            </ComboBox>
        </Form>
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a ComboBox.

```tsx
import { ComboBox, ComboBoxItem, ContextualHelp } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox label="Roles" contextualHelp={<ContextualHelp>This is a list of roles in the project</ContextualHelp>}>
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Auto Menu Width

A combo box can have a menu that automatically adjusts its width based on the longest item.

```tsx
import { ComboBox, ComboBoxItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox
            aria-label="list of options with a description"
            isAutoMenuWidth
            label="Roles"
        >
            <ComboBoxItem textValue="Developer">
                <Text>Developer</Text>
                <Text slot="description">Builds, tests, and maintains software.</Text>
            </ComboBoxItem>
            <ComboBoxItem textValue="Designer">
                <Text>Designer</Text>
                <Text slot="description">Creates visually appealing, functional solutions.</Text>
            </ComboBoxItem>
            <ComboBoxItem textValue="Manager">
                <Text>Manager</Text>
                <Text slot="description">Responsible for leading and overseeing a team or department to ensure organizational goals are met.</Text>
            </ComboBoxItem>
        </ComboBox>
    );
}
```

##### Menu placement

A combo box's menu can have a customized menu placement using the `direction` and `align` props.

```tsx
import { ComboBox, ComboBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox
            label="Roles"
            align="end"
            direction="top"
        >
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Section

A combo box can have sections and section headers.

```tsx
import { ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox label="Roles">
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
            <ComboBoxSection>
                <Header>Operations</Header>
                <ComboBoxItem id="project-coordinator">Project Coordinator</ComboBoxItem>
                <ComboBoxItem id="qa-specialist">QA Specialist</ComboBoxItem>
            </ComboBoxSection>
            <ComboBoxSection>
                <Header>Creative Department</Header>
                <ComboBoxItem id="designer">Designer</ComboBoxItem>
                <ComboBoxItem id="copywriter">Copywriter</ComboBoxItem>
                <ComboBoxItem id="ux-researcher">UX Researcher</ComboBoxItem>
            </ComboBoxSection>
        </ComboBox>
    );
}
```

##### Footer

A combo box can have a footer.

```tsx
import { Button, ComboBox, ComboBoxItem, Text } from "@hopper-ui/components";
import { AddIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <ComboBox
            label="Roles"
            footer={(
                <Button variant="ghost-secondary" isFluid>
                    <AddIcon />
                    <Text>Add</Text>
                </Button>
            )}
        >
            <ComboBoxItem id="developer">Developer</ComboBoxItem>
            <ComboBoxItem id="designer">Designer</ComboBoxItem>
            <ComboBoxItem id="manager">Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Avatar

A combo box item can contain an avatar.

```tsx
import { Avatar, ComboBox, ComboBoxItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox label="Username">
            <ComboBoxItem id="fred-smith" textValue="Fred Smith" >
                <Avatar src="https://i.pravatar.cc/96?img=3" name="Fred Smith" />
                <Text>Fred Smith</Text>
            </ComboBoxItem>
            <ComboBoxItem id="karen-smith" textValue="Karen Smith" >
                <Avatar name="Karen Smith" />
                <Text>Karen Smith</Text>
            </ComboBoxItem>
            <ComboBoxItem id="john-doe" textValue="John Doe" >
                <Avatar name="John Doe" />
                <Text>John Doe</Text>
            </ComboBoxItem>
        </ComboBox>
    );
}
```

##### Count

A combo box item can contain a count using a badge.

```tsx
import { Badge, ComboBox, ComboBoxItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox label="Roles">
            <ComboBoxItem textValue="Designer">
                <Text>Designer</Text>
                <Badge>50</Badge>
            </ComboBoxItem>
            <ComboBoxItem textValue="Developer">
                <Text>Developer</Text>
                <Badge variant="secondary">99+</Badge>
            </ComboBoxItem>
            <ComboBoxItem>Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Dynamic Lists

Options and sections can be populated from a hierarchial data structure. If a section has a header, the `Collection` component can be used to render the child items.

```tsx
import { Collection, ComboBox, ComboBoxItem, ComboBoxSection, Header } from "@hopper-ui/components";

const OPTIONS_WITH_SECTIONS = [
    {
        role: "Operations", children: [
            { id: 2, role: "Project Coordinator" },
            { id: 3, role: "QA Specialist" },
            { id: 4, role: "System Administrator" }
        ]
    },
    {
        role: "Creative Department", children: [
            { id: 6, role: "Designer" },
            { id: 7, role: "Designer" },
            { id: 8, role: "UX Researcher" }
        ]
    }
];

export default function Example() {
    return (
        <ComboBox
            items={OPTIONS_WITH_SECTIONS}
            label="Section"
        >
            {section => {
                const { role: sectionName, children } = section;

                return (
                    <ComboBoxSection id={sectionName}>
                        <Header>{sectionName}</Header>
                        <Collection items={children}>
                            {item => <ComboBoxItem id={item.id}>{item.role}</ComboBoxItem>}
                        </Collection>
                    </ComboBoxSection>
                );
            }}
        </ComboBox>
    );
}
```

##### Icons

A combo box item can contain icons.

```tsx
import { ComboBox, ComboBoxItem, IconList, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <ComboBox label="Roles">
            <ComboBoxItem textValue="Developer">
                <Text>Developer</Text>
                <IconList>
                    <SparklesIcon /><SparklesIcon /><SparklesIcon />
                </IconList>
            </ComboBoxItem>
            <ComboBoxItem textValue="Designer">
                <SparklesIcon /><Text>Designer</Text>
            </ComboBoxItem>
            <ComboBoxItem>Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### End Icons

A combo box can contain icons at the end of an option.

```tsx
import { ComboBox, ComboBoxItem, IconList, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <ComboBox label="Roles">
            <ComboBoxItem textValue="Designer">
                <Text>Designer</Text>
                <IconList slot="end-icon">
                    <SparklesIcon /><SparklesIcon /><SparklesIcon />
                </IconList>
            </ComboBoxItem>
            <ComboBoxItem textValue="Developer">
                <SparklesIcon slot="end-icon" /><Text>Developer</Text>
            </ComboBoxItem>
            <ComboBoxItem>Manager</ComboBoxItem>
        </ComboBox>
    );
}
```

##### Loading

A combo box can have a loading state.

```tsx
import { ComboBox } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox
            label="Roles"
            isLoading
        >
            {[]}
        </ComboBox>
    );
}
```

##### Load on scroll

A combo box can load more items when scrolling within.

```tsx
import { ComboBox, ComboBoxItem, useAsyncList } from "@hopper-ui/components";

interface Character {
    name: string;
}

export default function Example() {
    const list = useAsyncList<Character>({
        async load({ signal, cursor }) {
            const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", {
                signal
            });
            const json = await res.json();

            return {
                items: json.results,
                cursor: json.next
            };
        }
    });

    return (
        <ComboBox
            label="Roles"
            items={list.items}
            isLoading={list.isLoading}
            onLoadMore={() => list.loadMore()}
            listBoxProps={{
                maxHeight: "core_1280"
            }}
        >
            {item => {
                return <ComboBoxItem id={item.name}>{item.name}</ComboBoxItem>;
            }}
        </ComboBox>
    );
}
```

##### Selection indicator

A combo box can have a different selection indicator.

```tsx
import { ComboBox, ComboBoxItem, Text, type Key } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selectedKey, setSelectedKey] = useState<Key | null>("1");

    return (
        <ComboBox
            aria-label="list of options"
            selectedKey={selectedKey}
            onSelectionChange={setSelectedKey}
            label="Roles"
            selectionIndicator="input"
        >
            <ComboBoxItem textValue="Developer" id="1">
                <Text>Developer</Text>
                <Text slot="description">Builds and maintains software.</Text>
            </ComboBoxItem>
            <ComboBoxItem textValue="Designer" id="2">
                <Text>Designer</Text>
                <Text slot="description">Creates visual design solutions.</Text>
            </ComboBoxItem>
            <ComboBoxItem textValue="Manager" id="3">
                <Text>Manager</Text>
                <Text slot="description">Leads teams and projects.</Text>
            </ComboBoxItem>
        </ComboBox>
    );
}
```

##### Description

A combo box item can have a description.

```tsx
import { ComboBox, ComboBoxItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <ComboBox label="Roles">
            <ComboBoxItem textValue="Developer">
                <Text>Developer</Text>
                <Text slot="description">Builds and maintains software.</Text>
            </ComboBoxItem>
            <ComboBoxItem textValue="Designer">
                <Text>Designer</Text>
                <Text slot="description">Creates visual design solutions.</Text>
            </ComboBoxItem>
            <ComboBoxItem textValue="Manager">
                <Text>Manager</Text>
                <Text slot="description">Leads teams and projects.</Text>
            </ComboBoxItem>
        </ComboBox>
    );
}
```

#### Props

##### ComboBox

| Prop               | Type                                          | Default | Description                                                                                                                                                                                         |
| ------------------ | --------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading          | `boolean`                                     |         | Whether the item is loading.                                                                                                                                                                        |
| size               | `ResponsiveProp<ListBoxItemSize>`             | "sm"    | A ListBoxItem can vary in size.                                                                                                                                                                     |
| isInvalid          | `boolean`                                     |         | Whether or not the ListBoxItem is in an invalid state.                                                                                                                                              |
| selectionIndicator | `SelectionIndicator`                          | "check" | The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode. |
| radioProps         | `DecorativeRadioProps`                        |         | The props for the Radio.                                                                                                                                                                            |
| checkboxProps      | `DecorativeCheckboxProps`                     |         | The props for the Checkbox.                                                                                                                                                                         |
| style              | `StyleOrFunction<ListBoxItemRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                   |
| dir                | `string`                                      |         |                                                                                                                                                                                                     |
| lang               | `string`                                      |         |                                                                                                                                                                                                     |
| inert              | `boolean`                                     |         |                                                                                                                                                                                                     |
| translate          | `"yes" \| "no"`                               |         |                                                                                                                                                                                                     |
| id                 | `Key`                                         |         | The unique id of the item.                                                                                                                                                                          |
| value              | `object`                                      |         | The object value that this item represents. When using dynamic collections, this is set automatically.                                                                                              |
| textValue          | `string`                                      |         | A string representation of the item's contents, used for features like typeahead.                                                                                                                   |
| isDisabled         | `boolean`                                     |         | Whether the item is disabled.                                                                                                                                                                       |
| children           | `ChildrenOrFunction<ListBoxItemRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                                           |
| className          | `ClassNameOrFunction<ListBoxItemRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                  |
| href               | `string`                                      |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                                      |
| hrefLang           | `string`                                      |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                                      |
| target             | `HTMLAttributeAnchorTarget`                   |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                                      |
| rel                | `string`                                      |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                                     |
| download           | `string \| boolean`                           |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).                    |
| ping               | `string`                                      |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                                      |
| referrerPolicy     | `HTMLAttributeReferrerPolicy`                 |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                                    |
| routerOptions      | `undefined`                                   |         | Options for the configured client side router.                                                                                                                                                      |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onAction                    | `(() => void)`                                            |         | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.                                |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                           |
| ---------- | -------- | ------- | ------------------------------------- |
| aria-label | `string` |         | An accessibility label for this item. |

##### ComboBoxSection

| Prop         | Type                                                                                  | Default | Description                                                                                               |
| ------------ | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| style        | `CSSProperties`                                                                       |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.   |
| children     | `ReactNode \| ((item: T) => ReactElement<any, string \| JSXElementConstructor<any>>)` |         | Static child items or a function to render children.                                                      |
| items        | `Iterable<T>`                                                                         |         | Item objects in the section.                                                                              |
| id           | `Key`                                                                                 |         | The unique id of the section.                                                                             |
| value        | `object`                                                                              |         | The object value that this section represents. When using dynamic collections, this is set automatically. |
| dependencies | `readonly any[]`                                                                      |         | Values that should invalidate the item cache when using dynamic collections.                              |
| className    | `string`                                                                              |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.  |
| dir          | `string`                                                                              |         |                                                                                                           |
| lang         | `string`                                                                              |         |                                                                                                           |
| inert        | `boolean`                                                                             |         |                                                                                                           |
| translate    | `"yes" \| "no"`                                                                       |         |                                                                                                           |

###### Events

| Prop                        | Type                                  | Default | Description |
| --------------------------- | ------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |             |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                             |
| ---------- | -------- | ------- | --------------------------------------- |
| aria-label | `string` |         | An accessibility label for the section. |

##### ComboBoxItem

| Prop               | Type                                          | Default | Description                                                                                                                                                                                         |
| ------------------ | --------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading          | `boolean`                                     |         | Whether the item is loading.                                                                                                                                                                        |
| size               | `ResponsiveProp<ListBoxItemSize>`             | "sm"    | A ListBoxItem can vary in size.                                                                                                                                                                     |
| isInvalid          | `boolean`                                     |         | Whether or not the ListBoxItem is in an invalid state.                                                                                                                                              |
| selectionIndicator | `SelectionIndicator`                          | "check" | The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode. |
| radioProps         | `DecorativeRadioProps`                        |         | The props for the Radio.                                                                                                                                                                            |
| checkboxProps      | `DecorativeCheckboxProps`                     |         | The props for the Checkbox.                                                                                                                                                                         |
| style              | `StyleOrFunction<ListBoxItemRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                   |
| dir                | `string`                                      |         |                                                                                                                                                                                                     |
| lang               | `string`                                      |         |                                                                                                                                                                                                     |
| inert              | `boolean`                                     |         |                                                                                                                                                                                                     |
| translate          | `"yes" \| "no"`                               |         |                                                                                                                                                                                                     |
| id                 | `Key`                                         |         | The unique id of the item.                                                                                                                                                                          |
| value              | `object`                                      |         | The object value that this item represents. When using dynamic collections, this is set automatically.                                                                                              |
| textValue          | `string`                                      |         | A string representation of the item's contents, used for features like typeahead.                                                                                                                   |
| isDisabled         | `boolean`                                     |         | Whether the item is disabled.                                                                                                                                                                       |
| children           | `ChildrenOrFunction<ListBoxItemRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                                           |
| className          | `ClassNameOrFunction<ListBoxItemRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                  |
| href               | `string`                                      |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                                      |
| hrefLang           | `string`                                      |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                                      |
| target             | `HTMLAttributeAnchorTarget`                   |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                                      |
| rel                | `string`                                      |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                                     |
| download           | `string \| boolean`                           |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).                    |
| ping               | `string`                                      |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                                      |
| referrerPolicy     | `HTMLAttributeReferrerPolicy`                 |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                                    |
| routerOptions      | `undefined`                                   |         | Options for the configured client side router.                                                                                                                                                      |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onAction                    | `(() => void)`                                            |         | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.                                |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                           |
| ---------- | -------- | ------- | ------------------------------------- |
| aria-label | `string` |         | An accessibility label for this item. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

Assuming you will use ComboBox for the `Autocomplete` of Orbiter.

* `allowFlip` has been renamed `shouldFlip`.
* `allowPreventOverflow` has been removed.
* `boundaryElement` has been removed.
* `clearOnSelect` has been removed.
* `defaultOpen` has been removed.
* `defaultValue` has been renamed `defaultInputValue`.
* `fluid` has been renamed `isFluid`.
* `icon` has been removed.
* `loading` has been renamed `isLoading`.
* `noResultsMessage` has been removed. [See new usage](/components/ComboBox.md#usage-allow-empty-collection).
* `onSearch` has been removed.
* `wrapperProps` has been removed. There is now `popoverProps` for the Popover and `listboxProps` for the Listbox.

### CompactCallout

A CompactCallout informs users about important changes or persistent conditions. Use this component to communicate to users in a prominent way. Callouts are placed at the top of the page or section they apply to, and below the page or section header.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/callout/src/Callout.tsx>

```tsx
import { Button, CompactCallout, Content } from "@hopper-ui/components";

export default function Example() {
    return (
        <CompactCallout>
            <Content>You have selected to automatically invite users when they are created.</Content>
            <Button size="sm">Undo</Button>
        </CompactCallout>
    );
}
```

#### Anatomy

##### Structure

```tsx
<CompactCallout>
    <Content /> /* (Required) The main content of the compact callout */
    <Button /> /* (Optional) A button for the compact callout */
    <Link /> /* (Optional) A link for the compact callout */
</CompactCallout>
```

##### Composed Components

A `CompactCallout` uses the following components:

| Component | Description                                                |
| --------- | ---------------------------------------------------------- |
| Button    | A button allows a user to initiate an action.              |
| Content   | A placeholder for the main content section of a component. |
| Link      | A link allows a user to navigate to a different location.  |

#### Usage

##### Variants

A compact callout can have the same variants.

```tsx
import { Button, CompactCallout, Content, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <CompactCallout>
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button size="sm">Undo</Button>
            </CompactCallout>
            <CompactCallout variant="success">
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button size="sm">Undo</Button>
            </CompactCallout>
            <CompactCallout variant="warning">
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button size="sm">Undo</Button>
            </CompactCallout>
            <CompactCallout>
                <Content>You have selected to automatically invite users when they are created.</Content>
                <Button size="sm">Undo</Button>
            </CompactCallout>
        </Stack>
    );
}
```

##### Link

A compact callout can have either a button or a link as CTA. Here's an example where it's a link.

```tsx
import { CompactCallout, Content, Link } from "@hopper-ui/components";

export default function Example() {
    return (
        <CompactCallout>
            <Content>You have selected to automatically invite users when they are created.</Content>
            <Link size="sm">Learn more</Link>
        </CompactCallout>
    );
}
```

##### Dismissable

Similar to the Callout, the dismiss icon appears only when `onClose` is set.

```tsx
import { Button, CompactCallout, Content } from "@hopper-ui/components";

export default function Example() {
    return (
        <CompactCallout onClose={() => alert("Closed")}>
            <Content>You have selected to automatically invite users when they are created.</Content>
            <Button size="sm">Undo</Button>
        </CompactCallout>
    );
}
```

#### Best Practices

Callouts should:

* Be used thoughtfully and sparingly for only the most important information.
* Not be used to call attention to what a user needs to do in the interface instead of making the action clear in the UI itself.
* Not be the primary entry point to information or actions users need to take.
* Remove the icon only in scenarios where it takes up too much space, such as very small breakpoints.

##### Placement

Callouts should be place in the appropriate context:

* Callouts relevant to an entire page should be placed at the top of that page, below the page header. They should occupy the full width of the content area.
* Callouts related to a section of a page should be placed inside that section, below any section heading. These callouts have less spacing and a pared-back design to fit within a content context.
* Banner related to an element more specific than a section should be placed immediately above or below that element.

#### Props

##### CompactCallout

| Prop      | Type                       | Default       | Description                                                                                              |
| --------- | -------------------------- | ------------- | -------------------------------------------------------------------------------------------------------- |
| style     | `CSSProperties`            |               | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children  | `ReactNode`                |               | The children of the component.                                                                           |
| className | `string`                   |               | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| variant   | `CalloutVariant`           | "information" | The overall hue of the callout.                                                                          |
| fillStyle | `"border" \| "subtleFill"` | "border"      | The appearance of the callout.                                                                           |

###### Events

| Prop    | Type           | Default | Description                                                   |
| ------- | -------------- | ------- | ------------------------------------------------------------- |
| onClose | `(() => void)` |         | Callback function that happens when the callout is dismissed. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

### Content

A placeholder for the main content section of a component.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/layout/src/Content.tsx>

A content placeholder component provides no specific styling by itself, but receives styling from the parent container. In addition, a content placeholder will be automatically placed within the container's layout according to Hopper guidelines.

```tsx
import { Content } from "@hopper-ui/components";

export default function Example() {
    return (
        <Content>Software built for everyone to do their best work.</Content>
    );
}
```

#### Props

| Prop      | Type            | Default | Description                                                                                              |
| --------- | --------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| style     | `CSSProperties` |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children  | `ReactNode`     |         | The children of the component.                                                                           |
| className | `string`        |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

### ContextualHelp

Contextual help shows a user extra information about the state of an adjacent component. It explains a high-level topic about an experience and can point users to more information elsewhere.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/contextual-help/src/ContextualHelp.tsx>

```tsx
import { ContextualHelp } from "@hopper-ui/components";

export default function Example() {
    return (
        <ContextualHelp>
            Hop along, hero!
        </ContextualHelp>
    );
}
```

#### Usage

##### Variants

A contextual help can use different variants.

```tsx
import { ContextualHelp, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <ContextualHelp>
                Hop along, hero!
            </ContextualHelp>
            <ContextualHelp variant="info">
                Hop along, hero!
            </ContextualHelp>
        </Stack>
    );
}
```

##### Sizes

A contextual help can have different sizes.

```tsx
import { ContextualHelp, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <ContextualHelp>
                Hop along, hero!
            </ContextualHelp>
            <ContextualHelp size="md">
                Hop along, hero!
            </ContextualHelp>
        </Stack>
    );
}
```

#### Props

| Prop           | Type                                     | Default  | Description                                                                                                                                                                                                                    |
| -------------- | ---------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| children       | `ReactNode`                              |          | The contents of the ContextualHelp.                                                                                                                                                                                            |
| size           | `ResponsiveProp<IconSize>`               | "sm"     | The size of the ContextualHelp button.                                                                                                                                                                                         |
| popoverProps   | `PopoverBaseProps`                       |          | The props for the Popover                                                                                                                                                                                                      |
| variant        | `"help" \| "info"`                       | "help"   | The visual style of the ContextualHelp.                                                                                                                                                                                        |
| form           | `string`                                 |          | The `<form>` element to associate the button with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#form). |
| style          | `StyleOrFunction<ButtonRenderProps>`     |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                              |
| isDisabled     | `boolean`                                |          | Whether the button is disabled.                                                                                                                                                                                                |
| autoFocus      | `boolean`                                |          | Whether the element should receive focus on render.                                                                                                                                                                            |
| type           | `"button" \| "submit" \| "reset"`        | 'button' | The behavior of the button when used in an HTML form.                                                                                                                                                                          |
| formAction     | `string`                                 |          | The URL that processes the information submitted by the button. Overrides the action attribute of the button's form owner.                                                                                                     |
| formEncType    | `string`                                 |          | Indicates how to encode the form data that is submitted.                                                                                                                                                                       |
| formMethod     | `string`                                 |          | Indicates the HTTP method used to submit the form.                                                                                                                                                                             |
| formNoValidate | `boolean`                                |          | Indicates that the form is not to be validated when it is submitted.                                                                                                                                                           |
| formTarget     | `string`                                 |          | Overrides the target attribute of the button's form owner.                                                                                                                                                                     |
| name           | `string`                                 |          | Submitted as a pair with the button's value as part of the form data.                                                                                                                                                          |
| value          | `string`                                 |          | The value associated with the button's name when it's submitted with the form data.                                                                                                                                            |
| dir            | `string`                                 |          |                                                                                                                                                                                                                                |
| lang           | `string`                                 |          |                                                                                                                                                                                                                                |
| inert          | `boolean`                                |          |                                                                                                                                                                                                                                |
| translate      | `"yes" \| "no"`                          |          |                                                                                                                                                                                                                                |
| isPending      | `boolean`                                |          | Whether the button is in a pending state. This disables press and hover events while retaining focusability, and announces the pending state to screen readers.                                                                |
| className      | `ClassNameOrFunction<ButtonRenderProps>` |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                             |
| isOpen         | `boolean`                                |          | Whether the overlay is open by default (controlled).                                                                                                                                                                           |
| defaultOpen    | `boolean`                                |          | Whether the overlay is open by default (uncontrolled).                                                                                                                                                                         |
| shouldFlip     | `boolean`                                | true     | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.                                                                             |
| offset         | `number`                                 | 8        | The additional offset applied along the main axis between the element and its anchor element.                                                                                                                                  |
| crossOffset    | `number`                                 | 0        | The additional offset applied along the cross axis between the element and its anchor element.                                                                                                                                 |
| placement      | `ResponsiveProp<Placement>`              | "bottom" | The placement of the popover with respect to its anchor element.                                                                                                                                                               |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element receives focus.                                                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element loses focus.                                                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`                          |         | Handler that is called when the element's focus status changes.                                                                                                                                           |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is pressed.                                                                                                                                                             |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is released.                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLButtonElement>`                  |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLButtonElement>`                       |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLButtonElement>`                       |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLButtonElement>`                    |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLButtonElement>`                |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLButtonElement>`               |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onOpenChange                | `((isOpen: boolean) => void)`                             |         | Handler that is called when the overlay's open state changes.                                                                                                                                             |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                | Type                                                                                  | Default | Description                                                                                                                                                                                                                                                                                   |
| ------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-disabled       | `boolean \| "true" \| "false"`                                                        |         | Indicates whether the element is disabled to users of assistive technology.                                                                                                                                                                                                                   |
| aria-expanded       | `boolean \| "true" \| "false"`                                                        |         | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.                                                                                                                                                                                   |
| aria-haspopup       | `boolean \| "dialog" \| "menu" \| "grid" \| "true" \| "false" \| "listbox" \| "tree"` |         | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.                                                                                                                                                                |
| aria-controls       | `string`                                                                              |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| aria-pressed        | `boolean \| "true" \| "false" \| "mixed"`                                             |         | Indicates the current "pressed" state of toggle buttons.                                                                                                                                                                                                                                      |
| aria-current        | `boolean \| "time" \| "true" \| "false" \| "page" \| "step" \| "location" \| "date"`  |         | Indicates whether this element represents the current item within a container or set of related elements.                                                                                                                                                                                     |
| preventFocusOnPress | `boolean`                                                                             |         | Whether to prevent focus from moving to the button when pressing it.Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.                  |
| excludeFromTabOrder | `boolean`                                                                             |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id                  | `string`                                                                              |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).                                                                                                                                                                           |
| aria-label          | `string`                                                                              |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby     | `string`                                                                              |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby    | `string`                                                                              |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details        | `string`                                                                              |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |

### DatePicker

A date picker allows users to select a single date from a calendar.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/date-picker/src/DatePicker.tsx>

```tsx
import { DatePicker } from "@hopper-ui/components";

export default function Example() {
    return (
        <DatePicker label="Appointment date" />
    );
}
```

#### Usage

##### Value

A DatePicker displays a placeholder by default. An initial, uncontrolled value can be provided to the DatePicker using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.

Date values are provided using objects in the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. DatePicker supports values of the following types:

* `CalendarDate` – a date without any time components. May be parsed from a string representation using the parseDate function. Use this type to represent dates where the time is not important, such as a birthday or an all day calendar event.
* `CalendarDateTime` – a date with a time, but not in any specific time zone. May be parsed from a string representation using the parseDateTime function. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a `ZonedDateTime`.
* `ZonedDateTime` – a date with a time in a specific time zone. May be parsed from a string representation using the parseZonedDateTime, parseAbsolute, or parseAbsoluteToLocal functions. Use this type to represent an exact moment in time at a particular location on Earth.

```tsx
import { Stack, type DateValue } from "@hopper-ui/components";
import { parseDate } from "@internationalized/date";
import { useState } from "react";

import { DatePicker } from "../src/index.ts";

export default function Example() {
    const [value, setValue] = useState<DateValue | null>(parseDate("2020-02-03"));

    return (
        <Stack>
            <DatePicker
                label="Date (uncontrolled)"
                defaultValue={parseDate("2020-02-03")}
            />
            <DatePicker
                label="Date (controlled)"
                value={value}
                onChange={setValue}
            />
        </Stack>
    );
}
```

##### Controlled

A DatePicker can handle value state in controlled mode.

```tsx
import { DatePicker, Paragraph, Stack, type DateValue } from "@hopper-ui/components";
import { getLocalTimeZone, parseDate } from "@internationalized/date";
import { useState } from "react";
import { useDateFormatter } from "react-aria";

export default function Example() {
    const [date, setDate] = useState<DateValue | null>(parseDate("1985-07-03"));
    const formatter = useDateFormatter({ dateStyle: "full" });

    return (
        <Stack>
            <DatePicker label="Birth date" value={date} onChange={setDate} />
            <Paragraph>
                Selected date:{" "}
                {date ? formatter.format(date.toDate(getLocalTimeZone())) : "--"}
            </Paragraph>
        </Stack>
    );
}
```

##### Validation

###### Invalid

A DatePicker can be marked as invalid.

```tsx
import { DatePicker } from "@hopper-ui/components";

export default function Example() {
    return (
        <DatePicker
            label="Appointment date"
            isInvalid
            errorMessage="Please select a valid date."
        />
    );
}
```

###### Min and Max

The `minValue` and `maxValue` props can be used to limit the range of dates that a user can select.

```tsx
import { DatePicker, type DateValue } from "@hopper-ui/components";
import { getLocalTimeZone, parseDate, today } from "@internationalized/date";
import { useState } from "react";

export default function Example() {
    const [value, setValue] = useState<DateValue | null>(parseDate("2022-02-03"));

    return (
        <DatePicker
            label="Appointment date"
            minValue={today(getLocalTimeZone())}
            value={value}
            onChange={setValue}
        />
    );
}
```

###### Unavailable Dates

DatePicker supports marking certain dates as unavailable. These dates remain focusable with the keyboard in the calendar so that navigation is consistent, but cannot be selected by the user. When an unavailable date is entered into the date field, it is marked as invalid. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.

This example includes multiple unavailable date ranges, e.g. dates when no appointments are available. In addition, all weekends are unavailable. The `minValue` prop is also used to prevent selecting dates before today.

```tsx
import { DatePicker, useLocale, type DateValue } from "@hopper-ui/components";
import { getLocalTimeZone, isWeekend, today } from "@internationalized/date";

export default function Example() {
    const now = today(getLocalTimeZone());
    const disabledRanges = [
        [now, now.add({ days: 5 })],
        [now.add({ days: 14 }), now.add({ days: 16 })],
        [now.add({ days: 23 }), now.add({ days: 24 })]
    ];

    const { locale } = useLocale();
    const isDateUnavailable = (date: DateValue) =>
        isWeekend(date, locale) ||
        disabledRanges.some(interval => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
        );

    return (
        <DatePicker
            label="Appointment date"
            minValue={today(getLocalTimeZone())}
            isDateUnavailable={isDateUnavailable}
        />
    );
}
```

###### Custom Validation

The `validate` function can be used to perform custom validation logic. It receives the current date value, and should return a string or array of strings representing one or more error messages if the value is invalid.

This example validates that the selected date is a weekday and not a weekend according to the current locale.

```tsx
import { DatePicker, useLocale } from "@hopper-ui/components";
import { isWeekend, parseDate } from "@internationalized/date";

export default function Example() {
    const { locale } = useLocale();

    return (
        <DatePicker
            label="Appointment date"
            validate={date => date && isWeekend(date, locale) ? "We are closed on weekends." : null}
            defaultValue={parseDate("2023-10-28")}
        />
    );
}
```

##### Description

The `description` prop can be used to provide additional context about the DatePicker.

```tsx
import { DatePicker } from "@hopper-ui/components";

export default function Example() {
    return (
        <DatePicker
            label="Appointment date"
            description="Please select a date for your appointment."
        />
    );
}
```

#### Props

| Prop                    | Type                                                          | Default  | Description                                                                                                                                                                                                                                      |
| ----------------------- | ------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| isFluid                 | `ResponsiveProp<boolean>`                                     | false    | If `true`, the DatePicker will take all available width.                                                                                                                                                                                         |
| inputRef                | `MutableRefObject<HTMLInputElement \| null>`                  |          | A ref for the HTML input element.                                                                                                                                                                                                                |
| inputGroupProps         | `InputGroupProps`                                             |          | The props for the InputGroup.                                                                                                                                                                                                                    |
| maxVisibleMonths        | `number`                                                      | 1        | The maximum number of months to display at once in the calendar popover, if screen space permits.                                                                                                                                                |
| isFixedWeeks            | `boolean`                                                     | true     | Whether the calendar should always display 6 weeks. This ensures that the height of the popover does not change between months, causing layout shifts.                                                                                           |
| popoverProps            | `PopoverBaseProps`                                            |          | The props for the popover.                                                                                                                                                                                                                       |
| calendarProps           | `CalendarProps`                                               |          | The props for the calendar.                                                                                                                                                                                                                      |
| form                    | `string`                                                      |          | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).                     |
| style                   | `StyleOrFunction<DatePickerRenderProps>`                      |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                |
| validationBehavior      | `"native" \| "aria"`                                          | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                   |
| autoComplete            | `string`                                                      |          | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).                                                            |
| pageBehavior            | `PageBehavior`                                                | visible  | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                                                                              |
| firstDayOfWeek          | `"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat"` |          | The day that starts the week.                                                                                                                                                                                                                    |
| minValue                | `DateValue \| null`                                           |          | The minimum allowed date that a user may select.                                                                                                                                                                                                 |
| maxValue                | `DateValue \| null`                                           |          | The maximum allowed date that a user may select.                                                                                                                                                                                                 |
| isDateUnavailable       | `((date: DateValue) => boolean)`                              |          | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                                                                         |
| placeholderValue        | `DateValue \| null`                                           |          | A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.                                                                                                          |
| hideTimeZone            | `boolean`                                                     | false    | Whether to hide the time zone abbreviation.                                                                                                                                                                                                      |
| shouldForceLeadingZeros | `boolean`                                                     |          | Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.                                                                                                                    |
| isDisabled              | `boolean`                                                     |          | Whether the input is disabled.                                                                                                                                                                                                                   |
| isReadOnly              | `boolean`                                                     |          | Whether the input can be selected but not changed by the user.                                                                                                                                                                                   |
| isRequired              | `boolean`                                                     |          | Whether user input is required on the input before form submission.                                                                                                                                                                              |
| isInvalid               | `boolean`                                                     |          | Whether the input value is invalid.                                                                                                                                                                                                              |
| validate                | `((value: DateValue) => true \| ValidationError \| null)`     |          | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.        |
| autoFocus               | `boolean`                                                     |          | Whether the element should receive focus on render.                                                                                                                                                                                              |
| isOpen                  | `boolean`                                                     |          | Whether the overlay is open by default (controlled).                                                                                                                                                                                             |
| defaultOpen             | `boolean`                                                     |          | Whether the overlay is open by default (uncontrolled).                                                                                                                                                                                           |
| value                   | `DateValue \| null`                                           |          | The current value (controlled).                                                                                                                                                                                                                  |
| defaultValue            | `DateValue \| null`                                           |          | The default value (uncontrolled).                                                                                                                                                                                                                |
| name                    | `string`                                                      |          | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                                    |
| shouldCloseOnSelect     | `boolean \| (() => boolean)`                                  | true     | Determines whether the date picker popover should close automatically when a date is selected.                                                                                                                                                   |
| className               | `ClassNameOrFunction<DatePickerRenderProps>`                  |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                               |
| dir                     | `string`                                                      |          |                                                                                                                                                                                                                                                  |
| lang                    | `string`                                                      |          |                                                                                                                                                                                                                                                  |
| inert                   | `boolean`                                                     |          |                                                                                                                                                                                                                                                  |
| translate               | `"yes" \| "no"`                                               |          |                                                                                                                                                                                                                                                  |
| createCalendar          | `((identifier: CalendarIdentifier) => Calendar)`              |          | A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the `createCalendar` function from `@internationalized/date` will be used. |
| description             | `ReactNode`                                                   |          | The helper message of the field.                                                                                                                                                                                                                 |
| errorMessage            | `ReactNode \| ((v: ValidationResult) => ReactNode)`           |          | The error message of the field.                                                                                                                                                                                                                  |
| label                   | `ReactNode`                                                   |          | The label of the field.                                                                                                                                                                                                                          |
| necessityIndicator      | `NecessityIndicator`                                          |          | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                           |
| size                    | `ResponsiveProp<FieldSize>`                                   | "md"     | A Field can vary in size.                                                                                                                                                                                                                        |
| contextualHelp          | `ReactNode`                                                   |          | A ContextualHelp element to place next to the label.                                                                                                                                                                                             |

###### Events

| Prop                        | Type                                          | Default | Description                                                     |
| --------------------------- | --------------------------------------------- | ------- | --------------------------------------------------------------- |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element receives focus.         |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element loses focus.            |
| onFocusChange               | `((isFocused: boolean) => void)`              |         | Handler that is called when the element's focus status changes. |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                |         | Handler that is called when a key is pressed.                   |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                |         | Handler that is called when a key is released.                  |
| onOpenChange                | `((isOpen: boolean) => void)`                 |         | Handler that is called when the overlay's open state changes.   |
| onChange                    | `((value: DateValue \| null) => void)`        |         | Handler that is called when the value changes.                  |
| onClick                     | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onScroll                    | `UIEventHandler<HTMLDivElement>`              |         |                                                                 |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`              |         |                                                                 |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`           |         |                                                                 |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

### DateRangePicker

A date range picker allows users to select a range of dates from a calendar.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/date-picker/src/DateRangePicker.tsx>

```tsx
import { DateRangePicker } from "@hopper-ui/components";

export default function Example() {
    return (
        <DateRangePicker label="Trip dates" />
    );
}
```

#### Usage

##### Value

A DateRangePicker displays a placeholder by default. An initial, uncontrolled value can be provided to the DateRangePicker using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.

Date ranges are objects with start and end properties containing date values, which are provided using objects in the [@internationalized/date](https://github.com/adobe/react-spectrum/tree/main/packages/@internationalized/date) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns. DateRangePicker supports values of the following types:

* `CalendarDate` – a date without any time components. May be parsed from a string representation using the parseDate function. Use this type to represent dates where the time is not important, such as a birthday or an all day calendar event.
* `CalendarDateTime` – a date with a time, but not in any specific time zone. May be parsed from a string representation using the parseDateTime function. Use this type to represent times that occur at the same local time regardless of the time zone, such as the time of New Years Eve fireworks which always occur at midnight. Most times are better stored as a ZonedDateTime.
* `ZonedDateTime` – a date with a time in a specific time zone. May be parsed from a string representation using the `parseZonedDateTime`, `parseAbsolute`, or `parseAbsoluteToLocal` functions. Use this type to represent an exact moment in time at a particular location on Earth.

```tsx
import { DateRangePicker, Stack, type DateValue, type RangeValue } from "@hopper-ui/components";
import { parseDate } from "@internationalized/date";
import { useState } from "react";

export default function Example() {
    const [value, setValue] = useState<RangeValue<DateValue> | null>({
        start: parseDate("2020-02-03"),
        end: parseDate("2020-02-08")
    });

    return (
        <Stack>
            <DateRangePicker
                label="Dates (uncontrolled)"
                defaultValue={{
                    start: parseDate("2020-02-03"),
                    end: parseDate("2020-02-08")
                }}
            />
            <DateRangePicker
                label="Dates (controlled)"
                value={value}
                onChange={setValue}
            />
        </Stack>
    );
}
```

##### Controlled

A DateRangePicker can handle value state in controlled mode.

```tsx
import { DateRangePicker, Paragraph, Stack, type DateValue, type RangeValue } from "@hopper-ui/components";
import { getLocalTimeZone, parseDate } from "@internationalized/date";
import { useState } from "react";
import { useDateFormatter } from "react-aria";

export default function Example() {
    const [range, setRange] = useState<RangeValue<DateValue> | null>({
        start: parseDate("2020-07-03"),
        end: parseDate("2020-07-10")
    });
    const formatter = useDateFormatter({ dateStyle: "long" });

    return (
        <Stack>
            <DateRangePicker label="Trip dates" value={range} onChange={setRange} />
            <Paragraph>
                Selected date: {range
                    ? formatter.formatRange(
                        range.start.toDate(getLocalTimeZone()),
                        range.end.toDate(getLocalTimeZone())
                    )
                    : "--"}
            </Paragraph>
        </Stack>
    );
}
```

##### Validation

###### Invalid

A DateRangePicker can be marked as invalid.

```tsx
import { DateRangePicker } from "@hopper-ui/components";

export default function Example() {
    return (
        <DateRangePicker
            label="Trip dates"
            isInvalid
            errorMessage="Please select a valid date."
        />
    );
}
```

###### Min and Max

The `minValue` and `maxValue` props can be used to limit the range of dates that a user can select.

```tsx
import { Button, DateRangePicker, Form } from "@hopper-ui/components";
import { getLocalTimeZone, parseDate, today } from "@internationalized/date";

export default function Example() {
    return (
        <Form>
            <DateRangePicker
                label="Trip dates"
                minValue={today(getLocalTimeZone())}
                defaultValue={{
                    start: parseDate("2022-02-03"),
                    end: parseDate("2022-05-03")
                }}
            />
            <Button type="submit" variant="secondary">
                Submit
            </Button>
        </Form>
    );
}
```

###### Unavailable Dates

DateRangePicker supports marking certain dates as unavailable. These dates remain focusable with the keyboard in the calendar so that navigation is consistent, but cannot be selected by the user. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.

Note that by default, users may not select non-contiguous ranges, i.e. ranges that contain unavailable dates within them. Once a start date is selected in the calendar, enabled dates will be restricted to subsequent dates until an unavailable date is hit. While this is handled automatically in the calendar, additional validation logic must be provided to ensure an invalid state is displayed in the date field. This can be achieved using the `validate` prop. See below for an example of how to allow non-contiguous ranges.

This example includes multiple unavailable date ranges, e.g. dates when a rental house is not available. The `minValue` prop is also used to prevent selecting dates before today. The `validate` prop is used to mark selected date ranges with unavailable dates in the middle as invalid.

```tsx
import { DateRangePicker } from "@hopper-ui/components";
import { getLocalTimeZone, today } from "@internationalized/date";

export default function Example() {
    const now = today(getLocalTimeZone());
    const disabledRanges = [
        [now, now.add({ days: 5 })],
        [now.add({ days: 14 }), now.add({ days: 16 })],
        [now.add({ days: 23 }), now.add({ days: 24 })]
    ];

    return (
        <DateRangePicker
            label="Trip dates"
            minValue={today(getLocalTimeZone())}
            isDateUnavailable={date =>
                disabledRanges.some(interval =>
                    date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0
                )}
            validate={value =>
                disabledRanges.some(interval => value && value.end.compare(interval[0]) >= 0 && value.start.compare(interval[1]) <= 0)
                    ? "Selected date range may not include unavailable dates."
                    : null}
        />
    );
}
```

###### Non-Contiguous Ranges

The `allowsNonContiguousRanges` prop enables a range to be selected even if there are unavailable dates in the middle. The value emitted in the onChange event will still be a single range with a start and end property, but unavailable dates will not be displayed as selected. It is up to applications to split the full selected range into multiple as needed for business logic.

This example prevents selecting weekends, but allows selecting ranges that span multiple weeks.

```tsx
import { DateRangePicker, useLocale } from "@hopper-ui/components";
import { isWeekend } from "@internationalized/date";

export default function Example() {
    const { locale } = useLocale();

    return (
        <DateRangePicker
            label="Trip dates"
            isDateUnavailable={date => isWeekend(date, locale)}
            allowsNonContiguousRanges
        />
    );
}
```

###### Custom Validation

The `validate` function can be used to perform custom validation logic. It receives the current date range, and should return a string or array of strings representing one or more error messages if the value is invalid.

This example validates that the selected date range is a maximum of 1 week in duration.

```tsx
import { Button, DateRangePicker, Form } from "@hopper-ui/components";
import { getLocalTimeZone, today } from "@internationalized/date";

export default function Example() {
    return (
        <Form>
            <DateRangePicker
                label="Trip dates"
                validate={range =>
                    range?.end.compare(range.start) > 7
                        ? "Maximum stay duration is 1 week."
                        : null}
                defaultValue={{
                    start: today(getLocalTimeZone()),
                    end: today(getLocalTimeZone()).add({ weeks: 1, days: 3 })
                }}
            />
            <Button type="submit" variant="secondary">
                Submit
            </Button>
        </Form>
    );
}
```

##### Description

The `description` prop can be used to provide additional context about the DateRangePicker.

```tsx
import { DateRangePicker } from "@hopper-ui/components";

export default function Example() {
    return (
        <DateRangePicker
            label="Trip dates"
            description="Please select dates for your trip."
        />
    );
}
```

#### Props

| Prop                      | Type                                                                  | Default  | Description                                                                                                                                                                                                                                      |
| ------------------------- | --------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| isFluid                   | `ResponsiveProp<boolean>`                                             | false    | If `true`, the DateRangePicker will take all available width.                                                                                                                                                                                    |
| inputStartRef             | `MutableRefObject<HTMLInputElement \| null>`                          |          | A ref for the HTML input element.                                                                                                                                                                                                                |
| inputEndRef               | `MutableRefObject<HTMLInputElement \| null>`                          |          | A ref for the HTML input element.                                                                                                                                                                                                                |
| inputGroupProps           | `InputGroupProps`                                                     |          | The props for the InputGroup.                                                                                                                                                                                                                    |
| maxVisibleMonths          | `number`                                                              | 1        | The maximum number of months to display at once in the calendar popover, if screen space permits.                                                                                                                                                |
| isFixedWeeks              | `boolean`                                                             | true     | Whether the calendar should always display 6 weeks. This ensures that the height of the popover does not change between months, causing layout shifts.                                                                                           |
| popoverProps              | `PopoverBaseProps`                                                    |          | The props for the popover.                                                                                                                                                                                                                       |
| calendarProps             | `RangeCalendarProps`                                                  |          | The props for the calendar.                                                                                                                                                                                                                      |
| form                      | `string`                                                              |          | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).                     |
| style                     | `StyleOrFunction<DateRangePickerRenderProps>`                         |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                |
| validationBehavior        | `"native" \| "aria"`                                                  | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                   |
| validate                  | `((value: RangeValue<DateValue>) => true \| ValidationError \| null)` |          | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.        |
| pageBehavior              | `PageBehavior`                                                        | visible  | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                                                                              |
| firstDayOfWeek            | `"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat"`         |          | The day that starts the week.                                                                                                                                                                                                                    |
| minValue                  | `DateValue \| null`                                                   |          | The minimum allowed date that a user may select.                                                                                                                                                                                                 |
| maxValue                  | `DateValue \| null`                                                   |          | The maximum allowed date that a user may select.                                                                                                                                                                                                 |
| isDateUnavailable         | `((date: DateValue) => boolean)`                                      |          | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                                                                         |
| placeholderValue          | `DateValue \| null`                                                   |          | A placeholder date that influences the format of the placeholder shown when no value is selected. Defaults to today's date at midnight.                                                                                                          |
| hideTimeZone              | `boolean`                                                             | false    | Whether to hide the time zone abbreviation.                                                                                                                                                                                                      |
| shouldForceLeadingZeros   | `boolean`                                                             |          | Whether to always show leading zeros in the month, day, and hour fields. By default, this is determined by the user's locale.                                                                                                                    |
| isDisabled                | `boolean`                                                             |          | Whether the input is disabled.                                                                                                                                                                                                                   |
| isReadOnly                | `boolean`                                                             |          | Whether the input can be selected but not changed by the user.                                                                                                                                                                                   |
| isRequired                | `boolean`                                                             |          | Whether user input is required on the input before form submission.                                                                                                                                                                              |
| isInvalid                 | `boolean`                                                             |          | Whether the input value is invalid.                                                                                                                                                                                                              |
| autoFocus                 | `boolean`                                                             |          | Whether the element should receive focus on render.                                                                                                                                                                                              |
| isOpen                    | `boolean`                                                             |          | Whether the overlay is open by default (controlled).                                                                                                                                                                                             |
| defaultOpen               | `boolean`                                                             |          | Whether the overlay is open by default (uncontrolled).                                                                                                                                                                                           |
| allowsNonContiguousRanges | `boolean`                                                             |          | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.                                                                                                     |
| startName                 | `string`                                                              |          | The name of the start date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                         |
| endName                   | `string`                                                              |          | The name of the end date input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                           |
| value                     | `RangeValue<DateValue> \| null`                                       |          | The current value (controlled).                                                                                                                                                                                                                  |
| defaultValue              | `RangeValue<DateValue> \| null`                                       |          | The default value (uncontrolled).                                                                                                                                                                                                                |
| shouldCloseOnSelect       | `boolean \| (() => boolean)`                                          | true     | Determines whether the date picker popover should close automatically when a date is selected.                                                                                                                                                   |
| className                 | `ClassNameOrFunction<DateRangePickerRenderProps>`                     |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                               |
| dir                       | `string`                                                              |          |                                                                                                                                                                                                                                                  |
| lang                      | `string`                                                              |          |                                                                                                                                                                                                                                                  |
| inert                     | `boolean`                                                             |          |                                                                                                                                                                                                                                                  |
| translate                 | `"yes" \| "no"`                                                       |          |                                                                                                                                                                                                                                                  |
| createCalendar            | `((identifier: CalendarIdentifier) => Calendar)`                      |          | A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the `createCalendar` function from `@internationalized/date` will be used. |
| description               | `ReactNode`                                                           |          | The helper message of the field.                                                                                                                                                                                                                 |
| errorMessage              | `ReactNode \| ((v: ValidationResult) => ReactNode)`                   |          | The error message of the field.                                                                                                                                                                                                                  |
| label                     | `ReactNode`                                                           |          | The label of the field.                                                                                                                                                                                                                          |
| necessityIndicator        | `NecessityIndicator`                                                  |          | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                           |
| size                      | `ResponsiveProp<FieldSize>`                                           | "md"     | A Field can vary in size.                                                                                                                                                                                                                        |
| contextualHelp            | `ReactNode`                                                           |          | A ContextualHelp element to place next to the label.                                                                                                                                                                                             |

###### Events

| Prop                        | Type                                               | Default | Description                                                     |
| --------------------------- | -------------------------------------------------- | ------- | --------------------------------------------------------------- |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`      |         | Handler that is called when the element receives focus.         |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`      |         | Handler that is called when the element loses focus.            |
| onFocusChange               | `((isFocused: boolean) => void)`                   |         | Handler that is called when the element's focus status changes. |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                     |         | Handler that is called when a key is pressed.                   |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                     |         | Handler that is called when a key is released.                  |
| onOpenChange                | `((isOpen: boolean) => void)`                      |         | Handler that is called when the overlay's open state changes.   |
| onChange                    | `((value: RangeValue<DateValue> \| null) => void)` |         | Handler that is called when the value changes.                  |
| onClick                     | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                |         |                                                                 |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                |         |                                                                 |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                |         |                                                                 |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                |         |                                                                 |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                |         |                                                                 |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                |         |                                                                 |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                |         |                                                                 |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                |         |                                                                 |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                |         |                                                                 |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`              |         |                                                                 |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                   |         |                                                                 |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                   |         |                                                                 |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                |         |                                                                 |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                |         |                                                                 |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`            |         |                                                                 |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`            |         |                                                                 |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`            |         |                                                                 |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`            |         |                                                                 |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`            |         |                                                                 |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`            |         |                                                                 |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`           |         |                                                                 |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

### Disclosure

The disclosure component is used to put long sections of information under a block that users can expand or collapse.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/disclosure/src/Disclosure.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/>

The disclosure component delivers large amounts of content in a small space through progressive disclosure. The header section give the user a high level overview of the content allowing the user to decide which sections to read. Disclosures can make information processing and discovering more effective. However, it does hide content from users and it's important to account for a user not noticing or reading all of the included content. If a user is likely to read all of the content then don't use a disclosure as it adds the burden of an extra click; use instead a full scrolling page with normal headers. Users can open or close a with different interactive element such as a button or the AngleUp and AngleDown icons.

```tsx
import { Disclosure, DisclosureHeader, DisclosurePanel } from "@hopper-ui/components";

export default function Example() {
    return (
        <Disclosure width="100%">
            <DisclosureHeader>
                Help your people work better
            </DisclosureHeader>
            <DisclosurePanel>
                Tackle the challenges of hybrid, remote and distributed work, no matter what.
                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
            </DisclosurePanel>
        </Disclosure>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Disclosure>
    <DisclosureHeader> /* (Required) A header for the Disclosure */
        <Text /> /* (Optional) A text description for the DisclosureHeader */
        <Icon /> /* (Optional) An icon for the DisclosureHeader */
    </DisclosureHeader>
    <DisclosurePanel /> /* (Required) A panel for the Disclosure */
</Disclosure>
```

##### Composed Components

A `Disclosure` uses the following components:

| Component | Description                                                                        |
| --------- | ---------------------------------------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon.                                 |
| Text      | A text component is a primitive component matching Hopper's typography type scale. |

#### Usage

##### Disabled

A disclosure can be disabled.

```tsx
import { Disclosure, DisclosureHeader, DisclosurePanel, Inline, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Disclosure width="100%" isDisabled>
            <DisclosureHeader>
                <SparklesIcon />
                <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
                    <Text>Workleap Officevibe</Text>
                    <Text color="neutral-disabled" size="sm">Engagement and Feedback</Text>
                </Inline>
            </DisclosureHeader>
            <DisclosurePanel>
                Help employees speak up and make sure they feel heard.
                Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
            </DisclosurePanel>
        </Disclosure>
    );
}
```

##### Variants

A disclosure has multiple variants.

```tsx
import { Disclosure, DisclosureHeader, DisclosurePanel, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack width="100%">
            <Disclosure variant="standalone">
                <DisclosureHeader>
                    Help your people work better
                </DisclosureHeader>
                <DisclosurePanel>
                    Tackle the challenges of hybrid, remote and distributed work, no matter what.
                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
                </DisclosurePanel>
            </Disclosure>
            <Disclosure variant="inline">
                <DisclosureHeader>
                    Help your people work better
                </DisclosureHeader>
                <DisclosurePanel>
                    Tackle the challenges of hybrid, remote and distributed work, no matter what.
                    The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
                </DisclosurePanel>
            </Disclosure>
        </Stack>
    );
}
```

**Standalone** - Used when the disclosure is not inside a container.

**Inline** - Used when placing a disclosure inside a container.

##### Icon

A disclosure can contain an icon.

```tsx
import { Disclosure, DisclosureHeader, DisclosurePanel, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Disclosure width="100%">
            <DisclosureHeader>
                <SparklesIcon />
                <Text>Help your people work better</Text>
            </DisclosureHeader>
            <DisclosurePanel>
                Tackle the challenges of hybrid, remote and distributed work, no matter what.
                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
            </DisclosurePanel>
        </Disclosure>
    );
}
```

##### Description

A disclosure can contain a description.

```tsx
import { Disclosure, DisclosureHeader, DisclosurePanel, Inline, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Disclosure width="100%">
            <DisclosureHeader>
                <Inline columnGap="inline-sm" rowGap="core_0" alignY="baseline">
                    <Text>Workleap Officevibe</Text>
                    <Text color="neutral-weak" size="sm">Engagement and Feedback</Text>
                </Inline>
            </DisclosureHeader>
            <DisclosurePanel>
                Help employees speak up and make sure they feel heard.
                Continuous and real-time surveys offer feedback to celebrate every win, recognize commitment, and uncover challenges.
            </DisclosurePanel>
        </Disclosure>
    );
}
```

##### Controlled

A disclosure can handle its expanded state in controlled mode.

```tsx
import { Disclosure, DisclosureHeader, DisclosurePanel } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [isExpanded, setIsExpanded] = useState(true);

    return (
        <Disclosure
            width="100%"
            isExpanded={isExpanded}
            onExpandedChange={setIsExpanded}
        >
            <DisclosureHeader>
                This disclosure is {isExpanded ? "expanded" : "collapsed"}
            </DisclosureHeader>
            <DisclosurePanel>
                Tackle the challenges of hybrid, remote and distributed work, no matter what.
                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
            </DisclosurePanel>
        </Disclosure>
    );
}
```

##### Custom Header

A disclosure can have a custom header. To accomplish this, do not use `DisclosureHeader` and use the [Button](./Button.md) component with `slot="trigger"` instead. Using React Aria's [Button](https://react-spectrum.adobe.com/react-aria/Button.html) component will also work.

```tsx
import { Button, Disclosure, DisclosurePanel, Text } from "@hopper-ui/components";

import { ToggleArrow } from "../../toggle-arrow/index.ts";

export default function Example() {
    return (
        <Disclosure width="100%">
            <Button slot="trigger" variant="secondary">
                <Text>Help your people work better</Text>
                <ToggleArrow slot="end-icon" />
            </Button>
            <DisclosurePanel>
                Tackle the challenges of hybrid, remote and distributed work, no matter what.
                The Workleap platform builds solutions tailored to your existing HR and productivity tools to answer these challenges.
            </DisclosurePanel>
        </Disclosure>
    );
}
```

#### Progressive Enhancement

Our Disclosure component uses experimental CSS features like:

* **interpolate-size: allow-keywords**: Enables fluid transitions between dynamic sizes.

* **transition-behavior: allow-discrete**: Allows transitions for properties like content-visibility.

These features enhance animations where supported. In browsers without support, the component remains fully usable without animations, maintaining progressive enhancement.

#### Best Practices

The disclosure component should:

* Be used for information that is lower priority or that users don't need to see all the time.
* Not be used to hide error messages or other critical information that requires an immediate action.

#### Props

##### Disclosure

| Prop            | Type                                         | Default | Description                                                                                                                                                                        |
| --------------- | -------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| variant         | `"standalone" \| "inline"`                   |         |                                                                                                                                                                                    |
| style           | `StyleOrFunction<DisclosureRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| children        | `ChildrenOrFunction<DisclosureRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| isDisabled      | `boolean`                                    |         | Whether the disclosure is disabled.                                                                                                                                                |
| isExpanded      | `boolean`                                    |         | Whether the disclosure is expanded (controlled).                                                                                                                                   |
| defaultExpanded | `boolean`                                    |         | Whether the disclosure is expanded by default (uncontrolled).                                                                                                                      |
| id              | `Key`                                        |         | An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`.                                                                               |
| className       | `ClassNameOrFunction<DisclosureRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir             | `string`                                     |         |                                                                                                                                                                                    |
| lang            | `string`                                     |         |                                                                                                                                                                                    |
| inert           | `boolean`                                    |         |                                                                                                                                                                                    |
| translate       | `"yes" \| "no"`                              |         |                                                                                                                                                                                    |

###### Events

| Prop                        | Type                                     | Default | Description                                                          |
| --------------------------- | ---------------------------------------- | ------- | -------------------------------------------------------------------- |
| onExpandedChange            | `((isExpanded: boolean) => void)`        |         | Handler that is called when the disclosure's expanded state changes. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                                      |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                                      |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                                      |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                                      |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                                      |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                                      |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                                      |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                                      |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                                      |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                                      |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                                      |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                                      |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                                      |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                                      |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                      |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                      |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                      |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                      |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                      |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                      |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                                      |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                                      |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                                      |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                                      |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                                      |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                                      |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                                      |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                                      |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

##### Disclosure Header

| Prop        | Type                          | Default | Description                                            |
| ----------- | ----------------------------- | ------- | ------------------------------------------------------ |
| buttonProps | `DisclosureHeaderButtonProps` |         | The props for the button that triggers the disclosure. |
| size        | `ResponsiveProp<HeadingSize>` | "md"    | The Typography Type Scale to use.                      |
| style       | `CSSProperties`               |         |                                                        |
| level       | `number`                      |         |                                                        |
| className   | `string`                      |         |                                                        |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

##### Disclosure Panel

| Prop      | Type                                              | Default | Description                                                                                                                                                                        |
| --------- | ------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| style     | `StyleOrFunction<DisclosurePanelRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| children  | `ReactNode`                                       |         | The children of the component.                                                                                                                                                     |
| className | `ClassNameOrFunction<DisclosurePanelRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir       | `string`                                          |         |                                                                                                                                                                                    |
| lang      | `string`                                          |         |                                                                                                                                                                                    |
| inert     | `boolean`                                         |         |                                                                                                                                                                                    |
| translate | `"yes" \| "no"`                                   |         |                                                                                                                                                                                    |

###### Events

| Prop                        | Type                                     | Default | Description |
| --------------------------- | ---------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |             |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop | Type                  | Default | Description                                                                                                         |
| ---- | --------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| role | `"group" \| "region"` | 'group' | The accessibility role for the disclosure's panel.                                                                  |
| id   | `string`              |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* Disclosure now has two children components called `DisclosureHeader` and `DisclosurePanel`.
* `DisclosurePanel` is optional and most likely wouldn't be used for Orbiter. A custom header can be used by using a Button component inside Disclosure.
* `defaultOpen` is renamed to `defaultExpanded`.
* `open` is renamed to `isExpanded`.
* `onOpenChange` is renamed to `onExpandedChange`.

### Div

A specialized component to represent an HTML div element.

```tsx
import { Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div color="neutral-weak">
            Apple co-founder Steve Wozniak tweeted on Sunday about a "private space company" he's launching
            that's "unlike the others." Called Privateer Space, its mission is to "keep space safe and
            accessible to all humankind".
        </Div>
    );
}
```

#### Usage

A div component accepts all the [div HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/div) and [Hopper styled component props](/styled-system/concepts/styling.md).

#### Best Practices

`Div` is a low-level primitive that provides styled system props to a standard HTML `div` element. However, **it should not be your first choice** for layouts. Hopper provides specialized layout components (`Flex`, `Inline`, `Stack`, `Grid`) that are more semantic, maintainable, and expressive for common layout patterns.

Div should:

* Be used sparingly, only when layout components don't fit your needs.
* Not be used as a wrapper just to add spacing or styling when you can apply those props directly to the child component.
* Not be used for layouts that can be achieved with `Flex`, `Inline`, `Stack`, or `Grid`.
* Be used for semantic grouping or when you need a generic container with styled system props.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  ```tsx
  import { Button, Stack, Text } from "@hopper-ui/components";

  export function Example() {
      return (
          <Stack gap="stack-md">
              <Text>Reviewed Items: 10</Text>
              <Button variant="primary">Submit</Button>
          </Stack>
      );
  }
  ```

  Use Inline, Stack, or Flex for layouts instead of Div

* 🚫 Don't:

  ```tsx
  import { Button, Div, Text } from "@hopper-ui/components";

  export function Example() {
      return (
          <Div display="flex" flexDirection="column" gap="stack-md">
              <Text>Reviewed Items: 10</Text>
              <Button variant="primary">Submit</Button>
          </Div>
      );
  }
  ```

  Use Div with display flex when layout components are more semantic

**Rule 2**

* ✅ Do:

  ```tsx
  import { Button } from "@hopper-ui/components";

  export function Example() {
      return (
          <Button
              variant="primary"
              marginTop="stack-lg"
              padding="inset-md"
          >
              Submit
          </Button>
      );
  }
  ```

  Apply styling props directly to components that support them

* 🚫 Don't:

  ```tsx
  import { Button, Div } from "@hopper-ui/components";

  export function Example() {
      return (
          <Div marginTop="stack-lg" padding="inset-md">
              <Button variant="primary">
                  Submit
              </Button>
          </Div>
      );
  }
  ```

  Wrap components in Div just to add spacing or styling

### Divider

A divider separates sections of content or groups.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/divider/src/Divider.tsx>

```tsx
import { Div, Divider } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div width="100%">
            <Divider />
        </Div>
    );
}
```

#### Usage

##### Orientation

A divider can have two orientations: horizontal or vertical.

```tsx
import { Divider, Inline, Stack, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack width="100%">
            <Stack>
                <Text>Content above</Text>
                <Divider orientation="horizontal" />
                <Text>Content below</Text>
            </Stack>
            <Inline alignY="stretch">
                <Text>Content left</Text>
                <Divider orientation="vertical" />
                <Text>Content right</Text>
            </Inline>
        </Stack>
    );
}
```

#### Props

| Prop        | Type            | Default      | Description                                                                                              |
| ----------- | --------------- | ------------ | -------------------------------------------------------------------------------------------------------- |
| style       | `CSSProperties` |              | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| orientation | `Orientation`   | 'horizontal' | The orientation of the separator.                                                                        |
| elementType | `string`        |              | The HTML element type that will be used to render the separator.                                         |
| className   | `string`        |              | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| dir         | `string`        |              |                                                                                                          |
| lang        | `string`        |              |                                                                                                          |
| inert       | `boolean`       |              |                                                                                                          |
| translate   | `"yes" \| "no"` |              |                                                                                                          |

###### Events

| Prop                        | Type                                  | Default | Description |
| --------------------------- | ------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |             |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `Children` is not supported.

### ErrorMessage

An error message displays validation errors for a form field.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/error-message/src/ErrorMessage.tsx>

```tsx
import { ErrorMessage, SlotProvider } from "@hopper-ui/components";
import { FieldErrorContext } from "react-aria-components";

export default function Example() {
    return (
        <SlotProvider values={[
            [FieldErrorContext, {
                isInvalid: true,
                validationErrors: [] as never[],
                validationDetails: {} as never
            }]
        ]}
        >
            <ErrorMessage>This field is required</ErrorMessage>
        </SlotProvider>
    );
}
```

#### Usage

##### No icon

An error message can hide its default icon.

```tsx
import { ErrorMessage, SlotProvider } from "@hopper-ui/components";
import { FieldErrorContext } from "react-aria-components";

export default function Example() {
    return (
        <SlotProvider values={[
            [FieldErrorContext, {
                isInvalid: true,
                validationErrors: [] as never[],
                validationDetails: {} as never
            }]
        ]}
        >
            <ErrorMessage hideIcon>This field is required</ErrorMessage>
        </SlotProvider>
    );
}
```

##### Multiple errors

An error message can display multiple validation errors created by a form field.

```tsx
import { ErrorMessage, SlotProvider } from "@hopper-ui/components";
import { FieldErrorContext } from "react-aria-components";

export default function Example() {
    return (
        <SlotProvider values={[
            [FieldErrorContext, {
                isInvalid: true,
                validationErrors: ["This field is required.", "This field is too long."],
                validationDetails: {} as never
            }]
        ]}
        >
            <ErrorMessage />
        </SlotProvider>
    );
}
```

#### Props

| Prop        | Type                                         | Default | Description                                                                                                                                                                        |
| ----------- | -------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| hideIcon    | `boolean`                                    |         | Whether or not to hide the error message icon.                                                                                                                                     |
| style       | `StyleOrFunction<FieldErrorRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| children    | `ChildrenOrFunction<FieldErrorRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className   | `ClassNameOrFunction<FieldErrorRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| elementType | `string`                                     |         |                                                                                                                                                                                    |
| size        | `ResponsiveProp<TextSize>`                   | "md"    | The Typography Type Scale to use.                                                                                                                                                  |

###### Accessibility

| Prop | Type     | Default | Description                                                                                                         |
| ---- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id   | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

### Flex

A flex component is used to create a flex container.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/layout/src/Flex.tsx>

```tsx
import { Flex, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Flex>
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Flex>
        </Div>
    );
}
```

#### Usage

##### Vertical Alignment

A flex layout can have vertically aligned items.

```tsx
import { Flex, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Flex direction="column">
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Flex>
        </Div>
    );
}
```

##### Gap

A flex layout can have a gap between his items. `columnGap` and `rowGap` are also available to specify a gap for a single axis.

```tsx
import { Flex, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Flex gap="stack-sm">
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Flex>
        </Div>
    );
}
```

##### Align Items

A flex layout can align its items along the cross-axis. When the direction is "column", this refers to horizontal alignment, and when the direction is "row", it refers to vertical alignment.

```tsx
import { Flex, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Flex direction="column" alignItems="center">
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Flex>
        </Div>
    );
}
```

##### Justify Content

A flex layout can justify its items along the main axis. When the direction is "column", this refers to vertical alignment, and when the direction is "row", it refers to horizontal alignment.

```tsx
import { Flex, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Flex justifyContent="space-between">
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Flex>
        </Div>
    );
}
```

##### Reverse

A flex layout can show its items in reverse order.

```tsx
import { Flex, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Flex direction="row-reverse">
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Flex>
        </Div>
    );
}
```

##### Wrap

Flex layout items can wrap multiple rows.

```tsx
import { Flex, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Flex wrap>
                <Square backgroundColor="decorative-option1-weak" />
                <Square backgroundColor="decorative-option2-weak" />
                <Square backgroundColor="decorative-option3-weak" />
                <Square backgroundColor="decorative-option4-weak" />
                <Square backgroundColor="decorative-option5-weak" />
                <Square backgroundColor="decorative-option6-weak" />
                <Square backgroundColor="decorative-option7-weak" />
                <Square backgroundColor="decorative-option8-weak" />
                <Square backgroundColor="decorative-option9-weak" />
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option2" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
                <Square backgroundColor="decorative-option5" />
                <Square backgroundColor="decorative-option6" />
                <Square backgroundColor="decorative-option7" />
                <Square backgroundColor="decorative-option8" />
                <Square backgroundColor="decorative-option9" />
                <Square backgroundColor="decorative-option1-strong" />
                <Square backgroundColor="decorative-option2-strong" />
                <Square backgroundColor="decorative-option3-strong" />
                <Square backgroundColor="decorative-option4-strong" />
                <Square backgroundColor="decorative-option5-strong" />
                <Square backgroundColor="decorative-option6-strong" />
                <Square backgroundColor="decorative-option7-strong" />
                <Square backgroundColor="decorative-option8-strong" />
                <Square backgroundColor="decorative-option9-strong" />
            </Flex>
        </Div>
    );
}
```

##### Nesting

Flex layouts can be nested.

```tsx
import { Flex, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Flex gap="stack-md">
                <Flex>
                    <Square backgroundColor="decorative-option1-weak" />
                    <Square backgroundColor="decorative-option3-weak" />
                </Flex>
                <Flex direction="column">
                    <Square backgroundColor="decorative-option1" />
                    <Square backgroundColor="decorative-option3" />
                </Flex>
                <Flex>
                    <Square backgroundColor="decorative-option1-strong" />
                    <Square backgroundColor="decorative-option3-strong" />
                </Flex>
            </Flex>
        </Div>
    );
}
```

#### Best Practices

Flex should be used for general-purpose flexible layouts when you need more control than `Inline` or `Stack` provide. For simple horizontal rows with centered items, use `Inline`. For simple vertical stacks, use `Stack`. Use `Flex` when you need to customize multiple layout properties, use responsive direction changes, or apply flex properties to individual children.

Flex should:

* Be used when you need to customize two or more layout properties (e.g., both `alignItems` and `justifyContent`).
* Handle responsive layouts where `direction` changes based on breakpoints.
* Be preferred over `Inline` or `Stack` when children need individual flex properties like `flex`, `order`, or custom alignment.
* Use [Hopper space tokens](/tokens/semantic/space.md) for `gap`, `rowGap`, and `columnGap` to ensure consistency.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  ```tsx
  import { Avatar, Inline, Text } from "@hopper-ui/components";

  export function Example() {
      return (
          <Inline alignY="center" gap="inline-sm">
              <Avatar name="Sarah Chen" src="https://i.pravatar.cc/96?img=5" size="sm" />
              <Text>Sarah Chen</Text>
              <Text>Product Designer</Text>
          </Inline>
      );
  }
  ```

  Use Inline for simple horizontal layouts with centered items

* 🚫 Don't:

  ```tsx
  import { Avatar, Flex, Text } from "@hopper-ui/components";

  export function Example() {
      return (
          <Flex direction="row" alignItems="center" gap="inline-sm">
              <Avatar name="Sarah Chen" src="https://i.pravatar.cc/96?img=5" size="sm" />
              <Text>Sarah Chen</Text>
              <Text>Product Designer</Text>
          </Flex>
      );
  }
  ```

  Use Flex with default direction='row' and alignItems='center' when Inline is sufficient

**Rule 2**

* ✅ Do:

  ```tsx
  import { Button, Stack, TextField } from "@hopper-ui/components";

  export function Example() {
      return (
          <Stack gap="stack-md">
              <TextField label="Email" />
              <TextField label="Password" type="password" />
              <Button variant="primary">Sign In</Button>
          </Stack>
      );
  }
  ```

  Use Stack for simple vertical layouts with consistent spacing

* 🚫 Don't:

  ```tsx
  import { Button, Flex, TextField } from "@hopper-ui/components";

  export function Example() {
      return (
          <Flex direction="column" gap="stack-md">
              <TextField label="Email" />
              <TextField label="Password" type="password" />
              <Button variant="primary">Sign In</Button>
          </Flex>
      );
  }
  ```

  Use Flex with direction='column' when Stack is sufficient

#### Props

| Prop      | Type                                                  | Default | Description                                                                             |
| --------- | ----------------------------------------------------- | ------- | --------------------------------------------------------------------------------------- |
| direction | `ResponsiveProp<FlexDirection>`                       |         | The flex direction of the container. Can be row, column, row-reverse or column-reverse. |
| wrap      | `ResponsiveProp<FlexWrap> \| ResponsiveProp<boolean>` |         | Whether to wrap the flex items. The value can also be a boolean.                        |
| basis     | `ResponsiveProp<FlexBasis<0 \| (string & {})>>`       |         | An alias for the css flex-basis property.                                               |
| grow      | `ResponsiveProp<FlexGrow>`                            |         | An alias for the css flex-grow property.                                                |
| shrink    | `ResponsiveProp<FlexShrink>`                          |         | An alias for the css flex-shrink property.                                              |
| inline    | `boolean`                                             |         | Whether to display the flex container as an inline element.                             |
| style     | `CSSProperties`                                       |         |                                                                                         |
| className | `string`                                              |         |                                                                                         |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `fluid` has been removed.
* `reverse` is not supported, use `direction` instead. [Here's an example](/components/Flex.md#usage-reverse).

### FloatingBadge

A floating badge allows the user to position a badge relative to another component.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/Badge/src/FloatingBadge.tsx>

```tsx
import { Badge, Div, FloatingBadge } from "@hopper-ui/components";

export default function Example() {
    return (
        <FloatingBadge>
            <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
            <Badge>NEW</Badge>
        </FloatingBadge>
    );
}
```

#### Anatomy

##### Structure

```tsx
<FloatingBadge>
    <Component /> /* (Required) The component to which the badge is attached */
    <Badge /> /* (Required) The badge of the floating badge */
</FloatingBadge>
```

##### Composed Components

A `FloatingBadge` uses the following components:

| Component | Description                                       |
| --------- | ------------------------------------------------- |
| Badge     | A badge is used to bring attention to an element. |

#### Usage

##### Placement

A floating badge can be positioned relative to another component using the `placement` prop. This allows the badge to be placed in any of the 4 positions around the target component.

```tsx
import { Inline, Badge, Div, FloatingBadge } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline gap="inline-xl">
            <FloatingBadge placement="top left">
                <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
                <Badge isIndeterminate></Badge>
            </FloatingBadge>
            <FloatingBadge placement="bottom left">
                <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
                <Badge isIndeterminate></Badge>
            </FloatingBadge>
            <FloatingBadge placement="bottom right">
                <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
                <Badge isIndeterminate></Badge>
            </FloatingBadge>
            <FloatingBadge placement="top right">
                <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
                <Badge isIndeterminate></Badge>
            </FloatingBadge>
        </Inline>
    );
}
```

##### Overlap

Allows you to specify whether the badge overlaps a rectangular or circular component.

```tsx
import { Badge, Div, FloatingBadge, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline gap="inline-xl">
            <FloatingBadge overlap="rectangular">
                <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
                <Badge>NEW</Badge>
            </FloatingBadge>
            <FloatingBadge overlap="circular">
                <Div height="core_320" width="core_320" borderRadius="circle" backgroundColor="primary-weak" />
                <Badge>NEW</Badge>
            </FloatingBadge>
            <FloatingBadge overlap="rectangular">
                <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
                <Badge isIndeterminate></Badge>
            </FloatingBadge>
            <FloatingBadge overlap="circular">
                <Div height="core_320" width="core_320" borderRadius="circle" backgroundColor="primary-weak" />
                <Badge isIndeterminate></Badge>
            </FloatingBadge>
        </Inline>
    );
}
```

##### Offset

The position of the badge can be adjusted using the `offset` prop. This prop accepts an object with `x` and `y` properties that will be used to adjust the badge's position.

```tsx
import { Badge, Div, FloatingBadge, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline gap="inline-xl">
            <FloatingBadge offset={[10, "-5%"]}>
                <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
                <Badge>NEW</Badge>
            </FloatingBadge>
            <FloatingBadge offset={[10, "-5%"]}>
                <Div height="core_320" width="core_320" backgroundColor="primary-weak" />
                <Badge isIndeterminate></Badge>
            </FloatingBadge>
        </Inline>
    );
}
```

#### Props

| Prop      | Type                                     | Default       | Description                                                                                              |
| --------- | ---------------------------------------- | ------------- | -------------------------------------------------------------------------------------------------------- |
| offset    | `[string \| number, string \| number]`   |               | The offset of the badge from the anchor component. \[horizontal, vertical]                               |
| overlap   | `FloatingBadgeOverlap`                   | "rectangular" | The wrapped shape that the badge should overlap.                                                         |
| placement | `ResponsiveProp<FloatingBadgePlacement>` | "top right"   | The placement of the badge relative to the anchor component.                                             |
| children  | `ReactNode`                              |               | The children of the component.                                                                           |
| className | `string`                                 |               | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| style     | `CSSProperties`                          |               | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `highlight` is not supported.
* `pushed` is not supported.
* `reverse` is not supported, use `flex-direction` or `row-reverse` instead.
* `size` is not supported.
* `variant` has different values.
* `icon` variant it not supported.
* `wrapperProps` has been removed.
* Badge is no longer floating. Use the `FloatingBadge` component to add this feature.
* `FloatingBadge` has new props such as `placement` and `offset`.
* `overlap` is used inside `FloatingBadge` and the new values are `circular` and `rectangular`.

### Footer

A placeholder for a footer section.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/layout/src/Footer.tsx>

A footer placeholder component provides no specific styling by itself, but receives styling from the parent container. In addition, a footer placeholder will be automatically placed within the container's layout according to Hopper guidelines.

```tsx
import { Footer } from "@hopper-ui/components";

export default function Example() {
    return (
        <Footer>Software built for everyone to do their best work.</Footer>
    );
}
```

#### Props

| Prop      | Type            | Default | Description                                                                                              |
| --------- | --------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| style     | `CSSProperties` |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children  | `ReactNode`     |         | The children of the component.                                                                           |
| className | `string`        |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

### Form

Forms are used to gather information from the user.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/form/src/Form.tsx>

```tsx
import { Button, Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form>
            <TextField name="email" placeholder="Enter your email" label="Email" />
            <Button type="submit">Sign In</Button>
        </Form>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Form>
    <TextField /> /* (Optional) A text field within the form */
    <PasswordField /> /* (Optional) A password field within the form */
    <NumberField /> /* (Optional) A number field within the form */
    <HelperMessage /> /* (Optional) A helper message within the form */
    <ErrorMessage /> /* (Optional) An error message within the form */
    <ButtonGroup /> /* (Optional) A button group within the form */
    <Button /> /* (Optional) A button within the form */
</Form>
```

##### Composed Components

A `Form` uses the following components:

| Component     | Description                                                                          |
| ------------- | ------------------------------------------------------------------------------------ |
| Button        | A button allows a user to initiate an action.                                        |
| ButtonGroup   | A button group handles the spacing and orientation for a grouping of buttons.        |
| ErrorMessage  | An error message displays validation errors for a form field.                        |
| HelperMessage | A helper message component displays auxiliary text to guide users in the interface.  |
| NumberField   | A number field is a specialized input that allows a user to enter a number.          |
| PasswordField | A password field is a specialized text field that allows a user to enter a password. |
| TextField     | A text field allows a user to enter a plain text value.                              |

#### Usage

##### Disabled

A disabled form will not allow the user to interact with the form.

```tsx
import { Button, Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form isDisabled>
            <TextField name="email" placeholder="Enter your email" label="Email" />
            <Button type="submit">Sign In</Button>
        </Form>
    );
}
```

##### Validation

To provide validation errors, the `validationErrors` prop should be set to an object that maps each field's `name` prop to a string or array of strings representing one or more errors. These are displayed to the user as soon as the `validationErrors` prop is set and cleared after the user modifies each field's value.

```tsx
import { Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form validationErrors={{ username: "Sorry, this username is taken." }}>
            <TextField name="username" defaultValue="john_doe" label="Username" />
        </Form>
    );
}
```

###### Native Behavior

Native HTML form validation is used to display errors and block form submission.

```tsx
import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form validationBehavior="native">
            <TextField
                name="email"
                type="email"
                isRequired
                label="Email"
            />
            <ButtonGroup>
                <Button type="submit">Submit</Button>
                <Button type="reset">Reset</Button>
            </ButtonGroup>
        </Form>
    );
}
```

###### Aria Behavior

To use form validation via ARIA, set the `validationBehavior` property to "aria". This will not block form submission and will display validation errors to the user in real time as the value is modified.

```tsx
import { Button, Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form validationBehavior="aria">
            <TextField
                name="username"
                defaultValue="admin"
                isRequired
                validate={value => value === "admin" ? "Nice try." : null}
                label="Username"
            />
            <Button type="submit">Submit</Button>
        </Form>
    );
}
```

##### Sizes

A form has multiple sizes to choose from.

```tsx
import { Button, Form, Stack, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack gap="stack-sm" margin="stack-lg">
            <Form>
                <TextField name="email" placeholder="Enter your email" label="Email" />
                <Button type="submit">Sign In</Button>
            </Form>
            <Form size="sm">
                <TextField name="email" placeholder="Enter your email" label="Email" />
                <Button type="submit">Sign In</Button>
            </Form>
        </Stack>
    );
}
```

##### Fluid

Form fields can take the width of their container.

```tsx
import { Button, Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form isFluid width="80%">
            <TextField name="email" placeholder="Enter your email" label="Email" />
            <Button type="submit">Sign In</Button>
        </Form>
    );
}
```

#### Props

| Prop               | Type                        | Default | Description                                                                                                                            |
| ------------------ | --------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------- |
| isDisabled         | `boolean`                   |         | Whether the form elements are disabled.                                                                                                |
| isFluid            | `ResponsiveProp<boolean>`   |         | If `true`, the Form will take all available width.                                                                                     |
| necessityIndicator | `NecessityIndicator`        |         | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels. |
| size               | `ResponsiveProp<FieldSize>` | "md"    | The size of the fields and buttons within the form.                                                                                    |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `disabled` has been renamed `isDisabled`.
* `fluid` has been renamed `isFluid`.

### Grid

The grid component is used to create a grid container.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/layout/src/Grid.tsx>

```tsx
import { Grid, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid autoFlow="column">
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Grid>
        </Div>
    );
}
```

#### Usage

##### Areas

A grid can define explicit sections with areas.

```tsx
import { Grid, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid areas={["a  a", "b c"]}>
                <Square gridArea="a" backgroundColor="decorative-option1" />
                <Square gridArea="b" backgroundColor="decorative-option3" />
                <Square gridArea="c" backgroundColor="decorative-option4" />
            </Grid>
        </Div>
    );
}
```

##### Template Columns

A grid can define explicit columns and rows. A value can be a grid length value or a Hopper spacing scale value.

```tsx
import { Grid, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid templateColumns={["core_800", "core_1280", "1fr"]}>
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Grid>
        </Div>
    );
}
```

##### Auto Columns

A grid can define the size of implicitly created columns. A value can be a grid length value or a Hopper spacing scale value.

```tsx
import { Grid, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid autoColumns="1fr">
                <Square gridColumn={2} backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Grid>
        </Div>
    );
}
```

##### Gap

A grid layout can have a gap between its columns and rows. `columnGap` and `rowGap` are also available to specify a gap for a single axis.

```tsx
import { Grid, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid templateColumns={["1fr", "1fr"]} gap="stack-sm">
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option2" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Grid>
        </Div>
    );
}
```

##### Column Spanning

A grid item can span over multiple columns.

```tsx
import { Grid, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid templateColumns={["1fr", "1fr", "1fr"]} gap="stack-sm">
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option2" />
                <Square backgroundColor="decorative-option3" />
                <Square gridColumnSpan={3} gridRow={2} backgroundColor="decorative-option4" />
            </Grid>
        </Div>
    );
}
```

##### Nesting

Grids can be nested to create complex layouts.

```tsx
import { Grid, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid templateRows={["1fr", "1fr"]} gap="stack-sm">
                <Grid templateColumns={["core_800", "auto"]}>
                    <Square backgroundColor="decorative-option1" />
                    <Square backgroundColor="decorative-option3" />
                </Grid>
                <Grid templateColumns={["auto", "core_960"]}>
                    <Square backgroundColor="decorative-option1-strong" />
                    <Square backgroundColor="decorative-option3-strong" />
                </Grid>
            </Grid>
        </Div>
    );
}
```

##### Repeat

A custom `repeat` function is available to support Hopper spacing scale values. However, if you prefer, you can use the [native CSS repeat function](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat\(\)).

```tsx
import { Div, type DivProps, Grid, repeat } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid
                templateColumns={repeat("auto-fit", "core_640")}
                autoRows="core_640"
                gap="stack-sm"
            >
                <Square backgroundColor="decorative-option1-weak" />
                <Square backgroundColor="decorative-option2-weak" />
                <Square backgroundColor="decorative-option3-weak" />
                <Square backgroundColor="decorative-option4-weak" />
                <Square backgroundColor="decorative-option5-weak" />
                <Square backgroundColor="decorative-option6-weak" />
                <Square backgroundColor="decorative-option7-weak" />
                <Square backgroundColor="decorative-option8-weak" />
                <Square backgroundColor="decorative-option9-weak" />
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option2" />
                <Square backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
                <Square backgroundColor="decorative-option5" />
                <Square backgroundColor="decorative-option6" />
                <Square backgroundColor="decorative-option7" />
                <Square backgroundColor="decorative-option8" />
                <Square backgroundColor="decorative-option9" />
                <Square backgroundColor="decorative-option1-strong" />
                <Square backgroundColor="decorative-option2-strong" />
                <Square backgroundColor="decorative-option3-strong" />
                <Square backgroundColor="decorative-option4-strong" />
                <Square backgroundColor="decorative-option5-strong" />
                <Square backgroundColor="decorative-option6-strong" />
                <Square backgroundColor="decorative-option7-strong" />
                <Square backgroundColor="decorative-option8-strong" />
                <Square backgroundColor="decorative-option9-strong" />
            </Grid>
        </Div>
    );
}
```

##### Minmax

A custom `minmax` function is available to support Hopper spacing scale values. However, if you prefer, you can use the [native CSS minmax function](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax\(\)).

```tsx
import { Div, type DivProps, Grid, minmax } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid
                templateColumns={[minmax("core_800", "1fr"), "core_960", minmax("core_800", "1fr")]}
                gap="stack-sm"
            >
                <Square backgroundColor="decorative-option1" />
                <Square backgroundColor="decorative-option2" />
                <Square backgroundColor="decorative-option3" />
            </Grid>
        </Div>
    );
}
```

##### Fit Content

A custom `fit-content` function is available to support Hopper spacing scale values. However, if you prefer, you can use the [native CSS fit-content function](https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content).

```tsx
import { Div, type DivProps, fitContent, Grid } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" minHeight="core_640" minWidth="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_400">
            <Grid
                templateColumns={[fitContent("core_800"), fitContent("core_800"), "1fr"]}
                gap="stack-sm"
                alignItems="center"
            >
                <Square padding="inset-sm" backgroundColor="decorative-option1" />
                <Square padding="inset-sm" backgroundColor="decorative-option2" />
                <Square padding="inset-sm" backgroundColor="decorative-option3" />
            </Grid>
        </Div>
    );
}
```

#### Best Practices

Grid is a powerful layout component for creating two-dimensional layouts with rows and columns. It's ideal for complex application layouts, data tables, card grids, and any scenario where precise control over both horizontal and vertical positioning is needed.

Grid should:

* Be used for two-dimensional layouts where items need to align both horizontally and vertically.
* Use Hopper dimension tokens for `templateColumns`, `templateRows`, and spacing properties to ensure consistency.
* Leverage named grid areas for semantic and maintainable layout definitions.
* Use the custom `repeat()`, `minmax()`, and `fitContent()` functions to support Hopper tokens.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  ```tsx
  import { Div, Grid } from "@hopper-ui/components";

  export function Example() {
      return (
          <Grid
              areas={[
                  "header header",
                  "sidebar content",
                  "footer footer"
              ]}
              templateColumns={["core_1280", "1fr"]}
              templateRows={["core_640", "auto", "core_640"]}
              gap="core_160"
          >
              <Div backgroundColor="decorative-option1" gridArea="header" padding="inset-md" />
              <Div backgroundColor="decorative-option2" gridArea="sidebar" padding="inset-md" />
              <Div backgroundColor="decorative-option3" gridArea="content" padding="inset-md" />
              <Div backgroundColor="decorative-option4" gridArea="footer" padding="inset-md" />
          </Grid>
      );
  }
  ```

  Use Grid for two-dimensional layouts with named areas for clarity

* 🚫 Don't:

  ```tsx
  import { Div, Flex } from "@hopper-ui/components";

  export function Example() {
      return (
          <Flex direction="column" gap="core_160">
              <Div backgroundColor="decorative-option1" padding="inset-md" />
              <Flex gap="core_160">
                  <Div backgroundColor="decorative-option2" padding="inset-md" width="core_1280" />
                  <Div backgroundColor="decorative-option3" padding="inset-md" flex={1} />
              </Flex>
              <Div backgroundColor="decorative-option4" padding="inset-md" />
          </Flex>
      );
  }
  ```

  Use nested Flex components when a single Grid would be simpler and more semantic

#### Props

| Prop                    | Type                                              | Default | Description                                                              |
| ----------------------- | ------------------------------------------------- | ------- | ------------------------------------------------------------------------ |
| inline                  | `boolean`                                         |         | Whether or not the element generate line breaks before or after himself. |
| autoRows                | `ResponsiveProp<GridAutoRowsValue>`               |         | An alias for the css grid-auto-rows property.                            |
| areas                   | `ResponsiveProp<GridTemplateAreasValue>`          |         | An alias for the css grid-template-areas property.                       |
| templateColumns         | `ResponsiveProp<GridTemplateColumnsValue>`        |         | An alias for the css grid-template-columns property.                     |
| templateRows            | `ResponsiveProp<GridTemplateRowsValue>`           |         | An alias for the css grid-template-rows property.                        |
| autoColumns             | `ResponsiveProp<GridAutoColumnsValue>`            |         | An alias for the css grid-auto-columns property.                         |
| autoFlow                | `ResponsiveProp<GridAutoFlow>`                    |         | An alias for the css grid-auto-flow property.                            |
| UNSAFE\_autoRows        | `ResponsiveProp<UNSAFE_GridAutoRowsValue>`        |         | An alias for the css grid-auto-rows property.                            |
| UNSAFE\_templateColumns | `ResponsiveProp<UNSAFE_GridTemplateColumnsValue>` |         | An alias for the css grid-template-columns property.                     |
| UNSAFE\_templateRows    | `ResponsiveProp<UNSAFE_GridTemplateRowsValue>`    |         | An alias for the css grid-template-rows property.                        |
| UNSAFE\_autoColumns     | `ResponsiveProp<UNSAFE_GridAutoColumnsValue>`     |         | An alias for the css grid-auto-columns property.                         |
| style                   | `CSSProperties`                                   |         |                                                                          |
| className               | `string`                                          |         |                                                                          |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

### Header

A placeholder for an header section.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/header/src/Header.tsx>

An header placeholder component provides no specific styling by itself, but receives styling from the parent container. In addition, an header placeholder will be automatically placed within the container's layout according to Hopper guidelines.

```tsx
import { Header } from "@hopper-ui/components";

export default function Example() {
    return (
        <Header>Software built for everyone to do their best work.</Header>
    );
}
```

#### Props

| Prop      | Type            | Default | Description                                                                                              |
| --------- | --------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| style     | `CSSProperties` |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children  | `ReactNode`     |         | The children of the component.                                                                           |
| className | `string`        |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

### Heading

A heading is a primitive component matching Hopper's typography type scale.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/typography/heading/src/Heading.tsx>

```tsx
import { Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <Heading>Great work!</Heading>
    );
}
```

#### Usage

##### Sizes

You can alter the size of the heading by specifying a `size` prop. The available sizes match Hopper Typography Type Scale — a type scale is a set of [font-size and line-height](https://hopper.workleap.design/tokens/semantic/typography#tokens-heading) pairs.

```tsx
import { Heading, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <Heading size="xs">Great work!</Heading>
            <Heading size="sm">Great work!</Heading>
            <Heading size="md">Great work!</Heading>
            <Heading size="lg">Great work!</Heading>
            <Heading size="xl">Great work!</Heading>
            <Heading size="2xl">Great work!</Heading>
            <Heading size="3xl">Great work!</Heading>
        </Stack>
    );
}
```

##### Levels

You can alter the level of the heading by specifying a `level` prop. The available levels match HTML heading elements — h1-h6.

```tsx
import { Heading, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <Heading level={1}>Great work!</Heading>
            <Heading level={2}>Great work!</Heading>
            <Heading level={3}>Great work!</Heading>
            <Heading level={4}>Great work!</Heading>
            <Heading level={5}>Great work!</Heading>
            <Heading level={6}>Great work!</Heading>
        </Stack>
    );
}
```

##### Inherit

You can alter the size of a heading to match the parent element's type scale by using the `inherit` size.

```tsx
import { Div, Heading } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div fontSize="heading-lg">
            <Heading size="inherit">Great work!</Heading>
        </Div>
    );
}
```

#### Props

These props are also available for `H1`, `H2`, `H3`, `H4`, `H5` and `H6` components.

| Prop      | Type                          | Default | Description                       |
| --------- | ----------------------------- | ------- | --------------------------------- |
| size      | `ResponsiveProp<HeadingSize>` | "md"    | The Typography Type Scale to use. |
| style     | `CSSProperties`               |         |                                   |
| level     | `number`                      |         |                                   |
| className | `string`                      |         |                                   |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

#### Migration Notes

Coming from Orbiter, you should be aware of the following change:

* Headings no longer come with margin by default; you're now responsible for adding the appropriate margin yourself.

In order to migrate to Hopper Heading seamlessly here's a cheatsheet regarding the applied margin-bottom of each heading sizes:

**xs** `calc(1.125rem * .5) | 9px`\
**sm** `calc(1.375rem * .5) | 11px`\
**md** `calc(1.75rem * .5) | 14px`\
**lg** `calc(2rem * .5) | 16px`\
**xl** `calc(2.5rem * .5) | 20px`\
**2xl** `calc(1rem * .5) | 8px`\
**3xl** `calc(1rem * .5) | 8px`

*Some UI might require different margins, this table is provided as a guidance to kickstart youre migration toward Hopper.*

### HelperMessage

A helper message component displays auxiliary text to guide users in the interface.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/helper-message/src/HelperMessage.tsx>

```tsx
import { HelperMessage } from "@hopper-ui/components";

export default function Example() {
    return (
        <HelperMessage>Software built for everyone to do their best work</HelperMessage>
    );
}
```

#### Usage

##### No icon

A helper message can hide its default icon.

```tsx
import { HelperMessage } from "@hopper-ui/components";

export default function Example() {
    return (
        <HelperMessage hideIcon>Software built for everyone to do their best work</HelperMessage>
    );
}
```

#### Props

| Prop        | Type            | Default | Description                                     |
| ----------- | --------------- | ------- | ----------------------------------------------- |
| hideIcon    | `boolean`       |         | Whether or not to hide the helper message icon. |
| style       | `CSSProperties` |         |                                                 |
| elementType | `string`        |         |                                                 |
| className   | `string`        |         |                                                 |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

### HopperProvider

HopperProvider is the container for all applications using Hopper. It defines the color scheme, locale, and other application level settings. It is also used to dynamically inject CSS variables and body styles to your application.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/hopper-provider/src/HopperProvider.tsx>

```tsx
import { Button, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider colorScheme="light" withBodyStyle>
            <Button variant="primary">
                Hello!
            </Button>
        </HopperProvider>
    );
}
```

#### Application provider

A HopperProvider must be the root component of your application. All other Hopper components rely on the Provider to define the color scheme, locale, and other settings that they need in order to render. You can nest multiple HopperProviders to create different themes or locales for different parts of your application if needed.

##### Color scheme

We recommend supporting both light and dark color schemes in your application. If you need to override this with an application specific setting, you can use the colorScheme prop.

```tsx
import { Button, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider colorScheme="light">
            <Button>I'm a light button</Button>
        </HopperProvider>
    );
}
```

See the [Styled System documentation](/styled-system/overview/introduction.md) for more information about using Hopper color variables in your application to ensure it adapts to light and dark mode properly.

See the [color schemes documentation](./color-schemes.md) for more information on how to apply a color scheme to your application.

##### Locales

Another important setting for your application is the locale. By default, Hopper chooses the locale matching the user's browser/operating system language. This can be overridden with the locale prop if you have an application specific setting. This prop accepts a [BCP 47](https://www.ietf.org/rfc/bcp/bcp47.txt) language code. Hopper currently supports the following locales: `en-US`, `en-UK`, `fr-CA`, `fr-FR`.

```tsx
import { Div, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider colorScheme="light" locale="en-US">
            <Div>{/* Your app here */}</Div>
        </HopperProvider>
    );
}
```

To access the current locale anywhere in your application, see the `useLocale` hook.

##### Client side routing

The HopperProvider component accepts an optional router prop. This enables Hopper components that render links to perform client side navigation using your application or framework's client side router. See the [client side routing](./client-side-routing.md) guide for details on how to set this up.

```tsx
import { Div, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    // @ts-expect-error - This is a fake implementation
    const navigate = useNavigateFromYourRouter();

    return (
        <HopperProvider colorScheme="light" navigate={navigate}>
            <Div>{/* Your app here */}</Div>
        </HopperProvider>
    );
}
```

##### Inject body styles

`withBodyStyle` determines whether you want Hopper to style the body of your application. By default, it is set to false. You should enable it on the Hopper provider at the root of your application.

```tsx
import { Div, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider colorScheme="light" withBodyStyle>
            <Div>{/* Your app here */}</Div>
        </HopperProvider>
    );
}
```

`withBodyStyle` includes the following body elements styles:

```css
body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--hop-body-md-font-family);
    line-height: var(--hop-body-md-line-height);
    font-size: var(--hop-body-md-font-size);
    color: var(--hop-neutral-text);
    background-color: var(--hop-neutral-surface);
    margin: 0;
    padding: 0;
}

@media not (prefers-reduced-motion) {
    body {
        scroll-behavior: smooth;
    }
}
```

##### useHopperContext

If you need to access the HopperProvider properties in a component, you can use the `useHopperContext` hook. This hook returns the Hopper context object, which includes the color scheme, locale, and other settings.

#### Props

### HtmlButton

A specialized button component for HTML button element.

```tsx
import { HtmlButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <HtmlButton border="core_rock-900" padding="core_10" type="button">
            Launch
        </HtmlButton>
    );
}
```

#### Usage

A button component accepts all the [button HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button) and [Hopper styled component props](/styled-system/concepts/styling.md).

### HtmlFooter

A specialized component to represent an HTML footer element.

```tsx
import { Article, H1, HtmlFooter, LI, Paragraph, UL } from "@hopper-ui/components";

export default function Example() {
    return (
        <Article>
            <H1>What does an aerospace engineer do?</H1>
            <UL>
                <LI>Research and development</LI>
                <LI>Testing</LI>
                <LI>Production and maintenance</LI>
            </UL>
            <HtmlFooter color="neutral-weak">
                <Paragraph>© 2021 Orbiter</Paragraph>
            </HtmlFooter>
        </Article>
    );
}
```

#### Usage

An footer component accepts all the [footer HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/footer) and [Hopper styled component props](/styled-system/concepts/styling.md).

### HtmlHeader

A specialized component to represent an HTML header element.

```tsx
import { H1, HtmlHeader, Main, Paragraph } from "@hopper-ui/components";

export default function Example() {
    return (
        <>
            <HtmlHeader>
                <H1>Walking On The Moon</H1>
            </HtmlHeader>
            <Main color="neutral-weak">
                <Paragraph>
                    Walking on the Moon is classic Sting moment, with his band The Police turning out one of
                    their most groovy reggae-inspired hits to the background of space exploration.
                </Paragraph>
            </Main>
        </>
    );
}
```

#### Usage

An header component accepts all the [header HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header) and [Hopper styled component props](/styled-system/concepts/styling.md).

### HtmlInput

A specialized component to represent an HTML input element.

```tsx
import { HtmlInput } from "@hopper-ui/components";

export default function Example() {
    return (
        <HtmlInput border="core_rock-900" type="text" />
    );
}
```

#### Usage

An input component accepts all the [input HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input) and [Hopper styled component props](/styled-system/concepts/styling.md).

### HtmlSection

A specialized component to represent an HTML section element.

```tsx
import { H2, HtmlSection, Paragraph } from "@hopper-ui/components";

export default function Example() {
    return (
        <HtmlSection color="neutral-weak">
            <H2>Our vision</H2>
            <Paragraph>
                Blue Origin was founded by Jeff Bezos with the vision of enabling a future where
                millions of people are living and working in space to benefit Earth.
            </Paragraph>
        </HtmlSection>
    );
}
```

#### Usage

A section component accepts all the [section HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/section) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Icon

An icon component is used to render a custom icon.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/icons/src/Icon.tsx>

```tsx
import { createIcon } from "@hopper-ui/icons";

import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts";

const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");

export default function Example() {
    return (
        <CustomIcon />
    );
}
```

Hopper provides multiple ways to use icons in your project:

* Using the [Workleap icon library](/icons/overview/introduction.md)
* [Creating your own icons](#creating-your-custom-icons)

#### Creating your custom icons

To use an icon component to create custom icons you must first import your SVG icon as a component by using [`@svgr/webpack`](https://react-svgr.com/docs/getting-started/).

Hopper provides two methods for creating your custom icons:

* Using the `createIcon` function (recommended)
* Using the `Icon` component

Both `Icon` and `createIcon` enable you to style the icon using the styled system.

##### Using the createIcon function

The `createIcon` function is a convenience wrapper around the process of generating icons with `Icon`, allowing you to achieve the same functionality with less effort.

```tsx
import CustomIcon16 from "./path/to/custom-icon-16.svg";
import CustomIcon24 from "./path/to/custom-icon-24.svg";
import CustomIcon32 from "./path/to/custom-icon-32.svg";
import { createIcon } from "@hopper-ui/icons";

const CustomIcon = createIcon(CustomIcon16, CustomIcon24, CustomIcon32, "CustomIcon")
```

##### Using the Icon component

```tsx
import CustomIcon16 from "./path/to/custom-icon-16.svg"
import CustomIcon24 from "./path/to/custom-icon-24.svg"
import CustomIcon32 from "./path/to/custom-icon-32.svg"
import { Icon, type CreatedIconProps } from "@hopper-ui/icons";

function CustomIcon(props: CreatedIconProps) {
  return (
    <Icon
        src16={CustomIcon16}
        src24={CustomIcon24}
        src32={CustomIcon32}
        {...props} />
  )
}
```

#### Usage

##### Sizes

An icon can vary in size. When used inside another component, it'll generally be sized automatically. If you use a standalone icon, you can use the size prop to control the sizing.

```tsx
import { Inline } from "@hopper-ui/components";
import { createIcon } from "@hopper-ui/icons";

import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts";

const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");

export default function Example() {
    return (
        <Inline>
            <CustomIcon size="sm" />
            <CustomIcon size="md" />
            <CustomIcon size="lg" />
        </Inline>
    );
}
```

##### Styling

The color of the icon can be changed using the `fill` prop. All the styled system props are also available.

```tsx
import { createIcon } from "@hopper-ui/icons";

import { Sparkles16, Sparkles24, Sparkles32 } from "../src/index.ts";

const CustomIcon = createIcon(Sparkles16, Sparkles24, Sparkles32, "CustomIcon");

export default function Example() {
    return (
        <CustomIcon fill="primary" />
    );
}
```

#### Props

| Prop      | Type                                                                               | Default | Description                                 |
| --------- | ---------------------------------------------------------------------------------- | ------- | ------------------------------------------- |
| style     | `CSSProperties`                                                                    |         |                                             |
| className | `string`                                                                           |         |                                             |
| size      | `ResponsiveProp<IconSize>`                                                         | "md"    | The size of the icon.                       |
| src16     | `ElementType<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>` |         | The source of the icon with a size of 16px. |
| src24     | `ElementType<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>` |         | The source of the icon with a size of 24px. |
| src32     | `ElementType<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>` |         | The source of the icon with a size of 32px. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

### IconList

An IconList encapsulates a collection of icons.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/icon-list/src/IconList.tsx>

```tsx
import { IconList } from "@hopper-ui/components";
import { StarIcon, StarSolidIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <IconList>
            <StarSolidIcon />
            <StarSolidIcon />
            <StarSolidIcon />
            <StarSolidIcon />
            <StarIcon />
        </IconList>
    );
}
```

#### Anatomy

##### Structure

```tsx
<IconList>
    <Icon /> /* (Required) An icon for the IconList */
</IconList>
```

##### Composed Components

An `IconList` uses the following components:

| Component | Description                                        |
| --------- | -------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon. |

#### Usage

##### Sizes

An icon list can vary in size.

```tsx
import { IconList, Stack } from "@hopper-ui/components";
import { StarIcon, StarSolidIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Stack alignX="center">
            <IconList size="sm">
                <StarSolidIcon />
                <StarSolidIcon />
                <StarSolidIcon />
                <StarSolidIcon />
                <StarIcon />
            </IconList>
            <IconList size="md">
                <StarSolidIcon />
                <StarSolidIcon />
                <StarSolidIcon />
                <StarSolidIcon />
                <StarIcon />
            </IconList>
            <IconList size="lg">
                <StarSolidIcon />
                <StarSolidIcon />
                <StarSolidIcon />
                <StarSolidIcon />
                <StarIcon />
            </IconList>
        </Stack>
    );
}
```

#### Props

| Prop      | Type                       | Default | Description                                                                                              |
| --------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| size      | `ResponsiveProp<IconSize>` |         | The size of the icon.                                                                                    |
| children  | `ReactNode`                |         | The children of the component.                                                                           |
| className | `string`                   |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| style     | `CSSProperties`            |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `disabled` prop is no longer available.

### IllustratedMessage

An illustrated message display an image and a message, usually for an empty state or an error page.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/illustrated-message/src/IllustratedMessage.tsx>

```tsx
import { Content, Heading, IllustratedMessage, SvgImage } from "@hopper-ui/components";

import { NoResults } from "../assets/index.ts";

export default function Example() {
    return (
        <IllustratedMessage>
            <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
            <Heading>No results found</Heading>
            <Content>Try searching for something else.</Content>
        </IllustratedMessage>
    );
}
```

#### Anatomy

##### Structure

```tsx
<IllustratedMessage>
    <Image /> /* (Required) The image of the illustrated message */
    <Heading /> /* (Optional) The heading of the illustrated message */
    <Content /> /* (Optional) The content of the illustrated message */
    <ButtonGroup> /* (Optional) The button group of the illustrated message */
        <Button />
    </ButtonGroup>
    <Button /> /* (Optional) The button of the illustrated message */
</IllustratedMessage>
```

##### Composed Components

A `IllustratedMessage` uses the following components:

| Component   | Description                                                                   |
| ----------- | ----------------------------------------------------------------------------- |
| Button      | A button allows a user to initiate an action.                                 |
| ButtonGroup | A button group handles the spacing and orientation for a grouping of buttons. |
| Content     | A placeholder for the main content section of a component.                    |
| Heading     | A heading is a primitive component matching Hopper's typography type scale.   |
| Image       | An image component that can be used to display images.                        |

#### Usage

##### Sizes

An illustrated message can use different sizes.

```tsx
import { Content, Heading, IllustratedMessage, Image, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack gap="core_480" alignX="center">
            <IllustratedMessage size="sm">
                <Image src="/frog.jpg" alt="Frog" />
                <Heading>No results found</Heading>
                <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
            </IllustratedMessage>
            <IllustratedMessage size="md">
                <Image src="/frog.jpg" alt="Frog" />
                <Heading>No results found</Heading>
                <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
            </IllustratedMessage>
            <IllustratedMessage size="lg">
                <Image src="/frog.jpg" alt="Frog" />
                <Heading>No results found</Heading>
                <Content>It seems like there’s nothing here for now. Hop on and add something new.</Content>
            </IllustratedMessage>
        </Stack>

    );
}
```

##### Image

An illustrated message can handle images (jpg, png).

```tsx
import { Content, Heading, IllustratedMessage, Image } from "@hopper-ui/components";

export default function Example() {
    return (
        <IllustratedMessage>
            <Image src="/frog.jpg" alt="No Results" />
            <Heading>No results found</Heading>
            <Content>It seems like there’s nothing here for now. Hop on and add something new!</Content>
        </IllustratedMessage>
    );
}
```

##### Buttons

An illustrated message can handle either a button

```tsx
import { Button, Content, Heading, IllustratedMessage, SvgImage } from "@hopper-ui/components";

import { NoResults } from "../assets/index.ts";

export default function Example() {
    return (
        <IllustratedMessage>
            <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
            <Heading>No results found</Heading>
            <Content>Try searching for something else.</Content>
            <Button>Try again</Button>
        </IllustratedMessage>
    );
}
```

or a group of buttons

```tsx
import { Button, ButtonGroup, Content, Heading, IllustratedMessage, SvgImage } from "@hopper-ui/components";

import { NoResults } from "../assets/index.ts";

export default function Example() {
    return (
        <IllustratedMessage>
            <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
            <Heading>No results found</Heading>
            <Content>Try searching for something else.</Content>
            <ButtonGroup>
                <Button variant="secondary">Back</Button>
                <Button>Try again</Button>
            </ButtonGroup>
        </IllustratedMessage>
    );
}
```

##### SVG

An illustrated message can handle svgs.

```tsx
import { Content, Heading, IllustratedMessage, SvgImage } from "@hopper-ui/components";

import { NoResults } from "../assets/index.ts";

export default function Example() {
    return (
        <IllustratedMessage>
            <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
            <Heading>No results found</Heading>
            <Content>Try searching for something else.</Content>
        </IllustratedMessage>
    );
}
```

##### Layout Samples

To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in [Orbiter](https://wl-orbiter-website.netlify.app/?path=/docs/illustrated-message--docs).

###### Horizontal

```tsx
import { Content, Heading, Inline, Stack, SvgImage } from "@hopper-ui/components";

import { NoResults } from "../../assets/index.ts";

export default function Example() {
    return (
        <Inline alignY="center" gap="stack-lg">
            <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
            <Stack gap="stack-sm">
                <Heading>No results found</Heading>
                <Content color="neutral-weak">Please try another search term.</Content>
            </Stack>
        </Inline>
    );
}
```

#### Props

| Prop      | Type                     | Default | Description                                                                                              |
| --------- | ------------------------ | ------- | -------------------------------------------------------------------------------------------------------- |
| size      | `IllustratedMessageSize` | "md"    | The size of the IllustratedMessage.                                                                      |
| children  | `ReactNode`              |         | The children of the component.                                                                           |
| className | `string`                 |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| style     | `CSSProperties`          |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `orientation` has been removed. Refer to this [sample](#horizontal) to see an implementation example for a horizontal orientation.
* `width` and `height` prop will now affect the whole wrapper instead of just the image.

### Illustration

An illustration compose an image with a background color. Use an illustration as an hero in a modal.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/illustration/src/Illustration.tsx>

```tsx
import { Illustration, Image } from "@hopper-ui/components";

export default function Example() {
    return (
        <Illustration backgroundColor="primary-weak" UNSAFE_height="12rem" padding="core_160">
            <Image alt="frog" src="/cute-frog.png" />
        </Illustration>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Illustration>
    <Image /> /* (Required) The image of the illustration */
</Illustration>
```

##### Composed Components

An `Illustration` uses the following components:

| Component | Description                                            |
| --------- | ------------------------------------------------------ |
| Image     | An image component that can be used to display images. |

#### Usage

##### Default

An illustration renders horizontally by default.

```tsx
import { Illustration, Image } from "@hopper-ui/components";

export default function Example() {
    return (
        <Illustration backgroundColor="primary-weak" UNSAFE_height="12rem" padding="core_160">
            <Image alt="frog" src="/cute-frog.png" />
        </Illustration>
    );
}
```

##### Vertical

An illustration can render vertically.

```tsx
import { Div, Illustration, Image } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div UNSAFE_height="30rem">
            <Illustration backgroundColor="primary-weak" orientation="vertical" UNSAFE_width="12rem" padding="core_160">
                <Image alt="frog" src="/cute-frog.png" />
            </Illustration>
        </Div>
    );
}
```

#### Shape

An illustration can have a rounded shape.

```tsx
import { Illustration, Image } from "@hopper-ui/components";

export default function Example() {
    return (
        <Illustration backgroundColor="primary-weak" shape="rounded" UNSAFE_height="12rem">
            <Image alt="frog" src="/cute-frog.png" />
        </Illustration>
    );
}
```

#### Props

| Prop        | Type                                         | Default      | Description                                                                                              |
| ----------- | -------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------------- |
| orientation | `ResponsiveProp<"horizontal" \| "vertical">` | "horizontal" | The orientation of the illustration.                                                                     |
| shape       | `"straight" \| "rounded"`                    | "straight"   | The illustration shape.                                                                                  |
| style       | `CSSProperties`                              |              | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children    | `ReactNode`                                  |              | The children of the component.                                                                           |
| className   | `string`                                     |              | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

### Image

An image component that can be used to display images.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/image/src/Image.tsx>

```tsx
import { Image } from "@hopper-ui/components";

export default function Example() {
    return (
        <Image src="/frog.jpg" alt="Frog" UNSAFE_width="300px" />
    );
}
```

#### Usage

##### Shapes

An image can use a different shape.

```tsx
import { Image, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="300px" shape="rounded" />
            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="300px" shape="circular" />
        </Inline>
    );
}
```

##### Sizes

An image can vary in size.

```tsx
import { Image, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="200px" height="auto" />
            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="300px" height="auto" />
            <Image src="/frog.jpg" alt="Frog" UNSAFE_width="400px" height="auto" />
        </Inline>
    );
}
```

#### Object fit

An image can have different object fits

```tsx
import { Div, Image } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div UNSAFE_width="200px" UNSAFE_height="200px">
            <Image objectFit="cover" src="/frog.jpg" alt="Frog" />
        </Div>
    );
}
```

##### Retina

You can let the browser decide which image is best to serve according to the user device screen pixel density.

It is highly recommended to serve a 1x image as well as a 2x image, twice the intended size. This assures the user has the best looking image possible.

Avoid serving images that are unecessary big, images should be resized to the intended final image display size. This assures we don't waste bandwith for the user.

```tsx
import { Image } from "@hopper-ui/components";

export default function Example() {
    return (
        <Image srcSet="/frog.jpg 1x, /frog2x.jpg 2x" alt="Frog" UNSAFE_width="300px" />
    );
}
```

#### SvgImage

For some use cases, like dark mode support, an SVG image is a better fit than a standard PNG or JPG image.

```tsx
import { SvgImage } from "@hopper-ui/components";

import { NoResults } from "../assets/index.ts";

export default function Example() {
    return (
        <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" />
    );
}
```

##### Size

An SVG image size can be specified with the `width` and `height` props.

```tsx
import { SvgImage } from "@hopper-ui/components";

import { NoResults } from "../assets/index.ts";

export default function Example() {
    return (
        <SvgImage stroke="neutral" src={NoResults} aria-label="No Results" UNSAFE_width="200px" UNSAFE_height="200px" />
    );
}
```

##### Color

An SVG image `stroke` and `fill` color can vary.

```tsx
import { SvgImage } from "@hopper-ui/components";

import { NoResults } from "../assets/index.ts";

export default function Example() {
    return (
        <SvgImage
            aria-label="No results"
            fill="core_sunken-treasure-100"
            src={NoResults}
            stroke="core_sapphire-600"
        />
    );
}
```

#### Props

##### Image

| Prop      | Type                                    | Default | Description                                                                                              |
| --------- | --------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| shape     | `"straight" \| "rounded" \| "circular"` |         | The image shape.                                                                                         |
| src       | `ResponsiveProp<string>`                |         | An image path.                                                                                           |
| className | `string`                                |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| style     | `CSSProperties`                         |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

##### SvgImage

| Prop      | Type                          | Default | Description                                                                                              |
| --------- | ----------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| src       | `ResponsiveProp<ElementType>` |         | An SVG as a component.                                                                                   |
| className | `string`                      |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| style     | `CSSProperties`               |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

### Img

A specialized component to represent an HTML img element.

```tsx
import { Img } from "@hopper-ui/components";

export default function Example() {
    return (
        <Img border="core_rock-400" src="/frog.jpg" />
    );
}
```

#### Usage

An img component accepts all the [img HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Inline

An inline component is a layout primitive used to arrange elements horizontally.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/layout/src/Inline.tsx>

```tsx
import { Inline, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_320">
            <Inline>
                <Square backgroundColor="decorative-option1" />
                <Square height="core_800" backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Inline>
        </Div>
    );
}
```

#### Usage

##### Reverse

The order and direction of inline items can be reversed.

```tsx
import { Inline, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_320">
            <Inline reverse>
                <Square backgroundColor="decorative-option1" />
                <Square height="core_800" backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Inline>
        </Div>
    );
}
```

##### Align X

Inline items can be aligned on the horizontal axis.

```tsx
import { Inline, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_320">
            <Inline alignX="center">
                <Square backgroundColor="decorative-option1" />
                <Square height="core_800" backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Inline>
        </Div>
    );
}
```

##### Align Y

Inline items can be aligned on the vertical axis.

```tsx
import { Inline, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Inline alignY="flex-end" UNSAFE_height="10rem">
                <Square backgroundColor="decorative-option1" />
                <Square height="core_800" backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Inline>
        </Div>
    );
}
```

#### Best Practices

Inline is a specialized layout component for arranging items horizontally with consistent spacing and vertical alignment. It's a preset of `Flex` with `direction="row"` and `alignItems="center"`, designed for common horizontal layouts like button groups, icon-label pairs, and navigation items.

Inline should:

* Be used for simple horizontal layouts where items should be vertically centered.
* Use [Hopper space tokens](/tokens/semantic/space.md) for the `gap` property to ensure consistency.
* Be the default choice for horizontal layouts unless you need custom alignment or other flex properties.
* Keep layouts simple and semantic without unnecessary wrapper elements.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  ```tsx
  import { Button, Inline, Text } from "@hopper-ui/components";
  import { SparklesIcon } from "@hopper-ui/icons";

  export function Example() {
      return (
          <Inline gap="inline-sm">
              <SparklesIcon />
              <Text>AI Assist</Text>
              <Button variant="primary" size="sm">Try it</Button>
          </Inline>
      );
  }
  ```

  Use Inline for simple horizontal layouts with centered items

* 🚫 Don't:

  ```tsx
  import { Button, Flex, Text } from "@hopper-ui/components";
  import { SparklesIcon } from "@hopper-ui/icons";

  export function Example() {
      return (
          <Flex direction="row" alignItems="center" gap="inline-sm">
              <SparklesIcon />
              <Text>AI Assist</Text>
              <Button variant="primary" size="sm">Try it</Button>
          </Flex>
      );
  }
  ```

  Use Flex with direction='row' and alignItems='center' when Inline is sufficient

**Rule 2**

* ✅ Do:

  Use \`alignY\` to adjust vertical alignment of items

* 🚫 Don't:

  Use \`alignItems\` which is not supported by \`Inline\`

**Rule 3**

* ✅ Do:

  Use \`alignX\` to adjust horizontal alignment of items

* 🚫 Don't:

  Use \`justifyContent\` which is not supported by \`Inline\`

#### Props

| Prop      | Type                                                  | Default | Description                                                      |
| --------- | ----------------------------------------------------- | ------- | ---------------------------------------------------------------- |
| reverse   | `boolean`                                             |         | Whether or not to reverse the order of the elements.             |
| alignX    | `ResponsiveProp<JustifyContent>`                      |         | An alias for the css justify-content property.                   |
| alignY    | `ResponsiveProp<AlignItems>`                          |         | An alias for the css align-items property.                       |
| style     | `CSSProperties`                                       |         |                                                                  |
| className | `string`                                              |         |                                                                  |
| wrap      | `ResponsiveProp<FlexWrap> \| ResponsiveProp<boolean>` |         | Whether to wrap the flex items. The value can also be a boolean. |
| basis     | `ResponsiveProp<FlexBasis<0 \| (string & {})>>`       |         | An alias for the css flex-basis property.                        |
| grow      | `ResponsiveProp<FlexGrow>`                            |         | An alias for the css flex-grow property.                         |
| shrink    | `ResponsiveProp<FlexShrink>`                          |         | An alias for the css flex-shrink property.                       |
| inline    | `boolean`                                             |         | Whether to display the flex container as an inline element.      |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

#### Migration Notes

Coming from Orbiter, you should be aware of the following change:

* The default `gap` value has been reduced to `1rem` / `var(--hop-space-inline-md)` from `1.25rem`. Use `UNSAFE_gap="1.25rem"` as a temporary measure during the migration to the Hopper design system. This value should eventually be removed to align with the new design standards.

### Label

A label is a primitive component matching Hopper's typography type scale.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/typography/label/src/Label.tsx>

```tsx
import { Label } from "@hopper-ui/components";

export default function Example() {
    return (
        <Label>Software built for everyone to do their best work</Label>
    );
}
```

#### Usage

##### Color

The label component has a default color, but it can be easily overridden.

```tsx
import { Label } from "@hopper-ui/components";

export default function Example() {
    return (
        <Label color="decorative-option3">Software built for everyone to do their best work</Label>
    );
}
```

##### Required

The label component can be marked as required. You can customize the necessity indicator by using an asterisk.

```tsx
import { FieldLabel } from "@hopper-ui/components";

export default function Example() {
    return (
        <FieldLabel isRequired necessityIndicator="asterisk">Username</FieldLabel>
    );
}
```

##### Optional

The label component can show the optional necessity indicator as a label.

```tsx
import { FieldLabel } from "@hopper-ui/components";

export default function Example() {
    return (
        <FieldLabel necessityIndicator="label">Username</FieldLabel>
    );
}
```

#### Props

| Prop        | Type            | Default | Description |
| ----------- | --------------- | ------- | ----------- |
| style       | `CSSProperties` |         |             |
| elementType | `string`        |         |             |
| className   | `string`        |         |             |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

### Link

A link allows a user to navigate to a different location.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/link/src/Link.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/link/>

Links are used as navigational elements and can be used on their own or inline with text. They provide a lightweight option for navigation but like other interactive elements, too many links will clutter a page and make it difficult for users to identify their next steps. This is especially true for inline links, which should be used sparingly.

```tsx
import { Link } from "@hopper-ui/components";

export default function Example() {
    return (
        <Link href="#">Learn more</Link>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Link>
    <Icon /> /* (Optional) An icon in the link */
    <Text /> /* (Optional) The text content of the link */
</Link>
```

##### Composed Components

A `Link` uses the following components:

| Component | Description                                                                        |
| --------- | ---------------------------------------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon.                                 |
| Text      | A text component is a primitive component matching Hopper's typography type scale. |

#### Usage

##### Disabled

Links can be disabled.

```tsx
import { Inline, Link } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Link isDisabled variant="primary" href="#">Learn more</Link>
            <Link isDisabled variant="secondary" href="#">Learn more</Link>
        </Inline>
    );
}
```

##### External

An external text link will render by default with `rel="noopener noreferrer"` and `target="_blank"` attributes.

```tsx
import { Link, Text } from "@hopper-ui/components";
import { NewTabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Link href="#" isExternal alignItems="end">
            <Text>Learn more</Text>
            <NewTabIcon size="sm" />
        </Link>
    );
}
```

##### No Href

When a `<Link>` does not have an href prop, it is rendered as a `<span role="link">` instead of an `<a>`. Events will need to be handled in JavaScript with the `onPress` prop.

Note: this will not behave like a native link. Browser features like context menus and open in a new tab will not apply.

```tsx
import { Link } from "@hopper-ui/components";

export default function Example() {
    return (
        <Link
            onPress={() => {
                window.alert("You clicked the link!");
            }}
        >
            Learn more
        </Link>
    );
}
```

##### Variants

Links can be presented in different variants.

```tsx
import { Inline, Link } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Link variant="primary" href="#">Learn more</Link>
            <Link variant="secondary" href="#">Learn more</Link>
        </Inline>
    );
}
```

##### Sizes

Links can be presented in different sizes.

```tsx
import { Link, Stack, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack padding="inset-xl">
            <Text size="xs">
                Would you like to <Link size="inherit" href="#">learn more</Link> about this role?
            </Text>
            <Link size="xs" href="#">learn more</Link>
            <Link size="sm" href="#">learn more</Link>
            <Link size="md" href="#">learn more</Link>
            <Link size="lg" href="#">learn more</Link>
            <Link size="xl" href="#">learn more</Link>
            <Link size="2xl" href="#">learn more</Link>
        </Stack>
    );
}
```

##### Inherit Size

The size can also be inherited.

```tsx
import { Link, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Text size="lg">
            Would you like to <Link href="#">learn more</Link> about this role?
        </Text>
    );
}
```

##### Icon

Links can contain an icon.

```tsx
import { Inline, Link, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Link variant="primary" href="#">
                <Text>Learn more</Text>
                <SparklesIcon />
            </Link>
            <Link variant="secondary" href="#">
                <Text>Learn more</Text>
                <SparklesIcon />
            </Link>
        </Inline>
    );
}
```

##### Start Icon

**Non standard** start icons can be provided to handle special cases. However, think twice before adding start icons, end icons should be your go to.

```tsx
import { Inline, Link, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Link variant="primary" href="#">
                <SparklesIcon slot="start-icon" />
                <Text>Learn more</Text>
            </Link>
            <Link variant="secondary" href="#">
                <SparklesIcon slot="start-icon" />
                <Text>Learn more</Text>
            </Link>
        </Inline>
    );
}
```

##### Icon Only

A link's content can be a single icon. When using this variant, an accessible name must be provided through the `aria-label` prop. See [WCAG practices](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html).

```tsx
import { Link, Inline } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Link aria-label="Clean" variant="primary" href="#">
                <SparklesIcon />
            </Link>
            <Link aria-label="Clean" variant="secondary" href="#">
                <SparklesIcon />
            </Link>
        </Inline>
    );
}
```

##### Quiet

All links can have a quiet style, without an underline. This style should only be used when the placement and context of the link is explicit enough that a visible underline isn't necessary.

```tsx
import { Link, Paragraph } from "@hopper-ui/components";

export default function Example() {
    return (
        <Paragraph>
            Would you like to <Link isQuiet href="#">learn more</Link> about this role?
        </Paragraph>
    );
}
```

##### Standalone

All links can have a standalone style, without an underline which is similar to quiet, the difference is this adds block padding to make it more similar to a button.

```tsx
import { Card, Link, Text } from "@hopper-ui/components";
import { Heading } from "react-aria-components";

export default function Example() {
    return (
        <Card padding="core_240" UNSAFE_width="300px">
            <Heading>
                Card component
            </Heading>
            <Text>
                This card component can include a link which is standalone
            </Text>
            <Link isStandalone href="#">Learn more</Link>
        </Card>
    );
}
```

##### React Router Link

A button can be rendered as a react router link when using the `href` property and setting the navigate property on the `HopperProvider`

```tsx
import { Link, HopperProvider } from "@hopper-ui/components";
import { createMemoryRouter, RouterProvider, useNavigate } from "react-router-dom";

export default function App() {
    const router = createMemoryRouter([{
        path: "/123",
        element: <>Navigated Successfully! <Example /></>
    }, {
        path: "*",
        element: <Example />
    }
    ]);

    return (
        <RouterProvider router={router} />
    );
}

function Example() {
    const navigate = useNavigate();

    return (
        <HopperProvider colorScheme="light" navigate={navigate}>
            <Link href="/123">Go to next router page</Link>
        </HopperProvider>

    );
}
```

##### Custom Styles

When the colors from the variant props are not enough, you can use the `color` prop to set the color of the link. This removes the hover and focus colors from the link. Use the color props when a link needs to be placed on top of a colored background or visual. Make sure that the background and the link color meet the minimum color contrast ratio.

```tsx
import { Link, Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div width="80%" padding="inset-md" backgroundColor="decorative-option3">
            <Link
                color="decorative-option3"
                colorHover="decorative-option3-weak"
                colorFocus="decorative-option3-weak"
                href="#"
            >
                Learn more
            </Link>
        </Div>
    );
}
```

##### Image

A link's content can be an image element.

```tsx
import { Image, Link } from "@hopper-ui/components";

export default function Example() {
    return (
        <Link href="#" borderRadius="rounded-md" overflow="hidden">
            <Image UNSAFE_width="150px" src="/frog.jpg" alt="Kermit Frog" />
        </Link>
    );
}
```

#### Best Practices

Links are used primarily for navigation, and usually appear within or directly following a sentence. Buttons are used primarily for actions. Differentiating between the two both in the design and code result in:

* A more inclusive experience for assistive technology users.
* A more cohesive visual experience for sighted users.
* Products that are easier to maintain at scale.

##### Open new tabs only when necessary

Use links whenever possible to avoid disorienting users and causing accessibility problems by opening a new tab. When using an external link, always use the NewTab icon beside the link's label. External links should be used when users are:

* Performing a task or workflow.
* Navigating to a page outside of the Workleap platform.

Use links when you want users to:

* Navigate to a different page within the application
* Navigation to an entirely different site
* Jump to an element on the same page
* Link to emails or phone numbers

Use a button instead of a link for actions that will change data or manipulate how it is displayed, change a state, or trigger an action. Buttons should never be used for navigational actions.

#### Props

| Prop           | Type                                   | Default   | Description                                                                                                                                                                        |
| -------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| variant        | `LinkVariant`                          | "primary" | The visual style of the link.                                                                                                                                                      |
| size           | `ResponsiveProp<LinkSize>`             | "inherit" | Size of the link.                                                                                                                                                                  |
| isQuiet        | `boolean`                              |           | Whether the link should be displayed with a quiet style.                                                                                                                           |
| isExternal     | `boolean`                              |           | Whether the link should open in a new tab.                                                                                                                                         |
| isStandalone   | `boolean`                              |           | Wheter the link is standalone                                                                                                                                                      |
| style          | `StyleOrFunction<LinkRenderProps>`     |           | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| isDisabled     | `boolean`                              |           | Whether the link is disabled.                                                                                                                                                      |
| autoFocus      | `boolean`                              |           | Whether the element should receive focus on render.                                                                                                                                |
| href           | `string`                               |           | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                     |
| hrefLang       | `string`                               |           | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                     |
| target         | `HTMLAttributeAnchorTarget`            |           | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                     |
| rel            | `string`                               |           | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                    |
| download       | `string \| boolean`                    |           | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).   |
| ping           | `string`                               |           | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                     |
| referrerPolicy | `HTMLAttributeReferrerPolicy`          |           | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                   |
| routerOptions  | `undefined`                            |           | Options for the configured client side router.                                                                                                                                     |
| dir            | `string`                               |           |                                                                                                                                                                                    |
| lang           | `string`                               |           |                                                                                                                                                                                    |
| inert          | `boolean`                              |           |                                                                                                                                                                                    |
| translate      | `"yes" \| "no"`                        |           |                                                                                                                                                                                    |
| children       | `ChildrenOrFunction<LinkRenderProps>`  |           | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className      | `ClassNameOrFunction<LinkRenderProps>` |           | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element receives focus.                                                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element loses focus.                                                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`                          |         | Handler that is called when the element's focus status changes.                                                                                                                                           |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is pressed.                                                                                                                                                             |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is released.                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `Link`, `IconLink` and `TextLink` have all been merged into one.
* `LinkAsButton` has been removed. It is now possible to use the `Link` component without an `href` attribute.

### LinkButton

A LinkButton looks like a button but behaves like a link.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/buttons/src/LinkButton.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/link/>

```tsx
import { LinkButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <LinkButton href="https://www.google.com">Support</LinkButton>
    );
}
```

#### Anatomy

##### Concepts

*LinkButton* makes use of the following concepts:

* [Client Side Routing](./client-side-routing.md)

##### Structure

```tsx
<LinkButton>
    <IconList /> /* (Optional) A list of icons in the LinkButton */
    <Icon /> /* (Optional) An icon in the LinkButton */
    <Text /> /* (Optional) Text in the LinkButton, required if using an Icon or an IconList */
</LinkButton>
```

##### Composed Components

A *LinkButton* uses the following components:

| Component | Description                                                                        |
| --------- | ---------------------------------------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon.                                 |
| IconList  | An IconList encapsulates a collection of icons.                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale. |

#### Usage

##### Variants

A link button can use different variants.

```tsx
import { Inline, LinkButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <LinkButton href="https://www.google.com" variant="primary">Help</LinkButton>
            <LinkButton href="https://www.google.com" variant="secondary">Help</LinkButton>
            <LinkButton href="https://www.google.com" variant="upsell">Help</LinkButton>
            <LinkButton href="https://www.google.com" variant="danger">Help</LinkButton>
            <LinkButton href="https://www.google.com" variant="ghost-primary">Help</LinkButton>
            <LinkButton href="https://www.google.com" variant="ghost-secondary">Help</LinkButton>
            <LinkButton href="https://www.google.com" variant="ghost-danger">Help</LinkButton>
        </Inline>
    );
}
```

**Primary** - For the principal call to action on the page. Primary buttons should only appear once per screen — not including the application header, modal or side panel.

**Secondary** - For secondary actions on each page. Secondary buttons can be used in conjunction with a primary link button or on its own. Paired with a Primary link button, the secondary link button usually performs the negative action of the set, such as “Cancel.”

**Upsell** - For upsell actions that relate to upgrading an account or a plan. Use the upsell link button to distinguish it from an existing primary link button. In some cases, a primary link button can be used instead when the general context of the page is about upselling.

**Danger** - For actions that could have destructive effects on the user's data.

**Ghost-\[primary|secondary|danger]** - For less prominent, and sometimes independent, actions. Ghost buttons can be used in isolation or paired with a primary link button when there are multiple calls to action. Ghost buttons can also be used for subtasks on a page where a primary link button for the main and final action is present.

##### Sizes

A link button can vary in size.

```tsx
import { Inline, LinkButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <LinkButton href="https://www.google.com" size="md" variant="primary">Help</LinkButton>
            <LinkButton href="https://www.google.com" size="sm" variant="primary">Help</LinkButton>
            <LinkButton href="https://www.google.com" size="xs" variant="primary">Help</LinkButton>
        </Inline>
    );
}
```

##### Disabled

A link button can be disabled.

```tsx
import { Inline, LinkButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <LinkButton href="https://www.google.com" isDisabled variant="primary">Help</LinkButton>
            <LinkButton href="https://www.google.com" isDisabled variant="ghost-primary">Help</LinkButton>
        </Inline>
    );
}
```

##### External

Add isExternal attributes to render an external link button.

```tsx
import { LinkButton, Text } from "@hopper-ui/components";
import { NewTabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <LinkButton href="https://www.google.com" isExternal>
            <Text>Learn more</Text>
            <NewTabIcon />
        </LinkButton>
    );
}
```

##### No Href

When a link button link does not have an href prop, it is rendered as a `<span role="link">` instead of an `<a>`. Events will need to be handled in JavaScript with the `onPress` prop.

Note: this will not behave like a native link. Browser features like context menus and open in a new tab will not apply.

```tsx
import { LinkButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <LinkButton
            onPress={() => {
                window.alert("You clicked the link button!");
            }}
        >
            Learn more
        </LinkButton>
    );
}
```

##### Fluid

A link button can be expanded to full width to fill its parent container.

```tsx
import { Inline, LinkButton, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <LinkButton href="https://www.google.com" isFluid variant="primary">
                Help
            </LinkButton>
            <LinkButton href="https://www.google.com" isFluid variant="primary">
                <SparklesIcon />
                <Text>Help</Text>
            </LinkButton>
            <LinkButton href="https://www.google.com" isFluid>
                <Text>Help</Text>
                <SparklesIcon slot="end-icon" />
            </LinkButton>
        </Inline>
    );
}
```

##### Icon Only

A link button can contain only an icon.

```tsx
import { Inline, LinkButton } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <LinkButton href="https://www.google.com" aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </LinkButton>
            <LinkButton href="https://www.google.com" size="sm" aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </LinkButton>
            <LinkButton href="https://www.google.com" size="xs" aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </LinkButton>
        </Inline>
    );
}
```

##### Router Link

A link button can be used with any Router. For more information, see the [Client Side Routing](./client-side-routing.md) article.

```tsx
import { HopperProvider, LinkButton, Text } from "@hopper-ui/components";
import { createMemoryRouter, RouterProvider, useNavigate } from "react-router-dom";

export default function App() {
    const router = createMemoryRouter([{
        path: "/123",
        element: (
            <Text>
                Navigated Successfully!
            </Text>
        )
    }, {
        path: "*",
        element: <Example />
    }
    ]);

    return (
        <RouterProvider router={router} />
    );
}

function Example() {
    const navigate = useNavigate();

    return (
        // Set up the HopperProvider at the root of your app.
        <HopperProvider colorScheme="light" navigate={navigate}>
            <LinkButton href="/123">Go to next router page</LinkButton>
        </HopperProvider>

    );
}
```

##### Icon

A link button can contain icons.

```tsx
import { Inline, LinkButton, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <LinkButton href="https://www.google.com" variant="secondary">
                <SparklesIcon />
                <Text>Help</Text>
            </LinkButton>
            <LinkButton href="https://www.google.com" size="sm" variant="secondary">
                <SparklesIcon />
                <Text>Help</Text>
            </LinkButton>
            <LinkButton href="https://www.google.com" size="xs" variant="secondary">
                <SparklesIcon />
                <Text>Help</Text>
            </LinkButton>
        </Inline>
    );
}
```

##### End Icon

Nonstandard end icons can be provided to handle special cases. However, think twice before adding end icons, start icons should be your go-to.

```tsx
import { Inline, LinkButton, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <LinkButton href="https://www.google.com" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Help</Text>
            </LinkButton>
            <LinkButton href="https://www.google.com" size="sm" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Help</Text>
            </LinkButton>
            <LinkButton href="https://www.google.com" size="xs" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Help</Text>
            </LinkButton>
        </Inline>
    );
}
```

#### Props

| Prop           | Type                                   | Default   | Description                                                                                                                                                                        |
| -------------- | -------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| variant        | `ButtonVariant`                        | "primary" | The visual style of the button.                                                                                                                                                    |
| size           | `ResponsiveProp<ButtonSize>`           | "md"      | A button can vary in size.                                                                                                                                                         |
| isFluid        | `ResponsiveProp<boolean>`              |           | Whether or not the button takes up the width of its container.                                                                                                                     |
| isExternal     | `boolean`                              |           | Whether the button should open in a new tab.                                                                                                                                       |
| style          | `StyleOrFunction<LinkRenderProps>`     |           | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| isDisabled     | `boolean`                              |           | Whether the link is disabled.                                                                                                                                                      |
| autoFocus      | `boolean`                              |           | Whether the element should receive focus on render.                                                                                                                                |
| href           | `string`                               |           | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                     |
| hrefLang       | `string`                               |           | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                     |
| target         | `HTMLAttributeAnchorTarget`            |           | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                     |
| rel            | `string`                               |           | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                    |
| download       | `string \| boolean`                    |           | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).   |
| ping           | `string`                               |           | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                     |
| referrerPolicy | `HTMLAttributeReferrerPolicy`          |           | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                   |
| routerOptions  | `undefined`                            |           | Options for the configured client side router.                                                                                                                                     |
| dir            | `string`                               |           |                                                                                                                                                                                    |
| lang           | `string`                               |           |                                                                                                                                                                                    |
| inert          | `boolean`                              |           |                                                                                                                                                                                    |
| translate      | `"yes" \| "no"`                        |           |                                                                                                                                                                                    |
| children       | `ChildrenOrFunction<LinkRenderProps>`  |           | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className      | `ClassNameOrFunction<LinkRenderProps>` |           | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element receives focus.                                                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element loses focus.                                                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`                          |         | Handler that is called when the element's focus status changes.                                                                                                                                           |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is pressed.                                                                                                                                                             |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is released.                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `onClick` has been renamed to `onPress` to be closer to the [React Aria API](https://react-spectrum.adobe.com/react-aria/Button.html#events).
* `Counter` is no longer allowed as a specialized slot.
* `ButtonAsLink` is renamed to `LinkButton`.

### ListBox

A listbox is a list of interactive options that appears when users interact with an element or perform a specific action.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/list-box/src/ListBox.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/listbox/>

A listbox is a disclosure component that appear with a set of actions relevant to a specific control, interface area, data element or application view. Typically, this context is determined by the user's current selection prior to invoking the menu. Listbox can be opened from components such as Selects or Buttons.

```tsx
import { ListBox, ListBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox aria-label="list of options">
            <ListBoxItem>Developer</ListBoxItem>
            <ListBoxItem>Designer</ListBoxItem>
            <ListBoxItem>Manager</ListBoxItem>
        </ListBox>
    );
}
```

#### Props

##### ListBox

| Prop                    | Type                                         | Default          | Description                                                                                                                                                                                                                                                                                                     |
| ----------------------- | -------------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isFluid                 | `ResponsiveProp<boolean>`                    |                  | Whether or not the ListBox is 100% of its container's width.                                                                                                                                                                                                                                                    |
| isInvalid               | `boolean`                                    |                  | Whether or not the ListBox is in an invalid state.                                                                                                                                                                                                                                                              |
| isLoading               | `boolean`                                    |                  | Whether data is currently being loaded.                                                                                                                                                                                                                                                                         |
| selectionIndicator      | `SelectionIndicator`                         | "check"          | The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be either a radio or checkbox based on the selection mode.                                                                                                                |
| size                    | `ResponsiveProp<ListBoxItemSize>`            | "sm"             | A ListBox can vary in size.                                                                                                                                                                                                                                                                                     |
| loadingListBoxItemProps | `ListBoxItemProps<T>`                        |                  | The props of the ListBoxItem.                                                                                                                                                                                                                                                                                   |
| style                   | `StyleOrFunction<ListBoxRenderProps>`        |                  | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                                                                               |
| children                | `ReactNode \| ((item: T) => ReactNode)`      |                  | The contents of the collection.                                                                                                                                                                                                                                                                                 |
| selectionBehavior       | `SelectionBehavior`                          | "toggle"         | How multiple selection should behave in the collection.                                                                                                                                                                                                                                                         |
| shouldSelectOnPressUp   | `boolean`                                    |                  | Whether selection should occur on press up instead of press down.                                                                                                                                                                                                                                               |
| shouldFocusOnHover      | `boolean`                                    |                  | Whether options should be focused when the user hovers over them.                                                                                                                                                                                                                                               |
| escapeKeyBehavior       | `"clearSelection" \| "none"`                 | 'clearSelection' | Whether pressing the escape key should clear selection in the listbox or not.Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| autoFocus               | `boolean \| FocusStrategy`                   |                  | Whether to auto focus the listbox or an option.                                                                                                                                                                                                                                                                 |
| shouldFocusWrap         | `boolean`                                    |                  | Whether focus should wrap around when the end/start is reached.                                                                                                                                                                                                                                                 |
| items                   | `Iterable<T>`                                |                  | Item objects in the collection.                                                                                                                                                                                                                                                                                 |
| disabledKeys            | `Iterable<Key>`                              |                  | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                                                                                                                                                                                                         |
| selectionMode           | `SelectionMode`                              |                  | The type of selection that is allowed in the collection.                                                                                                                                                                                                                                                        |
| disallowEmptySelection  | `boolean`                                    |                  | Whether the collection allows empty selection.                                                                                                                                                                                                                                                                  |
| selectedKeys            | `Iterable<Key> \| "all"`                     |                  | The currently selected keys in the collection (controlled).                                                                                                                                                                                                                                                     |
| defaultSelectedKeys     | `Iterable<Key> \| "all"`                     |                  | The initial selected keys in the collection (uncontrolled).                                                                                                                                                                                                                                                     |
| dragAndDropHooks        | `DragAndDropHooks<NoInfer<T>>`               |                  | The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the ListBox.                                                                                                                                                                                                     |
| renderEmptyState        | `((props: ListBoxRenderProps) => ReactNode)` |                  | Provides content to display when there are no items in the list.                                                                                                                                                                                                                                                |
| layout                  | `"grid" \| "stack"`                          | 'stack'          | Whether the items are arranged in a stack or grid.                                                                                                                                                                                                                                                              |
| orientation             | `Orientation`                                | 'vertical'       | The primary orientation of the items. Usually this is the direction that the collection scrolls.                                                                                                                                                                                                                |
| dependencies            | `readonly any[]`                             |                  | Values that should invalidate the item cache when using dynamic collections.                                                                                                                                                                                                                                    |
| className               | `ClassNameOrFunction<ListBoxRenderProps>`    |                  | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                                                                                              |
| dir                     | `string`                                     |                  |                                                                                                                                                                                                                                                                                                                 |
| lang                    | `string`                                     |                  |                                                                                                                                                                                                                                                                                                                 |
| inert                   | `boolean`                                    |                  |                                                                                                                                                                                                                                                                                                                 |
| translate               | `"yes" \| "no"`                              |                  |                                                                                                                                                                                                                                                                                                                 |

###### Events

| Prop                        | Type                                          | Default | Description                                                                                                                                                               |
| --------------------------- | --------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onLoadMore                  | `(() => void)`                                |         | Handler that is called when more items should be loaded, e.g. while scrolling near the bottom.                                                                            |
| onAction                    | `((key: Key) => void)`                        |         | Handler that is called when a user performs an action on an item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality. |
| onSelectionChange           | `((keys: Selection) => void)`                 |         | Handler that is called when the selection changes.                                                                                                                        |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element receives focus.                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element loses focus.                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`              |         | Handler that is called when the element's focus status changes.                                                                                                           |
| onClick                     | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`              |         |                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`              |         |                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                           |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

##### ListBoxSection

| Prop         | Type                                                                                  | Default | Description                                                                                               |
| ------------ | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| style        | `CSSProperties`                                                                       |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.   |
| children     | `ReactNode \| ((item: T) => ReactElement<any, string \| JSXElementConstructor<any>>)` |         | Static child items or a function to render children.                                                      |
| items        | `Iterable<T>`                                                                         |         | Item objects in the section.                                                                              |
| id           | `Key`                                                                                 |         | The unique id of the section.                                                                             |
| value        | `object`                                                                              |         | The object value that this section represents. When using dynamic collections, this is set automatically. |
| dependencies | `readonly any[]`                                                                      |         | Values that should invalidate the item cache when using dynamic collections.                              |
| className    | `string`                                                                              |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.  |
| dir          | `string`                                                                              |         |                                                                                                           |
| lang         | `string`                                                                              |         |                                                                                                           |
| inert        | `boolean`                                                                             |         |                                                                                                           |
| translate    | `"yes" \| "no"`                                                                       |         |                                                                                                           |

###### Events

| Prop                        | Type                                  | Default | Description |
| --------------------------- | ------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |             |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                             |
| ---------- | -------- | ------- | --------------------------------------- |
| aria-label | `string` |         | An accessibility label for the section. |

##### ListBoxItem

| Prop               | Type                                          | Default | Description                                                                                                                                                                                         |
| ------------------ | --------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading          | `boolean`                                     |         | Whether the item is loading.                                                                                                                                                                        |
| size               | `ResponsiveProp<ListBoxItemSize>`             | "sm"    | A ListBoxItem can vary in size.                                                                                                                                                                     |
| isInvalid          | `boolean`                                     |         | Whether or not the ListBoxItem is in an invalid state.                                                                                                                                              |
| selectionIndicator | `SelectionIndicator`                          | "check" | The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode. |
| radioProps         | `DecorativeRadioProps`                        |         | The props for the Radio.                                                                                                                                                                            |
| checkboxProps      | `DecorativeCheckboxProps`                     |         | The props for the Checkbox.                                                                                                                                                                         |
| style              | `StyleOrFunction<ListBoxItemRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                   |
| dir                | `string`                                      |         |                                                                                                                                                                                                     |
| lang               | `string`                                      |         |                                                                                                                                                                                                     |
| inert              | `boolean`                                     |         |                                                                                                                                                                                                     |
| translate          | `"yes" \| "no"`                               |         |                                                                                                                                                                                                     |
| id                 | `Key`                                         |         | The unique id of the item.                                                                                                                                                                          |
| value              | `object`                                      |         | The object value that this item represents. When using dynamic collections, this is set automatically.                                                                                              |
| textValue          | `string`                                      |         | A string representation of the item's contents, used for features like typeahead.                                                                                                                   |
| isDisabled         | `boolean`                                     |         | Whether the item is disabled.                                                                                                                                                                       |
| children           | `ChildrenOrFunction<ListBoxItemRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                                           |
| className          | `ClassNameOrFunction<ListBoxItemRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                  |
| href               | `string`                                      |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                                      |
| hrefLang           | `string`                                      |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                                      |
| target             | `HTMLAttributeAnchorTarget`                   |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                                      |
| rel                | `string`                                      |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                                     |
| download           | `string \| boolean`                           |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).                    |
| ping               | `string`                                      |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                                      |
| referrerPolicy     | `HTMLAttributeReferrerPolicy`                 |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                                    |
| routerOptions      | `undefined`                                   |         | Options for the configured client side router.                                                                                                                                                      |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onAction                    | `(() => void)`                                            |         | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.                                |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                           |
| ---------- | -------- | ------- | ------------------------------------- |
| aria-label | `string` |         | An accessibility label for this item. |

#### Anatomy

##### Structure

```tsx
<ListBox>
    <Divider /> /* (Optional) A divider in the ListBox */
    <ListBoxItem> /* (Optional) An item in the ListBox */
        <Avatar /> /* (Optional) An avatar in the ListBoxItem */
        <Text /> /* (Optional) Text is optional, but becomes required if any other elements are present */
        <Text slot="description" /> /* (Optional) A description in the ListBoxItem */
        <Icon /> /* (Optional) An icon in the ListBoxItem */
        <IconList /> /* (Optional) A list of icons in the ListBoxItem */
        <Badge /> /* (Optional) A badge in the ListBoxItem */
    </ListBoxItem>
    <ListBoxSection> /* (Optional) A section in the ListBox */
        <Header /> /* (Optional) A header in the ListBoxSection */
        <ListBoxItem /> /* (Optional) An item in the ListBoxSection */
    </ListBoxSection>
</ListBox>
```

##### Composed Components

A `ListBox` uses the following components:

| Component | Description                                                                                                                                        |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Avatar    | Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available. |
| Badge     | A badge is used to bring attention to an element.                                                                                                  |
| Divider   | A divider separates sections of content or groups.                                                                                                 |
| Header    | A placeholder for an header section.                                                                                                               |
| Icon      | An icon component is used to render a custom icon.                                                                                                 |
| Text      | A text component is a primitive component matching Hopper's typography type scale.                                                                 |

#### Usage

##### Empty state

A list box can have an empty state.

```tsx
import { ListBox } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox aria-label="list of options" renderEmptyState={() => "No results found."}>
            {[]}
        </ListBox>
    );
}
```

##### Disabled

A list box with a disabled item.

```tsx
import { ListBox, ListBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox
            selectionMode="single"
            disabledKeys={["2"]}
            aria-label="list of options"
        >
            <ListBoxItem id="1">Developer</ListBoxItem>
            <ListBoxItem id="2">Designer</ListBoxItem>
            <ListBoxItem id="3">Manager</ListBoxItem>
        </ListBox>
    );
}
```

##### Invalid

A list box that is invalid.

```tsx
import { ListBox, ListBoxItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox
            isInvalid
            selectionMode="multiple"
            disabledKeys={["2"]}
            aria-label="list of options with a description"
        >
            <ListBoxItem textValue="Developer">
                <Text>Developer</Text>
                <Text slot="description">Builds, tests, and maintains software.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Designer">
                <Text>Designer</Text>
                <Text slot="description">Creates visually appealing, functional solutions.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Manager">
                <Text>Manager</Text>
                <Text slot="description">Responsible for leading and overseeing a team or department to ensure organizational goals are met.</Text>
            </ListBoxItem>
        </ListBox>
    );
}
```

##### Fluid

A fluid list box will take up the full width of its container.

```tsx
import { ListBox, ListBoxItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox isFluid aria-label="list of options with a description">
            <ListBoxItem textValue="Developer">
                <Text>Developer</Text>
                <Text slot="description">Builds, tests, and maintains software.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Designer">
                <Text>Designer</Text>
                <Text slot="description">Creates visually appealing, functional solutions.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Manager">
                <Text>Manager</Text>
                <Text slot="description">Responsible for leading and overseeing a team or department to ensure organizational goals are met.</Text>
            </ListBoxItem>
        </ListBox>
    );
}
```

##### Section

A list box can have sections and section headers.

```tsx
import { Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox selectionMode="single" aria-label="list of options">
            <ListBoxItem>Developer</ListBoxItem>
            <ListBoxItem>Manager</ListBoxItem>
            <ListBoxSection>
                <Header>Creative Department</Header>
                <ListBoxItem>Designer</ListBoxItem>
                <ListBoxItem>Copywriter</ListBoxItem>
                <ListBoxItem>UX Researcher</ListBoxItem>
            </ListBoxSection>
            <ListBoxSection>
                <Header>Operations</Header>
                <ListBoxItem>Project Coordinator</ListBoxItem>
                <ListBoxItem>QA Specialist</ListBoxItem>
            </ListBoxSection>
            <ListBoxItem>Product Owner</ListBoxItem>
        </ListBox>
    );
}
```

##### Dividers

A list box can have dividers.

```tsx
import { Divider, ListBox, ListBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox selectionMode="single" aria-label="list of options">
            <ListBoxItem>Item 1</ListBoxItem>
            <ListBoxItem>Item 2</ListBoxItem>
            <ListBoxItem>Item 3</ListBoxItem>
            <Divider />
            <ListBoxItem>Item 4</ListBoxItem>
            <ListBoxItem>Item 5</ListBoxItem>
        </ListBox>
    );
}
```

##### Avatar

A ListBox can contain an avatar.

```tsx
import { Avatar, ListBox, ListBoxItem, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <ListBox selectionMode="single" aria-label="Team">
            <ListBoxItem textValue="Fred Smith">
                <Avatar src="https://i.pravatar.cc/96?img=3" name="Fred Smith" />
                <Text>Fred Smith</Text>
                <SparklesIcon slot="end-icon" />
            </ListBoxItem>
            <ListBoxItem textValue="Karen Smith">
                <Avatar name="Karen Smith" />
                <Text>Karen Smith</Text>
            </ListBoxItem>
            <ListBoxItem textValue="John Doe">
                <Avatar name="John Doe" />
                <Text>John Doe</Text>
            </ListBoxItem>
        </ListBox>
    );
}
```

##### Count

A list box can contain a count using a badge.

```tsx
import { Badge, ListBox, ListBoxItem, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <ListBox selectionMode="single" aria-label="list of options">
            <ListBoxItem textValue="Manager">
                <Text>Manager</Text>
                <SparklesIcon slot="end-icon" />
                <Badge>50</Badge>
            </ListBoxItem>
            <ListBoxItem textValue="Developer">
                <Badge variant="subdued">99+</Badge>
                <Text>Developer</Text>
            </ListBoxItem>
            <ListBoxItem>Designer</ListBoxItem>
        </ListBox>
    );
}
```

##### Dynamic Lists

Items and sections can be populated from a hierarchial data structure. If a section has a header, the `Collection` component can be used to render the child items.

```tsx
import { Collection, Header, ListBox, ListBoxItem, ListBoxSection } from "@hopper-ui/components";

const OPTIONS_WITH_SECTIONS = [
    {
        name: "Boy Names", children: [
            { id: 2, name: "Fred" },
            { id: 3, name: "Bob" },
            { id: 4, name: "Gabriel" }
        ]
    },
    {
        name: "Girl Names", children: [
            { id: 6, name: "Sarah" },
            { id: 7, name: "Louise" },
            { id: 8, name: "Karen2" }
        ]
    }
];

export default function Example() {
    return (
        <ListBox
            selectionMode="single"
            aria-label="Names"
            items={OPTIONS_WITH_SECTIONS}
        >
            {section => {
                return (
                    <ListBoxSection id={section.name}>
                        <Header>{section.name}</Header>
                        <Collection items={section.children}>
                            {item => <ListBoxItem id={item.name}>{item.name}</ListBoxItem>}
                        </Collection>
                    </ListBoxSection>
                );
            }}
        </ListBox>
    );
}
```

##### Icons

A list box can contain icons.

```tsx
import { IconList, ListBox, ListBoxItem, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <ListBox selectionMode="single" aria-label="list of options">
            <ListBoxItem textValue="Developer">
                <Text>Developer</Text>
                <IconList>
                    <SparklesIcon />
                    <SparklesIcon />
                    <SparklesIcon />
                </IconList>
            </ListBoxItem>
            <ListBoxItem textValue="Designer">
                <SparklesIcon />
                <Text>Designer</Text>
            </ListBoxItem>
            <ListBoxItem>Manager</ListBoxItem>
        </ListBox>
    );
}
```

##### End Icons

A list box can contain icons at the end of a list item.

```tsx
import { IconList, ListBox, ListBoxItem, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <ListBox selectionMode="single" aria-label="list of options">
            <ListBoxItem textValue="Developer">
                <Text>Developer</Text>
                <IconList slot="end-icon">
                    <SparklesIcon /><SparklesIcon /><SparklesIcon />
                </IconList>
            </ListBoxItem>
            <ListBoxItem textValue="Designer">
                <Text>Designer</Text>
                <SparklesIcon slot="end-icon" />
            </ListBoxItem>
            <ListBoxItem>Manager</ListBoxItem>
        </ListBox>
    );
}
```

##### Loading

A list box can have a loading state.

```tsx
import { ListBox } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox
            selectionMode="single"
            aria-label="list of options"
            isLoading
        >
            {[]}
        </ListBox>
    );
}
```

##### Load on scroll

A list box can load more items when scrolling within.

```tsx
import { ListBox, ListBoxItem, useAsyncList } from "@hopper-ui/components";

interface Character {
    name: string;
}

export default function Example() {
    const list = useAsyncList<Character>({
        async load({ signal, cursor }) {
            const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", {
                signal
            });
            const json = await res.json();

            return {
                items: json.results,
                cursor: json.next
            };
        }
    });

    return (
        <ListBox
            selectionMode="single"
            aria-label="list of options"
            items={list.items}
            isLoading={list.isLoading}
            onLoadMore={() => list.loadMore()}
            maxHeight="core_1280"
        >
            {item => (
                <ListBoxItem id={item.name}>{item.name}</ListBoxItem>
            )}
        </ListBox>
    );
}
```

##### Single selection

A list box can have a single selected item.

```tsx
import { ListBox, ListBoxItem, Text, type Selection } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(["1"]));

    return (
        <ListBox
            selectionMode="single"
            aria-label="list of options"
            selectedKeys={selectedKeys}
            onSelectionChange={setSelectedKeys}
        >
            <ListBoxItem textValue="Developer" id="1">
                <Text>Developer</Text>
                <Text slot="description">Builds and maintains software.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Designer" id="2">
                <Text>Designer</Text>
                <Text slot="description">Creates visual design solutions.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Manager" id="3">
                <Text>Manager</Text>
                <Text slot="description">Leads teams and projects.</Text>
            </ListBoxItem>
        </ListBox>
    );
}
```

##### Single selection indicator

A list box can have a different selection indicator for single select. By default, `disallowEmptySelection` is set to true when the selection indicator is a radio button.

```tsx
import { ListBox, ListBoxItem, Text, type Selection } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(["1"]));

    return (
        <ListBox
            selectionMode="single"
            selectionIndicator="input"
            aria-label="list of options"
            selectedKeys={selectedKeys}
            onSelectionChange={setSelectedKeys}
        >
            <ListBoxItem textValue="Developer" id="1">
                <Text>Developer</Text>
                <Text slot="description">Builds and maintains software.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Designer" id="2">
                <Text>Designer</Text>
                <Text slot="description">Creates visual design solutions.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Manager" id="3">
                <Text>Manager</Text>
                <Text slot="description">Leads teams and projects.</Text>
            </ListBoxItem>
        </ListBox>
    );
}
```

##### Multiple selection

A list box can have multiple selected items.

```tsx
import { Header, ListBox, ListBoxItem, ListBoxSection, type Selection } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(["1"]));

    return (
        <ListBox
            selectionMode="multiple"
            aria-label="list of options"
            selectedKeys={selectedKeys}
            onSelectionChange={setSelectedKeys}
        >
            <ListBoxSection aria-label="section">
                <Header>Self review</Header>
                <ListBoxItem id="1">Overdue</ListBoxItem>
                <ListBoxItem id="2">In progress</ListBoxItem>
                <ListBoxItem id="3">Submitted</ListBoxItem>
            </ListBoxSection>
            <ListBoxSection aria-label="section">
                <Header>Manager review</Header>
                <ListBoxItem id="4">Overdue</ListBoxItem>
                <ListBoxItem id="5">In progress</ListBoxItem>
                <ListBoxItem id="6">Submitted</ListBoxItem>
            </ListBoxSection>
        </ListBox>
    );
}
```

##### Sizes

List boxes can vary in size.

By default, the listbox maintains a minimum width of 218px to prevent a narrow appearance. If the menu labels become longer, the listbox component can expand up to a maximum of 288px when triggered by a button, or to the total width of the Select field.

```tsx
import { Inline, ListBox, ListBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline alignY="flex-start">
            <ListBox size="lg" selectionMode="single" aria-label="list of options">
                <ListBoxItem>Developer</ListBoxItem>
                <ListBoxItem>Designer</ListBoxItem>
                <ListBoxItem>Manager</ListBoxItem>
            </ListBox>
            <ListBox size="md" selectionMode="single" aria-label="list of options">
                <ListBoxItem>Developer</ListBoxItem>
                <ListBoxItem>Designer</ListBoxItem>
                <ListBoxItem>Manager</ListBoxItem>
            </ListBox>
            <ListBox size="sm" selectionMode="single" aria-label="list of options">
                <ListBoxItem>Developer</ListBoxItem>
                <ListBoxItem>Designer</ListBoxItem>
                <ListBoxItem>Manager</ListBoxItem>
            </ListBox>
            <ListBox size="xs" selectionMode="single" aria-label="list of options">
                <ListBoxItem>Developer</ListBoxItem>
                <ListBoxItem>Designer</ListBoxItem>
                <ListBoxItem>Manager</ListBoxItem>
            </ListBox>
        </Inline>
    );
}
```

##### Description

A list box item can have a description.

```tsx
import { ListBox, ListBoxItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox aria-label="list of options with a description">
            <ListBoxItem textValue="Developer">
                <Text>Developer</Text>
                <Text slot="description">Builds, tests, and maintains software.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Designer">
                <Text>Designer</Text>
                <Text slot="description">Creates visually appealing, functional solutions.</Text>
            </ListBoxItem>
            <ListBoxItem textValue="Manager">
                <Text>Manager</Text>
                <Text slot="description">Responsible for leading and overseeing a team or department to ensure organizational goals are met.</Text>
            </ListBoxItem>
        </ListBox>
    );
}
```

##### Item size

List box items can vary in sizes.

```tsx
import { ListBox, ListBoxItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <ListBox selectionMode="single" aria-label="list of options">
            <ListBoxItem size="xs">Developer</ListBoxItem>
            <ListBoxItem size="sm">Designer</ListBoxItem>
            <ListBoxItem size="md">Manager</ListBoxItem>
            <ListBoxItem size="lg">Copywriter</ListBoxItem>
        </ListBox>
    );
}
```

#### Best Practices

A listbox can be composed of:

* Options: the individual options inside the Listbox that users can select or deselect.
* Dividers: placed between items and are useful in complex lists when there's a lot of information for the user to parse.
* Section headers: used at the beginning of a section when it's necessary to call out the content being displayed. In most cases, the surrounding context should be enough for the user to understand the information in the list.
* Section footers: used to put important action that should be treated differently from the rest of the options or to put a small piece of information related to the options above.

Listboxes should:

* Be clearly labeled so it's noticeable to the user what type of options will be available.
* Limit the number of options displayed at once.
* Indicate a loading state to the user while option data is being populated.

Use Listbox to hide less frequently used or advanced options until users specifically need them. This keeps the interface clean and focused on essential elements.

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `disabled` has been renamed to `isDisabled`.
* `validationState` has been removed. `isInvalid` should be used instead.
* `tabbable` has been removed.
* `useVirtualFocus` doesn't exist.
* `Listbox` has been renamed to `ListBox` to follow [React Aria Components](https://react-spectrum.adobe.com/react-aria/ListBox.html).

### Main

A specialized component to represent an HTML main element.

```tsx
import { Main, Paragraph } from "@hopper-ui/components";

export default function Example() {
    return (
        <Main color="neutral-weak">
            <Paragraph>
                Walking on the Moon is classic Sting moment, with his band The Police turning out one of
                their most groovy reggae-inspired hits to the background of space exploration.
            </Paragraph>
        </Main>
    );
}
```

#### Usage

A main component accepts all the [main HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/main) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Menu

A menu offers a list of choices to the user, such as a set of actions or functions.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/menu/src/Menu.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/>

```tsx
import { Button, Menu, MenuItem, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>Favorite</MenuItem>
                <MenuItem>Edit</MenuItem>
                <MenuItem>Delete</MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Menu>
    <MenuItem> /* (Optional) An item in the Menu */
        <Avatar /> /* (Optional) An avatar in the MenuItem */
        <Icon /> /* (Optional) An icon in the MenuItem */
        <IconList /> /* (Optional) A list of icons in the MenuItem */
        <Text /> /* (Optional) Text is optional, but becomes required if any other elements are present */
        <Text slot="description" /> /* (Optional) A description in the MenuItem */
    </MenuItem>
    <MenuSection> /* (Optional) A section in the Menu */
        <Header /> /* (Optional) A header in the MenuSection */
        <MenuItem /> /* (Optional) An item in the MenuSection */
    </MenuSection>
    <Divider /> /* (Optional) A divider in the Menu */
</Menu>
```

##### Composed Components

A `ListBox` uses the following components:

| Component | Description                                                                                                                                        |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Avatar    | Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available. |
| Divider   | A divider separates sections of content or groups.                                                                                                 |
| Header    | A placeholder for an header section.                                                                                                               |
| Icon      | An icon component is used to render a custom icon.                                                                                                 |
| IconList  | An IconList encapsulates a collection of icons.                                                                                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale.                                                                 |

#### Usage

##### Empty state

A menu can have an empty state.

```tsx
import { Button, Div, Menu, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu renderEmptyState={() => <Div paddingX="inset-md" paddingY="inset-sm">No results found.</Div>}>
                {[]}
            </Menu>
        </MenuTrigger>
    );
}
```

##### Align and direction

The align prop aligns the Menu relative to the trigger and the direction prop controls the direction the Menu will render.

```tsx
import { Button, Inline, Menu, MenuItem, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <MenuTrigger align="start">
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu>
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
            <MenuTrigger align="end" direction="top">
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu>
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
            <MenuTrigger align="start" direction="top">
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu>
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
            <MenuTrigger align="end" direction="bottom">
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu>
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
        </Inline>
    );
}
```

##### Sizes

A menu can have different sizes.

```tsx
import { Button, Inline, Menu, MenuItem, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <MenuTrigger>
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu size="xs">
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
            <MenuTrigger>
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu size="sm">
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
            <MenuTrigger>
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu size="md">
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
            <MenuTrigger>
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu size="lg">
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
        </Inline>
    );
}
```

##### Sections

A menu's items can be grouped by sections.

```tsx
import { Button, Header, Menu, MenuItem, MenuSection, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuSection>
                    <Header>Actions</Header>
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </MenuSection>
                <MenuSection>
                    <Header>Others</Header>
                    <MenuItem>Help</MenuItem>
                    <MenuItem>Exit</MenuItem>
                </MenuSection>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Dividers

A menu's items can be separated by dividers.

```tsx
import { Button, Divider, Menu, MenuItem, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>Favorite</MenuItem>
                <MenuItem>Edit</MenuItem>
                <Divider />
                <MenuItem>Delete</MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Item icons

A menu item can have icons.

```tsx
import { Button, Menu, MenuItem, MenuTrigger, Text } from "@hopper-ui/components";
import { DeleteIcon, EditIcon, KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>
                    <EditIcon />
                    <Text>Edit</Text>
                </MenuItem>
                <MenuItem>
                    <DeleteIcon />
                    <Text>Delete</Text>
                </MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Item end icon

A menu item can have end icons. However, think twice before adding end icons, start icons should be your go-to.

```tsx
import { Button, Menu, MenuItem, MenuTrigger, Text } from "@hopper-ui/components";
import { DeleteIcon, EditIcon, KebabIcon, SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>
                    <EditIcon slot="end-icon" />
                    <Text>Edit</Text>
                </MenuItem>
                <MenuItem>
                    <DeleteIcon slot="end-icon" />
                    <Text>Delete</Text>
                </MenuItem>
                <MenuItem>
                    <SparklesIcon slot="end-icon" />
                    <Text>Miscellaneous</Text>
                </MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Item description

A menu item can have a description.

```tsx
import { Button, Menu, MenuItem, MenuTrigger, Text } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>
                    <Text>Favorite</Text>
                    <Text slot="description">You can favorite your item</Text>
                </MenuItem>
                <MenuItem>
                    <Text>Delete</Text>
                    <Text slot="description">Your item will be forever gone</Text>
                </MenuItem>
                <MenuItem>
                    <Text>Edit</Text>
                    <Text slot="description">Edit your item at your own risk</Text>
                </MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

A description can be paired with an icon.

```tsx
import { Button, Menu, MenuItem, MenuTrigger, Text } from "@hopper-ui/components";
import { DeleteIcon, EditIcon, KebabIcon, SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>
                    <SparklesIcon />
                    <Text>Favorite</Text>
                    <Text slot="description">You can favorite your item</Text>
                </MenuItem>
                <MenuItem>
                    <DeleteIcon />
                    <Text>Delete</Text>
                    <Text slot="description">Your item will be forever gone</Text>
                </MenuItem>
                <MenuItem>
                    <EditIcon />
                    <Text>Edit</Text>
                    <Text slot="description">Edit your item at your own risk</Text>
                </MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

A description can also be paired with an avatar.

```tsx
import { Avatar, Button, Menu, MenuItem, MenuTrigger, Text } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>
                    <Avatar name="Red-Eyed Tree Frog" />
                    <Text>Red-Eyed Tree Frog</Text>
                    <Text slot="description">The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber</Text>
                </MenuItem>
                <MenuItem>
                    <Avatar name="Poison Dart Frog" />
                    <Text>Poison Dart Frog</Text>
                    <Text slot="description">
                        The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian
                    </Text>
                </MenuItem>
                <MenuItem>
                    <Avatar name="Goliath Frog" />
                    <Text>Goliath Frog</Text>
                    <Text slot="description">
                        The Goliath Frog (Conraua goliath) is the largest frog in the world
                    </Text>
                </MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Disabled item

A menu item can be disabled.

```tsx
import { Button, Menu, MenuItem, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>Favorite</MenuItem>
                <MenuItem>Edit</MenuItem>
                <MenuItem isDisabled>Delete</MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

They can also be disabled using the `disabledKeys` prop on the `Menu` component.

```tsx
import { Button, Menu, MenuItem, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu disabledKeys={["edit", "delete"]}>
                <MenuItem id="favorite">Favorite</MenuItem>
                <MenuItem id="edit">Edit</MenuItem>
                <MenuItem id="delete">Delete</MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Validation

A menu item can be set as invalid using the `isInvalid` prop.

```tsx
import { Button, Menu, MenuItem, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu
                selectionMode="single"
                selectedKeys={["edit"]}
            >
                <MenuItem id="favorite">Favorite</MenuItem>
                <MenuItem id="edit" isInvalid>Edit</MenuItem>
                <MenuItem id="delete">Delete</MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Selection

A menu supports multiple selection modes. By default, selection is disabled, however this can be changed by settings the selectionMode property to "single" or "multiple".

> **information**
>
> When using selection with a `<Menu>` component wraped inside a `<MenuTrigger>`, you must handled the selected keys in controlled mode with the selectedKeys property otherwise the selected keys won't be persisted through openings.

```tsx
import { Button, Menu, MenuItem, MenuTrigger, type Selection } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";
import { useCallback, useState } from "react";

export default function Example() {
    const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set(["edit"]));
    const handleSelectionChange = useCallback((newKeys: Selection) => {
        setSelectedKeys(newKeys);
    }, [setSelectedKeys]);

    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu
                selectionMode="multiple"
                selectedKeys={selectedKeys}
                onSelectionChange={handleSelectionChange}
            >
                <MenuItem id="favorite">Favorite</MenuItem>
                <MenuItem id="edit">Edit</MenuItem>
                <MenuItem id="delete">Delete</MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Section-level selection

Each section in a menu may have independent selection states. This works the same way as [described above](/components/Menu.md#usage-selection) for the entire menu, but operates at the section level instead.

```tsx
import { Button, Header, Menu, MenuItem, MenuSection, MenuTrigger, type Selection } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";
import { useState } from "react";

export default function Example() {
    const [style, setStyle] = useState<Selection>(new Set(["bold"]));
    const [align, setAlign] = useState<Selection>(new Set(["left"]));

    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuSection>
                    <Header>Actions</Header>
                    <MenuItem>Cut</MenuItem>
                    <MenuItem>Copy</MenuItem>
                    <MenuItem>Paste</MenuItem>
                </MenuSection>
                <MenuSection
                    selectionMode="multiple"
                    selectedKeys={style}
                    onSelectionChange={setStyle}
                >
                    <Header>Text style</Header>
                    <MenuItem id="bold">Bold</MenuItem>
                    <MenuItem id="italic">Italic</MenuItem>
                    <MenuItem id="underline">Underline</MenuItem>
                </MenuSection>
                <MenuSection
                    selectionMode="single"
                    selectedKeys={align}
                    onSelectionChange={setAlign}
                >
                    <Header>Text alignment</Header>
                    <MenuItem id="left">Left</MenuItem>
                    <MenuItem id="center">Center</MenuItem>
                    <MenuItem id="right">Right</MenuItem>
                </MenuSection>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Custom Trigger

MenuTrigger works out of the box with any pressable component (e.g. Button, Link, etc.).

Custom trigger elements such as third party components and other DOM elements are also supported by wrapping them with the `<Pressable>` component.

```tsx
import { Menu, MenuItem, MenuTrigger, Pressable } from "@hopper-ui/components";
import { useCallback, useState } from "react";

export default function Example() {
    const [isOpen, setIsOpen] = useState(false);
    const handleOpenChange = useCallback((newOpen: boolean) => {
        setIsOpen(newOpen);
    }, [setIsOpen]);

    return (
        <MenuTrigger onOpenChange={handleOpenChange} isOpen={isOpen}>
            <Pressable>
                <span role="button">Custom trigger</span>
            </Pressable>
            <Menu>
                <MenuItem>Favorite</MenuItem>
                <MenuItem>Edit</MenuItem>
                <MenuItem>Delete</MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Dynamic items

A menu items can be rendered dynamically.

```tsx
import { Button, Menu, MenuItem, MenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                {["Favorite", "Edit", "Delete"].map(x => (
                    <MenuItem key={x.toLowerCase()}>{x}</MenuItem>
                ))}
            </Menu>
        </MenuTrigger>
    );
}
```

##### Controlled

The `selectedKey` and `open` state can be handled in controlled mode.

```tsx
import { Button, Menu, MenuItem, MenuTrigger, type Selection } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";
import { useCallback, useState } from "react";

export default function Example() {
    const [selectedKey, setSelectedKey] = useState<Selection>(new Set([]));
    const [isOpen, setIsOpen] = useState(false);
    const handleOpenChange = useCallback((newOpen: boolean) => {
        setIsOpen(newOpen);
    }, [setIsOpen]);
    const handleSelectionChange = useCallback((newKeys: Selection) => {
        setSelectedKey(newKeys);
    }, []);

    return (
        <MenuTrigger onOpenChange={handleOpenChange} isOpen={isOpen}>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu
                onSelectionChange={handleSelectionChange}
                selectedKeys={selectedKey}
                selectionMode="single"
            >
                <MenuItem>Favorite</MenuItem>
                <MenuItem>Edit</MenuItem>
                <MenuItem>Delete</MenuItem>
            </Menu>
        </MenuTrigger>
    );
}
```

##### Opening a modal

A ModalTrigger component won't work with a menu item. Still, it can be done with a custom modal trigger.

```tsx
import { Button, Content, Heading, Menu, MenuItem, MenuTrigger, Modal } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";
import { useCallback, useState } from "react";

export default function Example() {
    const [isOpen, setIsOpen] = useState(false);
    const handleSelectionChange = useCallback(() => {
        setIsOpen(true);
    }, [setIsOpen]);
    const handleModalClose = useCallback((open: boolean) => {
        if (open) {
            return;
        }

        setIsOpen(false);
    }, [setIsOpen]);

    return (
        <>
            <MenuTrigger>
                <Button variant="secondary" aria-label="Actions for selected resource">
                    <KebabIcon />
                </Button>
                <Menu onSelectionChange={handleSelectionChange} selectionMode="single">
                    <MenuItem>Favorite</MenuItem>
                    <MenuItem>Edit</MenuItem>
                    <MenuItem>Delete</MenuItem>
                </Menu>
            </MenuTrigger>
            <Modal onOpenChange={handleModalClose} isOpen={isOpen}>
                <Heading>Frogs</Heading>
                <Content>
                    Hoppity hops
                </Content>
            </Modal>
        </>
    );
}
```

##### Submenu

A menu can have submenus, which are menus that open when hovering or clicking on a menu item.

```tsx
import { Button, Menu, MenuItem, MenuTrigger, SubmenuTrigger } from "@hopper-ui/components";
import { KebabIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <MenuTrigger>
            <Button variant="secondary" aria-label="Actions for selected resource">
                <KebabIcon />
            </Button>
            <Menu>
                <MenuItem>Favorite</MenuItem>
                <MenuItem>Edit</MenuItem>
                <SubmenuTrigger>
                    <MenuItem>Share</MenuItem>
                    <Menu>
                        <MenuItem>SMS</MenuItem>
                        <MenuItem>Email</MenuItem>
                    </Menu>
                </SubmenuTrigger>
            </Menu>
        </MenuTrigger>
    );
}
```

#### Props

##### MenuTrigger

| Prop                | Type                | Default | Description                                                                 |
| ------------------- | ------------------- | ------- | --------------------------------------------------------------------------- |
| align               | `"start" \| "end"`  | 'start' | The horizontal alignment of the popup relative to the trigger.              |
| direction           | `"bottom" \| "top"` |         | The direction the open will open relative to the trigger.                   |
| allowFlip           | `boolean`           |         | Whether or not the popup can flip when it will overflow it's boundary area. |
| shouldCloseOnSelect | `boolean`           |         | Whether the menu should close when the menu item is selected.               |
| trigger             | `MenuTriggerType`   | 'press' | How the menu is triggered.                                                  |
| isOpen              | `boolean`           |         | Whether the overlay is open by default (controlled).                        |
| defaultOpen         | `boolean`           |         | Whether the overlay is open by default (uncontrolled).                      |

###### Events

| Prop         | Type                          | Default | Description                                                   |
| ------------ | ----------------------------- | ------- | ------------------------------------------------------------- |
| onOpenChange | `((isOpen: boolean) => void)` |         | Handler that is called when the overlay's open state changes. |

##### Menu

| Prop                   | Type                                    | Default          | Description                                                                                                                                                                                                                                                                                                  |
| ---------------------- | --------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| size                   | `ResponsiveProp<MenuItemSize>`          | "sm"             | The size of the menu.                                                                                                                                                                                                                                                                                        |
| popoverProps           | `PopoverBaseProps`                      |                  | The props for the popover.                                                                                                                                                                                                                                                                                   |
| style                  | `StyleOrFunction<MenuRenderProps>`      |                  | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                                                                            |
| children               | `ReactNode \| ((item: T) => ReactNode)` |                  | The contents of the collection.                                                                                                                                                                                                                                                                              |
| escapeKeyBehavior      | `"clearSelection" \| "none"`            | 'clearSelection' | Whether pressing the escape key should clear selection in the menu or not.Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| autoFocus              | `boolean \| FocusStrategy`              |                  | Where the focus should be set.                                                                                                                                                                                                                                                                               |
| shouldFocusWrap        | `boolean`                               |                  | Whether keyboard navigation is circular.                                                                                                                                                                                                                                                                     |
| items                  | `Iterable<T>`                           |                  | Item objects in the collection.                                                                                                                                                                                                                                                                              |
| disabledKeys           | `Iterable<Key>`                         |                  | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                                                                                                                                                                                                      |
| selectionMode          | `SelectionMode`                         |                  | The type of selection that is allowed in the collection.                                                                                                                                                                                                                                                     |
| disallowEmptySelection | `boolean`                               |                  | Whether the collection allows empty selection.                                                                                                                                                                                                                                                               |
| selectedKeys           | `Iterable<Key> \| "all"`                |                  | The currently selected keys in the collection (controlled).                                                                                                                                                                                                                                                  |
| defaultSelectedKeys    | `Iterable<Key> \| "all"`                |                  | The initial selected keys in the collection (uncontrolled).                                                                                                                                                                                                                                                  |
| renderEmptyState       | `(() => ReactNode)`                     |                  | Provides content to display when there are no items in the list.                                                                                                                                                                                                                                             |
| dependencies           | `readonly any[]`                        |                  | Values that should invalidate the item cache when using dynamic collections.                                                                                                                                                                                                                                 |
| className              | `ClassNameOrFunction<MenuRenderProps>`  |                  | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                                                                                           |
| dir                    | `string`                                |                  |                                                                                                                                                                                                                                                                                                              |
| lang                   | `string`                                |                  |                                                                                                                                                                                                                                                                                                              |
| inert                  | `boolean`                               |                  |                                                                                                                                                                                                                                                                                                              |
| translate              | `"yes" \| "no"`                         |                  |                                                                                                                                                                                                                                                                                                              |

###### Events

| Prop                        | Type                                     | Default | Description                                                                |
| --------------------------- | ---------------------------------------- | ------- | -------------------------------------------------------------------------- |
| onAction                    | `((key: Key) => void)`                   |         | Handler that is called when an item is selected.                           |
| onClose                     | `(() => void)`                           |         | Handler that is called when the menu should close after selecting an item. |
| onSelectionChange           | `((keys: Selection) => void)`            |         | Handler that is called when the selection changes.                         |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                                            |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                                            |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                                            |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                                            |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                                            |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                                            |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                                            |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                                            |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                                            |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                                            |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                                            |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                                            |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                                            |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                                            |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                            |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                            |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                            |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                            |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                            |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                                            |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                                            |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                                            |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                                            |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                                            |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                                            |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                                            |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                                            |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                                            |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

##### MenuItem

| Prop                | Type                                       | Default | Description                                                                                                                                                                        |
| ------------------- | ------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children            | `ReactNode`                                |         | The contents of the item.                                                                                                                                                          |
| isInvalid           | `boolean`                                  |         | Whether or not the item is invalid                                                                                                                                                 |
| size                | `ResponsiveProp<MenuItemSize>`             | "sm"    | The size of the MenuItem.                                                                                                                                                          |
| shouldCloseOnSelect | `boolean`                                  |         | Whether the menu should close when the menu item is selected.                                                                                                                      |
| style               | `StyleOrFunction<MenuItemRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| dir                 | `string`                                   |         |                                                                                                                                                                                    |
| lang                | `string`                                   |         |                                                                                                                                                                                    |
| inert               | `boolean`                                  |         |                                                                                                                                                                                    |
| translate           | `"yes" \| "no"`                            |         |                                                                                                                                                                                    |
| id                  | `Key`                                      |         | The unique id of the item.                                                                                                                                                         |
| value               | `object`                                   |         | The object value that this item represents. When using dynamic collections, this is set automatically.                                                                             |
| textValue           | `string`                                   |         | A string representation of the item's contents, used for features like typeahead.                                                                                                  |
| isDisabled          | `boolean`                                  |         | Whether the item is disabled.                                                                                                                                                      |
| className           | `ClassNameOrFunction<MenuItemRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| href                | `string`                                   |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                     |
| hrefLang            | `string`                                   |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                     |
| target              | `HTMLAttributeAnchorTarget`                |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                     |
| rel                 | `string`                                   |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                    |
| download            | `string \| boolean`                        |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).   |
| ping                | `string`                                   |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                     |
| referrerPolicy      | `HTMLAttributeReferrerPolicy`              |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                   |
| routerOptions       | `undefined`                                |         | Options for the configured client side router.                                                                                                                                     |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onAction                    | `(() => void)`                                            |         | Handler that is called when the item is selected.                                                                                                                                                         |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                           |
| ---------- | -------- | ------- | ------------------------------------- |
| aria-label | `string` |         | An accessibility label for this item. |

##### MenuSection

| Prop                   | Type                                                                                  | Default | Description                                                                                               |
| ---------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| style                  | `CSSProperties`                                                                       |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.   |
| children               | `ReactNode \| ((item: T) => ReactElement<any, string \| JSXElementConstructor<any>>)` |         | Static child items or a function to render children.                                                      |
| items                  | `Iterable<T>`                                                                         |         | Item objects in the section.                                                                              |
| id                     | `Key`                                                                                 |         | The unique id of the section.                                                                             |
| value                  | `object`                                                                              |         | The object value that this section represents. When using dynamic collections, this is set automatically. |
| dependencies           | `readonly any[]`                                                                      |         | Values that should invalidate the item cache when using dynamic collections.                              |
| className              | `string`                                                                              |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.  |
| dir                    | `string`                                                                              |         |                                                                                                           |
| lang                   | `string`                                                                              |         |                                                                                                           |
| inert                  | `boolean`                                                                             |         |                                                                                                           |
| translate              | `"yes" \| "no"`                                                                       |         |                                                                                                           |
| selectionMode          | `SelectionMode`                                                                       |         | The type of selection that is allowed in the collection.                                                  |
| disallowEmptySelection | `boolean`                                                                             |         | Whether the collection allows empty selection.                                                            |
| selectedKeys           | `"all" \| Iterable<Key>`                                                              |         | The currently selected keys in the collection (controlled).                                               |
| defaultSelectedKeys    | `"all" \| Iterable<Key>`                                                              |         | The initial selected keys in the collection (uncontrolled).                                               |
| disabledKeys           | `Iterable<Key>`                                                                       |         | The currently disabled keys in the collection (controlled).                                               |

###### Events

| Prop                        | Type                                  | Default | Description                                        |
| --------------------------- | ------------------------------------- | ------- | -------------------------------------------------- |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |                                                    |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |                                                    |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |                                                    |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |                                                    |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |                                                    |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |                                                    |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |                                                    |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |                                                    |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |                                                    |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |                                                    |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |                                                    |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |                                                    |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |                                                    |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |                                                    |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |                                                    |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |                                                    |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |                                                    |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |                                                    |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |                                                    |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |                                                    |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |                                                    |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |                                                    |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |                                                    |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |                                                    |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |                                                    |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |                                                    |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |                                                    |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |                                                    |
| onSelectionChange           | `((keys: Selection) => void)`         |         | Handler that is called when the selection changes. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                             |
| ---------- | -------- | ------- | --------------------------------------- |
| aria-label | `string` |         | An accessibility label for the section. |

##### Divider

| Prop        | Type            | Default      | Description                                                                                              |
| ----------- | --------------- | ------------ | -------------------------------------------------------------------------------------------------------- |
| style       | `CSSProperties` |              | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| orientation | `Orientation`   | 'horizontal' | The orientation of the separator.                                                                        |
| elementType | `string`        |              | The HTML element type that will be used to render the separator.                                         |
| className   | `string`        |              | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| dir         | `string`        |              |                                                                                                          |
| lang        | `string`        |              |                                                                                                          |
| inert       | `boolean`       |              |                                                                                                          |
| translate   | `"yes" \| "no"` |              |                                                                                                          |

###### Events

| Prop                        | Type                                  | Default | Description |
| --------------------------- | ------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |             |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

##### SubmenuTrigger

| Prop     | Type                                                        | Default | Description                                                                                                                                       |
| -------- | ----------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | `ReactElement<any, string \| JSXElementConstructor<any>>[]` |         | The contents of the SubmenuTrigger. The first child should be an Item (the trigger) and the second child should be the Popover (for the submenu). |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

##### MenuTrigger

* `allowPreventOverflow` has been removed.
* `closeOnSelect` has been removed.
* `open` has been renamed to `isOpen`.

##### Menu

* `autoFocusTarget` has been removed.
* `disabled` has been removed, set the disabled items as `disabledKeys` instead.
* `fluid` has been removed.
* `nodes` has been removed.
* `validationState` has been removed. `isInvalid` should be used instead on the `MenuItem`.

##### MenuItem

* `disabled` has been renamed to `isDisabled`

##### MenuSection

* `title` has been removed from `MenuSection`, use `Header` as a children instead

##### Miscellaneous

* `Item` has been renamed `MenuItem`
* `Section` has been renamed `MenuSection`
* We cannot add a tooltip on a MenuItem anymore

### Modal

Modals focus the user's attention exclusively on one task or piece of information via a window that sits on top of the page content.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/modal/src/Modal.tsx>

Modals are a variant of Alert used to present critical information or request user input needed to complete a user's workflow. Modals interrupt a user's workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. While effective when used correctly, modals should be used sparingly to limit disruption to the user. Modals are commonly used for short and non-frequent tasks, such as editing or management tasks. If a user needs to repeatable perform a task, consider making the task do-able from the main page.

```tsx
import { Button, Content, Heading, Modal, ModalTrigger, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                <Heading>Fascinating Frog Facts!</Heading>
                <Content>
                    <Text size="sm">
                        Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                    </Text>
                    <Text size="sm">
                        Frogs don’t drink water with their mouths! Instead, they absorb moisture through their specialized skin patch on their belly and thighs.
                    </Text>
                </Content>
            </Modal>
        </ModalTrigger>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Modal>
    <Image /> /* (Optional) Decorative image in the modal */
    <Heading /> /** (Required) The title of the modal */
    <Header /> /** (Optional) Section to the right of the Heading  */
    <Content /> /** (Required) the content of the modal */
    <Footer /> /** (Optional) Section under the content, to the left of the buttons
    <ButtonGroup /> /** (Optional) If there is multiple buttons */
    <Button /> /** (Optional) If there is only 1 button */
</Modal>
```

##### Composed Components

A `Modal` uses the following components:

| Component   | Description                                                                   |
| ----------- | ----------------------------------------------------------------------------- |
| Button      | A button allows a user to initiate an action.                                 |
| ButtonGroup | A button group handles the spacing and orientation for a grouping of buttons. |
| Content     | A placeholder for the main content section of a component.                    |
| Footer      | A placeholder for a footer section.                                           |
| Header      | A placeholder for an header section.                                          |
| Heading     | A heading is a primitive component matching Hopper's typography type scale.   |
| Image       | An image component that can be used to display images.                        |

#### Usage

##### Default

A modal must have an heading and a content.

```tsx
import { Button, Content, Heading, Modal, ModalTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                <Heading>Fascinating Frog Facts!</Heading>
                <Content>
                    Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                </Content>
            </Modal>
        </ModalTrigger>
    );
}
```

##### Image

A modal can have a side banner image. Make sure the image has no essential information as it could be cropped in mobile view. Images should not prevent a user from seeing the close button, be conscious of this.

```tsx
import { Button, Content, Heading, Image, Modal, ModalTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                <Image src="/frog.jpg" alt="Frog" />
                <Heading>Fascinating Frog Facts!</Heading>
                <Content>
                    Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                </Content>
            </Modal>
        </ModalTrigger>
    );
}
```

##### Choice

A modal can offer a choice between 2 options. Keep the copy not too long in order to help the user quickly make his choice.

```tsx
import { Button, Card, Content, Flex, Heading, Image, Modal, ModalTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                <Heading>Fascinating Frog Facts!</Heading>
                <Content>
                    <Flex gap="stack-lg">
                        <Card flex={1}>
                            <Image objectFit="cover" alt="Frog" src="/frog.jpg" />
                            <Flex direction="column" gap="stack-sm" padding="inset-md" height="100%" justifyContent="space-between">
                                <Flex direction="column" gap="stack-sm">
                                    <Heading>Frog</Heading>
                                    <Content>
                                        Common frogs are found in ponds, marshes, and forests across the world. Unlike some of their flashier cousins, they rely on stealth and speed rather than bright colors to survive.
                                    </Content>
                                    <Button variant="secondary">Choose</Button>
                                </Flex>
                            </Flex>
                        </Card>
                        <Card flex={1}>
                            <Image objectFit="cover" alt="Mossy Frog" src="/mossy-frog.jpg" />
                            <Flex direction="column" gap="stack-sm" padding="inset-md" height="100%" justifyContent="space-between">
                                <Flex direction="column" gap="stack-sm">
                                    <Heading>Mossy Frog</Heading>
                                    <Content>
                                        A mossy tree frog with rough, bark-like skin, blending perfectly into its surroundings for camouflage and protection.
                                    </Content>
                                </Flex>
                                <Button variant="secondary">Choose</Button>
                            </Flex>
                        </Card>
                    </Flex>
                </Content>
            </Modal>
        </ModalTrigger>
    );
}
```

##### Header

Use an header to provide additional information usually in the form of a link or a tooltip that provides more context to the task at hand. Links should open in a new window.

```tsx
import { Button, Content, Header, Heading, Link, Modal, ModalTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                <Heading>Fascinating Frog Facts!</Heading>
                <Header>
                    <Link
                        isExternal
                        href="https://en.wikipedia.org/wiki/Frog"
                        size="sm"
                    >
                        Wikipedia
                    </Link>
                </Header>
                <Content>
                    Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                </Content>
            </Modal>
        </ModalTrigger>
    );
}
```

##### Footer

Use a footer to provide trivial information about content present in the modal, like a step : 1/3.

```tsx
import { Button, Content, Footer, Heading, Modal, ModalTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                <Heading>Fascinating Frog Facts!</Heading>
                <Content>
                    Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                </Content>
                <Footer>
                    Copyright 2025
                </Footer>
            </Modal>
        </ModalTrigger>
    );
}
```

##### Buttons

A modal can have a single button. Use a primary button to provide the main action.

```tsx
import { Button, Content, Heading, Modal, ModalTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                {({ close }) => (
                    <>
                        <Heading>Fascinating Frog Facts!</Heading>
                        <Content>
                            Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                        </Content>
                        <Button onPress={close}>
                            Save
                        </Button>
                    </>
                )}
            </Modal>
        </ModalTrigger>
    );
}
```

Or a group of button. A maximum of 3 buttons are allowed in a modal, when necessary. The secondary and tertiary actions should be using a secondary variant.

```tsx
import { Button, ButtonGroup, Content, Heading, Modal, ModalTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                {({ close }) => (
                    <>
                        <Heading>Fascinating Frog Facts!</Heading>
                        <Content>
                            Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                        </Content>
                        <ButtonGroup>
                            <Button variant="secondary" onPress={close}>Cancel</Button>
                            <Button onPress={close}>Save</Button>
                        </ButtonGroup>
                    </>
                )}
            </Modal>
        </ModalTrigger>
    );
}
```

##### Dismissable

By default, a modal will dismiss on outside interactions and esc keydown. However, in some cases, you might want to force the user to explicitly dismiss the modal with a targeted call to action. This is what the `isDismissable` and the `isKeyboardDismissDisabled` prop is for.

You can set the isDismissable prop to false and isKeyboardDismissDisabled to true and render a call to action which will manually dismiss the popover by calling a close function.

```tsx
import { Button, Content, Heading, Modal, ModalTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <Modal isDismissable={false} isKeyboardDismissDisabled>
                {({ close }) => (
                    <>
                        <Heading>Fascinating Frog Facts!</Heading>
                        <Content>
                            Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                        </Content>
                        <Button onPress={close}>
                            Save
                        </Button>
                    </>
                )}
            </Modal>
        </ModalTrigger>
    );
}
```

##### Controlled

The open state can be handled in controlled mode.

```tsx
import { Button, Content, Heading, Modal, ModalTrigger } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <ModalTrigger isOpen={isOpen} onOpenChange={setIsOpen}>
            <Button variant="secondary">Open modal</Button>
            <Modal>
                <Heading>Fascinating Frog Facts!</Heading>
                <Content>
                    Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                </Content>
            </Modal>
        </ModalTrigger>
    );
}
```

##### Custom trigger

You don't have to use a ModalTrigger component if it doesn't fit your needs. A modal component can be used on it's own with any custom trigger.

```tsx
import { Button, Content, Heading, Modal } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <>
            <Button variant="secondary" onPress={() => setIsOpen(true)}>Open modal</Button>
            <Modal isOpen={isOpen} onOpenChange={setIsOpen}>
                <Heading>Fascinating Frog Facts!</Heading>
                <Content>
                    Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                </Content>
            </Modal>
        </>
    );
}
```

##### Sizes

A modal can be small, medium, large, extra-large, fullscreen or fullscreenTakeover. The default size is medium.

Choose a size that works best for the amount of modal content you have. Modals with short messages should use a small or medium modal to avoid long single lines; for complex components, like a data table the large or extra large modal will be more accommodating.

```tsx
import { Button, Content, Heading, Modal, type ModalProps, ModalTrigger, Stack } from "@hopper-ui/components";

export default function Example() {
    const modal = (size: ModalProps["size"]) => (
        <ModalTrigger>
            <Button variant="secondary">Open {size?.toString()} modal</Button>
            <Modal size={size}>
                <Heading>Fascinating Frog Facts!</Heading>
                <Content>
                    Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                </Content>
            </Modal>
        </ModalTrigger>
    );

    return (
        <Stack gap="stack-md">
            {modal("sm")}
            {modal("md")}
            {modal("lg")}
            {modal("xl")}
            {modal("fullscreen")}
            {modal("fullscreenTakeover")}
        </Stack>
    );
}
```

##### Responsive sizes

A modal can have different size in mobile and desktop view.

```tsx
import { Button, Content, Heading, Modal, ModalTrigger, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack gap="stack-md">
            <ModalTrigger>
                <Button variant="secondary">Open responsive modal</Button>
                <Modal
                    size={{
                        base: "fullscreenTakeover",
                        md: "md"
                    }}
                >
                    <Heading>Fascinating Frog Facts!</Heading>
                    <Content>
                        Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                    </Content>
                </Modal>
            </ModalTrigger>
        </Stack>
    );
}
```

##### Custom

A CustomModal is a Modal with a custom layout. A CustomModal must contain a `<Heading slot="title">` or have an aria-label or aria-labelledby attribute for accessibility.

```tsx
import { Button, Content, CustomModal, Heading, Image, ModalTrigger, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <ModalTrigger>
            <Button variant="secondary">Open modal</Button>
            <CustomModal padding="inset-lg">
                {({ close }) => (
                    <Stack>
                        <Button variant="secondary" onPress={close}>Close</Button>
                        <Heading>Fascinating Frog Facts!</Heading>
                        <Content>
                            Frogs are amphibians, meaning they can live both in water and on land! With their powerful legs, some species can jump over 20 times their body length—that’s like a human leaping over a school bus!
                        </Content>
                        <Image src="/frog.jpg" alt="Frog" />
                    </Stack>
                )}
            </CustomModal>
        </ModalTrigger>
    );
}
```

#### Best Practices

be thought of as temporary and not be used for information or actions that need to live on in the interface in a persistent way. Don't use modals to display complex forms or large amounts of information. Modals should:

* Require that users take an action.
* Close when users press the Dismiss button, the Cancel button, the ESC key, or when users click the area outside the modal.
* Not have more than two buttons (primary and secondary) in the footer. This prevents unclear action hierarchy and crowding on mobile screens. Since modals are for focused tasks, they should have focused actions.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  ```tsx
  import { Content, Modal } from "@hopper-ui/components";

  <Modal>
      <Content>
          Modal content goes here.
      </Content>
  </Modal>;
  ```

  Include a Content section in every modal implementation

* 🚫 Don't:

  ```tsx
  import { Modal } from "@hopper-ui/components";

  <Modal>
      Modal content should be in a Content component
  </Modal>;
  ```

  Create a modal without the required Content section

**Rule 2**

* ✅ Do:

  ```tsx
  import { Content, Modal } from "@hopper-ui/components";

  <Modal>
      <Content>
          Modal content goes here.
      </Content>
  </Modal>;
  ```

  Make the Content component a direct child of the Modal

* 🚫 Don't:

  ```tsx
  import { Content, Modal, Stack } from "@hopper-ui/components";

  <Modal>
      <Stack>
          <Content>
              Modal content goes here.
          </Content>
      </Stack>
  </Modal>;
  ```

  Place the Content component inside additional wrapper elements

#### Props

##### Modal

| Prop                      | Type                                                                                   | Default | Description                                                                                                                                      |
| ------------------------- | -------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| isDismissible             | `boolean`                                                                              | true    | Whether the Modal is dismissable. @deprecated Use `isDismissable` instead. This prop will be removed in a future version (September 30th, 2025). |
| isDismissable             | `boolean`                                                                              | true    | Whether the Modal is dismissable.                                                                                                                |
| isKeyboardDismissDisabled | `boolean`                                                                              |         | Whether pressing the escape key to close the dialog should be disabled.                                                                          |
| size                      | `ResponsiveProp<"sm" \| "md" \| "lg" \| "xl" \| "fullscreen" \| "fullscreenTakeover">` | "md"    | The size of the modal.                                                                                                                           |
| overlayProps              | `Partial<BaseModalProps>`                                                              |         | The props of the overlay                                                                                                                         |
| style                     | `CSSProperties`                                                                        |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.                                          |
| children                  | `ReactNode \| ((opts: DialogRenderProps) => ReactNode)`                                |         | Children of the dialog. A function may be provided to access a function to close the dialog.                                                     |
| className                 | `string`                                                                               |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.                                         |
| dir                       | `string`                                                                               |         |                                                                                                                                                  |
| lang                      | `string`                                                                               |         |                                                                                                                                                  |
| inert                     | `boolean`                                                                              |         |                                                                                                                                                  |
| translate                 | `"yes" \| "no"`                                                                        |         |                                                                                                                                                  |
| isOpen                    | `boolean`                                                                              |         | Whether the overlay is open by default (controlled).                                                                                             |
| defaultOpen               | `boolean`                                                                              |         | Whether the overlay is open by default (uncontrolled).                                                                                           |

###### Events

| Prop                        | Type                                  | Default | Description                                                                                                                                                                                                                 |
| --------------------------- | ------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onOpenChange                | `((isOpen: boolean) => void)`         |         | Handler that is called when the modal's open state changes. This handler is only called when the modal is not used inside a `ModalTrigger`. Use the `onOpenChange` prop of `ModalTrigger` instead if it's part of a trigger |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                             |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |                                                                                                                                                                                                                             |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |                                                                                                                                                                                                                             |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                             |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                             |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                             |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type                        | Default  | Description                                                                                                         |
| ---------------- | --------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| role             | `"dialog" \| "alertdialog"` | 'dialog' | The accessibility role for the dialog.                                                                              |
| id               | `string`                    |          | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string`                    |          | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string`                    |          | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string`                    |          | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string`                    |          | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

##### ModalTrigger

| Prop        | Type      | Default | Description                                            |
| ----------- | --------- | ------- | ------------------------------------------------------ |
| isOpen      | `boolean` |         | Whether the overlay is open by default (controlled).   |
| defaultOpen | `boolean` |         | Whether the overlay is open by default (uncontrolled). |

###### Events

| Prop         | Type                          | Default | Description                                                   |
| ------------ | ----------------------------- | ------- | ------------------------------------------------------------- |
| onOpenChange | `((isOpen: boolean) => void)` |         | Handler that is called when the overlay's open state changes. |

##### CustomModal

| Prop                      | Type                                                                                   | Default | Description                                                                                                                                      |
| ------------------------- | -------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| isDismissible             | `boolean`                                                                              | true    | Whether the Modal is dismissable. @deprecated Use `isDismissable` instead. This prop will be removed in a future version (September 30th, 2025). |
| isDismissable             | `boolean`                                                                              | true    | Whether the CustomModal is dismissable.                                                                                                          |
| isKeyboardDismissDisabled | `boolean`                                                                              |         | Whether pressing the escape key to close the dialog should be disabled.                                                                          |
| size                      | `ResponsiveProp<"sm" \| "md" \| "lg" \| "xl" \| "fullscreen" \| "fullscreenTakeover">` | "md"    | The size of the CustomModal.                                                                                                                     |
| overlayProps              | `Partial<BaseModalProps>`                                                              |         | The props of the overlay                                                                                                                         |
| style                     | `CSSProperties`                                                                        |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.                                          |
| children                  | `ReactNode \| ((opts: DialogRenderProps) => ReactNode)`                                |         | Children of the dialog. A function may be provided to access a function to close the dialog.                                                     |
| className                 | `string`                                                                               |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.                                         |
| dir                       | `string`                                                                               |         |                                                                                                                                                  |
| lang                      | `string`                                                                               |         |                                                                                                                                                  |
| inert                     | `boolean`                                                                              |         |                                                                                                                                                  |
| translate                 | `"yes" \| "no"`                                                                        |         |                                                                                                                                                  |
| isOpen                    | `boolean`                                                                              |         | Whether the overlay is open by default (controlled).                                                                                             |
| defaultOpen               | `boolean`                                                                              |         | Whether the overlay is open by default (uncontrolled).                                                                                           |

###### Events

| Prop                        | Type                                  | Default | Description                                                                                                                                                                                                                        |
| --------------------------- | ------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onOpenChange                | `((isOpen: boolean) => void)`         |         | Handler that is called when the custom modal's open state changes. This handler is only called when the modal is not used inside a `ModalTrigger`. Use the `onOpenChange` prop of `ModalTrigger` instead if it's part of a trigger |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |                                                                                                                                                                                                                                    |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |                                                                                                                                                                                                                                    |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |                                                                                                                                                                                                                                    |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |                                                                                                                                                                                                                                    |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                                    |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                                    |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                                    |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                                    |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                                    |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |                                                                                                                                                                                                                                    |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                                    |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                                    |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                                    |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                                    |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                                    |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                                    |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                                    |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |                                                                                                                                                                                                                                    |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type                        | Default  | Description                                                                                                         |
| ---------------- | --------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------- |
| role             | `"dialog" \| "alertdialog"` | 'dialog' | The accessibility role for the dialog.                                                                              |
| id               | `string`                    |          | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string`                    |          | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string`                    |          | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string`                    |          | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string`                    |          | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `dismissable` has been renamed `isDismissable`.
* `onClose` has been removed, use `onOpenChange` on the ModalTrigger instead.
* `wrapperProps` has been renamed `overlayProps`.

### Nav

A specialized component to represent an HTML nav element.

```tsx
import { LI, Link, Nav, UL } from "@hopper-ui/components";

export default function Example() {
    return (
        <Nav color="neutral-weak">
            <UL>
                <LI>
                    <Link href="#">Missions</Link>
                </LI>
                <LI>
                    <Link href="#">Launches</Link>
                </LI>
                <LI>
                    <Link href="#">Careers</Link>
                </LI>
            </UL>
        </Nav>
    );
}
```

#### Usage

A nav component accepts all the [nav HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/nav) and [Hopper styled component props](/styled-system/concepts/styling.md).

### NumberField

A number field is a specialized input that allows a user to enter a number.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/inputs/src/NumberField.tsx>

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField label="Training hours completed" />
    );
}
```

#### Usage

##### Disabled

A number field in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField isDisabled label="Training hours completed" />
    );
}
```

##### ReadOnly

The `isReadOnly` prop makes the number field's content immutable. Unlike `isDisabled`, the number field remains focusable and the contents can still be copied. See [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField value={42} isReadOnly label="Training hours completed" />
    );
}
```

##### Sizes

Number fields have multiple sizes to choose from.

```tsx
import { NumberField, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <NumberField label="Training hours completed" size="sm" />
            <NumberField label="Training hours completed" />
        </Stack>
    );
}
```

##### Labeling

If a visible label isn't specified, an `aria-label` must be provided to the number field for accessibility. If the field is labeled by a separate element, an `aria-labelledby` prop must be provided using the ID of the labeling element instead.

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField aria-label="Training hours completed" />
    );
}
```

##### Description

A number field with a helper message.

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField label="Training hours completed" description="In person training hours only." />
    );
}
```

##### Icon Prefix

An icon can be displayed at the start of the input.

```tsx
import { NumberField } from "@hopper-ui/components";
import { UserIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <NumberField prefix={<UserIcon />} label="Training hours completed" />
    );
}
```

##### Text Prefix

A short text can be displayed at the start of the input.

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField prefix="Kg" label="Training hours completed" />
    );
}
```

##### Error

A number field can be displayed in an error state to indicate that the user input is invalid.

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField value={42} isInvalid label="Training hours completed" errorMessage="You cannot enter more than 40 training hours for this period." />
    );
}
```

##### Min Max

A number field can have a minimum and maximum value.

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField minValue={42} maxValue={50} label="Training hours completed" description="Please enter a value between 10 and 40." />
    );
}
```

##### Formatting

A number field can be formatted using this [format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat).

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField
            formatOptions={{
                style: "currency",
                currency: "USD"
            }}
            label="Training Budget Allocated"
        />
    );
}
```

##### Fluid

A number field can take the width of its container.

```tsx
import { NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField isFluid label="Training hours completed" />
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a NumberField.

```tsx
import { ContextualHelp, NumberField } from "@hopper-ui/components";

export default function Example() {
    return (
        <NumberField
            label="Training hours completed"
            contextualHelp={<ContextualHelp>This input only takes in numbers</ContextualHelp>}
        />
    );
}
```

#### Best Practices

* Be clearly labeled so it's obvious to users what they should enter into the field.
* Be labeled as “Optional” when you need to request input that's not required. View the Form pattern for more details on this.
* Only ask for information that's really needed.
* Validate input as soon as users have finished interacting with a field, but not before.

#### Props

| Prop               | Type                                                   | Default  | Description                                                                                                                                                                                                                               |
| ------------------ | ------------------------------------------------------ | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| prefix             | `ReactNode`                                            |          | An icon or text to display at the start of the input.                                                                                                                                                                                     |
| isFluid            | `ResponsiveProp<boolean>`                              | false    | If `true`, the NumberField will take all available width.                                                                                                                                                                                 |
| inputRef           | `MutableRefObject<HTMLInputElement \| null>`           |          | A ref for the HTML input element.                                                                                                                                                                                                         |
| inputProps         | `Partial<InputProps>`                                  |          | The props for the Input.                                                                                                                                                                                                                  |
| inputGroupProps    | `InputGroupProps`                                      |          | The props for the InputGroup.                                                                                                                                                                                                             |
| form               | `string`                                               |          | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).              |
| style              | `StyleOrFunction<NumberFieldRenderProps>`              |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                         |
| validationBehavior | `"native" \| "aria"`                                   | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                            |
| decrementAriaLabel | `string`                                               |          | A custom aria-label for the decrement button. If not provided, the localized string "Decrement" is used.                                                                                                                                  |
| incrementAriaLabel | `string`                                               |          | A custom aria-label for the increment button. If not provided, the localized string "Increment" is used.                                                                                                                                  |
| isWheelDisabled    | `boolean`                                              |          | Enables or disables changing the value with scroll.                                                                                                                                                                                       |
| formatOptions      | `NumberFormatOptions`                                  |          | Formatting options for the value displayed in the number field. This also affects what characters are allowed to be typed by the user.                                                                                                    |
| isDisabled         | `boolean`                                              |          | Whether the input is disabled.                                                                                                                                                                                                            |
| isReadOnly         | `boolean`                                              |          | Whether the input can be selected but not changed by the user.                                                                                                                                                                            |
| isRequired         | `boolean`                                              |          | Whether user input is required on the input before form submission.                                                                                                                                                                       |
| isInvalid          | `boolean`                                              |          | Whether the input value is invalid.                                                                                                                                                                                                       |
| validate           | `((value: number) => true \| ValidationError \| null)` |          | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead. |
| autoFocus          | `boolean`                                              |          | Whether the element should receive focus on render.                                                                                                                                                                                       |
| value              | `number`                                               |          | The current value (controlled).                                                                                                                                                                                                           |
| defaultValue       | `number`                                               |          | The default value (uncontrolled).                                                                                                                                                                                                         |
| minValue           | `number`                                               |          | The smallest value allowed for the input.                                                                                                                                                                                                 |
| maxValue           | `number`                                               |          | The largest value allowed for the input.                                                                                                                                                                                                  |
| step               | `number`                                               |          | The amount that the input value changes with each increment or decrement "tick".                                                                                                                                                          |
| className          | `ClassNameOrFunction<NumberFieldRenderProps>`          |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                        |
| dir                | `string`                                               |          |                                                                                                                                                                                                                                           |
| lang               | `string`                                               |          |                                                                                                                                                                                                                                           |
| inert              | `boolean`                                              |          |                                                                                                                                                                                                                                           |
| translate          | `"yes" \| "no"`                                        |          |                                                                                                                                                                                                                                           |
| name               | `string`                                               |          | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                             |
| description        | `ReactNode`                                            |          | The helper message of the field.                                                                                                                                                                                                          |
| errorMessage       | `ReactNode \| ((v: ValidationResult) => ReactNode)`    |          | The error message of the field.                                                                                                                                                                                                           |
| label              | `ReactNode`                                            |          | The label of the field.                                                                                                                                                                                                                   |
| necessityIndicator | `NecessityIndicator`                                   |          | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                    |
| size               | `ResponsiveProp<FieldSize>`                            | "md"     | A Field can vary in size.                                                                                                                                                                                                                 |
| contextualHelp     | `ReactNode`                                            |          | A ContextualHelp element to place next to the label.                                                                                                                                                                                      |

###### Events

| Prop                        | Type                                          | Default | Description                                                                                                                                                                                                |
| --------------------------- | --------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element receives focus.                                                                                                                                                    |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element loses focus.                                                                                                                                                       |
| onFocusChange               | `((isFocused: boolean) => void)`              |         | Handler that is called when the element's focus status changes.                                                                                                                                            |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                |         | Handler that is called when a key is pressed.                                                                                                                                                              |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                |         | Handler that is called when a key is released.                                                                                                                                                             |
| onChange                    | `((value: number) => void)`                   |         | Handler that is called when the value changes.                                                                                                                                                             |
| onCopy                      | `ClipboardEventHandler<HTMLInputElement>`     |         | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).                                                                          |
| onCut                       | `ClipboardEventHandler<HTMLInputElement>`     |         | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).                                                                             |
| onPaste                     | `ClipboardEventHandler<HTMLInputElement>`     |         | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).                                                                         |
| onCompositionStart          | `CompositionEventHandler<HTMLInputElement>`   |         | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).                   |
| onCompositionEnd            | `CompositionEventHandler<HTMLInputElement>`   |         | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| onCompositionUpdate         | `CompositionEventHandler<HTMLInputElement>`   |         | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).              |
| onSelect                    | `ReactEventHandler<HTMLInputElement>`         |         | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).                                                               |
| onBeforeInput               | `FormEventHandler<HTMLInputElement>`          |         | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).                                            |
| onInput                     | `FormEventHandler<HTMLInputElement>`          |         | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).                                                              |
| onClick                     | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`         |         |                                                                                                                                                                                                            |
| onScroll                    | `UIEventHandler<HTMLDivElement>`              |         |                                                                                                                                                                                                            |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`              |         |                                                                                                                                                                                                            |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`           |         |                                                                                                                                                                                                            |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                                                            |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                                                            |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                                                            |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                                                            |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                                                            |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                                                                                                                                                            |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                                                            |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                                                            |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                                                            |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                                                            |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                                                            |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                                                            |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                                                            |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                                                                                                                                                            |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

* Boolean props are now prefixed by `is`.
* There is no longer a loading state.
* `icon` prop has been renamed to `prefix`.
* `wrapperProps` is not supported.
* `validationState` was renamed to `isInvalid`.
* `min` and `max` props have been renamed to `minValue` and `maxValue`.

### Paragraph

A paragraph is used to render blocks of text.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/typography/paragraph/src/Paragraph.tsx>

```tsx
import { Paragraph } from "@hopper-ui/components";

export default function Example() {
    return (
        <Paragraph>One simple employee experience platform to boost engagement, drive performance, and develop your people. One simple employee experience platform to boost engagement, drive performance, and develop your people.</Paragraph>
    );
}
```

#### Usage

##### Sizes

You can alter the size of the paragraph by specifying a `size` prop. The available sizes match the Hopper Typography Type Scale — a type scale is a set of [font-size and line-height](https://hopper.workleap.design/tokens/semantic/typography#tokens-body) pairs.

```tsx
import { Paragraph, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <Paragraph size="xs">One simple employee experience platform to boost engagement, drive performance, and develop your people. One simple employee experience platform to boost engagement, drive performance, and develop your people.</Paragraph>
            <Paragraph size="sm">One simple employee experience platform to boost engagement, drive performance, and develop your people. One simple employee experience platform to boost engagement, drive performance, and develop your people.</Paragraph>
            <Paragraph size="md">One simple employee experience platform to boost engagement, drive performance, and develop your people. One simple employee experience platform to boost engagement, drive performance, and develop your people.</Paragraph>
            <Paragraph size="lg">One simple employee experience platform to boost engagement, drive performance, and develop your people. One simple employee experience platform to boost engagement, drive performance, and develop your people.</Paragraph>
            <Paragraph size="xl">One simple employee experience platform to boost engagement, drive performance, and develop your people. One simple employee experience platform to boost engagement, drive performance, and develop your people.</Paragraph>
            <Paragraph size="2xl">One simple employee experience platform to boost engagement, drive performance, and develop your people. One simple employee experience platform to boost engagement, drive performance, and develop your people.</Paragraph>
        </Stack>
    );
}
```

##### Inherit

You can also alter the size to match the parent element's type scale by using the `inherit` size.

```tsx
import { Div, Paragraph } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div fontSize="body-xs">
            <Paragraph size="inherit">One simple employee experience platform to boost engagement, drive performance, and develop your people. One simple employee experience platform to boost engagement, drive performance, and develop your people.</Paragraph>
        </Div>
    );
}
```

#### Props

| Prop      | Type                       | Default | Description                       |
| --------- | -------------------------- | ------- | --------------------------------- |
| style     | `CSSProperties`            |         |                                   |
| className | `string`                   |         |                                   |
| size      | `ResponsiveProp<TextSize>` | "md"    | The Typography Type Scale to use. |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

### PasswordField

A password field is a specialized text field that allows a user to enter a password.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/inputs/src/PasswordField.tsx>

```tsx
import { PasswordField } from "@hopper-ui/components";

export default function Example() {
    return (
        <PasswordField label="Password" />
    );
}
```

#### Usage

##### Disabled

A password field in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.

```tsx
import { PasswordField } from "@hopper-ui/components";

export default function Example() {
    return (
        <PasswordField isDisabled label="Password" />
    );
}
```

##### ReadOnly

The `isReadOnly` prop makes the PasswordField's text content immutable. Unlike `isDisabled`, the password field remains focusable and its content can still be copied. See [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.

```tsx
import { PasswordField } from "@hopper-ui/components";

export default function Example() {
    return (
        <PasswordField isReadOnly label="Password" />
    );
}
```

##### Error

A password field can be displayed in an error state to indicate that the user input is invalid.

```tsx
import { PasswordField } from "@hopper-ui/components";

export default function Example() {
    return (
        <PasswordField isInvalid label="Password" errorMessage="Password can't be empty." />
    );
}
```

##### Sizes

Password fields can vary in size.

```tsx
import { PasswordField, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <PasswordField label="Password" size="sm" />
            <PasswordField label="Password" />
        </Stack>
    );
}
```

##### Labeling

If a visible label isn't specified, an aria-label must be provided to the password field for accessibility. If the field is labeled by a separate element, an `aria-labelledby` prop must be provided using the ID of the labeling element instead.

```tsx
import { PasswordField } from "@hopper-ui/components";

export default function Example() {
    return (
        <PasswordField aria-label="Label" />
    );
}
```

##### Description

A password field with a helper message.

```tsx
import { PasswordField } from "@hopper-ui/components";

export default function Example() {
    return (
        <PasswordField label="Password" description="Should contain more than 10 characters" />
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a PasswordField.

```tsx
import { ContextualHelp, PasswordField } from "@hopper-ui/components";

export default function Example() {
    return (
        <PasswordField
            label="Password"
            contextualHelp={<ContextualHelp>Choose a strong password with at least 8 characters, including a mix of letters, numbers, and symbols.</ContextualHelp>}
        />
    );
}
```

#### Best Practices

* Be clearly labeled so it's obvious to users what they should enter into the field.
* Be labeled as “Optional” when you need to request input that's not required. View the Form pattern for more details on this.
* Only ask for information that's really needed.
* Validate input as soon as users have finished interacting with a field, but not before.

#### Props

| Prop                | Type                                                                                  | Default  | Description                                                                                                                                                                                                                                      |
| ------------------- | ------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| placeholder         | `string`                                                                              |          | The placeholder text when the PasswordField is empty.                                                                                                                                                                                            |
| size                | `ResponsiveProp<FieldSize>`                                                           | "md"     | The size of the PasswordField.                                                                                                                                                                                                                   |
| isFluid             | `ResponsiveProp<boolean>`                                                             | false    | If `true`, the PasswordField will take all available width.                                                                                                                                                                                      |
| inputRef            | `MutableRefObject<HTMLInputElement \| null>`                                          |          | A ref for the HTML input element.                                                                                                                                                                                                                |
| inputGroupProps     | `Partial<InputGroupProps>`                                                            |          | The props for the InputGroup.                                                                                                                                                                                                                    |
| inputProps          | `Partial<InputProps>`                                                                 |          | The props for the Input.                                                                                                                                                                                                                         |
| embeddedButtonProps | `Partial<EmbeddedButtonProps>`                                                        |          | The props for the EmbeddedButton.                                                                                                                                                                                                                |
| form                | `string`                                                                              |          | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).                     |
| style               | `StyleOrFunction<TextFieldRenderProps>`                                               |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                |
| pattern             | `string`                                                                              |          | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).                                                                                 |
| validationBehavior  | `"native" \| "aria"`                                                                  | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                   |
| enterKeyHint        | `"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`             |          | An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).                                    |
| isDisabled          | `boolean`                                                                             |          | Whether the input is disabled.                                                                                                                                                                                                                   |
| isReadOnly          | `boolean`                                                                             |          | Whether the input can be selected but not changed by the user.                                                                                                                                                                                   |
| isRequired          | `boolean`                                                                             |          | Whether user input is required on the input before form submission.                                                                                                                                                                              |
| isInvalid           | `boolean`                                                                             |          | Whether the value is invalid.                                                                                                                                                                                                                    |
| validate            | `((value: string) => true \| ValidationError \| null)`                                |          | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.        |
| autoFocus           | `boolean`                                                                             |          | Whether the element should receive focus on render.                                                                                                                                                                                              |
| value               | `string`                                                                              |          | The current value (controlled).                                                                                                                                                                                                                  |
| defaultValue        | `string`                                                                              |          | The default value (uncontrolled).                                                                                                                                                                                                                |
| autoComplete        | `string`                                                                              |          | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).                                                            |
| maxLength           | `number`                                                                              |          | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).                                                                                        |
| minLength           | `number`                                                                              |          | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).                                                                                         |
| inputMode           | `"search" \| "text" \| "none" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"` |          | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).                             |
| autoCorrect         | `string`                                                                              |          | An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete). |
| spellCheck          | `string`                                                                              |          | An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).                                                          |
| name                | `string`                                                                              |          | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                                    |
| className           | `ClassNameOrFunction<TextFieldRenderProps>`                                           |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                               |
| dir                 | `string`                                                                              |          |                                                                                                                                                                                                                                                  |
| lang                | `string`                                                                              |          |                                                                                                                                                                                                                                                  |
| inert               | `boolean`                                                                             |          |                                                                                                                                                                                                                                                  |
| translate           | `"yes" \| "no"`                                                                       |          |                                                                                                                                                                                                                                                  |
| description         | `ReactNode`                                                                           |          | The helper message of the field.                                                                                                                                                                                                                 |
| errorMessage        | `ReactNode \| ((v: ValidationResult) => ReactNode)`                                   |          | The error message of the field.                                                                                                                                                                                                                  |
| label               | `ReactNode`                                                                           |          | The label of the field.                                                                                                                                                                                                                          |
| necessityIndicator  | `NecessityIndicator`                                                                  |          | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                           |
| contextualHelp      | `ReactNode`                                                                           |          | A ContextualHelp element to place next to the label.                                                                                                                                                                                             |

###### Events

| Prop                        | Type                                                   | Default | Description                                                                                                                                                                                                |
| --------------------------- | ------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onFocus                     | `((e: FocusEvent<HTMLInputElement, Element>) => void)` |         | Handler that is called when the element receives focus.                                                                                                                                                    |
| onBlur                      | `((e: FocusEvent<HTMLInputElement, Element>) => void)` |         | Handler that is called when the element loses focus.                                                                                                                                                       |
| onFocusChange               | `((isFocused: boolean) => void)`                       |         | Handler that is called when the element's focus status changes.                                                                                                                                            |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                         |         | Handler that is called when a key is pressed.                                                                                                                                                              |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                         |         | Handler that is called when a key is released.                                                                                                                                                             |
| onChange                    | `((value: string) => void)`                            |         | Handler that is called when the value changes.                                                                                                                                                             |
| onCopy                      | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).                                                                          |
| onCut                       | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).                                                                             |
| onPaste                     | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).                                                                         |
| onCompositionStart          | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).                   |
| onCompositionEnd            | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| onCompositionUpdate         | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).              |
| onSelect                    | `ReactEventHandler<HTMLInputElement>`                  |         | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).                                                               |
| onBeforeInput               | `FormEventHandler<HTMLInputElement>`                   |         | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).                                            |
| onInput                     | `FormEventHandler<HTMLInputElement>`                   |         | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).                                                              |
| onClick                     | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                            |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                            |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                  | Type                                                                                  | Default | Description                                                                                                                                                                                                                                                                                   |
| --------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-activedescendant | `string`                                                                              |         | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.                                                                                                                                                                              |
| aria-autocomplete     | `"none" \| "inline" \| "list" \| "both"`                                              |         | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.                                                                                                |
| aria-haspopup         | `boolean \| "dialog" \| "menu" \| "grid" \| "false" \| "true" \| "listbox" \| "tree"` |         | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.                                                                                                                                                                |
| aria-controls         | `string`                                                                              |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| aria-label            | `string`                                                                              |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby       | `string`                                                                              |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby      | `string`                                                                              |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details          | `string`                                                                              |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |
| excludeFromTabOrder   | `boolean`                                                                             |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id                    | `string`                                                                              |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).                                                                                                                                                                           |
| aria-errormessage     | `string`                                                                              |         | Identifies the element that provides an error message for the object.                                                                                                                                                                                                                         |

#### Migration Notes

* Boolean props are now prefixed by `is`.
* There is no longer a loading state.
* `icon` prop has been renamed to `prefix`.
* Button props have been removed. To add a clear button, use the `isClearable` prop. For a more complex use case, create your own input using InputGroup.
* `wrapperProps` no longer exists.
* `validationState` has been changed to `isInvalid`.

### Popover

A popover displays additional content when a user interacts with a trigger element.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/overlays/popover/src/Popover.tsx>

A popover is a layer that appears above all other content on the page. Only one popover can appear at a time and can contain varying text and interactive elements.

```tsx
import { Button, Content, Footer, Heading, Link, Popover, PopoverTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <PopoverTrigger>
            <Button aria-label="information" variant="secondary">Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
                <Footer>
                    <Link href="#">Website</Link>
                </Footer>
            </Popover>
        </PopoverTrigger>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Popover>
    <Heading /> /* (Optional) Title of the popover */
    <Content /> /* (Required) The content of the popover */
    <Footer /> /* (Optional) Footer content of the popover */
    <Button /> /* (Optional) Action button for the popover */
    <ButtonGroup /> /* (Optional) Group of action buttons for the popover */
</Popover>
```

##### Composed Components

A `Popover` uses the following components:

| Component   | Description                                                                   |
| ----------- | ----------------------------------------------------------------------------- |
| Button      | A button allows a user to initiate an action.                                 |
| ButtonGroup | A button group handles the spacing and orientation for a grouping of buttons. |
| Content     | A placeholder for the main content section of a component.                    |
| Footer      | A placeholder for a footer section.                                           |
| Heading     | A heading is a primitive component matching Hopper's typography type scale.   |

#### Usage

##### Disabled

A popover will not open when its trigger is disabled.

```tsx
import { Button, Content, Heading, Popover, PopoverTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <PopoverTrigger>
            <Button isDisabled>Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
            </Popover>
        </PopoverTrigger>
    );
}
```

##### Single button

A popover can have a single button.

```tsx
import { Button, Content, Heading, Popover, PopoverTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <PopoverTrigger>
            <Button variant="secondary">Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
                <Button>Apply</Button>
            </Popover>
        </PopoverTrigger>
    );
}
```

##### Multiple buttons

A popover can have a group of buttons.

```tsx
import { Button, ButtonGroup, Content, Heading, Popover, PopoverTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <PopoverTrigger>
            <Button>Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
                <ButtonGroup>
                    <Button variant="secondary">Follow</Button>
                    <Button>Apply</Button>
                </ButtonGroup>
            </Popover>
        </PopoverTrigger>
    );
}
```

##### Footer text

A popover can have footer text.

```tsx
import { Button, Content, Footer, Heading, Popover, PopoverTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <PopoverTrigger>
            <Button variant="secondary">Company Profile</Button>
            <Popover>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
                <Footer>
                    1 of 5
                </Footer>
                <Button>Next</Button>
            </Popover>
        </PopoverTrigger>
    );
}
```

##### Placement

A popover can be positioned in different ways `top`, `right`, `bottom`, `left`.

```tsx
import { Button, PopoverTrigger, Popover, Heading, Content, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <PopoverTrigger>
                <Button aria-label="top popover" variant="secondary">Top</Button>
                <Popover placement="top">
                    <Heading>Popover top</Heading>
                    <Content>
                        And here's some amazing content. It's very engaging. Right?
                    </Content>
                </Popover>
            </PopoverTrigger>
            <PopoverTrigger>
                <Button aria-label="right popover" variant="secondary">Right</Button>
                <Popover placement="right">
                    <Heading>Popover right</Heading>
                    <Content>
                        And here's some amazing content. It's very engaging. Right?
                    </Content>
                </Popover>
            </PopoverTrigger>
            <PopoverTrigger>
                <Button aria-label="bottom popover" variant="secondary">Bottom</Button>
                <Popover placement="bottom">
                    <Heading>Popover bottom</Heading>
                    <Content>
                        And here's some amazing content. It's very engaging. Right?
                    </Content>
                </Popover>
            </PopoverTrigger>
            <PopoverTrigger>
                <Button aria-label="left popover" variant="secondary">Left</Button>
                <Popover placement="left">
                    <Heading>Popover left</Heading>
                    <Content>
                        And here's some amazing content. It's very engaging. Right?
                    </Content>
                </Popover>
            </PopoverTrigger>
        </Inline>
    );
}
```

##### Context

A Popover's `isOpen` state or close function can be retrieved from `PopoverContext` and `ButtonContext`.

```tsx
import {
    Button,
    ButtonContext,
    Content,
    Heading,
    Popover,
    PopoverContext,
    PopoverTrigger,
    SlotProvider
} from "@hopper-ui/components";
import { type ReactNode, useRef, useState } from "react";

const HighlightedTrigger = ({ children }: { children: ReactNode }) => {
    const triggerRef = useRef(null);
    const [isOpen, setOpen] = useState(false);

    return (
        <SlotProvider values={[
            [PopoverContext, { isOpen, onOpenChange: setOpen }],
            [ButtonContext, {
                onPress: () => setOpen(!isOpen),
                ref: triggerRef,
                variant: isOpen ? "primary" : "secondary"
            }]
        ]}
        >
            {children}
        </SlotProvider>
    );
};

export default function Example() {
    return (
        <HighlightedTrigger>
            <PopoverTrigger>
                <Button>Company Profile</Button>
                <Popover>
                    <Heading>ACME</Heading>
                    <Content>
                        A tech company focusing on the development of software and hardware solutions.
                    </Content>
                </Popover>
            </PopoverTrigger>
        </HighlightedTrigger>
    );
}
```

##### Controlled

A Popover's open state can be handled in controlled mode.

```tsx
import { Button, Content, Heading, Popover, Stack } from "@hopper-ui/components";
import { useRef, useState } from "react";

export default function Example() {
    const triggerRef = useRef(null);
    const [isOpen, setOpen] = useState(false);

    return (
        <>
            <Stack alignX="center">
                <Button
                    onPress={() => setOpen(!isOpen)}
                    variant="secondary"
                >
                    Company Profile
                </Button>
                <span ref={triggerRef}>Popover will be positioned relative to me</span>
            </Stack>
            <Popover triggerRef={triggerRef} isOpen={isOpen} onOpenChange={setOpen}>
                <Heading>ACME</Heading>
                <Content>
                    A tech company focusing on the development of software and hardware solutions.
                </Content>
            </Popover>
        </>
    );
}
```

##### Styled React Aria Component Popover

If you want to create a custom component using a Popover, and you just need the Popover styles, you can use the `PopoverBase` component instead.

#### Best Practices

Popovers should:

* Always be positioned next to the button or other interface element that triggers them. A space of 4px between the element and the popover is required.
* Be used for secondary or less important information and actions since they're hidden until users hit the trigger.
* Contain navigational or actions that share a relationship to each other.

#### Props

##### Popover

| Prop                         | Type                                      | Default       | Description                                                                                                                                                                                                                                                                                                               |
| ---------------------------- | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isAutoWidth                  | `boolean`                                 |               | Whether the popover should have an auto width. Only available in non-dialog popovers.                                                                                                                                                                                                                                     |
| boundaryOffset               | `number`                                  |               | The minimum distance the trigger edge should be from the edge of the overlay element.                                                                                                                                                                                                                                     |
| isNonDialog                  | `boolean`                                 |               | Whether the popover is a non-dialog. This is set to true in components such as selects.                                                                                                                                                                                                                                   |
| containerProps               | `PopoverContainerProps`                   |               | The props of the popover's inner container.                                                                                                                                                                                                                                                                               |
| placement                    | `ResponsiveProp<Placement>`               | "bottom"      | The placement of the popover with respect to its anchor element.                                                                                                                                                                                                                                                          |
| style                        | `StyleOrFunction<PopoverRenderProps>`     |               | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                                                                                         |
| isOpen                       | `boolean`                                 |               | Whether the overlay is open by default (controlled).                                                                                                                                                                                                                                                                      |
| containerPadding             | `number`                                  | 12            | The placement padding that should be applied between the element and its surrounding container.                                                                                                                                                                                                                           |
| offset                       | `number`                                  | 8             | The additional offset applied along the main axis between the element and its anchor element.                                                                                                                                                                                                                             |
| crossOffset                  | `number`                                  | 0             | The additional offset applied along the cross axis between the element and its anchor element.                                                                                                                                                                                                                            |
| shouldFlip                   | `boolean`                                 | true          | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.                                                                                                                                                                        |
| triggerRef                   | `RefObject<Element \| null>`              |               | The ref for the element which the popover positions itself with respect to.When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.                                                                                    |
| boundaryElement              | `Element`                                 | document.body | Element that that serves as the positioning boundary.                                                                                                                                                                                                                                                                     |
| arrowRef                     | `RefObject<Element \| null>`              |               | A ref for the popover arrow element.                                                                                                                                                                                                                                                                                      |
| scrollRef                    | `RefObject<Element \| null>`              | overlayRef    | A ref for the scrollable region within the overlay.                                                                                                                                                                                                                                                                       |
| shouldUpdatePosition         | `boolean`                                 | true          | Whether the overlay should update its position automatically.                                                                                                                                                                                                                                                             |
| arrowBoundaryOffset          | `number`                                  | 0             | The minimum distance the arrow's edge should be from the edge of the overlay element.                                                                                                                                                                                                                                     |
| isNonModal                   | `boolean`                                 |               | Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully. |
| isKeyboardDismissDisabled    | `boolean`                                 | false         | Whether pressing the escape key to close the popover should be disabled.Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.                                                                                                             |
| shouldCloseOnInteractOutside | `((element: Element) => boolean)`         |               | When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the popover ref.                 |
| trigger                      | `string`                                  |               | The name of the component that triggered the popover. This is reflected on the element as the `data-trigger` attribute, and can be used to provide specific styles for the popover depending on which element triggered it.                                                                                               |
| isEntering                   | `boolean`                                 |               | Whether the popover is currently performing an entry animation.                                                                                                                                                                                                                                                           |
| isExiting                    | `boolean`                                 |               | Whether the popover is currently performing an exit animation.                                                                                                                                                                                                                                                            |
| UNSTABLE\_portalContainer    | `Element`                                 | document.body | The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE\_PortalProvider to set your portal container instead.                                                                                           |
| defaultOpen                  | `boolean`                                 |               | Whether the overlay is open by default (uncontrolled).                                                                                                                                                                                                                                                                    |
| children                     | `ChildrenOrFunction<PopoverRenderProps>`  |               | The children of the component. A function may be provided to alter the children based on component state.                                                                                                                                                                                                                 |
| className                    | `ClassNameOrFunction<PopoverRenderProps>` |               | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                                                                                                        |
| dir                          | `string`                                  |               |                                                                                                                                                                                                                                                                                                                           |
| lang                         | `string`                                  |               |                                                                                                                                                                                                                                                                                                                           |
| inert                        | `boolean`                                 |               |                                                                                                                                                                                                                                                                                                                           |
| translate                    | `"yes" \| "no"`                           |               |                                                                                                                                                                                                                                                                                                                           |

###### Events

| Prop                        | Type                                     | Default | Description                                                   |
| --------------------------- | ---------------------------------------- | ------- | ------------------------------------------------------------- |
| onOpenChange                | `((isOpen: boolean) => void)`            |         | Handler that is called when the overlay's open state changes. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                               |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                               |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                               |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                               |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

##### PopoverTrigger

| Prop        | Type      | Default | Description                                            |
| ----------- | --------- | ------- | ------------------------------------------------------ |
| isOpen      | `boolean` |         | Whether the overlay is open by default (controlled).   |
| defaultOpen | `boolean` |         | Whether the overlay is open by default (uncontrolled). |

###### Events

| Prop         | Type                          | Default | Description                                                   |
| ------------ | ----------------------------- | ------- | ------------------------------------------------------------- |
| onOpenChange | `((isOpen: boolean) => void)` |         | Handler that is called when the overlay's open state changes. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* The `position` property has been renamed `placement`.

### PopoverBase

A simple React Aria Popover with hopper's styling

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/overlays/popover/src/PopoverBase.tsx>

PopoverBase is a low-level building block that wraps React Aria's Popover to provide core popover functionality with Hopper's design system styling and enhancements. It doesn't impose layout or padding, making it ideal for building custom popover structures from scratch.

#### Usage

PopoverBase should be used with `PopoverTrigger` to handle the opening and closing of the popover:

```tsx
import { Button, PopoverBase, PopoverTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <PopoverTrigger>
            <Button aria-label="trigger" variant="secondary">Trigger</Button>
            <PopoverBase>
                Frogs can breathe through their skin
            </PopoverBase>
        </PopoverTrigger>
    );
}
```

#### Props

| Prop                         | Type                                      | Default       | Description                                                                                                                                                                                                                                                                                                               |
| ---------------------------- | ----------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| placement                    | `ResponsiveProp<Placement>`               | "bottom"      | The placement of the popover with respect to its anchor element.                                                                                                                                                                                                                                                          |
| style                        | `StyleOrFunction<PopoverRenderProps>`     |               | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                                                                                         |
| isOpen                       | `boolean`                                 |               | Whether the overlay is open by default (controlled).                                                                                                                                                                                                                                                                      |
| containerPadding             | `number`                                  | 12            | The placement padding that should be applied between the element and its surrounding container.                                                                                                                                                                                                                           |
| offset                       | `number`                                  | 8             | The additional offset applied along the main axis between the element and its anchor element.                                                                                                                                                                                                                             |
| crossOffset                  | `number`                                  | 0             | The additional offset applied along the cross axis between the element and its anchor element.                                                                                                                                                                                                                            |
| shouldFlip                   | `boolean`                                 | true          | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely.                                                                                                                                                                        |
| triggerRef                   | `RefObject<Element \| null>`              |               | The ref for the element which the popover positions itself with respect to.When used within a trigger component such as DialogTrigger, MenuTrigger, Select, etc., this is set automatically. It is only required when used standalone.                                                                                    |
| boundaryElement              | `Element`                                 | document.body | Element that that serves as the positioning boundary.                                                                                                                                                                                                                                                                     |
| arrowRef                     | `RefObject<Element \| null>`              |               | A ref for the popover arrow element.                                                                                                                                                                                                                                                                                      |
| scrollRef                    | `RefObject<Element \| null>`              | overlayRef    | A ref for the scrollable region within the overlay.                                                                                                                                                                                                                                                                       |
| shouldUpdatePosition         | `boolean`                                 | true          | Whether the overlay should update its position automatically.                                                                                                                                                                                                                                                             |
| arrowBoundaryOffset          | `number`                                  | 0             | The minimum distance the arrow's edge should be from the edge of the overlay element.                                                                                                                                                                                                                                     |
| isNonModal                   | `boolean`                                 |               | Whether the popover is non-modal, i.e. elements outside the popover may be interacted with by assistive technologies.Most popovers should not use this option as it may negatively impact the screen reader experience. Only use with components such as combobox, which are designed to handle this situation carefully. |
| isKeyboardDismissDisabled    | `boolean`                                 | false         | Whether pressing the escape key to close the popover should be disabled.Most popovers should not use this option. When set to true, an alternative way to close the popover with a keyboard must be provided.                                                                                                             |
| shouldCloseOnInteractOutside | `((element: Element) => boolean)`         |               | When user interacts with the argument element outside of the popover ref, return true if onClose should be called. This gives you a chance to filter out interaction with elements that should not dismiss the popover. By default, onClose will always be called on interaction outside the popover ref.                 |
| trigger                      | `string`                                  |               | The name of the component that triggered the popover. This is reflected on the element as the `data-trigger` attribute, and can be used to provide specific styles for the popover depending on which element triggered it.                                                                                               |
| isEntering                   | `boolean`                                 |               | Whether the popover is currently performing an entry animation.                                                                                                                                                                                                                                                           |
| isExiting                    | `boolean`                                 |               | Whether the popover is currently performing an exit animation.                                                                                                                                                                                                                                                            |
| UNSTABLE\_portalContainer    | `Element`                                 | document.body | The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to. @deprecated - Use a parent UNSAFE\_PortalProvider to set your portal container instead.                                                                                           |
| defaultOpen                  | `boolean`                                 |               | Whether the overlay is open by default (uncontrolled).                                                                                                                                                                                                                                                                    |
| children                     | `ChildrenOrFunction<PopoverRenderProps>`  |               | The children of the component. A function may be provided to alter the children based on component state.                                                                                                                                                                                                                 |
| className                    | `ClassNameOrFunction<PopoverRenderProps>` |               | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                                                                                                        |
| dir                          | `string`                                  |               |                                                                                                                                                                                                                                                                                                                           |
| lang                         | `string`                                  |               |                                                                                                                                                                                                                                                                                                                           |
| inert                        | `boolean`                                 |               |                                                                                                                                                                                                                                                                                                                           |
| translate                    | `"yes" \| "no"`                           |               |                                                                                                                                                                                                                                                                                                                           |

###### Events

| Prop                        | Type                                     | Default | Description                                                   |
| --------------------------- | ---------------------------------------- | ------- | ------------------------------------------------------------- |
| onOpenChange                | `((isOpen: boolean) => void)`            |         | Handler that is called when the overlay's open state changes. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                               |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                               |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                               |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                               |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                               |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                               |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                               |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                               |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

### RadioGroup

A radio group is used to group related options together.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/radio/src/RadioGroup.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/radio/>

Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selection at a time. When a user chooses a new item, the previous choice is automatically deselected. They can be used in tiles, data tables, modals, side panels, and in forms on full-page layouts. Radio button can be used to change from one setting to another in a Listbox, page or component. It can often act as a filtering mechanism.

```tsx
import { Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup aria-label="roles">
            <Radio value="developer">Developer</Radio>
            <Radio value="designer">Designer</Radio>
        </RadioGroup>
    );
}
```

#### Anatomy

##### Structure

```tsx
<RadioGroup>
    <Radio> /* (Required) A radio button for the RadioGroup */
        <IconList /> /* (Optional) A list of icons in the radio */
        <Icon /> /* (Optional) An icon in the radio */
        <Text /> /* (Optional) Text in the radio, required if using an Icon or an IconList */
    </Radio>
</RadioGroup>
```

##### Composed Components

A `RadioGroup` uses the following components:

| Component | Description                                                                        |
| --------- | ---------------------------------------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon.                                 |
| IconList  | An IconList encapsulates a collection of icons.                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale. |

#### Usage

##### Label

A radio group can have a label to provide more context to the user.

```tsx
import { Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup label="Roles">
            <Radio value="developer">Developer</Radio>
            <Radio value="designer">Designer</Radio>
            <Radio value="manager">Manager</Radio>
        </RadioGroup>
    );
}
```

##### Disabled

A radio group can be disabled.

```tsx
import { Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup isDisabled aria-label="roles">
            <Radio value="manager">Manager</Radio>
            <Radio value="designer">Designer</Radio>
        </RadioGroup>
    );
}
```

##### Sizes

A radio group can vary in size.

```tsx
import { Inline, Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <RadioGroup size="sm" aria-label="roles">
                <Radio value="manager">Manager</Radio>
                <Radio value="designer">Designer</Radio>
            </RadioGroup>
            <RadioGroup size="md" aria-label="roles">
                <Radio value="manager">Manager</Radio>
                <Radio value="designer">Designer</Radio>
            </RadioGroup>
        </Inline>
    );
}
```

##### Orientation

A radio group can be displayed horizontally or vertically.

```tsx
import { Inline, Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline gap="inline-xl">
            <RadioGroup orientation="horizontal" aria-label="roles">
                <Radio value="manager">Manager</Radio>
                <Radio value="designer">Designer</Radio>
            </RadioGroup>
            <RadioGroup orientation="vertical" aria-label="roles">
                <Radio value="manager">Manager</Radio>
                <Radio value="designer">Designer</Radio>
            </RadioGroup>
        </Inline>
    );
}
```

##### Description

A radio group can have a description to provide more information to the user.

```tsx
import { Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup aria-label="roles" description="Select one to continue">
            <Radio value="developer">Developer</Radio>
            <Radio value="designer">Designer</Radio>
            <Radio value="manager">Manager</Radio>
        </RadioGroup>
    );
}
```

##### Variants

A radio group can be bordered.

```tsx
import { Radio, RadioGroup, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup variant="bordered" aria-label="roles">
            <Radio value="developer"><Text>Developer</Text></Radio>
            <Radio value="designer">
                <Text>Designer</Text>
            </Radio>
        </RadioGroup>
    );
}
```

##### Invalid

A radio group can be invalid.

```tsx
import { Radio, RadioGroup } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [isInvalid, setIsInvalid] = useState(true);

    function onChange(value: string) {
        // if value is empty, then it is invalid
        setIsInvalid(value.length === 0);
    }

    return (
        <RadioGroup
            onChange={onChange}
            isInvalid={isInvalid}
            label="Roles"
            description="These are all excellent roles"
            errorMessage="Check this box and the description will appear"
        >
            <Radio value="developer">Developer</Radio>
            <Radio value="designer">Designer</Radio>
            <Radio value="manager">Manager</Radio>
        </RadioGroup>
    );
}
```

##### Fluid

A radio group can be expanded to full width to fill its parent container.

```tsx
import { Radio, RadioField, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup variant="bordered" isFluid aria-label="roles" description="Select one to continue">
            <Radio value="developer">Developer</Radio>
            <Radio value="designer">Designer</Radio>
            <RadioField description="Team Manager">
                <Radio value="manager">Manager</Radio>
            </RadioField>
        </RadioGroup>
    );
}
```

##### Controlled

A radio group can handle `value` state in controlled mode.

```tsx
import { Radio, RadioField, RadioGroup } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selected, setSelected] = useState<string>("designer");

    return (
        <RadioGroup
            aria-label="Roles"
            value={selected}
            onChange={setSelected}
        >
            <Radio value="developer">Developer</Radio>
            <Radio value="designer">Designer</Radio>
            <RadioField description="Team Manager">
                <Radio value="manager">Manager</Radio>
            </RadioField>
        </RadioGroup>
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a RadioGroup.

```tsx
import { ContextualHelp, Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup aria-label="roles" label="Roles" contextualHelp={<ContextualHelp>These are all possible roles</ContextualHelp>}>
            <Radio value="developer">Developer</Radio>
            <Radio value="designer">Designer</Radio>
            <Radio value="manager">Manager</Radio>
        </RadioGroup>
    );
}
```

##### No Label on Items

A radio component can be rendered without a label.

```tsx
import { Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup aria-label="roles">
            <Radio value="label" aria-label="Label"></Radio>
        </RadioGroup>
    );
}
```

##### Disabled Items

A radio component can be disabled.

```tsx
import { Radio, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup aria-label="roles">
            <Radio value="manager" isDisabled>Manager</Radio>
            <Radio value="designer">Designer</Radio>
        </RadioGroup>
    );
}
```

##### Description on Items

A radio component can have a description to provide more information to the user.

```tsx
import { Radio, RadioField, RadioGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <RadioGroup aria-label="roles">
            <Radio value="developer">Developer</Radio>
            <Radio value="designer">Designer</Radio>
            <RadioField description="Team Manager">
                <Radio value="manager">Manager</Radio>
            </RadioField>
        </RadioGroup>
    );
}
```

##### Icon

Each radio can be customized with an icon or an icon list.

```tsx
import { IconList, Radio, RadioGroup, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <RadioGroup aria-label="roles">
            <Radio value="developer"><SparklesIcon /><Text>Developer</Text></Radio>
            <Radio value="designer">
                <Text>Designer</Text>
                <IconList>
                    <SparklesIcon /><SparklesIcon /><SparklesIcon />
                </IconList>
            </Radio>
        </RadioGroup>
    );
}
```

#### Best Practices

Radio buttons should:

* Always be used with an associated label component.

* Be part of a list of radio buttons that:

  * Include at least two or more choices.
  * Are used to have users select only one option.
  * Include mutually exclusive options–this means that each option must be independant from every other option in the list.
  * List options in a logical order.
  * Have a default option selected whenever possible.

##### Alignment

Radio button labels are positioned to the right of their inputs. As a grouping, they have to be laid out vertically.

##### Placement

Radio buttons are often used in forms. In a forms, they should be placed at least 24px below or before the next component. A space of 8px between each radio button in a grouping is necessary.

##### Overflow content

We recommend radio button labels being fewer than three words. If you are tight on space, consider rewording the label. Do not truncate the radio button label text with an ellipsis. Long labels may wrap to a second line, and this is preferable to truncation. Text should wrap beneath the radio button so the control and label are top aligned.

##### States

The radio button input allows for two states: unselected and selected. The default view of a radio button is having at least one radio button preselected. Only one radio should be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.

##### Grouping in a wrapper

When the Radio group is the only control in the container, or if you need to bring an intentional prominence to this control, we suggest to organize the Radio within a wrapper and to use the Medium size which will bring more scannability to the options.

#### Props

##### RadioGroup

| Prop               | Type                                                           | Default      | Description                                                                                                                                                                                                                               |
| ------------------ | -------------------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| listProps          | `RadioListProps`                                               |              | The props of the list element that wraps the Radio components.                                                                                                                                                                            |
| orientation        | `ResponsiveProp<Orientation>`                                  | "vertical"   | A RadioGroup can be displayed horizontally or vertically.                                                                                                                                                                                 |
| variant            | `InputGroupVariant`                                            | "borderless" | A RadioGroup has two variants: borderless and bordered.                                                                                                                                                                                   |
| isFluid            | `ResponsiveProp<boolean>`                                      | false        | If `true`, the RadioGroup will take all available width.                                                                                                                                                                                  |
| form               | `string`                                                       |              | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).              |
| style              | `StyleOrFunction<RadioGroupRenderProps>`                       |              | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                         |
| children           | `ChildrenOrFunction<RadioGroupRenderProps>`                    |              | The children of the component. A function may be provided to alter the children based on component state.                                                                                                                                 |
| validationBehavior | `"native" \| "aria"`                                           | 'native'     | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                            |
| name               | `string`                                                       |              | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                             |
| value              | `string \| null`                                               |              | The current value (controlled).                                                                                                                                                                                                           |
| defaultValue       | `string \| null`                                               |              | The default value (uncontrolled).                                                                                                                                                                                                         |
| isDisabled         | `boolean`                                                      |              | Whether the input is disabled.                                                                                                                                                                                                            |
| isReadOnly         | `boolean`                                                      |              | Whether the input can be selected but not changed by the user.                                                                                                                                                                            |
| isRequired         | `boolean`                                                      |              | Whether user input is required on the input before form submission.                                                                                                                                                                       |
| isInvalid          | `boolean`                                                      |              | Whether the input value is invalid.                                                                                                                                                                                                       |
| validate           | `((value: string \| null) => true \| ValidationError \| null)` |              | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead. |
| className          | `ClassNameOrFunction<RadioGroupRenderProps>`                   |              | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                        |
| dir                | `string`                                                       |              |                                                                                                                                                                                                                                           |
| lang               | `string`                                                       |              |                                                                                                                                                                                                                                           |
| inert              | `boolean`                                                      |              |                                                                                                                                                                                                                                           |
| translate          | `"yes" \| "no"`                                                |              |                                                                                                                                                                                                                                           |
| description        | `ReactNode`                                                    |              | The helper message of the field.                                                                                                                                                                                                          |
| errorMessage       | `ReactNode \| ((v: ValidationResult) => ReactNode)`            |              | The error message of the field.                                                                                                                                                                                                           |
| label              | `ReactNode`                                                    |              | The label of the field.                                                                                                                                                                                                                   |
| necessityIndicator | `NecessityIndicator`                                           |              | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                    |
| size               | `ResponsiveProp<FieldSize>`                                    | "md"         | A Field can vary in size.                                                                                                                                                                                                                 |
| contextualHelp     | `ReactNode`                                                    |              | A ContextualHelp element to place next to the label.                                                                                                                                                                                      |

###### Events

| Prop                        | Type                                          | Default | Description                                                     |
| --------------------------- | --------------------------------------------- | ------- | --------------------------------------------------------------- |
| onChange                    | `((value: string) => void)`                   |         | Handler that is called when the value changes.                  |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element receives focus.         |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element loses focus.            |
| onFocusChange               | `((isFocused: boolean) => void)`              |         | Handler that is called when the element's focus status changes. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`           |         |                                                                 |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`         |         |                                                                 |
| onScroll                    | `UIEventHandler<HTMLDivElement>`              |         |                                                                 |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`              |         |                                                                 |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`           |         |                                                                 |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`           |         |                                                                 |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`       |         |                                                                 |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`      |         |                                                                 |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop              | Type     | Default | Description                                                                                                         |
| ----------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id                | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label        | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby   | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby  | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details      | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| aria-errormessage | `string` |         | Identifies the element that provides an error message for the object.                                               |

##### Radio

| Prop       | Type                                    | Default | Description                                                                                                                                                                        |
| ---------- | --------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| size       | `ResponsiveProp<FieldSize>`             | "md"    | A radio can vary in size.                                                                                                                                                          |
| style      | `StyleOrFunction<RadioRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| children   | `ChildrenOrFunction<RadioRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| value      | `string`                                |         | The value of the radio button, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#Value).                          |
| isDisabled | `boolean`                               |         | Whether the radio button is disabled or not. Shows that a selection exists, but is not available in that circumstance.                                                             |
| autoFocus  | `boolean`                               |         | Whether the element should receive focus on render.                                                                                                                                |
| dir        | `string`                                |         |                                                                                                                                                                                    |
| lang       | `string`                                |         |                                                                                                                                                                                    |
| inert      | `boolean`                               |         |                                                                                                                                                                                    |
| translate  | `"yes" \| "no"`                         |         |                                                                                                                                                                                    |
| inputRef   | `RefObject<HTMLInputElement \| null>`   |         | A ref for the HTML input element.                                                                                                                                                  |
| className  | `ClassNameOrFunction<RadioRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element receives focus.                                                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element loses focus.                                                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`                          |         | Handler that is called when the element's focus status changes.                                                                                                                                           |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is pressed.                                                                                                                                                             |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is released.                                                                                                                                                            |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLLabelElement>`                   |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLLabelElement>`                        |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLLabelElement>`                        |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLLabelElement>`                     |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLLabelElement>`                 |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLLabelElement>`                |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

##### RadioGroup

Coming from Orbiter, you should be aware of the following changes:

* `required` has been renamed to `isRequired`.
* `onChange` signature has changed (no event are passed).
* `disabled` has been renamed to `isDisabled`.
* `autofocus` is not supported. You must use `autofocus` on the actual Radio.
* `fluid` has been renamed to `isFluid`.
* `reverse` is not supported, use `flex-direction` or `row-reverse` instead.
* The default orientation is now vertical instead of horizontal.
* `validationState` has been removed. Use `isInvalid` instead. There is no `isValid`.
* `wrap` has been removed. If `horizontal`, radios will wrap.
* There is no `align` prop. If needed, the styled system can be used.
* `inline` prop is not available.

##### Radio

Coming from Orbiter, you should be aware of the following changes:

* The `Counter` component is no longer allowed as a specialized slot.
* Values are not auto-generated when missed.
* `onChange` is only supported on `RadioGroup`, not on `Radio`.
* `onValueChange` has been deleted, use `onChange` instead.
* `checked` has been renamed to `isSelected`.
* `disabled` has been renamed to `isDisabled`.
* `required` has been renamed to `isRequired`.
* `reverse` is not supported, use `flex-direction` or `row-reverse` instead.
* `validationState` has been removed. Yse `isInvalid` instead. There is no `isValid`.
* `value` is required.

### RangeCalendar

A range calendar displays one or more date grids and allows users to select a contiguous range of dates.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/calendar/src/RangeCalendar.tsx>

```tsx
import { RangeCalendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <RangeCalendar aria-label="Trip dates" />
    );
}
```

#### Usage

##### Value

A RangeCalendar has no selection by default. An initial, uncontrolled value can be provided to the RangeCalendar using the `defaultValue` prop. Alternatively, a controlled value can be provided using the `value` prop.

Date values are provided using objects in the [@internationalized/date](https://react-spectrum.adobe.com/internationalized/date/index.html) package. This library handles correct international date manipulation across calendars, time zones, and other localization concerns.

RangeCalendar supports values with both date and time components, but only allows users to modify the date. By default, RangeCalendar will emit `CalendarDate` objects in the onChange event, but if a `CalendarDateTime` or `ZonedDateTime` object is passed as the value or defaultValue, values of that type will be emitted, changing only the date and preserving the time components.

```tsx
import { Inline, RangeCalendar, type RangeValue } from "@hopper-ui/components";
import { type DateValue, parseDate } from "@internationalized/date";
import { useState } from "react";

export default function Example() {
    const [value, setValue] = useState<RangeValue<DateValue>>({
        start: parseDate("2020-02-03"),
        end: parseDate("2020-02-12")
    });

    return (
        <Inline>
            <RangeCalendar
                aria-label="Trip dates (uncontrolled)"
                defaultValue={{
                    start: parseDate("2020-02-03"),
                    end: parseDate("2020-02-10")
                }}
            />
            <RangeCalendar
                aria-label="Trip dates (controlled)"
                value={value}
                onChange={setValue}
            />
        </Inline>
    );
}
```

##### Controlled

A range calendar can handle value state in controlled mode.

```tsx
import { Paragraph, RangeCalendar, type RangeValue, Stack } from "@hopper-ui/components";
import { type DateValue, getLocalTimeZone, parseDate } from "@internationalized/date";
import { useState } from "react";
import { useDateFormatter } from "react-aria";

export default function Example() {
    const [range, setRange] = useState<RangeValue<DateValue>>({
        start: parseDate("2020-07-03"),
        end: parseDate("2020-07-10")
    });
    const formatter = useDateFormatter({ dateStyle: "full" });

    return (
        <Stack>
            <RangeCalendar
                aria-label="Trip dates"
                value={range}
                onChange={setRange}
            />
            <Paragraph>
                Selected date: {formatter.formatRange(
                    range.start.toDate(getLocalTimeZone()),
                    range.end.toDate(getLocalTimeZone())
                )}
            </Paragraph>
        </Stack>
    );
}
```

##### Multi-month

Multiple CalendarGrid elements can be rendered to show multiple months at once. The `visibleMonths` prop should be provided to the Calendar component to specify how many months are visible.

```tsx
import { RangeCalendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <RangeCalendar aria-label="Trip dates" visibleMonths={3} />
    );
}
```

###### Page Behavior

The `pageBehavior` prop allows you to control how the calendar navigates between months. By default, the calendar will navigate by `visibleMonths`, but by setting `pageBehavior` to `single`, pagination will be by one month.

```tsx
import { RangeCalendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <RangeCalendar aria-label="Trip dates" visibleMonths={3} pageBehavior="single" />
    );
}
```

###### Fixed weeks

The `isFixedWeeks` prop allows you to control whether the calendar displays fixed weeks. By default, the calendar will display variable weeks, but by setting `isFixedWeeks` to true, all months will be displayed with 6 weeks. This ensures that the height of the calendar does not change when navigating between months.

```tsx
import { RangeCalendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <RangeCalendar aria-label="Trip dates" isFixedWeeks />
    );
}
```

##### Validation

###### Min and Max

The `minValue` and `maxValue` props can be used to limit the range of dates that a user can select.

```tsx
import { RangeCalendar } from "@hopper-ui/components";
import { getLocalTimeZone, today } from "@internationalized/date";

export default function Example() {
    return (
        <RangeCalendar
            aria-label="Trip dates"
            minValue={today(getLocalTimeZone())}
        />
    );
}
```

###### Unavailable Dates

RangeCalendar supports marking certain dates as unavailable. These dates remain focusable with the keyboard so that navigation is consistent, but cannot be selected by the user. In this example, they are displayed in red. The `isDateUnavailable` prop accepts a callback that is called to evaluate whether each visible date is unavailable.

Note that by default, users may not select non-contiguous ranges, i.e. ranges that contain unavailable dates within them. Once a start date is selected, enabled dates will be restricted to subsequent dates until an unavailable date is hit. See [below](#non-contiguous-ranges) for an example of how to allow non-contiguous ranges.

This example includes multiple unavailable date ranges, e.g. dates when a rental house is not available. The `minValue` prop is also used to prevent selecting dates before today.

```tsx
import { RangeCalendar } from "@hopper-ui/components";
import { type DateValue, getLocalTimeZone, today } from "@internationalized/date";

export default function Example() {
    const now = today(getLocalTimeZone());
    const disabledRanges = [
        [now, now.add({ days: 5 })],
        [now.add({ days: 14 }), now.add({ days: 16 })],
        [now.add({ days: 23 }), now.add({ days: 24 })]
    ];

    const isDateUnavailable = (date: DateValue) =>
        disabledRanges.some(interval => date.compare(interval[0]) >= 0 && date.compare(interval[1]) <= 0);

    return (
        <RangeCalendar aria-label="Trip dates" minValue={today(getLocalTimeZone())} isDateUnavailable={isDateUnavailable} />
    );
}
```

###### Non-contiguous ranges

The `allowsNonContiguousRanges` prop enables a range to be selected even if there are unavailable dates in the middle. The value emitted in the onChange event will still be a single range with a start and end property, but unavailable dates will not be displayed as selected. It is up to applications to split the full selected range into multiple as needed for business logic.

This example prevents selecting weekends, but allows selecting ranges that span multiple weeks.

```tsx
import { RangeCalendar, useLocale } from "@hopper-ui/components";
import { isWeekend } from "@internationalized/date";

export default function Example() {
    const { locale } = useLocale();

    return (
        <RangeCalendar
            aria-label="Trip dates"
            isDateUnavailable={date => isWeekend(date, locale)}
            allowsNonContiguousRanges
        />
    );
}
```

###### Error message

RangeCalendar tries to avoid allowing the user to select invalid dates in the first place. However, if according to application logic a selected date range is invalid, the `isInvalid` prop can be set. This alerts assistive technology users that the selection is invalid, and can be used for styling purposes as well. In addition, the `errorMessage` slot may be used to help the user fix the issue.

This example validates that the selected date range is a maximum of 1 week in duration.

```tsx
import { RangeCalendar, type RangeValue } from "@hopper-ui/components";
import { type DateValue, getLocalTimeZone, today } from "@internationalized/date";
import { useState } from "react";

export default function Example() {
    const [range, setRange] = useState<RangeValue<DateValue>>({
        start: today(getLocalTimeZone()),
        end: today(getLocalTimeZone()).add({
            weeks: 1,
            days: 3
        })
    });

    const isInvalid = range.end.compare(range.start) > 7;

    return (
        <RangeCalendar
            aria-label="Trip dates"
            value={range}
            onChange={setRange}
            isInvalid={isInvalid}
            errorMessage="Maximum stay duration is 1 week"
        />
    );
}
```

##### Disabled

A range calendar can be disabled.

```tsx
import { RangeCalendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <RangeCalendar aria-label="Trip dates" isDisabled />
    );
}
```

##### Read-only

A range calendar can be read-only.

```tsx
import { RangeCalendar } from "@hopper-ui/components";
import { parseDate } from "@internationalized/date";

export default function Example() {
    return (
        <RangeCalendar
            defaultValue={{
                start: parseDate("2020-02-03"),
                end: parseDate("2020-02-10")
            }}
            aria-label="Trip dates"
            isReadOnly
        />
    );
}
```

##### Custom First Day of the Week

By default, the first day of the week is automatically set based on the current locale. This can be changed by setting the `firstDayOfWeek` prop to "sun", "mon", "tue", "wed", "thu", "fri", or "sat".

```tsx
import { RangeCalendar } from "@hopper-ui/components";

export default function Example() {
    return (
        <RangeCalendar aria-label="Trip dates" firstDayOfWeek="mon" />
    );
}
```

#### Props

| Prop                      | Type                                                          | Default  | Description                                                                                                                                                                                                                                      |
| ------------------------- | ------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| errorMessage              | `ReactNode`                                                   |          | The error message to display when the range calendar is invalid.                                                                                                                                                                                 |
| visibleMonths             | `number`                                                      | 1        | The number of months to display at once.                                                                                                                                                                                                         |
| isFixedWeeks              | `boolean`                                                     | false    | Whether the calendar should always display 6 weeks.                                                                                                                                                                                              |
| allowsNonContiguousRanges | `boolean`                                                     |          | When combined with `isDateUnavailable`, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.                                                                                                     |
| minValue                  | `DateValue \| null`                                           |          | The minimum allowed date that a user may select.                                                                                                                                                                                                 |
| maxValue                  | `DateValue \| null`                                           |          | The maximum allowed date that a user may select.                                                                                                                                                                                                 |
| isDateUnavailable         | `((date: DateValue) => boolean)`                              |          | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.                                                                                                                                         |
| isDisabled                | `boolean`                                                     | false    | Whether the calendar is disabled.                                                                                                                                                                                                                |
| isReadOnly                | `boolean`                                                     | false    | Whether the calendar value is immutable.                                                                                                                                                                                                         |
| autoFocus                 | `boolean`                                                     | false    | Whether to automatically focus the calendar when it mounts.                                                                                                                                                                                      |
| focusedValue              | `DateValue \| null`                                           |          | Controls the currently focused date within the calendar.                                                                                                                                                                                         |
| defaultFocusedValue       | `DateValue \| null`                                           |          | The date that is focused when the calendar first mounts (uncountrolled).                                                                                                                                                                         |
| isInvalid                 | `boolean`                                                     |          | Whether the current selection is invalid according to application logic.                                                                                                                                                                         |
| pageBehavior              | `PageBehavior`                                                | visible  | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.                                                                                              |
| firstDayOfWeek            | `"sun" \| "mon" \| "tue" \| "wed" \| "thu" \| "fri" \| "sat"` |          | The day that starts the week.                                                                                                                                                                                                                    |
| selectionAlignment        | `"center" \| "start" \| "end"`                                | 'center' | Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection.                                                                                                        |
| value                     | `RangeValue<DateValue> \| null`                               |          | The current value (controlled).                                                                                                                                                                                                                  |
| defaultValue              | `RangeValue<DateValue> \| null`                               |          | The default value (uncontrolled).                                                                                                                                                                                                                |
| createCalendar            | `((identifier: CalendarIdentifier) => Calendar)`              |          | A function to create a new [Calendar](https://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the `createCalendar` function from `@internationalized/date` will be used. |
| style                     | `CSSProperties`                                               |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.                                                                                                                                          |
| className                 | `string`                                                      |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.                                                                                                                                         |
| children                  | `ReactNode`                                                   |          | The children of the component.                                                                                                                                                                                                                   |

###### Events

| Prop          | Type                                       | Default | Description                                           |
| ------------- | ------------------------------------------ | ------- | ----------------------------------------------------- |
| onFocusChange | `((date: CalendarDate) => void)`           |         | Handler that is called when the focused date changes. |
| onChange      | `((value: RangeValue<DateValue>) => void)` |         | Handler that is called when the value changes.        |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

### RichIcon

A rich icon component is used to render a rich custom icon.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/icons/src/RichIcon.tsx>

```tsx
import { createRichIcon } from "@hopper-ui/icons";

import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts";

const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon");

export default function Example() {
    return (
        <CustomRichIcon />
    );
}
```

Similar to icons, RichIcons are vibrant and colorful. Perfect for decorative purposes or drawing attention to specific elements.

Hopper provides multiple ways to use rich icons in your project:

* Using the [Workleap icon library](/icons/overview/introduction.md)
* [Creating your own icons](#creating-your-custom-rich-icons)

#### Creating your custom rich icons

To use an rich icon component to create custom rich icons you must first import your SVG icon as a component by using [`@svgr/webpack`](https://react-svgr.com/docs/getting-started/).

Hopper provides two methods for creating your custom icons:

* Using the `createRichIcon` function (recommended)
* Using the `RichIcon` component

Both `RichIcon` and `createRichIcon` enable you to style the icon using the styled system.

##### Using the createRichIcon function

The `createRichIcon` function is a convenience wrapper around the process of generating rich icons with `RichIcon`, allowing you to achieve the same functionality with less effort.

```tsx
import CustomRichIcon24 from "./path/to/custom-rich-icon-24.svg";
import CustomRichIcon32 from "./path/to/custom-rich-icon-32.svg";
import CustomRichIcon40 from "./path/to/custom-rich-icon-40.svg";
import { createRichIcon } from "@hopper-ui/icons";

const CustomRichIcon = createRichIcon(CustomRichIcon24, CustomRichIcon32, CustomRichIcon40, "CustomIcon")
```

##### Using the RichIcon component

```tsx
import CustomRichIcon24 from "./path/to/custom-icon-24.svg"
import CustomRichIcon32 from "./path/to/custom-icon-32.svg"
import CustomRichIcon40 from "./path/to/custom-icon-40.svg"
import { Icon, type CreatedRichIconProps } from "@hopper-ui/icons";

function CustomRichIcon(props: CreatedRichIconProps) {
  return (
    <RichIcon
        src24={CustomIcon24}
        src32={CustomRichIcon24}
        src40={CustomRichIcon32}
        {...props} />
  )
}
```

##### Sizes

A rich icon can vary in size. When used inside another component, it'll generally be sized automatically. If you use a standalone icon, you can use the size prop to control the sizing.

```tsx
import { Inline } from "@hopper-ui/components";
import { createRichIcon } from "@hopper-ui/icons";

import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts";

const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon");

export default function Example() {
    return (
        <Inline>
            <CustomRichIcon size="md" />
            <CustomRichIcon size="lg" />
            <CustomRichIcon size="xl" />
        </Inline>
    );
}
```

##### Styling

The color of the rich icon can be changed using the `fill` prop. All the styled system props are also available.

```tsx
import { createRichIcon } from "@hopper-ui/icons";

import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts";

const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon");

export default function Example() {
    return (
        <CustomRichIcon fill="primary" />
    );
}
```

##### Variants

The color of the rich icon can be changed using the `variant` prop.

```tsx
import { Inline, Stack } from "@hopper-ui/components";
import { createRichIcon } from "@hopper-ui/icons";

import { SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40 } from "../src/index.ts";

const CustomRichIcon = createRichIcon(SparklesRichIcon24, SparklesRichIcon32, SparklesRichIcon40, "SparklesRichIcon");

export default function Example() {
    return (
        <Inline alignY="flex-start">
            <Stack>
                <CustomRichIcon variant="option1" />
                <CustomRichIcon variant="option2" />
                <CustomRichIcon variant="option3" />
                <CustomRichIcon variant="option4" />
                <CustomRichIcon variant="option5" />
                <CustomRichIcon variant="option6" />
                <CustomRichIcon variant="option7" />
                <CustomRichIcon variant="option8" />
            </Stack>
            <Stack>
                <CustomRichIcon variant="success" />
                <CustomRichIcon variant="warning" />
                <CustomRichIcon variant="danger" />
                <CustomRichIcon variant="information" />
                <CustomRichIcon variant="upsell" />
            </Stack>
        </Inline>
    );
}
```

#### Props

| Prop      | Type                                                                               | Default   | Description                                 |
| --------- | ---------------------------------------------------------------------------------- | --------- | ------------------------------------------- |
| style     | `CSSProperties`                                                                    |           |                                             |
| className | `string`                                                                           |           |                                             |
| variant   | `RichIconVariant`                                                                  | "option7" | The visual style of the icon.               |
| size      | `ResponsiveProp<"md" \| "lg" \| "xl">`                                             | "lg"      | The size of the icon.                       |
| src24     | `ElementType<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>` |           | The source of the icon with a size of 24px. |
| src32     | `ElementType<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>` |           | The source of the icon with a size of 32px. |
| src40     | `ElementType<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>` |           | The source of the icon with a size of 40px. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

### SearchField

A search field is a specialized text input allowing the user to perform a search.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/inputs/src/SearchField.tsx>

```tsx
import { SearchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SearchField placeholder="New York, NY" label="Filter by location" />
    );
}
```

#### Usage

##### Disabled

A search field in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.

```tsx
import { SearchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SearchField placeholder="New York, NY" isDisabled label="Filter by location" />
    );
}
```

##### ReadOnly

The `isReadOnly` prop makes the SearchField's text content immutable. Unlike `isDisabled`, the search field remains focusable and the contents can still be copied. See [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.

```tsx
import { SearchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SearchField placeholder="New York, NY" isReadOnly label="Filter by location" />
    );
}
```

##### Error

A search field can be displayed in an error state to indicate that the user input is invalid.

```tsx
import { SearchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SearchField placeholder="New York, NY" isInvalid label="Filter by location" errorMessage="No results were found" />
    );
}
```

##### Hide Clear Button

A search field can hide its clear button.

```tsx
import { SearchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SearchField placeholder="New York, NY" isClearable={false} label="Filter by location" />
    );
}
```

##### Sizes

Search fields have multiple sizes to choose from.

```tsx
import { SearchField, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <SearchField label="Filter by location" placeholder="New York, NY" size="sm" />
            <SearchField label="Filter by location" placeholder="New York, NY" />
        </Stack>
    );
}
```

##### Labeling

If a visible label isn't specified, an `aria-label` must be provided to the search field for accessibility. If the field is labeled by a separate element, an `aria-labelledby` prop must be provided using the ID of the labeling element instead.

```tsx
import { SearchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SearchField placeholder="New York, NY" aria-label="Filter by location" />
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a SearchField.

```tsx
import { ContextualHelp, SearchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SearchField
            placeholder="New York, NY"
            label="Filter by location"
            contextualHelp={<ContextualHelp>There's tons of locations, search for one!</ContextualHelp>}
        />
    );
}
```

##### Description

A search field with a helper message.

```tsx
import { SearchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SearchField placeholder="New York, NY" label="Filter by location" description="Search by city, state, or postal code" />
    );
}
```

##### Debounce

The `useDebounce` hook can be used to debounce user input in a search field.

```tsx
import { Paragraph, SearchField, Stack, useDebounce } from "@hopper-ui/components";
import { useEffect, useState } from "react";

export default function Example() {
    const [inputValue, setInputValue] = useState("");
    const [debouncedQuery, setDebouncedQuery] = useDebounce("", 400);
    const [results, setResults] = useState<string[]>([]);

    const handleInputChange = (value: string) => {
        setInputValue(value);
        setDebouncedQuery(value);
    };

    useEffect(() => {
        if (debouncedQuery.trim()) {
            // Simulate search - only runs after 400ms of no typing
            const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"];
            const filtered = fruits.filter(fruit =>
                fruit.toLowerCase().includes(debouncedQuery.toLowerCase())
            );
            setResults(filtered);
        } else {
            setResults([]);
        }
    }, [debouncedQuery]);

    return (
        <Stack>
            <SearchField
                value={inputValue}
                onChange={handleInputChange}
                placeholder="Search fruits..."
                label="Search"
            />
            <Paragraph>Results: {results.join(", ")}</Paragraph>
        </Stack>
    );
}
```

#### Best Practices

* Be clearly labeled so it's obvious to users what they should enter into the field.
* Be labeled as “Optional” when you need to request input that's not required. View the Form pattern for more details on this.
* Only ask for information that's really needed.
* Validate input as soon as users have finished interacting with a field, but not before.

#### Props

| Prop               | Type                                                                                  | Default  | Description                                                                                                                                                                                                                                      |
| ------------------ | ------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| isClearable        | `boolean`                                                                             | true     | Whether the SearchField is clearable.                                                                                                                                                                                                            |
| placeholder        | `string`                                                                              |          | The placeholder text when the SearchField is empty.                                                                                                                                                                                              |
| isFluid            | `ResponsiveProp<boolean>`                                                             | false    | If `true`, the SearchField will take all available width.                                                                                                                                                                                        |
| icon               | `ReactNode`                                                                           |          | An icon to display at the start of the input.                                                                                                                                                                                                    |
| inputRef           | `MutableRefObject<HTMLInputElement \| null>`                                          |          | A ref for the HTML input element.                                                                                                                                                                                                                |
| inputProps         | `Partial<InputProps>`                                                                 |          | The props for the Input.                                                                                                                                                                                                                         |
| inputGroupProps    | `Partial<InputGroupProps>`                                                            |          | The props for the InputGroup.                                                                                                                                                                                                                    |
| clearButtonProps   | `Partial<ClearButtonProps>`                                                           |          | The props for the EmbeddedButton.                                                                                                                                                                                                                |
| form               | `string`                                                                              |          | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).                     |
| style              | `StyleOrFunction<SearchFieldRenderProps>`                                             |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                |
| pattern            | `string`                                                                              |          | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).                                                                                 |
| validationBehavior | `"native" \| "aria"`                                                                  | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                   |
| type               | `"search" \| "text" \| (string & {}) \| "url" \| "tel" \| "email" \| "password"`      | 'search' | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).                                                                                                                         |
| enterKeyHint       | `"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`             |          | An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).                                    |
| isDisabled         | `boolean`                                                                             |          | Whether the input is disabled.                                                                                                                                                                                                                   |
| isReadOnly         | `boolean`                                                                             |          | Whether the input can be selected but not changed by the user.                                                                                                                                                                                   |
| isRequired         | `boolean`                                                                             |          | Whether user input is required on the input before form submission.                                                                                                                                                                              |
| isInvalid          | `boolean`                                                                             |          | Whether the input value is invalid.                                                                                                                                                                                                              |
| validate           | `((value: string) => true \| ValidationError \| null)`                                |          | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.        |
| autoFocus          | `boolean`                                                                             |          | Whether the element should receive focus on render.                                                                                                                                                                                              |
| value              | `string`                                                                              |          | The current value (controlled).                                                                                                                                                                                                                  |
| defaultValue       | `string`                                                                              |          | The default value (uncontrolled).                                                                                                                                                                                                                |
| autoComplete       | `string`                                                                              |          | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).                                                            |
| maxLength          | `number`                                                                              |          | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).                                                                                        |
| minLength          | `number`                                                                              |          | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).                                                                                         |
| inputMode          | `"search" \| "text" \| "none" \| "url" \| "tel" \| "email" \| "numeric" \| "decimal"` |          | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).                             |
| autoCorrect        | `string`                                                                              |          | An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete). |
| spellCheck         | `string`                                                                              |          | An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).                                                          |
| name               | `string`                                                                              |          | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                                    |
| className          | `ClassNameOrFunction<SearchFieldRenderProps>`                                         |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                               |
| dir                | `string`                                                                              |          |                                                                                                                                                                                                                                                  |
| lang               | `string`                                                                              |          |                                                                                                                                                                                                                                                  |
| inert              | `boolean`                                                                             |          |                                                                                                                                                                                                                                                  |
| translate          | `"yes" \| "no"`                                                                       |          |                                                                                                                                                                                                                                                  |
| description        | `ReactNode`                                                                           |          | The helper message of the field.                                                                                                                                                                                                                 |
| errorMessage       | `ReactNode \| ((v: ValidationResult) => ReactNode)`                                   |          | The error message of the field.                                                                                                                                                                                                                  |
| label              | `ReactNode`                                                                           |          | The label of the field.                                                                                                                                                                                                                          |
| necessityIndicator | `NecessityIndicator`                                                                  |          | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                           |
| size               | `ResponsiveProp<FieldSize>`                                                           | "md"     | A Field can vary in size.                                                                                                                                                                                                                        |
| contextualHelp     | `ReactNode`                                                                           |          | A ContextualHelp element to place next to the label.                                                                                                                                                                                             |

###### Events

| Prop                        | Type                                                   | Default | Description                                                                                                                                                                                                |
| --------------------------- | ------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onFocus                     | `((e: FocusEvent<HTMLInputElement, Element>) => void)` |         | Handler that is called when the element receives focus.                                                                                                                                                    |
| onBlur                      | `((e: FocusEvent<HTMLInputElement, Element>) => void)` |         | Handler that is called when the element loses focus.                                                                                                                                                       |
| onFocusChange               | `((isFocused: boolean) => void)`                       |         | Handler that is called when the element's focus status changes.                                                                                                                                            |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                         |         | Handler that is called when a key is pressed.                                                                                                                                                              |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                         |         | Handler that is called when a key is released.                                                                                                                                                             |
| onChange                    | `((value: string) => void)`                            |         | Handler that is called when the value changes.                                                                                                                                                             |
| onCopy                      | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).                                                                          |
| onCut                       | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).                                                                             |
| onPaste                     | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).                                                                         |
| onCompositionStart          | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).                   |
| onCompositionEnd            | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| onCompositionUpdate         | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).              |
| onSelect                    | `ReactEventHandler<HTMLInputElement>`                  |         | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).                                                               |
| onBeforeInput               | `FormEventHandler<HTMLInputElement>`                   |         | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).                                            |
| onInput                     | `FormEventHandler<HTMLInputElement>`                   |         | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).                                                              |
| onSubmit                    | `((value: string) => void)`                            |         | Handler that is called when the SearchField is submitted.                                                                                                                                                  |
| onClear                     | `(() => void)`                                         |         | Handler that is called when the clear button is pressed.                                                                                                                                                   |
| onClick                     | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                            |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                            |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                  | Type                                                                                  | Default | Description                                                                                                                                                                                                                                                                                   |
| --------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-activedescendant | `string`                                                                              |         | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.                                                                                                                                                                              |
| aria-autocomplete     | `"none" \| "inline" \| "list" \| "both"`                                              |         | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.                                                                                                |
| aria-haspopup         | `boolean \| "dialog" \| "menu" \| "grid" \| "false" \| "true" \| "listbox" \| "tree"` |         | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.                                                                                                                                                                |
| aria-controls         | `string`                                                                              |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| aria-label            | `string`                                                                              |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby       | `string`                                                                              |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby      | `string`                                                                              |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details          | `string`                                                                              |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |
| excludeFromTabOrder   | `boolean`                                                                             |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id                    | `string`                                                                              |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).                                                                                                                                                                           |
| aria-errormessage     | `string`                                                                              |         | Identifies the element that provides an error message for the object.                                                                                                                                                                                                                         |

#### Migration Notes

* Boolean props are now prefixed by `is`.
* There is no longer a loading state.
* `icon` prop has been renamed to `prefix`.
* Button props have been removed. To add a clear button, use the `isClearable` prop. For a more complex use case, create your own input using InputGroup.
* `wrapperProps` no longer exists.
* `validationState` has been changed to `isInvalid`.

### SegmentedControl

The SegmentedControl component presents a horizontal row of options or actions that are contextually or conceptually related. It allows users to select a single option at a time.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/segmented-control/src/SegmentedControl.tsx>

```tsx
import { SegmentedControl, SegmentedControlItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <SegmentedControl aria-label="Time granularity">
            <SegmentedControlItem id="day">Day</SegmentedControlItem>
            <SegmentedControlItem id="week">Week</SegmentedControlItem>
            <SegmentedControlItem id="month">Month</SegmentedControlItem>
            <SegmentedControlItem id="year">Year</SegmentedControlItem>
        </SegmentedControl>
    );
}
```

#### Usage

##### Selected

A segmented control can have an item initially selected, by using `defaultSelectedKey` for uncontrolled or `selectedKey` for controlled. Here's an example where one item is selected using defaultSelectedKey.

```tsx
import { SegmentedControl, SegmentedControlItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <SegmentedControl aria-label="Time granularity" defaultSelectedKey="day">
            <SegmentedControlItem id="day">Day</SegmentedControlItem>
            <SegmentedControlItem id="week">Week</SegmentedControlItem>
            <SegmentedControlItem id="month">Month</SegmentedControlItem>
            <SegmentedControlItem id="year">Year</SegmentedControlItem>
        </SegmentedControl>
    );
}
```

##### Size

A segmented control supports multiple sizes. Here's an example demonstrating the medium size option:

```tsx
import { SegmentedControl, SegmentedControlItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <SegmentedControl aria-label="Time granularity" defaultSelectedKey="day" size="md">
            <SegmentedControlItem id="day">Day</SegmentedControlItem>
            <SegmentedControlItem id="week">Week</SegmentedControlItem>
            <SegmentedControlItem id="month">Month</SegmentedControlItem>
            <SegmentedControlItem id="year">Year</SegmentedControlItem>
        </SegmentedControl>
    );
}
```

##### Icon only

Items within a segmented control can contain only icons. An accessible name must be provided through [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) prop. See also [WCAG practices](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html).

```tsx
import { SegmentedControl, SegmentedControlItem } from "@hopper-ui/components";
import { OrderedListIcon, UnorderedListIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <SegmentedControl aria-label="List ordering">
            <SegmentedControlItem id="unordered">
                <UnorderedListIcon aria-label="unordered" />
            </SegmentedControlItem>
            <SegmentedControlItem id="ordered">
                <OrderedListIcon aria-label="ordered" />
            </SegmentedControlItem>
        </SegmentedControl>
    );
}
```

##### Icon

A segmented control can contain items with icons, starting or ending. **Non standard** starting icons can be provided to handle special cases. However, think twice before adding start icons, end icons should be your go to.

```tsx
import { SegmentedControl, SegmentedControlItem, Text } from "@hopper-ui/components";
import { OrderedListIcon, UnorderedListIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <SegmentedControl aria-label="List ordering">
            <SegmentedControlItem id="unordered">
                <UnorderedListIcon slot="start-icon" />
                <Text>Unordered</Text>
            </SegmentedControlItem>
            <SegmentedControlItem id="ordered">
                <Text>Ordered</Text>
                <OrderedListIcon />
            </SegmentedControlItem>
        </SegmentedControl>
    );
}
```

##### Justified

A segmented control can have items with similar widths.

```tsx
import { SegmentedControl, SegmentedControlItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <SegmentedControl UNSAFE_width="400px" isJustified aria-label="Time granularity">
            <SegmentedControlItem id="day">Day</SegmentedControlItem>
            <SegmentedControlItem id="week">Week</SegmentedControlItem>
            <SegmentedControlItem id="month">Month</SegmentedControlItem>
            <SegmentedControlItem id="year">Year</SegmentedControlItem>
        </SegmentedControl>
    );
}
```

##### Controlled

A segmented control can have a controlled selected value. In this example, it shows how it is possible to select an option.

```tsx
import { SegmentedControl, SegmentedControlItem, type Key } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selectedKey, setSelectedKey] = useState<Key>("day");

    const handleSelectionChange = (key: Key) => {
        if (selectedKey === key) {
            return;
        }

        setSelectedKey(key);
    };

    return (
        <SegmentedControl
            aria-label="Time granularity"
            selectedKey={selectedKey}
            onSelectionChange={handleSelectionChange}
        >
            <SegmentedControlItem id="day">Day</SegmentedControlItem>
            <SegmentedControlItem id="week">Week</SegmentedControlItem>
            <SegmentedControlItem id="month">Month</SegmentedControlItem>
            <SegmentedControlItem id="year">Year</SegmentedControlItem>
        </SegmentedControl>
    );
}
```

#### Best Practices

Segmented control should follow the same guidelines as the Button component. Plus, they should:

* Group together calls to action that have a relationship.
* Be used with consideration that too many calls to action can cause users to be unsure of what to do next.
* Be thoughtful about how multiple calls to action will look on smaller screens.

#### Props

##### SegmentedControl

| Prop               | Type                                       | Default | Description                                                                                              |
| ------------------ | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------- |
| isDisabled         | `boolean`                                  |         | Whether the segmented control is disabled.                                                               |
| isJustified        | `boolean`                                  |         | Whether the items should divide the container width equally.                                             |
| selectedKey        | `Key`                                      |         | The id of the currently selected item (controlled).                                                      |
| defaultSelectedKey | `Key`                                      |         | The id of the initial selected item (uncontrolled).                                                      |
| size               | `ResponsiveProp<SegmentedControlItemSize>` | "sm"    | The size of the controls. \*                                                                             |
| style              | `CSSProperties`                            |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children           | `ReactNode`                                |         | The children of the component.                                                                           |
| className          | `string`                                   |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Events

| Prop              | Type                  | Default | Description                                        |
| ----------------- | --------------------- | ------- | -------------------------------------------------- |
| onSelectionChange | `((id: Key) => void)` |         | Handler that is called when the selection changes. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

##### SegmentedControlItem

| Prop       | Type                                       | Default | Description                                                                                              |
| ---------- | ------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------- |
| id         | `Key`                                      |         | The id of the item, matching the value used in SegmentedControl's `selectedKey` prop.                    |
| isDisabled | `boolean`                                  |         | Whether the item is disabled or not.                                                                     |
| size       | `ResponsiveProp<SegmentedControlItemSize>` | "sm"    | The size of the item. \*                                                                                 |
| style      | `CSSProperties`                            |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |
| children   | `ReactNode`                                |         | The children of the component.                                                                           |
| className  | `string`                                   |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

### Select

A select displays a collapsible list of options from which the user can select one.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/select/src/Select.tsx>

The select component collects user-provided information from a list of options. Selects are usually used in forms where a user submits data and chooses one option from a list. Use the select component inside a form where users are selecting from a list of option and submitting data.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select label="Roles">
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Select>
    <SelectItem> /* (Required) The items of the select */
        <Avatar /> /* (Optional) An avatar for the item */
        <Text /> /* (Optional) The text content of the item, required if using another element */
        <Text slot="description" /> /* (Optional) A description for the item */
        <Badge /> /* (Optional) A badge for the item */
        <Icon /> /* (Optional) An icon for the item */
    </SelectItem>
    <SelectSection> /* (Optional) A section of select items */
        <Header /> /* (Optional) A header for the section */
        <SelectItem /> /* (Required) An item in the SelectSection */
    </SelectSection>
</Select>
```

##### Composed Components

A `Select` uses the following components:

| Component | Description                                                                                                                                        |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Avatar    | Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available. |
| Badge     | A badge is used to bring attention to an element.                                                                                                  |
| Header    | A placeholder for an header section.                                                                                                               |
| Icon      | An icon component is used to render a custom icon.                                                                                                 |
| Text      | A text component is a primitive component matching Hopper's typography type scale.                                                                 |

#### Usage

##### Disabled

A select in a disabled state shows that it exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select
            isDisabled
            label="Roles"
        >
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

##### Disabled Item

A select with a disabled item.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select
            disabledKeys={["developer"]}
            aria-label="list of options"
        >
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

##### Error

A select can be displayed in an error state to indicate that the selection is invalid.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select
            isInvalid
            label="Roles"
            errorMessage="This field is required"
        >
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

##### Sizes

A select has multiple sizes to choose from. The select menu also changes size based on the size of the select.

```tsx
import { Select, SelectItem, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <Select label="Roles">
                <SelectItem id="designer">Designer</SelectItem>
                <SelectItem id="developer">Developer</SelectItem>
                <SelectItem id="manager">Manager</SelectItem>
            </Select>
            <Select size="md" label="Roles">
                <SelectItem id="designer">Designer</SelectItem>
                <SelectItem id="developer">Developer</SelectItem>
                <SelectItem id="manager">Manager</SelectItem>
            </Select>
        </Stack>
    );
}
```

##### Labeling

If a visible label isn't specified, an `aria-label` must be provided to the select for accessibility. If the field is labeled by a separate element, an `aria-labelledby` prop must be provided using the ID of the labeling element instead.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select aria-label="Roles">
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

##### Icon Prefix

An icon can be displayed at the start of the select trigger.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";
import { OrgChartIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Select
            prefix={<OrgChartIcon />}
            label="Roles"
        >
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

##### Text Prefix

A short text can be displayed at the start of the select trigger.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select
            prefix="Operations"
            label="Roles"
        >
            <SelectItem id="project-coordinator">Project Coordinator</SelectItem>
            <SelectItem id="qa-specialist">QA Specialist</SelectItem>
            <SelectItem id="system-administrator">System Administrator</SelectItem>
        </Select>
    );
}
```

##### Fluid

A select can take the width of its container.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select
            isFluid
            label="Roles"
        >
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

##### Custom Value

A select's trigger value can be customized using the `renderValue` function to allow other elements such as an avatar or icon inside the trigger value.

```tsx
import { Avatar, Select, SelectItem, Text, type ValueRenderProps } from "@hopper-ui/components";

import { users, type User } from "./data.ts";

const renderValue = ({ defaultChildren, selectedItem }: ValueRenderProps<User>) => {
    if (selectedItem) {
        const { name, avatar } = selectedItem;

        return (
            <>
                <Avatar name={name} src={avatar} />
                <Text>{name}</Text>
            </>
        );
    }

    return defaultChildren;
};

export default function Example() {
    const [firstUser] = users;

    return (
        <Select
            renderValue={renderValue}
            defaultValue={firstUser.id}
            items={users}
            label="Users"
        >
            {({ id, name, avatar, role }) => {
                return (
                    <SelectItem id={id} textValue={name}>
                        <Avatar name={name} src={avatar} />
                        <Text>{name}</Text>
                        <Text slot="description">{role}</Text>
                    </SelectItem>
                );
            }}
        </Select>
    );
}
```

##### Controlled

A select can have a controlled selected value. In this example, it shows how it is possible to deselect an option.

```tsx
import { Header, Select, SelectItem, SelectSection, type Key } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [value, setValue] = useState<Key | null>();

    const handleSelectionChange = (key: Key | null) => {
        if (value === key) {
            setValue(null);
        } else {
            setValue(key);
        }
    };

    return (
        <Select value={value} onChange={handleSelectionChange} label="Roles">
            <SelectSection>
                <Header>Operations</Header>
                <SelectItem id="1">Project Coordinator</SelectItem>
                <SelectItem id="2">QA Specialist</SelectItem>
            </SelectSection>
            <SelectItem id="3">Manager</SelectItem>
        </Select>
    );
}
```

##### Form

A select can be part of a form. To submit the value of a select, make sure you specify the `name` property.

```tsx
import { Form, Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form>
            <Select
                name="roles"
                label="Roles"
            >
                <SelectItem id="designer">Designer</SelectItem>
                <SelectItem id="developer">Developer</SelectItem>
                <SelectItem id="manager">Manager</SelectItem>
            </Select>
        </Form>
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a Select.

```tsx
import { ContextualHelp, Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select label="Roles" contextualHelp={<ContextualHelp>These are all possible roles</ContextualHelp>}>
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

##### Auto Menu Width

A select can have a menu that automatically adjusts its width based on the longest item.

```tsx
import { Select, SelectItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select
            aria-label="list of options with a description"
            isAutoMenuWidth
        >
            <SelectItem textValue="Designer">
                <Text>Designer</Text>
                <Text slot="description">Builds and maintains software.</Text>
            </SelectItem>
            <SelectItem textValue="Developer">
                <Text>Developer</Text>
                <Text slot="description">Creates visual design solutions.</Text>
            </SelectItem>
            <SelectItem textValue="Manager">
                <Text>Manager</Text>
                <Text slot="description">Leads teams and projects.</Text>
            </SelectItem>
        </Select>
    );
}
```

##### Menu placement

A select's menu can have a customized menu placement using the `direction` and `align` props.

```tsx
import { Select, SelectItem } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select
            aria-label="Roles"
            isAutoMenuWidth
            align="start"
            direction="top"
        >
            <SelectItem id="designer">Designer</SelectItem>
            <SelectItem id="developer">Developer</SelectItem>
            <SelectItem id="manager">Manager</SelectItem>
        </Select>
    );
}
```

##### Section

A select can have sections and section headers.

```tsx
import { Header, Select, SelectItem, SelectSection } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select aria-label="list of options">
            <SelectItem>Developer</SelectItem>
            <SelectItem>Manager</SelectItem>
            <SelectSection>
                <Header>Creative Department</Header>
                <SelectItem>Designer</SelectItem>
                <SelectItem>Copywriter</SelectItem>
                <SelectItem>UX Researcher</SelectItem>
            </SelectSection>
            <SelectSection>
                <Header>Operations</Header>
                <SelectItem>Project Coordinator</SelectItem>
                <SelectItem>QA Specialist</SelectItem>
            </SelectSection>
            <SelectItem>Product Owner</SelectItem>
        </Select>
    );
}
```

##### Footer

A select can have a footer.

```tsx
import { Button, Select, SelectItem, Text } from "@hopper-ui/components";
import { AddIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Select
            aria-label="list of options with a description"
            footer={<Button variant="ghost-secondary" isFluid><AddIcon /><Text>Add</Text></Button>}
        >
            <SelectItem textValue="Designer">
                <Text>Designer</Text>
                <Text slot="description">Builds and maintains software.</Text>
            </SelectItem>
            <SelectItem textValue="Developer">
                <Text>Developer</Text>
                <Text slot="description">Creates visual design solutions.</Text>
            </SelectItem>
            <SelectItem textValue="Manager">
                <Text>Manager</Text>
                <Text slot="description">Leads teams and projects.</Text>
            </SelectItem>
        </Select>
    );
}
```

##### Avatar

A select option can contain an avatar.

```tsx
import { Avatar, Select, SelectItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select aria-label="Team">
            <SelectItem textValue="Fred Smith">
                <Avatar src="https://i.pravatar.cc/96?img=3" name="Fred Smith" />
                <Text>Fred Smith</Text>
            </SelectItem>
            <SelectItem textValue="Karen Smith">
                <Avatar name="Karen Smith" />
                <Text>Karen Smith</Text>
            </SelectItem>
            <SelectItem textValue="John Doe">
                <Avatar name="John Doe" />
                <Text>John Doe</Text>
            </SelectItem>
        </Select>
    );
}
```

##### Count

A select option can contain a count using a badge.

```tsx
import { Badge, Select, SelectItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select aria-label="list of options">
            <SelectItem textValue="Designer">
                <Text>Designer</Text>
                <Badge>50</Badge>
            </SelectItem>
            <SelectItem textValue="Developer">
                <Badge variant="secondary">99+</Badge>
                <Text>Developer</Text>
            </SelectItem>
            <SelectItem>Manager</SelectItem>
        </Select>
    );
}
```

##### Dynamic Lists

Options and sections can be populated from a hierarchial data structure. If a section has a header, the `Collection` component can be used to render the child items.

```tsx
import { Collection, Header, Select, SelectItem, SelectSection } from "@hopper-ui/components";

const OPTIONS = [
    {
        role: "Operations", children: [
            { id: 2, role: "Project Coordinator" },
            { id: 3, role: "QA Specialist" },
            { id: 4, role: "System Administrator" }
        ]
    },
    {
        role: "Creative Department", children: [
            { id: 6, role: "Designer" },
            { id: 7, role: "Designer" },
            { id: 8, role: "UX Researcher" }
        ]
    }
];

export default function Example() {
    return (
        <Select items={OPTIONS} label="Section">
            {section => {
                const { role: sectionName, children } = section;

                return (
                    <SelectSection id={sectionName}>
                        <Header>{sectionName}</Header>
                        <Collection items={children}>
                            {item => <SelectItem id={item.id}>{item.role}</SelectItem>}
                        </Collection>
                    </SelectSection>
                );
            }}
        </Select>
    );
}
```

##### Icons

A select option can contain icons.

```tsx
import { IconList, Select, SelectItem, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Select aria-label="list of options">
            <SelectItem textValue="Designer">
                <Text>Designer</Text>
                <IconList>
                    <SparklesIcon /><SparklesIcon /><SparklesIcon />
                </IconList>
            </SelectItem>
            <SelectItem textValue="Developer">
                <SparklesIcon />
                <Text>Developer</Text>
            </SelectItem>
            <SelectItem>Manager</SelectItem>
        </Select>
    );
}
```

##### End Icons

A select can contain icons at the end of an option.

```tsx
import { IconList, Select, SelectItem, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Select aria-label="list of options">
            <SelectItem textValue="Designer">
                <Text>Designer</Text>
                <IconList slot="end-icon">
                    <SparklesIcon /><SparklesIcon /><SparklesIcon />
                </IconList>
            </SelectItem>
            <SelectItem textValue="Developer">
                <SparklesIcon slot="end-icon" />
                <Text>Developer</Text>
            </SelectItem>
            <SelectItem>Manager</SelectItem>
        </Select>
    );
}
```

##### Loading

A select can have a loading state.

```tsx
import { Select } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select
            aria-label="list of options"
            isLoading
        >
            {[]}
        </Select>
    );
}
```

##### Load on scroll

A select can load more items when scrolling within.

```tsx
import { Select, SelectItem, useAsyncList } from "@hopper-ui/components";

interface Character {
    name: string;
}

export default function Example() {
    const list = useAsyncList<Character>({
        async load({ signal, cursor }) {
            const res = await fetch(cursor || "https://pokeapi.co/api/v2/pokemon", {
                signal
            });
            const json = await res.json();

            return {
                items: json.results,
                cursor: json.next
            };
        }
    });

    return (
        <Select
            aria-label="list of options"
            items={list.items}
            isLoading={list.isLoading}
            onLoadMore={() => list.loadMore()}
            listBoxProps={{
                maxHeight: "core_1280"
            }}
        >
            {item => {
                const { name } = item;

                return <SelectItem id={name}>{name}</SelectItem>;
            }}
        </Select>
    );
}
```

##### Selection indicator

A select can have a different selection indicator.

```tsx
import { Select, SelectItem, Text, type Key } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [value, setValue] = useState<Key | null>("1");

    return (
        <Select
            aria-label="list of options"
            value={value}
            onChange={setValue}
            selectionIndicator="input"
        >
            <SelectItem textValue="Developer" id="1">
                <Text>Developer</Text>
                <Text slot="description">Builds and maintains software.</Text>
            </SelectItem>
            <SelectItem textValue="Designer" id="2">
                <Text>Designer</Text>
                <Text slot="description">Creates visual design solutions.</Text>
            </SelectItem>
            <SelectItem textValue="Manager" id="3">
                <Text>Manager</Text>
                <Text slot="description">Leads teams and projects.</Text>
            </SelectItem>
        </Select>
    );
}
```

##### Description

A select item can have a description.

```tsx
import { Select, SelectItem, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Select aria-label="list of options with a description">
            <SelectItem textValue="Developer">
                <Text>Developer</Text>
                <Text slot="description">Builds and maintains software.</Text>
            </SelectItem>
            <SelectItem textValue="Designer">
                <Text>Designer</Text>
                <Text slot="description">Creates visual design solutions.</Text>
            </SelectItem>
            <SelectItem textValue="Manager">
                <Text>Manager</Text>
                <Text slot="description">Leads teams and projects.</Text>
            </SelectItem>
        </Select>
    );
}
```

##### Filterable

A select can include a [SearchField](/components/SearchField.md) to filter items in the dropdown. This is useful for long lists where users need to quickly find specific options, to enable this use the `isFilterable` prop.

```tsx
import { Select, SelectItem, Text } from "@hopper-ui/components";

const ANIMALS = [
    { id: "aardvark", name: "Aardvark", description: "A nocturnal mammal that feeds on ants and termites" },
    { id: "albatross", name: "Albatross", description: "A large seabird with long narrow wings" },
    { id: "alligator", name: "Alligator", description: "A large reptile with a powerful tail and strong jaws" },
    { id: "bear", name: "Bear", description: "A large mammal with thick fur and a strong build" },
    { id: "cat", name: "Cat", description: "A small domesticated carnivorous mammal" },
    { id: "dog", name: "Dog", description: "A domesticated carnivorous mammal and loyal companion" },
    { id: "elephant", name: "Elephant", description: "The largest land mammal with a long trunk" },
    { id: "fox", name: "Fox", description: "A small omnivorous mammal known for its cunning" },
    { id: "giraffe", name: "Giraffe", description: "The tallest land animal with a very long neck" },
    { id: "horse", name: "Horse", description: "A large domesticated mammal used for riding and transport" },
    { id: "iguana", name: "Iguana", description: "A large tropical lizard with a spiny back" },
    { id: "jaguar", name: "Jaguar", description: "A large spotted cat native to the Americas" },
    { id: "kangaroo", name: "Kangaroo", description: "A marsupial that hops on powerful hind legs" },
    { id: "lion", name: "Lion", description: "A large tawny-colored cat known as the king of the jungle" },
    { id: "monkey", name: "Monkey", description: "A primate with a long tail and high intelligence" }
];

export default function Example() {
    return (
        <Select
            label="Select an animal"
            items={ANIMALS}
            isFilterable
        >
            {(item: typeof ANIMALS[0]) => (
                <SelectItem id={item.id} textValue={item.name}>
                    <Text>{item.name}</Text>
                    <Text slot="description">{item.description}</Text>
                </SelectItem>
            )}
        </Select>
    );
}
```

##### Multiple Selection

If you want to allow users to select multiple options from a list, use the `MultiSelect` component.

```tsx
import { MultiSelect, MultiSelectItem, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <MultiSelect label="Roles" defaultValue={["designer", "developer"]}>
                <MultiSelectItem id="designer">Designer</MultiSelectItem>
                <MultiSelectItem id="developer">Developer</MultiSelectItem>
                <MultiSelectItem id="manager">Manager</MultiSelectItem>
            </MultiSelect>
            <MultiSelect size="md" label="Roles" defaultValue={["designer", "developer"]}>
                <MultiSelectItem id="designer">Designer</MultiSelectItem>
                <MultiSelectItem id="developer">Developer</MultiSelectItem>
                <MultiSelectItem id="manager">Manager</MultiSelectItem>
            </MultiSelect>
        </Stack>
    );
}
```

##### Multiple Selection with custom value display

Use the `renderValue` prop to customize how the selected values are displayed in the trigger of a `MultiSelect`.

```tsx
import { MultiSelect, MultiSelectItem, Stack } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <MultiSelect label="Roles" defaultValue={["designer", "developer"]} renderValue={value => `Selected ${value.selectedItems.length}`}>
                <MultiSelectItem id="designer">Designer</MultiSelectItem>
                <MultiSelectItem id="developer">Developer</MultiSelectItem>
                <MultiSelectItem id="manager">Manager</MultiSelectItem>
            </MultiSelect>
        </Stack>
    );
}
```

#### Best Practices

The select component should:

* Be used for selecting between four or more pre-defined options.
* Have a default option selected whenever possible

##### Overflow content

Avoid having multiple lines of text in a select. If the text is too long for one line, add an ellipsis for overflow content, and accompany with a browser-based tooltip to show the full string of text.

#### Props

##### Select

| Prop               | Type                                          | Default | Description                                                                                                                                                                                         |
| ------------------ | --------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading          | `boolean`                                     |         | Whether the item is loading.                                                                                                                                                                        |
| size               | `ResponsiveProp<ListBoxItemSize>`             | "sm"    | A ListBoxItem can vary in size.                                                                                                                                                                     |
| isInvalid          | `boolean`                                     |         | Whether or not the ListBoxItem is in an invalid state.                                                                                                                                              |
| selectionIndicator | `SelectionIndicator`                          | "check" | The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode. |
| radioProps         | `DecorativeRadioProps`                        |         | The props for the Radio.                                                                                                                                                                            |
| checkboxProps      | `DecorativeCheckboxProps`                     |         | The props for the Checkbox.                                                                                                                                                                         |
| style              | `StyleOrFunction<ListBoxItemRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                   |
| dir                | `string`                                      |         |                                                                                                                                                                                                     |
| lang               | `string`                                      |         |                                                                                                                                                                                                     |
| inert              | `boolean`                                     |         |                                                                                                                                                                                                     |
| translate          | `"yes" \| "no"`                               |         |                                                                                                                                                                                                     |
| id                 | `Key`                                         |         | The unique id of the item.                                                                                                                                                                          |
| value              | `object`                                      |         | The object value that this item represents. When using dynamic collections, this is set automatically.                                                                                              |
| textValue          | `string`                                      |         | A string representation of the item's contents, used for features like typeahead.                                                                                                                   |
| isDisabled         | `boolean`                                     |         | Whether the item is disabled.                                                                                                                                                                       |
| children           | `ChildrenOrFunction<ListBoxItemRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                                           |
| className          | `ClassNameOrFunction<ListBoxItemRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                  |
| href               | `string`                                      |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                                      |
| hrefLang           | `string`                                      |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                                      |
| target             | `HTMLAttributeAnchorTarget`                   |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                                      |
| rel                | `string`                                      |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                                     |
| download           | `string \| boolean`                           |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).                    |
| ping               | `string`                                      |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                                      |
| referrerPolicy     | `HTMLAttributeReferrerPolicy`                 |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                                    |
| routerOptions      | `undefined`                                   |         | Options for the configured client side router.                                                                                                                                                      |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onAction                    | `(() => void)`                                            |         | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.                                |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                           |
| ---------- | -------- | ------- | ------------------------------------- |
| aria-label | `string` |         | An accessibility label for this item. |

##### SelectSection

| Prop         | Type                                                                                  | Default | Description                                                                                               |
| ------------ | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| style        | `CSSProperties`                                                                       |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.   |
| children     | `ReactNode \| ((item: T) => ReactElement<any, string \| JSXElementConstructor<any>>)` |         | Static child items or a function to render children.                                                      |
| items        | `Iterable<T>`                                                                         |         | Item objects in the section.                                                                              |
| id           | `Key`                                                                                 |         | The unique id of the section.                                                                             |
| value        | `object`                                                                              |         | The object value that this section represents. When using dynamic collections, this is set automatically. |
| dependencies | `readonly any[]`                                                                      |         | Values that should invalidate the item cache when using dynamic collections.                              |
| className    | `string`                                                                              |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.  |
| dir          | `string`                                                                              |         |                                                                                                           |
| lang         | `string`                                                                              |         |                                                                                                           |
| inert        | `boolean`                                                                             |         |                                                                                                           |
| translate    | `"yes" \| "no"`                                                                       |         |                                                                                                           |

###### Events

| Prop                        | Type                                  | Default | Description |
| --------------------------- | ------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |             |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                             |
| ---------- | -------- | ------- | --------------------------------------- |
| aria-label | `string` |         | An accessibility label for the section. |

##### SelectItem

| Prop               | Type                                          | Default | Description                                                                                                                                                                                         |
| ------------------ | --------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading          | `boolean`                                     |         | Whether the item is loading.                                                                                                                                                                        |
| size               | `ResponsiveProp<ListBoxItemSize>`             | "sm"    | A ListBoxItem can vary in size.                                                                                                                                                                     |
| isInvalid          | `boolean`                                     |         | Whether or not the ListBoxItem is in an invalid state.                                                                                                                                              |
| selectionIndicator | `SelectionIndicator`                          | "check" | The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode. |
| radioProps         | `DecorativeRadioProps`                        |         | The props for the Radio.                                                                                                                                                                            |
| checkboxProps      | `DecorativeCheckboxProps`                     |         | The props for the Checkbox.                                                                                                                                                                         |
| style              | `StyleOrFunction<ListBoxItemRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                   |
| dir                | `string`                                      |         |                                                                                                                                                                                                     |
| lang               | `string`                                      |         |                                                                                                                                                                                                     |
| inert              | `boolean`                                     |         |                                                                                                                                                                                                     |
| translate          | `"yes" \| "no"`                               |         |                                                                                                                                                                                                     |
| id                 | `Key`                                         |         | The unique id of the item.                                                                                                                                                                          |
| value              | `object`                                      |         | The object value that this item represents. When using dynamic collections, this is set automatically.                                                                                              |
| textValue          | `string`                                      |         | A string representation of the item's contents, used for features like typeahead.                                                                                                                   |
| isDisabled         | `boolean`                                     |         | Whether the item is disabled.                                                                                                                                                                       |
| children           | `ChildrenOrFunction<ListBoxItemRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                                           |
| className          | `ClassNameOrFunction<ListBoxItemRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                  |
| href               | `string`                                      |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                                      |
| hrefLang           | `string`                                      |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                                      |
| target             | `HTMLAttributeAnchorTarget`                   |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                                      |
| rel                | `string`                                      |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                                     |
| download           | `string \| boolean`                           |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).                    |
| ping               | `string`                                      |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                                      |
| referrerPolicy     | `HTMLAttributeReferrerPolicy`                 |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                                    |
| routerOptions      | `undefined`                                   |         | Options for the configured client side router.                                                                                                                                                      |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onAction                    | `(() => void)`                                            |         | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.                                |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                           |
| ---------- | -------- | ------- | ------------------------------------- |
| aria-label | `string` |         | An accessibility label for this item. |

##### MultiSelect

| Prop               | Type                                          | Default | Description                                                                                                                                                                                         |
| ------------------ | --------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading          | `boolean`                                     |         | Whether the item is loading.                                                                                                                                                                        |
| size               | `ResponsiveProp<ListBoxItemSize>`             | "sm"    | A ListBoxItem can vary in size.                                                                                                                                                                     |
| isInvalid          | `boolean`                                     |         | Whether or not the ListBoxItem is in an invalid state.                                                                                                                                              |
| selectionIndicator | `SelectionIndicator`                          | "check" | The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode. |
| radioProps         | `DecorativeRadioProps`                        |         | The props for the Radio.                                                                                                                                                                            |
| checkboxProps      | `DecorativeCheckboxProps`                     |         | The props for the Checkbox.                                                                                                                                                                         |
| style              | `StyleOrFunction<ListBoxItemRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                   |
| dir                | `string`                                      |         |                                                                                                                                                                                                     |
| lang               | `string`                                      |         |                                                                                                                                                                                                     |
| inert              | `boolean`                                     |         |                                                                                                                                                                                                     |
| translate          | `"yes" \| "no"`                               |         |                                                                                                                                                                                                     |
| id                 | `Key`                                         |         | The unique id of the item.                                                                                                                                                                          |
| value              | `object`                                      |         | The object value that this item represents. When using dynamic collections, this is set automatically.                                                                                              |
| textValue          | `string`                                      |         | A string representation of the item's contents, used for features like typeahead.                                                                                                                   |
| isDisabled         | `boolean`                                     |         | Whether the item is disabled.                                                                                                                                                                       |
| children           | `ChildrenOrFunction<ListBoxItemRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                                           |
| className          | `ClassNameOrFunction<ListBoxItemRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                  |
| href               | `string`                                      |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                                      |
| hrefLang           | `string`                                      |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                                      |
| target             | `HTMLAttributeAnchorTarget`                   |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                                      |
| rel                | `string`                                      |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                                     |
| download           | `string \| boolean`                           |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).                    |
| ping               | `string`                                      |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                                      |
| referrerPolicy     | `HTMLAttributeReferrerPolicy`                 |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                                    |
| routerOptions      | `undefined`                                   |         | Options for the configured client side router.                                                                                                                                                      |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onAction                    | `(() => void)`                                            |         | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.                                |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                           |
| ---------- | -------- | ------- | ------------------------------------- |
| aria-label | `string` |         | An accessibility label for this item. |

##### MultiSelectSection

| Prop         | Type                                                                                  | Default | Description                                                                                               |
| ------------ | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------- |
| style        | `CSSProperties`                                                                       |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.   |
| children     | `ReactNode \| ((item: T) => ReactElement<any, string \| JSXElementConstructor<any>>)` |         | Static child items or a function to render children.                                                      |
| items        | `Iterable<T>`                                                                         |         | Item objects in the section.                                                                              |
| id           | `Key`                                                                                 |         | The unique id of the section.                                                                             |
| value        | `object`                                                                              |         | The object value that this section represents. When using dynamic collections, this is set automatically. |
| dependencies | `readonly any[]`                                                                      |         | Values that should invalidate the item cache when using dynamic collections.                              |
| className    | `string`                                                                              |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.  |
| dir          | `string`                                                                              |         |                                                                                                           |
| lang         | `string`                                                                              |         |                                                                                                           |
| inert        | `boolean`                                                                             |         |                                                                                                           |
| translate    | `"yes" \| "no"`                                                                       |         |                                                                                                           |

###### Events

| Prop                        | Type                                  | Default | Description |
| --------------------------- | ------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLElement>` |         |             |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                             |
| ---------- | -------- | ------- | --------------------------------------- |
| aria-label | `string` |         | An accessibility label for the section. |

##### MultiSelectItem

| Prop               | Type                                          | Default | Description                                                                                                                                                                                         |
| ------------------ | --------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isLoading          | `boolean`                                     |         | Whether the item is loading.                                                                                                                                                                        |
| size               | `ResponsiveProp<ListBoxItemSize>`             | "sm"    | A ListBoxItem can vary in size.                                                                                                                                                                     |
| isInvalid          | `boolean`                                     |         | Whether or not the ListBoxItem is in an invalid state.                                                                                                                                              |
| selectionIndicator | `SelectionIndicator`                          | "check" | The selection indicator to use. Only available if the selection mode is not "none". When set to "input", the selection indicator will be an either a radio or checkbox based on the selection mode. |
| radioProps         | `DecorativeRadioProps`                        |         | The props for the Radio.                                                                                                                                                                            |
| checkboxProps      | `DecorativeCheckboxProps`                     |         | The props for the Checkbox.                                                                                                                                                                         |
| style              | `StyleOrFunction<ListBoxItemRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                   |
| dir                | `string`                                      |         |                                                                                                                                                                                                     |
| lang               | `string`                                      |         |                                                                                                                                                                                                     |
| inert              | `boolean`                                     |         |                                                                                                                                                                                                     |
| translate          | `"yes" \| "no"`                               |         |                                                                                                                                                                                                     |
| id                 | `Key`                                         |         | The unique id of the item.                                                                                                                                                                          |
| value              | `object`                                      |         | The object value that this item represents. When using dynamic collections, this is set automatically.                                                                                              |
| textValue          | `string`                                      |         | A string representation of the item's contents, used for features like typeahead.                                                                                                                   |
| isDisabled         | `boolean`                                     |         | Whether the item is disabled.                                                                                                                                                                       |
| children           | `ChildrenOrFunction<ListBoxItemRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                                           |
| className          | `ClassNameOrFunction<ListBoxItemRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                  |
| href               | `string`                                      |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                                      |
| hrefLang           | `string`                                      |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                                      |
| target             | `HTMLAttributeAnchorTarget`                   |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                                      |
| rel                | `string`                                      |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                                     |
| download           | `string \| boolean`                           |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).                    |
| ping               | `string`                                      |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                                      |
| referrerPolicy     | `HTMLAttributeReferrerPolicy`                 |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                                    |
| routerOptions      | `undefined`                                   |         | Options for the configured client side router.                                                                                                                                                      |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onAction                    | `(() => void)`                                            |         | Handler that is called when a user performs an action on the item. The exact user event depends on the collection's `selectionBehavior` prop and the interaction modality.                                |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop       | Type     | Default | Description                           |
| ---------- | -------- | ------- | ------------------------------------- |
| aria-label | `string` |         | An accessibility label for this item. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `Item` has been renamed to `SelectItem`.
* The selected value only includes text. If an icon or avatar is needed, customize it using the `renderValue` function.
* There is no `allowFlip`. Use `shouldFlip`.
* There is no `allowPreventOverflow`. This is done automatically.
* There is no `allowResponsiveMenuWidth`. Use `isAutoMenuWidth`.
* `disabled` has been renamed to `isDisabled`.
* `fluid` has been renamed to `isFluid`.
* `open` has been renamed to `isOpen`..
* `required` has been renamed to `isRequired`.
* A select cannot be read-only.
* `overlayProps` has been removed. Use `popoverProps` instead.
* Use `isInvalid` instead of `validationState`.
* `variant` has been removed.
* `zIndex` has been removed.
* Custom tooltips are not supported.

### Span

A specialized component to represent an HTML span element.

```tsx
import { Span } from "@hopper-ui/components";

export default function Example() {
    return (
        <Span color="neutral-weak">
            NASA is now preparing for an ambitious new era of sustainable human spaceflight and discovery.
            The agency is building the Space Launch System rocket and the Orion spacecraft for human deep
            space exploration.
        </Span>
    );
}
```

#### Usage

A span component accepts all the [span HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/span) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Spinner

A spinner indicates that a part of the product is currently performing a task of unknown duration.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/spinner/src/Spinner.tsx>

```tsx
import { Spinner } from "@hopper-ui/components";

export default function Example() {
    return (
        <Spinner aria-label="Loading..." />
    );
}
```

#### Usage

##### Sizes

A spinner can vary in size.

```tsx
import { Spinner, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline alignY="end">
            <Spinner size="sm" aria-label="Loading..." />
            <Spinner aria-label="Loading..." />
            <Spinner size="lg" aria-label="Loading..." />
        </Inline>
    );
}
```

##### Label

A spinner can have a label on its side.

```tsx
import { Spinner, Inline } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline alignY="end">
            <Spinner size="sm">Loading...</Spinner>
            <Spinner>Loading...</Spinner>
            <Spinner size="lg">Loading...</Spinner>
        </Inline>
    );
}
```

##### Over Background

You can change a spinner style when over a background by setting a color property on the spinner.

```tsx
import { Spinner, Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div backgroundColor="primary-strong" padding="inset-md">
            <Spinner color="primary-strong">Loading…</Spinner>
        </Div>
    );
}
```

#### Props

| Prop      | Type                          | Default | Description                                                                                              |
| --------- | ----------------------------- | ------- | -------------------------------------------------------------------------------------------------------- |
| size      | `ResponsiveProp<SpinnerSize>` | "md"    | What the Spinner's diameter should be.                                                                   |
| children  | `ReactNode`                   |         | The children of the component.                                                                           |
| className | `string`                      |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| style     | `CSSProperties`               |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* The `color` props will only affect the spinner's text color and not the color of the tracks.

### Stack

A stack component is a layout primitive used to arrange elements vertically.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/layout/src/Stack.tsx>

```tsx
import { Stack, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Stack>
                <Square backgroundColor="decorative-option1" />
                <Square width="core_800" backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Stack>
        </Div>
    );
}
```

#### Usage

##### Reverse

The order and direction of stack items can be reversed.

```tsx
import { Stack, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%" paddingY="core_320">
            <Stack reverse UNSAFE_height="20rem">
                <Square backgroundColor="decorative-option1" />
                <Square width="core_800" backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Stack>
        </Div>
    );
}
```

##### Align X

Stack items can be aligned on the horizontal axis.

```tsx
import { Stack, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Stack alignX="center">
                <Square backgroundColor="decorative-option1" />
                <Square width="core_800" backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Stack>
        </Div>
    );
}
```

##### Align Y

Stack items can be aligned on the vertical axis.

```tsx
import { Stack, Div, type DivProps } from "@hopper-ui/components";

function Square(props: DivProps) {
    return <Div backgroundColor="decorative-option1" height="core_640" width="core_640" {...props} />;
}

export default function Example() {
    return (
        <Div width="100%">
            <Stack alignY="flex-end" UNSAFE_height="20rem">
                <Square backgroundColor="decorative-option1" />
                <Square width="core_800" backgroundColor="decorative-option3" />
                <Square backgroundColor="decorative-option4" />
            </Stack>
        </Div>
    );
}
```

#### Best Practices

Stack is a specialized layout component for arranging items vertically with consistent spacing. It's a preset of `Flex` with `direction="column"`, designed for common vertical layouts like form fields, card content, and list items.

Stack should:

* Be used for simple vertical layouts where items are stacked with consistent spacing.
* Use [Hopper space tokens](/tokens/semantic/space.md) for the `gap` property to ensure consistency.
* Be the default choice for vertical layouts unless you need custom alignment or other flex properties.
* Keep layouts simple and semantic without unnecessary wrapper elements.

##### Do's and Don'ts

**Rule 1**

* ✅ Do:

  ```tsx
  import { Button, Stack, TextField } from "@hopper-ui/components";

  export function Example() {
      return (
          <Stack gap="stack-md">
              <TextField label="Email" />
              <TextField label="Password" type="password" />
              <Button variant="primary">Sign In</Button>
          </Stack>
      );
  }
  ```

  Use Stack for simple vertical layouts with consistent spacing

* 🚫 Don't:

  ```tsx
  import { Button, Flex, TextField } from "@hopper-ui/components";

  export function Example() {
      return (
          <Flex direction="column" gap="stack-md">
              <TextField label="Email" />
              <TextField label="Password" type="password" />
              <Button variant="primary">Sign In</Button>
          </Flex>
      );
  }
  ```

  Use Flex with direction='column' when Stack is sufficient

**Rule 2**

* ✅ Do:

  Use \`alignY\` to adjust vertical alignment of items

* 🚫 Don't:

  Use \`alignItems\` which is not supported by \`Stack\`

**Rule 3**

* ✅ Do:

  Use \`alignX\` to adjust horizontal alignment of items

* 🚫 Don't:

  Use \`justifyContent\` which is not supported by \`Stack\`

#### Props

| Prop      | Type                                                  | Default | Description                                                      |
| --------- | ----------------------------------------------------- | ------- | ---------------------------------------------------------------- |
| reverse   | `boolean`                                             |         | Whether or not to reverse the order of the elements.             |
| alignX    | `ResponsiveProp<AlignItems>`                          |         | An alias for the css align-items property.                       |
| alignY    | `ResponsiveProp<JustifyContent>`                      |         | An alias for the css justify-content property.                   |
| style     | `CSSProperties`                                       |         |                                                                  |
| className | `string`                                              |         |                                                                  |
| wrap      | `ResponsiveProp<FlexWrap> \| ResponsiveProp<boolean>` |         | Whether to wrap the flex items. The value can also be a boolean. |
| basis     | `ResponsiveProp<FlexBasis<0 \| (string & {})>>`       |         | An alias for the css flex-basis property.                        |
| grow      | `ResponsiveProp<FlexGrow>`                            |         | An alias for the css flex-grow property.                         |
| shrink    | `ResponsiveProp<FlexShrink>`                          |         | An alias for the css flex-shrink property.                       |
| inline    | `boolean`                                             |         | Whether to display the flex container as an inline element.      |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

#### Migration Notes

Coming from Orbiter, you should be aware of the following change:

* The default `gap` value has been reduced to `1rem` / `var(--hop-space-stack-md)` from `1.25rem`. Use `UNSAFE_gap="1.25rem"` as a temporary measure during the migration to the Hopper design system. This value should eventually be removed to align with the new design standards.

### Switch

A switch is used to quickly switch between two possible states.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/switch/src/Switch.tsx>

* Aria: <https://www.w3.org/WAI/ARIA/apg/patterns/switch/>

Switch is a control that is used to quickly switch between two possible states. Switches are only used for these binary actions that occur immediately after the user “flips the switch.” They are commonly used for “on/off” switches.

```tsx
import { Switch } from "@hopper-ui/components";

export default function Example() {
    return (
        <Switch>Save</Switch>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Switch>
    <IconList /> /* (Optional) A list of icons in the switch */
    <Icon /> /* (Optional) An icon in the switch */
    <Text /> /* (Optional) Text in the switch */
</Switch>
```

##### Composed Components

A `Switch` uses the following components:

| Component | Description                                                                        |
| --------- | ---------------------------------------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon.                                 |
| IconList  | An IconList encapsulates a collection of icons.                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale. |

#### Usage

##### Selected

A switch can be selected.

```tsx
import { Switch } from "@hopper-ui/components";

export default function Example() {
    return (
        <Switch defaultSelected>Save</Switch>
    );
}
```

##### No label

A switch can be rendered without a label.

```tsx
import { Switch } from "@hopper-ui/components";

export default function Example() {
    return (
        <Switch aria-label="Label" />
    );
}
```

##### Disabled

A switch can be disabled.

```tsx
import { Switch, SwitchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SwitchField isDisabled>
            <Switch>Save</Switch>
        </SwitchField>
    );
}
```

##### Disabled Field

A switch field can be disabled.

```tsx
import { Switch, SwitchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <SwitchField isDisabled description="This will override your changes">
            <Switch>Save</Switch>
        </SwitchField>
    );
}
```

##### Sizes

A switch can vary in size.

```tsx
import { Inline, Switch } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Switch size="sm">Save</Switch>
            <Switch size="md">Save</Switch>
        </Inline>
    );
}
```

##### Field Sizes

A switch field can vary in size.

```tsx
import { Inline, Switch, SwitchField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <SwitchField size="sm" description="This will override your changes.">
                <Switch>Save</Switch>
            </SwitchField>
            <SwitchField size="md" description="This will override your changes.">
                <Switch>Save</Switch>
            </SwitchField>
        </Inline>
    );
}
```

##### Icon

A switch can be rendered with an icon or an icon list.

```tsx
import { IconList, Inline, Switch } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Switch>
                Save
                <SparklesIcon />
            </Switch>
            <Switch>
                Save
                <IconList>
                    <SparklesIcon />
                    <SparklesIcon />
                </IconList>
            </Switch>
        </Inline>
    );
}
```

#### Best Practices

Switches should:

* Have an immediate, visible effect when they are flipped on or off.
* Only offer an active or inactive state.
* Always be accompanied by a clear label.
* Offer choices that are mutually exclusive to one another.

##### Checkbox vs. Switch

Checkbox and Switch components are very similar in term of results when used in a form. However, a few details tell them apart.

* Checkbox component can offer multiple options to the user, while the Switch only offers one.
* Users can select none to any option with checkboxes, while the Switch always have one active selection at all time (either “on” or “off” position)
* Choices offered in checkbox grouping are independant from each other, while the Switch's mutually exclusive.
* The Switch's selection takes effect immediately, while the checkbox only happens once the user applied the change.

#### Props

##### Switch

| Prop            | Type                                     | Default | Description                                                                                                                                                                                                                  |
| --------------- | ---------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| size            | `ResponsiveProp<FieldSize>`              | "md"    | A Switch can vary in size.                                                                                                                                                                                                   |
| form            | `string`                                 |         | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form). |
| style           | `StyleOrFunction<SwitchRenderProps>`     |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                            |
| children        | `ChildrenOrFunction<SwitchRenderProps>`  |         | The children of the component. A function may be provided to alter the children based on component state.                                                                                                                    |
| defaultSelected | `boolean`                                |         | Whether the Switch should be selected (uncontrolled).                                                                                                                                                                        |
| isSelected      | `boolean`                                |         | Whether the Switch should be selected (controlled).                                                                                                                                                                          |
| value           | `string`                                 |         | The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).                                                              |
| isDisabled      | `boolean`                                |         | Whether the input is disabled.                                                                                                                                                                                               |
| isReadOnly      | `boolean`                                |         | Whether the input can be selected but not changed by the user.                                                                                                                                                               |
| autoFocus       | `boolean`                                |         | Whether the element should receive focus on render.                                                                                                                                                                          |
| name            | `string`                                 |         | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                |
| dir             | `string`                                 |         |                                                                                                                                                                                                                              |
| lang            | `string`                                 |         |                                                                                                                                                                                                                              |
| inert           | `boolean`                                |         |                                                                                                                                                                                                                              |
| translate       | `"yes" \| "no"`                          |         |                                                                                                                                                                                                                              |
| inputRef        | `RefObject<HTMLInputElement \| null>`    |         | A ref for the HTML input element.                                                                                                                                                                                            |
| className       | `ClassNameOrFunction<SwitchRenderProps>` |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                           |

###### Events

| Prop                        | Type                                          | Default | Description                                                       |
| --------------------------- | --------------------------------------------- | ------- | ----------------------------------------------------------------- |
| onChange                    | `((isSelected: boolean) => void)`             |         | Handler that is called when the Switch's selection state changes. |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element receives focus.           |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)` |         | Handler that is called when the element loses focus.              |
| onFocusChange               | `((isFocused: boolean) => void)`              |         | Handler that is called when the element's focus status changes.   |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                |         | Handler that is called when a key is pressed.                     |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                |         | Handler that is called when a key is released.                    |
| onClickCapture              | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onAuxClick                  | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onAuxClickCapture           | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onContextMenu               | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onContextMenuCapture        | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onDoubleClick               | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onDoubleClickCapture        | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseDown                 | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseDownCapture          | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseEnter                | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseLeave                | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseMove                 | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseMoveCapture          | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseOut                  | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseOutCapture           | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseOver                 | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseOverCapture          | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseUp                   | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onMouseUpCapture            | `MouseEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onTouchCancel               | `TouchEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onTouchCancelCapture        | `TouchEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onTouchEnd                  | `TouchEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onTouchEndCapture           | `TouchEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onTouchMove                 | `TouchEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onTouchMoveCapture          | `TouchEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onTouchStart                | `TouchEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onTouchStartCapture         | `TouchEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onPointerDown               | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerDownCapture        | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerMove               | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerMoveCapture        | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerUp                 | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerUpCapture          | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerCancel             | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerCancelCapture      | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerEnter              | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerLeave              | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerOver               | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerOverCapture        | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerOut                | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onPointerOutCapture         | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onGotPointerCapture         | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onLostPointerCapture        | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLLabelElement>`       |         |                                                                   |
| onScroll                    | `UIEventHandler<HTMLLabelElement>`            |         |                                                                   |
| onScrollCapture             | `UIEventHandler<HTMLLabelElement>`            |         |                                                                   |
| onWheel                     | `WheelEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onWheelCapture              | `WheelEventHandler<HTMLLabelElement>`         |         |                                                                   |
| onAnimationStart            | `AnimationEventHandler<HTMLLabelElement>`     |         |                                                                   |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLLabelElement>`     |         |                                                                   |
| onAnimationEnd              | `AnimationEventHandler<HTMLLabelElement>`     |         |                                                                   |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLLabelElement>`     |         |                                                                   |
| onAnimationIteration        | `AnimationEventHandler<HTMLLabelElement>`     |         |                                                                   |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLLabelElement>`     |         |                                                                   |
| onTransitionCancel          | `TransitionEventHandler<HTMLLabelElement>`    |         |                                                                   |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLLabelElement>`    |         |                                                                   |
| onTransitionEnd             | `TransitionEventHandler<HTMLLabelElement>`    |         |                                                                   |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLLabelElement>`    |         |                                                                   |
| onTransitionRun             | `TransitionEventHandler<HTMLLabelElement>`    |         |                                                                   |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLLabelElement>`    |         |                                                                   |
| onTransitionStart           | `TransitionEventHandler<HTMLLabelElement>`    |         |                                                                   |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLLabelElement>`    |         |                                                                   |
| onHoverStart                | `((e: HoverEvent) => void)`                   |         | Handler that is called when a hover interaction starts.           |
| onHoverEnd                  | `((e: HoverEvent) => void)`                   |         | Handler that is called when a hover interaction ends.             |
| onHoverChange               | `((isHovering: boolean) => void)`             |         | Handler that is called when the hover state changes.              |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                | Type      | Default | Description                                                                                                                                                                                                                                                                                   |
| ------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-controls       | `string`  |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| excludeFromTabOrder | `boolean` |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id                  | `string`  |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).                                                                                                                                                                           |
| aria-label          | `string`  |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby     | `string`  |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby    | `string`  |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details        | `string`  |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |

##### SwitchField

| Prop        | Type                                                                                                      | Default | Description                                                                                                                                                                        |
| ----------- | --------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| description | `ReactNode`                                                                                               |         | The description of the switch field.                                                                                                                                               |
| isDisabled  | `boolean`                                                                                                 |         | Whether the switch field is disabled.                                                                                                                                              |
| size        | `ResponsiveProp<FieldSize>`                                                                               | "md"    | A switch field can vary in size.                                                                                                                                                   |
| children    | `ReactNode \| ((values: SwitchFieldRenderProps & { defaultChildren: ReactNode; }) => ReactNode)`          |         | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className   | `string \| ((values: SwitchFieldRenderProps & { defaultClassName: string; }) => string)`                  |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style       | `CSSProperties \| ((values: SwitchFieldRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)` |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `onChange` signature has been changed – no events are passed.
* `onValueChange` has been deleted, use `onChange` instead.
* `checked` has been renamed to `isSelected`.
* `disabled` has been renamed to `isDisabled`.
* The `Counter` component is no longer allowed as a specialized slot.
* `reverse` is not supported, use `flex-direction` or `row-reverse` instead.
* `validationState` has been removed. A `Switch` cannot be invalid.

### Table

A specialized component to represent an HTML table element.

```tsx
import { Table, TBody, TD, TFoot, TH, THead, TR } from "@hopper-ui/components";

export default function Example() {
    return (
        <Table cellPadding={5} color="neutral-weak">
            <THead fontWeight="core_680">
                <TR>
                    <TH textAlign="left">Company</TH>
                    <TH textAlign="left">Employees</TH>
                </TR>
            </THead>
            <TBody>
                <TR>
                    <TD>Space X</TD>
                    <TD>More than 10 000</TD>
                </TR>
                <TR>
                    <TD>Blue Origin</TD>
                    <TD>3 500</TD>
                </TR>
                <TR color="core_sapphire-600">
                    <TD>Virgin Galactic</TD>
                    <TD>823</TD>
                </TR>
            </TBody>
            <TFoot></TFoot>
        </Table>
    );
}
```

#### Usage

A table component accepts all the [table HTML element attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/table) and [Hopper styled component props](/styled-system/concepts/styling.md).

### Tabs

Tabs are used to organize content by grouping similar information on the same page.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/tabs/src/Tabs.tsx>

Tabs are used to group different but related content, allowing users to navigate views without leaving the page. They always contain at least two items and one tab is active at a time. Tabs can be used on full page layouts or in components such as modals, listbox, or side panels.

```tsx
import { Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tabs aria-label="Frogs">
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">Poison Dart Frog</Tab>
                <Tab id="goliath">Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Tabs>
    <TabList> /* (Required) A list of tabs */
        <Tab> /* (Required) A tab in the TabList */
            <Icon /> /* (Optional) An icon in the tab */
            <Badge /> /* (Optional) A badge in the tab */
            <Text /> /* (Optional) Text in the tab, required if using another element */
            <Tag /> /* (Optional) A tag in the tab */
        </Tab>
    </TabList>
    <TabPanel /> /* (Required) A panel for the TabList */
</Tabs>
```

##### Composed Components

A `Tab` uses the following components:

| Component | Description                                                                                                                                                      |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Badge     | A badge is used to bring attention to an element.                                                                                                                |
| Icon      | An icon component is used to render a custom icon.                                                                                                               |
| Tag       | A tag represents a label, category, keyword, or filter, and can be used for various groupings. If you need multiple tags, consider using the TagGroup component. |
| Text      | A text component is a primitive component matching Hopper's typography type scale.                                                                               |

#### Usage

##### Sizes

Tabs can vary in size.

```tsx
import { Stack, Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack gap="stack-md">
            <Tabs aria-label="Frogs">
                <TabList>
                    <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                    <Tab id="poison-dart">Poison Dart Frog</Tab>
                    <Tab id="goliath">Goliath Frog</Tab>
                </TabList>
                <TabPanel id="red-eye-tree" padding="inset-md">
                    The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
                </TabPanel>
                <TabPanel id="poison-dart" padding="inset-md">
                    The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
                </TabPanel>
                <TabPanel id="goliath" padding="inset-md">
                    The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
                </TabPanel>
            </Tabs>
            <Tabs aria-label="Frogs" size="md">
                <TabList>
                    <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                    <Tab id="poison-dart">Poison Dart Frog</Tab>
                    <Tab id="goliath">Goliath Frog</Tab>
                </TabList>
                <TabPanel id="red-eye-tree" padding="inset-md">
                    The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
                </TabPanel>
                <TabPanel id="poison-dart" padding="inset-md">
                    The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
                </TabPanel>
                <TabPanel id="goliath" padding="inset-md">
                    The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
                </TabPanel>
            </Tabs>
        </Stack>
    );
}
```

##### Icon

A tab can contain an icon.

```tsx
import { Tab, TabList, TabPanel, Tabs, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Tabs aria-label="Frogs">
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">
                    <SparklesIcon />
                    <Text>Poison Dart Frog</Text>
                </Tab>
                <Tab id="goliath">Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

##### Lozenge

A tab can contain a lozenge.

```tsx
import { Tab, TabList, TabPanel, Tabs, Tag, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tabs aria-label="Frogs">
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">
                    <Tag>New</Tag>
                    <Text>Poison Dart Frog</Text>
                </Tab>
                <Tab id="goliath">Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

##### Badge

A tab can contain a badge.

```tsx
import { Badge, Tab, TabList, TabPanel, Tabs, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tabs aria-label="Frogs">
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">
                    <Badge>100</Badge>
                    <Text>Poison Dart Frog</Text>
                </Tab>
                <Tab id="goliath">Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

##### Dynamic Tabs

Tabs items can be rendered dynamically.

```tsx
import { Collection, Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    const items = [
        {
            id: "red-eye-tree",
            header: "Red-Eyed Tree Frog",
            content: "The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest."
        },
        {
            id: "poison-dart",
            header: "Poison Dart Frog",
            content: "The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters."
        },
        {
            id: "goliath",
            header: "Goliath Frog",
            content: "The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa."
        }
    ];

    return (
        <Tabs aria-label="Frogs">
            <TabList>
                <Collection items={items}>
                    {({ id, header }) => (
                        <Tab id={id}>{header}</Tab>
                    )}
                </Collection>
            </TabList>
            <Collection items={items}>
                {({ id, content }) => (
                    <TabPanel id={id} padding="inset-md">
                        {content}
                    </TabPanel>
                )}
            </Collection>
        </Tabs>
    );
}
```

##### Manually Activated Tabs

By default, tabs are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.

> **information**
>
> The content of a tab should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some notable latency and this might affect the experience for keyboard and screen reader users.

In this scenario, you should use a manually activated tab, which moves focus without activating the tabs. With the focus on a specific tab, users can activate a tab by pressing Space or Enter.

```tsx
import { Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tabs aria-label="Frogs" keyboardActivation="manual">
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">Poison Dart Frog</Tab>
                <Tab id="goliath">Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

##### Variants

Tabs can use different variants.

```tsx
import { Card, Stack, Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack gap="stack-lg">
            <Tabs aria-label="Frogs" variant="standalone">
                <TabList>
                    <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                    <Tab id="poison-dart">Poison Dart Frog</Tab>
                    <Tab id="goliath">Goliath Frog</Tab>
                </TabList>
                <TabPanel id="red-eye-tree" padding="inset-md">
                    The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
                </TabPanel>
                <TabPanel id="poison-dart" padding="inset-md">
                    The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
                </TabPanel>
                <TabPanel id="goliath" padding="inset-md">
                    The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
                </TabPanel>
            </Tabs>
            <Card>
                <Tabs aria-label="Frogs" variant="in-card">
                    <TabList>
                        <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                        <Tab id="poison-dart">Poison Dart Frog</Tab>
                        <Tab id="goliath">Goliath Frog</Tab>
                    </TabList>
                    <TabPanel id="red-eye-tree" padding="inset-md">
                        The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
                    </TabPanel>
                    <TabPanel id="poison-dart" padding="inset-md">
                        The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
                    </TabPanel>
                    <TabPanel id="goliath" padding="inset-md">
                        The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
                    </TabPanel>
                </Tabs>
            </Card>
            <Tabs aria-label="Frogs" variant="heading">
                <TabList>
                    <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                    <Tab id="poison-dart">Poison Dart Frog</Tab>
                    <Tab id="goliath">Goliath Frog</Tab>
                </TabList>
                <TabPanel id="red-eye-tree" padding="inset-md">
                    The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
                </TabPanel>
                <TabPanel id="poison-dart" padding="inset-md">
                    The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
                </TabPanel>
                <TabPanel id="goliath" padding="inset-md">
                    The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
                </TabPanel>
            </Tabs>
        </Stack>
    );
}
```

##### Fluid

A tabs component can split the width of its container equally between its tabs.

```tsx
import { Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tabs aria-label="Frogs" isFluid>
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">Poison Dart Frog</Tab>
                <Tab id="goliath">Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

##### Controlled

The selectedKey state can be handled in a controlled mode.

```tsx
import { type Key, Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";
import { useCallback, useState } from "react";

export default function Example() {
    const [selectedKey, setSelectedKey] = useState("poison-dart");
    const handleSelectionChange = useCallback((key: Key) => {
        setSelectedKey(key as string);
    }, [setSelectedKey]);

    return (
        <Tabs aria-label="Frogs" onSelectionChange={handleSelectionChange} selectedKey={selectedKey}>
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">Poison Dart Frog</Tab>
                <Tab id="goliath">Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

##### Disabled

All tabs can be disabled using the `isDisabled` prop.

```tsx
import { Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tabs aria-label="Frogs" isDisabled>
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">Poison Dart Frog</Tab>
                <Tab id="goliath">Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

###### Disabled items

An individual Tab can be disabled with the isDisabled prop. Disabled tabs are not focusable, selectable, or keyboard navigable.

```tsx
import { Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tabs aria-label="Frogs">
            <TabList>
                <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                <Tab id="poison-dart">Poison Dart Frog</Tab>
                <Tab id="goliath" isDisabled>Goliath Frog</Tab>
            </TabList>
            <TabPanel id="red-eye-tree" padding="inset-md">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" padding="inset-md">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" padding="inset-md">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

In dynamic collections, it may be more convenient to use the disabledKeys prop at the Tabs level instead of isDisabled on individual tabs. Each key in this list corresponds with the `id` prop passed to the Tab component, or automatically derived from the values passed to the items prop. A tab is considered disabled if its id exists in `disabledKeys` or if it has `isDisabled`.

```tsx
import { Collection, Tab, TabList, TabPanel, Tabs } from "@hopper-ui/components";

export default function Example() {
    const items = [
        {
            id: "red-eye-tree",
            header: "Red-Eyed Tree Frog",
            content: "The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest."
        },
        {
            id: "poison-dart",
            header: "Poison Dart Frog",
            content: "The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species’ toxins historically used by Indigenous hunters."
        },
        {
            id: "goliath",
            header: "Goliath Frog",
            content: "The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn’t croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa."
        }
    ];

    return (
        <Tabs aria-label="Frogs" disabledKeys={["poison-dart"]}>
            <TabList>
                <Collection items={items}>
                    {({ id, header }) => (
                        <Tab id={id}>{header}</Tab>
                    )}
                </Collection>
            </TabList>
            <Collection items={items}>
                {({ id, content }) => (
                    <TabPanel id={id} padding="inset-md">
                        {content}
                    </TabPanel>
                )}
            </Collection>
        </Tabs>
    );
}
```

##### Embedded

Tabs can be embedded in other components.

```tsx
import { Button, Heading, Inline, Tab, TabList, TabPanel, Tabs, Text } from "@hopper-ui/components";
import { PlusIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Tabs aria-label="Frogs" variant="heading">
            <Inline justifyItems="space-between" alignY="flex-end">
                <Heading>Goal</Heading>
                <TabList>
                    <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                    <Tab id="poison-dart">Poison Dart Frog</Tab>
                    <Tab id="goliath">Goliath Frog</Tab>
                </TabList>
                <Button>
                    <PlusIcon />
                    <Text>New goal</Text>
                </Button>
            </Inline>
            <TabPanel id="red-eye-tree" paddingTop="inset-lg">
                The Red-Eyed Tree Frog (Agalychnis callidryas) is a vibrant nocturnal climber with bright green skin, red eyes, and blue-striped sides, using its colors to startle predators before blending into the rainforest.
            </TabPanel>
            <TabPanel id="poison-dart" paddingTop="inset-lg">
                The Poison Dart Frog (Dendrobatidae) is a tiny but highly toxic amphibian, flaunting brilliant shades of yellow, blue, or red to warn predators, with some species' toxins historically used by Indigenous hunters.
            </TabPanel>
            <TabPanel id="goliath" paddingTop="inset-lg">
                The Goliath Frog (Conraua goliath) is the largest frog in the world, reaching up to 12 inches long and 7 pounds, yet it doesn't croak, relying instead on movement to communicate in the fast-flowing rivers of West Africa.
            </TabPanel>
        </Tabs>
    );
}
```

##### Links

Tabs can be used as links.

```tsx
import { HopperProvider, Stack, Tab, TabList, Tabs } from "@hopper-ui/components";
import { createMemoryRouter, RouterProvider, useLocation, useNavigate } from "react-router-dom";

export default function Exemple() {
    const router = createMemoryRouter([
        {
            path: "/deleted",
            element: (
                <Stack>
                    <Example />
                    Deleted
                </Stack>
            )
        },
        {
            path: "/shared",
            element: (
                <Stack>
                    <Example />
                    Shared
                </Stack>
            )
        },
        {
            path: "/",
            element: (
                <Stack>
                    <Example />
                    Home
                </Stack>
            )
        }, {
            path: "*",
            element: <Example />
        }
    ]);

    return (
        <RouterProvider router={router} />
    );
}

function Example() {
    const navigate = useNavigate();
    const { pathname } = useLocation();

    return (
        <HopperProvider colorScheme="system" navigate={navigate}>
            <Tabs aria-label="Navigation" selectedKey={pathname}>
                <TabList>
                    <Tab id="/" href="/">Home</Tab>
                    <Tab id="/shared" href="/shared">Shared</Tab>
                    <Tab id="/deleted" href="/deleted">Deleted</Tab>
                </TabList>
            </Tabs>
        </HopperProvider>
    );
}
```

#### Best Practices

Tabs should:

* Represent the same kind of content, such as a list-view with different filters applied. Don't use tabs to group content that is dissimilar.
* Only be active one at a time.
* Not force users to jump back and forth to do a single task. Users should be able to complete this work and find what they need under each tab.
* Not be used for primary navigation.

##### Overflowing content

When the tab group's width is larger than the space necessary to display all of the tabs, we group them within a menu. This grouping happens when two or more tabs cannot be visible in the viewport. We add tabs to the menu as the viewport gets narrower. The grouping is always at the end of the tab group. However, the menu will never regroup all of the tabs of the tab group and will always keep the most important tab (the first one in the tab group) always visible.

When a user selects a tab from the tab grouping menu, the selected tab is displayed in the tab group and takes the position of the tab that was to the left of the grouping.

##### Displaying tabs in grouping

When users click on the tab grouping button, we display the tabs in the same order they would have appeared without the grouping in a Listbox component. All details like count, icons and upsell are displayed in the listbox.

#### Props

##### Tabs

| Prop               | Type                                     | Default      | Description                                                                                                |
| ------------------ | ---------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------- |
| variant            | `"standalone" \| "in-card" \| "heading"` | "standalone" | The variant of the tabs.                                                                                   |
| size               | `"sm" \| "md"`                           | "sm"         | The size of the tabs.                                                                                      |
| isFluid            | `boolean`                                |              | Whether or not the tabs takes up the width of its container.                                               |
| selectedKey        | `Key \| null`                            |              | The currently selected key in the collection (controlled).                                                 |
| defaultSelectedKey | `Key`                                    |              | The initial selected key in the collection (uncontrolled).                                                 |
| isDisabled         | `boolean`                                |              | Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance. |
| disabledKeys       | `Iterable<Key>`                          |              | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.    |
| keyboardActivation | `"automatic" \| "manual"`                | 'automatic'  | Whether tabs are activated automatically on focus or manually.                                             |
| dir                | `string`                                 |              |                                                                                                            |
| lang               | `string`                                 |              |                                                                                                            |
| inert              | `boolean`                                |              |                                                                                                            |
| translate          | `"yes" \| "no"`                          |              |                                                                                                            |
| children           | `ReactNode`                              |              | The children of the component.                                                                             |
| style              | `CSSProperties`                          |              | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.    |
| className          | `string`                                 |              | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.   |

###### Events

| Prop                        | Type                                     | Default | Description                                        |
| --------------------------- | ---------------------------------------- | ------- | -------------------------------------------------- |
| onSelectionChange           | `((key: Key) => void)`                   |         | Handler that is called when the selection changes. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                    |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                    |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                    |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                    |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

##### TabList

| Prop         | Type               | Default | Description                                                                                              |
| ------------ | ------------------ | ------- | -------------------------------------------------------------------------------------------------------- |
| items        | `Iterable<object>` |         | Item objects in the collection.                                                                          |
| dependencies | `readonly any[]`   |         | Values that should invalidate the item cache when using dynamic collections.                             |
| dir          | `string`           |         |                                                                                                          |
| lang         | `string`           |         |                                                                                                          |
| inert        | `boolean`          |         |                                                                                                          |
| translate    | `"yes" \| "no"`    |         |                                                                                                          |
| children     | `ReactNode`        |         | The children of the component.                                                                           |
| className    | `string`           |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| style        | `CSSProperties`    |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.  |

###### Events

| Prop                        | Type                                     | Default | Description |
| --------------------------- | ---------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |             |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

##### Tab

| Prop           | Type                          | Default | Description                                                                                                                                                                      |
| -------------- | ----------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dir            | `string`                      |         |                                                                                                                                                                                  |
| lang           | `string`                      |         |                                                                                                                                                                                  |
| inert          | `boolean`                     |         |                                                                                                                                                                                  |
| translate      | `"yes" \| "no"`               |         |                                                                                                                                                                                  |
| isDisabled     | `boolean`                     |         | Whether the tab is disabled.                                                                                                                                                     |
| href           | `string`                      |         | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                   |
| hrefLang       | `string`                      |         | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                   |
| target         | `HTMLAttributeAnchorTarget`   |         | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                   |
| rel            | `string`                      |         | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                  |
| download       | `string \| boolean`           |         | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
| ping           | `string`                      |         | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                   |
| referrerPolicy | `HTMLAttributeReferrerPolicy` |         | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                 |
| routerOptions  | `undefined`                   |         | Options for the configured client side router.                                                                                                                                   |
| children       | `ReactNode`                   |         | The children of the component.                                                                                                                                                   |
| className      | `string`                      |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.                                                                         |
| style          | `CSSProperties`               |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.                                                                          |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

##### TabPanel

| Prop             | Type            | Default | Description                                                                                                                                                                                                             |
| ---------------- | --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| shouldForceMount | `boolean`       | false   | Whether to mount the tab panel in the DOM even when it is not currently selected. Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually. |
| dir              | `string`        |         |                                                                                                                                                                                                                         |
| lang             | `string`        |         |                                                                                                                                                                                                                         |
| inert            | `boolean`       |         |                                                                                                                                                                                                                         |
| translate        | `"yes" \| "no"` |         |                                                                                                                                                                                                                         |
| children         | `ReactNode`     |         | The children of the component.                                                                                                                                                                                          |
| className        | `string`        |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.                                                                                                                |
| style            | `CSSProperties` |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.                                                                                                                 |

###### Events

| Prop                        | Type                                     | Default | Description |
| --------------------------- | ---------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |             |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `orientation` has been removed, not supported.
* `disabled` has been removed, not supported.
* `manual` has been removed. Refer to this [sample](#usage-manually-activated-tabs) to quickly match old sizes.

### Tag

A tag represents a label, category, keyword, or filter, and can be used for various groupings. If you need multiple tags, consider using the TagGroup component.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/tag/src/Tag.tsx>

Tags can be used to categorize items. Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.

```tsx
import { Tag } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tag id="designer">Designer</Tag>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Tag>
    <Avatar /> /* (Optional) An avatar in the Tag */
    <Icon /> /* (Optional) An icon in the Tag */
    <IconList /> /* (Optional) A list of icons in the Tag */
    <Text /> /* (Optional) Text is optional, but becomes required if any other elements are present */
    <Badge /> /* (Optional) A badge in the Tag */
</Tag>
```

##### Composed Components

A `Tag` uses the following components:

| Component | Description                                                                                                                                        |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Avatar    | Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available. |
| Badge     | A badge is used to bring attention to an element.                                                                                                  |
| Icon      | An icon component is used to render a custom icon.                                                                                                 |
| IconList  | An IconList encapsulates a collection of icons.                                                                                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale.                                                                 |

#### Usage

> **information**
>
> If you need multiple tags to describe an element, consider using the [TagGroup](TagGroup.md) component.

##### Sizes

A tag can vary in size.

```tsx
import { Inline, Tag } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Tag id="designer" size="sm">Designer</Tag>
            <Tag id="developer" size="md">Developer</Tag>
            <Tag id="manager" size="lg">Manager</Tag>
        </Inline>
    );
}
```

##### Disabled

A tag can be disabled using the `isDisabled` prop.

```tsx
import { Tag } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tag id="designer" isDisabled>
            Designer
        </Tag>
    );
}
```

##### Variants

A tag can vary in style using the `variant` prop.

```tsx
import { Inline, Tag } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Tag variant="neutral">
                Neutral
            </Tag>
            <Tag variant="subdued">
                Subdued
            </Tag>
            <Tag variant="progress">
                Progress
            </Tag>
            <Tag variant="positive">
                Positive
            </Tag>
            <Tag variant="caution">
                Caution
            </Tag>
            <Tag variant="negative">
                Negative
            </Tag>
            <Tag variant="option1">
                Option 1
            </Tag>
            <Tag variant="option2">
                Option 2
            </Tag>
            <Tag variant="option3">
                Option 3
            </Tag>
            <Tag variant="option4">
                Option 4
            </Tag>
            <Tag variant="option5">
                Option 5
            </Tag>
            <Tag variant="option6">
                Option 6
            </Tag>
        </Inline>
    );
}
```

##### Invalid

A tag can be set as invalid using the `isInvalid` prop.

```tsx
import { Tag } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tag id="designer" isInvalid>
            Designer
        </Tag>
    );
}
```

##### Loading

A tag can have a loading state using the `isLoading` prop.

```tsx
import { Tag } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tag id="manager" isLoading>Manager</Tag>
    );
}
```

##### Avatar

A tag can contain an avatar.

```tsx
import { Avatar, Tag, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tag id="1" textValue="Frodo Baggin" size="sm">
            <Avatar name="Frodo Baggins" src="https://i.pravatar.cc/96?img=3" />
            <Text>Frodo Baggin</Text>
        </Tag>
    );
}
```

##### Icons

A tag can contain an icon or an icon list.

```tsx
import { IconList, Inline, Tag, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <Tag id="developer" size="sm" textValue="Developer">
                <SparklesIcon />
                <Text>Developer</Text>
            </Tag>
            <Tag id="designer" size="md" textValue="Designer">
                <Text>Designer</Text>
                <IconList>
                    <SparklesIcon />
                    <SparklesIcon />
                    <SparklesIcon />
                </IconList>
            </Tag>
        </Inline>
    );
}
```

##### Count

A tag can contain a count using the `Badge` component.

```tsx
import { Badge, Inline, Tag, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <Tag id="designer" size="sm" textValue="Designer">
                <Text>Designer</Text>
                <Badge>12</Badge>
            </Tag>
            <Tag id="developer" size="md" textValue="Developer">
                <Text>Developer</Text>
                <Badge variant="subdued">100</Badge>
            </Tag>
            <Tag id="manager" size="lg" textValue="Manager">
                <Text>Manager</Text>
                <Badge>99+</Badge>
            </Tag>
        </Inline>
    );
}
```

##### Links

A tag can be a link by using the `href` prop on the Tag component. Tags with an `href` are not selectable.

```tsx
import { Tag } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tag id="1" href="https://www.google.com">Google</Tag>
    );
}
```

##### React Router Links

A tag can be rendered as a react router link when using the `href` prop and setting the `navigate` prop on the `HopperProvider`.

```tsx
import { HopperProvider, Tag } from "@hopper-ui/components";
import { createMemoryRouter, RouterProvider, useNavigate } from "react-router-dom";

export default function App() {
    const router = createMemoryRouter([{
        path: "/123",
        element: <>Navigated Successfully to page 1! <Example /></>
    }, {
        path: "/456",
        element: <>Navigated Successfully to page 2! <Example /></>
    }, {
        path: "*",
        element: <Example />
    }
    ]);

    return (
        <RouterProvider router={router} />
    );
}

function Example() {
    const navigate = useNavigate();

    return (
        <HopperProvider colorScheme="light" navigate={navigate}>
            <Tag id="1" href="/123">Page 1</Tag>
        </HopperProvider>
    );
}
```

#### Best Practices

Tags should:

* Be presented close to or within the input control that allows users to add and remove tags.
* Use appropriate colour semantics when describing states of an object
* Use a size that match the object it relates to. Tags should not be bigger or more prominent than the object it relates to.

#### Props

| Prop             | Type                                  | Default   | Description                                                                                                                                                                        |
| ---------------- | ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isInvalid        | `boolean`                             |           | Whether the tag is invalid or not.                                                                                                                                                 |
| isLoading        | `boolean`                             |           | Whether the tag is loading or not.                                                                                                                                                 |
| size             | `ResponsiveProp<TagSize>`             | "md"      | The size of the tag.                                                                                                                                                               |
| variant          | `TagVariant`                          | "neutral" | The visual style of the Tag.                                                                                                                                                       |
| clearButtonProps | `ClearButtonProps`                    |           | The props of the ClearButton.                                                                                                                                                      |
| spinnerProps     | `SpinnerProps`                        |           | The props of the Spinner.                                                                                                                                                          |
| style            | `StyleOrFunction<TagRenderProps>`     |           | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| dir              | `string`                              |           |                                                                                                                                                                                    |
| lang             | `string`                              |           |                                                                                                                                                                                    |
| inert            | `boolean`                             |           |                                                                                                                                                                                    |
| translate        | `"yes" \| "no"`                       |           |                                                                                                                                                                                    |
| id               | `Key`                                 |           | A unique id for the tag.                                                                                                                                                           |
| textValue        | `string`                              |           | A string representation of the tags's contents, used for accessibility. Required if children is not a plain text string.                                                           |
| isDisabled       | `boolean`                             |           | Whether the tag is disabled.                                                                                                                                                       |
| children         | `ChildrenOrFunction<TagRenderProps>`  |           | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className        | `ClassNameOrFunction<TagRenderProps>` |           | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| href             | `string`                              |           | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                     |
| hrefLang         | `string`                              |           | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                     |
| target           | `HTMLAttributeAnchorTarget`           |           | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                     |
| rel              | `string`                              |           | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                    |
| download         | `string \| boolean`                   |           | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).   |
| ping             | `string`                              |           | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                     |
| referrerPolicy   | `HTMLAttributeReferrerPolicy`         |           | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                   |
| routerOptions    | `undefined`                           |           | Options for the configured client side router.                                                                                                                                     |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                | Type      | Default | Description                                                                                                                                                                                                                                                                                                                                               |
| ------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| excludeFromTabOrder | `boolean` |         | This property is only available for Tag without a TagGroup. Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* A dot is not supported
* `fluid` is not supported.
* `variant` values are now `neutral` | `subdued` | `progress` | `positive` | `caution` | `negative` | `option1` | `option2` | `option3` | `option4` | `option5` | `option6` and not `solid` | `outline`.
* `validationState` is not supported. Use `isInvalid` instead.

### TagGroup

The TagGroup is a dynamic UI component that encapsulates a collection of tags. Each tag represents a label, category, keyword, or filter, and can be used for various groupings

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/tag/src/TagGroup.tsx>

Multiple or single tags can be used to categorize items. Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs">
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

#### Anatomy

##### Structure

```tsx
<TagGroup>
    <Tag> /* (Required) An item in the TagGroup */
        <Avatar /> /* (Optional) An avatar in the Tag */
        <Icon /> /* (Optional) An icon in the Tag */
        <IconList /> /* (Optional) A list of icons in the Tag */
        <Text /> /* (Optional) Text is optional, but becomes required if any other elements are present */
        <Badge /> /* (Optional) A badge in the Tag */
    </Tag>
</TagGroup>
```

##### Composed Components

A `Tag` within a `TagGroup` uses the following components:

| Component | Description                                                                                                                                        |
| --------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Avatar    | Avatars are used to represent a user, a team or another entity in the Workleap ecosystem. They are often paired with text where room is available. |
| Badge     | A badge is used to bring attention to an element.                                                                                                  |
| Icon      | An icon component is used to render a custom icon.                                                                                                 |
| IconList  | An IconList encapsulates a collection of icons.                                                                                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale.                                                                 |

#### Usage

##### Label

A tag group can use the `label` prop to provide more context to the user.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup label="Jobs">
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

##### Description

A tag group can use a `description` prop to provide more information to the user.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs" description="The jobs in this list are in no particular order.">
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

##### Disabled

Tags can be disabled using the `disabledKeys` prop.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs" disabledKeys={["1", "2", "3"]}>
            <Tag id="1">Designer</Tag>
            <Tag id="2">Developer</Tag>
            <Tag id="3">Manager</Tag>
        </TagGroup>
    );
}
```

##### Disabled Item

A tag can be disabled using the `isDisabled` prop.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs">
            <Tag id="designer" isDisabled>
                Designer
            </Tag>
            <Tag id="developer">
                Developer
            </Tag>
            <Tag id="manager">
                Manager
            </Tag>
        </TagGroup>
    );
}
```

##### Invalid Tag

If a tag group is invalid, it will display an error message. Displaying this error message will hide the helper message.

```tsx
import { Tag, TagGroup, type Selection } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [isInvalid, setIsInvalid] = useState(true);

    function onChange(keys: Selection) {
        // if value is empty, then it is invalid
        if (typeof keys === "object") {
            setIsInvalid(keys.size === 0);
        }
    }

    return (
        <TagGroup
            aria-label="Jobs"
            selectionMode="multiple"
            onSelectionChange={onChange}
            isInvalid={isInvalid}
            description="Unselect all to show the error message"
            errorMessage="Select a job and the description will appear"
        >
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

##### Removable

Tags can be removed using the `onRemove` callback. If you are using a keyboard, you can press the backspace key to remove a tag.

```tsx
import { Tag, TagGroup, type Selection } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup
            aria-label="Jobs"
            onRemove={(ids: Selection) => {
                alert(`Remove: ${[...ids]}`);
            }}
        >
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

##### Readonly

Tags can be set to read-only using the `isReadOnly` prop. This will prevent the user from removing tags.

```tsx
import { Tag, TagGroup, type Selection } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup
            aria-label="Jobs"
            isReadOnly
            onRemove={(ids: Selection) => {
                alert(`Remove: ${[...ids]}`);
            }}
        >
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

##### Selectable

Tags can be selected using the `selectionMode` prop. Use `defaultSelectedKeys` for initially selected items (uncontrolled) and `selectedKeys` to manage selected items (controlled). The selected keys should match the item's `id` prop.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs" selectionMode="multiple" defaultSelectedKeys={["designer", "developer"]}>
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

##### Sizes

A tag group can vary in size.

```tsx
import { Stack, Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <TagGroup aria-label="Jobs" size="sm" >
                <Tag id="designer">Designer</Tag>
                <Tag id="developer">Developer</Tag>
                <Tag id="manager">Manager</Tag>
            </TagGroup>
            <TagGroup aria-label="Jobs" size="md" >
                <Tag id="designer">Designer</Tag>
                <Tag id="developer">Developer</Tag>
                <Tag id="manager">Manager</Tag>
            </TagGroup>
            <TagGroup aria-label="Jobs" size="lg" >
                <Tag id="designer">Designer</Tag>
                <Tag id="developer">Developer</Tag>
                <Tag id="manager">Manager</Tag>
            </TagGroup>
        </Stack>
    );
}
```

##### Item Sizes

A tag can vary in size.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs">
            <Tag id="designer" size="sm">Designer</Tag>
            <Tag id="developer" size="md">Developer</Tag>
            <Tag id="manager" size="lg">Manager</Tag>
        </TagGroup>
    );
}
```

##### Variants

A tag group can vary in style using the `variant` prop. The one seen here is `subdued`.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs" variant="subdued">
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

##### Item Variants

A tag can vary in style using the `variant` prop.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs">
            <Tag variant="neutral">
                Neutral
            </Tag>
            <Tag variant="subdued">
                Subdued
            </Tag>
            <Tag variant="progress">
                Progress
            </Tag>
            <Tag variant="positive">
                Positive
            </Tag>
            <Tag variant="caution">
                Caution
            </Tag>
            <Tag variant="negative">
                Negative
            </Tag>
            <Tag variant="option1">
                Option 1
            </Tag>
            <Tag variant="option2">
                Option 2
            </Tag>
            <Tag variant="option3">
                Option 3
            </Tag>
            <Tag variant="option4">
                Option 4
            </Tag>
            <Tag variant="option5">
                Option 5
            </Tag>
            <Tag variant="option6">
                Option 6
            </Tag>
        </TagGroup>
    );
}
```

##### Empty List

Using the `renderEmptyState` prop, you can customize the empty state message when there are no tags.

```tsx
import { TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Status" renderEmptyState={() => "No jobs posting available"}>
            {[]}
        </TagGroup>
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a TagGroup.

```tsx
import { ContextualHelp, Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs" contextualHelp={<ContextualHelp>These are all possible jobs</ContextualHelp>}>
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

##### Invalid TagGroup

A tag can be set as invalid using the `isInvalid` prop.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs">
            <Tag id="designer" isInvalid>
                Designer
            </Tag>
            <Tag id="developer">
                Developer
            </Tag>
            <Tag id="manager">
                Manager
            </Tag>
        </TagGroup>
    );
}
```

##### Loading

A tag can have a loading state using the `isLoading` prop.

```tsx
import { Tag, TagGroup, type Selection } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup
            aria-label="Jobs"
            onRemove={(ids: Selection) => {
                alert(`Remove: ${[...ids]}`);
            }}
        >
            <Tag id="manager" isLoading>Manager</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="designer">Designer</Tag>
        </TagGroup>
    );
}
```

##### Avatar

A tag can contain an avatar.

```tsx
import { Avatar, Tag, TagGroup, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Team Members">
            <Tag id="1" textValue="Frodo Baggin" size="sm">
                <Avatar name="Frodo Baggins" src="https://i.pravatar.cc/96?img=3" />
                <Text>Frodo Baggin</Text>
            </Tag>
            <Tag id="2" textValue="Karen Smith" size="md">
                <Avatar name="Karen Smith" />
                <Text>Karen Smith</Text>
            </Tag>
            <Tag id="3" textValue="John Smith" size="lg">
                <Text>John Smith</Text>
                <Avatar name="John Smith" />
            </Tag>
        </TagGroup>
    );
}
```

##### Icons

A tag can contain an icon or an icon list.

```tsx
import { IconList, Tag, TagGroup, Text } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs">
            <Tag id="developer" size="sm" textValue="Developer">
                <SparklesIcon />
                <Text>Developer</Text>
            </Tag>
            <Tag id="designer" size="md" textValue="Designer">
                <Text>Designer</Text>
                <IconList>
                    <SparklesIcon />
                    <SparklesIcon />
                    <SparklesIcon />
                </IconList>
            </Tag>
            <Tag id="manager" size="lg" textValue="Manager">
                <Text>Manager</Text>
                <IconList>
                    <SparklesIcon />
                    <SparklesIcon />
                    <SparklesIcon />
                </IconList>
            </Tag>
        </TagGroup>
    );
}
```

##### Count

A tag can contain a count using the `Badge` component.

```tsx
import { Badge, Tag, TagGroup, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs">
            <Tag id="designer" size="sm" textValue="Designer">
                <Text>Designer</Text>
                <Badge>12</Badge>
            </Tag>
            <Tag id="developer" size="md" textValue="Developer">
                <Text>Developer</Text>
                <Badge variant="subdued">100</Badge>
            </Tag>
            <Tag id="manager" size="lg" textValue="Manager">
                <Text>Manager</Text>
                <Badge>99+</Badge>
            </Tag>
        </TagGroup>
    );
}
```

##### Links

A tag can be a link by using the `href` prop on the Tag component. Tags with an `href` are not selectable.

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup aria-label="Jobs">
            <Tag id="1" href="https://www.google.com">Google</Tag>
            <Tag id="2" href="https://www.bing.com">Bing</Tag>
            <Tag id="3" href="https://www.yahoo.com">Yahoo</Tag>
        </TagGroup>
    );
}
```

##### React Router Links

A tag can be rendered as a react router link when using the `href` prop and setting the `navigate` prop on the `HopperProvider`.

```tsx
import { HopperProvider, Tag, TagGroup } from "@hopper-ui/components";
import { createMemoryRouter, RouterProvider, useNavigate } from "react-router-dom";

export default function App() {
    const router = createMemoryRouter([{
        path: "/123",
        element: <>Navigated Successfully to page 1! <Example /></>
    }, {
        path: "/456",
        element: <>Navigated Successfully to page 2! <Example /></>
    }, {
        path: "*",
        element: <Example />
    }
    ]);

    return (
        <RouterProvider router={router} />
    );
}

function Example() {
    const navigate = useNavigate();

    return (
        <HopperProvider colorScheme="light" navigate={navigate}>
            <TagGroup aria-label="tag-group">
                <Tag id="1" href="/123">Page 1</Tag>
                <Tag id="2" href="/456">Page 2</Tag>
            </TagGroup>
        </HopperProvider>
    );
}
```

#### Best Practices

Tags should:

* Be presented close to or within the input control that allows users to add and remove tags.
* Use appropriate colour semantics when describing states of an object
* Use a size that match the object it relates to. Tags should not be bigger or more prominent than the object it relates to.

#### Props

##### TagGroup

| Prop                   | Type                                                                                    | Default          | Description                                                                                                                                                                                                                                                                                                      |
| ---------------------- | --------------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isInvalid              | `boolean`                                                                               |                  | Whether the tags are invalid or not.                                                                                                                                                                                                                                                                             |
| size                   | `ResponsiveProp<TagSize>`                                                               | "md"             | A tag can vary in size.                                                                                                                                                                                                                                                                                          |
| tagListProps           | `(Omit<Omit<TagListProps<T>, ListProps>, keyof StyledSystemProps> & StyledSystemProps)` |                  | The tag list props                                                                                                                                                                                                                                                                                               |
| variant                | `TagVariant`                                                                            | "neutral"        | The visual style of the TagGroup.                                                                                                                                                                                                                                                                                |
| isReadOnly             | `boolean`                                                                               |                  | Whether or not the tags should render as readonly.                                                                                                                                                                                                                                                               |
| style                  | `CSSProperties`                                                                         |                  | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.                                                                                                                                                                                                          |
| escapeKeyBehavior      | `"clearSelection" \| "none"`                                                            | 'clearSelection' | Whether pressing the escape key should clear selection in the TagGroup or not.Most experiences should not modify this option as it eliminates a keyboard user's ability to easily clear selection. Only use if the escape key is being handled externally or should not trigger selection clearing contextually. |
| selectionBehavior      | `SelectionBehavior`                                                                     |                  | How multiple selection should behave in the collection.                                                                                                                                                                                                                                                          |
| shouldSelectOnPressUp  | `boolean`                                                                               |                  | Whether selection should occur on press up instead of press down.                                                                                                                                                                                                                                                |
| disabledKeys           | `Iterable<Key>`                                                                         |                  | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.                                                                                                                                                                                                          |
| selectionMode          | `SelectionMode`                                                                         |                  | The type of selection that is allowed in the collection.                                                                                                                                                                                                                                                         |
| disallowEmptySelection | `boolean`                                                                               |                  | Whether the collection allows empty selection.                                                                                                                                                                                                                                                                   |
| selectedKeys           | `Iterable<Key> \| "all"`                                                                |                  | The currently selected keys in the collection (controlled).                                                                                                                                                                                                                                                      |
| defaultSelectedKeys    | `Iterable<Key> \| "all"`                                                                |                  | The initial selected keys in the collection (uncontrolled).                                                                                                                                                                                                                                                      |
| className              | `string`                                                                                |                  | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.                                                                                                                                                                                                         |
| dir                    | `string`                                                                                |                  |                                                                                                                                                                                                                                                                                                                  |
| lang                   | `string`                                                                                |                  |                                                                                                                                                                                                                                                                                                                  |
| inert                  | `boolean`                                                                               |                  |                                                                                                                                                                                                                                                                                                                  |
| translate              | `"yes" \| "no"`                                                                         |                  |                                                                                                                                                                                                                                                                                                                  |
| children               | `ReactNode \| ((item: T) => ReactNode)`                                                 |                  | The contents of the collection.                                                                                                                                                                                                                                                                                  |
| items                  | `Iterable<T>`                                                                           |                  | Item objects in the collection.                                                                                                                                                                                                                                                                                  |
| renderEmptyState       | `((props: TagListRenderProps) => ReactNode)`                                            |                  | Provides content to display when there are no items in the tag list.                                                                                                                                                                                                                                             |
| label                  | `ReactNode`                                                                             |                  | The label of the field.                                                                                                                                                                                                                                                                                          |
| description            | `ReactNode`                                                                             |                  | The helper message of the field.                                                                                                                                                                                                                                                                                 |
| errorMessage           | `ReactNode \| ((v: ValidationResult) => ReactNode)`                                     |                  | The error message of the field.                                                                                                                                                                                                                                                                                  |
| necessityIndicator     | `NecessityIndicator`                                                                    |                  | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                                                                                           |
| contextualHelp         | `ReactNode`                                                                             |                  | A ContextualHelp element to place next to the label.                                                                                                                                                                                                                                                             |

###### Events

| Prop                        | Type                                     | Default | Description                                        |
| --------------------------- | ---------------------------------------- | ------- | -------------------------------------------------- |
| onRemove                    | `((keys: Set<Key>) => void)`             |         | Handler that is called when a user deletes a tag.  |
| onSelectionChange           | `((keys: Selection) => void)`            |         | Handler that is called when the selection changes. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                    |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                    |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                    |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                    |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |

##### Tag

| Prop             | Type                                  | Default   | Description                                                                                                                                                                        |
| ---------------- | ------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| isInvalid        | `boolean`                             |           | Whether the tag is invalid or not.                                                                                                                                                 |
| isLoading        | `boolean`                             |           | Whether the tag is loading or not.                                                                                                                                                 |
| size             | `ResponsiveProp<TagSize>`             | "md"      | The size of the tag.                                                                                                                                                               |
| variant          | `TagVariant`                          | "neutral" | The visual style of the Tag.                                                                                                                                                       |
| clearButtonProps | `ClearButtonProps`                    |           | The props of the ClearButton.                                                                                                                                                      |
| spinnerProps     | `SpinnerProps`                        |           | The props of the Spinner.                                                                                                                                                          |
| style            | `StyleOrFunction<TagRenderProps>`     |           | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| dir              | `string`                              |           |                                                                                                                                                                                    |
| lang             | `string`                              |           |                                                                                                                                                                                    |
| inert            | `boolean`                             |           |                                                                                                                                                                                    |
| translate        | `"yes" \| "no"`                       |           |                                                                                                                                                                                    |
| id               | `Key`                                 |           | A unique id for the tag.                                                                                                                                                           |
| textValue        | `string`                              |           | A string representation of the tags's contents, used for accessibility. Required if children is not a plain text string.                                                           |
| isDisabled       | `boolean`                             |           | Whether the tag is disabled.                                                                                                                                                       |
| children         | `ChildrenOrFunction<TagRenderProps>`  |           | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className        | `ClassNameOrFunction<TagRenderProps>` |           | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| href             | `string`                              |           | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href).                                                                                     |
| hrefLang         | `string`                              |           | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang).                                                     |
| target           | `HTMLAttributeAnchorTarget`           |           | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target).                                                                     |
| rel              | `string`                              |           | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).                                    |
| download         | `string \| boolean`                   |           | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).   |
| ping             | `string`                              |           | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping).                                     |
| referrerPolicy   | `HTMLAttributeReferrerPolicy`         |           | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy).                                   |
| routerOptions    | `undefined`                           |           | Options for the configured client side router.                                                                                                                                     |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                | Type      | Default | Description                                                                                                                                                                                                                                                                                                                                               |
| ------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| excludeFromTabOrder | `boolean` |         | This property is only available for Tag without a TagGroup. Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |

#### Migration Notes

##### TagGroup

Coming from Orbiter, you should be aware of the following changes:

* `onClear` is not supported.
* `validationState` is not supported. Use `isInvalid` instead,
* `readOnly` has been renamed `isReadOnly`.

##### Tag

Coming from Orbiter, you should be aware of the following changes:

* A dot is not supported
* `fluid` is not supported.
* `variant` values are now `neutral` | `subdued` | `progress` | `positive` | `caution` | `negative` | `option1` | `option2` | `option3` | `option4` | `option5` | `option6` and not `solid` | `outline`.
* `validationState` is not supported. Use `isInvalid` instead.

### Text

A text component is a primitive component matching Hopper's typography type scale.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/typography/text/src/Text.tsx>

```tsx
import { Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Text>Software built for everyone to do their best work</Text>
    );
}
```

#### Usage

##### Sizes

You can alter the size of the text by specifying a `size` prop. The available sizes match the Hopper Typography Type Scale — a type scale is a set of [font-size and line-height](https://hopper.workleap.design/tokens/semantic/typography#tokens-body) pairs.

```tsx
import { Stack, Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <Text size="xs">Software built for everyone to do their best work</Text>
            <Text size="sm">Software built for everyone to do their best work</Text>
            <Text size="md">Software built for everyone to do their best work</Text>
            <Text size="lg">Software built for everyone to do their best work</Text>
            <Text size="xl">Software built for everyone to do their best work</Text>
            <Text size="2xl">Software built for everyone to do their best work</Text>
        </Stack>
    );
}
```

##### Inherit

You can also alter the size to match the parent element's type scale by using the `inherit` size.

```tsx
import { Text, Div } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div fontSize="body-xs">
            <Text size="inherit">Software built for everyone to do their best work</Text>
        </Div>
    );
}
```

##### Nested

The Text component can be nested within other Text components and inherit the parent's size by default.

```tsx
import { Text } from "@hopper-ui/components";

export default function Example() {
    return (
        <Text size="lg">
            <Text color="primary">Mr.</Text> Johnson
        </Text>
    );
}
```

#### Props

| Prop        | Type                       | Default | Description                       |
| ----------- | -------------------------- | ------- | --------------------------------- |
| size        | `ResponsiveProp<TextSize>` | "md"    | The Typography Type Scale to use. |
| style       | `CSSProperties`            |         |                                   |
| elementType | `string`                   |         |                                   |
| className   | `string`                   |         |                                   |

###### Accessibility

| Prop | Type     | Default | Description |
| ---- | -------- | ------- | ----------- |
| id   | `string` |         |             |

### TextArea

A text area serves as a multi-line, plain-text editing interface.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/inputs/src/TextArea.tsx>

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea placeholder="123 Main St, City, State" label="Address" />
    );
}
```

#### Usage

##### Disabled

A text area in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea placeholder="123 Main St, City, State" isDisabled label="Address" />
    );
}
```

##### ReadOnly

The `isReadOnly` prop makes the text area's text content immutable. Unlike `isDisabled`, the text area remains focusable and the contents can still be copied. See [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea placeholder="123 Main St, City, State" value="280 Baker Street" isReadOnly label="Address" />
    );
}
```

##### Error

A text area can be displayed in an error state to indicate that the user input is invalid.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea placeholder="123 Main St, City, State" isInvalid label="Address" errorMessage="This field is required" />
    );
}
```

##### Sizes

A text area can vary in size. The height is determined by the number of rows. Each size has a unique font size, resulting in varying heights across different sizes.

```tsx
import { Stack, TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <TextArea label="Address" placeholder="123 Main St, City, State" size="sm" />
            <TextArea label="Address" placeholder="123 Main St, City, State" />
        </Stack>
    );
}
```

##### Labeling

If a visible label isn't specified, an `aria-label` must be provided to the text area for accessibility. If the field is labeled by a separate element, an `aria-labelledby` prop must be provided using the ID of the labeling element instead.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea placeholder="123 Main St, City, State" aria-label="Address" />
    );
}
```

##### Description

A text area can have a description using the [HelperMessage](HelperMessage.md) component to provide additional context to the user.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea placeholder="123 Main St, City, State" label="Address" description="Enter on multiple lines if needed" />
    );
}
```

##### Character Count

A character count can be displayed below the input. The character count is based on the `maxLength` prop. If the `maxLength` prop is not set, the character count will not be displayed.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea placeholder="123 Main St, City, State" showCharacterCount maxLength={60} label="Address" />
    );
}
```

##### Max Length Exceeded

To exceed the max length, set the `allowExceedingMaxLength` prop to `true` – default is `false`. When the character count is displayed, it turns red if the max length is exceeded.

Note: If allowExceedingMaxLength is set, a character count is required to be set as well.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea
            showCharacterCount
            maxLength={20}
            allowExceedingMaxLength
            defaultValue="I appreciate their open-door policy and willingness to listen to our ideas and concerns."
            label="Comment"
        />
    );
}
```

##### Rows

The `rows` prop can be used to set the height of the text area and should be used in favor of the `height` prop. One row is equivalent to the height of one line of text.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea
            rows={8}
            defaultValue="I appreciate their open-door policy and willingness to listen to our ideas and concerns. "
            label="Name"
        />
    );
}
```

##### Min Rows

The `minRows` prop can be used to set the minimum height of the text area and should be used in favor of the `minHeight` prop. Defaults to 3.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea
            minRows={1}
            label="Prompt"
            placeholder="Ask anything..."
        />
    );
}
```

##### Max Rows

The `maxRows` prop can be used to set the maximum height of the text area and should be used in favor of the `maxHeight` prop. It differs from the `rows` prop in that it will not set the initial height of the text area.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea
            maxRows={8}
            defaultValue="I appreciate their open-door policy and willingness to listen to our ideas and concerns."
            label="Comment"
        />
    );
}
```

##### Vertical Resize

The `resizeMode` prop can be used to set the resize behavior of the text area. The default behavior is `none`, which prevents the user from resizing the text area. The `vertical` behavior allows the user to resize the text area vertically.

```tsx
import { TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea placeholder="123 Main St, City, State" resizeMode="vertical" label="Address" />
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a TextArea.

```tsx
import { ContextualHelp, TextArea } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextArea
            placeholder="123 Main St, City, State"
            label="Address"
            contextualHelp={<ContextualHelp>Write the full address</ContextualHelp>}
        />
    );
}
```

#### Best Practices

Use a text area when the expected user input is more than a few words and could span multiple lines. It is commonly used for features like commentary or descriptions. It supports all the same states and functionality as text fields, except for the password functionality. A text area has several unique functionality not included in the text field, like the resize handle, character counter and text formatting tool bar.

* Be clearly labeled so it's obvious to users what they should enter into the field.
* Be labeled as “Optional” when you need to request input that's not required. View the Form pattern for more details on this.
* Only ask for information that's really needed.
* Validate input as soon as users have finished interacting with a field, but not before.

#### Props

| Prop                         | Type                                                                                  | Default  | Description                                                                                                                                                                                                                                      |
| ---------------------------- | ------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| showCharacterCount           | `boolean`                                                                             |          | True to display the number of remaining allowed characters on the right of the input. Requires a valid value in the "maxLength" prop.                                                                                                            |
| minRows                      | `number`                                                                              | 3        | The minimum number of visible text lines.                                                                                                                                                                                                        |
| maxRows                      | `number`                                                                              |          | The maximum number of visible text lines before displaying a scrollbar.                                                                                                                                                                          |
| placeholder                  | `string`                                                                              |          | The placeholder text when the TextArea is empty.                                                                                                                                                                                                 |
| rows                         | `number`                                                                              |          | See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-rows).                                                                                                                                                         |
| cols                         | `number`                                                                              |          | See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-cols).                                                                                                                                                         |
| isFluid                      | `ResponsiveProp<boolean>`                                                             |          | If `true`, the TextArea will take all available width.                                                                                                                                                                                           |
| allowExceedingMaxLength      | `boolean`                                                                             |          | This should only be used with the `showCharacterCount` prop. If `true`, the TextArea will allow the text to go over the max length, but it will add an error look to the character count.                                                        |
| resizeMode                   | `ResponsiveProp<ResizeMode>`                                                          | "none"   | The resize mode value of the TextArea. It's equivalent to the CSS resize property.                                                                                                                                                               |
| inputRef                     | `MutableRefObject<HTMLTextAreaElement \| null>`                                       |          | A ref for the HTML textarea element.                                                                                                                                                                                                             |
| inputGroupProps              | `Partial<InputGroupProps>`                                                            |          | The props for the InputGroup.                                                                                                                                                                                                                    |
| inputProps                   | `Partial<TextAreaProps>`                                                              |          | The props for the Input.                                                                                                                                                                                                                         |
| remainingCharacterCountProps | `RemainingCharacterCountProps`                                                        |          | The props for the RemainingCharacterCount.                                                                                                                                                                                                       |
| form                         | `string`                                                                              |          | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).                     |
| style                        | `StyleOrFunction<TextFieldRenderProps>`                                               |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                |
| pattern                      | `string`                                                                              |          | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).                                                                                 |
| validationBehavior           | `"native" \| "aria"`                                                                  | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                   |
| enterKeyHint                 | `"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`             |          | An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).                                    |
| isDisabled                   | `boolean`                                                                             |          | Whether the input is disabled.                                                                                                                                                                                                                   |
| isReadOnly                   | `boolean`                                                                             |          | Whether the input can be selected but not changed by the user.                                                                                                                                                                                   |
| isRequired                   | `boolean`                                                                             |          | Whether user input is required on the input before form submission.                                                                                                                                                                              |
| isInvalid                    | `boolean`                                                                             |          | Whether the value is invalid.                                                                                                                                                                                                                    |
| validate                     | `((value: string) => true \| ValidationError \| null)`                                |          | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.        |
| autoFocus                    | `boolean`                                                                             |          | Whether the element should receive focus on render.                                                                                                                                                                                              |
| value                        | `string`                                                                              |          | The current value (controlled).                                                                                                                                                                                                                  |
| defaultValue                 | `string`                                                                              |          | The default value (uncontrolled).                                                                                                                                                                                                                |
| autoComplete                 | `string`                                                                              |          | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).                                                            |
| maxLength                    | `number`                                                                              |          | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).                                                                                        |
| minLength                    | `number`                                                                              |          | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).                                                                                         |
| type                         | `"search" \| "text" \| (string & {}) \| "url" \| "tel" \| "email" \| "password"`      | 'text'   | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).                                                                                                                         |
| inputMode                    | `"search" \| "text" \| "none" \| "url" \| "tel" \| "email" \| "numeric" \| "decimal"` |          | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).                             |
| autoCorrect                  | `string`                                                                              |          | An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete). |
| spellCheck                   | `string`                                                                              |          | An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).                                                          |
| name                         | `string`                                                                              |          | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                                    |
| className                    | `ClassNameOrFunction<TextFieldRenderProps>`                                           |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                               |
| dir                          | `string`                                                                              |          |                                                                                                                                                                                                                                                  |
| lang                         | `string`                                                                              |          |                                                                                                                                                                                                                                                  |
| inert                        | `boolean`                                                                             |          |                                                                                                                                                                                                                                                  |
| translate                    | `"yes" \| "no"`                                                                       |          |                                                                                                                                                                                                                                                  |
| description                  | `ReactNode`                                                                           |          | The helper message of the field.                                                                                                                                                                                                                 |
| errorMessage                 | `ReactNode \| ((v: ValidationResult) => ReactNode)`                                   |          | The error message of the field.                                                                                                                                                                                                                  |
| label                        | `ReactNode`                                                                           |          | The label of the field.                                                                                                                                                                                                                          |
| necessityIndicator           | `NecessityIndicator`                                                                  |          | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                           |
| size                         | `ResponsiveProp<FieldSize>`                                                           | "md"     | A Field can vary in size.                                                                                                                                                                                                                        |
| contextualHelp               | `ReactNode`                                                                           |          | A ContextualHelp element to place next to the label.                                                                                                                                                                                             |

###### Events

| Prop                        | Type                                                   | Default | Description                                                                                                                                                                                                |
| --------------------------- | ------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onFocus                     | `((e: FocusEvent<HTMLInputElement, Element>) => void)` |         | Handler that is called when the element receives focus.                                                                                                                                                    |
| onBlur                      | `((e: FocusEvent<HTMLInputElement, Element>) => void)` |         | Handler that is called when the element loses focus.                                                                                                                                                       |
| onFocusChange               | `((isFocused: boolean) => void)`                       |         | Handler that is called when the element's focus status changes.                                                                                                                                            |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                         |         | Handler that is called when a key is pressed.                                                                                                                                                              |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                         |         | Handler that is called when a key is released.                                                                                                                                                             |
| onChange                    | `((value: string) => void)`                            |         | Handler that is called when the value changes.                                                                                                                                                             |
| onCopy                      | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).                                                                          |
| onCut                       | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).                                                                             |
| onPaste                     | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).                                                                         |
| onCompositionStart          | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).                   |
| onCompositionEnd            | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| onCompositionUpdate         | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).              |
| onSelect                    | `ReactEventHandler<HTMLInputElement>`                  |         | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).                                                               |
| onBeforeInput               | `FormEventHandler<HTMLInputElement>`                   |         | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).                                            |
| onInput                     | `FormEventHandler<HTMLInputElement>`                   |         | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).                                                              |
| onClick                     | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                            |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                            |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                  | Type                                                                                  | Default | Description                                                                                                                                                                                                                                                                                   |
| --------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-activedescendant | `string`                                                                              |         | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.                                                                                                                                                                              |
| aria-autocomplete     | `"none" \| "inline" \| "list" \| "both"`                                              |         | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.                                                                                                |
| aria-haspopup         | `boolean \| "dialog" \| "menu" \| "grid" \| "false" \| "true" \| "listbox" \| "tree"` |         | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.                                                                                                                                                                |
| aria-controls         | `string`                                                                              |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| aria-label            | `string`                                                                              |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby       | `string`                                                                              |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby      | `string`                                                                              |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details          | `string`                                                                              |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |
| excludeFromTabOrder   | `boolean`                                                                             |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id                    | `string`                                                                              |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).                                                                                                                                                                           |
| aria-errormessage     | `string`                                                                              |         | Identifies the element that provides an error message for the object.                                                                                                                                                                                                                         |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* Boolean props are now prefixed by `is`.
* There is no longer a loading state.
* `icon` prop has been removed since it is not used in a TextArea.
* `button` prop has been removed.
* `wrapperProps` no longer exists.
* `validationState` has been changed to `isInvalid`.
* `showCharacterCount` has been added.

### TextField

A text field allows a user to enter a plain text value.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/inputs/src/TextField.tsx>

Specialized text fields are available for different scenarios:

* If you want a text field with `type="search"`, use the [SearchField](./SearchField.md) component.
* If you want a text field that shows/hides a password, use the [PasswordField](./PasswordField.md) component.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField placeholder="Full name (e.g., Jane Smith)" label="Name" />
    );
}
```

#### Usage

##### Disabled

A text field in a disabled state shows that an input field exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that a field may become available later.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField placeholder="Full name (e.g., Jane Smith)" isDisabled label="Name" />
    );
}
```

##### ReadOnly

The `isReadOnly` prop makes the text field's text content immutable. Unlike `isDisabled`, the text field remains focusable and the contents can still be copied. See [the MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField value="John Doe" placeholder="Full name (e.g., Jane Smith)" isReadOnly label="Name" />
    );
}
```

##### Error

A text field can be displayed in an error state to indicate that the user input is invalid.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField
            placeholder="Full name (e.g., Jane Smith)"
            isInvalid
            label="Name"
            errorMessage="This field is required"
        />
    );
}
```

##### Clearable

The `isClearable` prop can be set to `true` to display a clear button at the end of the input.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField defaultValue="John Doe" placeholder="Full name (e.g., Jane Smith)" isClearable label="Name" />
    );
}
```

##### Sizes

Text fields have multiple sizes to choose from.

```tsx
import { Stack, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <TextField label="Name" placeholder="Full name (e.g., Jane Smith)" size="sm" />
            <TextField label="Name" placeholder="Full name (e.g., Jane Smith)" />
        </Stack>
    );
}
```

##### Labeling

If a visible label isn't specified, an `aria-label` must be provided to the text field for accessibility. If the field is labeled by a separate element, an `aria-labelledby` prop must be provided using the ID of the labeling element instead.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField placeholder="Full name (e.g., Jane Smith)" aria-label="Name" />
    );
}
```

##### Description

A text field with a helper message.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField
            placeholder="Full name (e.g., Jane Smith)"
            label="Name"
            description="Enter both first name and last name"
        />
    );
}
```

##### Icon Prefix

An icon can be displayed at the start of the input.

```tsx
import { TextField } from "@hopper-ui/components";
import { SearchIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <TextField placeholder="Full name (e.g., Jane Smith)" prefix={<SearchIcon />} label="Name" />
    );
}
```

##### Text Prefix

A short text can be displayed at the start of the input.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField placeholder="(000) 000-0000" prefix="+1" label="Phone number" />
    );
}
```

##### Character Count

A character count can be displayed at the end of the input. The character count is based on the `maxLength` prop. If the `maxLength` prop is not set, the character count will not be displayed.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField placeholder="Full name (e.g., Jane Smith)" showCharacterCount maxLength={60} label="Name" />
    );
}
```

##### Max Length Exceeded

To exceed the max length, set the `allowExceedingMaxLength` prop to `true` – default is `false`. When the character count is displayed, it turns red if the max length is exceeded.

Note: If allowExceedingMaxLength is set, a character count is required to be set as well.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField
            showCharacterCount
            maxLength={20}
            allowExceedingMaxLength
            defaultValue="I appreciate their open-door policy and willingness to listen to our ideas and concerns."
            label="Name"
        />
    );
}
```

##### ContextualHelp

A [ContextualHelp](/components/ContextualHelp.md) element may be placed next to the label to provide additional information or help about a TextField.

```tsx
import { ContextualHelp, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField
            contextualHelp={<ContextualHelp>Write your name</ContextualHelp>}
            placeholder="Full name (e.g., Jane Smith)"
            label="Name"
        />
    );
}
```

##### Fluid

A text field can take the width of its container.

```tsx
import { TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <TextField placeholder="Full name (e.g., Jane Smith)" isFluid label="Name" />
    );
}
```

##### Debounce

The `useDebounce` hook can be used to debounce user input in a text field.

```tsx

import { TextField, useDebounce } from "@hopper-ui/components";
import { useEffect, useState } from "react";

export default function Example() {
    const [inputValue, setInputValue] = useState("");
    const [debouncedEmail, setDebouncedEmail] = useDebounce("", 400);
    const [isValid, setIsValid] = useState(true);
    const [isValidating, setIsValidating] = useState(false);

    const handleInputChange = (value: string) => {
        setInputValue(value); // Update input immediately for responsiveness
        setDebouncedEmail(value); // Trigger debounced validation
        if (value) {
            setIsValidating(true);
        }
    };

    useEffect(() => {
        if (debouncedEmail) {
            const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(debouncedEmail);
            setIsValid(isEmailValid);
        }
        setIsValidating(false);
    }, [debouncedEmail]);

    return (
        <TextField
            type="email"
            value={inputValue}
            onChange={handleInputChange}
            placeholder="Enter your email"
            description={isValidating ? "Validating..." : undefined}
            errorMessage="Invalid email"
            isInvalid={!isValid && !isValidating && !!inputValue}
        />
    );
}
```

#### Props

| Prop                         | Type                                                                                  | Default  | Description                                                                                                                                                                                                                                      |
| ---------------------------- | ------------------------------------------------------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| prefix                       | `ReactNode`                                                                           |          | An icon or text to display at the start of the input.                                                                                                                                                                                            |
| showCharacterCount           | `boolean`                                                                             | false    | True to display the number of remaining allowed characters on the right of the input. Requires a valid value in the "maxLength" prop.                                                                                                            |
| isClearable                  | `boolean`                                                                             |          | Whether the TextField is clearable.                                                                                                                                                                                                              |
| placeholder                  | `string`                                                                              |          | The placeholder text when the TextField is empty.                                                                                                                                                                                                |
| allowExceedingMaxLength      | `boolean`                                                                             |          | This should only be used with the `showCharacterCount` prop. If `true`, the TextField will allow the text to go over the max length, but it will add an error look to the character count.                                                       |
| isFluid                      | `ResponsiveProp<boolean>`                                                             | false    | If `true`, the TextField will take all available width.                                                                                                                                                                                          |
| inputRef                     | `MutableRefObject<HTMLInputElement \| null>`                                          |          | A ref for the HTML input element.                                                                                                                                                                                                                |
| inputProps                   | `Partial<InputProps>`                                                                 |          | The props for the Input.                                                                                                                                                                                                                         |
| inputGroupProps              | `Partial<InputGroupProps>`                                                            |          | The props for the InputGroup.                                                                                                                                                                                                                    |
| remainingCharacterCountProps | `RemainingCharacterCountProps`                                                        |          | The props for the RemainingCharacterCount.                                                                                                                                                                                                       |
| form                         | `string`                                                                              |          | The `<form>` element to associate the input with. The value of this attribute must be the id of a `<form>` in the same document. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).                     |
| style                        | `StyleOrFunction<TextFieldRenderProps>`                                               |          | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.                                                                |
| pattern                      | `string`                                                                              |          | Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).                                                                                 |
| validationBehavior           | `"native" \| "aria"`                                                                  | 'native' | Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.                                                                                   |
| enterKeyHint                 | `"search" \| "enter" \| "done" \| "go" \| "next" \| "previous" \| "send"`             |          | An enumerated attribute that defines what action label or icon to preset for the enter key on virtual keyboards. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/enterkeyhint).                                    |
| isDisabled                   | `boolean`                                                                             |          | Whether the input is disabled.                                                                                                                                                                                                                   |
| isReadOnly                   | `boolean`                                                                             |          | Whether the input can be selected but not changed by the user.                                                                                                                                                                                   |
| isRequired                   | `boolean`                                                                             |          | Whether user input is required on the input before form submission.                                                                                                                                                                              |
| isInvalid                    | `boolean`                                                                             |          | Whether the value is invalid.                                                                                                                                                                                                                    |
| validate                     | `((value: string) => true \| ValidationError \| null)`                                |          | A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.        |
| autoFocus                    | `boolean`                                                                             |          | Whether the element should receive focus on render.                                                                                                                                                                                              |
| value                        | `string`                                                                              |          | The current value (controlled).                                                                                                                                                                                                                  |
| defaultValue                 | `string`                                                                              |          | The default value (uncontrolled).                                                                                                                                                                                                                |
| autoComplete                 | `string`                                                                              |          | Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).                                                            |
| maxLength                    | `number`                                                                              |          | The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).                                                                                        |
| minLength                    | `number`                                                                              |          | The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).                                                                                         |
| type                         | `"search" \| "text" \| (string & {}) \| "url" \| "tel" \| "email" \| "password"`      | 'text'   | The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).                                                                                                                         |
| inputMode                    | `"search" \| "text" \| "none" \| "url" \| "tel" \| "email" \| "numeric" \| "decimal"` |          | Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).                             |
| autoCorrect                  | `string`                                                                              |          | An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete). |
| spellCheck                   | `string`                                                                              |          | An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).                                                          |
| name                         | `string`                                                                              |          | The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).                                                                                    |
| className                    | `ClassNameOrFunction<TextFieldRenderProps>`                                           |          | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.                                                               |
| dir                          | `string`                                                                              |          |                                                                                                                                                                                                                                                  |
| lang                         | `string`                                                                              |          |                                                                                                                                                                                                                                                  |
| inert                        | `boolean`                                                                             |          |                                                                                                                                                                                                                                                  |
| translate                    | `"yes" \| "no"`                                                                       |          |                                                                                                                                                                                                                                                  |
| description                  | `ReactNode`                                                                           |          | The helper message of the field.                                                                                                                                                                                                                 |
| errorMessage                 | `ReactNode \| ((v: ValidationResult) => ReactNode)`                                   |          | The error message of the field.                                                                                                                                                                                                                  |
| label                        | `ReactNode`                                                                           |          | The label of the field.                                                                                                                                                                                                                          |
| necessityIndicator           | `NecessityIndicator`                                                                  |          | Whether the required state should be shown as an asterisk or a label, which would display (Optional) on all non required field labels.                                                                                                           |
| size                         | `ResponsiveProp<FieldSize>`                                                           | "md"     | A Field can vary in size.                                                                                                                                                                                                                        |
| contextualHelp               | `ReactNode`                                                                           |          | A ContextualHelp element to place next to the label.                                                                                                                                                                                             |

###### Events

| Prop                        | Type                                                   | Default | Description                                                                                                                                                                                                |
| --------------------------- | ------------------------------------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClear                     | `(() => void)`                                         |         | Handler that is called when the clear button is pressed.                                                                                                                                                   |
| onFocus                     | `((e: FocusEvent<HTMLInputElement, Element>) => void)` |         | Handler that is called when the element receives focus.                                                                                                                                                    |
| onBlur                      | `((e: FocusEvent<HTMLInputElement, Element>) => void)` |         | Handler that is called when the element loses focus.                                                                                                                                                       |
| onFocusChange               | `((isFocused: boolean) => void)`                       |         | Handler that is called when the element's focus status changes.                                                                                                                                            |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                         |         | Handler that is called when a key is pressed.                                                                                                                                                              |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                         |         | Handler that is called when a key is released.                                                                                                                                                             |
| onChange                    | `((value: string) => void)`                            |         | Handler that is called when the value changes.                                                                                                                                                             |
| onCopy                      | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).                                                                          |
| onCut                       | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).                                                                             |
| onPaste                     | `ClipboardEventHandler<HTMLInputElement>`              |         | Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).                                                                         |
| onCompositionStart          | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).                   |
| onCompositionEnd            | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event). |
| onCompositionUpdate         | `CompositionEventHandler<HTMLInputElement>`            |         | Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).              |
| onSelect                    | `ReactEventHandler<HTMLInputElement>`                  |         | Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).                                                               |
| onBeforeInput               | `FormEventHandler<HTMLInputElement>`                   |         | Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).                                            |
| onInput                     | `FormEventHandler<HTMLInputElement>`                   |         | Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).                                                              |
| onClick                     | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                            |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                            |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                            |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                    |         |                                                                                                                                                                                                            |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                |         |                                                                                                                                                                                                            |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`               |         |                                                                                                                                                                                                            |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                  | Type                                                                                  | Default | Description                                                                                                                                                                                                                                                                                   |
| --------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-activedescendant | `string`                                                                              |         | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.                                                                                                                                                                              |
| aria-autocomplete     | `"none" \| "inline" \| "list" \| "both"`                                              |         | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.                                                                                                |
| aria-haspopup         | `boolean \| "dialog" \| "menu" \| "grid" \| "false" \| "true" \| "listbox" \| "tree"` |         | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.                                                                                                                                                                |
| aria-controls         | `string`                                                                              |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| aria-label            | `string`                                                                              |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby       | `string`                                                                              |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby      | `string`                                                                              |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details          | `string`                                                                              |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |
| excludeFromTabOrder   | `boolean`                                                                             |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| id                    | `string`                                                                              |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).                                                                                                                                                                           |
| aria-errormessage     | `string`                                                                              |         | Identifies the element that provides an error message for the object.                                                                                                                                                                                                                         |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `disabled` has been renamed `isDisabled`.
* `fluid` has been renamed `isFluid`.
* `readOnly` has been renamed `isReadOnly`.
* There is no longer a loading state.
* `icon` prop has been renamed to `prefix`.
* Button props have been removed. To add a clear button, use the `isClearable` prop. For a more complex use case, create your own input using InputGroup.
* `wrapperProps` no longer exists.
* `validationState` has been changed to `isInvalid`.
* `showCharacterCount` has been added.

### Tile

A tile groups information into an interactive element to let users browse and take action on a group of related items.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/tile/src/Tile.tsx>

```tsx
import { Tile } from "@hopper-ui/components";

export default function Example() {
    return (
        <Tile id="frog">Frog</Tile>
    );
}
```

#### Anatomy

##### Structure

```tsx
<Tile>
    <Heading /> /* (Optional) The heading of the Tile */
    <Content /> /* (Optional) The content of the Tile, but required if any other elements are present */
    <Image /> /* (Optional) The image of the Tile */
    <Illustration /> /* (Optional) The illustration of the Tile */
</Tile>
```

##### Composed Components

A `Tile` uses the following components:

| Component    | Description                                                                                          |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| Content      | A placeholder for the main content section of a component.                                           |
| Heading      | A heading is a primitive component matching Hopper's typography type scale.                          |
| Illustration | An illustration compose an image with a background color. Use an illustration as an hero in a modal. |
| Image        | An image component that can be used to display images.                                               |

#### Usage & Layout Samples

To facilitate the migration process, we've provided layout samples as reference guides. These examples demonstrate how to recreate features previously supported in [Orbiter](https://wl-orbiter-website.netlify.app/?path=/docs/tile--docs).

##### Basic

A tile consists of minimally some content.

```tsx
import { Content, Div, Heading, Tile } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div UNSAFE_width="20rem">
            <Tile id="buy">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our ribbit adventures.</Content>
            </Tile>
        </Div>
    );
}
```

##### Image

A tile can have an image.

```tsx
import { Content, Div, Heading, Image, Tile } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div UNSAFE_width="20rem">
            <Tile id="buy">
                <Image alt="frog" src="/cute-frog.png" />
                <Heading>Buy a ticket</Heading>
                <Content>
                    Tickets are not refundable and not transferable. A confirmation email will be sent
                    within the next few minutes.
                </Content>
            </Tile>
        </Div>
    );
}
```

Or an illustration with a background color.

```tsx
import { Content, Div, Heading, Illustration, Image, Tile } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div UNSAFE_width="20rem">
            <Tile id="buy">
                <Illustration backgroundColor="primary-weak">
                    <Image alt="frog" src="/cute-frog.png" />
                </Illustration>
                <Heading>Buy a ticket</Heading>
                <Content>
                    Tickets are not refundable and not transferable. A confirmation email will be sent
                    within the next few minutes
                </Content>
            </Tile>
        </Div>
    );
}
```

##### Selected

A tile can be selected.

```tsx
import { Content, Div, Heading, Tile } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div UNSAFE_width="20rem">
            <Tile isSelected id="buy">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </Tile>
        </Div>
    );
}
```

##### Read-only

A tile can be read-only.

```tsx
import { Content, Div, Heading, Tile } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div UNSAFE_width="20rem">
            <Tile id="buy" isReadonly>
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our ribbit adventures.</Content>
            </Tile>
        </Div>
    );
}
```

##### Disabled

A tile can be disabled.

```tsx
import { Content, Div, Heading, Tile } from "@hopper-ui/components";

export default function Example() {
    return (
        <Div UNSAFE_width="20rem">
            <Tile isDisabled id="buy">
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </Tile>
        </Div>
    );
}
```

##### Orientation

A tile can render horizontally.

```tsx
import { Content, Heading, Illustration, Image, Inline, Tile } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline
            wrap={{
                base: true,
                md: false
            }}
        >
            <Tile id="buy" orientation="horizontal">
                <Image alt="frog" src="/cute-frog.png" />
                <Heading>Buy a ticket</Heading>
                <Content>
                    Tickets are not refundable and not transferable. A confirmation email will be sent
                    within the next few minutes.
                </Content>
            </Tile>
            <Tile id="buy" orientation="horizontal">
                <Illustration backgroundColor="primary-weak">
                    <Image alt="frog" src="/cute-frog.png" width="100%" />
                </Illustration>
                <Heading>Buy a ticket</Heading>
                <Content>
                    Tickets are not refundable and not transferable. A confirmation email will be sent
                    within the next few minutes.
                </Content>
            </Tile>
        </Inline>
    );
}
```

##### Controlled

A tile can handle `isSelected` state in controlled mode.

```tsx
import { Content, Div, Heading, Tile } from "@hopper-ui/components";
import { useCallback, useState } from "react";

export default function Example() {
    const [isSelected, setIsSelected] = useState(false);
    const handleChange = useCallback(() => {
        setIsSelected(x => !x);
    }, [setIsSelected]);

    return (
        <Div UNSAFE_width="20rem">
            <Tile id="buy" isSelected={isSelected} onChange={handleChange}>
                <Heading>Buy a ticket</Heading>
                <Content>Purchase a ticket for any of our space travel adventure.</Content>
            </Tile>
        </Div>
    );
}
```

#### Best Practices

Tiles are always used in groups. Similarly to Radio, they should:

* Always have a clear label. You can use a description subtext to provide more details.
* Be part of a group of minimally two tiles.
* Be used to have users select one tile at once.
* Include mutually exclusive options.
* Be ordered in a logical way that users can understand.

Unlike Radio, it is not mandatory for Tiles to have a default option selected.

#### Props

| Prop            | Type                                           | Default    | Description                                                                                                                                                                        |
| --------------- | ---------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id              | `Key`                                          |            | The id of the Tile, matching the values used in TileGroup's `selectedKeys` prop.                                                                                                   |
| isReadonly      | `boolean`                                      |            | Whether or not the Tile is read-only.                                                                                                                                              |
| orientation     | `ResponsiveProp<Orientation>`                  | 'vertical' | The axis the Tile should align with.                                                                                                                                               |
| style           | `StyleOrFunction<ToggleButtonRenderProps>`     |            | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| children        | `ChildrenOrFunction<ToggleButtonRenderProps>`  |            | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| isSelected      | `boolean`                                      |            | Whether the element should be selected (controlled).                                                                                                                               |
| defaultSelected | `boolean`                                      |            | Whether the element should be selected (uncontrolled).                                                                                                                             |
| isDisabled      | `boolean`                                      |            | Whether the button is disabled.                                                                                                                                                    |
| autoFocus       | `boolean`                                      |            | Whether the element should receive focus on render.                                                                                                                                |
| dir             | `string`                                       |            |                                                                                                                                                                                    |
| lang            | `string`                                       |            |                                                                                                                                                                                    |
| inert           | `boolean`                                      |            |                                                                                                                                                                                    |
| translate       | `"yes" \| "no"`                                |            |                                                                                                                                                                                    |
| className       | `ClassNameOrFunction<ToggleButtonRenderProps>` |            | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onChange                    | `((isSelected: boolean) => void)`                         |         | Handler that is called when the element's selection state changes.                                                                                                                                        |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element receives focus.                                                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element loses focus.                                                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`                          |         | Handler that is called when the element's focus status changes.                                                                                                                                           |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is pressed.                                                                                                                                                             |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is released.                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                | Type                                                                                  | Default | Description                                                                                                                                                                                                                                                                                   |
| ------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-disabled       | `boolean \| "true" \| "false"`                                                        |         | Indicates whether the element is disabled to users of assistive technology.                                                                                                                                                                                                                   |
| aria-expanded       | `boolean \| "true" \| "false"`                                                        |         | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.                                                                                                                                                                                   |
| aria-haspopup       | `boolean \| "dialog" \| "menu" \| "grid" \| "true" \| "false" \| "listbox" \| "tree"` |         | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.                                                                                                                                                                |
| aria-controls       | `string`                                                                              |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| aria-pressed        | `boolean \| "true" \| "false" \| "mixed"`                                             |         | Indicates the current "pressed" state of toggle buttons.                                                                                                                                                                                                                                      |
| preventFocusOnPress | `boolean`                                                                             |         | Whether to prevent focus from moving to the button when pressing it.Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.                  |
| excludeFromTabOrder | `boolean`                                                                             |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| aria-label          | `string`                                                                              |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby     | `string`                                                                              |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby    | `string`                                                                              |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details        | `string`                                                                              |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `checked` has been renamed `isSelected`.
* `defaultChecked` has been renamed `defaultSelected`.
* `value` has been removed, use the `id` instead.

### TileGroup

A TileGroup groups Tiles to let users browse and take action on a group of related items.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/Tile/src/TileGroup.tsx>

```tsx
import { Tile, TileGroup } from "../../src/index.ts";

export default function Example() {
    return (
        <TileGroup aria-label="Animals">
            <Tile id="frog">Frog</Tile>
            <Tile id="camel">Camel</Tile>
            <Tile id="elephant">Elephant</Tile>
        </TileGroup>
    );
}
```

#### Anatomy

##### Structure

```tsx
<TileGroup>
    <Tile /> /* (Required) A tile in a TileGroup */
</TileGroup>
```

#### Usage

##### Selected

A tile group can have an item initially selected, by using `defaultSelectedKeys` for uncontrolled or `selectedKeys` for controlled. Here's an example where one item is selected using defaultSelectedKeys.

```tsx
import { Tile, TileGroup } from "../../src/index.ts";

export default function Example() {
    return (
        <TileGroup aria-label="Animals" defaultSelectedKeys={["camel"]}>
            <Tile id="frog">Frog</Tile>
            <Tile id="camel">Camel</Tile>
            <Tile id="elephant">Elephant</Tile>
        </TileGroup>
    );
}
```

##### Controlled

A tile group can have a controlled selected value. In this example, it shows how it is possible to select an option.

```tsx
import type { Key } from "@hopper-ui/components";
import { useState } from "react";

import { Tile, TileGroup } from "../../src/index.ts";

export default function Example() {
    const [selectedKeys, setSelectedKeys] = useState<Set<Key>>();

    const handleSelectionChange = (keys: Set<Key>) => {
        setSelectedKeys(keys);
    };

    return (
        <TileGroup
            aria-label="Animals"
            selectedKeys={selectedKeys}
            onSelectionChange={handleSelectionChange}
        >
            <Tile id="frog">Frog</Tile>
            <Tile id="camel">Camel</Tile>
            <Tile id="elephant">Elephant</Tile>
        </TileGroup>
    );
}
```

##### Read-only

A tile group can be read-only.

```tsx
import { Tile, TileGroup } from "../../src/index.ts";

export default function Example() {
    return (
        <TileGroup aria-label="Animals" isReadonly>
            <Tile id="frog">Frog</Tile>
            <Tile id="camel">Camel</Tile>
            <Tile id="elephant">Elephant</Tile>
        </TileGroup>
    );
}
```

##### Disabled

A tile group can be disabled.

```tsx
import { Tile, TileGroup } from "../../src/index.ts";

export default function Example() {
    return (
        <TileGroup aria-label="Animals" isDisabled>
            <Tile id="frog">Frog</Tile>
            <Tile id="camel">Camel</Tile>
            <Tile id="elephant">Elephant</Tile>
        </TileGroup>
    );
}
```

##### Wrapping

Tiles are automatically wrapped

```tsx
import { Tile, TileGroup } from "../../src/index.ts";

export default function Example() {
    return (
        <TileGroup aria-label="Animals">
            <Tile id="frog">Frog</Tile>
            <Tile id="camel">Camel</Tile>
            <Tile id="elephant">Elephant</Tile>
            <Tile id="giraffe">Giraffe</Tile>
            <Tile id="hippo">Hippo</Tile>
        </TileGroup>
    );
}
```

##### Number of columns

A tile group can have a number of columns. Default is 3. Here's an example where it's 4.

```tsx
import { Tile, TileGroup } from "../../src/index.ts";

export default function Example() {
    return (
        <TileGroup aria-label="Animals" numberOfColumns={4}>
            <Tile id="frog">Frog</Tile>
            <Tile id="camel">Camel</Tile>
            <Tile id="elephant">Elephant</Tile>
            <Tile id="giraffe">Giraffe</Tile>
            <Tile id="hippo">Hippo</Tile>
        </TileGroup>
    );
}
```

#### Best Practices

Tiles are always used in groups. Similarly to Radio, they should:

* Always have a clear label. You can use a description subtext to provide more details.
* Be part of a group of minimally two tiles.
* Be used to have users select one tile at once.
* Include mutually exclusive options.
* Be ordered in a logical way that users can understand.

Unlike Radio, it is not mandatory for Tiles to have a default option selected.

#### Props

| Prop                   | Type                                                | Default      | Description                                                                                                                                                                        |
| ---------------------- | --------------------------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| numberOfColumns        | `ResponsiveProp<number>`                            | 3            | The number of columns to display the tiles in.                                                                                                                                     |
| selectionMode          | `"single" \| "multiple"`                            | "single"     | Whether single or multiple selection is enabled.                                                                                                                                   |
| disallowEmptySelection | `boolean`                                           | true         | Whether the collection allows empty selection.                                                                                                                                     |
| isReadonly             | `boolean`                                           |              | Whether the collection is readonly.                                                                                                                                                |
| style                  | `StyleOrFunction<ToggleButtonGroupRenderProps>`     |              | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| orientation            | `Orientation`                                       | 'horizontal' | The orientation of the the toggle button group.                                                                                                                                    |
| selectedKeys           | `Iterable<Key>`                                     |              | The currently selected keys in the collection (controlled).                                                                                                                        |
| defaultSelectedKeys    | `Iterable<Key>`                                     |              | The initial selected keys in the collection (uncontrolled).                                                                                                                        |
| isDisabled             | `boolean`                                           |              | Whether all items are disabled.                                                                                                                                                    |
| children               | `ChildrenOrFunction<ToggleButtonGroupRenderProps>`  |              | The children of the component. A function may be provided to alter the children based on component state.                                                                          |
| className              | `ClassNameOrFunction<ToggleButtonGroupRenderProps>` |              | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| dir                    | `string`                                            |              |                                                                                                                                                                                    |
| lang                   | `string`                                            |              |                                                                                                                                                                                    |
| inert                  | `boolean`                                           |              |                                                                                                                                                                                    |
| translate              | `"yes" \| "no"`                                     |              |                                                                                                                                                                                    |

###### Events

| Prop                        | Type                                     | Default | Description                                        |
| --------------------------- | ---------------------------------------- | ------- | -------------------------------------------------- |
| onSelectionChange           | `((keys: Set<Key>) => void)`             |         | Handler that is called when the selection changes. |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |                                                    |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |                                                    |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |                                                    |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |                                                    |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |                                                    |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |                                                    |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |                                                    |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |                                                    |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                        |
| ---------------- | -------- | ------- | -------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                            |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                              |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                    |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `align` has been removed, use `alignItems` instead.
* `autoFocus` has been removed.
* `disabled` has been renamed to `isDisabled`.
* `inline` has been removed.
* `reverse` is not supported, use `flex-direction` or `row-reverse` instead.
* `onChange` has been removed, use `onSelectionChange` instead.
* `selectionMode` type "none" should be `undefined` instead.
* `defaultValue` has been removed.
* `value` has been removed.
* `rowSize` has been removed.

### ToggleButton

Offer a similar experience as a checkbox or radio with the appearance of a button.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/buttons/src/ToggleButton.tsx>

```tsx
import { ToggleButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <ToggleButton>Toggle me</ToggleButton>
    );
}
```

#### Anatomy

##### Structure

```tsx
<ToggleButton>
    <IconList /> /* (Optional) A list of icons in the ToggleButton */
    <Icon /> /* (Optional) An icon in the ToggleButton */
    <Text /> /* (Optional) Text in the ToggleButton, required if using an Icon or an IconList */
</ToggleButton>
```

##### Composed Components

A `ToggleButton` uses the following components:

| Component | Description                                                                        |
| --------- | ---------------------------------------------------------------------------------- |
| Icon      | An icon component is used to render a custom icon.                                 |
| IconList  | An IconList encapsulates a collection of icons.                                    |
| Text      | A text component is a primitive component matching Hopper's typography type scale. |

#### Usage

##### Variants

A toggle button can use different variants.

```tsx
import { Inline, ToggleButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <ToggleButton variant="primary">Save</ToggleButton>
            <ToggleButton variant="secondary">Save</ToggleButton>
            <ToggleButton variant="upsell">Save</ToggleButton>
            <ToggleButton variant="danger">Save</ToggleButton>
            <ToggleButton variant="ghost-primary">Save</ToggleButton>
            <ToggleButton variant="ghost-secondary">Save</ToggleButton>
            <ToggleButton variant="ghost-danger">Save</ToggleButton>
        </Inline>
    );
}
```

##### Sizes

A toggle button can vary in size.

```tsx
import { Inline, ToggleButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <ToggleButton variant="primary">Save</ToggleButton>
            <ToggleButton size="sm" variant="primary">Save</ToggleButton>
            <ToggleButton size="xs" variant="primary">Save</ToggleButton>
        </Inline>
    );
}
```

##### Disabled

A toggle button can be disabled.

```tsx
import { Inline, ToggleButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <ToggleButton isDisabled variant="primary">Save</ToggleButton>
            <ToggleButton isDisabled variant="secondary">Save</ToggleButton>
            <ToggleButton isDisabled variant="upsell">Save</ToggleButton>
            <ToggleButton isDisabled variant="danger">Save</ToggleButton>
            <ToggleButton isDisabled variant="ghost-primary">Save</ToggleButton>
            <ToggleButton isDisabled variant="ghost-secondary">Save</ToggleButton>
            <ToggleButton isDisabled variant="ghost-danger">Save</ToggleButton>
        </Inline>
    );
}
```

##### Loading

A toggle button can show a loading indicator. The button text is hidden but the button maintains the width that it would have if the text were visible.

```tsx
import { Inline, ToggleButton } from "@hopper-ui/components";

export default function Example() {
    return (
        <Inline>
            <ToggleButton isLoading variant="primary">Save</ToggleButton>
            <ToggleButton isLoading variant="secondary">Save</ToggleButton>
            <ToggleButton isLoading variant="danger">Save</ToggleButton>
            <ToggleButton isLoading variant="upsell">Save</ToggleButton>
            <ToggleButton isLoading variant="ghost-primary">Save</ToggleButton>
            <ToggleButton isLoading variant="ghost-secondary">Save</ToggleButton>
            <ToggleButton isLoading variant="ghost-danger">Save</ToggleButton>
        </Inline>
    );
}
```

##### Pending

Toggle buttons can indicate that a quick progress task is taking place (e.g., saving settings on a server). After a 1 second delay, an indeterminate spinner will be displayed in place of the button label and icon.

```tsx
import { ToggleButton } from "@hopper-ui/components";
import { useCallback, useState } from "react";

export default function Example() {
    const [isLoading, setIsLoading] = useState(false);

    const handlePress = useCallback(() => {
        setIsLoading(true);

        setTimeout(() => {
            setIsLoading(false);
        }, 3000);
    }, [setIsLoading]);

    return (
        <ToggleButton isLoading={isLoading} onPress={handlePress}>
            Click me!
        </ToggleButton>
    );
}
```

##### Fluid

A toggle button can be expanded to full width to fill its parent container.

```tsx
import { Inline, Text, ToggleButton } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <ToggleButton isFluid variant="primary">
                Save
            </ToggleButton>
            <ToggleButton isFluid variant="primary">
                <SparklesIcon />
                <Text>Save</Text>
            </ToggleButton>
            <ToggleButton isFluid>
                <Text>Save</Text>
                <SparklesIcon slot="end-icon" />
            </ToggleButton>
        </Inline>
    );
}
```

##### Icon Only

A toggle button can contain only an icon. An accessible name must be provided through [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) prop. See also [WCAG practices](https://www.w3.org/TR/WCAG20-TECHS/ARIA6.html).

```tsx
import { Inline, ToggleButton } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <ToggleButton aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </ToggleButton>
            <ToggleButton size="sm" aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </ToggleButton>
            <ToggleButton size="xs" aria-label="Clean" variant="secondary">
                <SparklesIcon />
            </ToggleButton>
        </Inline>
    );
}
```

##### Icon

A toggle button can contain icons.

```tsx
import { Inline, Text, ToggleButton } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <ToggleButton aria-label="Save" variant="secondary">
                <SparklesIcon />
                <Text>Save</Text>
            </ToggleButton>
            <ToggleButton size="sm" aria-label="Save" variant="secondary">
                <SparklesIcon />
                <Text>Save</Text>
            </ToggleButton>
            <ToggleButton size="xs" aria-label="Save" variant="secondary">
                <SparklesIcon />
                <Text>Save</Text>
            </ToggleButton>
        </Inline>
    );
}
```

##### End Icon

Nonstandard end icons can be provided to handle special cases. However, think twice before adding end icons, start icons should be your go-to.

```tsx
import { Inline, Text, ToggleButton } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Inline>
            <ToggleButton aria-label="Save" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Save</Text>
            </ToggleButton>
            <ToggleButton size="sm" aria-label="Save" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Save</Text>
            </ToggleButton>
            <ToggleButton size="xs" aria-label="Save" variant="secondary">
                <SparklesIcon slot="end-icon" />
                <Text>Save</Text>
            </ToggleButton>
        </Inline>
    );
}
```

#### Props

| Prop            | Type                                           | Default   | Description                                                                                                                                                                        |
| --------------- | ---------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children        | `ReactNode`                                    |           | The content to display in the button.                                                                                                                                              |
| isFluid         | `ResponsiveProp<boolean>`                      |           | Whether or not the toggle button takes up the width of its container.                                                                                                              |
| isLoading       | `boolean`                                      |           | A toggle button can show a loading indicator.                                                                                                                                      |
| size            | `ResponsiveProp<ButtonSize>`                   | "md"      | A toggle button can vary in size.                                                                                                                                                  |
| spinnerProps    | `SpinnerProps`                                 |           | The props for the Spinner.                                                                                                                                                         |
| variant         | `ButtonVariant`                                | "primary" | The visual style of the toggle button.                                                                                                                                             |
| id              | `Key`                                          |           | The id of the toggle button.                                                                                                                                                       |
| style           | `StyleOrFunction<ToggleButtonRenderProps>`     |           | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.  |
| isSelected      | `boolean`                                      |           | Whether the element should be selected (controlled).                                                                                                                               |
| defaultSelected | `boolean`                                      |           | Whether the element should be selected (uncontrolled).                                                                                                                             |
| isDisabled      | `boolean`                                      |           | Whether the button is disabled.                                                                                                                                                    |
| autoFocus       | `boolean`                                      |           | Whether the element should receive focus on render.                                                                                                                                |
| dir             | `string`                                       |           |                                                                                                                                                                                    |
| lang            | `string`                                       |           |                                                                                                                                                                                    |
| inert           | `boolean`                                      |           |                                                                                                                                                                                    |
| translate       | `"yes" \| "no"`                                |           |                                                                                                                                                                                    |
| className       | `ClassNameOrFunction<ToggleButtonRenderProps>` |           | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |

###### Events

| Prop                        | Type                                                      | Default | Description                                                                                                                                                                                               |
| --------------------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onChange                    | `((isSelected: boolean) => void)`                         |         | Handler that is called when the element's selection state changes.                                                                                                                                        |
| onPress                     | `((e: PressEvent) => void)`                               |         | Handler that is called when the press is released over the target.                                                                                                                                        |
| onPressStart                | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction starts.                                                                                                                                                   |
| onPressEnd                  | `((e: PressEvent) => void)`                               |         | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target.                                                                                       |
| onPressChange               | `((isPressed: boolean) => void)`                          |         | Handler that is called when the press state changes.                                                                                                                                                      |
| onPressUp                   | `((e: PressEvent) => void)`                               |         | Handler that is called when a press is released over the target, regardless of whether it started on the target or not.                                                                                   |
| onClick                     | `((e: MouseEvent<FocusableElement, MouseEvent>) => void)` |         | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides additional event details for non-mouse interactions. |
| onFocus                     | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element receives focus.                                                                                                                                                   |
| onBlur                      | `((e: FocusEvent<Element, Element>) => void)`             |         | Handler that is called when the element loses focus.                                                                                                                                                      |
| onFocusChange               | `((isFocused: boolean) => void)`                          |         | Handler that is called when the element's focus status changes.                                                                                                                                           |
| onKeyDown                   | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is pressed.                                                                                                                                                             |
| onKeyUp                     | `((e: KeyboardEvent) => void)`                            |         | Handler that is called when a key is released.                                                                                                                                                            |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`                     |         |                                                                                                                                                                                                           |
| onScroll                    | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`                          |         |                                                                                                                                                                                                           |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`                       |         |                                                                                                                                                                                                           |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`                   |         |                                                                                                                                                                                                           |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>`                  |         |                                                                                                                                                                                                           |
| onHoverStart                | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction starts.                                                                                                                                                   |
| onHoverEnd                  | `((e: HoverEvent) => void)`                               |         | Handler that is called when a hover interaction ends.                                                                                                                                                     |
| onHoverChange               | `((isHovering: boolean) => void)`                         |         | Handler that is called when the hover state changes.                                                                                                                                                      |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop                | Type                                                                                  | Default | Description                                                                                                                                                                                                                                                                                   |
| ------------------- | ------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aria-disabled       | `boolean \| "true" \| "false"`                                                        |         | Indicates whether the element is disabled to users of assistive technology.                                                                                                                                                                                                                   |
| aria-expanded       | `boolean \| "true" \| "false"`                                                        |         | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.                                                                                                                                                                                   |
| aria-haspopup       | `boolean \| "dialog" \| "menu" \| "grid" \| "true" \| "false" \| "listbox" \| "tree"` |         | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.                                                                                                                                                                |
| aria-controls       | `string`                                                                              |         | Identifies the element (or elements) whose contents or presence are controlled by the current element.                                                                                                                                                                                        |
| aria-pressed        | `boolean \| "true" \| "false" \| "mixed"`                                             |         | Indicates the current "pressed" state of toggle buttons.                                                                                                                                                                                                                                      |
| preventFocusOnPress | `boolean`                                                                             |         | Whether to prevent focus from moving to the button when pressing it.Caution, this can make the button inaccessible and should only be used when alternative keyboard interaction is provided, such as ComboBox's MenuTrigger or a NumberField's increment/decrement control.                  |
| excludeFromTabOrder | `boolean`                                                                             |         | Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available. |
| aria-label          | `string`                                                                              |         | Defines a string value that labels the current element.                                                                                                                                                                                                                                       |
| aria-labelledby     | `string`                                                                              |         | Identifies the element (or elements) that labels the current element.                                                                                                                                                                                                                         |
| aria-describedby    | `string`                                                                              |         | Identifies the element (or elements) that describes the object.                                                                                                                                                                                                                               |
| aria-details        | `string`                                                                              |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                                                                                                                                                                                            |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `fluid` has been renamed `isFluid`.
* `disabled` has been renamed `isDisabled`.
* `checked` has been renamed `isSelected`.
* `defaultChecked` has been renamed `defaultSelected`.
* `inherit` has been removed.
* `loading` has been renamed `isLoading`.
* `onChange` signature has been changed (no event is passed).
* `value` has been removed, use the `id` instead.

### Tooltip

Tooltips display additional information upon hover or focus that is contextual, helpful, and nonessential while providing the ability to communicate and give clarity to a user.

* Source: <https://github.com/workleap/wl-hopper/blob/main/packages/components/src/tooltip/src/Tooltip.tsx>

A tooltip is a message box displayed when a user hovers over or focuses on an element of the interface. A tooltip is used to provide more information and should be paired with and interaction element. Tooltips should be used sparingly and contain succinct supplementary information. Do not include interactive elements in tooltips; use the Popover component instead.

```tsx
import { Button, Tooltip, TooltipTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <TooltipTrigger>
            <Button>Trigger</Button>
            <Tooltip>Frogs can breathe through their skin</Tooltip>
        </TooltipTrigger>
    );
}
```

#### Usage

##### Trigger

A tooltip trigger can be anything.

```tsx
import { Button, Div, Stack, Tooltip, TooltipTrigger } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";

export default function Example() {
    return (
        <Stack>
            <TooltipTrigger>
                <Button variant="secondary">
                    <SparklesIcon />
                </Button>
                <Tooltip>Frogs can breathe through their skin</Tooltip>
            </TooltipTrigger>
            <TooltipTrigger>
                <SparklesIcon />
                <Tooltip>Frogs can breathe through their skin</Tooltip>
            </TooltipTrigger>
            <TooltipTrigger>
                <Div>Just a normal div</Div>
                <Tooltip>Frogs can breathe through their skin</Tooltip>
            </TooltipTrigger>
        </Stack>
    );
}
```

##### Placement

A tooltip can open at different placements.

```tsx
import { Button, Tooltip, TooltipTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <TooltipTrigger placement="right">
            <Button>Trigger</Button>
            <Tooltip>Frogs can breathe through their skin</Tooltip>
        </TooltipTrigger>
    );
}
```

##### Disabled

A tooltip can be disabled.

```tsx
import { Button, Tooltip, TooltipTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <TooltipTrigger isDisabled>
            <Button>Trigger</Button>
            <Tooltip>Frogs can breathe through their skin</Tooltip>
        </TooltipTrigger>
    );
}
```

##### Custom Trigger

A tooltip trigger can update its appearance based on the isOpen value by using TooltipTriggerContext.

```tsx
import { Button, Tooltip, TooltipTrigger, TooltipTriggerContext } from "@hopper-ui/components";
import { SparklesIcon } from "@hopper-ui/icons";
import { forwardRef, useContext } from "react";

const CustomTrigger = forwardRef<HTMLButtonElement>((props, ref) => {
    const { isOpen } = useContext(TooltipTriggerContext);

    return (
        <Button
            {...props}
            aria-label="Frog"
            ref={ref}
            variant={isOpen ? "primary" : "secondary"}
        >
            <SparklesIcon />
        </Button>
    );
});

export default function Example() {
    return (
        <TooltipTrigger>
            <CustomTrigger />
            <Tooltip>Frogs can breathe through their skin</Tooltip>
        </TooltipTrigger>
    );
}
```

##### Disabled Trigger

While it is not recommended to add a tooltip to a disabled element, it is possible to do so.

```tsx
import { Button, Tooltip, TooltipTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <TooltipTrigger>
            <Button isDisabled>Trigger</Button>
            <Tooltip>Frogs can breathe through their skin</Tooltip>
        </TooltipTrigger>
    );
}
```

##### Controlled

The open state can be handled in controlled mode.

```tsx
import { Button, Tooltip, TooltipTrigger } from "@hopper-ui/components";
import { useCallback, useState } from "react";

export default function Example() {
    const [isOpen, setIsOpen] = useState(false);
    const handleOpenChange = useCallback(
        (newValue: boolean) => {
            setIsOpen(newValue);
        },
        [setIsOpen]
    );

    return (
        <TooltipTrigger isOpen={isOpen} onOpenChange={handleOpenChange}>
            <Button>Trigger</Button>
            <Tooltip>Frogs can breathe through their skin</Tooltip>
        </TooltipTrigger>
    );
}
```

##### Collection Items

Tooltips can be used in Collection items.

```tsx
import { Stack, Tab, TabList, Tabs, Tag, TagGroup, Tooltip, TooltipTrigger } from "@hopper-ui/components";

export default function Example() {
    return (
        <Stack>
            <Tabs aria-label="frogs">
                <TabList>
                    <Tab id="red-eye-tree">Red-Eyed Tree Frog</Tab>
                    <TooltipTrigger>
                        <Tab id="poison-dart">Poison Da..</Tab>
                        <Tooltip>Poison Dart Frog</Tooltip>
                    </TooltipTrigger>
                    <Tab id="goliath">Goliath Frog</Tab>
                </TabList>
            </Tabs>
            <TagGroup aria-label="tags" size="sm" label="Small">
                <Tag id="1">Red-Eyed Tree Frog</Tag>
                <TooltipTrigger>
                    <Tag id="2">Poison Da...</Tag>
                    <Tooltip>Poison Dart Frog</Tooltip>
                </TooltipTrigger>
                <Tag id="3">Goliath Frog</Tag>
            </TagGroup>
        </Stack>
    );
}
```

#### Best Practices

Tooltips should:

* Provide useful, additional information or clarification.
* Succinctly describe or expand on the element they point to.
* Not be used to communicate critical information, including errors in forms or other feedback.
* Not contain any links or buttons.
* Be used sparingly. If you're building something that requires a lot of tooltips, work on clarifying the design and the language in the experience.

#### Props

##### Tooltip

| Prop       | Type                         | Default | Description                                                                                                                                                                       |
| ---------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| triggerRef | `RefObject<Element \| null>` |         | The ref for the element which the tooltip positions itself with respect to.When used within a TooltipTrigger this is set automatically. It is only required when used standalone. |
| dir        | `string`                     |         |                                                                                                                                                                                   |
| lang       | `string`                     |         |                                                                                                                                                                                   |
| inert      | `boolean`                    |         |                                                                                                                                                                                   |
| translate  | `"yes" \| "no"`              |         |                                                                                                                                                                                   |
| children   | `ReactNode`                  |         | The children of the component.                                                                                                                                                    |
| className  | `string`                     |         | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element.                                                                          |
| style      | `CSSProperties`              |         | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element.                                                                           |

###### Events

| Prop                        | Type                                     | Default | Description |
| --------------------------- | ---------------------------------------- | ------- | ----------- |
| onClick                     | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onClickCapture              | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onAuxClick                  | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onAuxClickCapture           | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onContextMenu               | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onContextMenuCapture        | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onDoubleClick               | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onDoubleClickCapture        | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseDown                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseDownCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseEnter                | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseLeave                | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseMove                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseMoveCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOut                  | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOutCapture           | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOver                 | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseOverCapture          | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseUp                   | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onMouseUpCapture            | `MouseEventHandler<HTMLDivElement>`      |         |             |
| onTouchCancel               | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchCancelCapture        | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchEnd                  | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchEndCapture           | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchMove                 | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchMoveCapture          | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchStart                | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onTouchStartCapture         | `TouchEventHandler<HTMLDivElement>`      |         |             |
| onPointerDown               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerDownCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerMove               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerMoveCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerUp                 | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerUpCapture          | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerCancel             | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerCancelCapture      | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerEnter              | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerLeave              | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOver               | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOverCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOut                | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onPointerOutCapture         | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onGotPointerCapture         | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onGotPointerCaptureCapture  | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onLostPointerCapture        | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>`    |         |             |
| onScroll                    | `UIEventHandler<HTMLDivElement>`         |         |             |
| onScrollCapture             | `UIEventHandler<HTMLDivElement>`         |         |             |
| onWheel                     | `WheelEventHandler<HTMLDivElement>`      |         |             |
| onWheelCapture              | `WheelEventHandler<HTMLDivElement>`      |         |             |
| onAnimationStart            | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationStartCapture     | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationEnd              | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationEndCapture       | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationIteration        | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>`  |         |             |
| onTransitionCancel          | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionCancelCapture   | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionEnd             | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionEndCapture      | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionRun             | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionRunCapture      | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionStart           | `TransitionEventHandler<HTMLDivElement>` |         |             |
| onTransitionStartCapture    | `TransitionEventHandler<HTMLDivElement>` |         |             |

###### Layout

| Prop | Type             | Default | Description                                                                                                                                                                                                      |
| ---- | ---------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| slot | `string \| null` |         | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

###### Positioning

| Prop   | Type      | Default | Description |
| ------ | --------- | ------- | ----------- |
| hidden | `boolean` |         |             |

###### Accessibility

| Prop             | Type     | Default | Description                                                                                                         |
| ---------------- | -------- | ------- | ------------------------------------------------------------------------------------------------------------------- |
| aria-label       | `string` |         | Defines a string value that labels the current element.                                                             |
| aria-labelledby  | `string` |         | Identifies the element (or elements) that labels the current element.                                               |
| aria-describedby | `string` |         | Identifies the element (or elements) that describes the object.                                                     |
| aria-details     | `string` |         | Identifies the element (or elements) that provide a detailed, extended description for the object.                  |
| id               | `string` |         | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |

##### TooltipTrigger

| Prop             | Type                                                         | Default | Description                                                                                                                                        |
| ---------------- | ------------------------------------------------------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| placement        | `"start" \| "end" \| "right" \| "left" \| "top" \| "bottom"` | 'top'   | The placement of the element with respect to its anchor element.                                                                                   |
| delay            | `number`                                                     | 600     | The delay time for the tooltip to show up.                                                                                                         |
| isDisabled       | `boolean`                                                    |         | Whether the tooltip should be disabled, independent from the trigger.                                                                              |
| trigger          | `"hover" \| "focus"`                                         | 'hover' | By default, opens for both focus and hover. Can be made to open only for focus.                                                                    |
| isOpen           | `boolean`                                                    |         | Whether the overlay is open by default (controlled).                                                                                               |
| defaultOpen      | `boolean`                                                    |         | Whether the overlay is open by default (uncontrolled).                                                                                             |
| shouldFlip       | `boolean`                                                    | true    | Whether the element should flip its orientation (e.g. top to bottom or left to right) when there is insufficient room for it to render completely. |
| containerPadding | `number`                                                     | 12      | The placement padding that should be applied between the element and its surrounding container.                                                    |
| offset           | `number`                                                     | 0       | The additional offset applied along the main axis between the element and its anchor element.                                                      |
| crossOffset      | `number`                                                     | 0       | The additional offset applied along the cross axis between the element and its anchor element.                                                     |

###### Events

| Prop         | Type                          | Default | Description                                                   |
| ------------ | ----------------------------- | ------- | ------------------------------------------------------------- |
| onOpenChange | `((isOpen: boolean) => void)` |         | Handler that is called when the overlay's open state changes. |

#### Migration Notes

Coming from Orbiter, you should be aware of the following changes:

* `position` has been renamed to `placement`. Refer to this [sample](#usage-placement)

### UL

A specialized component to represent an HTML ul/ol/li element.

```tsx
import { LI, UL } from "@hopper-ui/components";

export default function Example() {
    return (
        <UL color="neutral-weak">
            <LI>Explore</LI>
            <LI>Discover</LI>
            <LI color="core_sapphire-600">Colonize</LI>
        </UL>
    );
}
```

#### Usage

A list component accepts all the [ul](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ul), [ol](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/ol), and [li](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/li) HTML element attributes and [Hopper styled component props](/styled-system/concepts/styling.md).

### Orbiter to Hopper Mapping

A list of all Orbiter Hopper Components and their equivalent within Hopper

Below is a list of all Orbiter Components and their equivalent within Hopper. Unavailable components are currently prioritized for development by the Design System Team.

| Orbiter Component  | Hopper Component                                                |
| ------------------ | --------------------------------------------------------------- |
| Accordion          | [Accordion](/components/Accordion.md)                              |
| Alert              | [Alert](/components/Alert.md)                                      |
| Autocomplete       | [ComboBox](/components/ComboBox.md)                                |
| Avatar             | [Avatar](/components/Avatar.md)                                    |
| Badge              | [Badge](/components/Badge.md)                                      |
| Box                | [Box](/components/Box.md)                                          |
| Button             | [Button](/components/Button.md)                                    |
| Card               | [Card](/components/Card.md), shims were created to ease migration. |
| Checkbox           | [Checkbox](/components/Checkbox.md)                                |
| Counter            | Use the Badge with subdued variant                              |
| CrossButton        | CloseButton                                                     |
| DateInput          | In development                                                  |
| DateRangeInput     | In development                                                  |
| Disclosure         | [Disclosure](/components/Disclosure.md)                            |
| DisclosureArrow    | ToggleArrow                                                     |
| Divider            | [Divider](/components/Divider.md)                                  |
| Dot                | Use [Badge](/components/Badge.md) with the isIndeterminate prop    |
| Field              | Not supported anymore                                           |
| Flex               | [Flex](/components/Flex.md)                                        |
| Form               | [Form](/components/Form.md)                                        |
| Grid               | [Grid](/components/Grid.md)                                        |
| Heading            | [Heading](/components/Heading.md)                                  |
| IllustratedMessage | [IllustratedMessage](/components/IllustratedMessage.md)            |
| Illustration       | [Illustration](/components/Illustration.md)                        |
| Image              | [Image](/components/Image.md)                                      |
| InputGroup         | InputGroup                                                      |
| Link               | [Link](/components/Link.md)                                        |
| Listbox            | [ListBox](/components/Listbox.md)                                  |
| Loader             | Not supported anymore, consider using Spinner                   |
| Lozenge            | [Tag](/components/Tag.md)                                          |
| Menu               | [Menu](/components/Menu.md)                                        |
| Modal              | [Modal](/components/Modal.md)                                      |
| NumberInput        | [NumberField](/components/NumberField.md)                          |
| Overlay            | Not supported anymore, use Modal instead                        |
| Paragraph          | [Paragraph](/components/Paragraph.md)                              |
| Popover            | [Popover](/components/Popover.md)                                  |
| RadioGroup         | [RadioGroup](/components/RadioGroup.md)                            |
| Select             | [Select](/components/Select.md)                                    |
| Spinner            | [Spinner](/components/Spinner.md)                                  |
| Switch             | [Switch](/components/Switch.md)                                    |
| Tabs               | [Tabs](/components/Tabs.md)                                        |
| Tag                | [Tag](/components/Tag.md)                                          |
| Text               | [Text](/components/Text.md)                                        |
| TextArea           | [TextArea](/components/Text.md)                                    |
| TextInput          | [TextField](/components/TextField.md)                              |
| ThemeProvider      | [HopperProvider](/components/HopperProvider.md)                    |
| Tile               | [Tile](/components/Tile.md)                                        |
| Toolbar            | Not supported anymore                                           |
| Tooltip            | [Tooltip](/components/Tooltip.md)                                  |
| Transition         | Not supported anymore, shims were created to ease migration.    |

## Components Concepts & Best Practices

> This section offers a comprehensive concepts and best practices for using components effectively.

### Client Side Routing

Many Hopper components support rendering as HTML links. This page discusses how to set up your app to integrate Hopper links with your framework or client side router.

*Since Hopper components are designed on top of React Aria, this article is heavily inspired by the [Client Side Routing](https://react-spectrum.adobe.com/react-spectrum/routing.html) article in React-Aria's documentation.*

#### Introduction

Hopper components such as [Link](./Link.md), Menu, Tabs, Table, and many others support rendering elements as links that perform navigation when the user interacts with them. Each component that supports link behavior accepts the href prop, which causes the component to render an `<a>` element. Other link DOM props such as target and download are also supported.

Depending on the component, users may interact with links in different ways. For example, users can navigate between tabs using the arrow keys, or open a link in a ComboBox using the enter key. Because Hopper components accept the href prop rather than supporting arbitrary element overrides, they can ensure that link navigation occurs when it is appropriate for the component.

By default, links perform native browser navigation when they are interacted with. However, many apps and frameworks use client side routers to avoid a full page reload when navigating between pages. The `HopperProvider` component configures all Hopper components within it to navigate using the client side router you provide. Set this up once in the root of your app, and any Hopper component with the href prop will automatically navigate using your router.

#### Provider setup

The HopperProvider component accepts two props: `navigate` and `useHref`. `navigate` should be set to a function received from your router for performing a client side navigation programmatically. `useHref` is an optional prop that converts a router-specific href to a native HTML href, e.g. prepending a base path. The following example shows the general pattern. Framework-specific examples are shown below.

```tsx
import { HopperProvider } from "@hopper-ui/components";
import { useNavigate, useHref } from "your-router";

function App() {
    const navigate = useNavigate();

    return (
        <HopperProvider navigate={navigate} useHref={useHref}>
            {/* ... */}
        </HopperProvider>
    );
}
```

##### Router options

All link components accept a `routerOptions` prop, which is an object that is passed through to the client side router's navigate function as the second argument. This can be used to control any router-specific behaviors, such as scrolling, replacing instead of pushing to the history, etc.

```tsx
<Link href="/login" routerOptions={{ replace: true }}>
  {/* ...*/}
</Link>
```

When using TypeScript, you can configure the RouterConfig type globally so that all link components have auto complete and type safety using a type provided by your router.

```tsx
import type { RouterOptions } from "your-router";

declare module "react-aria-components" {
    interface RouterConfig {
        routerOptions: RouterOptions
    }
}
```

##### Forcing a full page reload

Sometimes, you may want a link to fully reload the page. For example, when linking to an endpoint like /api/export or /logout. Hopper doesn't automatically reload the page for internal links, but you can implement a routerOptions.fullRefresh pattern in your router setup to support this behavior.

```tsx
import { BrowserRouter, type NavigateOptions, useHref, useNavigate } from "react-router-dom";
import { HopperProvider } from "@hopper-ui/components";

type CustomRouterOptions = NavigateOptions & { fullRefresh?: boolean };

declare module "react-aria-components" {
    interface RouterConfig {
        routerOptions: CustomRouterOptions;
    }
}

function App() {
    const routerNavigate = useNavigate();
    const navigate = (url: string, options: CustomRouterOptions = {}) => {
        if (options.fullRefresh) {
            window.location.href = url;
        } else {
            routerNavigate(url, options);
        }
    };

    return (
        <HopperProvider navigate={navigate} useHref={useHref}>
            {/* Your app here... */}
        </HopperProvider>
    );
}
```

You can now trigger a full reload like so:

```tsx
<Link href="/api/export" routerOptions={{ fullRefresh: true }}>
  Download CSV
</Link>
```

This is particularly useful when Hopper components such as `<Link>`, `<LinkButton>`, or `<MenuItem>` must behave like traditional `<a>` tags that cause a hard navigation, while still using Hopper's consistent styling and focus management.

##### React Router

The [useNavigate](https://reactrouter.com/en/main/hooks/use-navigate) hook from `react-router-dom` returns a navigate function you can pass to `HopperProvider`. The [useHref](https://reactrouter.com/en/main/hooks/use-href) hook can also be provided if you're using React Router's `basename` option. Ensure that the component that calls `useNavigate` and renders `HopperProvider` is inside the router component (e.g. BrowserRouter) so that it has access to React Router's internal context. The React Router `<Routes>` element should also be defined inside Hopper's `<HopperProvider>` so that links inside the rendered routes have access to the router.

```tsx
import { BrowserRouter, type NavigateOptions, useHref, useNavigate } from "react-router-dom";
import { HopperProvider } from "@hopper-ui/components";

declare module "react-aria-components" {
    interface RouterConfig {
        routerOptions: NavigateOptions;
    }
}

function App() {
    const navigate = useNavigate();

    return (
        <HopperProvider navigate={navigate} useHref={useHref}>
            {/* Your app here... */}
            <Routes>
                <Route path="/" element={<HomePage />} />
                {/* ... */}
            </Routes>
        </HopperProvider>
    );
}

<BrowserRouter>
    <App />
</BrowserRouter>
```

### Color Schemes

Learn how color schemes work in Hopper, including how applications can adapt to operating system's dark mode.

#### Introduction

Hopper supports a light and a dark mode. These correspond to color schemes found in popular operating systems. Hopper defaults to the light color scheme, but the `colorScheme` property on the `HopperProvider` can be used to set the color scheme to `dark` or `system` (which will follow the user's operating system setting).

We recommend that all Hopper applications support both light and dark mode. It can be very jarring to use a light themed application when the rest of your applications are in dark mode, and visa versa. This can be accomplished by using Hopper color variables rather than hard coded color values. All Hopper components adapt to color scheme out of the box. See the [Styled System documentation](/styled-system/overview/introduction.md) for details on how to use Hopper color variables in your own custom components.

#### Applying a color scheme

A color scheme can either be enforced by providing a specific light or dark value to a [HopperProvider](./HopperProvider.md).

```tsx
import { Button, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider colorScheme="dark">
            <Button variant="secondary">Button</Button>
        </HopperProvider>
    );
}
```

A color scheme can also be set to `system`, which will follow the [user's operating system setting](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).

When the `system` value is provided, an additional fallback color scheme must be specified to defaultColorScheme in case the theme provider is not able to access the user setting.

```tsx
import { Button, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider colorScheme="system" defaultColorScheme="light">
            <Button variant="secondary">Button</Button>
        </HopperProvider>
    );
}
```

Color schemes can also be nested. You could have a dark themed dialog inside a light themed application. This might be useful for certain experiences, such as color scheme previews, where you want to showcase a specific color scheme regardless of the operating system's setting.

```tsx
import { Button, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider colorScheme="light">
            <Button variant="secondary" margin="inline-md">
                I'm a light button
            </Button>
            <HopperProvider colorScheme="dark">
                <Button variant="secondary" margin="inline-md">
                    I'm a dark button
                </Button>
            </HopperProvider>
        </HopperProvider>
    );
}
```

#### Context Hooks

To manage the color scheme in your application, Hopper exposes a `ColorSchemeContext` and a `useColorSchemeContext` hook.

```tsx
import {
    Button,
    Div,
    HopperProvider,
    useColorSchemeContext
} from "@hopper-ui/components";
import { useCallback } from "react";

function ColorSchemeToggle() {
    const { colorScheme, setColorScheme } = useColorSchemeContext();

    const handleClick = useCallback(() => {
        setColorScheme(colorScheme === "light" ? "dark" : "light");
    }, [colorScheme, setColorScheme]);

    return (
        <Button variant="secondary" onPress={handleClick}>
            Toggle Color Scheme
        </Button>
    );
}

export default function Example() {
    const { colorScheme: parentColorScheme } = useColorSchemeContext();

    return (
        <HopperProvider colorScheme={parentColorScheme}>
            <Div backgroundColor="neutral" padding="inset-lg" borderRadius="core_2">
                <ColorSchemeToggle />
            </Div>
        </HopperProvider>
    );
}
```

#### Utility Methods

##### useColorSchemeValue

Some features require the usage of custom colors. Those colors aren't like Hopper tokens and will not support color schemes out of the box.

To help with that, Hopper offers the `useColorSchemeValue` hook which will return the value matching the current color scheme of the closest `HopperProvider`.

You can test this hook by clicking the moon icon in the example below.

```tsx
import { Div, useColorSchemeValue } from "@hopper-ui/components";

export default function Example() {
    const color = useColorSchemeValue("#fff", "#000");
    const backgroundColor = useColorSchemeValue("#ff9048", "#fee2bb");

    return (
        <Div UNSAFE_color={color} UNSAFE_backgroundColor={backgroundColor}>
            Content
        </Div>
    );
}
```

#### Do's and Don'ts

**Rule 1**

* ✅ Do:

  Use the setColorScheme from useColorSchemeContext hook to programmatically change the application's color scheme

* 🚫 Don't:

  Manually set Hopper tokens directly on document.body to control light or dark mode

### Controlled Mode

Learn how to use controlled and uncontrolled modes to customize Hopper components.

When working with Hopper components, you can customize a component's behavior using **controlled** or **uncontrolled** properties, depending on your needs. This flexibility is the foundation for **building custom components** on top of Hopper, enabling you to implement interactive features or modify the default behavior of components while preserving their visual style and structure.

**Tip**: To dive deeper into the concept of controlled and uncontrolled components in React, read [React's guide here](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).

#### Uncontrolled Mode

**Uncontrolled mode** is great for situations where you don't need to manage the component's behavior with your own code.

In uncontrolled mode, the component manages its internal state. You provide an initial value using *defaultX* properties, and the component updates its state automatically in response to user interactions.

For example, to create a [TagGroup](./TagGroup.md) where some tags are initially selected, use the `defaultSelectedKeys` prop:

```tsx
import { Tag, TagGroup } from "@hopper-ui/components";

export default function Example() {
    return (
        <TagGroup
            aria-label="Jobs"
            selectionMode="multiple"
            defaultSelectedKeys={["designer", "developer"]}
        >
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

In this example:

* `defaultSelectedKeys`: Specifies the initially selected items.
* The component handles the selection state internally.

#### Controlled Mode

**Controlled mode** is suitable for scenarios where the component's state depends on external data or when you need to respond programmatically to user interactions or when you need to build a custom component.

In controlled mode, you manage the state of the component externally by providing the `X` and `onXChanged` properties. This allows for full control over the component's behavior and is ideal for complex interactions or when the component's state is derived from external logic.

For example, to fully manage the selected tags:

```tsx
import { Tag, TagGroup, type Selection } from "@hopper-ui/components";
import { useState } from "react";

export default function Example() {
    const [selectedKeys, setSelectedKeys] = useState(["designer"]);

    const handleSelectionChange = (newSelectedKeys: Selection) => {
        if (newSelectedKeys === "all") {
            setSelectedKeys(["designer", "developer", "manager"]);
        } else {
            setSelectedKeys([...Array.from(newSelectedKeys).map(x => x.toString())]);
        }
    };

    return (
        <TagGroup
            aria-label="Jobs"
            selectionMode="multiple"
            selectedKeys={selectedKeys}
            onSelectionChange={handleSelectionChange}
        >
            <Tag id="designer">Designer</Tag>
            <Tag id="developer">Developer</Tag>
            <Tag id="manager">Manager</Tag>
        </TagGroup>
    );
}
```

In this example:

* `selectedKeys`: Represents the current selection, controlled externally.
* `onSelectionChange`: Callback invoked when the selection changes, allowing you to update the external state.

#### Choosing Between Controlled and Uncontrolled Modes

* Use uncontrolled mode (defaultX) for simpler use cases where internal state management by the component suffices.
* Use controlled mode (X and onXChanged) when external logic or advanced control is required.

By leveraging these modes, you can tailor Hopper components to meet your application's functional requirements while maintaining consistency and reusability.

### Forms

Forms allow users to enter and submit data, and provide them with feedback along the way. Hopper includes many components that integrate with HTML forms, with support for custom validation, labels, and help text.

*Since Hopper components are designed on top of React Aria, this article is heavily inspired by the [Forms](https://react-spectrum.adobe.com/react-spectrum/forms.html) article in React-Aria's documentation.*

#### Labels and help text

Accessible forms start with clear, descriptive labels for each field. All Hopper form components support labeling using the `label` prop. In addition, help text associates additional context with a field such as a description or error message.

```tsx
import { PasswordField } from "@hopper-ui/components";

export default function Example() {
    return (
        <PasswordField
            label="Password"
            description="Password must be at least 8 characters."
        />
    );
}
```

Most fields should have a visible label. In rare exceptions, the aria-label or aria-labelledby attribute must be provided instead to identify the element.

#### Submitting data

How you submit form data depends on your framework, application, and server. By default, HTML forms are submitted by the browser using a full page refresh. You can take control of form submission by calling preventDefault during the onSubmit event, and make an API call to submit the data however you like.

##### Uncontrolled forms

The simplest way to get data from a form is using the browser's FormData API during the onSubmit event. This can be passed directly to [fetch](https://developer.mozilla.org/en-US/docs/Web/API/fetch), or converted into a regular JavaScript object using [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries). Each field should have a name prop to identify it, and values will be serialized to strings by the browser.

```tsx
import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form validationBehavior="native">
            <TextField
                label="Username"
                validate={value => value === "admin" ? "Nice try!" : null}
            />
            <ButtonGroup>
                <Button type="submit" variant="primary">Submit</Button>
                <Button type="reset" variant="secondary">Reset</Button>
            </ButtonGroup>
        </Form>
    );
}
```

By default, all Hopper components are uncontrolled, which means that the state is stored internally on your behalf. If you need access to the value in realtime, as the user is editing, you can make it controlled. You'll need to manage the state using React's [useState](https://react.dev/reference/react/useState) hook, and pass the current value and a change handler into each form component.

```tsx
import { Button, ButtonGroup, Div, Form, TextField } from "@hopper-ui/components";
import { useState, type FormEvent } from "react";

export default function Example() {
    const [name, setName] = useState("");

    const onSubmit = (e: FormEvent) => {
        e.preventDefault();

        // Submit data to your backend API...
        alert(name);
    };

    return (
        <Form onSubmit={onSubmit}>
            <TextField label="Name" value={name} onChange={setName} />
            <Div>You entered: {name}</Div>
            <ButtonGroup>
                <Button type="submit" variant="primary">Submit</Button>
                <Button type="reset" variant="secondary">Reset</Button>
            </ButtonGroup>
        </Form>
    );
}
```

#### Validation

Form validation is important to ensure user input is in an expected format and meets business requirements. Well-designed form validation assists the user with specific, helpful error messages without confusing and frustrating them with unnecessary errors on partial input. Hopper supports native HTML constraint validation with customizable UI, custom validation functions, realtime validation, and integration with server-side validation errors.

##### Built-in validation

All Hopper form components integrate with native HTML [constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation). This allows you to define constraints on each field such as required, minimum and maximum values, text formats such as email addresses, and even custom regular expression patterns. These constraints are checked by the browser when the user commits changes to the value (e.g. on blur) or submits the form.

To enable native validation, set the `validationBehavior="native"` prop on the [Form](./Form.md) component. This example shows a required email field, which is validated by the browser and displayed with a help text.

```tsx
import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form validationBehavior="native">
            <TextField label="Email" name="email" type="email" isRequired />
            <ButtonGroup>
                <Button type="submit" variant="primary">Submit</Button>
                <Button type="reset" variant="secondary">Reset</Button>
            </ButtonGroup>
        </Form>
    );
}
```

Supported constraints include:

* `isRequired` indicates that a field must have a value before the form can be submitted.
* `minValue` and `maxValue` specify the minimum and maximum value in a date picker or number field.
* `minLength` and `maxLength` specify the minimum and length of text input.
* `pattern` provides a custom [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) that a text input must conform to.
* `type="email"` and `type="url"` provide builtin validation for email addresses and URLs.

##### Customizing error messages

By default, Hopper displays the error message provided by the browser, which is localized in the user's preferred language. You can customize these messages by providing a function to the `errorMessage` prop. This receives a list of error strings along with a [ValidityState](https://developer.mozilla.org/en-US/docs/Web/API/ValidityState) object describing why the field is invalid, and should return an error message to display.

```tsx
import { Button, ButtonGroup, Form, TextField } from "@hopper-ui/components";

export default function Example() {
    return (
        <Form validationBehavior="native">
            <TextField
                label="Name"
                name="name"
                isRequired
                errorMessage={({ validationDetails }) => (
                    validationDetails.valueMissing ? "Please enter a name." : ""
                )}
            />
            <ButtonGroup>
                <Button type="submit" variant="primary">Submit</Button>
                <Button type="reset" variant="secondary">Reset</Button>
            </ButtonGroup>
        </Form>
    );
}
```

**Note**: The default error messages are localized by the browser using the browser/operating system language setting. Hopper's Provider has no effect on validation errors.

##### Custom validation

In addition to the built-in constraints, custom validation is supported by providing a function to the validate prop. This function receives the current field value, and can return a string or array of strings representing one or more error messages. These are displayed to the user after the value is committed (e.g. on blur) to avoid distracting them on each keystroke.

```tsx
import { Button, ButtonGroup, Div, Form, TextField } from "@hopper-ui/components";
import { useState, type FormEvent } from "react";

export default function Example() {
    const [submitted, setSubmitted] = useState<Record<string, FormDataEntryValue> | null>(null);

    const onSubmit = (e: FormEvent<HTMLFormElement>) => {
        // Prevent default browser page refresh.
        e.preventDefault();

        // Get form data as an object.
        const data = Object.fromEntries(new FormData(e.currentTarget));

        // Submit to your backend API...
        setSubmitted(data);
    };

    return (
        <Form onSubmit={onSubmit}>
            <TextField name="name" label="Name" />
            <ButtonGroup>
                <Button type="submit" variant="primary">Submit</Button>
                <Button type="reset" variant="secondary">Reset</Button>
            </ButtonGroup>
            {submitted && (
                <Div>
                    You submitted: <code>{JSON.stringify(submitted)}</code>
                </Div>
            )}
        </Form>
    );
}
```

#### Form libraries

In most cases, uncontrolled forms with the builtin validation features are enough. However, if you are building a truly complex form, or integrating Hopper components into an existing form, a separate form library such as [React Hook Form](https://react-hook-form.com/) or [Formik](https://formik.org/) may be helpful.

##### React Hook Form

[React Hook Form](https://react-hook-form.com/) is a popular form library for React. It is primarily designed to work directly with plain HTML input elements, but supports custom form components like the ones in Hopper as well.

Since Hopper manages the state for components internally, you can use the (Controller)\[https://react-hook-form.com/docs/usecontroller/controller] component from React Hook Form to integrate Hopper components. Pass the props for the `field` render prop through to the Hopper component you're using, and use the `fieldState` to get validation errors to display.

```tsx
import { Button, Form, TextField } from "@hopper-ui/components";
import { Controller, useForm } from "react-hook-form";

interface FormValues {
    name: string;
}

export default function Example() {
    const { handleSubmit, control } = useForm({
        defaultValues: {
            name: ""
        }
    });

    const onSubmit = (data: FormValues) => {
        // Call your API here...
        window.alert(data);
    };

    return (
        <Form onSubmit={handleSubmit(onSubmit)}>
            <Controller
                control={control}
                name="name"
                rules={{ required: "Name is required." }}
                render={({
                    field: { name, value, onChange, onBlur, ref },
                    fieldState: { invalid, error }
                }) => (
                    <TextField
                        label="Name"
                        name={name}
                        value={value}
                        onChange={onChange}
                        onBlur={onBlur}
                        ref={ref}
                        isRequired
                        isInvalid={invalid}
                        errorMessage={error?.message}
                    />
                )}
            />
            <Button type="submit" variant="primary">Submit</Button>
        </Form>
    );
}
```

### Internationalization

Adapting components to respect languages and cultures of users around the world is an great way to make your application accessible to the widest number of people.

#### Introduction

Internationalization is the process of structuring your code and user interface to support localization. Hopper supports many aspects of localization for many components out of the box, including translations for builtin strings, localized date and number formatting. By using Hopper to build your applications, these aspects of internationalization are handled for you.

To set the locale of your application, follow the procedure described in the [Hopper Provider documentation](./HopperProvider.md#application-provider-locales).

#### Supported locales

Hopper currently supports translations for 2 locales. They are listed below.

* English (United States) - `en-US`
* French (Canada) - `fr-CA`

#### Optimizing bundle size

Hopper uses React-Aria for internationalization, which is a peer dependency. This means that you must install `react-aria` in your application. React-Aria includes translations for over 30 languages. This is inclusive to the most users out of the box, but comes at the cost of bundle size. Since applications using Hopper do not support all of these locales, you can use React-Aria build plugins to include only the languages that we support in your JavaScript bundle.

The complete process is described in the [React-Aria documentation](https://react-spectrum.adobe.com/react-aria/internationalization.html#optimizing-bundle-size).

#### Utility Methods

React-Aria (a peer dependency of Hopper) provides some utility methods to help with localization. See [useDateFormatter](https://react-spectrum.adobe.com/react-aria/useDateFormatter.html), [useNumberFormatter](https://react-spectrum.adobe.com/react-aria/useNumberFormatter.html), and [useCollator](https://react-spectrum.adobe.com/react-aria/useCollator.html) for more information. The [Internationalized](https://react-spectrum.adobe.com/internationalized/index.html) collection of libraries provides framework-agnostic utilities for representing and manipulating dates and times, as well as parsing and formatting numbers across many locales, calendar systems and numbering systems.

### Layout

Learn how to build application layouts with Hopper using Flex or Grid.

#### Introduction

Hopper includes layout components to help build applications. The [Flex](./Flex.md) and [Grid](./Grid.md) components are containers responsible for the layout of their children. `Flex` follows the the [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) algorithm, while `Grid` implements [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout).

These components provide props with predefined Hopper tokens for sizing, spacing, and other layout options. You can use `Flex` and `Grid` together to build different parts of your application, and even nest them to create more complex layouts.

You should prefer using flex and grid over other CSS layout models. Spacing between components should be managed by parent layout components rather than added directly to the children. This ensures components are composable when reused in different places and that spacing remains consistent.

In addition to `Flex` and `Grid`, some Hopper components include prebuilt layouts which you can insert your content into via slots. You can read more about slots in the [slots](./slots.md) concept page.

#### Flex

The [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) layout model is a simple yet versatile method of laying out components in rows and columns. Use it to build vertical or horizontal stacks, simple wrapping grids, and more. The [Flex](./Flex.md) component can be used to create flexbox containers. Any Hopper component can be used as a child within these containers. Flex layouts can be nested to create more complex layouts.

The `gap`, `rowGap` and `columnGap` can be defined with [Hopper space tokens](/tokens/semantic/space.md) to ensure consistency across applications, and allow the layout to adapt to different devices automatically.

##### Example

A simple vertical stack, with a gap between each item defined using a [Hopper space token](/tokens/semantic/space.md).

```tsx
import { Div, Flex } from "@hopper-ui/components";

export default function Example() {
    return (
        <Flex direction="column" width="core_1280" gap="inline-sm">
            <Div backgroundColor="decorative-option1" height="core_640" />
            <Div backgroundColor="decorative-option3" height="core_640" />
            <Div backgroundColor="decorative-option4" height="core_640" />
        </Flex>
    );
}
```

##### Learn more

You can learn more about `Flex` and see more examples on the [Flex](./Flex.md) page. There are many great resources on the web for learning flexbox as well.

* [The MDN guide to flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) — full walkthrough of flexbox layout.
* [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) — great reference for all of the properties supported by flexbox.

#### Grid

[CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) is a powerful way to lay out elements in two dimensions. It can be used to to build full page application layouts, or smaller user interface elements. It is especially powerful because it allows you to build many types of layouts without extra presentational elements, keeping your code clean and semantic. In addition, grid layouts are automatically mirrored in right-to-left languages.

The [Grid](./Grid.md) component can be used as a container to define a grid layout. Any Hopper component can be used as a child of a `Grid`. The `Grid` component extends the CSS syntax to support defining grids using [Hopper-defined dimension tokens](/tokens/core/dimensions.md). This ensures that sizing and spacing is consistent between applications, and allows the layout to adapt to different devices automatically.

##### Defining grids

There are many ways to define grids, but the simplest is to use the `areas` prop to declaratively specify your layout using named areas. This prop accepts an array of strings which represent rows. Within the rows, you specify space separated names for grid areas. The children of the `Grid` can declare the `gridArea` prop, which places them into these named regions.

In addition, you can define the `columns` and `rows` props on the `Grid` container to specify the widths and heights of the columns and rows respectively. This can be done using [Hopper-defined dimension tokens](/tokens/core/dimensions.md) to ensure they are adaptive on various devices.

The following example shows how you could use `Grid` to declare a common application layout, with a header, sidebar, content area, and footer. Notice how there are no nested layout elements — the layout is entirely declared in the `Grid` and the children simply declare where they should be placed.

```tsx
import { Div, Grid } from "@hopper-ui/components";

export default function Example() {
    return (
        <Grid
            areas={[
                "header header",
                "sidebar content",
                "footer footer"
            ]}
            templateColumns={["1fr", "3fr"]}
            templateRows={["core_640", "auto", "core_640"]}
            UNSAFE_height="480px"
            UNSAFE_width="600px"
            gap="core_80"
        >
            <Div backgroundColor="decorative-option1" gridArea="header" />
            <Div backgroundColor="decorative-option2" gridArea="sidebar" />
            <Div backgroundColor="decorative-option3" gridArea="content" />
            <Div backgroundColor="decorative-option4" gridArea="footer" />
        </Grid>
    );
}
```

##### Learn more

You can learn more about `Grid` and see more examples on the [Grid](./Grid.md) page. There are many great resources on the web for learning CSS grid as well.

* [The MDN guide to CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) — full walkthrough of grid layout.
* [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid) — great reference for all of the properties supported by grid.
* [The Difference Between Explicit and Implicit Grids](https://css-tricks.com/difference-explicit-implicit-grids/) — an article that discusses the various ways of defining grids.

#### Choosing Inline, Stack, or Flex

Use Inline or Stack by default when your layout matches their intent. They are opinionated Flex presets that keep code shorter and more consistent:

**Important:** `Inline` and `Stack` do **not** support the raw `justifyContent` or `alignItems` props. Instead they expose semantic aliases:

```ts
/** An alias for the CSS justify-content property. */
alignX?: FlexProps["justifyContent"];

/** An alias for the CSS align-items property. */
alignY?: FlexProps["alignItems"];
```

Use `alignX` where you would normally use `justifyContent`, and `alignY` where you would use `alignItems` when working with `Inline` or `Stack`. The underlying `Flex` component still uses `justifyContent` and `alignItems` directly.

* `Inline` is `Flex` with `flex-direction: row`, `align-items: center`, and a default gap token for horizontal spacing (exposed as `alignY="center"`).
* `Stack` is `Flex` with `flex-direction: column` and a default gap token for vertical spacing.

##### When to use Inline

You have items in a single horizontal row and shared cross axis alignment: Typical header actions, icon plus label, button groups. It is fine to tweak one thing such as `gap`, `alignX` (was `justifyContent` in raw flex), or `wrap`. If you also need a different cross axis alignment (`alignY`) and another structural change, prefer `Flex`.

Example:

```tsx
<Inline gap="inline-sm" alignX="space-between">
  <Title />
  <Actions />
</Inline>
```

##### When to use Stack

You are arranging elements vertically with consistent spacing: Forms, card content, dialog body. It is fine to tweak one thing such as `gap` or `alignY` (alias for `alignItems`). If you also need direction to flip at a breakpoint or multiple alignment rules, prefer `Flex`.

Example:

```tsx
<Stack gap="stack-md">
  <Field />
  <Field />
  <HelpText />
</Stack>
```

##### When to use Flex

You are doing more than a light tweak or you need per child control. Any two or more of the following is a good signal to switch:

* Changing `alignItems` and `justifyContent` together (for `Inline`/`Stack` this would be changing both `alignX` and `alignY`),
* Mixing `wrap` with custom alignment,
* Using `order`, `flex grow` or `shrink` on children,
* Flipping `flex-direction` responsively,
* Aligning some children differently from others,
* Asymmetric or breakpoint specific gaps,
* Baseline alignment for text heavy rows.

Example:

```tsx
<Flex alignItems="flex-start" justifyContent="space-between" gap="inline-lg">
  <Avatar size="lg" name="Alexandre" />
  <Stack gap="stack-sm" flex={1}>
    <H3>Alexandre Asselin</H3>
    <Text variant="body-sm" color="text-secondary">
      Staff Software Engineer
    </Text>
  </Stack>
  <Inline gap="inline-sm">
    <Button variant="secondary">Message</Button>
    <Button variant="primary">Connect</Button>
  </Inline>
</Flex>
```

**Practical Rule** Start with `Inline` for horizontal rows and `Stack` for vertical stacks. If you find yourself changing more than one core knob or applying flex properties to individual children, move to `Flex`. One override is fine. Two or more usually means `Flex`.

#### Responsive layout

All props of the Flex and Grid components support object syntax to specify different values for the prop depending on a responsive breakpoint. You can learn more about responsive styles on the [Responsive Styles](/styled-system/concepts/responsive-styles.md) page.

### Slots

This page describes how Hopper components include predefined layouts that you can insert elements into via slots. Slots are named areas in a component that receive children and provide style and layout for them.

*Since Hopper components are designed on top of React Aria, this article is heavily inspired by the [Advanced Customization article](https://react-spectrum.adobe.com/react-aria/advanced.html#slots) in React-Aria's documentation.*

#### Introduction

The Hopper component API is designed around composition. Components are reused between patterns to build larger composite components. For example, there is no dedicated `NumberFieldIncrementButton` or `SelectPopover` component. Instead, the standalone [Button](./Button.md) and [Popover](./Popover.md) components are reused within [NumberField](./NumberField.md) and [Select](./Select.md). This reduces the amount of duplicate styling code you need to write and maintain, and provides powerful composition capabilities you can use in your own components.

```tsx
<Stepper>
  <Button slot="increment">⬆</Button>
  <Button slot="decrement">⬇</Button>
</Stepper>
```

Slots in Hopper are named areas within a component where developers can insert content. They make it easier to create flexible and reusable components while keeping layouts accessible and consistent. Instead of using only children for content, slots act as specific placeholders that clearly define where each piece of content goes.

Hopper builds on React Aria's context-based design to make working with slots simple and efficient. This approach gives developers more control over how components are customized and ensures they follow accessibility best practices. This guide explains how slots work in Hopper, how they use contexts, and how to create or extend components with them.

#### Custom patterns

Each Hopper exports a corresponding context that you can use to build your own compositional APIs similar to the built-in components. You can send any prop or ref via context that you could pass to the corresponding component. The local props and ref on the component are merged with the ones passed via context, with the local props taking precedence (following the rules documented in [mergeProps](https://react-spectrum.adobe.com/react-aria/mergeProps.html)).

This example shows a `FieldGroup` component that renders a group of text fields. The entire group can be marked as disabled via the isDisabled prop, which is passed to all child text fields via the TextFieldContext provider.

```tsx
import { TextFieldContext } from "@hopper-ui/components";
import type { ReactNode } from "react";

export interface FieldGroupProps {
    children?: ReactNode;
    isDisabled?: boolean;
}

export function FieldGroup({ children, isDisabled }: FieldGroupProps) {
    return (
        <TextFieldContext.Provider value={{ isDisabled }}>
            {children}
        </TextFieldContext.Provider>
    );
}
```

Any `TextField` component you place inside a `FieldGroup` will automatically receive the `isDisabled` prop from the group, including those that are deeply nested inside other components.

```tsx
<FieldGroup isDisabled={isSubmitting}>
  <TextField label="Name" />
  <TextField label="Email" />
</FieldGroup>
```

#### Slots

Some patterns include multiple instances of the same component. These use the `slot` prop to distinguish each instance. Slots are named children within a component that can receive separate behaviors and [styles](/styled-system/overview/introduction.md). Separate props can be sent to slots by providing an object with keys for each slot name to the component's context provider.

This example shows a `Stepper` component with slots for its increment and decrement buttons.

```tsx
import { ButtonContext } from "@hopper-ui/components";
import { useState, type PropsWithChildren } from "react";

export function Stepper({ children }: PropsWithChildren) {
    const [value, setValue] = useState(0);

    return (
        <ButtonContext.Provider
            value={{
                slots: {
                    increment: {
                        onPress: () => setValue(value + 1)
                    },
                    decrement: {
                        onPress: () => setValue(value - 1)
                    }
                }
            }}
        >
            {children}
        </ButtonContext.Provider>
    );
}
```

And it can be used like this:

```tsx
<Stepper>
  <Button slot="increment">⬆</Button>
  <Button slot="decrement">⬇</Button>
</Stepper>
```

##### Default slot

The default slot is used to provide props to a component without specifying a slot name. This approach allows you to assign a default slot to a component for its default use case and enables you to specify a slot name for a specific use case.

This example shows a custom component that passes a specific class name to a standard button child and to a button child with a slot named "end".

```tsx
import { ButtonContext, DEFAULT_SLOT } from "@hopper-ui/components";
import type { PropsWithChildren } from "react";

export function MyCustomComponent({ children }: PropsWithChildren) {
    return (
        <ButtonContext.Provider
            value={{
                slots: {
                    [DEFAULT_SLOT]: {
                        className: "left-button"
                    },
                    end: {
                        className: "right-button"
                    }
                }
            }}
        >
            {children}
        </ButtonContext.Provider>
    );
}
```

And it can be used like this:

```tsx
<MyCustomComponent>
  {/* Consumes the props passed to the default slot */}
  <Button>Click me</Button>
</MyCustomComponent>

<MyCustomComponent>
  {/* Consumes the props passed to the "end" slot */}
  <Button slot="end">Click me</Button>
</MyCustomComponent>
```

#### Consuming contexts

You can also consume from contexts provided by Hopper components in your own custom components. This allows you to replace a component used as part of a larger pattern with a custom implementation. For example, you could consume from `LabelContext` in an existing styled label component to make it compatible with Hopper Components.

##### useContextProps

The `useContextProps` hook merges the local props and ref with the ones provided via context by a parent component. The local props always take precedence over the context values (following the rules documented in [mergeProps](https://react-spectrum.adobe.com/react-aria/mergeProps.html)). `useContextProps` supports the slot prop to indicate which value to consume from context.

```tsx
import { type LabelProps, LabelContext, useContextProps } from "@hopper-ui/components";
import { forwardRef } from "react";

export const MyCustomLabel = forwardRef(
    (props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) => {
    // Merge the local props and ref with the ones provided via context.
        [props, ref] = useContextProps(props, ref, LabelContext);

        // ... your existing Label component
        return <label {...props} ref={ref} />;
    }
);
```

Since it consumes from LabelContext, MyCustomLabel can be used within any Hopper component instead of the built-in Label.

```tsx
<TextField>
    <MyCustomLabel>Name</MyCustomLabel>
    <Input />
</TextField>
```

##### useSlottedContext

To consume a context without merging with existing props, use the `useSlottedContext` hook. This works like React's `useContext`, and also accepts an optional slot argument to identify which slot name to consume.

```tsx
import { useSlottedContext } from "react-aria-components";

// Consume the un-slotted value.
let buttonContext = useSlottedContext(ButtonContext);

// Consume the value for a specific slot name.
let incrementButtonContext = useSlottedContext(ButtonContext, "increment");
```

#### Accessing state

Most Hopper components are built on top of React Aria Components. React Aria Components compose other standalone components in their children to build larger patterns. However, some components are made up of more tightly coupled children. For example, Calendar includes children such as CalendarGrid and CalendarCell that cannot be used standalone, and must appear within a Calendar or RangeCalendar. These components access the state from their parent via context.

You can access the state from a parent component via the same contexts in order to build your own custom children. This example shows a CalendarValue component that displays the currently selected date from a calendar as a formatted string.

### Styled System

All components are designed to be styled using props.

#### Introduction

Hopper embraces a **Styled System-inspired** approach to styling components, allowing developers to define styles directly via props rather than writing CSS. This method provides a **type-safe and intuitive API**, making it easier to build consistent, on-brand interfaces without dealing with complex class names or global styles. With built-in **intellisense and static analysis**, developers can confidently apply design tokens without memorizing them, ensuring efficiency and reducing errors.

#### Style Props

Style props are the most fundamental way to style your components in Hopper. They are basically css styles as props. [Learn more about style props](/styled-system/concepts/styling.md)

#### Key Concepts

Follow these links to learn key concepts about the Styled System:

* [Responsive Styles](/styled-system/concepts/responsive-styles.md)
* [Using Style Props on HTML Elements](/styled-system/concepts/html-elements.md)
* [Using Style Props on custom components](/styled-system/concepts/custom-components.md)

### Theming

Learn how themes work in Hopper

#### Introduction

Hopper supports a multiple themes for different product lines. Themes allow applications to customize the appearance of all Hopper components to match a specific brand.

#### Applying a theme

A theme needs to be provided to a [HopperProvider](./HopperProvider.md).

```tsx
import { Button, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider theme="sharegate">
            <Button variant="secondary">Button</Button>
        </HopperProvider>
    );
}
```

Theme can also be nested. This might be useful for certain experiences, such as theme previews, where you want to showcase a specific theme.

```tsx
import { Button, HopperProvider } from "@hopper-ui/components";

export default function Example() {
    return (
        <HopperProvider theme="workleap">
            <Button variant="secondary" margin="inline-md">
                I'm a workleap button
            </Button>
            <HopperProvider theme="sharegate">
                <Button variant="secondary" margin="inline-md">
                    I'm a sharegate button
                </Button>
            </HopperProvider>
        </HopperProvider>
    );
}
```

#### Context Hooks

To manage the theme in your application, Hopper exposes a `ThemeContext` and a `useThemeContext` hook. Make sure that your application includes all the css files required for the themes you want to support.

```tsx
import {
    Button,
    Div,
    HopperProvider,
    useThemeContext
} from "@hopper-ui/components";
import { useCallback } from "react";

function ColorSchemeToggle() {
    const { theme, setTheme } = useThemeContext();

    const handleClick = useCallback(() => {
        setTheme(theme === "workleap" ? "sharegate" : "workleap");
    }, [theme, setTheme]);
    return (
        <Button variant="secondary" onPress={handleClick}>
            Toggle Theme
        </Button>
    );
}

export default function Example() {
    const { theme: parentTheme } = useThemeContext();

    return (
        <HopperProvider theme={parentTheme}>
            <Div backgroundColor="neutral" padding="inset-lg" borderRadius="core_2">
                <ColorSchemeToggle />
            </Div>
        </HopperProvider>
    );
}
```

## Utility Functions and React Hooks

> This section offers a comprehensive overview of utility functions and React hooks for using components effectively.

### useDebounce

Delay the execution of function or state update with useDebounce.

This documentation covers both `useDebounce` and `useDebounceCallback` hooks for debouncing functionality. These hooks are particularly useful for optimizing performance in scenarios like search inputs, API calls, or any situation where you want to delay execution until after a pause in user activity.

#### Functions

##### useDebounce

A hook that acts like `useState`, but with debounced state updates.

```tsx
const [state, setStateDebounced, setStateImmediate] = useDebounce(initialState, wait?, leading?);
```

**Parameters:**

* `initialState` : The initial state value or a function that returns the initial state
* `wait` : The debounce delay in milliseconds (default: `100`)
* `leading` : When true, executes immediately on the first call, then debounces subsequent calls (default: `false`)

**Returns:**

* `state` : The current state value
* `setStateDebounced` : A debounced version of setState that waits for the specified delay
* `setStateImmediate` : The regular, immediate setState function

##### useDebounceCallback

A hook that debounces callback function execution.

```tsx
const debouncedCallback = useDebounceCallback(callback, wait?, leading?)
```

**Parameters:**

* `callback` : The callback function to debounce. Wrap unstable callbacks in useCallback()
* `wait` : The debounce delay in milliseconds (default: `100`)
* `leading` : When true, executes immediately on the first call (default: `false`)

**Returns:** A debounced version of the original callback

#### Usage

##### Simple State Debouncing

Use `useDebounce` just like `useState`, but with automatic debouncing:

```tsx
import { Paragraph, Stack, TextField, useDebounce } from "@hopper-ui/components";
import { useEffect } from "react";

export default function Example() {
    const [message, setMessage] = useDebounce("", 100);

    const handleInputChange = (text: string) => {
        setMessage(text);
    };

    // This effect will only run 100ms after the user stops typing
    useEffect(() => {
        if (message) {
            // eslint-disable-next-line no-console
            console.log("Debounced message:", message);
            // Perform some action with the debounced value
        }
    }, [message]);

    return (
        <Stack>
            <TextField
                onChange={handleInputChange}
                placeholder="Type something..."
            />
            <Paragraph>Debounced value: {message}</Paragraph>
        </Stack>
    );
}
```

##### Responsive Search with Debounced API Calls

Show immediate feedback while debouncing expensive operations:

```tsx
import { Paragraph, SearchField, Span, Stack, useDebounce } from "@hopper-ui/components";
import { useEffect, useState } from "react";

export default function Example() {
    const [inputValue, setInputValue] = useState(""); // We use a state for immediate input updates
    const [debouncedQuery, setDebouncedQuery] = useDebounce("", 400); // Debounced API calls
    const [results, setResults] = useState<string[]>([]);
    const [isSearching, setIsSearching] = useState(false);

    const handleInputChange = (value: string) => {
        setInputValue(value); // Update input immediately for responsiveness
        setDebouncedQuery(value); // Trigger debounced search
        if (value.trim()) {
            setIsSearching(true);
        }
    };

    // Effect runs only after user stops typing for 400ms
    useEffect(() => {
        if (debouncedQuery.trim()) {
            searchAPI(debouncedQuery).then(data => {
                setResults(data.map(item => item.name));
                setIsSearching(false);
            });
        } else {
            setResults([]);
            setIsSearching(false);
        }
    }, [debouncedQuery]);

    return (
        <Stack>
            <SearchField
                value={inputValue}
                onChange={handleInputChange}
                placeholder="Search..."
            />
            {isSearching && <Span>Searching...</Span>}
            <Paragraph>Results: {results.join(", ")}</Paragraph>
        </Stack>
    );
}

function searchAPI(query: string) {
    // Simulate an API call with a delay
    return new Promise<{ id: number; name: string }[]>(resolve => {
        setTimeout(() => {
            resolve([
                { id: 1, name: `Result for "${query}" 1` },
                { id: 2, name: `Result for "${query}" 2` },
                { id: 3, name: `Result for "${query}" 3` }
            ]);
        }, 1000);
    });
}
```

##### Callback Debouncing

Useful for expensive operations like window resize handlers or form validation:

```tsx
import { Div, useDebounceCallback } from "@hopper-ui/components";
import { useEffect, useState } from "react";

export default function Example() {
    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

    const handleResize = useDebounceCallback(() => {
        setDimensions({
            width: window.innerWidth,
            height: window.innerHeight
        });
    }, 100);

    useEffect(() => {
        window.addEventListener("resize", handleResize);

        return () => window.removeEventListener("resize", handleResize);
    }, [handleResize]);

    return (
        <Div>
            Window size: {dimensions.width} x {dimensions.height}
        </Div>
    );
}
```

##### Leading Edge Execution

Execute immediately on the first call, then debounce subsequent calls:

```tsx
import { Button, useDebounceCallback } from "@hopper-ui/components";

export default function Example() {
    const handlePress = useDebounceCallback(
        () => {
            // eslint-disable-next-line no-console
            console.log("Button clicked!");
            // Expensive operation here
        },
        400,
        // Leading edge - executes immediately on first click
        true
    );

    return <Button onPress={handlePress}>Click me</Button>;
}
```

##### Form Validation

Show immediate UI feedback but debounce expensive validation:

```tsx

import { TextField, useDebounce } from "@hopper-ui/components";
import { useEffect, useState } from "react";

export default function Example() {
    const [inputValue, setInputValue] = useState("");
    const [debouncedEmail, setDebouncedEmail] = useDebounce("", 400);
    const [isValid, setIsValid] = useState(true);
    const [isValidating, setIsValidating] = useState(false);

    const handleInputChange = (value: string) => {
        setInputValue(value); // Update input immediately for responsiveness
        setDebouncedEmail(value); // Trigger debounced validation
        if (value) {
            setIsValidating(true);
        }
    };

    useEffect(() => {
        if (debouncedEmail) {
            const isEmailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(debouncedEmail);
            setIsValid(isEmailValid);
        }
        setIsValidating(false);
    }, [debouncedEmail]);

    return (
        <TextField
            type="email"
            value={inputValue}
            onChange={handleInputChange}
            placeholder="Enter your email"
            description={isValidating ? "Validating..." : undefined}
            errorMessage="Invalid email"
            isInvalid={!isValid && !isValidating && !!inputValue}
        />
    );
}
```

#### Best Practices

* **Timing guidelines**: Choose appropriate timing values based on use case:

  ```tsx
  useDebounce(initialState, 100)   // 100ms - good for UI feedback
  useDebounce(initialState, 400)   // 400ms - good for search/API calls
  useDebounce(initialState, 1000)  // 1000ms - good for heavy operations
  ```

* **Stable callbacks**: When using `useDebounceCallback`, wrap unstable callbacks (those that depend on props or state) in `useCallback()` to prevent debouncing from breaking between renders.

## Icons

> This section offers a comprehensive list of all React and SVG icons, including their details and usage guidelines.

### Introduction

Getting started with Hopper's Icons

Icons are an essential part of building intuitive and engaging user interfaces. Hopper offers a versatile and comprehensive icon system tailored to meet diverse project needs, whether you're building with React or using static assets in other frameworks.

#### Using Hopper Icons

Hopper provides two main packages, React components or pure SVG, giving you the flexibility to choose how to integrate icons into your project.

##### React Applications

Designed specifically for React applications, this package offers all icons as React components.

* [Standard Icons](../react-icons/icon-library.md):Monochromatic and simple. Best suited for functional UI elements like buttons, menus, or actions.
* [Rich Icons](../react-icons/rich-icon-library.md):Vibrant and colorful. Perfect for decorative purposes or drawing attention to specific elements.

##### Other Frameworks

Ideal for non-React setups, this package provides raw SVG files.

* [Standard Icons](../SVG-icons/icon-library.md):Monochromatic and simple. Best suited for functional UI elements like buttons, menus, or actions.
* [Rich Icons](../SVG-icons/rich-icon-library.md):Vibrant and colorful. Perfect for decorative purposes or drawing attention to specific elements.

#### Start Designing Icons

No matter the platform or design requirements, Hopper icons empower developers and designers to create polished, visually aligned interfaces.

* [Designing an Icon](../advanced/designing-an-icon.md)

### Icon Library

Getting started with Hopper's Icons library

All icons in the Workleap icon library are available in three predefined sizes. To ensure consistency and clarity, always use the icons at one of these sizes. Avoid resizing icons to dimensions other than the provided options.

To integrate an icon into your project, simply import it from `@hopper-ui/icons`.

```tsx
import { AddCalendarIcon } from "@hopper-ui/icons"
```

You can preview icons in your preferred size. Simply click on an icon to instantly copy its name!

Available Sizes: `sm`,`md`,`lg`

| Name                        | Keywords                                                                                                                                                                                                                                                                                                                         |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AddIcon`                   | add, plus, increase                                                                                                                                                                                                                                                                                                              |
| `AddCalendarIcon`           | add calendar, schedule, appointment, meeting, event                                                                                                                                                                                                                                                                              |
| `AddUserIcon`               | add user, new user, create account, invite, join, team member                                                                                                                                                                                                                                                                    |
| `AiIcon`                    |                                                                                                                                                                                                                                                                                                                                  |
| `AlignmentIcon`             | alignment, orientation, direction, compass, navigation, position, layout                                                                                                                                                                                                                                                         |
| `AmbassadorshipIcon`        | ambassador, partnership, advocacy, relationship, collaboration, representation, networking                                                                                                                                                                                                                                       |
| `AngleDownIcon`             | angle down, chevron down, dropdown, expand, more, navigation, downward                                                                                                                                                                                                                                                           |
| `AngleLeftIcon`             | angle left, chevron left, back, previous, navigation, leftward, backward                                                                                                                                                                                                                                                         |
| `AngleRightIcon`            | angle right, chevron right, next, forward, navigation, rightward, continue                                                                                                                                                                                                                                                       |
| `AngleUpIcon`               | angle up, chevron up, collapse, upward, navigation, minimize, hide                                                                                                                                                                                                                                                               |
| `ApplauseIcon`              | applause, clap, appreciation, recognition, congratulations, praise, feedback                                                                                                                                                                                                                                                     |
| `ArchiveIcon`               | archive, storage, file, box, container, save, store                                                                                                                                                                                                                                                                              |
| `ArrowDownIcon`             | arrow down, download, downward, direction, move down, descend, lower                                                                                                                                                                                                                                                             |
| `ArrowLeftIcon`             | arrow left, back, previous, leftward, backward, return, navigate back                                                                                                                                                                                                                                                            |
| `ArrowRightIcon`            | arrow right, next, forward, rightward, continue, proceed, navigate forward                                                                                                                                                                                                                                                       |
| `ArrowUpIcon`               | arrow up, upload, upward, direction, move up, ascend, higher                                                                                                                                                                                                                                                                     |
| `ArrowsOutVerticalIcon`     | arrows out vertical, expand vertically, resize height, vertical adjustment, stretch, vertical resize, height                                                                                                                                                                                                                     |
| `AssistantIcon`             | assistant, helper, support, aid, delegate, administrative, collaboration                                                                                                                                                                                                                                                         |
| `AssistantToIcon`           | assistant to, delegation, reporting structure, administrative support, organizational hierarchy, executive assistant, support role                                                                                                                                                                                               |
| `AttachmentIcon`            | attachment, paperclip, file, document, attach, upload, append                                                                                                                                                                                                                                                                    |
| `BarsIcon`                  | bars, hamburger menu, navigation, menu, options, mobile menu, toggle                                                                                                                                                                                                                                                             |
| `BasketballIcon`            | basketball, sport, game, ball, team, recreation, athletics                                                                                                                                                                                                                                                                       |
| `BentoIcon`                 | bento, grid, menu, app launcher, options, applications, dashboard                                                                                                                                                                                                                                                                |
| `BirthdayIcon`              | birthday, cake, celebration, anniversary, special occasion, party, commemoration                                                                                                                                                                                                                                                 |
| `BoldIcon`                  | bold, text formatting, typography, font weight, emphasis, strong, rich text                                                                                                                                                                                                                                                      |
| `BoltIcon`                  | bolt, lightning, flash, energy, power, speed, electricity, quick action                                                                                                                                                                                                                                                          |
| `BookIcon`                  | book, reading, learning, education, documentation, knowledge, literature, manual                                                                                                                                                                                                                                                 |
| `BookmarkIcon`              | bookmark, save, favorite, flag, mark, remember, reference, tag                                                                                                                                                                                                                                                                   |
| `BranchesIcon`              | branches, fork, version control, git, paths, options, diverge, workflow                                                                                                                                                                                                                                                          |
| `BriefcaseIcon`             | briefcase, business, work, job, career, professional, employment, workplace                                                                                                                                                                                                                                                      |
| `BuildIcon`                 | build, construct, configure, settings, tools, wrench, customize, develop                                                                                                                                                                                                                                                         |
| `BulletIcon`                | bullet, dot, point, circle, marker, list item, highlight, indicator                                                                                                                                                                                                                                                              |
| `BullseyeIcon`              | bullseye, target, goal, objective, aim, precision, accuracy, focus                                                                                                                                                                                                                                                               |
| `CalendarIcon`              | calendar, date, schedule, event, appointment, planning, time, month                                                                                                                                                                                                                                                              |
| `CameraIcon`                | camera, photography, photo, picture, image, capture, snapshot, media                                                                                                                                                                                                                                                             |
| `CarIcon`                   | car, automobile, vehicle, transportation, travel, commute, driving, journey                                                                                                                                                                                                                                                      |
| `CaretDownIcon`             | caret down, dropdown, expand, menu, triangle down, disclosure, collapse, downward                                                                                                                                                                                                                                                |
| `CaretDownSolidIcon`        | caret down solid, dropdown, expand, menu, triangle down, disclosure, collapse, downward, filled, solid                                                                                                                                                                                                                           |
| `CaretUpIcon`               | caret up, collapse, expand, menu, triangle up, disclosure, upward, ascending, sort                                                                                                                                                                                                                                               |
| `CaretUpSolidIcon`          | caret up solid, collapse, expand, menu, triangle up, disclosure, upward, ascending, sort, filled, solid                                                                                                                                                                                                                          |
| `CatIcon`                   | cat, pet, animal, feline, kitten, playful, cute, domestic, companion, mascot, wildlife                                                                                                                                                                                                                                           |
| `ChartBarIcon`              | bar chart, graph, data, analytics, statistics, visualization, metrics, reporting, dashboard, performance, trends                                                                                                                                                                                                                 |
| `ChartLineIcon`             | line chart, graph, trend, data, analytics, statistics, visualization, metrics, reporting, dashboard, performance, time series, growth                                                                                                                                                                                            |
| `ChartPieIcon`              | pie chart, chart, graph, data, analytics, statistics, visualization, metrics, reporting, dashboard, distribution, proportion, percentage, segment                                                                                                                                                                                |
| `CheckmarkIcon`             | checkmark, tick, check, success, complete, done, verified, confirmed, approved, selected, correct, validation                                                                                                                                                                                                                    |
| `CherriesIcon`              | cherries, fruit, food, sweet, fresh, harvest, nature, reward, bonus, treat, seasonal                                                                                                                                                                                                                                             |
| `CircleAngleLeftIcon`       | circle angle left, back, previous, navigation, left, chevron, circular button, return, backward, carousel, slideshow, direction                                                                                                                                                                                                  |
| `CircleAngleRightIcon`      | circle angle right, right arrow, next, forward, proceed, navigation, direction, right, carousel, pagination, advance, continue                                                                                                                                                                                                   |
| `ClockIcon`                 | clock, time, schedule, appointment, calendar, deadline, duration, timer, history, reminder, timestamp, waiting                                                                                                                                                                                                                   |
| `CollapseLeftIcon`          | collapse left, minimize, sidebar, panel, navigation, dock, hide, fold, compress, shrink, left, interface                                                                                                                                                                                                                         |
| `CollapseRightIcon`         | collapse right, minimize, sidebar, panel, navigation, dock, hide, fold, compress, shrink, right, interface                                                                                                                                                                                                                       |
| `CommentIcon`               | comment, chat, message, discussion, conversation, feedback, communication, speech bubble, dialogue, talk, review, reply                                                                                                                                                                                                          |
| `CommentCheckIcon`          | comment check, approved comment, resolved discussion, completed feedback, reviewed, acknowledged, verified, confirmation, message status, communication, resolution, completion                                                                                                                                                  |
| `ConnectionsIcon`           | connections, network, relationship, integration, link, connect, association, collaboration, partnership, sharing, intersection, overlap                                                                                                                                                                                          |
| `CopyIcon`                  | copy, duplicate, clone, replicate, clipboard, duplication, reproduction, backup, mirror, identical, document, content                                                                                                                                                                                                            |
| `CountIcon`                 | count, numbers, enumeration, sequence, ordered list, numbering, steps, ranking, progression, series, order, numeric                                                                                                                                                                                                              |
| `CsvIcon`                   |                                                                                                                                                                                                                                                                                                                                  |
| `DecreaseIndentIcon`        | decrease indent, outdent, text formatting, paragraph, alignment, text editor, word processor, document, formatting, layout, margin, left align                                                                                                                                                                                   |
| `DeleteIcon`                | delete, trash, remove, bin, waste, discard, erase, eliminate, garbage, clean up, purge, destroy                                                                                                                                                                                                                                  |
| `DepartmentIcon`            | department, organization, team, structure, hierarchy, division, unit, group, branch, section, organizational chart, company structure                                                                                                                                                                                            |
| `DirectReportsIcon`         | direct reports, team members, subordinates, reporting structure, manager, team lead, hierarchy, organization, reporting line, team structure, supervision, management                                                                                                                                                            |
| `DismissIcon`               | dismiss, close, cancel, remove, exit, clear, cross, delete, hide, reject, terminate, x                                                                                                                                                                                                                                           |
| `DollarIcon`                | dollar, money, currency, finance, payment, price, cost, financial, cash, transaction, budget, economy                                                                                                                                                                                                                            |
| `DottedLinesIcon`           | dotted lines, dashed border, boundary, outline, selection, perimeter, frame, container, highlight, area, region, segmentation                                                                                                                                                                                                    |
| `DownloadIcon`              | download, save, get, retrieve, obtain, file, content, transfer, fetch, acquire, store, local copy                                                                                                                                                                                                                                |
| `DuplicateIcon`             | duplicate, copy, clone, replicate, reproduce, mirror, create copy, duplicate item, make another, multiply, repeat, template                                                                                                                                                                                                      |
| `EditIcon`                  | edit, modify, change, update, revise, pencil, write, amend, alter, adjust, correction, revision                                                                                                                                                                                                                                  |
| `EnterIcon`                 | enter, login, access, sign in, join, admission, entry, ingress, input, submit, proceed, continue                                                                                                                                                                                                                                 |
| `EventIcon`                 | event, appointment, schedule, calendar, meeting, booking, reservation, occurrence, activity, confirmed event, completed event, time slot                                                                                                                                                                                         |
| `EverythingReportIcon`      | everything report, comprehensive, all-inclusive, complete, full, total, entire, all, overview, summary, holistic, universal                                                                                                                                                                                                      |
| `ExitIcon`                  | exit, logout, sign out, leave, depart, quit, close, end session, log off, disconnect, terminate, escape                                                                                                                                                                                                                          |
| `EyeHiddenIcon`             | eye hidden, hidden, invisible, hide, visibility off, not visible, concealed, masked, private, password, obscured, unseen                                                                                                                                                                                                         |
| `EyeVisibleIcon`            | eye visible, view, show, visible, display, reveal, see, preview, visibility, unhide, watch, observe                                                                                                                                                                                                                              |
| `FeedbackIcon`              | feedback, comment, opinion, review, input, response, suggestion, reaction, evaluation, assessment, rating, survey                                                                                                                                                                                                                |
| `FileCheckIcon`             | file check, verified document, approved file, validated, completed form, confirmed, checked, document verification, file approval, certified, authenticated, validated document                                                                                                                                                  |
| `FilterIcon`                | filter, sort, refine, adjust, narrow down, parameters, settings, controls, preferences, customize, search criteria, sift                                                                                                                                                                                                         |
| `FiveIcon`                  | five, number 5, numeric, rating, step, count, quantity, value, digit, fifth, sequence, enumeration                                                                                                                                                                                                                               |
| `FlagIcon`                  | flag, mark, highlight, attention, important, bookmark, tag, label, indicator, notification, priority, save                                                                                                                                                                                                                       |
| `FocusIcon`                 | focus, microphone, audio, voice, recording, speech, sound, input, dictation, concentration, attention, listening                                                                                                                                                                                                                 |
| `FolderIcon`                | folder, directory, storage, files, organization, collection, category, container, group, classification, repository, archive                                                                                                                                                                                                     |
| `FootballIcon`              | football, american football, rugby, sports, game, competition, athletics, team, recreation, physical activity, ball, play                                                                                                                                                                                                        |
| `FourIcon`                  | four, number, count, numeric, digit, 4, quantity                                                                                                                                                                                                                                                                                 |
| `GaugeIcon`                 | gauge, speedometer, dashboard, metrics, measurement, performance, monitoring, indicator, analytics, statistics, level, progress                                                                                                                                                                                                  |
| `GiftIcon`                  | gift, present, reward, offer, surprise, package, celebration, special, bonus, giveaway, prize, treat                                                                                                                                                                                                                             |
| `GraduationHatIcon`         | graduation, education, learning, academic, degree, diploma, achievement, knowledge, course, training, study, school, university, college, certification, development                                                                                                                                                             |
| `GraphIcon`                 | graph, network, connections, relationships, nodes, links, visualization, mapping, structure, diagram, data, analytics, topology, interconnection, web                                                                                                                                                                            |
| `GridIcon`                  | grid, layout, matrix, tiles, view, arrangement, display, rows, columns                                                                                                                                                                                                                                                           |
| `GripIcon`                  | grip, handle, drag, move, reorder, sort, resize, grabber, draggable, control                                                                                                                                                                                                                                                     |
| `GroupsIcon`                | groups, teams, collections, categories, organization, collaboration, clustering, departments, units, segments, classification, community, ensemble, cohort, assembly                                                                                                                                                             |
| `GrowthIcon`                | growth, development, progress, improvement, nurturing, cultivation, expansion, advancement, evolution, flourishing, maturation, potential, prosperity, success, achievement, blooming                                                                                                                                            |
| `HappinessIcon`             | happiness, smile, satisfaction, joy, positive, emotion, feedback, mood, wellbeing, contentment, delight, pleasure, cheerful, happy, enjoyment, fulfillment                                                                                                                                                                       |
| `HierarchyIcon`             | hierarchy, organization, structure, reporting, chain, tree, levels, management, subordinates, relationships, taxonomy, classification, ranking, order, arrangement, network                                                                                                                                                      |
| `HomeIcon`                  | home, house, homepage, dashboard, main, start, landing, residence, shelter, dwelling, abode, domicile, navigation, central, base                                                                                                                                                                                                 |
| `HourglassIcon`             | hourglass, timer, time, waiting, loading, processing, duration, delay, countdown, timeout, progress, patience, temporary, interval, period, elapsed                                                                                                                                                                              |
| `ImageIcon`                 | image, picture, photo, photograph, gallery, visual, media, graphic, artwork, illustration, snapshot, upload, display, view, landscape                                                                                                                                                                                            |
| `IncreaseIndentIcon`        | indent, increase, formatting, text, paragraph, editor, layout, spacing, margin, tab, document, alignment, structure, hierarchy, organization                                                                                                                                                                                     |
| `InfoIcon`                  | info, information, help, details, tooltip, hint, explanation, guidance, assistance, context, learn, about, description, knowledge, reference                                                                                                                                                                                     |
| `InvoiceIcon`               | invoice, bill, receipt, payment, transaction, financial, document, accounting, billing, statement, expense, record, purchase, order, commerce                                                                                                                                                                                    |
| `ItalicIcon`                | italic, formatting, text, style, emphasis, slant, typography, editor, font, highlight, markup, rich text, writing, document, composition                                                                                                                                                                                         |
| `KebabIcon`                 | kebab, menu, options, more, actions, vertical, ellipsis, dots, dropdown, overflow, additional, settings, context, controls, navigation                                                                                                                                                                                           |
| `KeyIcon`                   | key, access, security, authentication, password, unlock, secure, permission, credential, login, protection, authorization, entry, private, encryption                                                                                                                                                                            |
| `KeyResultIcon`             | key result, goal, milestone, achievement, objective, target, outcome, performance, metric, measurement, progress, success, indicator, benchmark, OKR                                                                                                                                                                             |
| `LanguageIcon`              | language, globe, world, international, translation, localization, multilingual, i18n, global, region, country, dialect, speech, communication, culture                                                                                                                                                                           |
| `LearningPathIcon`          | learning path, education, course, curriculum, journey, progression, development, training, roadmap, sequence, steps, milestones, skills, knowledge, instruction                                                                                                                                                                  |
| `LearningPathStepIcon`      | learning step, lesson, module, course unit, educational content, training segment, curriculum component, instruction, tutorial, chapter, section, learning material, educational resource, study unit, progression                                                                                                               |
| `LightbulbIcon`             | lightbulb, idea, inspiration, insight, suggestion, tip, hint, creativity, innovation, solution, concept, thinking, discovery, realization, brainstorm                                                                                                                                                                            |
| `LinkIcon`                  | link, hyperlink, URL, connection, relationship, reference, attachment, association, binding, chain, connect, join, web, navigate, shortcut                                                                                                                                                                                       |
| `LocationIcon`              | location, map, pin, marker, address, place, position, geography, coordinates, navigation, directions, destination, GPS, geolocation, waypoint                                                                                                                                                                                    |
| `LockIcon`                  | lock, security, privacy, protection, restricted, password, authentication, confidential, secure, private, encrypted, safeguard, access control, permission, confidentiality                                                                                                                                                      |
| `LockedCalendarIcon`        | locked calendar, restricted calendar, unavailable calendar, calendar security, protected dates, read-only calendar, calendar access, schedule protection, blocked calendar                                                                                                                                                       |
| `LockedNoteIcon`            | locked note, secure document, private note, confidential, protected content, restricted document, encrypted note, sensitive information, classified, secure file, private document, access control, data protection, privacy, security                                                                                           |
| `MailIcon`                  | mail, email, message, envelope, communication, correspondence, notification, inbox, send, receive, contact, letter, post, delivery, messaging                                                                                                                                                                                    |
| `MaximizeIcon`              | maximize, expand, fullscreen, enlarge, zoom, grow, resize, scale up, stretch, widen, extend, increase, amplify, broaden, magnify                                                                                                                                                                                                 |
| `MediaIcon`                 | media, gallery, library, collection, multimedia, content, grid, layout, images, videos, audio, files, organize, display, browse                                                                                                                                                                                                  |
| `MicrophoneIcon`            | microphone, audio, voice, recording, speech, sound, input, dictation, speaking, talk, vocal, record, capture, communication, broadcast                                                                                                                                                                                           |
| `MicrophoneDisabledIcon`    | microphone disabled, mute, audio off, voice muted, silent, no sound, disabled recording, quiet, silence, turn off mic, stop recording, block audio, deactivate, suppress, disable                                                                                                                                                |
| `MinusIcon`                 | minus, subtract, remove, decrease, collapse, reduce, negative, deletion, less, minimize                                                                                                                                                                                                                                          |
| `MobileIcon`                | mobile, smartphone, phone, device, cellular, responsive, portable, handheld, touchscreen, app, mobile-friendly, on-the-go, wireless, tablet, accessibility                                                                                                                                                                       |
| `MoveIcon`                  | move, drag, drop, reposition, rearrange, relocate, shift, transfer, adjust, placement, organize, sort, order, arrange, position                                                                                                                                                                                                  |
| `NewCommentIcon`            | new comment, unread message, notification, feedback, conversation, discussion, reply, chat, communication, message, alert, update, response, interaction, dialogue                                                                                                                                                               |
| `NewFilterIcon`             | new filter, filter, sort, refine, search, criteria, parameters, options, settings, customize, narrow, results, organize, categorize, notification                                                                                                                                                                                |
| `NewGiftIcon`               | new gift, reward, present, offer, bonus, incentive, prize, giveaway, promotion, surprise, notification, special, freebie, perk, benefit                                                                                                                                                                                          |
| `NewNoteIcon`               | new note, document, note, memo, notification, unread, message, text, content, information, update, alert, reminder, record, entry                                                                                                                                                                                                |
| `NewNotificationIcon`       | new notification, alert, bell, update, message, reminder, notice, announcement, attention, signal, indicator, badge, prompt, inform, activity                                                                                                                                                                                    |
| `NewStickyIcon`             | new sticky, sticky note, reminder, note, memo, notification, quick note, post-it, jot, annotation, brief, reminder, task, to-do, scribble                                                                                                                                                                                        |
| `NewTabIcon`                | new tab, external link, open, navigate, redirect, launch, window, browser, hyperlink, outbound, reference, destination, target, portal, connection                                                                                                                                                                               |
| `NewTemplateIcon`           | new template, template, layout, structure, format, pattern, design, blueprint, framework, boilerplate, preset, model, guide, notification, starter                                                                                                                                                                               |
| `NewTipIcon`                | new tip, hint, suggestion, advice, guidance, help, insight, recommendation, pointer, clue, instruction, direction, notification, information, assistance                                                                                                                                                                         |
| `NextCalendarIcon`          | next calendar, forward, advance, navigation, schedule, upcoming, future, next period, next day, next week, next month, chronological, time, date, progression                                                                                                                                                                    |
| `NoteIcon`                  | note, document, file, text, content, page, paper, memo, record, information, writing, documentation, sheet, entry, composition                                                                                                                                                                                                   |
| `NotebookIcon`              | notebook, journal, diary, log, notes, record, writing, documentation, collection, entries, spiral, bound, composition, planner, organizer                                                                                                                                                                                        |
| `NotificationIcon`          | notification, bell, alert, reminder, message, update, inform, attention, notice, ping, signal, announcement, warning, activity, event                                                                                                                                                                                            |
| `OneIcon`                   | one, number, first, primary, initial, single, start, beginning, priority, order, sequence, count, numeric, ranking, step                                                                                                                                                                                                         |
| `OneOnOneIcon`              | one-on-one, meeting, appointment, consultation, discussion, interview, mentoring, coaching, feedback, personal, individual, face-to-face, calendar, schedule, session                                                                                                                                                            |
| `OpenRoleIcon`              | open role, job opening, vacancy, position, recruitment, hiring, career, opportunity, employment, job posting, talent acquisition, staffing, job search, application, human resources                                                                                                                                             |
| `OpenSmileIcon`             | smile, happy, positive, satisfaction, feedback, emotion, face, emoji, joy, pleased, grin                                                                                                                                                                                                                                         |
| `OrderedListIcon`           | ordered list, numbered list, sequence, priority, ranking, steps, enumeration, hierarchy, organization, structure, formatting, outline, sequential, itemized, numeric                                                                                                                                                             |
| `OrgChartIcon`              | org chart, organizational chart, hierarchy, structure, reporting, management, team, department, chain of command, relationships, organization, corporate structure, tree diagram, reporting lines, leadership                                                                                                                    |
| `OrganizationIcon`          | organization, company, business, corporation, enterprise, institution, department, structure, hierarchy, entity, establishment, firm, workplace, office, building                                                                                                                                                                |
| `PauseIcon`                 | pause, stop, halt, suspend, break, interrupt, media, playback, control, temporary, freeze, wait, hold, standby, delay                                                                                                                                                                                                            |
| `PdfIcon`                   |                                                                                                                                                                                                                                                                                                                                  |
| `PeaceIcon`                 | peace, harmony, balance, tranquility, calm, serenity, wellness, mindfulness, resolution, reconciliation, unity, cooperation, agreement, coexistence, wellbeing                                                                                                                                                                   |
| `PercentIcon`               | percent, percentage, proportion, ratio, rate, discount, statistics, calculation, fraction, portion, share, division, metrics, measurement, comparison                                                                                                                                                                            |
| `PhoneIcon`                 | phone, telephone, call, contact, communication, voice, mobile, dial, support, helpline, conversation, telecommunications, receiver, callback, hotline                                                                                                                                                                            |
| `PinIcon`                   | pin, pushpin, thumbtack, bookmark, save, mark, location, highlight, attach, fix, favorite, important, reference, reminder, flag                                                                                                                                                                                                  |
| `PinSolidIcon`              | pin, location, marker, pinned, bookmark, save, mark, position, place, fixed, solid, filled                                                                                                                                                                                                                                       |
| `PlayIcon`                  | play, start, begin, launch, initiate, activate, media, playback, video, audio, stream, execute, run, trigger, commence                                                                                                                                                                                                           |
| `PlaySolidIcon`             | play, solid, filled, start, begin, launch, initiate, activate, media, playback, video, audio, stream, execute, run                                                                                                                                                                                                               |
| `PlusIcon`                  | plus, add, create, new, addition, expand, increase, increment, positive, more, insert, append, extend, enlarge, include                                                                                                                                                                                                          |
| `PrintIcon`                 | print, printer, document, hard copy, paper, output, publish, physical copy, printing, print preview, print settings, page setup, print job, printout, reproduction                                                                                                                                                               |
| `ProfileIcon`               | profile, user, account, avatar, person, identity, personal, settings, member, contact, individual, user profile, biography, credentials, authentication                                                                                                                                                                          |
| `ProgressIcon`              | progress, completion, status, loading, process, task, tracking, advancement, checkpoint, milestone, achievement, verification, confirmation, success, validation                                                                                                                                                                 |
| `PronunciationIcon`         | pronunciation, audio, sound, speaker, voice, speech, language, phonetics, playback, listen, hearing, diction, articulation, elocution, enunciation                                                                                                                                                                               |
| `QuestionIcon`              | question, help, information, FAQ, guidance, assistance, support, inquiry, tooltip, hint, explanation, clarification, query, ask, learn                                                                                                                                                                                           |
| `QuizLessonIcon`            | quiz, lesson, test, assessment, education, learning, evaluation, examination, knowledge, question, answer, verification, completion, module, course                                                                                                                                                                              |
| `ReactionIcon`              | reaction, emoji, response, feedback, emotion, expression, sentiment, engagement, interaction, like, rating, react, feeling, opinion, social                                                                                                                                                                                      |
| `RecurringIcon`             | recurring, repeat, cycle, periodic, scheduled, automation, regular, routine, interval, frequency, continuous, loop, iteration, pattern, renewal                                                                                                                                                                                  |
| `RefreshIcon`               | refresh, reload, update, sync, renew, reset, latest, current, fetch, retrieve, recycle, restart, regenerate, revitalize, reinitialize                                                                                                                                                                                            |
| `RelationWithManagerIcon`   | manager, employee, hierarchy, reporting, leadership, supervision, authority, organizational structure, vertical relationship, direct report, superior, subordinate, chain of command, management, team lead                                                                                                                      |
| `RelationshipWithPeersIcon` | peer relationship, colleagues, team, collaboration, cooperation, networking, connection, partnership, teamwork, coworkers, associates, horizontal relationship, social dynamics, interaction, alliance                                                                                                                           |
| `ReminderIcon`              | reminder, alert, notification, schedule, upcoming, prompt, deadline, event, task, time-sensitive, calendar, appointment, notice, alarm, memory aid                                                                                                                                                                               |
| `RemoveIcon`                | remove, delete, close, cancel, dismiss, eliminate, terminate, clear, discard, erase, reject, exclude, withdraw, abort, exit                                                                                                                                                                                                      |
| `RemoveCalendarIcon`        | remove calendar, cancel event, delete appointment, decline invitation, remove meeting, cancel reservation, delete schedule, unbook, withdraw event, clear calendar, cancel booking, remove date, delete occurrence, cancel appointment, unschedule                                                                               |
| `RemoveUserIcon`            | remove user, delete account, revoke access, unassign, remove member, delete profile, deactivate user, remove participant, unsubscribe, terminate account, remove permission, delete contact, remove follower, unlink user, disassociate                                                                                          |
| `ReplyIcon`                 | reply, respond, answer, feedback, comment, message, conversation, communication, return, response, discussion, correspondence, dialogue, reaction, exchange                                                                                                                                                                      |
| `ReportIcon`                | report, analytics, data, statistics, metrics, visualization, chart, graph, summary, dashboard, insights, performance, analysis, results, documentation                                                                                                                                                                           |
| `ReportsToIcon`             | reports to, reporting line, manager, supervisor, hierarchy, organization, structure, chain of command, reporting relationship, management, team structure                                                                                                                                                                        |
| `RequalificationIcon`       | requalification, recertification, renewal, certification, qualification, validation, verification, credentials, skills, assessment, achievement, competency, compliance, accreditation, endorsement                                                                                                                              |
| `ReviewIcon`                | review, rating, evaluation, assessment, feedback, opinion, appraisal, critique, judgment, stars, score, grade, testimonial, recommendation, analysis                                                                                                                                                                             |
| `RewindIcon`                | rewind, undo, back, previous, reverse, return, backward, rollback, restore, history, earlier, retrace, backtrack, retreat, reset                                                                                                                                                                                                 |
| `RocketIcon`                | rocket, launch, startup, boost, accelerate, speed, fast, performance, takeoff, blast, innovation, growth, advancement, progress, mission, exploration, journey, space                                                                                                                                                            |
| `SatisfactionIcon`          | satisfaction, thumbs up, like, approve, positive, feedback, endorse, agree, content, happy, pleased, rating, review, recommend, support, appreciation, praise, affirm                                                                                                                                                            |
| `ScreenShareIcon`           | screen share, present, broadcast, display, project, stream, cast, mirror, meeting, webinar, collaboration, demonstration, presentation, remote, virtual, conference, sharing, view                                                                                                                                               |
| `SearchIcon`                | search, find, magnifying glass, lookup, query, explore, discover, filter, seek, locate, browse                                                                                                                                                                                                                                   |
| `SectionIcon`               | section, segment, division, part, category, area, block, component, module, partition, region, subdivision                                                                                                                                                                                                                       |
| `SegmentIcon`               | segment, section, category, division, group, classification, partition, subset, cluster, demographic, targeting, audience, market, customer, data, analytics, filter, organize                                                                                                                                                   |
| `SendIcon`                  | send, transmit, share, message, email, dispatch, deliver, forward, submit, communicate, paper airplane, post, distribute, transfer, broadcast, publish, relay, transmit                                                                                                                                                          |
| `SettingsIcon`              | settings, preferences, configuration, options, customize, adjust, gear, cog, setup, control, parameters, modify, personalize, configure, tweak, system, admin, manage                                                                                                                                                            |
| `SettingsNotificationIcon`  | settings notification, configuration alert, system update, pending settings, attention required, settings badge, update available, configuration notice, gear notification, settings alert, system maintenance, preferences update, settings reminder, unreviewed settings, action needed, settings change, configuration status |
| `SettingsWarningIcon`       | settings warning, configuration error, system issue, critical settings, urgent attention, settings problem, configuration alert, system warning, error notification, settings error, security concern, configuration issue, settings alert, system maintenance, critical update, warning indicator, troubleshooting              |
| `ShareIcon`                 | share, distribute, connect, network, social, collaboration, transfer, publish, send, broadcast, spread, circulate, disseminate, exchange, link, forward, nodes, connections                                                                                                                                                      |
| `SharedIcon`                | shared, collaboration, group, team, multiple users, collective, joint, common, mutual, cooperative, shared access, permissions, collaborative, community, together, shared resources, group ownership, co-owned                                                                                                                  |
| `ShieldIcon`                | shield, protection, security, defense, safety, guard, safeguard, secure, protect, privacy, firewall, antivirus, encryption, barrier, armor, fortress, immunity, prevention                                                                                                                                                       |
| `SliderIcon`                | slider, adjust, control, level, equalizer, tune, calibrate, customize, setting, parameter, scale, range, volume, balance, mixer, dial, knob, adjustment                                                                                                                                                                          |
| `SortIcon`                  | sort, order, filter, arrange, organize, sequence, rank, categorize, classify, prioritize, list, hierarchy, structure, ascending, descending, alphabetical, numerical, chronological                                                                                                                                              |
| `SparklesIcon`              | sparkles, stars, shine, highlight, feature, special, new, premium, magic, enhanced, spotlight, featured, attention, notable, exceptional, celebration, decoration, emphasis                                                                                                                                                      |
| `SproutIcon`                | sprout, growth, seedling, plant, development, beginning, new, fresh, start, nurture, sustainability, green, environment, organic, potential, cultivate, progress, flourish                                                                                                                                                       |
| `StarIcon`                  | star, favorite, rating, bookmark, important, preference, highlight, save, mark, like, featured, review, rank, score, grade, evaluate, prioritize, wishlist                                                                                                                                                                       |
| `StarSolidIcon`             | star solid, favorite, selected, active, rating, bookmark, important, preference, highlight, saved, marked, liked, featured, review, selected rating, active state, filled star, chosen                                                                                                                                           |
| `StartOverIcon`             | start over, restart, reset, begin again, redo, retry, refresh, renew, revert, return, initial state, clear, start from scratch, new attempt, do over, fresh start, reinitialize, relaunch                                                                                                                                        |
| `StickyIcon`                | sticky note, post-it, note, reminder, annotation, memo, comment, jot, scribble, mark, tag, label, flag, highlight, remember, notation, adhesive note, quick note                                                                                                                                                                 |
| `StrikethroughIcon`         | strikethrough, text formatting, crossed out, deleted text, removed, obsolete, formatting, text style, markup, edit, strike, line through, cross out, redaction, text decoration, rich text, typography, text editor                                                                                                              |
| `SubstractIcon`             | subtract, minus, remove, decrease, reduce, deduct, take away, less, deletion, diminish, lower, decrement, minimize, shrink, lessen, negative, removal, reduction                                                                                                                                                                 |
| `SuccessIcon`               | success, complete, done, finished, approved, confirmed, verified, validated, accomplished, achieved, passed, correct, checkmark, tick, positive, affirmative, confirmation, acceptance                                                                                                                                           |
| `SyncIcon`                  | sync, synchronize, update, refresh, exchange, transfer, bidirectional, mirror, replicate, harmonize, coordinate, align, match, reconcile, reload, renew, two-way, data exchange                                                                                                                                                  |
| `TagIcon`                   | tag, label, category, keyword, metadata, identifier, marker, classify, organize, group, flag, mark, annotate, index, price tag, taxonomy, hashtag, attribute                                                                                                                                                                     |
| `TeamIcon`                  | team, group, collaboration, people, users, members, colleagues, crew, staff, personnel, workforce, organization, department, unit, collective, assembly, community, partnership                                                                                                                                                  |
| `TemplateIcon`              | template, layout, form, structure, design, pattern, blueprint, framework, model, preset, format, boilerplate, prototype, skeleton, outline, scheme, arrangement, composition                                                                                                                                                     |
| `TextLessonIcon`            | text lesson, article, reading, paragraph, content, document, material, learning, education, study, text, literature, information, tutorial, guide, instruction, course, textbook                                                                                                                                                 |
| `ThreeIcon`                 | three, number 3, third, numbering, ordering, ranking, sequence, count, position, step, level, tier, grade, phase, stage, index, enumeration, numeric                                                                                                                                                                             |
| `ThumbsDownIcon`            | thumbs down, dislike, negative, disapproval, rejection, feedback, rating, downvote, disagree, thumbs-down, not recommended                                                                                                                                                                                                       |
| `ThumbsUpIcon`              | thumbs up, like, approve, positive, feedback, upvote, agree, endorse, support, recommend, praise, appreciation, satisfaction, rating, review, reaction, affirmation, consent                                                                                                                                                     |
| `TipIcon`                   | tip, hint, suggestion, advice, idea, lightbulb, insight, guidance, help, information, recommendation, pointer, clue, instruction, direction, wisdom, knowledge, enlightenment                                                                                                                                                    |
| `TranslationIcon`           | translation, language, localization, internationalization, multilingual, global, interpret, convert, translate, foreign, dialect, bilingual, polyglot, linguistic, i18n, l10n, globalization, cross-language                                                                                                                     |
| `TwoIcon`                   | two, number 2, second, numbering, ordering, ranking, sequence, count, position, step, level, tier, grade, phase, stage, index, enumeration, numeric                                                                                                                                                                              |
| `UnarchiveIcon`             | unarchive, restore, retrieve, recover, extract, box, storage, archive, unbox, return                                                                                                                                                                                                                                             |
| `UnderlineIcon`             | underline, text formatting, text style, typography, formatting, text decoration, emphasis, editor, rich text, styling, format                                                                                                                                                                                                    |
| `UnorderedListIcon`         | unordered list, bulleted list, bullet points, list format, text formatting, bullets, list style, document formatting, content structure, text editor                                                                                                                                                                             |
| `UploadIcon`                | upload, file upload, cloud upload, send file, transfer, push, share, store, cloud storage, file transfer, data upload                                                                                                                                                                                                            |
| `UpsellIcon`                | upsell, premium, upgrade, sales, marketing, cross-sell, shopping, commerce, promotion, higher tier, additional services, value-added                                                                                                                                                                                             |
| `UserIcon`                  | user, person, profile, account, avatar, member, individual, identity, personal, human, login, user account                                                                                                                                                                                                                       |
| `VideoIcon`                 | video, media, player, playback, movie, film, multimedia, streaming, recording, footage, clip, video file, video content                                                                                                                                                                                                          |
| `VideoCameraIcon`           | video camera, camcorder, recording, filming, capture, video recording, camera, webcam, video creation, videography, record video, shoot video, video device                                                                                                                                                                      |
| `VideoCameraDisabledIcon`   | video camera off, camera disabled, video off, no video, camera off, video disabled, stop video, video unavailable, camera muted, video muted, disabled camera                                                                                                                                                                    |
| `WarningIcon`               | warning, alert, caution, attention, exclamation, notice, error, danger, important, notification, hazard, risk, triangle                                                                                                                                                                                                          |
| `WebinarLessonIcon`         | webinar, online lesson, virtual class, digital learning, e-learning, video lesson, online training, web conference, remote learning, virtual seminar, online education, distance learning                                                                                                                                        |
| `WellnessIcon`              | wellness, health, wellbeing, medical, healthcare, heart, care, self-care, healthy, fitness, mental health, physical health, healing, holistic                                                                                                                                                                                    |
| `WhosWhoFaceIcon`           | who's who, face, identification, recognition, profile, person, identity, directory, team member, people, facial recognition, contact, avatar, employee                                                                                                                                                                           |
| `WhosWhoGameIcon`           | who's who, game, activity, identification, recognition, matching, team building, icebreaker, people, directory, quiz, learning, faces, memory                                                                                                                                                                                    |

### Rich Icons Library

Getting started with Hopper's Rich Icons library

All rich icons in the Workleap icon library are available in three predefined sizes. To ensure consistency and clarity, always use the icons at one of these sizes. Avoid resizing icons to dimensions other than the provided options.

To integrate a rich icon into your project, simply import it from `@hopper-ui/icons`.

```tsx
import { ActionListRichIcon } from "@hopper-ui/icons"
```

The color of the rich icons can be changed by using the `variant` prop. The following [decorative semantic colors](/tokens/semantic/color.md#decorative) are available as variants: `option1` to `option8`. The following status colors are available as well: `success`, `warning`, `danger`, `information` and `upsell`.

```tsx
<ActionListRichIcon /> // default variant
<ActionListRichIcon variant="option3" />
<ActionListRichIcon variant="information" />
```

You can preview rich icons in your preferred size. Simply click on an icon to instantly copy its name!

Available Sizes: `md`,`lg`,`xl`

| Name                      | Keywords                                                                                                                                                                                                                |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ActionListRichIcon`      | action list, menu, options, tasks, commands, dropdown, selection, choices, actions, functions, operations, task list                                                                                                    |
| `AnniversaryRichIcon`     | anniversary, celebration, milestone, commemoration, yearly event, annual, remembrance, special date, work anniversary, company milestone, jubilee, memorial                                                             |
| `AnonymousRichIcon`       | anonymous, unknown, unidentified, unnamed, incognito, private, hidden identity, confidential, nameless, undisclosed, privacy, masked user                                                                               |
| `ApplauseRichIcon`        | applause, clapping, appreciation, recognition, congratulations, praise, approval, celebration, acknowledgment, support, acclaim, ovation                                                                                |
| `BirthdayRichIcon`        | birthday, celebration, cake, party, anniversary, special occasion, birth date, personal milestone, festivity, commemoration, candles, congratulations                                                                   |
| `BrokenImageRichIcon`     | broken image, failed image, missing image, corrupted image, image error, unavailable image, loading failure, placeholder, image not found, media error, display failure, broken media                                   |
| `CautionRichIcon`         | caution, warning, alert, attention, hazard, danger, notice, careful, risk, important, exclamation, precaution                                                                                                           |
| `ConversationRichIcon`    | conversation, discussion, dialogue, chat, communication, messaging, talk, exchange, interaction, speech, comments, discourse                                                                                            |
| `CustomRichIcon`          | custom, personalized, tailored, user-defined, customization, bespoke, modified, unique, specialized, configurable, adaptable, user-created                                                                              |
| `DecreasingScoreRichIcon` | decreasing score, declining performance, downward trend, negative change, falling metrics, reduction, decline, decrease, downtrend, performance drop, regression, deterioration                                         |
| `DeletedUserRichIcon`     | deleted user, removed account, deactivated user, former user, account deletion, inactive account, terminated user, removed profile, non-existent user, account removal, disabled account, user deletion                 |
| `DepartmentRichIcon`      | department, division, team, unit, organizational structure, business function, group, section, branch, functional area, corporate division, business unit                                                               |
| `DirectoryRichIcon`       | directory, listing, catalog, index, registry, contacts, address book, employee list, phonebook, database, collection, reference list                                                                                    |
| `DiscountRichIcon`        | discount, sale, offer, promotion, deal, reduction, savings, special price, markdown, coupon, bargain, price cut                                                                                                         |
| `EmailRichIcon`           | email, mail, message, electronic mail, communication, envelope, inbox, correspondence, contact, notification, digital message, e-mail                                                                                   |
| `FeedbackRichIcon`        | feedback, review, opinion, comment, evaluation, assessment, rating, survey, input, suggestion, critique, response                                                                                                       |
| `GoalIndividualRichIcon`  | individual goal, personal objective, target, personal achievement, performance goal, milestone, personal development, objective, aspiration, personal target, achievement, self-improvement                             |
| `GoalTeamRichIcon`        | team goal, collective objective, shared target, group achievement, collaborative goal, team performance, joint milestone, common purpose, team objective, shared mission, group target, collaborative achievement       |
| `GroupRichIcon`           | group, team, collection, cluster, assembly, gathering, community, crew, ensemble, unit, collective, multiple users                                                                                                      |
| `GrowthRichIcon`          | growth, increase, development, improvement, progress, advancement, expansion, upward trend, rising, flourishing, evolution, positive change                                                                             |
| `IdeaRichIcon`            | idea, thought, concept, inspiration, innovation, insight, lightbulb, creativity, suggestion, brainstorm, thinking, solution                                                                                             |
| `InfoRichIcon`            | information, details, help, context, explanation, guidance, tooltip, hint, description, clarification, assistance, facts                                                                                                |
| `LikertScaleRichIcon`     | likert scale, rating scale, survey, questionnaire, measurement, opinion scale, response range, assessment, evaluation, feedback scale, satisfaction scale, agreement scale                                              |
| `LocationRichIcon`        | location, place, position, address, map pin, marker, geographical point, coordinates, destination, site, spot, whereabouts                                                                                              |
| `MultipleChoiceRichIcon`  | multiple choice, options, selection, quiz, survey question, checkbox, radio button, choices, alternatives, select, poll, questionnaire                                                                                  |
| `OneOnOneRichIcon`        | one-on-one, individual meeting, personal discussion, face-to-face, private conversation, direct interaction, mentoring, coaching, personal review, two-person meeting, 1:1, personal session                            |
| `OpenRoleRichIcon`        | open role, job opening, vacant position, career opportunity, unfilled role, job vacancy, available position, hiring, recruitment, job posting, employment opportunity, staffing need                                    |
| `OpinionScaleRichIcon`    | opinion scale, slider, rating, spectrum, continuum, measurement, subjective scale, attitude measurement, range selector, sentiment scale, preference scale, intensity measure                                           |
| `OrganizationRichIcon`    | organization, company, business, institution, corporation, enterprise, firm, establishment, entity, agency, association, corporate structure                                                                            |
| `PeopleRichIcon`          | people, users, individuals, persons, personnel, staff, team members, human resources, employees, community, crowd, population                                                                                           |
| `ProfileRichIcon`         | profile, user account, personal information, identity, account, user, avatar, personal details, bio, user profile, account settings, personal data                                                                      |
| `QuestionRichIcon`        | question, inquiry, help, query, FAQ, assistance, support, information request, doubt, interrogation, problem, uncertainty                                                                                               |
| `ReminderRichIcon`        | reminder, notification, alert, prompt, scheduled notice, memory aid, upcoming event, task reminder, alarm, nudge, recall, remember                                                                                      |
| `ReviewRichIcon`          | review, evaluation, assessment, examination, appraisal, feedback, critique, analysis, rating, judgment, inspection, performance review                                                                                  |
| `RisingScoreRichIcon`     | rising score, improving performance, upward trend, positive change, increasing metrics, growth, improvement, progress, advancement, uptrend, performance gain, positive trajectory                                      |
| `RocketRichIcon`          | rocket, launch, startup, liftoff, advancement, initiative, acceleration, growth, ambition, progress, takeoff, breakthrough                                                                                              |
| `ScriptRichIcon`          | script, code, programming, automation, sequence, instructions, algorithm, routine, macro, command, procedure, coding                                                                                                    |
| `SettingsRichIcon`        | settings, configuration, preferences, options, controls, customization, setup, adjustment, parameters, gear, system settings, preferences menu                                                                          |
| `SparklesRichIcon`        | sparkles, stars, highlights, special, featured, new, premium, magic, shine, glitter, standout, featured content                                                                                                         |
| `StarRichIcon`            | star, favorite, bookmark, important, rating, preference, highlight, save, mark, featured, special, priority                                                                                                             |
| `StatusRichIcon`          | status, state, condition, progress, indicator, stage, phase, situation, standing, position, health, current state                                                                                                       |
| `SuccessRichIcon`         | success, achievement, completion, accomplishment, victory, win, triumph, attainment, fulfillment, positive outcome, goal reached, mission accomplished                                                                  |
| `SupportRichIcon`         | support, help, assistance, customer service, aid, guidance, technical support, troubleshooting, service desk, helpdesk, assistance center, customer care                                                                |
| `TemplateRichIcon`        | template, pattern, format, layout, blueprint, model, boilerplate, framework, preset, structure, sample, starter                                                                                                         |
| `TextAnswerRichIcon`      | text answer, written response, free-form text, open-ended question, text field, written feedback, text input, paragraph response, essay answer, long-form text, written comment, text response                          |
| `UpsellRichIcon`          | upsell, upgrade, premium, promotion, offer, enhancement, add-on, paid feature, subscription, advanced option, premium tier, special offer                                                                               |
| `WhosWhoRichIcon`         | who's who, team directory, employee identification, organizational chart, staff directory, team members, personnel listing, employee directory, team roster, people finder, colleague identification, staff recognition |

### SVG Icon Library

Getting started with Hopper's SVG Icons library

All icons in the Workleap icon library are available in three predefined sizes. To ensure consistency and clarity, always use the icons at one of these sizes. Avoid resizing icons to dimensions other than the provided options.

To integrate an icon into your project, simply import it from `@hopper-ui/svg-icons` in a JavaScript file:

```tsx
import AlertIcon from "@hopper-ui/svg-icons/icons/alert-24.svg";
```

or in a CSS file:

```css
.my-component {
    background-image: url("@hopper-ui/svg-icons/icons/alert-24.svg");
}
```

#### Inline SVG

Hopper's SVG icons are designed to be used as inline SVGs. This allows you to easily customize the icon's color, size, and other properties using CSS.

```tsx
// a specific size
import { AlertIcon32 } from "@hopper-ui/svg-icons/icons/inline";
// or an object containing all the sizes
import { AlertIcon }  from "@hopper-ui/svg-icons/icons/inline";
```

You can preview icons in your preferred size. Simply click on an icon to instantly copy it's \`.svg\` name!

Available Sizes: `16px`,`24px`,`32px`

| Name                        | Keywords                                                                                                                                                                                                                                                                                                                         |
| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `AddIcon`                   | add, plus, increase                                                                                                                                                                                                                                                                                                              |
| `AddCalendarIcon`           | add calendar, schedule, appointment, meeting, event                                                                                                                                                                                                                                                                              |
| `AddUserIcon`               | add user, new user, create account, invite, join, team member                                                                                                                                                                                                                                                                    |
| `AiIcon`                    |                                                                                                                                                                                                                                                                                                                                  |
| `AlignmentIcon`             | alignment, orientation, direction, compass, navigation, position, layout                                                                                                                                                                                                                                                         |
| `AmbassadorshipIcon`        | ambassador, partnership, advocacy, relationship, collaboration, representation, networking                                                                                                                                                                                                                                       |
| `AngleDownIcon`             | angle down, chevron down, dropdown, expand, more, navigation, downward                                                                                                                                                                                                                                                           |
| `AngleLeftIcon`             | angle left, chevron left, back, previous, navigation, leftward, backward                                                                                                                                                                                                                                                         |
| `AngleRightIcon`            | angle right, chevron right, next, forward, navigation, rightward, continue                                                                                                                                                                                                                                                       |
| `AngleUpIcon`               | angle up, chevron up, collapse, upward, navigation, minimize, hide                                                                                                                                                                                                                                                               |
| `ApplauseIcon`              | applause, clap, appreciation, recognition, congratulations, praise, feedback                                                                                                                                                                                                                                                     |
| `ArchiveIcon`               | archive, storage, file, box, container, save, store                                                                                                                                                                                                                                                                              |
| `ArrowDownIcon`             | arrow down, download, downward, direction, move down, descend, lower                                                                                                                                                                                                                                                             |
| `ArrowLeftIcon`             | arrow left, back, previous, leftward, backward, return, navigate back                                                                                                                                                                                                                                                            |
| `ArrowRightIcon`            | arrow right, next, forward, rightward, continue, proceed, navigate forward                                                                                                                                                                                                                                                       |
| `ArrowUpIcon`               | arrow up, upload, upward, direction, move up, ascend, higher                                                                                                                                                                                                                                                                     |
| `ArrowsOutVerticalIcon`     | arrows out vertical, expand vertically, resize height, vertical adjustment, stretch, vertical resize, height                                                                                                                                                                                                                     |
| `AssistantIcon`             | assistant, helper, support, aid, delegate, administrative, collaboration                                                                                                                                                                                                                                                         |
| `AssistantToIcon`           | assistant to, delegation, reporting structure, administrative support, organizational hierarchy, executive assistant, support role                                                                                                                                                                                               |
| `AttachmentIcon`            | attachment, paperclip, file, document, attach, upload, append                                                                                                                                                                                                                                                                    |
| `BarsIcon`                  | bars, hamburger menu, navigation, menu, options, mobile menu, toggle                                                                                                                                                                                                                                                             |
| `BasketballIcon`            | basketball, sport, game, ball, team, recreation, athletics                                                                                                                                                                                                                                                                       |
| `BentoIcon`                 | bento, grid, menu, app launcher, options, applications, dashboard                                                                                                                                                                                                                                                                |
| `BirthdayIcon`              | birthday, cake, celebration, anniversary, special occasion, party, commemoration                                                                                                                                                                                                                                                 |
| `BoldIcon`                  | bold, text formatting, typography, font weight, emphasis, strong, rich text                                                                                                                                                                                                                                                      |
| `BoltIcon`                  | bolt, lightning, flash, energy, power, speed, electricity, quick action                                                                                                                                                                                                                                                          |
| `BookIcon`                  | book, reading, learning, education, documentation, knowledge, literature, manual                                                                                                                                                                                                                                                 |
| `BookmarkIcon`              | bookmark, save, favorite, flag, mark, remember, reference, tag                                                                                                                                                                                                                                                                   |
| `BranchesIcon`              | branches, fork, version control, git, paths, options, diverge, workflow                                                                                                                                                                                                                                                          |
| `BriefcaseIcon`             | briefcase, business, work, job, career, professional, employment, workplace                                                                                                                                                                                                                                                      |
| `BuildIcon`                 | build, construct, configure, settings, tools, wrench, customize, develop                                                                                                                                                                                                                                                         |
| `BulletIcon`                | bullet, dot, point, circle, marker, list item, highlight, indicator                                                                                                                                                                                                                                                              |
| `BullseyeIcon`              | bullseye, target, goal, objective, aim, precision, accuracy, focus                                                                                                                                                                                                                                                               |
| `CalendarIcon`              | calendar, date, schedule, event, appointment, planning, time, month                                                                                                                                                                                                                                                              |
| `CameraIcon`                | camera, photography, photo, picture, image, capture, snapshot, media                                                                                                                                                                                                                                                             |
| `CarIcon`                   | car, automobile, vehicle, transportation, travel, commute, driving, journey                                                                                                                                                                                                                                                      |
| `CaretDownIcon`             | caret down, dropdown, expand, menu, triangle down, disclosure, collapse, downward                                                                                                                                                                                                                                                |
| `CaretDownSolidIcon`        | caret down solid, dropdown, expand, menu, triangle down, disclosure, collapse, downward, filled, solid                                                                                                                                                                                                                           |
| `CaretUpIcon`               | caret up, collapse, expand, menu, triangle up, disclosure, upward, ascending, sort                                                                                                                                                                                                                                               |
| `CaretUpSolidIcon`          | caret up solid, collapse, expand, menu, triangle up, disclosure, upward, ascending, sort, filled, solid                                                                                                                                                                                                                          |
| `CatIcon`                   | cat, pet, animal, feline, kitten, playful, cute, domestic, companion, mascot, wildlife                                                                                                                                                                                                                                           |
| `ChartBarIcon`              | bar chart, graph, data, analytics, statistics, visualization, metrics, reporting, dashboard, performance, trends                                                                                                                                                                                                                 |
| `ChartLineIcon`             | line chart, graph, trend, data, analytics, statistics, visualization, metrics, reporting, dashboard, performance, time series, growth                                                                                                                                                                                            |
| `ChartPieIcon`              | pie chart, chart, graph, data, analytics, statistics, visualization, metrics, reporting, dashboard, distribution, proportion, percentage, segment                                                                                                                                                                                |
| `CheckmarkIcon`             | checkmark, tick, check, success, complete, done, verified, confirmed, approved, selected, correct, validation                                                                                                                                                                                                                    |
| `CherriesIcon`              | cherries, fruit, food, sweet, fresh, harvest, nature, reward, bonus, treat, seasonal                                                                                                                                                                                                                                             |
| `CircleAngleLeftIcon`       | circle angle left, back, previous, navigation, left, chevron, circular button, return, backward, carousel, slideshow, direction                                                                                                                                                                                                  |
| `CircleAngleRightIcon`      | circle angle right, right arrow, next, forward, proceed, navigation, direction, right, carousel, pagination, advance, continue                                                                                                                                                                                                   |
| `ClockIcon`                 | clock, time, schedule, appointment, calendar, deadline, duration, timer, history, reminder, timestamp, waiting                                                                                                                                                                                                                   |
| `CollapseLeftIcon`          | collapse left, minimize, sidebar, panel, navigation, dock, hide, fold, compress, shrink, left, interface                                                                                                                                                                                                                         |
| `CollapseRightIcon`         | collapse right, minimize, sidebar, panel, navigation, dock, hide, fold, compress, shrink, right, interface                                                                                                                                                                                                                       |
| `CommentIcon`               | comment, chat, message, discussion, conversation, feedback, communication, speech bubble, dialogue, talk, review, reply                                                                                                                                                                                                          |
| `CommentCheckIcon`          | comment check, approved comment, resolved discussion, completed feedback, reviewed, acknowledged, verified, confirmation, message status, communication, resolution, completion                                                                                                                                                  |
| `ConnectionsIcon`           | connections, network, relationship, integration, link, connect, association, collaboration, partnership, sharing, intersection, overlap                                                                                                                                                                                          |
| `CopyIcon`                  | copy, duplicate, clone, replicate, clipboard, duplication, reproduction, backup, mirror, identical, document, content                                                                                                                                                                                                            |
| `CountIcon`                 | count, numbers, enumeration, sequence, ordered list, numbering, steps, ranking, progression, series, order, numeric                                                                                                                                                                                                              |
| `CsvIcon`                   |                                                                                                                                                                                                                                                                                                                                  |
| `DecreaseIndentIcon`        | decrease indent, outdent, text formatting, paragraph, alignment, text editor, word processor, document, formatting, layout, margin, left align                                                                                                                                                                                   |
| `DeleteIcon`                | delete, trash, remove, bin, waste, discard, erase, eliminate, garbage, clean up, purge, destroy                                                                                                                                                                                                                                  |
| `DepartmentIcon`            | department, organization, team, structure, hierarchy, division, unit, group, branch, section, organizational chart, company structure                                                                                                                                                                                            |
| `DirectReportsIcon`         | direct reports, team members, subordinates, reporting structure, manager, team lead, hierarchy, organization, reporting line, team structure, supervision, management                                                                                                                                                            |
| `DismissIcon`               | dismiss, close, cancel, remove, exit, clear, cross, delete, hide, reject, terminate, x                                                                                                                                                                                                                                           |
| `DollarIcon`                | dollar, money, currency, finance, payment, price, cost, financial, cash, transaction, budget, economy                                                                                                                                                                                                                            |
| `DottedLinesIcon`           | dotted lines, dashed border, boundary, outline, selection, perimeter, frame, container, highlight, area, region, segmentation                                                                                                                                                                                                    |
| `DownloadIcon`              | download, save, get, retrieve, obtain, file, content, transfer, fetch, acquire, store, local copy                                                                                                                                                                                                                                |
| `DuplicateIcon`             | duplicate, copy, clone, replicate, reproduce, mirror, create copy, duplicate item, make another, multiply, repeat, template                                                                                                                                                                                                      |
| `EditIcon`                  | edit, modify, change, update, revise, pencil, write, amend, alter, adjust, correction, revision                                                                                                                                                                                                                                  |
| `EnterIcon`                 | enter, login, access, sign in, join, admission, entry, ingress, input, submit, proceed, continue                                                                                                                                                                                                                                 |
| `EventIcon`                 | event, appointment, schedule, calendar, meeting, booking, reservation, occurrence, activity, confirmed event, completed event, time slot                                                                                                                                                                                         |
| `EverythingReportIcon`      | everything report, comprehensive, all-inclusive, complete, full, total, entire, all, overview, summary, holistic, universal                                                                                                                                                                                                      |
| `ExitIcon`                  | exit, logout, sign out, leave, depart, quit, close, end session, log off, disconnect, terminate, escape                                                                                                                                                                                                                          |
| `EyeHiddenIcon`             | eye hidden, hidden, invisible, hide, visibility off, not visible, concealed, masked, private, password, obscured, unseen                                                                                                                                                                                                         |
| `EyeVisibleIcon`            | eye visible, view, show, visible, display, reveal, see, preview, visibility, unhide, watch, observe                                                                                                                                                                                                                              |
| `FeedbackIcon`              | feedback, comment, opinion, review, input, response, suggestion, reaction, evaluation, assessment, rating, survey                                                                                                                                                                                                                |
| `FileCheckIcon`             | file check, verified document, approved file, validated, completed form, confirmed, checked, document verification, file approval, certified, authenticated, validated document                                                                                                                                                  |
| `FilterIcon`                | filter, sort, refine, adjust, narrow down, parameters, settings, controls, preferences, customize, search criteria, sift                                                                                                                                                                                                         |
| `FiveIcon`                  | five, number 5, numeric, rating, step, count, quantity, value, digit, fifth, sequence, enumeration                                                                                                                                                                                                                               |
| `FlagIcon`                  | flag, mark, highlight, attention, important, bookmark, tag, label, indicator, notification, priority, save                                                                                                                                                                                                                       |
| `FocusIcon`                 | focus, microphone, audio, voice, recording, speech, sound, input, dictation, concentration, attention, listening                                                                                                                                                                                                                 |
| `FolderIcon`                | folder, directory, storage, files, organization, collection, category, container, group, classification, repository, archive                                                                                                                                                                                                     |
| `FootballIcon`              | football, american football, rugby, sports, game, competition, athletics, team, recreation, physical activity, ball, play                                                                                                                                                                                                        |
| `FourIcon`                  | four, number, count, numeric, digit, 4, quantity                                                                                                                                                                                                                                                                                 |
| `GaugeIcon`                 | gauge, speedometer, dashboard, metrics, measurement, performance, monitoring, indicator, analytics, statistics, level, progress                                                                                                                                                                                                  |
| `GiftIcon`                  | gift, present, reward, offer, surprise, package, celebration, special, bonus, giveaway, prize, treat                                                                                                                                                                                                                             |
| `GraduationHatIcon`         | graduation, education, learning, academic, degree, diploma, achievement, knowledge, course, training, study, school, university, college, certification, development                                                                                                                                                             |
| `GraphIcon`                 | graph, network, connections, relationships, nodes, links, visualization, mapping, structure, diagram, data, analytics, topology, interconnection, web                                                                                                                                                                            |
| `GridIcon`                  | grid, layout, matrix, tiles, view, arrangement, display, rows, columns                                                                                                                                                                                                                                                           |
| `GripIcon`                  | grip, handle, drag, move, reorder, sort, resize, grabber, draggable, control                                                                                                                                                                                                                                                     |
| `GroupsIcon`                | groups, teams, collections, categories, organization, collaboration, clustering, departments, units, segments, classification, community, ensemble, cohort, assembly                                                                                                                                                             |
| `GrowthIcon`                | growth, development, progress, improvement, nurturing, cultivation, expansion, advancement, evolution, flourishing, maturation, potential, prosperity, success, achievement, blooming                                                                                                                                            |
| `HappinessIcon`             | happiness, smile, satisfaction, joy, positive, emotion, feedback, mood, wellbeing, contentment, delight, pleasure, cheerful, happy, enjoyment, fulfillment                                                                                                                                                                       |
| `HierarchyIcon`             | hierarchy, organization, structure, reporting, chain, tree, levels, management, subordinates, relationships, taxonomy, classification, ranking, order, arrangement, network                                                                                                                                                      |
| `HomeIcon`                  | home, house, homepage, dashboard, main, start, landing, residence, shelter, dwelling, abode, domicile, navigation, central, base                                                                                                                                                                                                 |
| `HourglassIcon`             | hourglass, timer, time, waiting, loading, processing, duration, delay, countdown, timeout, progress, patience, temporary, interval, period, elapsed                                                                                                                                                                              |
| `ImageIcon`                 | image, picture, photo, photograph, gallery, visual, media, graphic, artwork, illustration, snapshot, upload, display, view, landscape                                                                                                                                                                                            |
| `IncreaseIndentIcon`        | indent, increase, formatting, text, paragraph, editor, layout, spacing, margin, tab, document, alignment, structure, hierarchy, organization                                                                                                                                                                                     |
| `InfoIcon`                  | info, information, help, details, tooltip, hint, explanation, guidance, assistance, context, learn, about, description, knowledge, reference                                                                                                                                                                                     |
| `InvoiceIcon`               | invoice, bill, receipt, payment, transaction, financial, document, accounting, billing, statement, expense, record, purchase, order, commerce                                                                                                                                                                                    |
| `ItalicIcon`                | italic, formatting, text, style, emphasis, slant, typography, editor, font, highlight, markup, rich text, writing, document, composition                                                                                                                                                                                         |
| `KebabIcon`                 | kebab, menu, options, more, actions, vertical, ellipsis, dots, dropdown, overflow, additional, settings, context, controls, navigation                                                                                                                                                                                           |
| `KeyIcon`                   | key, access, security, authentication, password, unlock, secure, permission, credential, login, protection, authorization, entry, private, encryption                                                                                                                                                                            |
| `KeyResultIcon`             | key result, goal, milestone, achievement, objective, target, outcome, performance, metric, measurement, progress, success, indicator, benchmark, OKR                                                                                                                                                                             |
| `LanguageIcon`              | language, globe, world, international, translation, localization, multilingual, i18n, global, region, country, dialect, speech, communication, culture                                                                                                                                                                           |
| `LearningPathIcon`          | learning path, education, course, curriculum, journey, progression, development, training, roadmap, sequence, steps, milestones, skills, knowledge, instruction                                                                                                                                                                  |
| `LearningPathStepIcon`      | learning step, lesson, module, course unit, educational content, training segment, curriculum component, instruction, tutorial, chapter, section, learning material, educational resource, study unit, progression                                                                                                               |
| `LightbulbIcon`             | lightbulb, idea, inspiration, insight, suggestion, tip, hint, creativity, innovation, solution, concept, thinking, discovery, realization, brainstorm                                                                                                                                                                            |
| `LinkIcon`                  | link, hyperlink, URL, connection, relationship, reference, attachment, association, binding, chain, connect, join, web, navigate, shortcut                                                                                                                                                                                       |
| `LocationIcon`              | location, map, pin, marker, address, place, position, geography, coordinates, navigation, directions, destination, GPS, geolocation, waypoint                                                                                                                                                                                    |
| `LockIcon`                  | lock, security, privacy, protection, restricted, password, authentication, confidential, secure, private, encrypted, safeguard, access control, permission, confidentiality                                                                                                                                                      |
| `LockedCalendarIcon`        | locked calendar, restricted calendar, unavailable calendar, calendar security, protected dates, read-only calendar, calendar access, schedule protection, blocked calendar                                                                                                                                                       |
| `LockedNoteIcon`            | locked note, secure document, private note, confidential, protected content, restricted document, encrypted note, sensitive information, classified, secure file, private document, access control, data protection, privacy, security                                                                                           |
| `MailIcon`                  | mail, email, message, envelope, communication, correspondence, notification, inbox, send, receive, contact, letter, post, delivery, messaging                                                                                                                                                                                    |
| `MaximizeIcon`              | maximize, expand, fullscreen, enlarge, zoom, grow, resize, scale up, stretch, widen, extend, increase, amplify, broaden, magnify                                                                                                                                                                                                 |
| `MediaIcon`                 | media, gallery, library, collection, multimedia, content, grid, layout, images, videos, audio, files, organize, display, browse                                                                                                                                                                                                  |
| `MicrophoneIcon`            | microphone, audio, voice, recording, speech, sound, input, dictation, speaking, talk, vocal, record, capture, communication, broadcast                                                                                                                                                                                           |
| `MicrophoneDisabledIcon`    | microphone disabled, mute, audio off, voice muted, silent, no sound, disabled recording, quiet, silence, turn off mic, stop recording, block audio, deactivate, suppress, disable                                                                                                                                                |
| `MinusIcon`                 | minus, subtract, remove, decrease, collapse, reduce, negative, deletion, less, minimize                                                                                                                                                                                                                                          |
| `MobileIcon`                | mobile, smartphone, phone, device, cellular, responsive, portable, handheld, touchscreen, app, mobile-friendly, on-the-go, wireless, tablet, accessibility                                                                                                                                                                       |
| `MoveIcon`                  | move, drag, drop, reposition, rearrange, relocate, shift, transfer, adjust, placement, organize, sort, order, arrange, position                                                                                                                                                                                                  |
| `NewCommentIcon`            | new comment, unread message, notification, feedback, conversation, discussion, reply, chat, communication, message, alert, update, response, interaction, dialogue                                                                                                                                                               |
| `NewFilterIcon`             | new filter, filter, sort, refine, search, criteria, parameters, options, settings, customize, narrow, results, organize, categorize, notification                                                                                                                                                                                |
| `NewGiftIcon`               | new gift, reward, present, offer, bonus, incentive, prize, giveaway, promotion, surprise, notification, special, freebie, perk, benefit                                                                                                                                                                                          |
| `NewNoteIcon`               | new note, document, note, memo, notification, unread, message, text, content, information, update, alert, reminder, record, entry                                                                                                                                                                                                |
| `NewNotificationIcon`       | new notification, alert, bell, update, message, reminder, notice, announcement, attention, signal, indicator, badge, prompt, inform, activity                                                                                                                                                                                    |
| `NewStickyIcon`             | new sticky, sticky note, reminder, note, memo, notification, quick note, post-it, jot, annotation, brief, reminder, task, to-do, scribble                                                                                                                                                                                        |
| `NewTabIcon`                | new tab, external link, open, navigate, redirect, launch, window, browser, hyperlink, outbound, reference, destination, target, portal, connection                                                                                                                                                                               |
| `NewTemplateIcon`           | new template, template, layout, structure, format, pattern, design, blueprint, framework, boilerplate, preset, model, guide, notification, starter                                                                                                                                                                               |
| `NewTipIcon`                | new tip, hint, suggestion, advice, guidance, help, insight, recommendation, pointer, clue, instruction, direction, notification, information, assistance                                                                                                                                                                         |
| `NextCalendarIcon`          | next calendar, forward, advance, navigation, schedule, upcoming, future, next period, next day, next week, next month, chronological, time, date, progression                                                                                                                                                                    |
| `NoteIcon`                  | note, document, file, text, content, page, paper, memo, record, information, writing, documentation, sheet, entry, composition                                                                                                                                                                                                   |
| `NotebookIcon`              | notebook, journal, diary, log, notes, record, writing, documentation, collection, entries, spiral, bound, composition, planner, organizer                                                                                                                                                                                        |
| `NotificationIcon`          | notification, bell, alert, reminder, message, update, inform, attention, notice, ping, signal, announcement, warning, activity, event                                                                                                                                                                                            |
| `OneIcon`                   | one, number, first, primary, initial, single, start, beginning, priority, order, sequence, count, numeric, ranking, step                                                                                                                                                                                                         |
| `OneOnOneIcon`              | one-on-one, meeting, appointment, consultation, discussion, interview, mentoring, coaching, feedback, personal, individual, face-to-face, calendar, schedule, session                                                                                                                                                            |
| `OpenRoleIcon`              | open role, job opening, vacancy, position, recruitment, hiring, career, opportunity, employment, job posting, talent acquisition, staffing, job search, application, human resources                                                                                                                                             |
| `OpenSmileIcon`             | smile, happy, positive, satisfaction, feedback, emotion, face, emoji, joy, pleased, grin                                                                                                                                                                                                                                         |
| `OrderedListIcon`           | ordered list, numbered list, sequence, priority, ranking, steps, enumeration, hierarchy, organization, structure, formatting, outline, sequential, itemized, numeric                                                                                                                                                             |
| `OrgChartIcon`              | org chart, organizational chart, hierarchy, structure, reporting, management, team, department, chain of command, relationships, organization, corporate structure, tree diagram, reporting lines, leadership                                                                                                                    |
| `OrganizationIcon`          | organization, company, business, corporation, enterprise, institution, department, structure, hierarchy, entity, establishment, firm, workplace, office, building                                                                                                                                                                |
| `PauseIcon`                 | pause, stop, halt, suspend, break, interrupt, media, playback, control, temporary, freeze, wait, hold, standby, delay                                                                                                                                                                                                            |
| `PdfIcon`                   |                                                                                                                                                                                                                                                                                                                                  |
| `PeaceIcon`                 | peace, harmony, balance, tranquility, calm, serenity, wellness, mindfulness, resolution, reconciliation, unity, cooperation, agreement, coexistence, wellbeing                                                                                                                                                                   |
| `PercentIcon`               | percent, percentage, proportion, ratio, rate, discount, statistics, calculation, fraction, portion, share, division, metrics, measurement, comparison                                                                                                                                                                            |
| `PhoneIcon`                 | phone, telephone, call, contact, communication, voice, mobile, dial, support, helpline, conversation, telecommunications, receiver, callback, hotline                                                                                                                                                                            |
| `PinIcon`                   | pin, pushpin, thumbtack, bookmark, save, mark, location, highlight, attach, fix, favorite, important, reference, reminder, flag                                                                                                                                                                                                  |
| `PinSolidIcon`              | pin, location, marker, pinned, bookmark, save, mark, position, place, fixed, solid, filled                                                                                                                                                                                                                                       |
| `PlayIcon`                  | play, start, begin, launch, initiate, activate, media, playback, video, audio, stream, execute, run, trigger, commence                                                                                                                                                                                                           |
| `PlaySolidIcon`             | play, solid, filled, start, begin, launch, initiate, activate, media, playback, video, audio, stream, execute, run                                                                                                                                                                                                               |
| `PlusIcon`                  | plus, add, create, new, addition, expand, increase, increment, positive, more, insert, append, extend, enlarge, include                                                                                                                                                                                                          |
| `PrintIcon`                 | print, printer, document, hard copy, paper, output, publish, physical copy, printing, print preview, print settings, page setup, print job, printout, reproduction                                                                                                                                                               |
| `ProfileIcon`               | profile, user, account, avatar, person, identity, personal, settings, member, contact, individual, user profile, biography, credentials, authentication                                                                                                                                                                          |
| `ProgressIcon`              | progress, completion, status, loading, process, task, tracking, advancement, checkpoint, milestone, achievement, verification, confirmation, success, validation                                                                                                                                                                 |
| `PronunciationIcon`         | pronunciation, audio, sound, speaker, voice, speech, language, phonetics, playback, listen, hearing, diction, articulation, elocution, enunciation                                                                                                                                                                               |
| `QuestionIcon`              | question, help, information, FAQ, guidance, assistance, support, inquiry, tooltip, hint, explanation, clarification, query, ask, learn                                                                                                                                                                                           |
| `QuizLessonIcon`            | quiz, lesson, test, assessment, education, learning, evaluation, examination, knowledge, question, answer, verification, completion, module, course                                                                                                                                                                              |
| `ReactionIcon`              | reaction, emoji, response, feedback, emotion, expression, sentiment, engagement, interaction, like, rating, react, feeling, opinion, social                                                                                                                                                                                      |
| `RecurringIcon`             | recurring, repeat, cycle, periodic, scheduled, automation, regular, routine, interval, frequency, continuous, loop, iteration, pattern, renewal                                                                                                                                                                                  |
| `RefreshIcon`               | refresh, reload, update, sync, renew, reset, latest, current, fetch, retrieve, recycle, restart, regenerate, revitalize, reinitialize                                                                                                                                                                                            |
| `RelationWithManagerIcon`   | manager, employee, hierarchy, reporting, leadership, supervision, authority, organizational structure, vertical relationship, direct report, superior, subordinate, chain of command, management, team lead                                                                                                                      |
| `RelationshipWithPeersIcon` | peer relationship, colleagues, team, collaboration, cooperation, networking, connection, partnership, teamwork, coworkers, associates, horizontal relationship, social dynamics, interaction, alliance                                                                                                                           |
| `ReminderIcon`              | reminder, alert, notification, schedule, upcoming, prompt, deadline, event, task, time-sensitive, calendar, appointment, notice, alarm, memory aid                                                                                                                                                                               |
| `RemoveIcon`                | remove, delete, close, cancel, dismiss, eliminate, terminate, clear, discard, erase, reject, exclude, withdraw, abort, exit                                                                                                                                                                                                      |
| `RemoveCalendarIcon`        | remove calendar, cancel event, delete appointment, decline invitation, remove meeting, cancel reservation, delete schedule, unbook, withdraw event, clear calendar, cancel booking, remove date, delete occurrence, cancel appointment, unschedule                                                                               |
| `RemoveUserIcon`            | remove user, delete account, revoke access, unassign, remove member, delete profile, deactivate user, remove participant, unsubscribe, terminate account, remove permission, delete contact, remove follower, unlink user, disassociate                                                                                          |
| `ReplyIcon`                 | reply, respond, answer, feedback, comment, message, conversation, communication, return, response, discussion, correspondence, dialogue, reaction, exchange                                                                                                                                                                      |
| `ReportIcon`                | report, analytics, data, statistics, metrics, visualization, chart, graph, summary, dashboard, insights, performance, analysis, results, documentation                                                                                                                                                                           |
| `ReportsToIcon`             | reports to, reporting line, manager, supervisor, hierarchy, organization, structure, chain of command, reporting relationship, management, team structure                                                                                                                                                                        |
| `RequalificationIcon`       | requalification, recertification, renewal, certification, qualification, validation, verification, credentials, skills, assessment, achievement, competency, compliance, accreditation, endorsement                                                                                                                              |
| `ReviewIcon`                | review, rating, evaluation, assessment, feedback, opinion, appraisal, critique, judgment, stars, score, grade, testimonial, recommendation, analysis                                                                                                                                                                             |
| `RewindIcon`                | rewind, undo, back, previous, reverse, return, backward, rollback, restore, history, earlier, retrace, backtrack, retreat, reset                                                                                                                                                                                                 |
| `RocketIcon`                | rocket, launch, startup, boost, accelerate, speed, fast, performance, takeoff, blast, innovation, growth, advancement, progress, mission, exploration, journey, space                                                                                                                                                            |
| `SatisfactionIcon`          | satisfaction, thumbs up, like, approve, positive, feedback, endorse, agree, content, happy, pleased, rating, review, recommend, support, appreciation, praise, affirm                                                                                                                                                            |
| `ScreenShareIcon`           | screen share, present, broadcast, display, project, stream, cast, mirror, meeting, webinar, collaboration, demonstration, presentation, remote, virtual, conference, sharing, view                                                                                                                                               |
| `SearchIcon`                | search, find, magnifying glass, lookup, query, explore, discover, filter, seek, locate, browse                                                                                                                                                                                                                                   |
| `SectionIcon`               | section, segment, division, part, category, area, block, component, module, partition, region, subdivision                                                                                                                                                                                                                       |
| `SegmentIcon`               | segment, section, category, division, group, classification, partition, subset, cluster, demographic, targeting, audience, market, customer, data, analytics, filter, organize                                                                                                                                                   |
| `SendIcon`                  | send, transmit, share, message, email, dispatch, deliver, forward, submit, communicate, paper airplane, post, distribute, transfer, broadcast, publish, relay, transmit                                                                                                                                                          |
| `SettingsIcon`              | settings, preferences, configuration, options, customize, adjust, gear, cog, setup, control, parameters, modify, personalize, configure, tweak, system, admin, manage                                                                                                                                                            |
| `SettingsNotificationIcon`  | settings notification, configuration alert, system update, pending settings, attention required, settings badge, update available, configuration notice, gear notification, settings alert, system maintenance, preferences update, settings reminder, unreviewed settings, action needed, settings change, configuration status |
| `SettingsWarningIcon`       | settings warning, configuration error, system issue, critical settings, urgent attention, settings problem, configuration alert, system warning, error notification, settings error, security concern, configuration issue, settings alert, system maintenance, critical update, warning indicator, troubleshooting              |
| `ShareIcon`                 | share, distribute, connect, network, social, collaboration, transfer, publish, send, broadcast, spread, circulate, disseminate, exchange, link, forward, nodes, connections                                                                                                                                                      |
| `SharedIcon`                | shared, collaboration, group, team, multiple users, collective, joint, common, mutual, cooperative, shared access, permissions, collaborative, community, together, shared resources, group ownership, co-owned                                                                                                                  |
| `ShieldIcon`                | shield, protection, security, defense, safety, guard, safeguard, secure, protect, privacy, firewall, antivirus, encryption, barrier, armor, fortress, immunity, prevention                                                                                                                                                       |
| `SliderIcon`                | slider, adjust, control, level, equalizer, tune, calibrate, customize, setting, parameter, scale, range, volume, balance, mixer, dial, knob, adjustment                                                                                                                                                                          |
| `SortIcon`                  | sort, order, filter, arrange, organize, sequence, rank, categorize, classify, prioritize, list, hierarchy, structure, ascending, descending, alphabetical, numerical, chronological                                                                                                                                              |
| `SparklesIcon`              | sparkles, stars, shine, highlight, feature, special, new, premium, magic, enhanced, spotlight, featured, attention, notable, exceptional, celebration, decoration, emphasis                                                                                                                                                      |
| `SproutIcon`                | sprout, growth, seedling, plant, development, beginning, new, fresh, start, nurture, sustainability, green, environment, organic, potential, cultivate, progress, flourish                                                                                                                                                       |
| `StarIcon`                  | star, favorite, rating, bookmark, important, preference, highlight, save, mark, like, featured, review, rank, score, grade, evaluate, prioritize, wishlist                                                                                                                                                                       |
| `StarSolidIcon`             | star solid, favorite, selected, active, rating, bookmark, important, preference, highlight, saved, marked, liked, featured, review, selected rating, active state, filled star, chosen                                                                                                                                           |
| `StartOverIcon`             | start over, restart, reset, begin again, redo, retry, refresh, renew, revert, return, initial state, clear, start from scratch, new attempt, do over, fresh start, reinitialize, relaunch                                                                                                                                        |
| `StickyIcon`                | sticky note, post-it, note, reminder, annotation, memo, comment, jot, scribble, mark, tag, label, flag, highlight, remember, notation, adhesive note, quick note                                                                                                                                                                 |
| `StrikethroughIcon`         | strikethrough, text formatting, crossed out, deleted text, removed, obsolete, formatting, text style, markup, edit, strike, line through, cross out, redaction, text decoration, rich text, typography, text editor                                                                                                              |
| `SubstractIcon`             | subtract, minus, remove, decrease, reduce, deduct, take away, less, deletion, diminish, lower, decrement, minimize, shrink, lessen, negative, removal, reduction                                                                                                                                                                 |
| `SuccessIcon`               | success, complete, done, finished, approved, confirmed, verified, validated, accomplished, achieved, passed, correct, checkmark, tick, positive, affirmative, confirmation, acceptance                                                                                                                                           |
| `SyncIcon`                  | sync, synchronize, update, refresh, exchange, transfer, bidirectional, mirror, replicate, harmonize, coordinate, align, match, reconcile, reload, renew, two-way, data exchange                                                                                                                                                  |
| `TagIcon`                   | tag, label, category, keyword, metadata, identifier, marker, classify, organize, group, flag, mark, annotate, index, price tag, taxonomy, hashtag, attribute                                                                                                                                                                     |
| `TeamIcon`                  | team, group, collaboration, people, users, members, colleagues, crew, staff, personnel, workforce, organization, department, unit, collective, assembly, community, partnership                                                                                                                                                  |
| `TemplateIcon`              | template, layout, form, structure, design, pattern, blueprint, framework, model, preset, format, boilerplate, prototype, skeleton, outline, scheme, arrangement, composition                                                                                                                                                     |
| `TextLessonIcon`            | text lesson, article, reading, paragraph, content, document, material, learning, education, study, text, literature, information, tutorial, guide, instruction, course, textbook                                                                                                                                                 |
| `ThreeIcon`                 | three, number 3, third, numbering, ordering, ranking, sequence, count, position, step, level, tier, grade, phase, stage, index, enumeration, numeric                                                                                                                                                                             |
| `ThumbsDownIcon`            | thumbs down, dislike, negative, disapproval, rejection, feedback, rating, downvote, disagree, thumbs-down, not recommended                                                                                                                                                                                                       |
| `ThumbsUpIcon`              | thumbs up, like, approve, positive, feedback, upvote, agree, endorse, support, recommend, praise, appreciation, satisfaction, rating, review, reaction, affirmation, consent                                                                                                                                                     |
| `TipIcon`                   | tip, hint, suggestion, advice, idea, lightbulb, insight, guidance, help, information, recommendation, pointer, clue, instruction, direction, wisdom, knowledge, enlightenment                                                                                                                                                    |
| `TranslationIcon`           | translation, language, localization, internationalization, multilingual, global, interpret, convert, translate, foreign, dialect, bilingual, polyglot, linguistic, i18n, l10n, globalization, cross-language                                                                                                                     |
| `TwoIcon`                   | two, number 2, second, numbering, ordering, ranking, sequence, count, position, step, level, tier, grade, phase, stage, index, enumeration, numeric                                                                                                                                                                              |
| `UnarchiveIcon`             | unarchive, restore, retrieve, recover, extract, box, storage, archive, unbox, return                                                                                                                                                                                                                                             |
| `UnderlineIcon`             | underline, text formatting, text style, typography, formatting, text decoration, emphasis, editor, rich text, styling, format                                                                                                                                                                                                    |
| `UnorderedListIcon`         | unordered list, bulleted list, bullet points, list format, text formatting, bullets, list style, document formatting, content structure, text editor                                                                                                                                                                             |
| `UploadIcon`                | upload, file upload, cloud upload, send file, transfer, push, share, store, cloud storage, file transfer, data upload                                                                                                                                                                                                            |
| `UpsellIcon`                | upsell, premium, upgrade, sales, marketing, cross-sell, shopping, commerce, promotion, higher tier, additional services, value-added                                                                                                                                                                                             |
| `UserIcon`                  | user, person, profile, account, avatar, member, individual, identity, personal, human, login, user account                                                                                                                                                                                                                       |
| `VideoIcon`                 | video, media, player, playback, movie, film, multimedia, streaming, recording, footage, clip, video file, video content                                                                                                                                                                                                          |
| `VideoCameraIcon`           | video camera, camcorder, recording, filming, capture, video recording, camera, webcam, video creation, videography, record video, shoot video, video device                                                                                                                                                                      |
| `VideoCameraDisabledIcon`   | video camera off, camera disabled, video off, no video, camera off, video disabled, stop video, video unavailable, camera muted, video muted, disabled camera                                                                                                                                                                    |
| `WarningIcon`               | warning, alert, caution, attention, exclamation, notice, error, danger, important, notification, hazard, risk, triangle                                                                                                                                                                                                          |
| `WebinarLessonIcon`         | webinar, online lesson, virtual class, digital learning, e-learning, video lesson, online training, web conference, remote learning, virtual seminar, online education, distance learning                                                                                                                                        |
| `WellnessIcon`              | wellness, health, wellbeing, medical, healthcare, heart, care, self-care, healthy, fitness, mental health, physical health, healing, holistic                                                                                                                                                                                    |
| `WhosWhoFaceIcon`           | who's who, face, identification, recognition, profile, person, identity, directory, team member, people, facial recognition, contact, avatar, employee                                                                                                                                                                           |
| `WhosWhoGameIcon`           | who's who, game, activity, identification, recognition, matching, team building, icebreaker, people, directory, quiz, learning, faces, memory                                                                                                                                                                                    |

### Rich SVG Icon Library

Getting started with Hopper's Rich SVG Icons library

All rich icons in the Workleap icon library are available in three predefined sizes. To ensure consistency and clarity, always use the icons at one of these sizes. Avoid resizing icons to dimensions other than the provided options.

To integrate a rich icon into your project, simply import it from `@hopper-ui/svg-icons` in a JavaScript file:

```tsx
import ActionListRichIcon from "@hopper-ui/svg-icons/rich-icons/action-list-32.svg";
```

or in a CSS file:

```css
.my-component {
    background-image: url("@hopper-ui/svg-icons/rich-icons/action-list-32.svg");
}
```

The color of the rich icons can be changed by using the right CSS Variables. The following variables are available for your styling needs: `--hop-RichIcon-placeholder-fill`, `--hop-RichIcon-placeholder-background` and `--hop-RichIcon-placeholder-shadow`. You should use the appropriate [decorative semantic tokens](/tokens/semantic/color.md#decorative) or status semantic tokens. The available options for Rich Icons are `option1` to `option8`, `success`, `warning`, `danger`, `information` and `upsell`.

```css
.actionListRichIcon {
    --hop-RichIcon-placeholder-background: var(--hop-color-decorative-option1);
}
```

You can preview rich icons in your preferred size. Simply click on an icon to instantly copy its name!

Available Sizes: `24px`,`32px`,`40px`

| Name                      | Keywords                                                                                                                                                                                                                |
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ActionListRichIcon`      | action list, menu, options, tasks, commands, dropdown, selection, choices, actions, functions, operations, task list                                                                                                    |
| `AnniversaryRichIcon`     | anniversary, celebration, milestone, commemoration, yearly event, annual, remembrance, special date, work anniversary, company milestone, jubilee, memorial                                                             |
| `AnonymousRichIcon`       | anonymous, unknown, unidentified, unnamed, incognito, private, hidden identity, confidential, nameless, undisclosed, privacy, masked user                                                                               |
| `ApplauseRichIcon`        | applause, clapping, appreciation, recognition, congratulations, praise, approval, celebration, acknowledgment, support, acclaim, ovation                                                                                |
| `BirthdayRichIcon`        | birthday, celebration, cake, party, anniversary, special occasion, birth date, personal milestone, festivity, commemoration, candles, congratulations                                                                   |
| `BrokenImageRichIcon`     | broken image, failed image, missing image, corrupted image, image error, unavailable image, loading failure, placeholder, image not found, media error, display failure, broken media                                   |
| `CautionRichIcon`         | caution, warning, alert, attention, hazard, danger, notice, careful, risk, important, exclamation, precaution                                                                                                           |
| `ConversationRichIcon`    | conversation, discussion, dialogue, chat, communication, messaging, talk, exchange, interaction, speech, comments, discourse                                                                                            |
| `CustomRichIcon`          | custom, personalized, tailored, user-defined, customization, bespoke, modified, unique, specialized, configurable, adaptable, user-created                                                                              |
| `DecreasingScoreRichIcon` | decreasing score, declining performance, downward trend, negative change, falling metrics, reduction, decline, decrease, downtrend, performance drop, regression, deterioration                                         |
| `DeletedUserRichIcon`     | deleted user, removed account, deactivated user, former user, account deletion, inactive account, terminated user, removed profile, non-existent user, account removal, disabled account, user deletion                 |
| `DepartmentRichIcon`      | department, division, team, unit, organizational structure, business function, group, section, branch, functional area, corporate division, business unit                                                               |
| `DirectoryRichIcon`       | directory, listing, catalog, index, registry, contacts, address book, employee list, phonebook, database, collection, reference list                                                                                    |
| `DiscountRichIcon`        | discount, sale, offer, promotion, deal, reduction, savings, special price, markdown, coupon, bargain, price cut                                                                                                         |
| `EmailRichIcon`           | email, mail, message, electronic mail, communication, envelope, inbox, correspondence, contact, notification, digital message, e-mail                                                                                   |
| `FeedbackRichIcon`        | feedback, review, opinion, comment, evaluation, assessment, rating, survey, input, suggestion, critique, response                                                                                                       |
| `GoalIndividualRichIcon`  | individual goal, personal objective, target, personal achievement, performance goal, milestone, personal development, objective, aspiration, personal target, achievement, self-improvement                             |
| `GoalTeamRichIcon`        | team goal, collective objective, shared target, group achievement, collaborative goal, team performance, joint milestone, common purpose, team objective, shared mission, group target, collaborative achievement       |
| `GroupRichIcon`           | group, team, collection, cluster, assembly, gathering, community, crew, ensemble, unit, collective, multiple users                                                                                                      |
| `GrowthRichIcon`          | growth, increase, development, improvement, progress, advancement, expansion, upward trend, rising, flourishing, evolution, positive change                                                                             |
| `IdeaRichIcon`            | idea, thought, concept, inspiration, innovation, insight, lightbulb, creativity, suggestion, brainstorm, thinking, solution                                                                                             |
| `InfoRichIcon`            | information, details, help, context, explanation, guidance, tooltip, hint, description, clarification, assistance, facts                                                                                                |
| `LikertScaleRichIcon`     | likert scale, rating scale, survey, questionnaire, measurement, opinion scale, response range, assessment, evaluation, feedback scale, satisfaction scale, agreement scale                                              |
| `LocationRichIcon`        | location, place, position, address, map pin, marker, geographical point, coordinates, destination, site, spot, whereabouts                                                                                              |
| `MultipleChoiceRichIcon`  | multiple choice, options, selection, quiz, survey question, checkbox, radio button, choices, alternatives, select, poll, questionnaire                                                                                  |
| `OneOnOneRichIcon`        | one-on-one, individual meeting, personal discussion, face-to-face, private conversation, direct interaction, mentoring, coaching, personal review, two-person meeting, 1:1, personal session                            |
| `OpenRoleRichIcon`        | open role, job opening, vacant position, career opportunity, unfilled role, job vacancy, available position, hiring, recruitment, job posting, employment opportunity, staffing need                                    |
| `OpinionScaleRichIcon`    | opinion scale, slider, rating, spectrum, continuum, measurement, subjective scale, attitude measurement, range selector, sentiment scale, preference scale, intensity measure                                           |
| `OrganizationRichIcon`    | organization, company, business, institution, corporation, enterprise, firm, establishment, entity, agency, association, corporate structure                                                                            |
| `PeopleRichIcon`          | people, users, individuals, persons, personnel, staff, team members, human resources, employees, community, crowd, population                                                                                           |
| `ProfileRichIcon`         | profile, user account, personal information, identity, account, user, avatar, personal details, bio, user profile, account settings, personal data                                                                      |
| `QuestionRichIcon`        | question, inquiry, help, query, FAQ, assistance, support, information request, doubt, interrogation, problem, uncertainty                                                                                               |
| `ReminderRichIcon`        | reminder, notification, alert, prompt, scheduled notice, memory aid, upcoming event, task reminder, alarm, nudge, recall, remember                                                                                      |
| `ReviewRichIcon`          | review, evaluation, assessment, examination, appraisal, feedback, critique, analysis, rating, judgment, inspection, performance review                                                                                  |
| `RisingScoreRichIcon`     | rising score, improving performance, upward trend, positive change, increasing metrics, growth, improvement, progress, advancement, uptrend, performance gain, positive trajectory                                      |
| `RocketRichIcon`          | rocket, launch, startup, liftoff, advancement, initiative, acceleration, growth, ambition, progress, takeoff, breakthrough                                                                                              |
| `ScriptRichIcon`          | script, code, programming, automation, sequence, instructions, algorithm, routine, macro, command, procedure, coding                                                                                                    |
| `SettingsRichIcon`        | settings, configuration, preferences, options, controls, customization, setup, adjustment, parameters, gear, system settings, preferences menu                                                                          |
| `SparklesRichIcon`        | sparkles, stars, highlights, special, featured, new, premium, magic, shine, glitter, standout, featured content                                                                                                         |
| `StarRichIcon`            | star, favorite, bookmark, important, rating, preference, highlight, save, mark, featured, special, priority                                                                                                             |
| `StatusRichIcon`          | status, state, condition, progress, indicator, stage, phase, situation, standing, position, health, current state                                                                                                       |
| `SuccessRichIcon`         | success, achievement, completion, accomplishment, victory, win, triumph, attainment, fulfillment, positive outcome, goal reached, mission accomplished                                                                  |
| `SupportRichIcon`         | support, help, assistance, customer service, aid, guidance, technical support, troubleshooting, service desk, helpdesk, assistance center, customer care                                                                |
| `TemplateRichIcon`        | template, pattern, format, layout, blueprint, model, boilerplate, framework, preset, structure, sample, starter                                                                                                         |
| `TextAnswerRichIcon`      | text answer, written response, free-form text, open-ended question, text field, written feedback, text input, paragraph response, essay answer, long-form text, written comment, text response                          |
| `UpsellRichIcon`          | upsell, upgrade, premium, promotion, offer, enhancement, add-on, paid feature, subscription, advanced option, premium tier, special offer                                                                               |
| `WhosWhoRichIcon`         | who's who, team directory, employee identification, organizational chart, staff directory, team members, personnel listing, employee directory, team roster, people finder, colleague identification, staff recognition |

### Designing an Icon

Learn how to create consistent and high-quality icons by following these guidelines.

To maintain visual consistency across the Workleap platform, icon creators should follow these guidelines when contributing to the Workleap icon library. **All designers are encouraged to create their own icons.** Use the design language and specifications outlined in this guide to ensure alignment across all Workleap products.

#### Before You Begin

**1. Review Existing Icons:** Before proposing a new icon, explore the current icon set to determine if an existing design fits your needs. Avoid duplicating concepts and ensure your proposal adds unique value.

**2. Understand the Design Language:** The Workleap icon library follows a specific and consistent design language. Adhering to this language is crucial for maintaining a shared understanding across all verticals and ensuring new additions feel cohesive within Workleap's visual system.

#### Anatomy of an Icon

Icons in the Workleap library have several defined characteristics. Understanding these attributes is essential for creating high-quality contributions.

##### Definitions

* Frame Size - The dimensions of the artboard in which the icon is designed.
* Stroke Alignment - The stroke's position relative to the shape. Use **center** alignment unless the shape is closed; in that case, use **inside**.
* Corner Radius - Follow the standard radius values from the design specification table. Deviations are allowed only to improve legibility.
* Terminal - The end style of a stroke, which can be round, square, or flat.
* Inner spacing - The space between a shape and its stroke.
* Fill - The shape's color. Icons using a fill are also known as solid icons. Any shapes on a filled icon should follow the stroke guidelines.
* Keylines - Lines that define an icon's shape and stroke alignment. In Figma, toggle them using `⌘G`(Mac) or `Ctrl+G`(PC).

##### Values

Use the following specifications when designing your icon:

| Anatomy          | Small         | Medium        | Large         |
| ---------------- | ------------- | ------------- | ------------- |
| Frame Size       | 16X16         | 24X24         | 32X32         |
| Stroke Weight    | 1.5px         | 1.5px         | 2px           |
| Stroke Alignment | Center/Inside | Center/Inside | Center/Inside |
| Corner Radius    | 1px           | 1.5px         | 2px           |
| Terminal         | Round         | Round         | Round         |
| Inner Spacing    | >= 1px        | >= 2px        | >= 2px        |