@stackup/inputs

A set of helpful input components that take the burden out of building forms with React.

This library depends on @stackup/form to manage the state
of form values.

- Components
- Checkbox
- CheckboxItem
- FieldSet
- FileInput
- FileListInput
- Input
- Radio
- Select
- Switch
- TextArea
- ThemeProvider
- Utilities
- concat
- createTheme
- formatDateTime
- formatTime
- formatNumber
- parseDateTime
- parseTime
- parseNumber

Components

$3

Manages the state of a boolean value using a checkbox.

In addition to the props listed below, this component accepts
all props for an HTML input.

#### Example

``jsx
label="I agree"
help="Did you read all 7,000 lines?"
field={useField(form, "confirmation")}
/>
`

#### Props

| Name | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |
| field | FormField | ✓ | See @stackup/form |
| label | ReactNode | ✓ | Content to appear in the label |
| help | ReactNode | ✗ | Extra help info that will be rendered within the label |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| prepend | ReactNode | ✗ | Content to render before the input |
| append | ReactNode | ✗ | Content to render after the input |
| className | string | ✗ | An additional class name for the field |
| inputClassName | string | ✗ | An additional class name for the input |
| labelClassName | string | ✗ | An additional class name for the label |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |
| innerRef | Ref | ✗ | A ref to the input element |

$3

Manages an array of values, represented by checkboxes.

In addition to the props listed below, this component accepts
all props for an HTML input.

Note that this component will not render error messages. For that, you'll
want to wrap your checkboxes in a FieldSet.

#### Example

`jsx



label="Soccer"
value={{ name: "Soccer" }}
field={useField(form, "sport")}
/>
label="Baseball"
value={{ name: "Baseball" }}
field={useField(form, "sport")}
/>



`

#### Props

| Name | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |
| value | Value | ✓ | Toggle the inclusion of this value in the array. |
| field | FormField | ✓ | See @stackup/form |
| label | ReactNode | ✓ | Content to appear in the label |
| help | ReactNode | ✗ | Extra help info that will be rendered within the label |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| prepend | ReactNode | ✗ | Content to render before the input |
| append | ReactNode | ✗ | Content to render after the input |
| className | string | ✗ | An additional class name for the field |
| inputClassName | string | ✗ | An additional class name for the input |
| labelClassName | string | ✗ | An additional class name for the label |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |
| innerRef | Ref | ✗ | A ref to the input element |

$3

Fields that are composed of multiple components (e.g. Radio and CheckboxItem)
should always be rendered within a fieldset.

If an error is associated with the field, it will be rendered within the
fieldset, rather than on a Radio or CheckboxItem.

#### Example

`jsx



label="Soccer"
value={{ name: "Soccer" }}
field={useField(form, "sport")}
/>
label="Baseball"
value={{ name: "Baseball" }}
field={useField(form, "sport")}
/>



`

#### Props

| Name | Type | Required | Description |
| --------------- | ------------------------------------- | -------- | -------------------------------------------------- |
| field | FormField | ✓ | See @stackup/form |
| legend | ReactNode | ✓ | Content to appear in the legend |
| help | ReactNode | ✗ | Extra help info |
| children | ReactNode | ✗ | Content that should appear inside the fieldset |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| className | string | ✗ | An additional class name for the fieldset |
| legendClassName | string | ✗ | An additional class name for the legend |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |

$3

Renders an .

In addition to the props listed below, this component accepts
all props for an HTML input.

#### Example

`jsx

`

#### Props

| Name | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |
| field | FormField | ✓ | See @stackup/form |
| label | ReactNode | ✓ | Content to appear in the label |
| help | ReactNode | ✗ | Extra help info that will be rendered within the label |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| prepend | ReactNode | ✗ | Content to render before the input |
| append | ReactNode | ✗ | Content to render after the input |
| className | string | ✗ | An additional class name for the field |
| inputClassName | string | ✗ | An additional class name for the input |
| labelClassName | string | ✗ | An additional class name for the label |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |
| innerRef | Ref | ✗ | A ref to the input element |

$3

Renders an .

In addition to the props listed below, this component accepts
all props for an HTML input.

#### Example

`jsx

