react-typeahead

> A typeahead/autocomplete component for React

react-typeahead is a javascript library that provides a react-based
typeahead, or autocomplete text entry, as well as a "typeahead tokenizer",
a typeahead that allows you to select multiple results.

Usage

For a typeahead input:

``javascript
var Typeahead = require('react-typeahead').Typeahead;
React.render(
options={['John', 'Paul', 'George', 'Ringo']}
maxVisible={2}
/>
);
`

For a tokenizer typeahead input:

`javascript
var Tokenizer = require('react-typeahead').Tokenizer;
React.render(
options={['John', 'Paul', 'George', 'Ringo']}
onTokenAdd={function(token) {
console.log('token added: ', token);
}}
/>
);
`

Examples

* [Basic Typeahead with Topcoat][1]
* [Typeahead Tokenizer with Topcoat][2]
* [Typeahead Tokenizer with simple styling][3]

![](https://i.cloudup.com/CeLPJjWvFK.gif)

[1]: http://wookiehangover.github.com/react-typeahead/examples/typeahead-topcoat.html
[2]: http://wookiehangover.github.com/react-typeahead/examples/tokenizer-topcoat.html
[3]: http://wookiehangover.github.com/react-typeahead/examples/TypeaheadTokenizer-simple.html
[4]: http://blog.npmjs.org/post/85484771375/how-to-install-npm

API

$3

Type: React Component

Basic typeahead input and results list.

#### props.options

Type: Array
Default: []

An array supplied to the filtering function. Can be a list of strings or a list of arbitrary objects. In the latter case, filterOption and displayOption should be provided.

#### props.defaultValue

Type: String

A default value used when the component has no value. If it matches any options a option list will show.

#### props.value

Type: String

Specify a value for the text input.

#### props.maxVisible

Type: Number

Limit the number of options rendered in the results list.

#### props.resultsTruncatedMessage

Type: String

If maxVisible is set, display this custom message at the bottom of the list of results when the result are truncated.

#### props.customClasses

Type: Object
Allowed Keys: input, results, listItem, listAnchor, hover, typeahead, resultsTruncated

An object containing custom class names for child elements. Useful for
integrating with 3rd party UI kits.

#### props.placeholder

Type: String

Placeholder text for the typeahead input.

#### props.disabled

Type: Boolean

Set to true to add disable attribute in the or <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element</p><p class="my-3">#### props.textarea</p><p class="my-3">Type: </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Set to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to use a </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element rather than an </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element</p><p class="my-3">#### props.inputProps</p><p class="my-3">Type: </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Props to pass directly to the </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element.</p><p class="my-3">#### props.onKeyDown</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>keyDown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onKeyPress</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>keyPress<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onKeyUp</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>keyUp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onBlur</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>blur<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onFocus</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onOptionSelected</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler triggered whenever a user picks an option.</p><p class="my-3">#### props.filterOption</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function to filter the provided </code>options<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> based on the current input value. For each option, receives </code>(inputValue, option)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. If not supplied, defaults to <a href="https://github.com/mattyork/fuzzy" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">fuzzy string matching</a>.</p><p class="my-3">If provided as a string, it will interpret it as a field name and fuzzy filter on that field of each option object.</p><p class="my-3">#### props.displayOption</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function to map an option onto a string for display in the list. Receives </code>(option, index)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> where index is relative to the results list, not all the options. Must return a string.</p><p class="my-3">If provided as a string, it will interpret it as a field name and use that field from each option object.</p><p class="my-3">#### props.formInputOption</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function to map an option onto a string to include in HTML forms (see </code>props.name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). Receives </code>(option)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as arguments. Must return a string.</p><p class="my-3">If specified as a string, it will interpret it as a field name and use that field from each option object.</p><p class="my-3">If not specified, it will fall back onto the semantics described in </code>props.displayOption<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">This option is ignored if you don't specify the </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop. It is required if you both specify the </code>name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> prop and are using non-string options. It is optional otherwise.</p><p class="my-3">#### props.defaultClassNames</p><p class="my-3">Type: </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Default: true</p><p class="my-3">If false, the default classNames are removed from the typeahead.</p><p class="my-3">#### props.customListComponent</p><p class="my-3">Type: </code>React Component<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A React Component that renders the list of typeahead results. This replaces the default list of results.</p><p class="my-3">This component receives the following props :</p><p class="my-3">##### Passed through</p><p class="my-3">- </code>props.displayOptions<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>props.customClasses<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />- </code>props.onOptionSelected<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">##### Created or modified<br />- </code>props.options<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - This is the Typeahead's </code>props.options<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> filtered and limited to </code>Typeahead.props.maxVisible<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />- </code>props.selectionIndex<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br /> - The index of the highlighted option for rendering</p><p class="my-3">#### props.showOptionsWhenEmpty</p><p class="my-3">Type: </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Default: false</p><p class="my-3">If true, options will still be rendered when there is no value.</p><p class="my-3">#### props.allowCustomValues</p><p class="my-3">Type: </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If true, custom tags can be added without a matching typeahead selection</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### typeahead.focus</p><p class="my-3">Focuses the typeahead input.</p><p class="my-3">---</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Type: React Component</p><p class="my-3">Typeahead component that allows for multiple options to be selected.</p><p class="my-3">#### props.options</p><p class="my-3">Type: </code>Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Default: []</p><p class="my-3">An array supplied to the filter function.</p><p class="my-3">#### props.maxVisible</p><p class="my-3">Type: </code>Number<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Limit the number of options rendered in the results list.</p><p class="my-3">#### props.resultsTruncatedMessage</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">If </code>maxVisible<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is set, display this custom message at the bottom of the list of results when the result are truncated.</p><p class="my-3">#### props.name</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The name for HTML forms to be used for submitting the tokens' values array.</p><p class="my-3">#### props.customClasses</p><p class="my-3">Type: </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Allowed Keys: </code>input<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>results<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>listItem<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>listAnchor<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>hover<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>typeahead<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>resultsTruncated<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>token<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">An object containing custom class names for child elements. Useful for<br />integrating with 3rd party UI kits.</p><p class="my-3">#### props.placeholder</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Placeholder text for the typeahead input.</p><p class="my-3">#### props.disabled</p><p class="my-3">Type: </code>Boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Set to </code>true<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to add disable attribute in the </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element</p><p class="my-3">#### props.inputProps</p><p class="my-3">Type: </code>Object<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Props to pass directly to the </code><input><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element.</p><p class="my-3">#### props.onKeyDown</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>keyDown<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onKeyPress</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>keyPress<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onKeyUp</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>keyUp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onBlur</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>blur<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.onFocus</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler for the </code>focus<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> event on the typeahead input.</p><p class="my-3">#### props.defaultSelected</p><p class="my-3">Type: </code>Array<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A set of values of tokens to be loaded on first render.</p><p class="my-3">#### props.onTokenRemove</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Params: </code>(removedToken)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler triggered whenever a token is removed.</p><p class="my-3">#### props.onTokenAdd</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Params: </code>(addedToken)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">Event handler triggered whenever a token is added.</p><p class="my-3">#### props.displayOption</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function to map an option onto a string for display in the list. Receives </code>(option, index)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> where index is relative to the results list, not all the options. Can either return a string or a React component.</p><p class="my-3">If provided as a string, it will interpret it as a field name and use that field from each option object.</p><p class="my-3">#### props.filterOption</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function to filter the provided </code>options<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> based on the current input value. For each option, receives </code>(inputValue, option)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. If not supplied, defaults to <a href="https://github.com/mattyork/fuzzy" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">fuzzy string matching</a>.</p><p class="my-3">If provided as a string, it will interpret it as a field name and use that field from each option object.</p><p class="my-3">#### props.searchOptions</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function to filter, map, and/or sort the provided </code>options<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> based on the current input value.<br />Receives </code>(inputValue, options)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.<br />If not supplied, defaults to <a href="https://github.com/mattyork/fuzzy" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">fuzzy string matching</a>.</p><p class="my-3">Note: the function can be used to store other information besides the string in the internal state of the component.<br />Make sure to use the </code>displayOption<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>inputDisplayOption<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, and </code>formInputOption<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> props to extract/generate the correct format of data that each expects if you do this.</p><p class="my-3">#### props.inputDisplayOption</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function that maps the internal state of the visible options into the value stored in the text value field of the visible input when an option is selected.</p><p class="my-3">Receives </code>(option)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">If provided as a string, it will interpret it as a field name and use that field from each option object.</p><p class="my-3">If no value is set, the input will be set using </code>displayOption<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> when an option is selected.</p><p class="my-3">#### props.formInputOption</p><p class="my-3">Type: </code>String<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> or </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function to map an option onto a string to include in HTML forms as a hidden field (see </code>props.name<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">). Receives </code>(option)<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> as arguments. Must return a string.</p><p class="my-3">If specified as a string, it will interpret it as a field name and use that field from each option object.</p><p class="my-3">If not specified, it will fall back onto the semantics described in </code>props.displayOption<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3">#### props.defaultClassNames</p><p class="my-3">Type: </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Default: true</p><p class="my-3">If false, the default classNames are removed from the tokenizer and the typeahead.</p><p class="my-3">#### props.showOptionsWhenEmpty</p><p class="my-3">Type: </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><br />Default: false</p><p class="my-3">If true, options will still be rendered when there is no value.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### tokenizer.focus</p><p class="my-3">Focuses the tokenizer input.</p><p class="my-3">#### tokenizer.getSelectedTokens</p><p class="my-3">Type: </code>Function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">A function to return the currently selected tokens.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Developing</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">You will need </code>npm<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to develop on react-typeahead. [Installing npm][4].</p><p class="my-3">Once that's done, to get started, run </code>npm install<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in your checkout directory.<br />This will install all the local development dependences, such as </code>gulp<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> and </code>mocha<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">react-typeahead uses mocha for unit tests and gulp for running them. Large changes should<br />include unittests.</p><p class="my-3">After updating or creating new tests, run </code>npm run-script build-test<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> to regenerate the<br />test package.</p><p class="my-3">Once that's done, running the tests is easy with </code>gulp<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"><br />> gulp test<br />[00:17:25] Using gulpfile ~/src/react-typeahead/gulpfile.js<br />[00:17:25] Starting 'test'...</p><p class="my-3"><br /> ․․․․․․․․․․․․․․․</p><p class="my-3"> 15 passing (43ms)</p><p class="my-3">[00:17:25] Finished 'test' after 448 ms<br />[00:17:25] Starting 'default'...<br />[00:17:25] Finished 'default' after 6.23 μs<br /></code>``</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">Basically, fork the repository and send a pull request. It can be difficult to review these, so<br />here are some general rules to follow for getting your PR accepted more quickly:</p><p class="my-3">- All new properties and exposed component function should be documented in the README.md<br />- Break your changes into smaller, easy to understand commits.<br />- Send separate PRs for each commit when possible.<br />- Feel free to rebase, merge, and rewrite commits to make them more readible.<br />- Add comments explaining anything that's not painfully obvious.<br />- Add unittests for your change if possible.</p><p class="my-3">[reactecf]: https://facebook.github.io/react/tips/expose-component-functions.html<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:3"></template><template id="P:4"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.1.0\"}]\n28:[\"$\",\"$L5\",\"prop-types\",{\"href\":\"/package/prop-types\",\"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\"]}],\"prop-types\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^15.5.10\"}]]}]\n"])</script><script>self.__next_f.push([1,"29:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"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-users h-4 w-4\",\"children\":[[\"$\",\"path\",\"1yyitq\",{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"}],[\"$\",\"circle\",\"nufk8\",{\"cx\":\"9\",\"cy\":\"7\",\"r\":\"4\"}],[\"$\",\"path\",\"kshegd\",{\"d\":\"M22 21v-2a4 4 0 0 0-3-3.87\"}],[\"$\",\"path\",\"1da9ce\",{\"d\":\"M16 3.13a4 4 0 0 1 0 7.75\"}],\"$undefined\"]}],\"Peer 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\":1}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$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= 0.14\"}]]}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2a:[\"$\",\"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\":14}]]}]}],[\"$\",\"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-preset-react\",{\"href\":\"/package/babel-preset-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\"]}],\"babel-preset-react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.5.0\"}]]}],[\"$\",\"$L5\",\"babelify\",{\"href\":\"/package/babelify\",\"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\"]}],\"babelify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^7.2.0\"}]]}],[\"$\",\"$L5\",\"browserify\",{\"href\":\"/package/browserify\",\"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\":[\"$L2c\",\"$undefined\"]}],\"browserify\"]}],\"$L2d\"]}],\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2c:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n2d:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^8.0.2\"}]\n2e:[\"$\",\"$L5\",\"chai\",{\"href\":\"/package/chai\",\"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\"]}],\"chai\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.9.1\"}]]}]\n2f:[\"$\",\"$L5\",\"es5-shim\",{\"href\":\"/package/es5-shim\",\"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\"]}],\"es5-shim\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.0.1\"}]]}]\n30:[\"$\",\"$L5\",\"gulp\",{\"href\":\"/package/gulp\",\"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\"]}],\"gulp\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.8.7\"}]]}]\n31:[\"$\",\"$L5\",\"gulp-babel\",{\"href\":\"/package/gulp-babel\",\"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\"]}],\"gulp-babel\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^6.1.2\"}]]}]\n32:[\"$\",\"$L5\",\"gulp-mocha-phantomjs\",{\"href\":\"/package/gulp-mocha-phantomjs\",\"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-op"])</script><script>self.__next_f.push([1,"acity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"gulp-mocha-phantomjs\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.8.1\"}]]}]\n33:[\"$\",\"$L5\",\"literalify\",{\"href\":\"/package/literalify\",\"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\"]}],\"literalify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.4.0\"}]]}]\n34:[\"$\",\"$L5\",\"lodash\",{\"href\":\"/package/lodash\",\"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\"]}],\"lodash\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.4.1\"}]]}]\n35:[\"$\",\"$L5\",\"mocha\",{\"href\":\"/package/mocha\",\"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\"]}],\"mocha\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.21.4\"}]]}]\n36:[\"$\",\"$L5\",\"react-tools\",{\"href\":\"/package/react-tools\",\"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-tools\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.13.3\"}]]}]\n37:[\"$\",\"$L5\",\"sinon\",{\"href\":\"/package/sinon\",\"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 lu"])</script><script>self.__next_f.push([1,"cide-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\"]}],\"sinon\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^1.10.3\"}]]}]\n38:[\"$\",\"$L5\",\"watchify\",{\"href\":\"/package/watchify\",\"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\"]}],\"watchify\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.2.1\"}]]}]\n"])</script><div hidden id="S:3"><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=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-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:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>