Text Area

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/text-area
`

$3

`shell
yarn add @leafygreen-ui/text-area
`

$3

`shell
npm install @leafygreen-ui/text-area
`

Example

`js
import TextArea from '@leafygreen-ui/text-area';

const [value, setValue] = useState('');

return (
label="Text Area Label"
description="This is the description for the text area"
onChange={event => {
/ Something to handle the change event /
}}
value={value}
/>
);
`

Properties

| Prop | Type | Description | Default |
| ------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------- | -------- |
| id | string | id to describe the <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> element | |<br />| </code>darkMode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Determines whether or not the component will appear in dark mode. | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>label<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Label for </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | |<br />| </code>description<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>React.ReactNode<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Description below label | |<br />| </code>state<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'none'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>'valid'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">, </code>'error'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Determines the state of the </code><textarea><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>'none'<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>className<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | className applied to the container element | |<br />| </code>disabled<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Determines if the component is disabled | </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>onChange<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The event handler function for the 'onchange' event. Accepts the change event object as its argument and returns nothing. | |<br />| </code>onBlur<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>function<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | The event handler function for the 'onblur' event. Accepts the focus event object as its argument and returns nothing. | |</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Test Harnesses</h1></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">getTestUtils()</h2></p><p class="my-3"></code>getTestUtils()<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> is a util that allows consumers to reliably interact with </code>LG TextArea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> in a product test suite. If the </code>TextArea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> component cannot be found, an error will be thrown.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import TextArea, { getTestUtils } from '@leafygreen-ui/text-area';</p><p class="my-3">const utils = getTestUtils(lgId?: string); // lgId refers to the custom </code>data-lgid<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute passed to </code>TextArea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">. It defaults to 'lg-text_area' if left empty.<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Single </code>TextArea<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">tsx<br />import { render } from '@testing-library/react';<br />import TextArea, { getTestUtils } from '@leafygreen-ui/text-area';</p><p class="my-3">...</p><p class="my-3">test('text-area', () => {<br /> render(<TextArea label="label" value="text area" />);<br /> const { getInput, getInputValue } = getTestUtils();</p><p class="my-3"> expect(getInput()).toBeInTheDocument();<br /> expect(getInputValue()).toBe('text area');<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Multiple </code>TextArea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">'s</p><p class="my-3">When testing multiple </code>TextArea<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">'s it is recommended to add the custom </code>data-lgid<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> attribute to each </code>TextArea<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">tsx<br />import { render } from '@testing-library/react';<br />import TextArea, { getTestUtils } from '@leafygreen-ui/text-area';</p><p class="my-3">...</p><p class="my-3">test('text-area', () => {<br /> render(<br /> <><br /> <TextArea data-lgid="text-area-1" label="label 1" /><br /> <TextArea data-lgid="text-area-2" label="label 2" value="text area" /><br /> </>,<br /> );<br /> const utilsOne = getTestUtils('text-area-1'); // data-lgid<br /> const utilsTwo = getTestUtils('text-area-2'); // data-lgid</p><p class="my-3"> // First TextArea<br /> expect(utilsOne.getInput()).toBeInTheDocument();<br /> expect(utilsOne.getInputValue()).toBe('');</p><p class="my-3"> // Second TextArea<br /> expect(utilsTwo.getInput()).toBeInTheDocument();<br /> expect(utilsTwo.getInputValue()).toBe('text area');<br />});<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### TextArea with other LG form elements</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { render } from '@testing-library/react';<br />import Toggle, { getTestUtils as getToggleTestUtils } from '@leafygreen-ui/toggle';<br />import TextInput, { getTestUtils as getTextInputTestUtils } from '@leafygreen-ui/text-input';<br />import TextArea, { getTestUtils as getTextAreaTestUtils } from '@leafygreen-ui/text-area';</p><p class="my-3">...</p><p class="my-3">test('Form', () => {<br /> render(<br /> <Form><br /> <Toggle aria-label="Toggle label" /><br /> <TextInput label="TextInput label" /><br /> <TextArea label="TextArea label" /><br /> </Form>,<br /> );</p><p class="my-3"> const toggleInputUtils = getToggleTestUtils();<br /> const textInputUtils = getTextInputTestUtils();<br /> const textAreaUtils = getTextAreaTestUtils();</p><p class="my-3"> // LG Toggle<br /> expect(toggleInputUtils.getInput()).toBeInTheDocument();<br /> expect(toggleInputUtils.getInputValue()).toBe('false');</p><p class="my-3"> // LG TextInput<br /> expect(textInputUtils.getInput()).toBeInTheDocument();<br /> expect(textInputUtils.getInputValue()).toBe('');</p><p class="my-3"> // LG TextArea<br /> expect(textAreaUtils.getInput()).toBeInTheDocument();<br /> expect(textAreaUtils.getInputValue()).toBe('');<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">#### Elements</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />const {<br /> getInput,<br /> getLabel,<br /> getDescription,<br /> getErrorMessage,<br /> getInputValue,<br /> isDisabled,<br /> isError,<br />} = getTestUtils();<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">| Util | Description | Returns |<br />| ----------------- | ------------------------------------------ | ----------------------------- |<br />| </code>getInput<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns the input node | </code>HTMLButtonElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>getLabel<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns the label node | </code>HTMLButtonElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> \| </code>null<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>getDescription<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns the description node | </code>HTMLButtonElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> \| </code>null<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>getErrorMessage<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns the error message node | </code>HTMLButtonElement<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> \| </code>null<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>getInputValue<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns the input value | </code>string<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>isDisabled<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns whether the input is disabled | </code>boolean<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> |<br />| </code>isError<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | Returns whether the input state is </code>error<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> | </code>boolean` |<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,"25:[\"$\",\"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\"]}]\n26:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^9.3.1\"}]\n27:[\"$\",\"$L5\",\"@leafygreen-ui/icon\",{\"href\":\"/package/%40leafygreen-ui%2Ficon\",\"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\"]}],\"@leafygreen-ui/icon\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^14.8.0\"}]]}]\n28:[\"$\",\"$L5\",\"@leafygreen-ui/lib\",{\"href\":\"/package/%40leafygreen-ui%2Flib\",\"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\"]}],\"@leafygreen-ui/lib\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^15.7.0\"}]]}]\n29:[\"$\",\"$L5\",\"@leafygreen-ui/palette\",{\"href\":\"/package/%40leafygreen-ui%2Fpalette\",\"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\"]}],\"@leafygreen-ui/palette\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.2\"}]]}]\n2a:[\"$\",\"$L5\",\"@leafygreen-ui/tokens\",{\"href\":\"/package/%40leafygreen-ui%2Ftokens\",\"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\"]}],\"@leafygreen-ui/tokens\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.2.2\"}]]}]\n2b:[\"$\",\"$L5\",\"@leafygreen-ui/typography\",{\"href\":\"/package/%40leafygreen-"])</script><script>self.__next_f.push([1,"ui%2Ftypography\",\"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\"]}],\"@leafygreen-ui/typography\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^22.2.4\"}]]}]\n2c:[\"$\",\"$L5\",\"@lg-tools/test-harnesses\",{\"href\":\"/package/%40lg-tools%2Ftest-harnesses\",\"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\"]}],\"@lg-tools/test-harnesses\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.3.4\"}]]}]\n"])</script><script>self.__next_f.push([1,"2d:[\"$\",\"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\",\"@leafygreen-ui/leafygreen-provider\",{\"href\":\"/package/%40leafygreen-ui%2Fleafygreen-provider\",\"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\"]}],\"@leafygreen-ui/leafygreen-provider\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^5.0.0 || ^4.0.0 || ^3.2.0\"}]]}]]}]}]]}]\n"])</script><script>self.__next_f.push([1,"2e:[\"$\",\"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\":1}]]}]}],[\"$\",\"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\",\"@lg-tools/build\",{\"href\":\"/package/%40lg-tools%2Fbuild\",\"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\"]}],\"@lg-tools/build\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^0.9.0\"}]]}]]}]}]]}]\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>