`

#### Props

| Name | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |
| field | FormField | ✓ | See @stackup/form |
| label | ReactNode | ✓ | Content to appear in the label |
| help | ReactNode | ✗ | Extra help info that will be rendered within the label |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| prepend | ReactNode | ✗ | Content to render before the input |
| append | ReactNode | ✗ | Content to render after the input |
| className | string | ✗ | An additional class name for the field |
| inputClassName | string | ✗ | An additional class name for the input |
| labelClassName | string | ✗ | An additional class name for the label |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |
| innerRef | Ref | ✗ | A ref to the input element |

$3

Renders an , which whatever type you provide.

The value of this input will always be a string, but you should use a
validation library such as @stackup/validate
to parse and validate the entry before submission.

In addition to the props listed below, this component accepts
all props for an HTML input.

#### Example

`jsx

`

#### Props

| Name | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |
| type | InputType | ✗ | |
| field | FormField | ✓ | See @stackup/form |
| label | ReactNode | ✓ | Content to appear in the label |
| help | ReactNode | ✗ | Extra help info that will be rendered within the label |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| prepend | ReactNode | ✗ | Content to render before the input |
| append | ReactNode | ✗ | Content to render after the input |
| className | string | ✗ | An additional class name for the field |
| inputClassName | string | ✗ | An additional class name for the input |
| labelClassName | string | ✗ | An additional class name for the label |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |
| innerRef | Ref | ✗ | A ref to the input element |

$3

Renders an and manages the state of any type of value.

Note that this component will not render error messages. For that, you'll
want to wrap your radio options in a FieldSet.

In addition to the props listed below, this component accepts
all props for an HTML input.

#### Example

`jsx



label="Soccer"
value={{ name: "Soccer" }}
field={useField(form, "sport")}
/>
label="Baseball"
value={{ name: "Baseball" }}
field={useField(form, "sport")}
/>



`

#### Props

| Name | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |
| value | Value | ✓ | The value of the option to be selected |
| field | FormField | ✓ | See @stackup/form |
| label | ReactNode | ✓ | Content to appear in the label |
| help | ReactNode | ✗ | Extra help info that will be rendered within the label |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| prepend | ReactNode | ✗ | Content to render before the input |
| append | ReactNode | ✗ | Content to render after the input |
| className | string | ✗ | An additional class name for the field |
| inputClassName | string | ✗ | An additional class name for the input |
| labelClassName | string | ✗ | An additional class name for the label |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |
| innerRef | Ref | ✗ | A ref to the input element |

$3

Renders a tag with whatever options you provide.

You can provide a placeholder, which will render a disabled option
with a blank value.

In addition to the props listed below, this component accepts
all props for an HTML select.

#### Example

`jsx
label="Sport"
placeholder="Choose a sport"
field={useField(form, "sport")}
>
Baseball
Soccer



`

#### Props

| Name | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |
| placeholder | string | ✗ | |
| field | FormField | ✓ | See @stackup/form |
| label | ReactNode | ✓ | Content to appear in the label |
| help | ReactNode | ✗ | Extra help info that will be rendered within the label |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| prepend | ReactNode | ✗ | Content to render before the input |
| append | ReactNode | ✗ | Content to render after the input |
| className | string | ✗ | An additional class name for the field |
| inputClassName | string | ✗ | An additional class name for the input |
| labelClassName | string | ✗ | An additional class name for the label |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |
| innerRef | Ref | ✗ | A ref to the input element |

$3

Renders a to toggle the state of a boolean value.

You can style this element with CSS by selecting the [aria-checked]
value.

In addition to the props listed below, this component accepts
all props for an HTML button.

#### Example

`jsx

