From 70fb21269a49f35387b2c521aac2512727aec002 Mon Sep 17 00:00:00 2001
From: Lee White <leewhite128@gmail.com>
Date: Thu, 16 Jun 2022 15:42:33 -0700
Subject: [PATCH] feat: allow textarea vertical resize, create
 @twilio-paste/react-textarea-autosize (#2454)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .changeset/late-rings-poke.md                 |    6 +
 .changeset/slow-buttons-film.md               |    6 +
 .codesandbox/ci.json                          |    1 +
 .../textarea/__tests__/textarea.test.tsx      |   28 +-
 .../components/textarea/package.json          |    5 +-
 .../components/textarea/src/TextArea.tsx      |   12 +-
 .../textarea/stories/textarea.stories.tsx     |  139 +-
 packages/paste-core/core-bundle/.gitignore    |    1 +
 packages/paste-core/core-bundle/package.json  |    1 +
 .../src/react-textarea-autosize-library.tsx   |    1 +
 .../react-textarea-autosize/README.md         |    3 +
 .../react-textarea-autosize/build.js          |    3 +
 .../react-textarea-autosize/package.json      |   39 +
 .../__snapshots__/index.test.tsx.snap         |   15 +
 .../src/__tests__/index.test.tsx              |  142 ++
 .../src/calculateNodeHeight.ts                |   50 +
 .../src/forceHiddenStyles.ts                  |   17 +
 .../react-textarea-autosize/src/getHeight.ts  |   13 +
 .../src/getSizingData.ts                      |   87 +
 .../react-textarea-autosize/src/index.tsx     |   94 +
 .../src/useHiddenTextarea.tsx                 |   24 +
 .../src/useWindowResizeListener.tsx           |   18 +
 .../react-textarea-autosize/tsconfig.json     |    8 +
 .../src/pages/components/textarea/index.mdx   |   13 +
 .../__fixtures__/random_package/src/index.tsx |    4 +-
 .../compiledImports.test.ts.snap              | 1984 +++++++++++++----
 tools/build/__tests__/compiledImports.test.ts |    1 -
 yarn.lock                                     |   92 +-
 28 files changed, 2258 insertions(+), 549 deletions(-)
 create mode 100644 .changeset/late-rings-poke.md
 create mode 100644 .changeset/slow-buttons-film.md
 create mode 100644 packages/paste-core/core-bundle/src/react-textarea-autosize-library.tsx
 create mode 100644 packages/paste-libraries/react-textarea-autosize/README.md
 create mode 100644 packages/paste-libraries/react-textarea-autosize/build.js
 create mode 100644 packages/paste-libraries/react-textarea-autosize/package.json
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/__tests__/index.test.tsx
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/calculateNodeHeight.ts
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/forceHiddenStyles.ts
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/getHeight.ts
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/getSizingData.ts
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/index.tsx
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/useHiddenTextarea.tsx
 create mode 100644 packages/paste-libraries/react-textarea-autosize/src/useWindowResizeListener.tsx
 create mode 100644 packages/paste-libraries/react-textarea-autosize/tsconfig.json

diff --git a/.changeset/late-rings-poke.md b/.changeset/late-rings-poke.md
new file mode 100644
index 0000000000..6da9e43fc0
--- /dev/null
+++ b/.changeset/late-rings-poke.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/textarea': major
+'@twilio-paste/core': major
+---
+
+[Textarea] Update textarea to use @twilio-paste/react-autosize-textarea library and add the resize prop which allows users to resize the textarea height.
diff --git a/.changeset/slow-buttons-film.md b/.changeset/slow-buttons-film.md
new file mode 100644
index 0000000000..a64ad36720
--- /dev/null
+++ b/.changeset/slow-buttons-film.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': major
+'@twilio-paste/react-textarea-autosize-library': major
+---
+
+[react-textarea-autosize-library] add react-textarea-autosize library
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index a89a9de051..cc85f6f33f 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -51,6 +51,7 @@
     "/packages/paste-core/components/paragraph",
     "/packages/paste-core/components/popover",
     "/packages/paste-core/components/radio-group",
+    "/packages/paste-libraries/react-textarea-autosize",
     "/packages/paste-libraries/reakit",
     "/packages/paste-core/components/screen-reader-only",
     "/packages/paste-core/components/select",
diff --git a/packages/paste-core/components/textarea/__tests__/textarea.test.tsx b/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
index 347dda2ba4..2e88e8b809 100644
--- a/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
+++ b/packages/paste-core/components/textarea/__tests__/textarea.test.tsx
@@ -6,7 +6,7 @@ import {HelpText} from '@twilio-paste/help-text';
 // @ts-ignore typescript doesn't like js imports
 import axe from '../../../../../.jest/axe-helper';
 import {TextArea} from '../src';
-import {CustomizedTextarea} from '../stories/textarea.stories';
+import {CustomizedTextarea, MultipleTextareas} from '../stories/textarea.stories';
 
 const NOOP = (): void => {};
 
@@ -23,6 +23,11 @@ describe('TextArea render', () => {
     expect(getByRole('textbox')).not.toBeNull();
   });
 
+  it('should render a hidden textarea', () => {
+    render(<TextArea {...initialProps} />);
+    expect(screen.getAllByRole('textbox', {hidden: true})).toHaveLength(2);
+  });
+
   it('should render as readOnly', () => {
     const {getByRole} = render(<TextArea {...initialProps} readOnly />);
     expect(getByRole('textbox').getAttribute('aria-readOnly')).toBeTruthy();
@@ -73,6 +78,27 @@ describe('TextArea render', () => {
   });
 });
 
+describe('Multiple textareas', () => {
+  it('handles adding and removing multiple textareas', () => {
+    render(<MultipleTextareas />);
+    const pushButton = screen.getByRole('button', {name: 'Push textarea'});
+    const popButton = screen.getByRole('button', {name: 'Pop textarea'});
+    const toggleButton = screen.getByRole('button', {name: 'Toggle textarea visibility'});
+
+    expect(screen.getAllByRole('textbox', {hidden: true})).toHaveLength(2);
+
+    fireEvent.click(pushButton);
+    fireEvent.click(pushButton);
+    expect(screen.getAllByRole('textbox', {hidden: true})).toHaveLength(6);
+
+    fireEvent.click(popButton);
+    expect(screen.getAllByRole('textbox', {hidden: true})).toHaveLength(4);
+
+    fireEvent.click(toggleButton);
+    expect(screen.queryAllByRole('textbox', {hidden: true})).toHaveLength(0);
+  });
+});
+
 describe('Textarea event handlers', () => {
   it('Should call the appropriate event handlers', () => {
     const onChangeMock: jest.Mock = jest.fn();
diff --git a/packages/paste-core/components/textarea/package.json b/packages/paste-core/components/textarea/package.json
index 25f5c5e514..bbf092a602 100644
--- a/packages/paste-core/components/textarea/package.json
+++ b/packages/paste-core/components/textarea/package.json
@@ -24,13 +24,11 @@
     "clean": "rm -rf ./dist",
     "tsc": "tsc"
   },
-  "dependencies": {
-    "react-autosize-textarea": "7.1.0"
-  },
   "peerDependencies": {
     "@twilio-paste/box": "^6.0.0",
     "@twilio-paste/design-tokens": "^7.0.0",
     "@twilio-paste/input-box": "^6.0.0",
+    "@twilio-paste/react-textarea-autosize-library": "^0.0.1",
     "@twilio-paste/style-props": "^5.0.0",
     "@twilio-paste/styling-library": "^1.0.0",
     "@twilio-paste/theme": "^7.0.0",
@@ -44,6 +42,7 @@
     "@twilio-paste/box": "^6.0.0",
     "@twilio-paste/design-tokens": "^7.1.1",
     "@twilio-paste/input-box": "^6.0.0",
+    "@twilio-paste/react-textarea-autosize-library": "^0.0.1",
     "@twilio-paste/style-props": "^5.0.0",
     "@twilio-paste/styling-library": "^1.0.0",
     "@twilio-paste/theme": "^7.0.0",
diff --git a/packages/paste-core/components/textarea/src/TextArea.tsx b/packages/paste-core/components/textarea/src/TextArea.tsx
index 95387535c4..64f33be29c 100644
--- a/packages/paste-core/components/textarea/src/TextArea.tsx
+++ b/packages/paste-core/components/textarea/src/TextArea.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import TextareaAutosize from 'react-autosize-textarea';
+import TextareaAutosize from '@twilio-paste/react-textarea-autosize-library';
 import {styled, css} from '@twilio-paste/styling-library';
 import {safelySpreadBoxProps, getCustomElementStyles} from '@twilio-paste/box';
 import type {BoxProps} from '@twilio-paste/box';
@@ -20,11 +20,13 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
   placeholder?: string;
   readOnly?: boolean;
   required?: boolean;
+  resize?: 'none' | 'vertical';
   size?: never;
   style?: never;
   variant?: TextAreaVariants;
   width?: never;
 }
+
 // @ts-expect-error can't work out how to stop the styled div color prop from emotion clashing with our color style prop in BoxProps
 const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
   (props) =>
@@ -40,13 +42,13 @@ const TextAreaElement = styled(TextareaAutosize)<TextAreaProps>(
       fontSize: 'fontSize30',
       fontWeight: 'fontWeightMedium',
       lineHeight: 'lineHeight20',
-      maxHeight: 'size30',
+      maxHeight: props.resize === 'vertical' ? 'none' : 'size30',
       outline: 'none',
       paddingBottom: 'space30',
       paddingLeft: 'space40',
       paddingRight: 'space40',
       paddingTop: 'space30',
-      resize: 'vertical',
+      resize: props.resize,
       width: '100%',
 
       '&::placeholder': {
@@ -80,6 +82,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       insertAfter,
       readOnly,
       variant,
+      resize = 'none',
       // size, height and width should not be passed down
       size,
       height,
@@ -100,7 +103,6 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
       >
         <TextAreaElement
           {...safelySpreadBoxProps(props)}
-          async
           aria-invalid={hasError}
           aria-readonly={readOnly}
           disabled={disabled}
@@ -108,7 +110,9 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
           readOnly={readOnly}
           ref={ref}
           rows={3}
+          minRows={3}
           spellCheck
+          resize={resize}
           variant={variant}
         >
           {children}
diff --git a/packages/paste-core/components/textarea/stories/textarea.stories.tsx b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
index 4781942690..53d620e92a 100644
--- a/packages/paste-core/components/textarea/stories/textarea.stories.tsx
+++ b/packages/paste-core/components/textarea/stories/textarea.stories.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {useUID} from '@twilio-paste/uid-library';
 import {action} from '@storybook/addon-actions';
 import {Anchor} from '@twilio-paste/anchor';
+import {Button} from '@twilio-paste/button';
 import {Box} from '@twilio-paste/box';
 import {Text} from '@twilio-paste/text';
 import {InformationIcon} from '@twilio-paste/icons/esm/InformationIcon';
@@ -18,23 +19,77 @@ export default {
   component: TextArea,
 };
 
-export const Textarea = (): React.ReactNode => {
+export const Textarea = (): React.ReactElement => {
   const uid = useUID();
   return (
     <>
       <Label htmlFor={uid}>Label</Label>
       <TextArea
         id={uid}
+        aria-describedby={`help-text-${uid}`}
         placeholder="Placeholder"
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
       />
-      <HelpText>Info that helps a user with this field.</HelpText>
+      <HelpText id={`help-text-${uid}`}>Info that helps a user with this field.</HelpText>
     </>
   );
 };
 
+export const MultipleTextareas = (): React.ReactElement => {
+  const [shouldDisplayTextareas, setShouldDisplayTextareas] = React.useState(true);
+  const [textareas, setTextareas] = React.useState<React.ReactNode[]>([]);
+
+  const push = (): void => {
+    setTextareas([...textareas, <Textarea key={textareas.length + 1} />]);
+  };
+
+  const pop = (): void => {
+    const updated = [...textareas];
+    updated.shift();
+    setTextareas(updated);
+  };
+
+  React.useEffect(() => {
+    push();
+  }, []);
+
+  return (
+    <>
+      {shouldDisplayTextareas && (
+        <Box display="flex" flexDirection="column" rowGap="space50" paddingBottom="space100">
+          {textareas.map((textarea, i) => (
+            <Box key={i}>{textarea}</Box>
+          ))}
+        </Box>
+      )}
+      <Box display="flex" columnGap="space100" flexDirection="row">
+        <Button
+          variant="secondary"
+          onClick={() => {
+            setShouldDisplayTextareas(!shouldDisplayTextareas);
+          }}
+        >
+          Toggle textarea visibility
+        </Button>
+        <Button variant="secondary" onClick={push}>
+          Push textarea
+        </Button>
+        <Button variant="secondary" onClick={pop}>
+          Pop textarea
+        </Button>
+      </Box>
+    </>
+  );
+};
+
+MultipleTextareas.story = {
+  parameters: {
+    chromatic: {disableSnapshot: true},
+  },
+};
+
 export const TextareaInverse = (): React.ReactNode => {
   const uid = useUID();
   return (
@@ -45,12 +100,15 @@ export const TextareaInverse = (): React.ReactNode => {
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
         variant="inverse"
       />
-      <HelpText variant="inverse">Info that helps a user with this field.</HelpText>
+      <HelpText variant="inverse" id={`help-text-${uid}`}>
+        Info that helps a user with this field.
+      </HelpText>
     </Box>
   );
 };
@@ -59,6 +117,31 @@ TextareaInverse.story = {
   name: 'Textarea - inverse',
 };
 
+export const TextareaResizeVertical = (): React.ReactNode => {
+  const uid = useUID();
+  return (
+    <>
+      <Label htmlFor={uid} required>
+        Label
+      </Label>
+      <TextArea
+        id={uid}
+        placeholder="Placeholder"
+        aria-describedby={`help-text-${uid}`}
+        resize="vertical"
+        onChange={action('handleFocus')}
+        onFocus={action('handleFocus')}
+        onBlur={action('handleBlur')}
+      />
+      <HelpText id={`help-text-${uid}`}>Info that helps a user with this field.</HelpText>
+    </>
+  );
+};
+
+TextareaResizeVertical.story = {
+  name: 'Textarea - Resize Vertical',
+};
+
 export const TextareaRequired = (): React.ReactNode => {
   const uid = useUID();
   return (
@@ -70,11 +153,12 @@ export const TextareaRequired = (): React.ReactNode => {
         id={uid}
         placeholder="Placeholder"
         required
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
       />
-      <HelpText>Info that helps a user with this field.</HelpText>
+      <HelpText id={`help-text-${uid}`}>Info that helps a user with this field.</HelpText>
     </>
   );
 };
@@ -94,12 +178,15 @@ export const TextareaRequiredInverse = (): React.ReactNode => {
         id={uid}
         placeholder="Placeholder"
         required
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
         variant="inverse"
       />
-      <HelpText variant="inverse">Info that helps a user with this field.</HelpText>
+      <HelpText variant="inverse" id={`help-text-${uid}`}>
+        Info that helps a user with this field.
+      </HelpText>
     </Box>
   );
 };
@@ -117,11 +204,14 @@ export const TextareaError = (): React.ReactNode => {
         id={uid}
         placeholder="Placeholder"
         hasError
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
       />
-      <HelpText variant="error">Error info. Explains why the input has an error.</HelpText>
+      <HelpText variant="error" id={`help-text-${uid}`}>
+        Error info. Explains why the input has an error.
+      </HelpText>
     </>
   );
 };
@@ -141,12 +231,15 @@ export const TextareaErrorInverse = (): React.ReactNode => {
         id={uid}
         placeholder="Placeholder"
         hasError
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
         variant="inverse"
       />
-      <HelpText variant="error_inverse">Error info. Explains why the input has an error.</HelpText>
+      <HelpText variant="error_inverse" id={`help-text-${uid}`}>
+        Error info. Explains why the input has an error.
+      </HelpText>
     </Box>
   );
 };
@@ -165,13 +258,14 @@ export const TextareaDisabled = (): React.ReactNode => {
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        aria-describedby={`help-text-${uid}`}
         value="Disabled text content..."
         disabled
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
       />
-      <HelpText>Info that helps a user with this field.</HelpText>
+      <HelpText id={`help-text-${uid}`}>Info that helps a user with this field.</HelpText>
     </>
   );
 };
@@ -190,6 +284,7 @@ export const TextareaDisabledInverse = (): React.ReactNode => {
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        aria-describedby={`help-text-${uid}`}
         value="Disabled text content..."
         disabled
         onChange={action('handleFocus')}
@@ -197,7 +292,9 @@ export const TextareaDisabledInverse = (): React.ReactNode => {
         onBlur={action('handleBlur')}
         variant="inverse"
       />
-      <HelpText variant="inverse">Info that helps a user with this field.</HelpText>
+      <HelpText variant="inverse" id={`help-text-${uid}`}>
+        Info that helps a user with this field.
+      </HelpText>
     </Box>
   );
 };
@@ -215,11 +312,12 @@ export const TextareaReadOnly = (): React.ReactNode => {
         id={uid}
         placeholder="Placeholder"
         readOnly
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
       />
-      <HelpText>Info that helps a user with this field.</HelpText>
+      <HelpText id={`help-text-${uid}`}>Info that helps a user with this field.</HelpText>
     </>
   );
 };
@@ -239,12 +337,15 @@ export const TextareaReadOnlyInverse = (): React.ReactNode => {
         id={uid}
         placeholder="Placeholder"
         readOnly
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
         variant="inverse"
       />
-      <HelpText variant="inverse">Info that helps a user with this field.</HelpText>
+      <HelpText variant="inverse" id={`help-text-${uid}`}>
+        Info that helps a user with this field.
+      </HelpText>
     </Box>
   );
 };
@@ -261,6 +362,7 @@ export const TextareaInsertBeforeAndAfter = (): React.ReactNode => {
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
@@ -275,7 +377,7 @@ export const TextareaInsertBeforeAndAfter = (): React.ReactNode => {
           </Anchor>
         }
       />
-      <HelpText>Info that helps a user with this field.</HelpText>
+      <HelpText id={`help-text-${uid}`}>Info that helps a user with this field.</HelpText>
     </>
   );
 };
@@ -294,6 +396,7 @@ export const TextareaDisabledInsertBeforeAndAfter = (): React.ReactNode => {
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
@@ -309,7 +412,7 @@ export const TextareaDisabledInsertBeforeAndAfter = (): React.ReactNode => {
         }
         disabled
       />
-      <HelpText>Info that helps a user with this field.</HelpText>
+      <HelpText id={`help-text-${uid}`}>Info that helps a user with this field.</HelpText>
     </>
   );
 };
@@ -328,6 +431,7 @@ export const TextareaInsertBeforeAndAfterInverse = (): React.ReactNode => {
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
@@ -343,7 +447,9 @@ export const TextareaInsertBeforeAndAfterInverse = (): React.ReactNode => {
         }
         variant="inverse"
       />
-      <HelpText variant="inverse">Info that helps a user with this field.</HelpText>
+      <HelpText variant="inverse" id={`help-text-${uid}`}>
+        Info that helps a user with this field.
+      </HelpText>
     </Box>
   );
 };
@@ -362,6 +468,7 @@ export const TextareaDisabledInsertBeforeAndAfterInverse = (): React.ReactNode =
       <TextArea
         id={uid}
         placeholder="Placeholder"
+        aria-describedby={`help-text-${uid}`}
         onChange={action('handleFocus')}
         onFocus={action('handleFocus')}
         onBlur={action('handleBlur')}
@@ -378,7 +485,9 @@ export const TextareaDisabledInsertBeforeAndAfterInverse = (): React.ReactNode =
         variant="inverse"
         disabled
       />
-      <HelpText variant="inverse">Info that helps a user with this field.</HelpText>
+      <HelpText variant="inverse" id={`help-text-${uid}`}>
+        Info that helps a user with this field.
+      </HelpText>
     </Box>
   );
 };
diff --git a/packages/paste-core/core-bundle/.gitignore b/packages/paste-core/core-bundle/.gitignore
index 6dcdb1624d..d487154c15 100644
--- a/packages/paste-core/core-bundle/.gitignore
+++ b/packages/paste-core/core-bundle/.gitignore
@@ -47,6 +47,7 @@
 /paragraph
 /popover
 /radio-group
+/react-textarea-autosize-library
 /reakit-library
 /screen-reader-only
 /select
diff --git a/packages/paste-core/core-bundle/package.json b/packages/paste-core/core-bundle/package.json
index b9f8cc8360..7c807b369f 100644
--- a/packages/paste-core/core-bundle/package.json
+++ b/packages/paste-core/core-bundle/package.json
@@ -71,6 +71,7 @@
     "@twilio-paste/paragraph": "^6.0.0",
     "@twilio-paste/popover": "^9.0.1",
     "@twilio-paste/radio-group": "^9.0.0",
+    "@twilio-paste/react-textarea-autosize-library": "^0.0.1",
     "@twilio-paste/reakit-library": "^0.8.5",
     "@twilio-paste/screen-reader-only": "^9.0.0",
     "@twilio-paste/select": "^8.0.0",
diff --git a/packages/paste-core/core-bundle/src/react-textarea-autosize-library.tsx b/packages/paste-core/core-bundle/src/react-textarea-autosize-library.tsx
new file mode 100644
index 0000000000..6ff2277a7a
--- /dev/null
+++ b/packages/paste-core/core-bundle/src/react-textarea-autosize-library.tsx
@@ -0,0 +1 @@
+export * from '@twilio-paste/react-textarea-autosize-library';
diff --git a/packages/paste-libraries/react-textarea-autosize/README.md b/packages/paste-libraries/react-textarea-autosize/README.md
new file mode 100644
index 0000000000..177f8fa3d3
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/README.md
@@ -0,0 +1,3 @@
+# Paste react-textarea-autosize
+
+Paste adaptation of [react-textarea-autosize](https://github.com/Andarist/react-textarea-autosize)
diff --git a/packages/paste-libraries/react-textarea-autosize/build.js b/packages/paste-libraries/react-textarea-autosize/build.js
new file mode 100644
index 0000000000..f4c531c5dc
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/build.js
@@ -0,0 +1,3 @@
+const {build} = require('../../../tools/build/esbuild');
+
+build(require('./package.json'));
diff --git a/packages/paste-libraries/react-textarea-autosize/package.json b/packages/paste-libraries/react-textarea-autosize/package.json
new file mode 100644
index 0000000000..87cc9398d2
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@twilio-paste/react-textarea-autosize-library",
+  "version": "0.0.1",
+  "category": "library",
+  "status": "production",
+  "description": "textarea component for React which grows with content",
+  "author": "Twilio Inc.",
+  "license": "MIT",
+  "main:dev": "src/index.tsx",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn clean && NODE_ENV=production node build.js && tsc",
+    "build:js": "NODE_ENV=development node build.js",
+    "build:props": "typedoc --tsconfig ./tsconfig.json --json ./dist/prop-types.json",
+    "clean": "rm -rf ./dist",
+    "tsc": "tsc"
+  },
+  "dependencies": {
+    "use-composed-ref": "^1.3.0",
+    "use-latest": "^1.2.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8.6 || ^17.0.2",
+    "react-dom": "^16.8.6 || ^17.0.2"
+  },
+  "devDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}
diff --git a/packages/paste-libraries/react-textarea-autosize/src/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-libraries/react-textarea-autosize/src/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000..d77b5755ff
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TextareaAutosize /> renders ok 1`] = `
+<DocumentFragment>
+  <textarea />
+</DocumentFragment>
+`;
+
+exports[`<TextareaAutosize /> renders with initial height passed in style prop 1`] = `
+<DocumentFragment>
+  <textarea
+    style="height: 55px;"
+  />
+</DocumentFragment>
+`;
diff --git a/packages/paste-libraries/react-textarea-autosize/src/__tests__/index.test.tsx b/packages/paste-libraries/react-textarea-autosize/src/__tests__/index.test.tsx
new file mode 100644
index 0000000000..57b4213358
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/__tests__/index.test.tsx
@@ -0,0 +1,142 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+
+import TextareaAutosize from '../index';
+import {forceHiddenStyles} from '../forceHiddenStyles';
+import {getSizingData} from '../getSizingData';
+import {useWindowResizeListener} from '../useWindowResizeListener';
+import {calculateNodeHeight} from '../calculateNodeHeight';
+import {getHeight} from '../getHeight';
+import {useHiddenTextarea} from '../useHiddenTextarea';
+import type {SizingData} from '../getSizingData';
+
+const resizeMock: jest.Mock = jest.fn();
+
+const SampleComponent: React.FunctionComponent = () => {
+  useHiddenTextarea();
+  useWindowResizeListener(resizeMock);
+  return <></>;
+};
+
+describe('<TextareaAutosize />', () => {
+  it('renders ok', () => {
+    const {asFragment} = render(<TextareaAutosize />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('renders with initial height passed in style prop', () => {
+    const props = {
+      style: {
+        height: 55,
+      },
+    };
+    const {asFragment} = render(<TextareaAutosize {...props} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+
+describe('forceHiddenStyles', () => {
+  it('puts the hidden styles on an HTML node', () => {
+    const element = document.createElement('div');
+    forceHiddenStyles(element);
+
+    expect(element.style.minHeight).toEqual('0');
+    expect(element.style.maxHeight).toEqual('none');
+    expect(element.style.height).toEqual('0px');
+    expect(element.style.visibility).toEqual('hidden');
+    expect(element.style.overflow).toEqual('hidden');
+    expect(element.style.position).toEqual('absolute');
+    expect(element.style.zIndex).toEqual('-1000');
+    expect(element.style.top).toEqual('0px');
+    expect(element.style.right).toEqual('0px');
+  });
+});
+
+describe('getSizingData', () => {
+  it('returns the sizing styles on an HTML node', () => {
+    const element = document.createElement('textarea');
+    // need to set the box sizing property because the function returns null if it is not set
+    element.style.setProperty('box-sizing', 'border-box');
+    const sizingData = getSizingData(element);
+
+    expect(sizingData).toEqual({
+      borderSize: 2,
+      paddingSize: 4,
+      sizingStyle: {
+        borderBottomWidth: '1px',
+        borderLeftWidth: '1px',
+        borderRightWidth: '1px',
+        borderTopWidth: '1px',
+        boxSizing: 'border-box',
+        fontFamily: '-webkit-small-control',
+        fontSize: '',
+        fontStyle: '',
+        fontWeight: '',
+        letterSpacing: 'normal',
+        lineHeight: 'normal',
+        paddingBottom: '2px',
+        paddingLeft: '2px',
+        paddingRight: '2px',
+        paddingTop: '2px',
+        tabSize: '',
+        textIndent: '0',
+        textRendering: 'auto',
+        textTransform: 'none',
+        width: '',
+        wordBreak: '',
+      },
+    });
+  });
+});
+
+describe('getHeight', () => {
+  it('returns the height of an HTML node', () => {
+    const element = document.createElement('textarea');
+    // need to set the box sizing property because the function returns null if it is not set
+    element.style.setProperty('box-sizing', 'border-box');
+    // Jest/JSDOM doesn't set scrollHeight, so we need to fake it
+    jest.spyOn(element, 'scrollHeight', 'get').mockImplementation(() => 100);
+    const sizingData = getSizingData(element);
+    // need to force sizingData type to not be null
+    const elementHeight = getHeight(element, sizingData as SizingData);
+    expect(elementHeight).toEqual(102);
+  });
+});
+
+describe('calculateNodeHeight', () => {
+  it('returns the height and rowHeight of an empty textarea', () => {
+    const element = document.createElement('textarea');
+    // need to set the box sizing property because the function returns null if it is not set
+    element.style.setProperty('box-sizing', 'border-box');
+    // Jest/JSDOM doesn't set scrollHeight, so we need to fake it
+    jest.spyOn(element, 'scrollHeight', 'get').mockImplementation(() => 100);
+    const sizingData = getSizingData(element);
+    // need to force sizingData type to not be null
+    const calculatedHeight = calculateNodeHeight(element, sizingData as SizingData, '');
+    expect(calculatedHeight).toEqual([102, 96]);
+  });
+});
+
+describe('useHiddenTextarea', () => {
+  it('creates a visually hidden textarea', () => {
+    render(<SampleComponent />);
+    const hiddenTextarea = screen.getByRole('textbox', {hidden: true});
+    expect(hiddenTextarea).toBeDefined();
+  });
+
+  it('removes the visually hidden textarea on unmount', () => {
+    const {unmount} = render(<SampleComponent />);
+    expect(screen.getByRole('textbox', {hidden: true})).toBeDefined();
+
+    unmount();
+    // queryByRole doesn't fail when the element isn't defined
+    expect(screen.queryByRole('textbox', {hidden: true})).not.toBeInTheDocument();
+  });
+});
+
+describe('useWindowResizeListener', () => {
+  it('adds a resize listener to the window', () => {
+    render(<SampleComponent />);
+    window.dispatchEvent(new Event('resize'));
+    expect(resizeMock).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/packages/paste-libraries/react-textarea-autosize/src/calculateNodeHeight.ts b/packages/paste-libraries/react-textarea-autosize/src/calculateNodeHeight.ts
new file mode 100644
index 0000000000..5cce08157a
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/calculateNodeHeight.ts
@@ -0,0 +1,50 @@
+import type {SizingData} from './getSizingData';
+import {forceHiddenStyles} from './forceHiddenStyles';
+import {getHeight} from './getHeight';
+
+// TODO: use labelled tuples once they are avaiable:
+//   export type CalculatedNodeHeights = [height: number, rowHeight: number];
+// https://github.com/microsoft/TypeScript/issues/28259
+export type CalculatedNodeHeights = number[];
+
+export function calculateNodeHeight(
+  hiddenTextarea: HTMLTextAreaElement | null,
+  sizingData: SizingData,
+  value: string,
+  minRows = 1,
+  maxRows = 999
+): CalculatedNodeHeights {
+  const {paddingSize, borderSize, sizingStyle} = sizingData;
+  const {boxSizing} = sizingStyle;
+
+  if (hiddenTextarea == null) return [0, 0];
+
+  Object.keys(sizingStyle).forEach((_key) => {
+    const key = _key as keyof typeof sizingStyle;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    hiddenTextarea!.style[key] = sizingStyle[key] as any;
+  });
+
+  forceHiddenStyles(hiddenTextarea);
+
+  hiddenTextarea.value = value;
+  let height = getHeight(hiddenTextarea, sizingData);
+
+  // measure height of a textarea with a single row
+  hiddenTextarea.value = 'x';
+  const rowHeight = Math.max(hiddenTextarea.scrollHeight - paddingSize, 0);
+
+  let minHeight = rowHeight * minRows;
+  if (boxSizing === 'border-box') {
+    minHeight = minHeight + paddingSize + borderSize;
+  }
+  height = Math.max(minHeight, height);
+
+  let maxHeight = rowHeight * maxRows;
+  if (boxSizing === 'border-box') {
+    maxHeight = maxHeight + paddingSize + borderSize;
+  }
+  height = Math.max(Math.min(maxHeight, height), 0);
+
+  return [height, rowHeight];
+}
diff --git a/packages/paste-libraries/react-textarea-autosize/src/forceHiddenStyles.ts b/packages/paste-libraries/react-textarea-autosize/src/forceHiddenStyles.ts
new file mode 100644
index 0000000000..3d3fac78ae
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/forceHiddenStyles.ts
@@ -0,0 +1,17 @@
+const HIDDEN_TEXTAREA_STYLE = {
+  'min-height': '0',
+  'max-height': 'none',
+  height: '0',
+  visibility: 'hidden',
+  overflow: 'hidden',
+  position: 'absolute',
+  'z-index': '-1000',
+  top: '0',
+  right: '0',
+};
+
+export const forceHiddenStyles = (node: HTMLElement): void => {
+  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {
+    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key as keyof typeof HIDDEN_TEXTAREA_STYLE], 'important');
+  });
+};
diff --git a/packages/paste-libraries/react-textarea-autosize/src/getHeight.ts b/packages/paste-libraries/react-textarea-autosize/src/getHeight.ts
new file mode 100644
index 0000000000..6c681f3527
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/getHeight.ts
@@ -0,0 +1,13 @@
+import type {SizingData} from './getSizingData';
+
+export const getHeight = (node: HTMLElement, sizingData: SizingData): number => {
+  const height = node.scrollHeight;
+
+  if (sizingData.sizingStyle.boxSizing === 'border-box') {
+    // border-box: add border, since height = content + padding + border
+    return height + sizingData.borderSize;
+  }
+
+  // remove padding, since height = content
+  return height - sizingData.paddingSize;
+};
diff --git a/packages/paste-libraries/react-textarea-autosize/src/getSizingData.ts b/packages/paste-libraries/react-textarea-autosize/src/getSizingData.ts
new file mode 100644
index 0000000000..94e3f95753
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/getSizingData.ts
@@ -0,0 +1,87 @@
+import pick from 'lodash/pick';
+
+const SIZING_STYLE = [
+  'borderBottomWidth',
+  'borderLeftWidth',
+  'borderRightWidth',
+  'borderTopWidth',
+  'boxSizing',
+  'fontFamily',
+  'fontSize',
+  'fontStyle',
+  'fontWeight',
+  'letterSpacing',
+  'lineHeight',
+  'paddingBottom',
+  'paddingLeft',
+  'paddingRight',
+  'paddingTop',
+  // non-standard
+  'tabSize',
+  'textIndent',
+  // non-standard
+  'textRendering',
+  'textTransform',
+  'width',
+  'wordBreak',
+] as const;
+
+type SizingProps = Extract<typeof SIZING_STYLE[number], keyof CSSStyleDeclaration>;
+
+type SizingStyle = Pick<CSSStyleDeclaration, SizingProps>;
+
+export type SizingData = {
+  sizingStyle: SizingStyle;
+  paddingSize: number;
+  borderSize: number;
+};
+
+const isIE = typeof document !== 'undefined' ? !!(document.documentElement as any).currentStyle : false;
+
+export const getSizingData = (node: HTMLElement): SizingData | null => {
+  const style = window.getComputedStyle(node);
+
+  if (style === null) {
+    return null;
+  }
+
+  const sizingStyle = pick(style, SIZING_STYLE);
+  const {
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    boxSizing,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    width,
+  } = sizingStyle;
+
+  // probably node is detached from DOM, can't read computed dimensions
+  if (boxSizing === '') {
+    return null;
+  }
+
+  // IE (Edge has already correct behaviour) returns content width as computed width
+  // so we need to add manually padding and border widths
+  if (isIE && boxSizing === 'border-box') {
+    sizingStyle.width =
+      Number.parseFloat(width!) +
+      Number.parseFloat(borderRightWidth!) +
+      Number.parseFloat(borderLeftWidth!) +
+      Number.parseFloat(paddingRight!) +
+      Number.parseFloat(paddingLeft!) +
+      'px';
+  }
+
+  const paddingSize = Number.parseFloat(paddingBottom!) + Number.parseFloat(paddingTop!);
+  const borderSize = Number.parseFloat(borderBottomWidth!) + Number.parseFloat(borderTopWidth!);
+
+  return {
+    sizingStyle,
+    paddingSize,
+    borderSize,
+  };
+};
diff --git a/packages/paste-libraries/react-textarea-autosize/src/index.tsx b/packages/paste-libraries/react-textarea-autosize/src/index.tsx
new file mode 100644
index 0000000000..9c5f6b5d8b
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/index.tsx
@@ -0,0 +1,94 @@
+import * as React from 'react';
+import useComposedRef from 'use-composed-ref';
+
+import {calculateNodeHeight} from './calculateNodeHeight';
+import type {SizingData} from './getSizingData';
+import {getSizingData} from './getSizingData';
+import {useWindowResizeListener} from './useWindowResizeListener';
+import {useHiddenTextarea} from './useHiddenTextarea';
+
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+type Style = Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {
+  height?: number;
+};
+
+export type TextareaHeightChangeMeta = {
+  rowHeight: number;
+};
+export interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {
+  maxRows?: number;
+  minRows?: number;
+  onHeightChange?: (height: number, meta: TextareaHeightChangeMeta) => void;
+  cacheMeasurements?: boolean;
+  style?: Style;
+}
+
+const TextareaAutosize: React.ForwardRefRenderFunction<HTMLTextAreaElement, TextareaAutosizeProps> = (
+  {cacheMeasurements, maxRows, minRows, onChange = (): void => {}, onHeightChange = (): void => {}, ...props},
+  userRef: React.Ref<HTMLTextAreaElement>
+) => {
+  if (process.env.NODE_ENV !== 'production' && props.style) {
+    if ('maxHeight' in props.style) {
+      throw new Error('Using `style.maxHeight` for <TextareaAutosize/> is not supported. Please use `maxRows`.');
+    }
+    if ('minHeight' in props.style) {
+      throw new Error('Using `style.minHeight` for <TextareaAutosize/> is not supported. Please use `minRows`.');
+    }
+  }
+  const isControlled = props.value !== undefined && onChange !== undefined;
+  const ownRef = React.useRef<HTMLTextAreaElement | null>(null);
+  const ref = useComposedRef(ownRef, userRef);
+  const heightRef = React.useRef(0);
+  const measurementsCacheRef = React.useRef<SizingData>();
+  const hiddenTextarea = useHiddenTextarea();
+
+  const resizeTextarea = (): void => {
+    const node = ownRef.current!;
+    const nodeSizingData =
+      cacheMeasurements && measurementsCacheRef.current ? measurementsCacheRef.current : getSizingData(node);
+
+    if (!nodeSizingData) {
+      return;
+    }
+
+    measurementsCacheRef.current = nodeSizingData;
+
+    const [height, rowHeight] = calculateNodeHeight(
+      hiddenTextarea,
+      nodeSizingData,
+      node.value || node.placeholder || 'x',
+      minRows,
+      maxRows
+    );
+
+    if (heightRef.current !== height) {
+      heightRef.current = height;
+      node.style.setProperty('height', `${height}px`, 'important');
+      onHeightChange(height, {rowHeight});
+    }
+  };
+
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>): void => {
+    // There isn't a user resize event on the textarea, so this is a low-cost way to check if the user manually resized it
+    // By default, when the user resizes a textarea, the new height is set in the style attribute
+    // The way the react-textarea-autosize works, it calculates the height and sets the style attribute with !important
+    // So, we can assume that if the height has important it is the autosize height and if it doesn't have important the user resized it themselves
+    const didUserResize = ownRef.current?.style.getPropertyPriority('height') !== 'important';
+
+    if (!isControlled && !didUserResize) {
+      resizeTextarea();
+    }
+    onChange(event);
+  };
+
+  if (typeof document !== 'undefined') {
+    React.useLayoutEffect(resizeTextarea);
+    useWindowResizeListener(resizeTextarea);
+  }
+
+  return <textarea {...props} onChange={handleChange} ref={ref} />;
+};
+
+// eslint-disable-next-line import/no-default-export
+export default /* #__PURE__ */ React.forwardRef(TextareaAutosize);
diff --git a/packages/paste-libraries/react-textarea-autosize/src/useHiddenTextarea.tsx b/packages/paste-libraries/react-textarea-autosize/src/useHiddenTextarea.tsx
new file mode 100644
index 0000000000..0a2ce15102
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/useHiddenTextarea.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {forceHiddenStyles} from './forceHiddenStyles';
+
+export const useHiddenTextarea = (): HTMLTextAreaElement | null => {
+  const [hiddenTextarea, setHiddenTextarea] = React.useState<HTMLTextAreaElement | null>(null);
+
+  React.useEffect(() => {
+    const textareaElement = document.createElement('textarea');
+    textareaElement.setAttribute('tabindex', '-1');
+    textareaElement.setAttribute('aria-hidden', 'true');
+    forceHiddenStyles(textareaElement);
+    document.body.append(textareaElement);
+
+    setHiddenTextarea(textareaElement);
+
+    return () => {
+      // Clean up DOM
+      textareaElement.remove();
+      setHiddenTextarea(null);
+    };
+  }, []);
+
+  return hiddenTextarea;
+};
diff --git a/packages/paste-libraries/react-textarea-autosize/src/useWindowResizeListener.tsx b/packages/paste-libraries/react-textarea-autosize/src/useWindowResizeListener.tsx
new file mode 100644
index 0000000000..3846cb7e28
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/src/useWindowResizeListener.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import useLatest from 'use-latest';
+
+export const useWindowResizeListener = (listener: (event: UIEvent) => any): any => {
+  const latestListener = useLatest(listener);
+
+  React.useLayoutEffect(() => {
+    const handler: typeof listener = (event) => {
+      latestListener.current(event);
+    };
+
+    window.addEventListener('resize', handler);
+
+    return () => {
+      window.removeEventListener('resize', handler);
+    };
+  }, []);
+};
diff --git a/packages/paste-libraries/react-textarea-autosize/tsconfig.json b/packages/paste-libraries/react-textarea-autosize/tsconfig.json
new file mode 100644
index 0000000000..e30c6663c3
--- /dev/null
+++ b/packages/paste-libraries/react-textarea-autosize/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "__tests__"]
+}
diff --git a/packages/paste-website/src/pages/components/textarea/index.mdx b/packages/paste-website/src/pages/components/textarea/index.mdx
index 2b14fe8890..0ca7f4f933 100644
--- a/packages/paste-website/src/pages/components/textarea/index.mdx
+++ b/packages/paste-website/src/pages/components/textarea/index.mdx
@@ -196,6 +196,18 @@ The textarea should include the base textarea, along with supporting elements to
 </>`}
 </LivePreview>
 