`

#### Props

| Name | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |
| field | FormField | ✓ | See @stackup/form |
| label | ReactNode | ✓ | Content to appear in the label |
| help | ReactNode | ✗ | Extra help info that will be rendered within the label |
| variant | string \| boolean \| FieldVariant[] | ✗ | Variant class name to append to all elements |
| prepend | ReactNode | ✗ | Content to render before the input |
| append | ReactNode | ✗ | Content to render after the input |
| className | string | ✗ | An additional class name for the field |
| inputClassName | string | ✗ | An additional class name for the input |
| labelClassName | string | ✗ | An additional class name for the label |
| helpClassName | string | ✗ | An additional class name for the help |
| errorClassName | string | ✗ | An additional class name for the error |
| innerRef | Ref | ✗ | A ref to the input element |

$3

Renders a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">In addition to the props listed below, this component accepts<br />all props for an HTML input.</p><p class="my-3">#### Example</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><TextArea type="comment" label="Comment" field={useField(form, "comment")} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Props</p><p class="my-3">| Name | Type | Required | Description |<br />| -------------- | ------------------------------------- | -------- | ------------------------------------------------------ |<br />| field | </code>FormField<string><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✓ | See <a href="https://github.com/rzane/form" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">@stackup/form</a> |<br />| label | </code>ReactNode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✓ | Content to appear in the label |<br />| help | </code>ReactNode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | Extra help info that will be rendered within the label |<br />| variant | </code>string \| boolean \| FieldVariant[]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | Variant class name to append to all elements |<br />| prepend | </code>ReactNode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | Content to render before the input |<br />| append | </code>ReactNode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | Content to render after the input |<br />| className | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | An additional class name for the field |<br />| inputClassName | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | An additional class name for the input |<br />| labelClassName | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | An additional class name for the label |<br />| helpClassName | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | An additional class name for the help |<br />| errorClassName | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | An additional class name for the error |<br />| innerRef | </code>Ref<HTMLTextAreaElement><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | ✗ | A ref to the input element |</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Render a </code>ThemeProvider<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> at the top of your component tree<br />to provide a global theme.</p><p class="my-3">See </code>createTheme<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> for an example of how to define your theme.</p><p class="my-3">#### Example</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">jsx<br /><ThemeProvider value={theme}><br /> <App /><br /></ThemeProvider><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><!-- END components --></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Utilities</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Concatenate multiple class names.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />concat("field", touched && error && "field--invalid");<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Create a new theme. This can be used in combination with the<br /><a href="#themeprovider" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">ThemeProvider</a> to apply class names to fields.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />export const theme = createTheme({<br /> field: props => {<br /> return concat(<br /> "field",<br /> props.touched && props.error && "field--invalid",<br /> ...props.types.map(type => </code>field--${type}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">),<br /> ...props.variants.map(variant => variant && </code>field--${variant}<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">)<br /> );<br /> }<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Convert ISO-8601 to </code>input[type=datetime-local]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This can be used to populate<br />the initial value for your inputs.</p><p class="my-3">When given an invalid value, this function will throw an error.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />formatDateTime("2020-07-08T16:30:00.000Z");<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Convert ISO-8601 to </code>input[type=time]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This can be used to populate<br />the initial value for your inputs.</p><p class="my-3">When given an invalid value, this function will throw an error.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />formatTime("08:28:00Z");<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Convert a number to </code>input[type=number]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. This can be used to populate<br />the initial value for your inputs.</p><p class="my-3">When given an invalid value, this function will throw an error.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />formatNumber(0);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Convert </code>input[type=datetime-local]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to ISO-8601. This can be used to parse and validate<br />information entered by the user.</p><p class="my-3">When given an invalid value, this function will return </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />parseDateTime("2020-07-08T12:30");<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Convert </code>input[type=time]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to ISO-8601. This can be used to parse and validate<br />information entered by the user.</p><p class="my-3">When given an invalid value, this function will return </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />parseTime("04:28");<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Convert </code>input[type=number]<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to a number. This can be used to parse and validate<br />information entered by the user.</p><p class="my-3">When given an invalid value, this function will return </code>undefined<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">javascript<br />parseNumber("1");<br /></code>``<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:4"></template><template id="P:5"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"@stackup/form\",{\"href\":\"/package/%40stackup%2Fform\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@stackup/form\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"0.2.x || 0.3.x\"}]]}],[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"\u003e=16.8\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"27:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":18}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"@babel/core\",{\"href\":\"/package/%40babel%2Fcore\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@babel/core\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.11.0\"}]]}],[\"$\",\"$L5\",\"@stackup/form\",{\"href\":\"/package/%40stackup%2Fform\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@stackup/form\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.3.0\"}]]}],[\"$\",\"$L5\",\"@testing-library/jest-dom\",{\"href\":\"/package/%40testing-library%2Fjest-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L29\",\"$undefined\"]}],\"@testing-library/jest-dom\"]}],\"$L2a\"]}],\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2a:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.11.3\"}]\n2b:[\"$\",\"$L5\",\"@testing-library/react\",{\"href\":\"/package/%40testing-library%2Freact\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@testing-library/react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^11.0.4\"}]]}]\n2c:[\"$\",\"$L5\",\"@testing-library/react-hooks\",{\"href\":\"/package/%40testing-library%2Freact-hooks\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@testing-library/react-hooks\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.3.0\"}]]}]\n2d:[\"$\",\"$L5\",\"@types/jest-axe\",{\"href\":\"/package/%40types%2Fjest-axe\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/jest-axe\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.2.1\"}]]}]\n2e:[\"$\",\"$L5\",\"@types/react-dom\",{\"href\":\"/package/%40types%2Freact-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"@types/react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.9.8\"}]]}]\n2f:[\"$\",\"$L5\",\"babel-jest\",{\"href\":\"/package/babel-jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentCo"])</script><script>self.__next_f.push([1,"lor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"babel-jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^26.3.0\"}]]}]\n30:[\"$\",\"$L5\",\"doctoc\",{\"href\":\"/package/doctoc\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"doctoc\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.4.0\"}]]}]\n31:[\"$\",\"$L5\",\"jest\",{\"href\":\"/package/jest\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jest\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^26.4.2\"}]]}]\n32:[\"$\",\"$L5\",\"jest-axe\",{\"href\":\"/package/jest-axe\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"jest-axe\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.0\"}]]}]\n33:[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.13.1\"}]]}]\n34:[\"$\",\"$L5\",\"react-docgen-typescript\",{\"href\":\"/package/react-docgen-typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"widt"])</script><script>self.__next_f.push([1,"h\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-docgen-typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.20.1\"}]]}]\n35:[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.13.1\"}]]}]\n36:[\"$\",\"$L5\",\"react-test-renderer\",{\"href\":\"/package/react-test-renderer\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-test-renderer\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^16.13.1\"}]]}]\n37:[\"$\",\"$L5\",\"tsdx\",{\"href\":\"/package/tsdx\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tsdx\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.13.2\"}]]}]\n38:[\"$\",\"$L5\",\"tslib\",{\"href\":\"/package/tslib\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"tslib\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.0.1\"}]]}]\n39:[\"$\",\"$L5\",\"typescript\",{\"href\":\"/package/typescript\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono tex"])</script><script>self.__next_f.push([1,"t-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"typescript\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.3\"}]]}]\n"])</script><div hidden id="S:3"><div class="rounded-lg border p-3"><h4 class="mb-2 text-sm font-medium">Dist Tags</h4><div class="space-y-1"><div class="flex justify-between text-sm"><span class="text-muted-foreground">latest</span><a class="font-mono text-xs hover:underline" href="/package/@stackup/inputs/v/0.5.0">0.5.0</a></div><div class="flex justify-between text-sm"><span class="text-muted-foreground">next</span><a class="font-mono text-xs hover:underline" href="/package/@stackup/inputs/v/0.4.3-beta.1">0.4.3-beta.1</a></div></div></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:5","P:5")</script><script>$RC("B:1","S:1")</script></body></html>