+### Resizeable Textarea
+
+By default, the textarea is not resizeable. To change this, add the prop `resize='vertical'`.
+
+<LivePreview scope={{Label, HelpText, TextArea}} language="jsx">
+  {`<>
+  <Label htmlFor="message" required>Message (at least 120 characters)</Label>
+  <TextArea onChange={()=>{}} aria-describedby="message_help_text" id="message" name="message" resize="vertical" required />
+  <HelpText id="message_help_text">Enter at least 120 characters</HelpText>
+</>`}
+</LivePreview>
+
 ## States
 
 ### Textarea with inline error
@@ -640,6 +652,7 @@ All the valid HTML attributes for `textarea` are supported including the followi
 | disabled?    | boolean                                  | Disables the textarea.                                                                    | false      |
 | readOnly?    | boolean                                  | Sets the textarea to readonly.                                                            | false      |
 | required?    | boolean                                  | Sets the textarea as required.                                                            | false      |
+| resize?      | 'none', 'vertical'                       | Sets if the textarea can be resized.                                                      | 'none'     |
 | hasError?    | boolean                                  | Sets the textarea to an error state.                                                      | false      |
 | onChange?    | `(event: React.MouseEvent<HTMLElement>)` |                                                                                           | null       |
 | onFocus?     | `(event: React.MouseEvent<HTMLElement>)` |                                                                                           | null       |
diff --git a/tools/build/__fixtures__/random_package/src/index.tsx b/tools/build/__fixtures__/random_package/src/index.tsx
index 35717c794e..3e39dc59c7 100644
--- a/tools/build/__fixtures__/random_package/src/index.tsx
+++ b/tools/build/__fixtures__/random_package/src/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import TextareaAutosize from 'react-autosize-textarea';
+import {Tab} from 'reakit';
 import type {DesignToken, DesignTokensJSON} from '@twilio-paste/design-tokens/types';
 import DefaultRawTokenJSON from '@twilio-paste/design-tokens/dist/tokens.raw.json';
 
@@ -32,5 +32,5 @@ export const getContrastRatingsOfTokensWithTextContrastRequirements = (): void =
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export const RandomComponent = () => {
-  return <TextareaAutosize />;
+  return <Tab />;
 };
diff --git a/tools/build/__tests__/__snapshots__/compiledImports.test.ts.snap b/tools/build/__tests__/__snapshots__/compiledImports.test.ts.snap
index 27bed655c1..84a89f8124 100644
--- a/tools/build/__tests__/__snapshots__/compiledImports.test.ts.snap
+++ b/tools/build/__tests__/__snapshots__/compiledImports.test.ts.snap
@@ -29,474 +29,6 @@ var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, \\"def
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, \\"default\\", { value: mod, enumerable: true }) : target, mod));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, \\"__esModule\\", { value: true }), mod);
 
-// esm-externals:react
-var react_exports = {};
-__export(react_exports, {
-  default: () => default2
-});
-import * as default2 from \\"react\\";
-import * as react_star from \\"react\\";
-var init_react = __esm({
-  \\"esm-externals:react\\"() {
-    __reExport(react_exports, react_star);
-  }
-});
-
-// esm-externals:prop-types
-var prop_types_exports = {};
-__export(prop_types_exports, {
-  default: () => default3
-});
-import * as default3 from \\"prop-types\\";
-import * as prop_types_star from \\"prop-types\\";
-var init_prop_types = __esm({
-  \\"esm-externals:prop-types\\"() {
-    __reExport(prop_types_exports, prop_types_star);
-  }
-});
-
-// node_modules/autosize/dist/autosize.js
-var require_autosize = __commonJS({
-  \\"node_modules/autosize/dist/autosize.js\\"(exports, module) {
-    (function(global2, factory) {
-      if (typeof define === \\"function\\" && define.amd) {
-        define([\\"module\\", \\"exports\\"], factory);
-      } else if (typeof exports !== \\"undefined\\") {
-        factory(module, exports);
-      } else {
-        var mod = {
-          exports: {}
-        };
-        factory(mod, mod.exports);
-        global2.autosize = mod.exports;
-      }
-    })(exports, function(module2, exports2) {
-      \\"use strict\\";
-      var map = typeof Map === \\"function\\" ? /* @__PURE__ */ new Map() : function() {
-        var keys = [];
-        var values = [];
-        return {
-          has: function has(key) {
-            return keys.indexOf(key) > -1;
-          },
-          get: function get(key) {
-            return values[keys.indexOf(key)];
-          },
-          set: function set(key, value) {
-            if (keys.indexOf(key) === -1) {
-              keys.push(key);
-              values.push(value);
-            }
-          },
-          delete: function _delete(key) {
-            var index = keys.indexOf(key);
-            if (index > -1) {
-              keys.splice(index, 1);
-              values.splice(index, 1);
-            }
-          }
-        };
-      }();
-      var createEvent = function createEvent2(name) {
-        return new Event(name, { bubbles: true });
-      };
-      try {
-        new Event(\\"test\\");
-      } catch (e) {
-        createEvent = function createEvent2(name) {
-          var evt = document.createEvent(\\"Event\\");
-          evt.initEvent(name, true, false);
-          return evt;
-        };
-      }
-      function assign(ta) {
-        if (!ta || !ta.nodeName || ta.nodeName !== \\"TEXTAREA\\" || map.has(ta))
-          return;
-        var heightOffset = null;
-        var clientWidth = null;
-        var cachedHeight = null;
-        function init() {
-          var style = window.getComputedStyle(ta, null);
-          if (style.resize === \\"vertical\\") {
-            ta.style.resize = \\"none\\";
-          } else if (style.resize === \\"both\\") {
-            ta.style.resize = \\"horizontal\\";
-          }
-          if (style.boxSizing === \\"content-box\\") {
-            heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
-          } else {
-            heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-          }
-          if (isNaN(heightOffset)) {
-            heightOffset = 0;
-          }
-          update2();
-        }
-        function changeOverflow(value) {
-          {
-            var width = ta.style.width;
-            ta.style.width = \\"0px\\";
-            ta.offsetWidth;
-            ta.style.width = width;
-          }
-          ta.style.overflowY = value;
-        }
-        function getParentOverflows(el) {
-          var arr = [];
-          while (el && el.parentNode && el.parentNode instanceof Element) {
-            if (el.parentNode.scrollTop) {
-              arr.push({
-                node: el.parentNode,
-                scrollTop: el.parentNode.scrollTop
-              });
-            }
-            el = el.parentNode;
-          }
-          return arr;
-        }
-        function resize() {
-          if (ta.scrollHeight === 0) {
-            return;
-          }
-          var overflows = getParentOverflows(ta);
-          var docTop = document.documentElement && document.documentElement.scrollTop;
-          ta.style.height = \\"\\";
-          ta.style.height = ta.scrollHeight + heightOffset + \\"px\\";
-          clientWidth = ta.clientWidth;
-          overflows.forEach(function(el) {
-            el.node.scrollTop = el.scrollTop;
-          });
-          if (docTop) {
-            document.documentElement.scrollTop = docTop;
-          }
-        }
-        function update2() {
-          resize();
-          var styleHeight = Math.round(parseFloat(ta.style.height));
-          var computed = window.getComputedStyle(ta, null);
-          var actualHeight = computed.boxSizing === \\"content-box\\" ? Math.round(parseFloat(computed.height)) : ta.offsetHeight;
-          if (actualHeight < styleHeight) {
-            if (computed.overflowY === \\"hidden\\") {
-              changeOverflow(\\"scroll\\");
-              resize();
-              actualHeight = computed.boxSizing === \\"content-box\\" ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
-            }
-          } else {
-            if (computed.overflowY !== \\"hidden\\") {
-              changeOverflow(\\"hidden\\");
-              resize();
-              actualHeight = computed.boxSizing === \\"content-box\\" ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
-            }
-          }
-          if (cachedHeight !== actualHeight) {
-            cachedHeight = actualHeight;
-            var evt = createEvent(\\"autosize:resized\\");
-            try {
-              ta.dispatchEvent(evt);
-            } catch (err) {
-            }
-          }
-        }
-        var pageResize = function pageResize2() {
-          if (ta.clientWidth !== clientWidth) {
-            update2();
-          }
-        };
-        var destroy2 = function(style) {
-          window.removeEventListener(\\"resize\\", pageResize, false);
-          ta.removeEventListener(\\"input\\", update2, false);
-          ta.removeEventListener(\\"keyup\\", update2, false);
-          ta.removeEventListener(\\"autosize:destroy\\", destroy2, false);
-          ta.removeEventListener(\\"autosize:update\\", update2, false);
-          Object.keys(style).forEach(function(key) {
-            ta.style[key] = style[key];
-          });
-          map.delete(ta);
-        }.bind(ta, {
-          height: ta.style.height,
-          resize: ta.style.resize,
-          overflowY: ta.style.overflowY,
-          overflowX: ta.style.overflowX,
-          wordWrap: ta.style.wordWrap
-        });
-        ta.addEventListener(\\"autosize:destroy\\", destroy2, false);
-        if (\\"onpropertychange\\" in ta && \\"oninput\\" in ta) {
-          ta.addEventListener(\\"keyup\\", update2, false);
-        }
-        window.addEventListener(\\"resize\\", pageResize, false);
-        ta.addEventListener(\\"input\\", update2, false);
-        ta.addEventListener(\\"autosize:update\\", update2, false);
-        ta.style.overflowX = \\"hidden\\";
-        ta.style.wordWrap = \\"break-word\\";
-        map.set(ta, {
-          destroy: destroy2,
-          update: update2
-        });
-        init();
-      }
-      function destroy(ta) {
-        var methods = map.get(ta);
-        if (methods) {
-          methods.destroy();
-        }
-      }
-      function update(ta) {
-        var methods = map.get(ta);
-        if (methods) {
-          methods.update();
-        }
-      }
-      var autosize = null;
-      if (typeof window === \\"undefined\\" || typeof window.getComputedStyle !== \\"function\\") {
-        autosize = function autosize2(el) {
-          return el;
-        };
-        autosize.destroy = function(el) {
-          return el;
-        };
-        autosize.update = function(el) {
-          return el;
-        };
-      } else {
-        autosize = function autosize2(el, options) {
-          if (el) {
-            Array.prototype.forEach.call(el.length ? el : [el], function(x) {
-              return assign(x, options);
-            });
-          }
-          return el;
-        };
-        autosize.destroy = function(el) {
-          if (el) {
-            Array.prototype.forEach.call(el.length ? el : [el], destroy);
-          }
-          return el;
-        };
-        autosize.update = function(el) {
-          if (el) {
-            Array.prototype.forEach.call(el.length ? el : [el], update);
-          }
-          return el;
-        };
-      }
-      exports2.default = autosize;
-      module2.exports = exports2[\\"default\\"];
-    });
-  }
-});
-
-// node_modules/computed-style/dist/computedStyle.commonjs.js
-var require_computedStyle_commonjs = __commonJS({
-  \\"node_modules/computed-style/dist/computedStyle.commonjs.js\\"(exports, module) {
-    var computedStyle = function(el, prop, getComputedStyle) {
-      getComputedStyle = window.getComputedStyle;
-      return (getComputedStyle ? getComputedStyle(el) : el.currentStyle)[prop.replace(/-(\\\\w)/gi, function(word, letter) {
-        return letter.toUpperCase();
-      })];
-    };
-    module.exports = computedStyle;
-  }
-});
-
-// node_modules/line-height/lib/line-height.js
-var require_line_height = __commonJS({
-  \\"node_modules/line-height/lib/line-height.js\\"(exports, module) {
-    var computedStyle = require_computedStyle_commonjs();
-    function lineHeight(node) {
-      var lnHeightStr = computedStyle(node, \\"line-height\\");
-      var lnHeight = parseFloat(lnHeightStr, 10);
-      if (lnHeightStr === lnHeight + \\"\\") {
-        var _lnHeightStyle = node.style.lineHeight;
-        node.style.lineHeight = lnHeightStr + \\"em\\";
-        lnHeightStr = computedStyle(node, \\"line-height\\");
-        lnHeight = parseFloat(lnHeightStr, 10);
-        if (_lnHeightStyle) {
-          node.style.lineHeight = _lnHeightStyle;
-        } else {
-          delete node.style.lineHeight;
-        }
-      }
-      if (lnHeightStr.indexOf(\\"pt\\") !== -1) {
-        lnHeight *= 4;
-        lnHeight /= 3;
-      } else if (lnHeightStr.indexOf(\\"mm\\") !== -1) {
-        lnHeight *= 96;
-        lnHeight /= 25.4;
-      } else if (lnHeightStr.indexOf(\\"cm\\") !== -1) {
-        lnHeight *= 96;
-        lnHeight /= 2.54;
-      } else if (lnHeightStr.indexOf(\\"in\\") !== -1) {
-        lnHeight *= 96;
-      } else if (lnHeightStr.indexOf(\\"pc\\") !== -1) {
-        lnHeight *= 16;
-      }
-      lnHeight = Math.round(lnHeight);
-      if (lnHeightStr === \\"normal\\") {
-        var nodeName = node.nodeName;
-        var _node = document.createElement(nodeName);
-        _node.innerHTML = \\"&nbsp;\\";
-        if (nodeName.toUpperCase() === \\"TEXTAREA\\") {
-          _node.setAttribute(\\"rows\\", \\"1\\");
-        }
-        var fontSizeStr = computedStyle(node, \\"font-size\\");
-        _node.style.fontSize = fontSizeStr;
-        _node.style.padding = \\"0px\\";
-        _node.style.border = \\"0px\\";
-        var body = document.body;
-        body.appendChild(_node);
-        var height = _node.offsetHeight;
-        lnHeight = height;
-        body.removeChild(_node);
-      }
-      return lnHeight;
-    }
-    module.exports = lineHeight;
-  }
-});
-
-// node_modules/react-autosize-textarea/lib/TextareaAutosize.js
-var require_TextareaAutosize = __commonJS({
-  \\"node_modules/react-autosize-textarea/lib/TextareaAutosize.js\\"(exports) {
-    \\"use strict\\";
-    var __extends = exports && exports.__extends || function() {
-      var extendStatics = Object.setPrototypeOf || { __proto__: [] } instanceof Array && function(d, b) {
-        d.__proto__ = b;
-      } || function(d, b) {
-        for (var p in b)
-          if (b.hasOwnProperty(p))
-            d[p] = b[p];
-      };
-      return function(d, b) {
-        extendStatics(d, b);
-        function __() {
-          this.constructor = d;
-        }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-      };
-    }();
-    var __assign = exports && exports.__assign || Object.assign || function(t) {
-      for (var s, i = 1, n = arguments.length; i < n; i++) {
-        s = arguments[i];
-        for (var p in s)
-          if (Object.prototype.hasOwnProperty.call(s, p))
-            t[p] = s[p];
-      }
-      return t;
-    };
-    var __rest = exports && exports.__rest || function(s, e) {
-      var t = {};
-      for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-          t[p] = s[p];
-      if (s != null && typeof Object.getOwnPropertySymbols === \\"function\\") {
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++)
-          if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-      }
-      return t;
-    };
-    exports.__esModule = true;
-    var React2 = (init_react(), __toCommonJS(react_exports));
-    var PropTypes = (init_prop_types(), __toCommonJS(prop_types_exports));
-    var autosize = require_autosize();
-    var _getLineHeight = require_line_height();
-    var getLineHeight = _getLineHeight;
-    var RESIZED = \\"autosize:resized\\";
-    var TextareaAutosizeClass = function(_super) {
-      __extends(TextareaAutosizeClass2, _super);
-      function TextareaAutosizeClass2() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = {
-          lineHeight: null
-        };
-        _this.textarea = null;
-        _this.onResize = function(e) {
-          if (_this.props.onResize) {
-            _this.props.onResize(e);
-          }
-        };
-        _this.updateLineHeight = function() {
-          if (_this.textarea) {
-            _this.setState({
-              lineHeight: getLineHeight(_this.textarea)
-            });
-          }
-        };
-        _this.onChange = function(e) {
-          var onChange = _this.props.onChange;
-          _this.currentValue = e.currentTarget.value;
-          onChange && onChange(e);
-        };
-        return _this;
-      }
-      TextareaAutosizeClass2.prototype.componentDidMount = function() {
-        var _this = this;
-        var _a = this.props, maxRows = _a.maxRows, async = _a.async;
-        if (typeof maxRows === \\"number\\") {
-          this.updateLineHeight();
-        }
-        if (typeof maxRows === \\"number\\" || async) {
-          setTimeout(function() {
-            return _this.textarea && autosize(_this.textarea);
-          });
-        } else {
-          this.textarea && autosize(this.textarea);
-        }
-        if (this.textarea) {
-          this.textarea.addEventListener(RESIZED, this.onResize);
-        }
-      };
-      TextareaAutosizeClass2.prototype.componentWillUnmount = function() {
-        if (this.textarea) {
-          this.textarea.removeEventListener(RESIZED, this.onResize);
-          autosize.destroy(this.textarea);
-        }
-      };
-      TextareaAutosizeClass2.prototype.render = function() {
-        var _this = this;
-        var _a = this, _b = _a.props, onResize = _b.onResize, maxRows = _b.maxRows, onChange = _b.onChange, style = _b.style, innerRef = _b.innerRef, children = _b.children, props = __rest(_b, [\\"onResize\\", \\"maxRows\\", \\"onChange\\", \\"style\\", \\"innerRef\\", \\"children\\"]), lineHeight = _a.state.lineHeight;
-        var maxHeight = maxRows && lineHeight ? lineHeight * maxRows : null;
-        return React2.createElement(\\"textarea\\", __assign({}, props, { onChange: this.onChange, style: maxHeight ? __assign({}, style, { maxHeight }) : style, ref: function(element) {
-          _this.textarea = element;
-          if (typeof _this.props.innerRef === \\"function\\") {
-            _this.props.innerRef(element);
-          } else if (_this.props.innerRef) {
-            _this.props.innerRef.current = element;
-          }
-        } }), children);
-      };
-      TextareaAutosizeClass2.prototype.componentDidUpdate = function() {
-        this.textarea && autosize.update(this.textarea);
-      };
-      TextareaAutosizeClass2.defaultProps = {
-        rows: 1,
-        async: false
-      };
-      TextareaAutosizeClass2.propTypes = {
-        rows: PropTypes.number,
-        maxRows: PropTypes.number,
-        onResize: PropTypes.func,
-        innerRef: PropTypes.any,
-        async: PropTypes.bool
-      };
-      return TextareaAutosizeClass2;
-    }(React2.Component);
-    exports.TextareaAutosize = React2.forwardRef(function(props, ref) {
-      return React2.createElement(TextareaAutosizeClass, __assign({}, props, { innerRef: ref }));
-    });
-  }
-});
-
-// node_modules/react-autosize-textarea/lib/index.js
-var require_lib = __commonJS({
-  \\"node_modules/react-autosize-textarea/lib/index.js\\"(exports) {
-    \\"use strict\\";
-    exports.__esModule = true;
-    var TextareaAutosize_1 = require_TextareaAutosize();
-    exports[\\"default\\"] = TextareaAutosize_1.TextareaAutosize;
-  }
-});
-
 // node_modules/clipboard-copy/index.js
 var require_clipboard_copy = __commonJS({
   \\"node_modules/clipboard-copy/index.js\\"(exports, module) {
@@ -529,6 +61,19 @@ var require_clipboard_copy = __commonJS({
   }
 });
 
+// esm-externals:react
+var react_exports = {};
+__export(react_exports, {
+  default: () => default2
+});
+import * as default2 from \\"react\\";
+import * as react_star from \\"react\\";
+var init_react = __esm({
+  \\"esm-externals:react\\"() {
+    __reExport(react_exports, react_star);
+  }
+});
+
 // node_modules/use-clipboard-copy/dist/useTimedToggle.js
 var require_useTimedToggle = __commonJS({
   \\"node_modules/use-clipboard-copy/dist/useTimedToggle.js\\"(exports) {
@@ -648,8 +193,8 @@ var require_root = __commonJS({
 var require_Symbol = __commonJS({
   \\"node_modules/lodash/_Symbol.js\\"(exports, module) {
     var root = require_root();
-    var Symbol = root.Symbol;
-    module.exports = Symbol;
+    var Symbol2 = root.Symbol;
+    module.exports = Symbol2;
   }
 });
 
@@ -678,11 +223,11 @@ var require_isArray = __commonJS({
 // node_modules/lodash/_getRawTag.js
 var require_getRawTag = __commonJS({
   \\"node_modules/lodash/_getRawTag.js\\"(exports, module) {
-    var Symbol = require_Symbol();
+    var Symbol2 = require_Symbol();
     var objectProto = Object.prototype;
     var hasOwnProperty = objectProto.hasOwnProperty;
     var nativeObjectToString = objectProto.toString;
-    var symToStringTag = Symbol ? Symbol.toStringTag : void 0;
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
     function getRawTag(value) {
       var isOwn = hasOwnProperty.call(value, symToStringTag), tag = value[symToStringTag];
       try {
@@ -719,12 +264,12 @@ var require_objectToString = __commonJS({
 // node_modules/lodash/_baseGetTag.js
 var require_baseGetTag = __commonJS({
   \\"node_modules/lodash/_baseGetTag.js\\"(exports, module) {
-    var Symbol = require_Symbol();
+    var Symbol2 = require_Symbol();
     var getRawTag = require_getRawTag();
     var objectToString = require_objectToString();
     var nullTag = \\"[object Null]\\";
     var undefinedTag = \\"[object Undefined]\\";
-    var symToStringTag = Symbol ? Symbol.toStringTag : void 0;
+    var symToStringTag = Symbol2 ? Symbol2.toStringTag : void 0;
     function baseGetTag(value) {
       if (value == null) {
         return value === void 0 ? undefinedTag : nullTag;
@@ -761,12 +306,12 @@ var require_isSymbol = __commonJS({
 // node_modules/lodash/_baseToString.js
 var require_baseToString = __commonJS({
   \\"node_modules/lodash/_baseToString.js\\"(exports, module) {
-    var Symbol = require_Symbol();
+    var Symbol2 = require_Symbol();
     var arrayMap = require_arrayMap();
     var isArray = require_isArray();
     var isSymbol = require_isSymbol();
     var INFINITY = 1 / 0;
-    var symbolProto = Symbol ? Symbol.prototype : void 0;
+    var symbolProto = Symbol2 ? Symbol2.prototype : void 0;
     var symbolToString = symbolProto ? symbolProto.toString : void 0;
     function baseToString(value) {
       if (typeof value == \\"string\\") {
@@ -1326,10 +871,1486 @@ var require_camelCase = __commonJS({
 });
 
 // tools/build/__fixtures__/random_package/src/index.tsx
-var import_react_autosize_textarea = __toESM(require_lib());
+import * as React from \\"react\\";
+
+// node_modules/reakit/es/_rollupPluginBabelHelpers-1f0bf8c2.js
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly)
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function(key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o)
+    return;
+  if (typeof o === \\"string\\")
+    return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === \\"Object\\" && o.constructor)
+    n = o.constructor.name;
+  if (n === \\"Map\\" || n === \\"Set\\")
+    return Array.from(o);
+  if (n === \\"Arguments\\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+    return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length)
+    len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++)
+    arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it;
+  if (typeof Symbol === \\"undefined\\" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === \\"number\\") {
+      if (it)
+        o = it;
+      var i = 0;
+      return function() {
+        if (i >= o.length)
+          return {
+            done: true
+          };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+    throw new TypeError(\\"Invalid attempt to iterate non-iterable instance.\\\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\\");
+  }
+  it = o[Symbol.iterator]();
+  return it.next.bind(it);
+}
+
+// node_modules/reakit-system/es/createComponent.js
+import { forwardRef as forwardRef$1, memo as memo$1 } from \\"react\\";
+
+// node_modules/reakit-system/es/SystemContext.js
+import { createContext } from \\"react\\";
+var SystemContext = /* @__PURE__ */ createContext({});
+
+// node_modules/reakit-system/es/_rollupPluginBabelHelpers-0c84a174.js
+function _defineProperty2(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function ownKeys2(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly)
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread22(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys2(Object(source), true).forEach(function(key) {
+        _defineProperty2(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys2(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose2(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _unsupportedIterableToArray2(o, minLen) {
+  if (!o)
+    return;
+  if (typeof o === \\"string\\")
+    return _arrayLikeToArray2(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === \\"Object\\" && o.constructor)
+    n = o.constructor.name;
+  if (n === \\"Map\\" || n === \\"Set\\")
+    return Array.from(o);
+  if (n === \\"Arguments\\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+    return _arrayLikeToArray2(o, minLen);
+}
+function _arrayLikeToArray2(arr, len) {
+  if (len == null || len > arr.length)
+    len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++)
+    arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose2(o, allowArrayLike) {
+  var it;
+  if (typeof Symbol === \\"undefined\\" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray2(o)) || allowArrayLike && o && typeof o.length === \\"number\\") {
+      if (it)
+        o = it;
+      var i = 0;
+      return function() {
+        if (i >= o.length)
+          return {
+            done: true
+          };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+    throw new TypeError(\\"Invalid attempt to iterate non-iterable instance.\\\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\\");
+  }
+  it = o[Symbol.iterator]();
+  return it.next.bind(it);
+}
+
+// node_modules/reakit-system/es/useCreateElement.js
+import { useContext, createElement } from \\"react\\";
+function isRenderProp(children) {
+  return typeof children === \\"function\\";
+}
+var useCreateElement = function useCreateElement2(type, props, children) {
+  if (children === void 0) {
+    children = props.children;
+  }
+  var context = useContext(SystemContext);
+  if (context.useCreateElement) {
+    return context.useCreateElement(type, props, children);
+  }
+  if (typeof type === \\"string\\" && isRenderProp(children)) {
+    var _ = props.children, rest = _objectWithoutPropertiesLoose2(props, [\\"children\\"]);
+    return children(rest);
+  }
+  return /* @__PURE__ */ createElement(type, props, children);
+};
+
+// node_modules/reakit-utils/es/_rollupPluginBabelHelpers-1f0bf8c2.js
+function _defineProperty3(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+function ownKeys3(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly)
+      symbols = symbols.filter(function(sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _objectSpread23(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+    if (i % 2) {
+      ownKeys3(Object(source), true).forEach(function(key) {
+        _defineProperty3(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys3(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+  return target;
+}
+function _objectWithoutPropertiesLoose3(source, excluded) {
+  if (source == null)
+    return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0)
+      continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+function _unsupportedIterableToArray3(o, minLen) {
+  if (!o)
+    return;
+  if (typeof o === \\"string\\")
+    return _arrayLikeToArray3(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === \\"Object\\" && o.constructor)
+    n = o.constructor.name;
+  if (n === \\"Map\\" || n === \\"Set\\")
+    return Array.from(o);
+  if (n === \\"Arguments\\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))
+    return _arrayLikeToArray3(o, minLen);
+}
+function _arrayLikeToArray3(arr, len) {
+  if (len == null || len > arr.length)
+    len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++)
+    arr2[i] = arr[i];
+  return arr2;
+}
+function _createForOfIteratorHelperLoose3(o, allowArrayLike) {
+  var it;
+  if (typeof Symbol === \\"undefined\\" || o[Symbol.iterator] == null) {
+    if (Array.isArray(o) || (it = _unsupportedIterableToArray3(o)) || allowArrayLike && o && typeof o.length === \\"number\\") {
+      if (it)
+        o = it;
+      var i = 0;
+      return function() {
+        if (i >= o.length)
+          return {
+            done: true
+          };
+        return {
+          done: false,
+          value: o[i++]
+        };
+      };
+    }
+    throw new TypeError(\\"Invalid attempt to iterate non-iterable instance.\\\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\\");
+  }
+  it = o[Symbol.iterator]();
+  return it.next.bind(it);
+}
+
+// node_modules/reakit-utils/es/isObject.js
+function isObject(arg) {
+  return typeof arg === \\"object\\" && arg != null;
+}
+
+// node_modules/reakit-utils/es/isPlainObject.js
+function isPlainObject(arg) {
+  var _proto$constructor;
+  if (!isObject(arg))
+    return false;
+  var proto = Object.getPrototypeOf(arg);
+  if (proto == null)
+    return true;
+  return ((_proto$constructor = proto.constructor) === null || _proto$constructor === void 0 ? void 0 : _proto$constructor.toString()) === Object.toString();
+}
+
+// node_modules/reakit-utils/es/splitProps.js
+function __deprecatedSplitProps(props, keys) {
+  var propsKeys = Object.keys(props);
+  var picked = {};
+  var omitted = {};
+  for (var _i = 0, _propsKeys = propsKeys; _i < _propsKeys.length; _i++) {
+    var key = _propsKeys[_i];
+    if (keys.indexOf(key) >= 0) {
+      picked[key] = props[key];
+    } else {
+      omitted[key] = props[key];
+    }
+  }
+  return [picked, omitted];
+}
+function splitProps(props, keys) {
+  if (keys === void 0) {
+    keys = [];
+  }
+  if (!isPlainObject(props.state)) {
+    return __deprecatedSplitProps(props, keys);
+  }
+  var _deprecatedSplitProp = __deprecatedSplitProps(props, [].concat(keys, [\\"state\\"])), picked = _deprecatedSplitProp[0], omitted = _deprecatedSplitProp[1];
+  var state = picked.state, restPicked = _objectWithoutPropertiesLoose3(picked, [\\"state\\"]);
+  return [_objectSpread23(_objectSpread23({}, state), restPicked), omitted];
+}
+
+// node_modules/reakit-utils/es/shallowEqual.js
+function shallowEqual(objA, objB) {
+  if (objA === objB)
+    return true;
+  if (!objA)
+    return false;
+  if (!objB)
+    return false;
+  if (typeof objA !== \\"object\\")
+    return false;
+  if (typeof objB !== \\"object\\")
+    return false;
+  var aKeys = Object.keys(objA);
+  var bKeys = Object.keys(objB);
+  var length = aKeys.length;
+  if (bKeys.length !== length)
+    return false;
+  for (var _i = 0, _aKeys = aKeys; _i < _aKeys.length; _i++) {
+    var key = _aKeys[_i];
+    if (objA[key] !== objB[key]) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// node_modules/reakit-utils/es/normalizePropsAreEqual.js
+function normalizePropsAreEqual(propsAreEqual3) {
+  if (propsAreEqual3.name === \\"normalizePropsAreEqualInner\\") {
+    return propsAreEqual3;
+  }
+  return function normalizePropsAreEqualInner(prev, next) {
+    if (!isPlainObject(prev.state) || !isPlainObject(next.state)) {
+      return propsAreEqual3(prev, next);
+    }
+    return propsAreEqual3(_objectSpread23(_objectSpread23({}, prev.state), prev), _objectSpread23(_objectSpread23({}, next.state), next));
+  };
+}
+
+// node_modules/reakit-system/es/createComponent.js
+function forwardRef(component) {
+  return /* @__PURE__ */ forwardRef$1(component);
+}
+function memo(component, propsAreEqual3) {
+  return /* @__PURE__ */ memo$1(component, propsAreEqual3);
+}
+function createComponent(_ref) {
+  var type = _ref.as, useHook = _ref.useHook, shouldMemo = _ref.memo, _ref$propsAreEqual = _ref.propsAreEqual, propsAreEqual3 = _ref$propsAreEqual === void 0 ? useHook === null || useHook === void 0 ? void 0 : useHook.unstable_propsAreEqual : _ref$propsAreEqual, _ref$keys = _ref.keys, keys = _ref$keys === void 0 ? (useHook === null || useHook === void 0 ? void 0 : useHook.__keys) || [] : _ref$keys, _ref$useCreateElement = _ref.useCreateElement, useCreateElement$1 = _ref$useCreateElement === void 0 ? useCreateElement : _ref$useCreateElement;
+  var Comp = function Comp2(_ref2, ref) {
+    var _ref2$as = _ref2.as, as = _ref2$as === void 0 ? type : _ref2$as, props = _objectWithoutPropertiesLoose2(_ref2, [\\"as\\"]);
+    if (useHook) {
+      var _as$render;
+      var _splitProps = splitProps(props, keys), _options = _splitProps[0], htmlProps = _splitProps[1];
+      var _useHook = useHook(_options, _objectSpread22({
+        ref
+      }, htmlProps)), wrapElement = _useHook.wrapElement, elementProps = _objectWithoutPropertiesLoose2(_useHook, [\\"wrapElement\\"]);
+      var asKeys = ((_as$render = as.render) === null || _as$render === void 0 ? void 0 : _as$render.__keys) || as.__keys;
+      var asOptions = asKeys && splitProps(props, asKeys)[0];
+      var allProps = asOptions ? _objectSpread22(_objectSpread22({}, elementProps), asOptions) : elementProps;
+      var _element = useCreateElement$1(as, allProps);
+      if (wrapElement) {
+        return wrapElement(_element);
+      }
+      return _element;
+    }
+    return useCreateElement$1(as, _objectSpread22({
+      ref
+    }, props));
+  };
+  if (useHook) {
+    Comp.displayName = useHook.name.replace(/^(unstable_)?use/, \\"\\");
+  }
+  Comp = forwardRef(Comp);
+  if (shouldMemo) {
+    Comp = memo(Comp, propsAreEqual3 && normalizePropsAreEqual(propsAreEqual3));
+  }
+  Comp.__keys = keys;
+  Comp.unstable_propsAreEqual = normalizePropsAreEqual(propsAreEqual3 || shallowEqual);
+  return Comp;
+}
+
+// node_modules/reakit-system/es/createHook.js
+import \\"react\\";
+
+// node_modules/reakit-system/es/useToken.js
+import { useDebugValue, useContext as useContext2 } from \\"react\\";
+function useToken(token, defaultValue) {
+  useDebugValue(token);
+  var context = useContext2(SystemContext);
+  return context[token] != null ? context[token] : defaultValue;
+}
+
+// node_modules/reakit-system/es/useProps.js
+import { useDebugValue as useDebugValue2 } from \\"react\\";
+function useProps(name, options, htmlProps) {
+  if (options === void 0) {
+    options = {};
+  }
+  if (htmlProps === void 0) {
+    htmlProps = {};
+  }
+  var hookName = \\"use\\" + name + \\"Props\\";
+  useDebugValue2(hookName);
+  var useHook = useToken(hookName);
+  if (useHook) {
+    return useHook(options, htmlProps);
+  }
+  return htmlProps;
+}
+
+// node_modules/reakit-system/es/useOptions.js
+import { useDebugValue as useDebugValue3 } from \\"react\\";
+function useOptions(name, options, htmlProps) {
+  if (options === void 0) {
+    options = {};
+  }
+  if (htmlProps === void 0) {
+    htmlProps = {};
+  }
+  var hookName = \\"use\\" + name + \\"Options\\";
+  useDebugValue3(hookName);
+  var useHook = useToken(hookName);
+  if (useHook) {
+    return _objectSpread22(_objectSpread22({}, options), useHook(options, htmlProps));
+  }
+  return options;
+}
+
+// node_modules/reakit-utils/es/toArray.js
+function toArray(arg) {
+  if (Array.isArray(arg)) {
+    return arg;
+  }
+  return typeof arg !== \\"undefined\\" ? [arg] : [];
+}
+
+// node_modules/reakit-system/es/createHook.js
+function createHook(options) {
+  var _options$useState, _composedHooks$;
+  var composedHooks = toArray(options.compose);
+  var __useOptions = function __useOptions2(hookOptions, htmlProps) {
+    if (options.useOptions) {
+      hookOptions = options.useOptions(hookOptions, htmlProps);
+    }
+    if (options.name) {
+      hookOptions = useOptions(options.name, hookOptions, htmlProps);
+    }
+    if (options.compose) {
+      for (var _iterator = _createForOfIteratorHelperLoose2(composedHooks), _step; !(_step = _iterator()).done; ) {
+        var hook = _step.value;
+        hookOptions = hook.__useOptions(hookOptions, htmlProps);
+      }
+    }
+    return hookOptions;
+  };
+  var useHook = function useHook2(hookOptions, htmlProps, unstable_ignoreUseOptions) {
+    if (hookOptions === void 0) {
+      hookOptions = {};
+    }
+    if (htmlProps === void 0) {
+      htmlProps = {};
+    }
+    if (unstable_ignoreUseOptions === void 0) {
+      unstable_ignoreUseOptions = false;
+    }
+    if (!unstable_ignoreUseOptions) {
+      hookOptions = __useOptions(hookOptions, htmlProps);
+    }
+    if (options.useProps) {
+      htmlProps = options.useProps(hookOptions, htmlProps);
+    }
+    if (options.name) {
+      htmlProps = useProps(options.name, hookOptions, htmlProps);
+    }
+    if (options.compose) {
+      if (options.useComposeOptions) {
+        hookOptions = options.useComposeOptions(hookOptions, htmlProps);
+      }
+      if (options.useComposeProps) {
+        htmlProps = options.useComposeProps(hookOptions, htmlProps);
+      } else {
+        for (var _iterator2 = _createForOfIteratorHelperLoose2(composedHooks), _step2; !(_step2 = _iterator2()).done; ) {
+          var hook = _step2.value;
+          htmlProps = hook(hookOptions, htmlProps, true);
+        }
+      }
+    }
+    var finalHTMLProps = {};
+    var definedHTMLProps = htmlProps || {};
+    for (var prop in definedHTMLProps) {
+      if (definedHTMLProps[prop] !== void 0) {
+        finalHTMLProps[prop] = definedHTMLProps[prop];
+      }
+    }
+    return finalHTMLProps;
+  };
+  useHook.__useOptions = __useOptions;
+  var composedKeys = composedHooks.reduce(function(keys, hook) {
+    keys.push.apply(keys, hook.__keys || []);
+    return keys;
+  }, []);
+  useHook.__keys = [].concat(composedKeys, ((_options$useState = options.useState) === null || _options$useState === void 0 ? void 0 : _options$useState.__keys) || [], options.keys || []);
+  useHook.unstable_propsAreEqual = options.propsAreEqual || ((_composedHooks$ = composedHooks[0]) === null || _composedHooks$ === void 0 ? void 0 : _composedHooks$.unstable_propsAreEqual) || shallowEqual;
+  if (options.name) {
+    Object.defineProperty(useHook, \\"name\\", {
+      value: \\"use\\" + options.name
+    });
+  }
+  return useHook;
+}
+
+// node_modules/reakit/es/index.js
+import \\"react\\";
+
+// node_modules/reakit-utils/es/useForkRef.js
+import { useMemo } from \\"react\\";
+function setRef(ref, value) {
+  if (value === void 0) {
+    value = null;
+  }
+  if (!ref)
+    return;
+  if (typeof ref === \\"function\\") {
+    ref(value);
+  } else {
+    ref.current = value;
+  }
+}
+function useForkRef(refA, refB) {
+  return useMemo(function() {
+    if (refA == null && refB == null) {
+      return null;
+    }
+    return function(value) {
+      setRef(refA, value);
+      setRef(refB, value);
+    };
+  }, [refA, refB]);
+}
+
+// node_modules/reakit-utils/es/isButton.js
+var buttonInputTypes = [\\"button\\", \\"color\\", \\"file\\", \\"image\\", \\"reset\\", \\"submit\\"];
+function isButton(element) {
+  if (element.tagName === \\"BUTTON\\")
+    return true;
+  if (element.tagName === \\"INPUT\\") {
+    var input = element;
+    return buttonInputTypes.indexOf(input.type) !== -1;
+  }
+  return false;
+}
+
+// node_modules/reakit-utils/es/flatten.js
+function flatten(array) {
+  var flat = [];
+  for (var _iterator = _createForOfIteratorHelperLoose3(array), _step; !(_step = _iterator()).done; ) {
+    var maybeArray = _step.value;
+    if (Array.isArray(maybeArray)) {
+      flat.push.apply(flat, flatten(maybeArray));
+    } else {
+      flat.push(maybeArray);
+    }
+  }
+  return flat;
+}
+
+// node_modules/reakit-warning/es/warning.js
+function warning(condition) {
+  if (true) {
+    var _console;
+    if (!condition)
+      return;
+    for (var _len = arguments.length, messages = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      messages[_key - 1] = arguments[_key];
+    }
+    var warns = flatten(messages.map(function(message) {
+      return [message, \\"\\\\n\\"];
+    }));
+    (_console = console).warn.apply(_console, warns.slice(0, -1));
+    try {
+      throw Error(warns.join(\\"\\"));
+    } catch (x) {
+    }
+  }
+}
+
+// node_modules/reakit-warning/es/index.js
+import \\"react\\";
+
+// node_modules/reakit-warning/es/useWarning.js
+import { useEffect } from \\"react\\";
+
+// node_modules/reakit-utils/es/useLiveRef.js
+import { useRef } from \\"react\\";
+
+// node_modules/reakit-utils/es/getDocument.js
+function getDocument(element) {
+  return element ? element.ownerDocument || element : document;
+}
+
+// node_modules/reakit-utils/es/getWindow.js
+var _window;
+try {
+  _window = window;
+} catch (e) {
+}
+function getWindow(element) {
+  if (!element) {
+    return _window;
+  }
+  return getDocument(element).defaultView || _window;
+}
+
+// node_modules/reakit-utils/es/canUseDOM.js
+function checkIsBrowser() {
+  var _window2 = getWindow();
+  return Boolean(typeof _window2 !== \\"undefined\\" && _window2.document && _window2.document.createElement);
+}
+var canUseDOM = checkIsBrowser();
+
+// node_modules/reakit-utils/es/useIsomorphicEffect.js
+import { useEffect as useEffect2, useLayoutEffect } from \\"react\\";
+var useIsomorphicEffect = !canUseDOM ? useEffect2 : useLayoutEffect;
+
+// node_modules/reakit-utils/es/useLiveRef.js
+function useLiveRef(value) {
+  var ref = useRef(value);
+  useIsomorphicEffect(function() {
+    ref.current = value;
+  });
+  return ref;
+}
+
+// node_modules/reakit-utils/es/isSelfTarget.js
+function isSelfTarget(event) {
+  return event.target === event.currentTarget;
+}
+
+// node_modules/reakit-utils/es/getActiveElement.js
+function getActiveElement(element) {
+  var _getDocument = getDocument(element), activeElement = _getDocument.activeElement;
+  if (!(activeElement !== null && activeElement !== void 0 && activeElement.nodeName)) {
+    return null;
+  }
+  return activeElement;
+}
+
+// node_modules/reakit-utils/es/contains.js
+function contains(parent, child) {
+  return parent === child || parent.contains(child);
+}
+
+// node_modules/reakit-utils/es/hasFocusWithin.js
+function hasFocusWithin(element) {
+  var activeElement = getActiveElement(element);
+  if (!activeElement)
+    return false;
+  if (contains(element, activeElement))
+    return true;
+  var activeDescendant = activeElement.getAttribute(\\"aria-activedescendant\\");
+  if (!activeDescendant)
+    return false;
+  if (activeDescendant === element.id)
+    return true;
+  return !!element.querySelector(\\"#\\" + activeDescendant);
+}
+
+// node_modules/reakit-utils/es/isPortalEvent.js
+function isPortalEvent(event) {
+  return !contains(event.currentTarget, event.target);
+}
+
+// node_modules/reakit-utils/es/dom.js
+function isUA(string) {
+  if (!canUseDOM)
+    return false;
+  return window.navigator.userAgent.indexOf(string) !== -1;
+}
+
+// node_modules/reakit-utils/es/matches.js
+function matches(element, selectors) {
+  if (\\"matches\\" in element) {
+    return element.matches(selectors);
+  }
+  if (\\"msMatchesSelector\\" in element) {
+    return element.msMatchesSelector(selectors);
+  }
+  return element.webkitMatchesSelector(selectors);
+}
+
+// node_modules/reakit-utils/es/tabbable.js
+var selector = \\"input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])\\";
+function isVisible(element) {
+  var htmlElement = element;
+  return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0;
+}
+function isFocusable(element) {
+  return matches(element, selector) && isVisible(element);
+}
+
+// node_modules/reakit/es/Role/Role.js
+var ROLE_KEYS = [\\"unstable_system\\"];
+var useRole = createHook({
+  name: \\"Role\\",
+  keys: ROLE_KEYS,
+  propsAreEqual: function propsAreEqual(prev, next) {
+    var prevSystem = prev.unstable_system, prevProps = _objectWithoutPropertiesLoose(prev, [\\"unstable_system\\"]);
+    var nextSystem = next.unstable_system, nextProps = _objectWithoutPropertiesLoose(next, [\\"unstable_system\\"]);
+    if (prevSystem !== nextSystem && !shallowEqual(prevSystem, nextSystem)) {
+      return false;
+    }
+    return shallowEqual(prevProps, nextProps);
+  }
+});
+var Role = createComponent({
+  as: \\"div\\",
+  useHook: useRole
+});
+
+// node_modules/reakit/es/Tabbable/Tabbable.js
+import { useRef as useRef2, useState, useCallback } from \\"react\\";
+var TABBABLE_KEYS = [\\"disabled\\", \\"focusable\\"];
+var isSafariOrFirefoxOnMac = isUA(\\"Mac\\") && !isUA(\\"Chrome\\") && (isUA(\\"Safari\\") || isUA(\\"Firefox\\"));
+function focusIfNeeded(element) {
+  if (!hasFocusWithin(element) && isFocusable(element)) {
+    element.focus();
+  }
+}
+function isNativeTabbable(element) {
+  return [\\"BUTTON\\", \\"INPUT\\", \\"SELECT\\", \\"TEXTAREA\\", \\"A\\"].includes(element.tagName);
+}
+function supportsDisabledAttribute(element) {
+  return [\\"BUTTON\\", \\"INPUT\\", \\"SELECT\\", \\"TEXTAREA\\"].includes(element.tagName);
+}
+function getTabIndex(trulyDisabled, nativeTabbable, supportsDisabled, htmlTabIndex) {
+  if (trulyDisabled) {
+    if (nativeTabbable && !supportsDisabled) {
+      return -1;
+    }
+    return void 0;
+  }
+  if (nativeTabbable) {
+    return htmlTabIndex;
+  }
+  return htmlTabIndex || 0;
+}
+function useDisableEvent(htmlEventRef, disabled) {
+  return useCallback(function(event) {
+    var _htmlEventRef$current;
+    (_htmlEventRef$current = htmlEventRef.current) === null || _htmlEventRef$current === void 0 ? void 0 : _htmlEventRef$current.call(htmlEventRef, event);
+    if (event.defaultPrevented)
+      return;
+    if (disabled) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [htmlEventRef, disabled]);
+}
+var useTabbable = createHook({
+  name: \\"Tabbable\\",
+  compose: useRole,
+  keys: TABBABLE_KEYS,
+  useOptions: function useOptions2(options, _ref) {
+    var disabled = _ref.disabled;
+    return _objectSpread2({
+      disabled
+    }, options);
+  },
+  useProps: function useProps2(options, _ref2) {
+    var htmlRef = _ref2.ref, htmlTabIndex = _ref2.tabIndex, htmlOnClickCapture = _ref2.onClickCapture, htmlOnMouseDownCapture = _ref2.onMouseDownCapture, htmlOnMouseDown = _ref2.onMouseDown, htmlOnKeyPressCapture = _ref2.onKeyPressCapture, htmlStyle = _ref2.style, htmlProps = _objectWithoutPropertiesLoose(_ref2, [\\"ref\\", \\"tabIndex\\", \\"onClickCapture\\", \\"onMouseDownCapture\\", \\"onMouseDown\\", \\"onKeyPressCapture\\", \\"style\\"]);
+    var ref = useRef2(null);
+    var onClickCaptureRef = useLiveRef(htmlOnClickCapture);
+    var onMouseDownCaptureRef = useLiveRef(htmlOnMouseDownCapture);
+    var onMouseDownRef = useLiveRef(htmlOnMouseDown);
+    var onKeyPressCaptureRef = useLiveRef(htmlOnKeyPressCapture);
+    var trulyDisabled = !!options.disabled && !options.focusable;
+    var _React$useState = useState(true), nativeTabbable = _React$useState[0], setNativeTabbable = _React$useState[1];
+    var _React$useState2 = useState(true), supportsDisabled = _React$useState2[0], setSupportsDisabled = _React$useState2[1];
+    var style = options.disabled ? _objectSpread2({
+      pointerEvents: \\"none\\"
+    }, htmlStyle) : htmlStyle;
+    useIsomorphicEffect(function() {
+      var tabbable = ref.current;
+      if (!tabbable) {
+        true ? warning(true, \\"Can't determine if the element is a native tabbable element because \`ref\` wasn't passed to the component.\\", \\"See https://reakit.io/docs/tabbable\\") : void 0;
+        return;
+      }
+      if (!isNativeTabbable(tabbable)) {
+        setNativeTabbable(false);
+      }
+      if (!supportsDisabledAttribute(tabbable)) {
+        setSupportsDisabled(false);
+      }
+    }, []);
+    var onClickCapture = useDisableEvent(onClickCaptureRef, options.disabled);
+    var onMouseDownCapture = useDisableEvent(onMouseDownCaptureRef, options.disabled);
+    var onKeyPressCapture = useDisableEvent(onKeyPressCaptureRef, options.disabled);
+    var onMouseDown = useCallback(function(event) {
+      var _onMouseDownRef$curre;
+      (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event);
+      var element = event.currentTarget;
+      if (event.defaultPrevented)
+        return;
+      if (!isSafariOrFirefoxOnMac)
+        return;
+      if (isPortalEvent(event))
+        return;
+      if (!isButton(element))
+        return;
+      var raf = requestAnimationFrame(function() {
+        element.removeEventListener(\\"mouseup\\", focusImmediately, true);
+        focusIfNeeded(element);
+      });
+      var focusImmediately = function focusImmediately2() {
+        cancelAnimationFrame(raf);
+        focusIfNeeded(element);
+      };
+      element.addEventListener(\\"mouseup\\", focusImmediately, {
+        once: true,
+        capture: true
+      });
+    }, []);
+    return _objectSpread2({
+      ref: useForkRef(ref, htmlRef),
+      style,
+      tabIndex: getTabIndex(trulyDisabled, nativeTabbable, supportsDisabled, htmlTabIndex),
+      disabled: trulyDisabled && supportsDisabled ? true : void 0,
+      \\"aria-disabled\\": options.disabled ? true : void 0,
+      onClickCapture,
+      onMouseDownCapture,
+      onMouseDown,
+      onKeyPressCapture
+    }, htmlProps);
+  }
+});
+var Tabbable = createComponent({
+  as: \\"div\\",
+  useHook: useTabbable
+});
+
+// node_modules/reakit/es/Clickable/Clickable.js
+import { useState as useState2, useCallback as useCallback2 } from \\"react\\";
+var CLICKABLE_KEYS = [\\"unstable_clickOnEnter\\", \\"unstable_clickOnSpace\\"];
+function isNativeClick(event) {
+  var element = event.currentTarget;
+  if (!event.isTrusted)
+    return false;
+  return isButton(element) || element.tagName === \\"INPUT\\" || element.tagName === \\"TEXTAREA\\" || element.tagName === \\"A\\" || element.tagName === \\"SELECT\\";
+}
+var useClickable = createHook({
+  name: \\"Clickable\\",
+  compose: useTabbable,
+  keys: CLICKABLE_KEYS,
+  useOptions: function useOptions3(_ref) {
+    var _ref$unstable_clickOn = _ref.unstable_clickOnEnter, unstable_clickOnEnter = _ref$unstable_clickOn === void 0 ? true : _ref$unstable_clickOn, _ref$unstable_clickOn2 = _ref.unstable_clickOnSpace, unstable_clickOnSpace = _ref$unstable_clickOn2 === void 0 ? true : _ref$unstable_clickOn2, options = _objectWithoutPropertiesLoose(_ref, [\\"unstable_clickOnEnter\\", \\"unstable_clickOnSpace\\"]);
+    return _objectSpread2({
+      unstable_clickOnEnter,
+      unstable_clickOnSpace
+    }, options);
+  },
+  useProps: function useProps3(options, _ref2) {
+    var htmlOnKeyDown = _ref2.onKeyDown, htmlOnKeyUp = _ref2.onKeyUp, htmlProps = _objectWithoutPropertiesLoose(_ref2, [\\"onKeyDown\\", \\"onKeyUp\\"]);
+    var _React$useState = useState2(false), active = _React$useState[0], setActive = _React$useState[1];
+    var onKeyDownRef = useLiveRef(htmlOnKeyDown);
+    var onKeyUpRef = useLiveRef(htmlOnKeyUp);
+    var onKeyDown = useCallback2(function(event) {
+      var _onKeyDownRef$current;
+      (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event);
+      if (event.defaultPrevented)
+        return;
+      if (options.disabled)
+        return;
+      if (event.metaKey)
+        return;
+      if (!isSelfTarget(event))
+        return;
+      var isEnter = options.unstable_clickOnEnter && event.key === \\"Enter\\";
+      var isSpace = options.unstable_clickOnSpace && event.key === \\" \\";
+      if (isEnter || isSpace) {
+        if (isNativeClick(event))
+          return;
+        event.preventDefault();
+        if (isEnter) {
+          event.currentTarget.click();
+        } else if (isSpace) {
+          setActive(true);
+        }
+      }
+    }, [options.disabled, options.unstable_clickOnEnter, options.unstable_clickOnSpace]);
+    var onKeyUp = useCallback2(function(event) {
+      var _onKeyUpRef$current;
+      (_onKeyUpRef$current = onKeyUpRef.current) === null || _onKeyUpRef$current === void 0 ? void 0 : _onKeyUpRef$current.call(onKeyUpRef, event);
+      if (event.defaultPrevented)
+        return;
+      if (options.disabled)
+        return;
+      if (event.metaKey)
+        return;
+      var isSpace = options.unstable_clickOnSpace && event.key === \\" \\";
+      if (active && isSpace) {
+        setActive(false);
+        event.currentTarget.click();
+      }
+    }, [options.disabled, options.unstable_clickOnSpace, active]);
+    return _objectSpread2({
+      \\"data-active\\": active || void 0,
+      onKeyDown,
+      onKeyUp
+    }, htmlProps);
+  }
+});
+var Clickable = createComponent({
+  as: \\"button\\",
+  memo: true,
+  useHook: useClickable
+});
+
+// node_modules/reakit-utils/es/createEvent.js
+function createEvent(element, type, eventInit) {
+  if (typeof Event === \\"function\\") {
+    return new Event(type, eventInit);
+  }
+  var event = getDocument(element).createEvent(\\"Event\\");
+  event.initEvent(type, eventInit === null || eventInit === void 0 ? void 0 : eventInit.bubbles, eventInit === null || eventInit === void 0 ? void 0 : eventInit.cancelable);
+  return event;
+}
+
+// node_modules/reakit/es/getCurrentId-5aa9849e.js
+function findFirstEnabledItem(items, excludeId) {
+  if (excludeId) {
+    return items.find(function(item) {
+      return !item.disabled && item.id !== excludeId;
+    });
+  }
+  return items.find(function(item) {
+    return !item.disabled;
+  });
+}
+function getCurrentId(options, passedId) {
+  var _findFirstEnabledItem;
+  if (passedId || passedId === null) {
+    return passedId;
+  }
+  if (options.currentId || options.currentId === null) {
+    return options.currentId;
+  }
+  return (_findFirstEnabledItem = findFirstEnabledItem(options.items || [])) === null || _findFirstEnabledItem === void 0 ? void 0 : _findFirstEnabledItem.id;
+}
+
+// node_modules/reakit/es/__keys-6742f591.js
+var COMPOSITE_STATE_KEYS = [\\"baseId\\", \\"unstable_idCountRef\\", \\"setBaseId\\", \\"unstable_virtual\\", \\"rtl\\", \\"orientation\\", \\"items\\", \\"groups\\", \\"currentId\\", \\"loop\\", \\"wrap\\", \\"shift\\", \\"unstable_moves\\", \\"unstable_hasActiveWidget\\", \\"unstable_includesBaseElement\\", \\"registerItem\\", \\"unregisterItem\\", \\"registerGroup\\", \\"unregisterGroup\\", \\"move\\", \\"next\\", \\"previous\\", \\"up\\", \\"down\\", \\"first\\", \\"last\\", \\"sort\\", \\"unstable_setVirtual\\", \\"setRTL\\", \\"setOrientation\\", \\"setCurrentId\\", \\"setLoop\\", \\"setWrap\\", \\"setShift\\", \\"reset\\", \\"unstable_setIncludesBaseElement\\", \\"unstable_setHasActiveWidget\\"];
+var COMPOSITE_KEYS = COMPOSITE_STATE_KEYS;
+var COMPOSITE_GROUP_KEYS = COMPOSITE_KEYS;
+var COMPOSITE_ITEM_KEYS = COMPOSITE_GROUP_KEYS;
+
+// node_modules/reakit/es/userFocus-e16425e3.js
+function userFocus(element) {
+  element.userFocus = true;
+  element.focus();
+  element.userFocus = false;
+}
+function hasUserFocus(element) {
+  return !!element.userFocus;
+}
+function setUserFocus(element, value) {
+  element.userFocus = value;
+}
+
+// node_modules/reakit-utils/es/isTextField.js
+function isTextField(element) {
+  try {
+    var isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null;
+    var isTextArea = element.tagName === \\"TEXTAREA\\";
+    var isContentEditable = element.contentEditable === \\"true\\";
+    return isTextInput || isTextArea || isContentEditable || false;
+  } catch (error) {
+    return false;
+  }
+}
+
+// node_modules/reakit-utils/es/hasFocus.js
+function hasFocus(element) {
+  var activeElement = getActiveElement(element);
+  if (!activeElement)
+    return false;
+  if (activeElement === element)
+    return true;
+  var activeDescendant = activeElement.getAttribute(\\"aria-activedescendant\\");
+  if (!activeDescendant)
+    return false;
+  return activeDescendant === element.id;
+}
+
+// node_modules/reakit-utils/es/ensureFocus.js
+function ensureFocus(element, _temp) {
+  var _ref = _temp === void 0 ? {} : _temp, preventScroll = _ref.preventScroll, _ref$isActive = _ref.isActive, isActive = _ref$isActive === void 0 ? hasFocus : _ref$isActive;
+  if (isActive(element))
+    return -1;
+  element.focus({
+    preventScroll
+  });
+  if (isActive(element))
+    return -1;
+  return requestAnimationFrame(function() {
+    element.focus({
+      preventScroll
+    });
+  });
+}
+
+// node_modules/reakit/es/Id/IdProvider.js
+import { createContext as createContext2, useRef as useRef3, useCallback as useCallback3, createElement as createElement2 } from \\"react\\";
+var defaultPrefix = \\"id\\";
+function generateRandomString(prefix) {
+  if (prefix === void 0) {
+    prefix = defaultPrefix;
+  }
+  return (prefix ? prefix + \\"-\\" : \\"\\") + Math.random().toString(32).substr(2, 6);
+}
+var unstable_IdContext = /* @__PURE__ */ createContext2(generateRandomString);
+
+// node_modules/reakit/es/Id/Id.js
+import { useContext as useContext3, useState as useState3, useMemo as useMemo2 } from \\"react\\";
+var ID_STATE_KEYS = [\\"baseId\\", \\"unstable_idCountRef\\", \\"setBaseId\\"];
+var ID_KEYS = [].concat(ID_STATE_KEYS, [\\"id\\"]);
+var unstable_useId = createHook({
+  keys: ID_KEYS,
+  useOptions: function useOptions4(options, htmlProps) {
+    var generateId = useContext3(unstable_IdContext);
+    var _React$useState = useState3(function() {
+      if (options.unstable_idCountRef) {
+        options.unstable_idCountRef.current += 1;
+        return \\"-\\" + options.unstable_idCountRef.current;
+      }
+      if (options.baseId) {
+        return \\"-\\" + generateId(\\"\\");
+      }
+      return \\"\\";
+    }), suffix = _React$useState[0];
+    var baseId = useMemo2(function() {
+      return options.baseId || generateId();
+    }, [options.baseId, generateId]);
+    var id = htmlProps.id || options.id || \\"\\" + baseId + suffix;
+    return _objectSpread2(_objectSpread2({}, options), {}, {
+      id
+    });
+  },
+  useProps: function useProps4(options, htmlProps) {
+    return _objectSpread2({
+      id: options.id
+    }, htmlProps);
+  }
+});
+var unstable_Id = createComponent({
+  as: \\"div\\",
+  useHook: unstable_useId
+});
+
+// node_modules/reakit-utils/es/fireEvent.js
+function fireEvent(element, type, eventInit) {
+  return element.dispatchEvent(createEvent(element, type, eventInit));
+}
+
+// node_modules/reakit/es/setTextFieldValue-0a221f4e.js
+function setTextFieldValue(element, value) {
+  if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+    var _Object$getOwnPropert;
+    var proto = Object.getPrototypeOf(element);
+    var setValue = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(proto, \\"value\\")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
+    if (setValue) {
+      setValue.call(element, value);
+      fireEvent(element, \\"input\\", {
+        bubbles: true
+      });
+    }
+  }
+}
+
+// node_modules/reakit/es/Composite/CompositeItem.js
+import { useRef as useRef4, useMemo as useMemo3, useEffect as useEffect3, useCallback as useCallback4 } from \\"react\\";
+function getWidget(itemElement) {
+  return itemElement.querySelector(\\"[data-composite-item-widget]\\");
+}
+function useItem(options) {
+  return useMemo3(function() {
+    var _options$items;
+    return (_options$items = options.items) === null || _options$items === void 0 ? void 0 : _options$items.find(function(item) {
+      return options.id && item.id === options.id;
+    });
+  }, [options.items, options.id]);
+}
+function targetIsAnotherItem(event, items) {
+  if (isSelfTarget(event))
+    return false;
+  for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done; ) {
+    var item = _step.value;
+    if (item.ref.current === event.target) {
+      return true;
+    }
+  }
+  return false;
+}
+var useCompositeItem = createHook({
+  name: \\"CompositeItem\\",
+  compose: [useClickable, unstable_useId],
+  keys: COMPOSITE_ITEM_KEYS,
+  propsAreEqual: function propsAreEqual2(prev, next) {
+    if (!next.id || prev.id !== next.id) {
+      return useClickable.unstable_propsAreEqual(prev, next);
+    }
+    var prevCurrentId = prev.currentId, prevMoves = prev.unstable_moves, prevProps = _objectWithoutPropertiesLoose(prev, [\\"currentId\\", \\"unstable_moves\\"]);
+    var nextCurrentId = next.currentId, nextMoves = next.unstable_moves, nextProps = _objectWithoutPropertiesLoose(next, [\\"currentId\\", \\"unstable_moves\\"]);
+    if (nextCurrentId !== prevCurrentId) {
+      if (next.id === nextCurrentId || next.id === prevCurrentId) {
+        return false;
+      }
+    } else if (prevMoves !== nextMoves) {
+      return false;
+    }
+    return useClickable.unstable_propsAreEqual(prevProps, nextProps);
+  },
+  useOptions: function useOptions5(options) {
+    return _objectSpread2(_objectSpread2({}, options), {}, {
+      id: options.id,
+      currentId: getCurrentId(options),
+      unstable_clickOnSpace: options.unstable_hasActiveWidget ? false : options.unstable_clickOnSpace
+    });
+  },
+  useProps: function useProps5(options, _ref) {
+    var _options$items2;
+    var htmlRef = _ref.ref, _ref$tabIndex = _ref.tabIndex, htmlTabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex, htmlOnMouseDown = _ref.onMouseDown, htmlOnFocus = _ref.onFocus, htmlOnBlurCapture = _ref.onBlurCapture, htmlOnKeyDown = _ref.onKeyDown, htmlOnClick = _ref.onClick, htmlProps = _objectWithoutPropertiesLoose(_ref, [\\"ref\\", \\"tabIndex\\", \\"onMouseDown\\", \\"onFocus\\", \\"onBlurCapture\\", \\"onKeyDown\\", \\"onClick\\"]);
+    var ref = useRef4(null);
+    var id = options.id;
+    var trulyDisabled = options.disabled && !options.focusable;
+    var isCurrentItem = options.currentId === id;
+    var isCurrentItemRef = useLiveRef(isCurrentItem);
+    var hasFocusedComposite = useRef4(false);
+    var item = useItem(options);
+    var onMouseDownRef = useLiveRef(htmlOnMouseDown);
+    var onFocusRef = useLiveRef(htmlOnFocus);
+    var onBlurCaptureRef = useLiveRef(htmlOnBlurCapture);
+    var onKeyDownRef = useLiveRef(htmlOnKeyDown);
+    var onClickRef = useLiveRef(htmlOnClick);
+    var shouldTabIndex = !options.unstable_virtual && !options.unstable_hasActiveWidget && isCurrentItem || !((_options$items2 = options.items) !== null && _options$items2 !== void 0 && _options$items2.length);
+    useEffect3(function() {
+      var _options$registerItem;
+      if (!id)
+        return void 0;
+      (_options$registerItem = options.registerItem) === null || _options$registerItem === void 0 ? void 0 : _options$registerItem.call(options, {
+        id,
+        ref,
+        disabled: !!trulyDisabled
+      });
+      return function() {
+        var _options$unregisterIt;
+        (_options$unregisterIt = options.unregisterItem) === null || _options$unregisterIt === void 0 ? void 0 : _options$unregisterIt.call(options, id);
+      };
+    }, [id, trulyDisabled, options.registerItem, options.unregisterItem]);
+    useEffect3(function() {
+      var element = ref.current;
+      if (!element) {
+        true ? warning(true, \\"Can't focus composite item component because \`ref\` wasn't passed to component.\\", \\"See https://reakit.io/docs/composite\\") : void 0;
+        return;
+      }
+      if (options.unstable_moves && isCurrentItemRef.current) {
+        userFocus(element);
+      }
+    }, [options.unstable_moves]);
+    var onMouseDown = useCallback4(function(event) {
+      var _onMouseDownRef$curre;
+      (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event);
+      setUserFocus(event.currentTarget, true);
+    }, []);
+    var onFocus = useCallback4(function(event) {
+      var _onFocusRef$current, _options$setCurrentId;
+      var shouldFocusComposite = hasUserFocus(event.currentTarget);
+      setUserFocus(event.currentTarget, false);
+      (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event);
+      if (event.defaultPrevented)
+        return;
+      if (isPortalEvent(event))
+        return;
+      if (!id)
+        return;
+      if (targetIsAnotherItem(event, options.items))
+        return;
+      (_options$setCurrentId = options.setCurrentId) === null || _options$setCurrentId === void 0 ? void 0 : _options$setCurrentId.call(options, id);
+      if (shouldFocusComposite && options.unstable_virtual && options.baseId && isSelfTarget(event)) {
+        var target = event.target;
+        var composite = getDocument(target).getElementById(options.baseId);
+        if (composite) {
+          hasFocusedComposite.current = true;
+          ensureFocus(composite);
+        }
+      }
+    }, [id, options.items, options.setCurrentId, options.unstable_virtual, options.baseId]);
+    var onBlurCapture = useCallback4(function(event) {
+      var _onBlurCaptureRef$cur;
+      (_onBlurCaptureRef$cur = onBlurCaptureRef.current) === null || _onBlurCaptureRef$cur === void 0 ? void 0 : _onBlurCaptureRef$cur.call(onBlurCaptureRef, event);
+      if (event.defaultPrevented)
+        return;
+      if (options.unstable_virtual && hasFocusedComposite.current) {
+        hasFocusedComposite.current = false;
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }, [options.unstable_virtual]);
+    var onKeyDown = useCallback4(function(event) {
+      var _onKeyDownRef$current;
+      if (!isSelfTarget(event))
+        return;
+      var isVertical = options.orientation !== \\"horizontal\\";
+      var isHorizontal = options.orientation !== \\"vertical\\";
+      var isGrid = !!(item !== null && item !== void 0 && item.groupId);
+      var keyMap = {
+        ArrowUp: (isGrid || isVertical) && options.up,
+        ArrowRight: (isGrid || isHorizontal) && options.next,
+        ArrowDown: (isGrid || isVertical) && options.down,
+        ArrowLeft: (isGrid || isHorizontal) && options.previous,
+        Home: function Home() {
+          if (!isGrid || event.ctrlKey) {
+            var _options$first;
+            (_options$first = options.first) === null || _options$first === void 0 ? void 0 : _options$first.call(options);
+          } else {
+            var _options$previous;
+            (_options$previous = options.previous) === null || _options$previous === void 0 ? void 0 : _options$previous.call(options, true);
+          }
+        },
+        End: function End() {
+          if (!isGrid || event.ctrlKey) {
+            var _options$last;
+            (_options$last = options.last) === null || _options$last === void 0 ? void 0 : _options$last.call(options);
+          } else {
+            var _options$next;
+            (_options$next = options.next) === null || _options$next === void 0 ? void 0 : _options$next.call(options, true);
+          }
+        },
+        PageUp: function PageUp() {
+          if (isGrid) {
+            var _options$up;
+            (_options$up = options.up) === null || _options$up === void 0 ? void 0 : _options$up.call(options, true);
+          } else {
+            var _options$first2;
+            (_options$first2 = options.first) === null || _options$first2 === void 0 ? void 0 : _options$first2.call(options);
+          }
+        },
+        PageDown: function PageDown() {
+          if (isGrid) {
+            var _options$down;
+            (_options$down = options.down) === null || _options$down === void 0 ? void 0 : _options$down.call(options, true);
+          } else {
+            var _options$last2;
+            (_options$last2 = options.last) === null || _options$last2 === void 0 ? void 0 : _options$last2.call(options);
+          }
+        }
+      };
+      var action = keyMap[event.key];
+      if (action) {
+        event.preventDefault();
+        action();
+        return;
+      }
+      (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event);
+      if (event.defaultPrevented)
+        return;
+      if (event.key.length === 1 && event.key !== \\" \\") {
+        var widget = getWidget(event.currentTarget);
+        if (widget && isTextField(widget)) {
+          widget.focus();
+          setTextFieldValue(widget, \\"\\");
+        }
+      } else if (event.key === \\"Delete\\" || event.key === \\"Backspace\\") {
+        var _widget = getWidget(event.currentTarget);
+        if (_widget && isTextField(_widget)) {
+          event.preventDefault();
+          setTextFieldValue(_widget, \\"\\");
+        }
+      }
+    }, [options.orientation, item, options.up, options.next, options.down, options.previous, options.first, options.last]);
+    var onClick = useCallback4(function(event) {
+      var _onClickRef$current;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event);
+      if (event.defaultPrevented)
+        return;
+      var element = event.currentTarget;
+      var widget = getWidget(element);
+      if (widget && !hasFocusWithin(widget)) {
+        widget.focus();
+      }
+    }, []);
+    return _objectSpread2({
+      ref: useForkRef(ref, htmlRef),
+      id,
+      tabIndex: shouldTabIndex ? htmlTabIndex : -1,
+      \\"aria-selected\\": options.unstable_virtual && isCurrentItem ? true : void 0,
+      onMouseDown,
+      onFocus,
+      onBlurCapture,
+      onKeyDown,
+      onClick
+    }, htmlProps);
+  }
+});
+var CompositeItem = createComponent({
+  as: \\"button\\",
+  memo: true,
+  useHook: useCompositeItem
+});
+
+// node_modules/reakit/es/index.js
+import \\"react-dom\\";
+
+// node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js
+var hasPassiveEvents = false;
+if (typeof window !== \\"undefined\\") {
+  passiveTestOptions = {
+    get passive() {
+      hasPassiveEvents = true;
+      return void 0;
+    }
+  };
+  window.addEventListener(\\"testPassive\\", null, passiveTestOptions);
+  window.removeEventListener(\\"testPassive\\", null, passiveTestOptions);
+}
+var passiveTestOptions;
+var isIosDevice = typeof window !== \\"undefined\\" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === \\"MacIntel\\" && window.navigator.maxTouchPoints > 1);
+
+// node_modules/reakit/es/__keys-3c0b2243.js
+var TAB_STATE_KEYS = [\\"baseId\\", \\"unstable_idCountRef\\", \\"unstable_virtual\\", \\"rtl\\", \\"orientation\\", \\"items\\", \\"groups\\", \\"currentId\\", \\"loop\\", \\"wrap\\", \\"shift\\", \\"unstable_moves\\", \\"unstable_hasActiveWidget\\", \\"unstable_includesBaseElement\\", \\"selectedId\\", \\"panels\\", \\"manual\\", \\"setBaseId\\", \\"registerItem\\", \\"unregisterItem\\", \\"registerGroup\\", \\"unregisterGroup\\", \\"move\\", \\"next\\", \\"previous\\", \\"up\\", \\"down\\", \\"first\\", \\"last\\", \\"sort\\", \\"unstable_setVirtual\\", \\"setRTL\\", \\"setOrientation\\", \\"setCurrentId\\", \\"setLoop\\", \\"setWrap\\", \\"setShift\\", \\"reset\\", \\"unstable_setIncludesBaseElement\\", \\"unstable_setHasActiveWidget\\", \\"select\\", \\"setSelectedId\\", \\"registerPanel\\", \\"unregisterPanel\\"];
+var TAB_KEYS = TAB_STATE_KEYS;
+var TAB_LIST_KEYS = TAB_KEYS;
+var TAB_PANEL_KEYS = [].concat(TAB_LIST_KEYS, [\\"tabId\\"]);
+
+// node_modules/reakit/es/Tab/Tab.js
+import { useMemo as useMemo4, useCallback as useCallback5 } from \\"react\\";
+function useTabPanelId(options) {
+  return useMemo4(function() {
+    var _options$panels, _options$panels$find;
+    return ((_options$panels = options.panels) === null || _options$panels === void 0 ? void 0 : (_options$panels$find = _options$panels.find(function(panel) {
+      return panel.groupId === options.id;
+    })) === null || _options$panels$find === void 0 ? void 0 : _options$panels$find.id) || void 0;
+  }, [options.panels, options.id]);
+}
+var useTab = createHook({
+  name: \\"Tab\\",
+  compose: useCompositeItem,
+  keys: TAB_KEYS,
+  useOptions: function useOptions6(_ref) {
+    var _ref$focusable = _ref.focusable, focusable = _ref$focusable === void 0 ? true : _ref$focusable, options = _objectWithoutPropertiesLoose(_ref, [\\"focusable\\"]);
+    return _objectSpread2({
+      focusable
+    }, options);
+  },
+  useProps: function useProps6(options, _ref2) {
+    var htmlOnClick = _ref2.onClick, htmlOnFocus = _ref2.onFocus, htmlProps = _objectWithoutPropertiesLoose(_ref2, [\\"onClick\\", \\"onFocus\\"]);
+    var selected = options.selectedId === options.id;
+    var tabPanelId = useTabPanelId(options);
+    var onClickRef = useLiveRef(htmlOnClick);
+    var onFocusRef = useLiveRef(htmlOnFocus);
+    var onClick = useCallback5(function(event) {
+      var _onClickRef$current, _options$select;
+      (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event);
+      if (event.defaultPrevented)
+        return;
+      if (options.disabled)
+        return;
+      if (!options.id)
+        return;
+      if (selected)
+        return;
+      (_options$select = options.select) === null || _options$select === void 0 ? void 0 : _options$select.call(options, options.id);
+    }, [options.disabled, selected, options.select, options.id]);
+    var onFocus = useCallback5(function(event) {
+      var _onFocusRef$current, _options$select2;
+      (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event);
+      if (event.defaultPrevented)
+        return;
+      if (options.disabled)
+        return;
+      if (options.manual)
+        return;
+      if (!options.id)
+        return;
+      if (selected)
+        return;
+      (_options$select2 = options.select) === null || _options$select2 === void 0 ? void 0 : _options$select2.call(options, options.id);
+    }, [options.id, options.disabled, options.manual, selected, options.select]);
+    return _objectSpread2({
+      role: \\"tab\\",
+      \\"aria-selected\\": selected,
+      \\"aria-controls\\": tabPanelId,
+      onClick,
+      onFocus
+    }, htmlProps);
+  }
+});
+var Tab = createComponent({
+  as: \\"button\\",
+  memo: true,
+  useHook: useTab
+});
+
+// tools/build/__fixtures__/random_package/src/index.tsx
 var import_use_clipboard_copy = __toESM(require_dist());
 var import_camelCase = __toESM(require_camelCase());
-import * as React from \\"react\\";
 import DefaultRawTokenJSON from \\"@twilio-paste/design-tokens/dist/tokens.raw.json\\";
 var DEPRECATE_TOKENS = Object.values(DefaultRawTokenJSON.props).filter((token) => token.deprecated).map((deprecatedToken) => (0, import_camelCase.default)(deprecatedToken.name));
 var convertRawTokenJSONToArray = (rawTokens) => {
@@ -1344,7 +2365,7 @@ var getContrastRatingsOfTokensWithTextContrastRequirements = () => {
   const tokenWithTextContrastRequirements = getTokensWithTextContrastRequirements(defaultThemeRawJSON);
 };
 var RandomComponent = () => {
-  return /* @__PURE__ */ React.createElement(import_react_autosize_textarea.default, null);
+  return /* @__PURE__ */ React.createElement(Tab, null);
 };
 var export_useClipboard = import_use_clipboard_copy.useClipboard;
 export {
@@ -1355,10 +2376,5 @@ export {
   getTokensWithTextContrastRequirements,
   export_useClipboard as useClipboard
 };
-/*!
-	autosize 4.0.4
-	license: MIT
-	http://www.jacklmoore.com/autosize
-*/
 "
 `;
diff --git a/tools/build/__tests__/compiledImports.test.ts b/tools/build/__tests__/compiledImports.test.ts
index bd04d30308..af1a5ec4f3 100644
--- a/tools/build/__tests__/compiledImports.test.ts
+++ b/tools/build/__tests__/compiledImports.test.ts
@@ -20,7 +20,6 @@ describe('esbuild config', () => {
       dependencies: {
         csstype: '^3.0.2',
         lodash: '^4.17.21',
-        'react-autosize-textarea': '7.1.0',
         'use-clipboard-copy': '0.2.0',
       },
       peerDependencies: {
diff --git a/yarn.lock b/yarn.lock
index ecb11dceee..a8a9dbe2b6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9873,6 +9873,7 @@ __metadata:
     "@twilio-paste/paragraph": ^6.0.0
     "@twilio-paste/popover": ^9.0.1
     "@twilio-paste/radio-group": ^9.0.0
+    "@twilio-paste/react-textarea-autosize-library": ^0.0.1
     "@twilio-paste/reakit-library": ^0.8.5
     "@twilio-paste/screen-reader-only": ^9.0.0
     "@twilio-paste/select": ^8.0.0
@@ -10820,6 +10821,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@twilio-paste/react-textarea-autosize-library@^0.0.1, @twilio-paste/react-textarea-autosize-library@workspace:packages/paste-libraries/react-textarea-autosize":
+  version: 0.0.0-use.local
+  resolution: "@twilio-paste/react-textarea-autosize-library@workspace:packages/paste-libraries/react-textarea-autosize"
+  dependencies:
+    react: ^17.0.2
+    react-dom: ^17.0.2
+    use-composed-ref: ^1.3.0
+    use-latest: ^1.2.1
+  peerDependencies:
+    react: ^16.8.6 || ^17.0.2
+    react-dom: ^16.8.6 || ^17.0.2
+  languageName: unknown
+  linkType: soft
+
 "@twilio-paste/reakit-library@^0.8.4, @twilio-paste/reakit-library@^0.8.5, @twilio-paste/reakit-library@workspace:packages/paste-libraries/reakit":
   version: 0.0.0-use.local
   resolution: "@twilio-paste/reakit-library@workspace:packages/paste-libraries/reakit"
@@ -11183,6 +11198,7 @@ __metadata:
     "@twilio-paste/box": ^6.0.0
     "@twilio-paste/design-tokens": ^7.1.1
     "@twilio-paste/input-box": ^6.0.0
+    "@twilio-paste/react-textarea-autosize-library": ^0.0.1
     "@twilio-paste/style-props": ^5.0.0
     "@twilio-paste/styling-library": ^1.0.0
     "@twilio-paste/theme": ^7.0.0
@@ -11190,12 +11206,12 @@ __metadata:
     "@twilio-paste/uid-library": ^0.2.4
     prop-types: ^15.7.2
     react: ^17.0.2
-    react-autosize-textarea: 7.1.0
     react-dom: ^17.0.2
   peerDependencies:
     "@twilio-paste/box": ^6.0.0
     "@twilio-paste/design-tokens": ^7.0.0
     "@twilio-paste/input-box": ^6.0.0
+    "@twilio-paste/react-textarea-autosize-library": ^0.0.1
     "@twilio-paste/style-props": ^5.0.0
     "@twilio-paste/styling-library": ^1.0.0
     "@twilio-paste/theme": ^7.0.0
@@ -15023,13 +15039,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autosize@npm:^4.0.2":
-  version: 4.0.4
-  resolution: "autosize@npm:4.0.4"
-  checksum: da3a53a699ef8a4cfea8f0eea2303459b3986754278d506f60c08084b3a0a34bd6fa525becaf1edcffe4eb9517b67a6442aacf6b02aee1d406e5a794ec47d4ce
-  languageName: node
-  linkType: hard
-
 "aws-sign2@npm:~0.7.0":
   version: 0.7.0
   resolution: "aws-sign2@npm:0.7.0"
@@ -17760,13 +17769,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"computed-style@npm:~0.1.3":
-  version: 0.1.4
-  resolution: "computed-style@npm:0.1.4"
-  checksum: 18957a36c96abf1ea6ad97241d6c88a70b192076a9d176d489a2e6d5e5d93968bb9fbb51a70a8399c4de5ec87e4465a737718cf9106bf1fb8037f0433b8fb255
-  languageName: node
-  linkType: hard
-
 "concat-map@npm:0.0.1":
   version: 0.0.1
   resolution: "concat-map@npm:0.0.1"
@@ -29571,15 +29573,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"line-height@npm:^0.3.1":
-  version: 0.3.1
-  resolution: "line-height@npm:0.3.1"
-  dependencies:
-    computed-style: ~0.1.3
-  checksum: 99acec832fd29fe50bea7c5dd2fb56c53b9e60c8da93384f6e1780d68018440b952c62578f34168e78bacdd9c6c3fd4fb3b8989c7b9976b3d74c16563c9182a3
-  languageName: node
-  linkType: hard
-
 "lines-and-columns@npm:^1.1.6":
   version: 1.1.6
   resolution: "lines-and-columns@npm:1.1.6"
@@ -36215,7 +36208,7 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.5.6, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -36654,20 +36647,6 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
-"react-autosize-textarea@npm:7.1.0":
-  version: 7.1.0
-  resolution: "react-autosize-textarea@npm:7.1.0"
-  dependencies:
-    autosize: ^4.0.2
-    line-height: ^0.3.1
-    prop-types: ^15.5.6
-  peerDependencies:
-    react: ^0.14.0 || ^15.0.0 || ^16.0.0
-    react-dom: ^0.14.0 || ^15.0.0 || ^16.0.0
-  checksum: 1292d8867151f19ae8668b5bf93a3fa70dfd37d1888330d317b4e55fdace2696526d3fcf68581a06ec29e3601b992f6d23ec3cf271980877168441425abe7a5e
-  languageName: node
-  linkType: hard
-
 "react-clientside-effect@npm:^1.2.5":
   version: 1.2.5
   resolution: "react-clientside-effect@npm:1.2.5"
@@ -43419,6 +43398,15 @@ typescript@^4.6.4:
   languageName: node
   linkType: hard
 
+"use-composed-ref@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "use-composed-ref@npm:1.3.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: f771cbadfdc91e03b7ab9eb32d0fc0cc647755711801bf507e891ad38c4bbc5f02b2509acadf9c965ec9c5f2f642fd33bdfdfb17b0873c4ad0a9b1f5e5e724bf
+  languageName: node
+  linkType: hard
+
 "use-isomorphic-layout-effect@npm:^1.0.0":
   version: 1.1.1
   resolution: "use-isomorphic-layout-effect@npm:1.1.1"
@@ -43431,6 +43419,18 @@ typescript@^4.6.4:
   languageName: node
   linkType: hard
 
+"use-isomorphic-layout-effect@npm:^1.1.1":
+  version: 1.1.2
+  resolution: "use-isomorphic-layout-effect@npm:1.1.2"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: a6532f7fc9ae222c3725ff0308aaf1f1ddbd3c00d685ef9eee6714fd0684de5cb9741b432fbf51e61a784e2955424864f7ea9f99734a02f237b17ad3e18ea5cb
+  languageName: node
+  linkType: hard
+
 "use-latest@npm:^1.0.0":
   version: 1.2.0
   resolution: "use-latest@npm:1.2.0"
@@ -43445,6 +43445,20 @@ typescript@^4.6.4:
   languageName: node
   linkType: hard
 
+"use-latest@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "use-latest@npm:1.2.1"
+  dependencies:
+    use-isomorphic-layout-effect: ^1.1.1
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: ed3f2ddddf6f21825e2ede4c2e0f0db8dcce5129802b69d1f0575fc1b42380436e8c76a6cd885d4e9aa8e292e60fb8b959c955f33c6a9123b83814a1a1875367
+  languageName: node
+  linkType: hard
+
 "use-resize-observer@npm:^7.0.0":
   version: 7.0.1
   resolution: "use-resize-observer@npm:7.0.1"