From 57ec0534b27c5522bf9702a68b973f743f048ff0 Mon Sep 17 00:00:00 2001
From: Nathan Bierema <nbierema@gmail.com>
Date: Fri, 22 Oct 2021 00:18:03 -0400
Subject: [PATCH] Replace enzyme with React testing library in ui (#917)

* Replace enzyme with React testing library in ui

* Mock Math.random()
---
 packages/redux-devtools-ui/jest.config.js     |    1 -
 packages/redux-devtools-ui/package.json       |   12 +-
 .../src/ContextMenu/ContextMenu.tsx           |   21 +-
 .../redux-devtools-ui/tests/Button.test.tsx   |   14 +-
 .../tests/Container.test.tsx                  |    7 +-
 .../tests/ContextMenu.test.tsx                |   16 +-
 .../redux-devtools-ui/tests/Dialog.test.tsx   |   28 +-
 .../redux-devtools-ui/tests/Editor.test.tsx   |   11 +-
 .../redux-devtools-ui/tests/Form.test.tsx     |   34 +-
 .../tests/Notification.test.tsx               |   20 +-
 .../tests/SegmentedControl.test.tsx           |   14 +-
 .../redux-devtools-ui/tests/Select.test.tsx   |   40 +-
 .../redux-devtools-ui/tests/Slider.test.tsx   |   19 +-
 .../redux-devtools-ui/tests/Tabs.test.tsx     |   22 +-
 .../redux-devtools-ui/tests/Toolbar.test.tsx  |   11 +-
 .../__snapshots__/ContextMenu.test.tsx.snap   |    1 +
 .../tests/__snapshots__/Editor.test.tsx.snap  |  144 +-
 .../tests/__snapshots__/Form.test.tsx.snap    | 1387 +++--
 .../tests/__snapshots__/Select.test.tsx.snap  | 4515 +----------------
 .../tests/__snapshots__/Slider.test.tsx.snap  |    3 +-
 .../tests/__snapshots__/Tabs.test.tsx.snap    |    5 +-
 packages/redux-devtools-ui/tests/setup.ts     |    4 -
 yarn.lock                                     |   23 +-
 23 files changed, 1493 insertions(+), 4859 deletions(-)
 delete mode 100644 packages/redux-devtools-ui/tests/setup.ts

diff --git a/packages/redux-devtools-ui/jest.config.js b/packages/redux-devtools-ui/jest.config.js
index 1db14ea5..e4f61740 100644
--- a/packages/redux-devtools-ui/jest.config.js
+++ b/packages/redux-devtools-ui/jest.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
-  setupFilesAfterEnv: ['<rootDir>/tests/setup.ts'],
   testEnvironment: 'jsdom',
   moduleNameMapper: {
     '\\.css$': '<rootDir>/tests/__mocks__/styleMock.ts',
diff --git a/packages/redux-devtools-ui/package.json b/packages/redux-devtools-ui/package.json
index f50eb088..733d490b 100644
--- a/packages/redux-devtools-ui/package.json
+++ b/packages/redux-devtools-ui/package.json
@@ -58,18 +58,17 @@
     "@babel/preset-typescript": "^7.15.0",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/react": "^6.3.12",
+    "@testing-library/dom": "^8.10.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/color": "^3.0.2",
-    "@types/enzyme": "^3.10.10",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.2",
     "@types/react": "^16.14.18",
     "@types/styled-components": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "^5.1.0",
     "@typescript-eslint/parser": "^5.1.0",
+    "babel-loader": "^8.2.3",
     "csstype": "^3.0.9",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "enzyme-to-json": "^3.6.2",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jest": "^25.2.2",
@@ -86,7 +85,8 @@
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "ts-jest": "^27.0.7",
-    "typescript": "~4.4.4"
+    "typescript": "~4.4.4",
+    "webpack": "^5.59.1"
   },
   "peerDependencies": {
     "@types/react": "^16.3.0 || ^17.0.0",
diff --git a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx
index ba9d357c..c32f9f30 100644
--- a/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx
+++ b/packages/redux-devtools-ui/src/ContextMenu/ContextMenu.tsx
@@ -24,22 +24,7 @@ export interface ContextMenuProps {
 }
 
 export default class ContextMenu extends Component<ContextMenuProps> {
-  constructor(props: ContextMenuProps) {
-    super(props);
-    this.updateItems(props.items);
-  }
-
   menu?: HTMLDivElement | null;
-  items?: React.ReactNode[];
-
-  UNSAFE_componentWillReceiveProps(nextProps: ContextMenuProps) {
-    if (
-      nextProps.items !== this.props.items ||
-      nextProps.visible !== this.props.visible
-    ) {
-      this.updateItems(nextProps.items);
-    }
-  }
 
   componentDidMount() {
     this.amendPosition();
@@ -84,8 +69,8 @@ export default class ContextMenu extends Component<ContextMenuProps> {
     this.menu!.style.left = `${left}px`;
   }
 
-  updateItems(items: Item[]) {
-    this.items = items.map((item) => {
+  renderItems() {
+    return this.props.items.map((item) => {
       if (isReactButtonElement(item)) return item;
       const value = item.value || item.name;
       return (
@@ -113,7 +98,7 @@ export default class ContextMenu extends Component<ContextMenuProps> {
         top={this.props.y}
         visible={this.props.visible}
       >
-        {this.items}
+        {this.renderItems()}
       </ContextMenuWrapper>
     );
   }
diff --git a/packages/redux-devtools-ui/tests/Button.test.tsx b/packages/redux-devtools-ui/tests/Button.test.tsx
index 6ae53b8c..1d0769d0 100644
--- a/packages/redux-devtools-ui/tests/Button.test.tsx
+++ b/packages/redux-devtools-ui/tests/Button.test.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Button } from '../src';
 
 describe('Button', function () {
   it('renders correctly', () => {
-    const wrapper = render(<Button>Text</Button>);
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    const { container } = render(<Button>Text</Button>);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle the click event', () => {
     const onClick = jest.fn();
-    const wrapper = mount(<Button onClick={onClick}>ClickMe</Button>);
+    render(<Button onClick={onClick}>ClickMe</Button>);
 
-    wrapper.find('button').simulate('click');
-    expect(onClick).toBeCalled();
+    userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Container.test.tsx b/packages/redux-devtools-ui/tests/Container.test.tsx
index ca077f1d..fb8bb28f 100644
--- a/packages/redux-devtools-ui/tests/Container.test.tsx
+++ b/packages/redux-devtools-ui/tests/Container.test.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
-import { render } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { render } from '@testing-library/react';
 import { Container } from '../src';
 
 describe('Container', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Container
         themeData={{ theme: 'default', scheme: 'default', light: false }}
       >
         Text
       </Container>
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/ContextMenu.test.tsx b/packages/redux-devtools-ui/tests/ContextMenu.test.tsx
index 0875e97d..d50a81e2 100644
--- a/packages/redux-devtools-ui/tests/ContextMenu.test.tsx
+++ b/packages/redux-devtools-ui/tests/ContextMenu.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ContextMenu } from '../src';
 import { items } from '../src/ContextMenu/data';
 
 describe('ContextMenu', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <ContextMenu
         items={items}
         onClick={() => {
@@ -16,15 +16,15 @@ describe('ContextMenu', function () {
         y={100}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
   it('should handle the click event', () => {
     const onClick = jest.fn();
-    const wrapper = mount(
-      <ContextMenu items={items} onClick={onClick} x={100} y={100} />
+    render(
+      <ContextMenu items={items} onClick={onClick} x={100} y={100} visible />
     );
 
-    wrapper.find('button').first().simulate('click');
-    expect(onClick).toBeCalled();
+    userEvent.click(screen.getByRole('button', { name: 'Menu Item 1' }));
+    expect(onClick).toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Dialog.test.tsx b/packages/redux-devtools-ui/tests/Dialog.test.tsx
index eb9efe33..6397d478 100644
--- a/packages/redux-devtools-ui/tests/Dialog.test.tsx
+++ b/packages/redux-devtools-ui/tests/Dialog.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Dialog } from '../src';
 
 describe('Dialog', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Dialog
         onDismiss={() => {
           // noop
@@ -15,11 +15,11 @@ describe('Dialog', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Dialog
         title="Dialog Title"
         open
@@ -34,11 +34,11 @@ describe('Dialog', function () {
         Hello Dialog!
       </Dialog>
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders modal', () => {
-    const wrapper = render(
+    const { container } = render(
       <Dialog
         modal
         onDismiss={() => {
@@ -49,12 +49,12 @@ describe('Dialog', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle dismiss event', () => {
     const onDismiss = jest.fn();
-    const wrapper = mount(
+    render(
       <Dialog
         open
         onDismiss={onDismiss}
@@ -64,13 +64,13 @@ describe('Dialog', function () {
       />
     );
 
-    wrapper.find('button').first().simulate('click');
-    expect(onDismiss).toBeCalled();
+    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(onDismiss).toHaveBeenCalled();
   });
 
   it('should handle submit event', () => {
     const onSubmit = jest.fn();
-    const wrapper = mount(
+    render(
       <Dialog
         open
         onDismiss={() => {
@@ -80,7 +80,7 @@ describe('Dialog', function () {
       />
     );
 
-    wrapper.find('button').last().simulate('click');
-    expect(onSubmit).toBeCalled();
+    userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    expect(onSubmit).toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Editor.test.tsx b/packages/redux-devtools-ui/tests/Editor.test.tsx
index fd922108..82269b85 100644
--- a/packages/redux-devtools-ui/tests/Editor.test.tsx
+++ b/packages/redux-devtools-ui/tests/Editor.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { mountToJson } from 'enzyme-to-json';
+import { render } from '@testing-library/react';
 import { Editor } from '../src';
 import 'codemirror/mode/javascript/javascript';
 
@@ -25,17 +24,17 @@ describe('Editor', function () {
 
     return range;
   };
-  const wrapper = mount(<Editor value="var a = 1;" />);
+  const { container } = render(<Editor value="var a = 1;" />);
 
   it('renders correctly', () => {
-    expect(mountToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('calls getBoundingClientRect', () => {
-    expect(getBoundingClientRect).toBeCalled();
+    expect(getBoundingClientRect).toHaveBeenCalled();
   });
 
   it('calls getClientRects', () => {
-    expect(getClientRects).toBeCalled();
+    expect(getClientRects).toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Form.test.tsx b/packages/redux-devtools-ui/tests/Form.test.tsx
index 5ade339f..6521ccea 100644
--- a/packages/redux-devtools-ui/tests/Form.test.tsx
+++ b/packages/redux-devtools-ui/tests/Form.test.tsx
@@ -1,19 +1,31 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import { shallowToJson } from 'enzyme-to-json';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Form } from '../src';
 import { schema, uiSchema, formData } from '../src/Form/schema';
 
 describe('Form', function () {
+  let random: () => number;
+
+  beforeAll(() => {
+    random = Math.random;
+    Math.random = jest.fn(() => 0.25546350798039463);
+  });
+
+  afterAll(() => {
+    Math.random = random;
+    console.log(Math.random());
+  });
+
   it('renders correctly', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Form formData={formData} schema={schema} uiSchema={uiSchema} />
     );
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with primary button', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Form
         primaryButton
         submitText="Custom button"
@@ -22,19 +34,19 @@ describe('Form', function () {
         uiSchema={uiSchema}
       />
     );
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with no button', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Form formData={formData} schema={schema} uiSchema={uiSchema} noSubmit />
     );
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle the submit event', () => {
     const onSubmit = jest.fn();
-    const wrapper = mount(
+    render(
       <Form
         formData={formData}
         schema={schema}
@@ -43,7 +55,7 @@ describe('Form', function () {
       />
     );
 
-    wrapper.find('form').simulate('submit');
-    expect(onSubmit).toBeCalled();
+    userEvent.click(screen.getByRole('button', { name: 'Submit' }));
+    expect(onSubmit).toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Notification.test.tsx b/packages/redux-devtools-ui/tests/Notification.test.tsx
index 1b7674a2..7b92cdfa 100644
--- a/packages/redux-devtools-ui/tests/Notification.test.tsx
+++ b/packages/redux-devtools-ui/tests/Notification.test.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Notification } from '../src';
 
 describe('Notification', function () {
   it('renders correctly', () => {
-    const wrapper = render(<Notification>Message</Notification>);
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    const { container } = render(<Notification>Message</Notification>);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Notification
         type="error"
         onClose={() => {
@@ -20,16 +20,14 @@ describe('Notification', function () {
         Message
       </Notification>
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle the click event', () => {
     const onClose = jest.fn();
-    const wrapper = mount(
-      <Notification onClose={onClose}>Message</Notification>
-    );
+    render(<Notification onClose={onClose}>Message</Notification>);
 
-    wrapper.find('button').simulate('click');
-    expect(onClose).toBeCalled();
+    userEvent.click(screen.getByRole('button'));
+    expect(onClose).toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/SegmentedControl.test.tsx b/packages/redux-devtools-ui/tests/SegmentedControl.test.tsx
index 937e7cea..5d2c8460 100644
--- a/packages/redux-devtools-ui/tests/SegmentedControl.test.tsx
+++ b/packages/redux-devtools-ui/tests/SegmentedControl.test.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { SegmentedControl } from '../src';
 
 describe('SegmentedControl', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <SegmentedControl
         values={['Button1', 'Button2', 'Button3']}
         selected="Button1"
@@ -15,11 +15,11 @@ describe('SegmentedControl', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
   it('should handle the click event', () => {
     const onClick = jest.fn();
-    const wrapper = mount(
+    render(
       <SegmentedControl
         values={['Button1', 'Button2', 'Button3']}
         selected="Button1"
@@ -28,7 +28,7 @@ describe('SegmentedControl', function () {
       />
     );
 
-    wrapper.find('button').first().simulate('click');
-    expect(onClick).toBeCalled();
+    userEvent.click(screen.getByRole('button', { name: 'Button1' }));
+    expect(onClick).toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Select.test.tsx b/packages/redux-devtools-ui/tests/Select.test.tsx
index f76fc3db..8e6e1f68 100644
--- a/packages/redux-devtools-ui/tests/Select.test.tsx
+++ b/packages/redux-devtools-ui/tests/Select.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { render, mount, CommonWrapper, ReactWrapper } from 'enzyme';
-import { renderToJson, mountToJson } from 'enzyme-to-json';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Select } from '../src';
 import { options } from '../src/Select/options';
 
 describe('Select', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Select
         options={options}
         onChange={() => {
@@ -14,11 +14,11 @@ describe('Select', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Select
         options={options}
         onChange={() => {
@@ -34,32 +34,30 @@ describe('Select', function () {
         menuPlacement="top"
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should select another option', () => {
     const onChange = jest.fn();
-    const wrapper = mount(
-      <Select options={options} onInputChange={onChange} />
+    const { container } = render(
+      <Select options={options} onChange={onChange} />
     );
 
-    const input = wrapper.find('input');
-    (input.at(0).instance() as unknown as HTMLInputElement).value = 'two';
-    input.first().simulate('change');
-    expect(mountToJson(wrapper)).toMatchSnapshot();
-    input.first().simulate('keyDown', { keyCode: 13 });
-    expect(onChange).toBeCalled();
+    userEvent.type(screen.getByRole('combobox'), 'two');
+    expect(container.firstChild).toMatchSnapshot();
+    userEvent.type(screen.getByRole('combobox'), '{enter}');
+    expect(onChange).toHaveBeenCalled();
   });
 
   it("shouldn't find any results", () => {
     const onChange = jest.fn();
-    const wrapper = mount(<Select options={options} onChange={onChange} />);
+    const { container } = render(
+      <Select options={options} onChange={onChange} />
+    );
 
-    const input = wrapper.find('input');
-    (input.at(0).instance() as unknown as HTMLInputElement).value = 'text';
-    input.first().simulate('change');
-    expect(mountToJson(wrapper)).toMatchSnapshot(); // 'No results found'
-    input.first().simulate('keyDown', { keyCode: 13 });
-    expect(onChange).not.toBeCalled();
+    userEvent.type(screen.getByRole('combobox'), 'text');
+    expect(container.firstChild).toMatchSnapshot();
+    userEvent.type(screen.getByRole('combobox'), '{enter}');
+    expect(onChange).not.toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Slider.test.tsx b/packages/redux-devtools-ui/tests/Slider.test.tsx
index d5d70699..e43d5b86 100644
--- a/packages/redux-devtools-ui/tests/Slider.test.tsx
+++ b/packages/redux-devtools-ui/tests/Slider.test.tsx
@@ -1,22 +1,21 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { Slider } from '../src';
 
 describe('Slider', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Slider
         onChange={() => {
           // noop
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Slider
         label="Hi"
         min={1}
@@ -28,15 +27,15 @@ describe('Slider', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should handle the change event', () => {
     const onChange = jest.fn();
-    const wrapper = mount(<Slider value={1} onChange={onChange} />);
+    render(<Slider value={1} onChange={onChange} />);
 
-    wrapper.find('input').simulate('change');
-    expect(onChange).toBeCalled();
-    expect(onChange).toBeCalledWith(1);
+    fireEvent.change(screen.getByRole('slider'), { target: { value: '2' } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(2);
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Tabs.test.tsx b/packages/redux-devtools-ui/tests/Tabs.test.tsx
index 0a37ba1e..257d9de0 100644
--- a/packages/redux-devtools-ui/tests/Tabs.test.tsx
+++ b/packages/redux-devtools-ui/tests/Tabs.test.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { Tabs } from '../src';
 import { tabs, simple10Tabs } from '../src/Tabs/data';
 
 describe('Tabs', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Tabs
         tabs={tabs}
         onClick={() => {
@@ -14,11 +14,11 @@ describe('Tabs', function () {
         }}
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(
+    const { container } = render(
       <Tabs
         tabs={tabs}
         onClick={() => {
@@ -27,11 +27,11 @@ describe('Tabs', function () {
         selected="Tab2"
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders tabs without inner components', () => {
-    const wrapper = render(
+    const { container } = render(
       <Tabs
         tabs={simple10Tabs}
         onClick={() => {
@@ -40,14 +40,14 @@ describe('Tabs', function () {
         selected="5"
       />
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('should select tab', () => {
     const onClick = jest.fn();
-    const wrapper = mount(<Tabs tabs={tabs} onClick={onClick} />);
+    render(<Tabs tabs={tabs} onClick={onClick} />);
 
-    wrapper.find('button').first().simulate('click');
-    expect(onClick).toBeCalled();
+    userEvent.click(screen.getByRole('button', { name: 'Tab1' }));
+    expect(onClick).toHaveBeenCalled();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/Toolbar.test.tsx b/packages/redux-devtools-ui/tests/Toolbar.test.tsx
index 13f56990..8b38bc8a 100644
--- a/packages/redux-devtools-ui/tests/Toolbar.test.tsx
+++ b/packages/redux-devtools-ui/tests/Toolbar.test.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { render } from 'enzyme';
-import { renderToJson } from 'enzyme-to-json';
+import { render } from '@testing-library/react';
 import { Toolbar, Divider, Spacer, Button } from '../src';
 
 describe('Toolbar', function () {
   it('renders correctly', () => {
-    const wrapper = render(
+    const { container } = render(
       <Toolbar>
         <Button>1</Button>
         <Divider />
@@ -13,11 +12,11 @@ describe('Toolbar', function () {
         <Button>2</Button>
       </Toolbar>
     );
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   it('renders with props', () => {
-    const wrapper = render(<Toolbar borderPosition="top" />);
-    expect(renderToJson(wrapper)).toMatchSnapshot();
+    const { container } = render(<Toolbar borderPosition="top" />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/packages/redux-devtools-ui/tests/__snapshots__/ContextMenu.test.tsx.snap b/packages/redux-devtools-ui/tests/__snapshots__/ContextMenu.test.tsx.snap
index fde70ac7..e4d98639 100644
--- a/packages/redux-devtools-ui/tests/__snapshots__/ContextMenu.test.tsx.snap
+++ b/packages/redux-devtools-ui/tests/__snapshots__/ContextMenu.test.tsx.snap
@@ -3,6 +3,7 @@
 exports[`ContextMenu renders correctly 1`] = `
 <div
   class="sc-jRQBWg deJyZB"
+  style="top: 100px; left: 100px;"
 >
   <button
     value="Menu Item 1"
diff --git a/packages/redux-devtools-ui/tests/__snapshots__/Editor.test.tsx.snap b/packages/redux-devtools-ui/tests/__snapshots__/Editor.test.tsx.snap
index d46202d4..f330872d 100644
--- a/packages/redux-devtools-ui/tests/__snapshots__/Editor.test.tsx.snap
+++ b/packages/redux-devtools-ui/tests/__snapshots__/Editor.test.tsx.snap
@@ -1,19 +1,139 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Editor renders correctly 1`] = `
-<Editor
-  autofocus={false}
-  foldGutter={true}
-  lineNumbers={true}
-  lineWrapping={false}
-  mode="javascript"
-  readOnly={false}
-  value="var a = 1;"
+<div
+  class="sc-jrQzAO bvXojw"
 >
-  <styled.div>
+  <div
+    class="CodeMirror cm-s-default"
+    translate="no"
+  >
     <div
-      className="sc-jrQzAO bvXojw"
+      style="overflow: hidden; position: relative; width: 3px; height: 0px;"
+    >
+      <textarea
+        autocapitalize="off"
+        autocorrect="off"
+        spellcheck="false"
+        style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; min-height: 1em; outline: none;"
+        tabindex="0"
+      />
+    </div>
+    <div
+      class="CodeMirror-vscrollbar"
+      cm-not-content="true"
+      tabindex="-1"
+    >
+      <div
+        style="min-width: 1px;"
+      />
+    </div>
+    <div
+      class="CodeMirror-hscrollbar"
+      cm-not-content="true"
+      tabindex="-1"
+    >
+      <div
+        style="height: 100%; min-height: 1px;"
+      />
+    </div>
+    <div
+      class="CodeMirror-scrollbar-filler"
+      cm-not-content="true"
     />
-  </styled.div>
-</Editor>
+    <div
+      class="CodeMirror-gutter-filler"
+      cm-not-content="true"
+    />
+    <div
+      class="CodeMirror-scroll"
+      tabindex="-1"
+    >
+      <div
+        class="CodeMirror-sizer"
+        style="margin-left: 0px; min-width: 3px;"
+      >
+        <div
+          style="position: relative;"
+        >
+          <div
+            class="CodeMirror-lines"
+            role="presentation"
+          >
+            <div
+              role="presentation"
+              style="position: relative; outline: none;"
+            >
+              <div
+                class="CodeMirror-measure"
+              />
+              <div
+                class="CodeMirror-measure"
+              >
+                <pre
+                  class="CodeMirror-line"
+                  role="presentation"
+                >
+                  <span
+                    role="presentation"
+                    style="padding-right: .1px;"
+                  >
+                    <span
+                      class="cm-keyword"
+                    >
+                      var
+                    </span>
+                     
+                    <span
+                      class="cm-def"
+                    >
+                      a
+                    </span>
+                     
+                    <span
+                      class="cm-operator"
+                    >
+                      =
+                    </span>
+                     
+                    <span
+                      class="cm-number"
+                    >
+                      1
+                    </span>
+                    ;
+                  </span>
+                </pre>
+              </div>
+              <div
+                style="position: relative; z-index: 1;"
+              />
+              <div
+                class="CodeMirror-cursors"
+              />
+              <div
+                class="CodeMirror-code"
+                role="presentation"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        style="position: absolute; height: 50px; width: 1px;"
+      />
+      <div
+        class="CodeMirror-gutters"
+      >
+        <div
+          class="CodeMirror-gutter CodeMirror-linenumbers"
+          style="width: 1px;"
+        />
+        <div
+          class="CodeMirror-gutter CodeMirror-foldgutter"
+        />
+      </div>
+    </div>
+  </div>
+</div>
 `;
diff --git a/packages/redux-devtools-ui/tests/__snapshots__/Form.test.tsx.snap b/packages/redux-devtools-ui/tests/__snapshots__/Form.test.tsx.snap
index b3a4e5d9..b6e5c8f2 100644
--- a/packages/redux-devtools-ui/tests/__snapshots__/Form.test.tsx.snap
+++ b/packages/redux-devtools-ui/tests/__snapshots__/Form.test.tsx.snap
@@ -1,374 +1,1045 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form renders correctly 1`] = `
-<Styled(Form)
-  formData={
-    Object {
-      "age": 75,
-      "bio": "Roundhouse kicking asses since 1940",
-      "integerRange": 52,
-      "name": "Chuck Norris",
-      "password": "noneed",
-    }
-  }
-  schema={
-    Object {
-      "description": "A simple form example.",
-      "properties": Object {
-        "age": Object {
-          "title": "Age",
-          "type": "integer",
-        },
-        "bio": Object {
-          "title": "Bio",
-          "type": "string",
-        },
-        "integerRange": Object {
-          "maximum": 100,
-          "minimum": 42,
-          "title": "Integer range",
-          "type": "integer",
-        },
-        "multipleChoicesList": Object {
-          "items": Object {
-            "enum": Array [
-              "foo",
-              "bar",
-              "fuzz",
-            ],
-            "type": "string",
-          },
-          "title": "A multiple choices list",
-          "type": "array",
-          "uniqueItems": true,
-        },
-        "name": Object {
-          "title": "Full name",
-          "type": "string",
-        },
-        "numberEnum": Object {
-          "enum": Array [
-            1,
-            2,
-            3,
-          ],
-          "title": "Number enum",
-          "type": "number",
-        },
-        "numberEnumRadio": Object {
-          "enum": Array [
-            1,
-            2,
-            3,
-          ],
-          "title": "Number enum",
-          "type": "number",
-        },
-        "password": Object {
-          "minLength": 3,
-          "title": "Password",
-          "type": "string",
-        },
-      },
-      "required": Array [
-        "name",
-      ],
-      "title": "Example form",
-      "type": "object",
-    }
-  }
-  uiSchema={
-    Object {
-      "age": Object {
-        "ui:widget": "updown",
-      },
-      "bio": Object {
-        "ui:widget": "textarea",
-      },
-      "date": Object {
-        "ui:widget": "alt-datetime",
-      },
-      "integerRange": Object {
-        "ui:widget": "range",
-      },
-      "multipleChoicesList": Object {
-        "ui:widget": "checkboxes",
-      },
-      "name": Object {
-        "ui:autofocus": true,
-      },
-      "numberEnumRadio": Object {
-        "ui:options": Object {
-          "inline": true,
-        },
-        "ui:widget": "radio",
-      },
-      "password": Object {
-        "ui:help": "Hint: Make it strong!",
-        "ui:widget": "password",
-      },
-    }
-  }
-  widgets={
-    Object {
-      "RangeWidget": [Function],
-      "SelectWidget": [Function],
-    }
-  }
+<form
+  class="sc-furwcr elOoGk"
 >
-  <Button
-    size="big"
-    tooltipPosition="top"
-    type="submit"
+  <div
+    class="form-group field field-object"
   >
-    Submit
-  </Button>
-</Styled(Form)>
+    <fieldset
+      id="root"
+    >
+      <legend
+        id="root__title"
+      >
+        Example form
+      </legend>
+      <p
+        class="field-description"
+        id="root__description"
+      >
+        A simple form example.
+      </p>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_name"
+        >
+          Full name
+          <span
+            class="required"
+          >
+            *
+          </span>
+        </label>
+        <input
+          class="form-control"
+          id="root_name"
+          label="Full name"
+          placeholder=""
+          required=""
+          type="text"
+          value="Chuck Norris"
+        />
+      </div>
+      <div
+        class="form-group field field-integer"
+      >
+        <label
+          class="control-label"
+          for="root_age"
+        >
+          Age
+        </label>
+        <input
+          class="form-control"
+          id="root_age"
+          label="Age"
+          placeholder=""
+          type="number"
+          value="75"
+        />
+      </div>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_bio"
+        >
+          Bio
+        </label>
+        <textarea
+          class="form-control"
+          id="root_bio"
+          placeholder=""
+        >
+          Roundhouse kicking asses since 1940
+        </textarea>
+      </div>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_password"
+        >
+          Password
+        </label>
+        <input
+          class="form-control"
+          id="root_password"
+          label="Password"
+          placeholder=""
+          type="password"
+          value="noneed"
+        />
+        <p
+          class="help-block"
+          id="root_password__help"
+        >
+          Hint: Make it strong!
+        </p>
+      </div>
+      <div
+        class="form-group field field-array"
+      >
+        <label
+          class="control-label"
+          for="root_multipleChoicesList"
+        >
+          A multiple choices list
+        </label>
+        <div
+          class="checkboxes"
+          id="root_multipleChoicesList"
+        >
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_0"
+                  type="checkbox"
+                />
+                <span>
+                  foo
+                </span>
+              </span>
+            </label>
+          </div>
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_1"
+                  type="checkbox"
+                />
+                <span>
+                  bar
+                </span>
+              </span>
+            </label>
+          </div>
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_2"
+                  type="checkbox"
+                />
+                <span>
+                  fuzz
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="form-group field field-number"
+      >
+        <label
+          class="control-label"
+          for="root_numberEnum"
+        >
+          Number enum
+        </label>
+        <div
+          class=" css-18o3wl1-container"
+          id="root_numberEnum"
+        >
+          <span
+            class="css-1f43avz-a11yText-A11yText"
+            id="react-select-2-live-region"
+          />
+          <span
+            aria-atomic="false"
+            aria-live="polite"
+            aria-relevant="additions text"
+            class="css-1f43avz-a11yText-A11yText"
+          />
+          <div
+            class=" css-gdsksj-control"
+          >
+            <div
+              class=" css-1dzc0nd-ValueContainer"
+            >
+              <div
+                class=" css-du77wi-placeholder"
+                id="react-select-2-placeholder"
+              />
+              <div
+                class=" css-1qx78vi-Input"
+                data-value=""
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="react-select-2-listbox"
+                  aria-describedby="react-select-2-placeholder"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-owns="react-select-2-listbox"
+                  autocapitalize="none"
+                  autocomplete="off"
+                  autocorrect="off"
+                  class=""
+                  id="react-select-2-input"
+                  role="combobox"
+                  spellcheck="false"
+                  style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                  tabindex="0"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class=" css-1hb7zxy-IndicatorsContainer"
+            >
+              <span
+                class=" css-1urf5ax-indicatorSeparator"
+              />
+              <div
+                aria-hidden="true"
+                class=" css-aazq4s-indicatorContainer"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="css-tj5bde-Svg"
+                  focusable="false"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="form-group field field-number"
+      >
+        <label
+          class="control-label"
+          for="root_numberEnumRadio"
+        >
+          Number enum
+        </label>
+        <div
+          class="field-radio-group"
+          id="root_numberEnumRadio"
+        >
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="1"
+              />
+              <span>
+                1
+              </span>
+            </span>
+          </label>
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="2"
+              />
+              <span>
+                2
+              </span>
+            </span>
+          </label>
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="3"
+              />
+              <span>
+                3
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <div
+        class="form-group field field-integer"
+      >
+        <label
+          class="control-label"
+          for="root_integerRange"
+        >
+          Integer range
+        </label>
+        <div
+          class="sc-gKclnd cELrub"
+        >
+          <div
+            class="sc-iCfMLu HKVV"
+          >
+            <input
+              id="root_integerRange"
+              max="100"
+              min="42"
+              placeholder=""
+              type="range"
+              uischema="[object Object]"
+              value="52"
+            />
+            <div>
+              52
+            </div>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    class="sc-eCImPb gcPrSZ"
+  >
+    <button
+      class="sc-dkPtRN hMJxMJ"
+      type="submit"
+    >
+      Submit
+    </button>
+  </div>
+</form>
 `;
 
 exports[`Form renders with no button 1`] = `
-<Styled(Form)
-  formData={
-    Object {
-      "age": 75,
-      "bio": "Roundhouse kicking asses since 1940",
-      "integerRange": 52,
-      "name": "Chuck Norris",
-      "password": "noneed",
-    }
-  }
-  schema={
-    Object {
-      "description": "A simple form example.",
-      "properties": Object {
-        "age": Object {
-          "title": "Age",
-          "type": "integer",
-        },
-        "bio": Object {
-          "title": "Bio",
-          "type": "string",
-        },
-        "integerRange": Object {
-          "maximum": 100,
-          "minimum": 42,
-          "title": "Integer range",
-          "type": "integer",
-        },
-        "multipleChoicesList": Object {
-          "items": Object {
-            "enum": Array [
-              "foo",
-              "bar",
-              "fuzz",
-            ],
-            "type": "string",
-          },
-          "title": "A multiple choices list",
-          "type": "array",
-          "uniqueItems": true,
-        },
-        "name": Object {
-          "title": "Full name",
-          "type": "string",
-        },
-        "numberEnum": Object {
-          "enum": Array [
-            1,
-            2,
-            3,
-          ],
-          "title": "Number enum",
-          "type": "number",
-        },
-        "numberEnumRadio": Object {
-          "enum": Array [
-            1,
-            2,
-            3,
-          ],
-          "title": "Number enum",
-          "type": "number",
-        },
-        "password": Object {
-          "minLength": 3,
-          "title": "Password",
-          "type": "string",
-        },
-      },
-      "required": Array [
-        "name",
-      ],
-      "title": "Example form",
-      "type": "object",
-    }
-  }
-  uiSchema={
-    Object {
-      "age": Object {
-        "ui:widget": "updown",
-      },
-      "bio": Object {
-        "ui:widget": "textarea",
-      },
-      "date": Object {
-        "ui:widget": "alt-datetime",
-      },
-      "integerRange": Object {
-        "ui:widget": "range",
-      },
-      "multipleChoicesList": Object {
-        "ui:widget": "checkboxes",
-      },
-      "name": Object {
-        "ui:autofocus": true,
-      },
-      "numberEnumRadio": Object {
-        "ui:options": Object {
-          "inline": true,
-        },
-        "ui:widget": "radio",
-      },
-      "password": Object {
-        "ui:help": "Hint: Make it strong!",
-        "ui:widget": "password",
-      },
-    }
-  }
-  widgets={
-    Object {
-      "RangeWidget": [Function],
-      "SelectWidget": [Function],
-    }
-  }
+<form
+  class="sc-furwcr elOoGk"
 >
+  <div
+    class="form-group field field-object"
+  >
+    <fieldset
+      id="root"
+    >
+      <legend
+        id="root__title"
+      >
+        Example form
+      </legend>
+      <p
+        class="field-description"
+        id="root__description"
+      >
+        A simple form example.
+      </p>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_name"
+        >
+          Full name
+          <span
+            class="required"
+          >
+            *
+          </span>
+        </label>
+        <input
+          class="form-control"
+          id="root_name"
+          label="Full name"
+          placeholder=""
+          required=""
+          type="text"
+          value="Chuck Norris"
+        />
+      </div>
+      <div
+        class="form-group field field-integer"
+      >
+        <label
+          class="control-label"
+          for="root_age"
+        >
+          Age
+        </label>
+        <input
+          class="form-control"
+          id="root_age"
+          label="Age"
+          placeholder=""
+          type="number"
+          value="75"
+        />
+      </div>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_bio"
+        >
+          Bio
+        </label>
+        <textarea
+          class="form-control"
+          id="root_bio"
+          placeholder=""
+        >
+          Roundhouse kicking asses since 1940
+        </textarea>
+      </div>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_password"
+        >
+          Password
+        </label>
+        <input
+          class="form-control"
+          id="root_password"
+          label="Password"
+          placeholder=""
+          type="password"
+          value="noneed"
+        />
+        <p
+          class="help-block"
+          id="root_password__help"
+        >
+          Hint: Make it strong!
+        </p>
+      </div>
+      <div
+        class="form-group field field-array"
+      >
+        <label
+          class="control-label"
+          for="root_multipleChoicesList"
+        >
+          A multiple choices list
+        </label>
+        <div
+          class="checkboxes"
+          id="root_multipleChoicesList"
+        >
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_0"
+                  type="checkbox"
+                />
+                <span>
+                  foo
+                </span>
+              </span>
+            </label>
+          </div>
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_1"
+                  type="checkbox"
+                />
+                <span>
+                  bar
+                </span>
+              </span>
+            </label>
+          </div>
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_2"
+                  type="checkbox"
+                />
+                <span>
+                  fuzz
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="form-group field field-number"
+      >
+        <label
+          class="control-label"
+          for="root_numberEnum"
+        >
+          Number enum
+        </label>
+        <div
+          class=" css-18o3wl1-container"
+          id="root_numberEnum"
+        >
+          <span
+            class="css-1f43avz-a11yText-A11yText"
+            id="react-select-4-live-region"
+          />
+          <span
+            aria-atomic="false"
+            aria-live="polite"
+            aria-relevant="additions text"
+            class="css-1f43avz-a11yText-A11yText"
+          />
+          <div
+            class=" css-gdsksj-control"
+          >
+            <div
+              class=" css-1dzc0nd-ValueContainer"
+            >
+              <div
+                class=" css-du77wi-placeholder"
+                id="react-select-4-placeholder"
+              />
+              <div
+                class=" css-1qx78vi-Input"
+                data-value=""
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="react-select-4-listbox"
+                  aria-describedby="react-select-4-placeholder"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-owns="react-select-4-listbox"
+                  autocapitalize="none"
+                  autocomplete="off"
+                  autocorrect="off"
+                  class=""
+                  id="react-select-4-input"
+                  role="combobox"
+                  spellcheck="false"
+                  style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                  tabindex="0"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class=" css-1hb7zxy-IndicatorsContainer"
+            >
+              <span
+                class=" css-1urf5ax-indicatorSeparator"
+              />
+              <div
+                aria-hidden="true"
+                class=" css-aazq4s-indicatorContainer"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="css-tj5bde-Svg"
+                  focusable="false"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="form-group field field-number"
+      >
+        <label
+          class="control-label"
+          for="root_numberEnumRadio"
+        >
+          Number enum
+        </label>
+        <div
+          class="field-radio-group"
+          id="root_numberEnumRadio"
+        >
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="1"
+              />
+              <span>
+                1
+              </span>
+            </span>
+          </label>
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="2"
+              />
+              <span>
+                2
+              </span>
+            </span>
+          </label>
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="3"
+              />
+              <span>
+                3
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <div
+        class="form-group field field-integer"
+      >
+        <label
+          class="control-label"
+          for="root_integerRange"
+        >
+          Integer range
+        </label>
+        <div
+          class="sc-gKclnd cELrub"
+        >
+          <div
+            class="sc-iCfMLu HKVV"
+          >
+            <input
+              id="root_integerRange"
+              max="100"
+              min="42"
+              placeholder=""
+              type="range"
+              uischema="[object Object]"
+              value="52"
+            />
+            <div>
+              52
+            </div>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </div>
   <noscript />
-</Styled(Form)>
+</form>
 `;
 
 exports[`Form renders with primary button 1`] = `
-<Styled(Form)
-  formData={
-    Object {
-      "age": 75,
-      "bio": "Roundhouse kicking asses since 1940",
-      "integerRange": 52,
-      "name": "Chuck Norris",
-      "password": "noneed",
-    }
-  }
-  schema={
-    Object {
-      "description": "A simple form example.",
-      "properties": Object {
-        "age": Object {
-          "title": "Age",
-          "type": "integer",
-        },
-        "bio": Object {
-          "title": "Bio",
-          "type": "string",
-        },
-        "integerRange": Object {
-          "maximum": 100,
-          "minimum": 42,
-          "title": "Integer range",
-          "type": "integer",
-        },
-        "multipleChoicesList": Object {
-          "items": Object {
-            "enum": Array [
-              "foo",
-              "bar",
-              "fuzz",
-            ],
-            "type": "string",
-          },
-          "title": "A multiple choices list",
-          "type": "array",
-          "uniqueItems": true,
-        },
-        "name": Object {
-          "title": "Full name",
-          "type": "string",
-        },
-        "numberEnum": Object {
-          "enum": Array [
-            1,
-            2,
-            3,
-          ],
-          "title": "Number enum",
-          "type": "number",
-        },
-        "numberEnumRadio": Object {
-          "enum": Array [
-            1,
-            2,
-            3,
-          ],
-          "title": "Number enum",
-          "type": "number",
-        },
-        "password": Object {
-          "minLength": 3,
-          "title": "Password",
-          "type": "string",
-        },
-      },
-      "required": Array [
-        "name",
-      ],
-      "title": "Example form",
-      "type": "object",
-    }
-  }
-  uiSchema={
-    Object {
-      "age": Object {
-        "ui:widget": "updown",
-      },
-      "bio": Object {
-        "ui:widget": "textarea",
-      },
-      "date": Object {
-        "ui:widget": "alt-datetime",
-      },
-      "integerRange": Object {
-        "ui:widget": "range",
-      },
-      "multipleChoicesList": Object {
-        "ui:widget": "checkboxes",
-      },
-      "name": Object {
-        "ui:autofocus": true,
-      },
-      "numberEnumRadio": Object {
-        "ui:options": Object {
-          "inline": true,
-        },
-        "ui:widget": "radio",
-      },
-      "password": Object {
-        "ui:help": "Hint: Make it strong!",
-        "ui:widget": "password",
-      },
-    }
-  }
-  widgets={
-    Object {
-      "RangeWidget": [Function],
-      "SelectWidget": [Function],
-    }
-  }
+<form
+  class="sc-furwcr elOoGk"
 >
-  <Button
-    primary={true}
-    size="big"
-    tooltipPosition="top"
-    type="submit"
+  <div
+    class="form-group field field-object"
   >
-    Custom button
-  </Button>
-</Styled(Form)>
+    <fieldset
+      id="root"
+    >
+      <legend
+        id="root__title"
+      >
+        Example form
+      </legend>
+      <p
+        class="field-description"
+        id="root__description"
+      >
+        A simple form example.
+      </p>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_name"
+        >
+          Full name
+          <span
+            class="required"
+          >
+            *
+          </span>
+        </label>
+        <input
+          class="form-control"
+          id="root_name"
+          label="Full name"
+          placeholder=""
+          required=""
+          type="text"
+          value="Chuck Norris"
+        />
+      </div>
+      <div
+        class="form-group field field-integer"
+      >
+        <label
+          class="control-label"
+          for="root_age"
+        >
+          Age
+        </label>
+        <input
+          class="form-control"
+          id="root_age"
+          label="Age"
+          placeholder=""
+          type="number"
+          value="75"
+        />
+      </div>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_bio"
+        >
+          Bio
+        </label>
+        <textarea
+          class="form-control"
+          id="root_bio"
+          placeholder=""
+        >
+          Roundhouse kicking asses since 1940
+        </textarea>
+      </div>
+      <div
+        class="form-group field field-string"
+      >
+        <label
+          class="control-label"
+          for="root_password"
+        >
+          Password
+        </label>
+        <input
+          class="form-control"
+          id="root_password"
+          label="Password"
+          placeholder=""
+          type="password"
+          value="noneed"
+        />
+        <p
+          class="help-block"
+          id="root_password__help"
+        >
+          Hint: Make it strong!
+        </p>
+      </div>
+      <div
+        class="form-group field field-array"
+      >
+        <label
+          class="control-label"
+          for="root_multipleChoicesList"
+        >
+          A multiple choices list
+        </label>
+        <div
+          class="checkboxes"
+          id="root_multipleChoicesList"
+        >
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_0"
+                  type="checkbox"
+                />
+                <span>
+                  foo
+                </span>
+              </span>
+            </label>
+          </div>
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_1"
+                  type="checkbox"
+                />
+                <span>
+                  bar
+                </span>
+              </span>
+            </label>
+          </div>
+          <div
+            class="checkbox "
+          >
+            <label>
+              <span>
+                <input
+                  id="root_multipleChoicesList_2"
+                  type="checkbox"
+                />
+                <span>
+                  fuzz
+                </span>
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="form-group field field-number"
+      >
+        <label
+          class="control-label"
+          for="root_numberEnum"
+        >
+          Number enum
+        </label>
+        <div
+          class=" css-18o3wl1-container"
+          id="root_numberEnum"
+        >
+          <span
+            class="css-1f43avz-a11yText-A11yText"
+            id="react-select-3-live-region"
+          />
+          <span
+            aria-atomic="false"
+            aria-live="polite"
+            aria-relevant="additions text"
+            class="css-1f43avz-a11yText-A11yText"
+          />
+          <div
+            class=" css-gdsksj-control"
+          >
+            <div
+              class=" css-1dzc0nd-ValueContainer"
+            >
+              <div
+                class=" css-du77wi-placeholder"
+                id="react-select-3-placeholder"
+              />
+              <div
+                class=" css-1qx78vi-Input"
+                data-value=""
+              >
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="react-select-3-listbox"
+                  aria-describedby="react-select-3-placeholder"
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-owns="react-select-3-listbox"
+                  autocapitalize="none"
+                  autocomplete="off"
+                  autocorrect="off"
+                  class=""
+                  id="react-select-3-input"
+                  role="combobox"
+                  spellcheck="false"
+                  style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+                  tabindex="0"
+                  type="text"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class=" css-1hb7zxy-IndicatorsContainer"
+            >
+              <span
+                class=" css-1urf5ax-indicatorSeparator"
+              />
+              <div
+                aria-hidden="true"
+                class=" css-aazq4s-indicatorContainer"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="css-tj5bde-Svg"
+                  focusable="false"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                >
+                  <path
+                    d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="form-group field field-number"
+      >
+        <label
+          class="control-label"
+          for="root_numberEnumRadio"
+        >
+          Number enum
+        </label>
+        <div
+          class="field-radio-group"
+          id="root_numberEnumRadio"
+        >
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="1"
+              />
+              <span>
+                1
+              </span>
+            </span>
+          </label>
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="2"
+              />
+              <span>
+                2
+              </span>
+            </span>
+          </label>
+          <label
+            class="radio-inline "
+          >
+            <span>
+              <input
+                name="0.25546350798039463"
+                type="radio"
+                value="3"
+              />
+              <span>
+                3
+              </span>
+            </span>
+          </label>
+        </div>
+      </div>
+      <div
+        class="form-group field field-integer"
+      >
+        <label
+          class="control-label"
+          for="root_integerRange"
+        >
+          Integer range
+        </label>
+        <div
+          class="sc-gKclnd cELrub"
+        >
+          <div
+            class="sc-iCfMLu HKVV"
+          >
+            <input
+              id="root_integerRange"
+              max="100"
+              min="42"
+              placeholder=""
+              type="range"
+              uischema="[object Object]"
+              value="52"
+            />
+            <div>
+              52
+            </div>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+  <div
+    class="sc-eCImPb gcPrSZ"
+  >
+    <button
+      class="sc-dkPtRN bHfEsJ"
+      type="submit"
+    >
+      Custom button
+    </button>
+  </div>
+</form>
 `;
diff --git a/packages/redux-devtools-ui/tests/__snapshots__/Select.test.tsx.snap b/packages/redux-devtools-ui/tests/__snapshots__/Select.test.tsx.snap
index 5758bf44..2a8e3da3 100644
--- a/packages/redux-devtools-ui/tests/__snapshots__/Select.test.tsx.snap
+++ b/packages/redux-devtools-ui/tests/__snapshots__/Select.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`Select renders correctly 1`] = `
           id="react-select-2-input"
           role="combobox"
           spellcheck="false"
-          style="label:input;color:inherit;background:0;opacity:1;width:100%;grid-area:1 / 2;font:inherit;min-width:2px;border:0;margin:0;outline:0;padding:0"
+          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
           tabindex="0"
           type="text"
           value=""
@@ -185,4351 +185,196 @@ exports[`Select renders with props 1`] = `
 `;
 
 exports[`Select should select another option 1`] = `
-<WithTheme(Component)
-  onInputChange={
-    [MockFunction] {
-      "calls": Array [
-        Array [
-          "two",
-          Object {
-            "action": "input-change",
-          },
-        ],
-      ],
-      "results": Array [
-        Object {
-          "type": "return",
-          "value": undefined,
-        },
-      ],
-    }
-  }
-  options={
-    Array [
-      Object {
-        "label": "One",
-        "value": "one",
-      },
-      Object {
-        "label": "Two",
-        "value": "two",
-      },
-      Object {
-        "label": "One hundred",
-        "value": "hundred",
-      },
-    ]
-  }
+<div
+  class=" css-18o3wl1-container"
 >
-  <Component
-    onInputChange={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            "two",
-            Object {
-              "action": "input-change",
-            },
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
-    options={
-      Array [
-        Object {
-          "label": "One",
-          "value": "one",
-        },
-        Object {
-          "label": "Two",
-          "value": "two",
-        },
-        Object {
-          "label": "One hundred",
-          "value": "hundred",
-        },
-      ]
-    }
+  <span
+    class="css-1f43avz-a11yText-A11yText"
+    id="react-select-4-live-region"
+  />
+  <span
+    aria-atomic="false"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="css-1f43avz-a11yText-A11yText"
   >
-    <Select
-      onInputChange={
-        [MockFunction] {
-          "calls": Array [
-            Array [
-              "two",
-              Object {
-                "action": "input-change",
-              },
-            ],
-          ],
-          "results": Array [
-            Object {
-              "type": "return",
-              "value": undefined,
-            },
-          ],
-        }
-      }
-      options={
-        Array [
-          Object {
-            "label": "One",
-            "value": "one",
-          },
-          Object {
-            "label": "Two",
-            "value": "two",
-          },
-          Object {
-            "label": "One hundred",
-            "value": "hundred",
-          },
-        ]
-      }
-      theme={
-        Object {
-          "codeFontFamily": "'Source Code Pro', monospace",
-          "fontFamily": "'Source Sans Pro', sans-serif",
-          "inputBorderColor": undefined,
-          "inputBorderRadius": 4,
-          "inputBorderWidth": 1,
-          "inputFocusedStyle": "border-color: undefined",
-          "inputHeight": 30,
-          "inputInternalHeight": 28,
-          "inputPadding": 10,
-          "selectArrowWidth": 4,
-          "spinnerSize": 13,
-        }
-      }
+    <span
+      id="aria-selection"
+    />
+    <span
+      id="aria-context"
     >
-      <ForwardRef
-        onInputChange={
-          [MockFunction] {
-            "calls": Array [
-              Array [
-                "two",
-                Object {
-                  "action": "input-change",
-                },
-              ],
-            ],
-            "results": Array [
-              Object {
-                "type": "return",
-                "value": undefined,
-              },
-            ],
-          }
-        }
-        options={
-          Array [
-            Object {
-              "label": "One",
-              "value": "one",
-            },
-            Object {
-              "label": "Two",
-              "value": "two",
-            },
-            Object {
-              "label": "One hundred",
-              "value": "hundred",
-            },
-          ]
-        }
-        styles={
-          Object {
-            "container": [Function],
-            "control": [Function],
-            "menu": [Function],
-          }
-        }
-        theme={[Function]}
+      option Two focused, 2 of 3. 1 result available for search term two. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
+    </span>
+  </span>
+  <div
+    class=" css-1gv8qk2-control"
+  >
+    <div
+      class=" css-1dzc0nd-ValueContainer"
+    >
+      <div
+        class=" css-1qx78vi-Input"
+        data-value="two"
       >
-        <Select
-          aria-live="polite"
-          backspaceRemovesValue={true}
-          blurInputOnSelect={true}
-          captureMenuScroll={false}
-          closeMenuOnScroll={false}
-          closeMenuOnSelect={true}
-          components={Object {}}
-          controlShouldRenderValue={true}
-          escapeClearsValue={false}
-          filterOption={[Function]}
-          formatGroupLabel={[Function]}
-          getOptionLabel={[Function]}
-          getOptionValue={[Function]}
-          inputValue="two"
-          isDisabled={false}
-          isLoading={false}
-          isMulti={false}
-          isOptionDisabled={[Function]}
-          isRtl={false}
-          isSearchable={true}
-          loadingMessage={[Function]}
-          maxMenuHeight={300}
-          menuIsOpen={true}
-          menuPlacement="bottom"
-          menuPosition="absolute"
-          menuShouldBlockScroll={false}
-          menuShouldScrollIntoView={true}
-          minMenuHeight={140}
-          noOptionsMessage={[Function]}
-          onChange={[Function]}
-          onInputChange={[Function]}
-          onMenuClose={[Function]}
-          onMenuOpen={[Function]}
-          openMenuOnClick={true}
-          openMenuOnFocus={false}
-          options={
-            Array [
-              Object {
-                "label": "One",
-                "value": "one",
-              },
-              Object {
-                "label": "Two",
-                "value": "two",
-              },
-              Object {
-                "label": "One hundred",
-                "value": "hundred",
-              },
-            ]
-          }
-          pageSize={5}
-          placeholder="Select..."
-          screenReaderStatus={[Function]}
-          styles={
-            Object {
-              "container": [Function],
-              "control": [Function],
-              "menu": [Function],
-            }
-          }
-          tabIndex={0}
-          tabSelectsValue={true}
-          theme={[Function]}
-          value={null}
+        <input
+          aria-autocomplete="list"
+          aria-controls="react-select-4-listbox"
+          aria-describedby="react-select-4-placeholder"
+          aria-expanded="true"
+          aria-haspopup="true"
+          aria-owns="react-select-4-listbox"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          class=""
+          id="react-select-4-input"
+          role="combobox"
+          spellcheck="false"
+          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+          tabindex="0"
+          type="text"
+          value="two"
+        />
+      </div>
+    </div>
+    <div
+      class=" css-1hb7zxy-IndicatorsContainer"
+    >
+      <span
+        class=" css-1urf5ax-indicatorSeparator"
+      />
+      <div
+        aria-hidden="true"
+        class=" css-aazq4s-indicatorContainer"
+      >
+        <svg
+          aria-hidden="true"
+          class="css-tj5bde-Svg"
+          focusable="false"
+          height="20"
+          viewBox="0 0 20 20"
+          width="20"
         >
-          <SelectContainer
-            clearValue={[Function]}
-            cx={[Function]}
-            getStyles={[Function]}
-            getValue={[Function]}
-            hasValue={false}
-            innerProps={
-              Object {
-                "id": undefined,
-                "onKeyDown": [Function],
-              }
-            }
-            isDisabled={false}
-            isFocused={false}
-            isMulti={false}
-            isRtl={false}
-            options={
-              Array [
-                Object {
-                  "label": "One",
-                  "value": "one",
-                },
-                Object {
-                  "label": "Two",
-                  "value": "two",
-                },
-                Object {
-                  "label": "One hundred",
-                  "value": "hundred",
-                },
-              ]
-            }
-            selectOption={[Function]}
-            selectProps={
-              Object {
-                "aria-live": "polite",
-                "backspaceRemovesValue": true,
-                "blurInputOnSelect": true,
-                "captureMenuScroll": false,
-                "closeMenuOnScroll": false,
-                "closeMenuOnSelect": true,
-                "components": Object {},
-                "controlShouldRenderValue": true,
-                "escapeClearsValue": false,
-                "filterOption": [Function],
-                "formatGroupLabel": [Function],
-                "getOptionLabel": [Function],
-                "getOptionValue": [Function],
-                "inputValue": "two",
-                "isDisabled": false,
-                "isLoading": false,
-                "isMulti": false,
-                "isOptionDisabled": [Function],
-                "isRtl": false,
-                "isSearchable": true,
-                "loadingMessage": [Function],
-                "maxMenuHeight": 300,
-                "menuIsOpen": true,
-                "menuPlacement": "bottom",
-                "menuPosition": "absolute",
-                "menuShouldBlockScroll": false,
-                "menuShouldScrollIntoView": true,
-                "minMenuHeight": 140,
-                "noOptionsMessage": [Function],
-                "onChange": [Function],
-                "onInputChange": [Function],
-                "onMenuClose": [Function],
-                "onMenuOpen": [Function],
-                "openMenuOnClick": true,
-                "openMenuOnFocus": false,
-                "options": Array [
-                  Object {
-                    "label": "One",
-                    "value": "one",
-                  },
-                  Object {
-                    "label": "Two",
-                    "value": "two",
-                  },
-                  Object {
-                    "label": "One hundred",
-                    "value": "hundred",
-                  },
-                ],
-                "pageSize": 5,
-                "placeholder": "Select...",
-                "screenReaderStatus": [Function],
-                "styles": Object {
-                  "container": [Function],
-                  "control": [Function],
-                  "menu": [Function],
-                },
-                "tabIndex": 0,
-                "tabSelectsValue": true,
-                "theme": [Function],
-                "value": null,
-              }
-            }
-            setValue={[Function]}
-            theme={
-              Object {
-                "borderRadius": 0,
-                "colors": Object {
-                  "danger": undefined,
-                  "dangerLight": undefined,
-                  "neutral0": undefined,
-                  "neutral10": undefined,
-                  "neutral20": undefined,
-                  "neutral30": undefined,
-                  "neutral40": undefined,
-                  "neutral5": undefined,
-                  "neutral50": "hsl(0, 0%, 50%)",
-                  "neutral60": undefined,
-                  "neutral70": "hsl(0, 0%, 30%)",
-                  "neutral80": undefined,
-                  "neutral90": "hsl(0, 0%, 10%)",
-                  "primary": undefined,
-                  "primary25": undefined,
-                  "primary50": undefined,
-                  "primary75": "#4C9AFF",
-                },
-                "spacing": Object {
-                  "baseUnit": 2,
-                  "controlHeight": 30,
-                  "menuGutter": 8,
-                },
-              }
-            }
-          >
-            <EmotionCssPropInternal
-              __EMOTION_LABEL_PLEASE_DO_NOT_USE__="SelectContainer"
-              __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-              className=""
-              css={
-                Object {
-                  "boxSizing": "border-box",
-                  "direction": undefined,
-                  "flexGrow": 1,
-                  "label": "container",
-                  "pointerEvents": undefined,
-                  "position": "relative",
-                }
-              }
-              onKeyDown={[Function]}
-            >
-              <div
-                className=" css-18o3wl1-container"
-                onKeyDown={[Function]}
-              >
-                <LiveRegion
-                  ariaSelection={null}
-                  clearValue={[Function]}
-                  cx={[Function]}
-                  focusableOptions={
-                    Array [
-                      Object {
-                        "label": "Two",
-                        "value": "two",
-                      },
-                    ]
-                  }
-                  focusedOption={
-                    Object {
-                      "label": "Two",
-                      "value": "two",
-                    }
-                  }
-                  focusedValue={null}
-                  getStyles={[Function]}
-                  getValue={[Function]}
-                  hasValue={false}
-                  id="react-select-4-live-region"
-                  isFocused={false}
-                  isMulti={false}
-                  isRtl={false}
-                  options={
-                    Array [
-                      Object {
-                        "label": "One",
-                        "value": "one",
-                      },
-                      Object {
-                        "label": "Two",
-                        "value": "two",
-                      },
-                      Object {
-                        "label": "One hundred",
-                        "value": "hundred",
-                      },
-                    ]
-                  }
-                  selectOption={[Function]}
-                  selectProps={
-                    Object {
-                      "aria-live": "polite",
-                      "backspaceRemovesValue": true,
-                      "blurInputOnSelect": true,
-                      "captureMenuScroll": false,
-                      "closeMenuOnScroll": false,
-                      "closeMenuOnSelect": true,
-                      "components": Object {},
-                      "controlShouldRenderValue": true,
-                      "escapeClearsValue": false,
-                      "filterOption": [Function],
-                      "formatGroupLabel": [Function],
-                      "getOptionLabel": [Function],
-                      "getOptionValue": [Function],
-                      "inputValue": "two",
-                      "isDisabled": false,
-                      "isLoading": false,
-                      "isMulti": false,
-                      "isOptionDisabled": [Function],
-                      "isRtl": false,
-                      "isSearchable": true,
-                      "loadingMessage": [Function],
-                      "maxMenuHeight": 300,
-                      "menuIsOpen": true,
-                      "menuPlacement": "bottom",
-                      "menuPosition": "absolute",
-                      "menuShouldBlockScroll": false,
-                      "menuShouldScrollIntoView": true,
-                      "minMenuHeight": 140,
-                      "noOptionsMessage": [Function],
-                      "onChange": [Function],
-                      "onInputChange": [Function],
-                      "onMenuClose": [Function],
-                      "onMenuOpen": [Function],
-                      "openMenuOnClick": true,
-                      "openMenuOnFocus": false,
-                      "options": Array [
-                        Object {
-                          "label": "One",
-                          "value": "one",
-                        },
-                        Object {
-                          "label": "Two",
-                          "value": "two",
-                        },
-                        Object {
-                          "label": "One hundred",
-                          "value": "hundred",
-                        },
-                      ],
-                      "pageSize": 5,
-                      "placeholder": "Select...",
-                      "screenReaderStatus": [Function],
-                      "styles": Object {
-                        "container": [Function],
-                        "control": [Function],
-                        "menu": [Function],
-                      },
-                      "tabIndex": 0,
-                      "tabSelectsValue": true,
-                      "theme": [Function],
-                      "value": null,
-                    }
-                  }
-                  selectValue={Array []}
-                  setValue={[Function]}
-                  theme={
-                    Object {
-                      "borderRadius": 0,
-                      "colors": Object {
-                        "danger": undefined,
-                        "dangerLight": undefined,
-                        "neutral0": undefined,
-                        "neutral10": undefined,
-                        "neutral20": undefined,
-                        "neutral30": undefined,
-                        "neutral40": undefined,
-                        "neutral5": undefined,
-                        "neutral50": "hsl(0, 0%, 50%)",
-                        "neutral60": undefined,
-                        "neutral70": "hsl(0, 0%, 30%)",
-                        "neutral80": undefined,
-                        "neutral90": "hsl(0, 0%, 10%)",
-                        "primary": undefined,
-                        "primary25": undefined,
-                        "primary50": undefined,
-                        "primary75": "#4C9AFF",
-                      },
-                      "spacing": Object {
-                        "baseUnit": 2,
-                        "controlHeight": 30,
-                        "menuGutter": 8,
-                      },
-                    }
-                  }
-                >
-                  <A11yText
-                    id="react-select-4-live-region"
-                  >
-                    <EmotionCssPropInternal
-                      __EMOTION_LABEL_PLEASE_DO_NOT_USE__="A11yText"
-                      __EMOTION_TYPE_PLEASE_DO_NOT_USE__="span"
-                      css={
-                        Object {
-                          "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkExMXlUZXh0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNSSIsImZpbGUiOiJBMTF5VGV4dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLy8gQXNzaXN0aXZlIHRleHQgdG8gZGVzY3JpYmUgdmlzdWFsIGVsZW1lbnRzLiBIaWRkZW4gZm9yIHNpZ2h0ZWQgdXNlcnMuXG5jb25zdCBBMTF5VGV4dCA9IChwcm9wczogSlNYLkludHJpbnNpY0VsZW1lbnRzWydzcGFuJ10pID0+IChcbiAgPHNwYW5cbiAgICBjc3M9e3tcbiAgICAgIGxhYmVsOiAnYTExeVRleHQnLFxuICAgICAgekluZGV4OiA5OTk5LFxuICAgICAgYm9yZGVyOiAwLFxuICAgICAgY2xpcDogJ3JlY3QoMXB4LCAxcHgsIDFweCwgMXB4KScsXG4gICAgICBoZWlnaHQ6IDEsXG4gICAgICB3aWR0aDogMSxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgcGFkZGluZzogMCxcbiAgICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgQTExeVRleHQ7XG4iXX0= */",
-                          "name": "1f43avz-a11yText-A11yText",
-                          "styles": "label:a11yText;z-index:9999;border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;position:absolute;overflow:hidden;padding:0;white-space:nowrap;label:A11yText;",
-                          "toString": [Function],
-                        }
-                      }
-                      id="react-select-4-live-region"
-                    >
-                      <span
-                        className="css-1f43avz-a11yText-A11yText"
-                        id="react-select-4-live-region"
-                      />
-                    </EmotionCssPropInternal>
-                  </A11yText>
-                  <A11yText
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                  >
-                    <EmotionCssPropInternal
-                      __EMOTION_LABEL_PLEASE_DO_NOT_USE__="A11yText"
-                      __EMOTION_TYPE_PLEASE_DO_NOT_USE__="span"
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      css={
-                        Object {
-                          "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkExMXlUZXh0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNSSIsImZpbGUiOiJBMTF5VGV4dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLy8gQXNzaXN0aXZlIHRleHQgdG8gZGVzY3JpYmUgdmlzdWFsIGVsZW1lbnRzLiBIaWRkZW4gZm9yIHNpZ2h0ZWQgdXNlcnMuXG5jb25zdCBBMTF5VGV4dCA9IChwcm9wczogSlNYLkludHJpbnNpY0VsZW1lbnRzWydzcGFuJ10pID0+IChcbiAgPHNwYW5cbiAgICBjc3M9e3tcbiAgICAgIGxhYmVsOiAnYTExeVRleHQnLFxuICAgICAgekluZGV4OiA5OTk5LFxuICAgICAgYm9yZGVyOiAwLFxuICAgICAgY2xpcDogJ3JlY3QoMXB4LCAxcHgsIDFweCwgMXB4KScsXG4gICAgICBoZWlnaHQ6IDEsXG4gICAgICB3aWR0aDogMSxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgcGFkZGluZzogMCxcbiAgICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgQTExeVRleHQ7XG4iXX0= */",
-                          "name": "1f43avz-a11yText-A11yText",
-                          "styles": "label:a11yText;z-index:9999;border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;position:absolute;overflow:hidden;padding:0;white-space:nowrap;label:A11yText;",
-                          "toString": [Function],
-                        }
-                      }
-                    >
-                      <span
-                        aria-atomic="false"
-                        aria-live="polite"
-                        aria-relevant="additions text"
-                        className="css-1f43avz-a11yText-A11yText"
-                      />
-                    </EmotionCssPropInternal>
-                  </A11yText>
-                </LiveRegion>
-                <Control
-                  clearValue={[Function]}
-                  cx={[Function]}
-                  getStyles={[Function]}
-                  getValue={[Function]}
-                  hasValue={false}
-                  innerProps={
-                    Object {
-                      "onMouseDown": [Function],
-                      "onTouchEnd": [Function],
-                    }
-                  }
-                  innerRef={[Function]}
-                  isDisabled={false}
-                  isFocused={false}
-                  isMulti={false}
-                  isRtl={false}
-                  menuIsOpen={true}
-                  options={
-                    Array [
-                      Object {
-                        "label": "One",
-                        "value": "one",
-                      },
-                      Object {
-                        "label": "Two",
-                        "value": "two",
-                      },
-                      Object {
-                        "label": "One hundred",
-                        "value": "hundred",
-                      },
-                    ]
-                  }
-                  selectOption={[Function]}
-                  selectProps={
-                    Object {
-                      "aria-live": "polite",
-                      "backspaceRemovesValue": true,
-                      "blurInputOnSelect": true,
-                      "captureMenuScroll": false,
-                      "closeMenuOnScroll": false,
-                      "closeMenuOnSelect": true,
-                      "components": Object {},
-                      "controlShouldRenderValue": true,
-                      "escapeClearsValue": false,
-                      "filterOption": [Function],
-                      "formatGroupLabel": [Function],
-                      "getOptionLabel": [Function],
-                      "getOptionValue": [Function],
-                      "inputValue": "two",
-                      "isDisabled": false,
-                      "isLoading": false,
-                      "isMulti": false,
-                      "isOptionDisabled": [Function],
-                      "isRtl": false,
-                      "isSearchable": true,
-                      "loadingMessage": [Function],
-                      "maxMenuHeight": 300,
-                      "menuIsOpen": true,
-                      "menuPlacement": "bottom",
-                      "menuPosition": "absolute",
-                      "menuShouldBlockScroll": false,
-                      "menuShouldScrollIntoView": true,
-                      "minMenuHeight": 140,
-                      "noOptionsMessage": [Function],
-                      "onChange": [Function],
-                      "onInputChange": [Function],
-                      "onMenuClose": [Function],
-                      "onMenuOpen": [Function],
-                      "openMenuOnClick": true,
-                      "openMenuOnFocus": false,
-                      "options": Array [
-                        Object {
-                          "label": "One",
-                          "value": "one",
-                        },
-                        Object {
-                          "label": "Two",
-                          "value": "two",
-                        },
-                        Object {
-                          "label": "One hundred",
-                          "value": "hundred",
-                        },
-                      ],
-                      "pageSize": 5,
-                      "placeholder": "Select...",
-                      "screenReaderStatus": [Function],
-                      "styles": Object {
-                        "container": [Function],
-                        "control": [Function],
-                        "menu": [Function],
-                      },
-                      "tabIndex": 0,
-                      "tabSelectsValue": true,
-                      "theme": [Function],
-                      "value": null,
-                    }
-                  }
-                  setValue={[Function]}
-                  theme={
-                    Object {
-                      "borderRadius": 0,
-                      "colors": Object {
-                        "danger": undefined,
-                        "dangerLight": undefined,
-                        "neutral0": undefined,
-                        "neutral10": undefined,
-                        "neutral20": undefined,
-                        "neutral30": undefined,
-                        "neutral40": undefined,
-                        "neutral5": undefined,
-                        "neutral50": "hsl(0, 0%, 50%)",
-                        "neutral60": undefined,
-                        "neutral70": "hsl(0, 0%, 30%)",
-                        "neutral80": undefined,
-                        "neutral90": "hsl(0, 0%, 10%)",
-                        "primary": undefined,
-                        "primary25": undefined,
-                        "primary50": undefined,
-                        "primary75": "#4C9AFF",
-                      },
-                      "spacing": Object {
-                        "baseUnit": 2,
-                        "controlHeight": 30,
-                        "menuGutter": 8,
-                      },
-                    }
-                  }
-                >
-                  <EmotionCssPropInternal
-                    __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Control"
-                    __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                    className=""
-                    css={
-                      Object {
-                        "&:hover": Object {
-                          "backgroundColor": undefined,
-                          "borderColor": undefined,
-                        },
-                        "alignItems": "center",
-                        "backgroundColor": undefined,
-                        "borderColor": undefined,
-                        "borderRadius": 0,
-                        "borderStyle": "solid",
-                        "borderWidth": 1,
-                        "boxShadow": undefined,
-                        "boxSizing": "border-box",
-                        "cursor": "default",
-                        "display": "flex",
-                        "flexWrap": "wrap",
-                        "justifyContent": "space-between",
-                        "label": "control",
-                        "minHeight": 30,
-                        "outline": "0 !important",
-                        "position": "relative",
-                        "transition": "all 100ms",
-                      }
-                    }
-                    onMouseDown={[Function]}
-                    onTouchEnd={[Function]}
-                  >
-                    <div
-                      className=" css-gdsksj-control"
-                      onMouseDown={[Function]}
-                      onTouchEnd={[Function]}
-                    >
-                      <ValueContainer
-                        clearValue={[Function]}
-                        cx={[Function]}
-                        getStyles={[Function]}
-                        getValue={[Function]}
-                        hasValue={false}
-                        isDisabled={false}
-                        isMulti={false}
-                        isRtl={false}
-                        options={
-                          Array [
-                            Object {
-                              "label": "One",
-                              "value": "one",
-                            },
-                            Object {
-                              "label": "Two",
-                              "value": "two",
-                            },
-                            Object {
-                              "label": "One hundred",
-                              "value": "hundred",
-                            },
-                          ]
-                        }
-                        selectOption={[Function]}
-                        selectProps={
-                          Object {
-                            "aria-live": "polite",
-                            "backspaceRemovesValue": true,
-                            "blurInputOnSelect": true,
-                            "captureMenuScroll": false,
-                            "closeMenuOnScroll": false,
-                            "closeMenuOnSelect": true,
-                            "components": Object {},
-                            "controlShouldRenderValue": true,
-                            "escapeClearsValue": false,
-                            "filterOption": [Function],
-                            "formatGroupLabel": [Function],
-                            "getOptionLabel": [Function],
-                            "getOptionValue": [Function],
-                            "inputValue": "two",
-                            "isDisabled": false,
-                            "isLoading": false,
-                            "isMulti": false,
-                            "isOptionDisabled": [Function],
-                            "isRtl": false,
-                            "isSearchable": true,
-                            "loadingMessage": [Function],
-                            "maxMenuHeight": 300,
-                            "menuIsOpen": true,
-                            "menuPlacement": "bottom",
-                            "menuPosition": "absolute",
-                            "menuShouldBlockScroll": false,
-                            "menuShouldScrollIntoView": true,
-                            "minMenuHeight": 140,
-                            "noOptionsMessage": [Function],
-                            "onChange": [Function],
-                            "onInputChange": [Function],
-                            "onMenuClose": [Function],
-                            "onMenuOpen": [Function],
-                            "openMenuOnClick": true,
-                            "openMenuOnFocus": false,
-                            "options": Array [
-                              Object {
-                                "label": "One",
-                                "value": "one",
-                              },
-                              Object {
-                                "label": "Two",
-                                "value": "two",
-                              },
-                              Object {
-                                "label": "One hundred",
-                                "value": "hundred",
-                              },
-                            ],
-                            "pageSize": 5,
-                            "placeholder": "Select...",
-                            "screenReaderStatus": [Function],
-                            "styles": Object {
-                              "container": [Function],
-                              "control": [Function],
-                              "menu": [Function],
-                            },
-                            "tabIndex": 0,
-                            "tabSelectsValue": true,
-                            "theme": [Function],
-                            "value": null,
-                          }
-                        }
-                        setValue={[Function]}
-                        theme={
-                          Object {
-                            "borderRadius": 0,
-                            "colors": Object {
-                              "danger": undefined,
-                              "dangerLight": undefined,
-                              "neutral0": undefined,
-                              "neutral10": undefined,
-                              "neutral20": undefined,
-                              "neutral30": undefined,
-                              "neutral40": undefined,
-                              "neutral5": undefined,
-                              "neutral50": "hsl(0, 0%, 50%)",
-                              "neutral60": undefined,
-                              "neutral70": "hsl(0, 0%, 30%)",
-                              "neutral80": undefined,
-                              "neutral90": "hsl(0, 0%, 10%)",
-                              "primary": undefined,
-                              "primary25": undefined,
-                              "primary50": undefined,
-                              "primary75": "#4C9AFF",
-                            },
-                            "spacing": Object {
-                              "baseUnit": 2,
-                              "controlHeight": 30,
-                              "menuGutter": 8,
-                            },
-                          }
-                        }
-                      >
-                        <EmotionCssPropInternal
-                          __EMOTION_LABEL_PLEASE_DO_NOT_USE__="ValueContainer"
-                          __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                          className=""
-                          css={
-                            Object {
-                              "WebkitOverflowScrolling": "touch",
-                              "alignItems": "center",
-                              "boxSizing": "border-box",
-                              "display": "grid",
-                              "flex": 1,
-                              "flexWrap": "wrap",
-                              "overflow": "hidden",
-                              "padding": "1px 4px",
-                              "position": "relative",
-                            }
-                          }
-                        >
-                          <div
-                            className=" css-1dzc0nd-ValueContainer"
-                          >
-                            <Input
-                              aria-autocomplete="list"
-                              aria-controls="react-select-4-listbox"
-                              aria-describedby="react-select-4-placeholder"
-                              aria-expanded={true}
-                              aria-haspopup={true}
-                              aria-owns="react-select-4-listbox"
-                              autoCapitalize="none"
-                              autoComplete="off"
-                              autoCorrect="off"
-                              clearValue={[Function]}
-                              cx={[Function]}
-                              getStyles={[Function]}
-                              getValue={[Function]}
-                              hasValue={false}
-                              id="react-select-4-input"
-                              innerRef={[Function]}
-                              isDisabled={false}
-                              isHidden={false}
-                              isMulti={false}
-                              isRtl={false}
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              options={
-                                Array [
-                                  Object {
-                                    "label": "One",
-                                    "value": "one",
-                                  },
-                                  Object {
-                                    "label": "Two",
-                                    "value": "two",
-                                  },
-                                  Object {
-                                    "label": "One hundred",
-                                    "value": "hundred",
-                                  },
-                                ]
-                              }
-                              role="combobox"
-                              selectOption={[Function]}
-                              selectProps={
-                                Object {
-                                  "aria-live": "polite",
-                                  "backspaceRemovesValue": true,
-                                  "blurInputOnSelect": true,
-                                  "captureMenuScroll": false,
-                                  "closeMenuOnScroll": false,
-                                  "closeMenuOnSelect": true,
-                                  "components": Object {},
-                                  "controlShouldRenderValue": true,
-                                  "escapeClearsValue": false,
-                                  "filterOption": [Function],
-                                  "formatGroupLabel": [Function],
-                                  "getOptionLabel": [Function],
-                                  "getOptionValue": [Function],
-                                  "inputValue": "two",
-                                  "isDisabled": false,
-                                  "isLoading": false,
-                                  "isMulti": false,
-                                  "isOptionDisabled": [Function],
-                                  "isRtl": false,
-                                  "isSearchable": true,
-                                  "loadingMessage": [Function],
-                                  "maxMenuHeight": 300,
-                                  "menuIsOpen": true,
-                                  "menuPlacement": "bottom",
-                                  "menuPosition": "absolute",
-                                  "menuShouldBlockScroll": false,
-                                  "menuShouldScrollIntoView": true,
-                                  "minMenuHeight": 140,
-                                  "noOptionsMessage": [Function],
-                                  "onChange": [Function],
-                                  "onInputChange": [Function],
-                                  "onMenuClose": [Function],
-                                  "onMenuOpen": [Function],
-                                  "openMenuOnClick": true,
-                                  "openMenuOnFocus": false,
-                                  "options": Array [
-                                    Object {
-                                      "label": "One",
-                                      "value": "one",
-                                    },
-                                    Object {
-                                      "label": "Two",
-                                      "value": "two",
-                                    },
-                                    Object {
-                                      "label": "One hundred",
-                                      "value": "hundred",
-                                    },
-                                  ],
-                                  "pageSize": 5,
-                                  "placeholder": "Select...",
-                                  "screenReaderStatus": [Function],
-                                  "styles": Object {
-                                    "container": [Function],
-                                    "control": [Function],
-                                    "menu": [Function],
-                                  },
-                                  "tabIndex": 0,
-                                  "tabSelectsValue": true,
-                                  "theme": [Function],
-                                  "value": null,
-                                }
-                              }
-                              setValue={[Function]}
-                              spellCheck="false"
-                              tabIndex={0}
-                              theme={
-                                Object {
-                                  "borderRadius": 0,
-                                  "colors": Object {
-                                    "danger": undefined,
-                                    "dangerLight": undefined,
-                                    "neutral0": undefined,
-                                    "neutral10": undefined,
-                                    "neutral20": undefined,
-                                    "neutral30": undefined,
-                                    "neutral40": undefined,
-                                    "neutral5": undefined,
-                                    "neutral50": "hsl(0, 0%, 50%)",
-                                    "neutral60": undefined,
-                                    "neutral70": "hsl(0, 0%, 30%)",
-                                    "neutral80": undefined,
-                                    "neutral90": "hsl(0, 0%, 10%)",
-                                    "primary": undefined,
-                                    "primary25": undefined,
-                                    "primary50": undefined,
-                                    "primary75": "#4C9AFF",
-                                  },
-                                  "spacing": Object {
-                                    "baseUnit": 2,
-                                    "controlHeight": 30,
-                                    "menuGutter": 8,
-                                  },
-                                }
-                              }
-                              type="text"
-                              value="two"
-                            >
-                              <EmotionCssPropInternal
-                                __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Input"
-                                __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                                className=""
-                                css={
-                                  Object {
-                                    "&:after": Object {
-                                      "border": 0,
-                                      "content": "attr(data-value) \\" \\"",
-                                      "font": "inherit",
-                                      "gridArea": "1 / 2",
-                                      "margin": 0,
-                                      "minWidth": "2px",
-                                      "outline": 0,
-                                      "padding": 0,
-                                      "visibility": "hidden",
-                                      "whiteSpace": "pre",
-                                    },
-                                    "boxSizing": "border-box",
-                                    "color": undefined,
-                                    "display": "inline-grid",
-                                    "flex": "1 1 auto",
-                                    "gridArea": "1 / 1 / 2 / 3",
-                                    "gridTemplateColumns": "0 min-content",
-                                    "margin": 1,
-                                    "paddingBottom": 1,
-                                    "paddingTop": 1,
-                                    "visibility": "visible",
-                                  }
-                                }
-                                data-value="two"
-                              >
-                                <div
-                                  className=" css-1qx78vi-Input"
-                                  data-value="two"
-                                >
-                                  <input
-                                    aria-autocomplete="list"
-                                    aria-controls="react-select-4-listbox"
-                                    aria-describedby="react-select-4-placeholder"
-                                    aria-expanded={true}
-                                    aria-haspopup={true}
-                                    aria-owns="react-select-4-listbox"
-                                    autoCapitalize="none"
-                                    autoComplete="off"
-                                    autoCorrect="off"
-                                    className=""
-                                    disabled={false}
-                                    id="react-select-4-input"
-                                    onBlur={[Function]}
-                                    onChange={[Function]}
-                                    onFocus={[Function]}
-                                    role="combobox"
-                                    spellCheck="false"
-                                    style={
-                                      Object {
-                                        "background": 0,
-                                        "border": 0,
-                                        "color": "inherit",
-                                        "font": "inherit",
-                                        "gridArea": "1 / 2",
-                                        "label": "input",
-                                        "margin": 0,
-                                        "minWidth": "2px",
-                                        "opacity": 1,
-                                        "outline": 0,
-                                        "padding": 0,
-                                        "width": "100%",
-                                      }
-                                    }
-                                    tabIndex={0}
-                                    type="text"
-                                    value="two"
-                                  />
-                                </div>
-                              </EmotionCssPropInternal>
-                            </Input>
-                          </div>
-                        </EmotionCssPropInternal>
-                      </ValueContainer>
-                      <IndicatorsContainer
-                        clearValue={[Function]}
-                        cx={[Function]}
-                        getStyles={[Function]}
-                        getValue={[Function]}
-                        hasValue={false}
-                        isDisabled={false}
-                        isMulti={false}
-                        isRtl={false}
-                        options={
-                          Array [
-                            Object {
-                              "label": "One",
-                              "value": "one",
-                            },
-                            Object {
-                              "label": "Two",
-                              "value": "two",
-                            },
-                            Object {
-                              "label": "One hundred",
-                              "value": "hundred",
-                            },
-                          ]
-                        }
-                        selectOption={[Function]}
-                        selectProps={
-                          Object {
-                            "aria-live": "polite",
-                            "backspaceRemovesValue": true,
-                            "blurInputOnSelect": true,
-                            "captureMenuScroll": false,
-                            "closeMenuOnScroll": false,
-                            "closeMenuOnSelect": true,
-                            "components": Object {},
-                            "controlShouldRenderValue": true,
-                            "escapeClearsValue": false,
-                            "filterOption": [Function],
-                            "formatGroupLabel": [Function],
-                            "getOptionLabel": [Function],
-                            "getOptionValue": [Function],
-                            "inputValue": "two",
-                            "isDisabled": false,
-                            "isLoading": false,
-                            "isMulti": false,
-                            "isOptionDisabled": [Function],
-                            "isRtl": false,
-                            "isSearchable": true,
-                            "loadingMessage": [Function],
-                            "maxMenuHeight": 300,
-                            "menuIsOpen": true,
-                            "menuPlacement": "bottom",
-                            "menuPosition": "absolute",
-                            "menuShouldBlockScroll": false,
-                            "menuShouldScrollIntoView": true,
-                            "minMenuHeight": 140,
-                            "noOptionsMessage": [Function],
-                            "onChange": [Function],
-                            "onInputChange": [Function],
-                            "onMenuClose": [Function],
-                            "onMenuOpen": [Function],
-                            "openMenuOnClick": true,
-                            "openMenuOnFocus": false,
-                            "options": Array [
-                              Object {
-                                "label": "One",
-                                "value": "one",
-                              },
-                              Object {
-                                "label": "Two",
-                                "value": "two",
-                              },
-                              Object {
-                                "label": "One hundred",
-                                "value": "hundred",
-                              },
-                            ],
-                            "pageSize": 5,
-                            "placeholder": "Select...",
-                            "screenReaderStatus": [Function],
-                            "styles": Object {
-                              "container": [Function],
-                              "control": [Function],
-                              "menu": [Function],
-                            },
-                            "tabIndex": 0,
-                            "tabSelectsValue": true,
-                            "theme": [Function],
-                            "value": null,
-                          }
-                        }
-                        setValue={[Function]}
-                        theme={
-                          Object {
-                            "borderRadius": 0,
-                            "colors": Object {
-                              "danger": undefined,
-                              "dangerLight": undefined,
-                              "neutral0": undefined,
-                              "neutral10": undefined,
-                              "neutral20": undefined,
-                              "neutral30": undefined,
-                              "neutral40": undefined,
-                              "neutral5": undefined,
-                              "neutral50": "hsl(0, 0%, 50%)",
-                              "neutral60": undefined,
-                              "neutral70": "hsl(0, 0%, 30%)",
-                              "neutral80": undefined,
-                              "neutral90": "hsl(0, 0%, 10%)",
-                              "primary": undefined,
-                              "primary25": undefined,
-                              "primary50": undefined,
-                              "primary75": "#4C9AFF",
-                            },
-                            "spacing": Object {
-                              "baseUnit": 2,
-                              "controlHeight": 30,
-                              "menuGutter": 8,
-                            },
-                          }
-                        }
-                      >
-                        <EmotionCssPropInternal
-                          __EMOTION_LABEL_PLEASE_DO_NOT_USE__="IndicatorsContainer"
-                          __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                          className=""
-                          css={
-                            Object {
-                              "alignItems": "center",
-                              "alignSelf": "stretch",
-                              "boxSizing": "border-box",
-                              "display": "flex",
-                              "flexShrink": 0,
-                            }
-                          }
-                        >
-                          <div
-                            className=" css-1hb7zxy-IndicatorsContainer"
-                          >
-                            <IndicatorSeparator
-                              clearValue={[Function]}
-                              cx={[Function]}
-                              getStyles={[Function]}
-                              getValue={[Function]}
-                              hasValue={false}
-                              isDisabled={false}
-                              isFocused={false}
-                              isMulti={false}
-                              isRtl={false}
-                              options={
-                                Array [
-                                  Object {
-                                    "label": "One",
-                                    "value": "one",
-                                  },
-                                  Object {
-                                    "label": "Two",
-                                    "value": "two",
-                                  },
-                                  Object {
-                                    "label": "One hundred",
-                                    "value": "hundred",
-                                  },
-                                ]
-                              }
-                              selectOption={[Function]}
-                              selectProps={
-                                Object {
-                                  "aria-live": "polite",
-                                  "backspaceRemovesValue": true,
-                                  "blurInputOnSelect": true,
-                                  "captureMenuScroll": false,
-                                  "closeMenuOnScroll": false,
-                                  "closeMenuOnSelect": true,
-                                  "components": Object {},
-                                  "controlShouldRenderValue": true,
-                                  "escapeClearsValue": false,
-                                  "filterOption": [Function],
-                                  "formatGroupLabel": [Function],
-                                  "getOptionLabel": [Function],
-                                  "getOptionValue": [Function],
-                                  "inputValue": "two",
-                                  "isDisabled": false,
-                                  "isLoading": false,
-                                  "isMulti": false,
-                                  "isOptionDisabled": [Function],
-                                  "isRtl": false,
-                                  "isSearchable": true,
-                                  "loadingMessage": [Function],
-                                  "maxMenuHeight": 300,
-                                  "menuIsOpen": true,
-                                  "menuPlacement": "bottom",
-                                  "menuPosition": "absolute",
-                                  "menuShouldBlockScroll": false,
-                                  "menuShouldScrollIntoView": true,
-                                  "minMenuHeight": 140,
-                                  "noOptionsMessage": [Function],
-                                  "onChange": [Function],
-                                  "onInputChange": [Function],
-                                  "onMenuClose": [Function],
-                                  "onMenuOpen": [Function],
-                                  "openMenuOnClick": true,
-                                  "openMenuOnFocus": false,
-                                  "options": Array [
-                                    Object {
-                                      "label": "One",
-                                      "value": "one",
-                                    },
-                                    Object {
-                                      "label": "Two",
-                                      "value": "two",
-                                    },
-                                    Object {
-                                      "label": "One hundred",
-                                      "value": "hundred",
-                                    },
-                                  ],
-                                  "pageSize": 5,
-                                  "placeholder": "Select...",
-                                  "screenReaderStatus": [Function],
-                                  "styles": Object {
-                                    "container": [Function],
-                                    "control": [Function],
-                                    "menu": [Function],
-                                  },
-                                  "tabIndex": 0,
-                                  "tabSelectsValue": true,
-                                  "theme": [Function],
-                                  "value": null,
-                                }
-                              }
-                              setValue={[Function]}
-                              theme={
-                                Object {
-                                  "borderRadius": 0,
-                                  "colors": Object {
-                                    "danger": undefined,
-                                    "dangerLight": undefined,
-                                    "neutral0": undefined,
-                                    "neutral10": undefined,
-                                    "neutral20": undefined,
-                                    "neutral30": undefined,
-                                    "neutral40": undefined,
-                                    "neutral5": undefined,
-                                    "neutral50": "hsl(0, 0%, 50%)",
-                                    "neutral60": undefined,
-                                    "neutral70": "hsl(0, 0%, 30%)",
-                                    "neutral80": undefined,
-                                    "neutral90": "hsl(0, 0%, 10%)",
-                                    "primary": undefined,
-                                    "primary25": undefined,
-                                    "primary50": undefined,
-                                    "primary75": "#4C9AFF",
-                                  },
-                                  "spacing": Object {
-                                    "baseUnit": 2,
-                                    "controlHeight": 30,
-                                    "menuGutter": 8,
-                                  },
-                                }
-                              }
-                            >
-                              <EmotionCssPropInternal
-                                __EMOTION_LABEL_PLEASE_DO_NOT_USE__="IndicatorSeparator"
-                                __EMOTION_TYPE_PLEASE_DO_NOT_USE__="span"
-                                className=""
-                                css={
-                                  Object {
-                                    "alignSelf": "stretch",
-                                    "backgroundColor": undefined,
-                                    "boxSizing": "border-box",
-                                    "label": "indicatorSeparator",
-                                    "marginBottom": 4,
-                                    "marginTop": 4,
-                                    "width": 1,
-                                  }
-                                }
-                              >
-                                <span
-                                  className=" css-1urf5ax-indicatorSeparator"
-                                />
-                              </EmotionCssPropInternal>
-                            </IndicatorSeparator>
-                            <DropdownIndicator
-                              clearValue={[Function]}
-                              cx={[Function]}
-                              getStyles={[Function]}
-                              getValue={[Function]}
-                              hasValue={false}
-                              innerProps={
-                                Object {
-                                  "aria-hidden": "true",
-                                  "onMouseDown": [Function],
-                                  "onTouchEnd": [Function],
-                                }
-                              }
-                              isDisabled={false}
-                              isFocused={false}
-                              isMulti={false}
-                              isRtl={false}
-                              options={
-                                Array [
-                                  Object {
-                                    "label": "One",
-                                    "value": "one",
-                                  },
-                                  Object {
-                                    "label": "Two",
-                                    "value": "two",
-                                  },
-                                  Object {
-                                    "label": "One hundred",
-                                    "value": "hundred",
-                                  },
-                                ]
-                              }
-                              selectOption={[Function]}
-                              selectProps={
-                                Object {
-                                  "aria-live": "polite",
-                                  "backspaceRemovesValue": true,
-                                  "blurInputOnSelect": true,
-                                  "captureMenuScroll": false,
-                                  "closeMenuOnScroll": false,
-                                  "closeMenuOnSelect": true,
-                                  "components": Object {},
-                                  "controlShouldRenderValue": true,
-                                  "escapeClearsValue": false,
-                                  "filterOption": [Function],
-                                  "formatGroupLabel": [Function],
-                                  "getOptionLabel": [Function],
-                                  "getOptionValue": [Function],
-                                  "inputValue": "two",
-                                  "isDisabled": false,
-                                  "isLoading": false,
-                                  "isMulti": false,
-                                  "isOptionDisabled": [Function],
-                                  "isRtl": false,
-                                  "isSearchable": true,
-                                  "loadingMessage": [Function],
-                                  "maxMenuHeight": 300,
-                                  "menuIsOpen": true,
-                                  "menuPlacement": "bottom",
-                                  "menuPosition": "absolute",
-                                  "menuShouldBlockScroll": false,
-                                  "menuShouldScrollIntoView": true,
-                                  "minMenuHeight": 140,
-                                  "noOptionsMessage": [Function],
-                                  "onChange": [Function],
-                                  "onInputChange": [Function],
-                                  "onMenuClose": [Function],
-                                  "onMenuOpen": [Function],
-                                  "openMenuOnClick": true,
-                                  "openMenuOnFocus": false,
-                                  "options": Array [
-                                    Object {
-                                      "label": "One",
-                                      "value": "one",
-                                    },
-                                    Object {
-                                      "label": "Two",
-                                      "value": "two",
-                                    },
-                                    Object {
-                                      "label": "One hundred",
-                                      "value": "hundred",
-                                    },
-                                  ],
-                                  "pageSize": 5,
-                                  "placeholder": "Select...",
-                                  "screenReaderStatus": [Function],
-                                  "styles": Object {
-                                    "container": [Function],
-                                    "control": [Function],
-                                    "menu": [Function],
-                                  },
-                                  "tabIndex": 0,
-                                  "tabSelectsValue": true,
-                                  "theme": [Function],
-                                  "value": null,
-                                }
-                              }
-                              setValue={[Function]}
-                              theme={
-                                Object {
-                                  "borderRadius": 0,
-                                  "colors": Object {
-                                    "danger": undefined,
-                                    "dangerLight": undefined,
-                                    "neutral0": undefined,
-                                    "neutral10": undefined,
-                                    "neutral20": undefined,
-                                    "neutral30": undefined,
-                                    "neutral40": undefined,
-                                    "neutral5": undefined,
-                                    "neutral50": "hsl(0, 0%, 50%)",
-                                    "neutral60": undefined,
-                                    "neutral70": "hsl(0, 0%, 30%)",
-                                    "neutral80": undefined,
-                                    "neutral90": "hsl(0, 0%, 10%)",
-                                    "primary": undefined,
-                                    "primary25": undefined,
-                                    "primary50": undefined,
-                                    "primary75": "#4C9AFF",
-                                  },
-                                  "spacing": Object {
-                                    "baseUnit": 2,
-                                    "controlHeight": 30,
-                                    "menuGutter": 8,
-                                  },
-                                }
-                              }
-                            >
-                              <EmotionCssPropInternal
-                                __EMOTION_LABEL_PLEASE_DO_NOT_USE__="DropdownIndicator"
-                                __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                                aria-hidden="true"
-                                className=""
-                                css={
-                                  Object {
-                                    ":hover": Object {
-                                      "color": undefined,
-                                    },
-                                    "boxSizing": "border-box",
-                                    "color": undefined,
-                                    "display": "flex",
-                                    "label": "indicatorContainer",
-                                    "padding": 4,
-                                    "transition": "color 150ms",
-                                  }
-                                }
-                                onMouseDown={[Function]}
-                                onTouchEnd={[Function]}
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  className=" css-aazq4s-indicatorContainer"
-                                  onMouseDown={[Function]}
-                                  onTouchEnd={[Function]}
-                                >
-                                  <DownChevron>
-                                    <Svg
-                                      size={20}
-                                    >
-                                      <EmotionCssPropInternal
-                                        __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Svg"
-                                        __EMOTION_TYPE_PLEASE_DO_NOT_USE__="svg"
-                                        aria-hidden="true"
-                                        css={
-                                          Object {
-                                            "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGljYXRvcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCSSIsImZpbGUiOiJpbmRpY2F0b3JzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsganN4LCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7XG4gIENvbW1vblByb3BzQW5kQ2xhc3NOYW1lLFxuICBDU1NPYmplY3RXaXRoTGFiZWwsXG4gIEdyb3VwQmFzZSxcbn0gZnJvbSAnLi4vdHlwZXMnO1xuXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbi8vIERyb3Bkb3duICYgQ2xlYXIgSWNvbnNcbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG5jb25zdCBTdmcgPSAoe1xuICBzaXplLFxuICAuLi5wcm9wc1xufTogSlNYLkludHJpbnNpY0VsZW1lbnRzWydzdmcnXSAmIHsgc2l6ZTogbnVtYmVyIH0pID0+IChcbiAgPHN2Z1xuICAgIGhlaWdodD17c2l6ZX1cbiAgICB3aWR0aD17c2l6ZX1cbiAgICB2aWV3Qm94PVwiMCAwIDIwIDIwXCJcbiAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgIGZvY3VzYWJsZT1cImZhbHNlXCJcbiAgICBjc3M9e3tcbiAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgZmlsbDogJ2N1cnJlbnRDb2xvcicsXG4gICAgICBsaW5lSGVpZ2h0OiAxLFxuICAgICAgc3Ryb2tlOiAnY3VycmVudENvbG9yJyxcbiAgICAgIHN0cm9rZVdpZHRoOiAwLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IHR5cGUgQ3Jvc3NJY29uUHJvcHMgPSBKU1guSW50cmluc2ljRWxlbWVudHNbJ3N2ZyddICYgeyBzaXplPzogbnVtYmVyIH07XG5leHBvcnQgY29uc3QgQ3Jvc3NJY29uID0gKHByb3BzOiBDcm9zc0ljb25Qcm9wcykgPT4gKFxuICA8U3ZnIHNpemU9ezIwfSB7Li4ucHJvcHN9PlxuICAgIDxwYXRoIGQ9XCJNMTQuMzQ4IDE0Ljg0OWMtMC40NjkgMC40NjktMS4yMjkgMC40NjktMS42OTcgMGwtMi42NTEtMy4wMzAtMi42NTEgMy4wMjljLTAuNDY5IDAuNDY5LTEuMjI5IDAuNDY5LTEuNjk3IDAtMC40NjktMC40NjktMC40NjktMS4yMjkgMC0xLjY5N2wyLjc1OC0zLjE1LTIuNzU5LTMuMTUyYy0wLjQ2OS0wLjQ2OS0wLjQ2OS0xLjIyOCAwLTEuNjk3czEuMjI4LTAuNDY5IDEuNjk3IDBsMi42NTIgMy4wMzEgMi42NTEtMy4wMzFjMC40NjktMC40NjkgMS4yMjgtMC40NjkgMS42OTcgMHMwLjQ2OSAxLjIyOSAwIDEuNjk3bC0yLjc1OCAzLjE1MiAyLjc1OCAzLjE1YzAuNDY5IDAuNDY5IDAuNDY5IDEuMjI5IDAgMS42OTh6XCIgLz5cbiAgPC9Tdmc+XG4pO1xuZXhwb3J0IHR5cGUgRG93bkNoZXZyb25Qcm9wcyA9IEpTWC5JbnRyaW5zaWNFbGVtZW50c1snc3ZnJ10gJiB7IHNpemU/OiBudW1iZXIgfTtcbmV4cG9ydCBjb25zdCBEb3duQ2hldnJvbiA9IChwcm9wczogRG93bkNoZXZyb25Qcm9wcykgPT4gKFxuICA8U3ZnIHNpemU9ezIwfSB7Li4ucHJvcHN9PlxuICAgIDxwYXRoIGQ9XCJNNC41MTYgNy41NDhjMC40MzYtMC40NDYgMS4wNDMtMC40ODEgMS41NzYgMGwzLjkwOCAzLjc0NyAzLjkwOC0zLjc0N2MwLjUzMy0wLjQ4MSAxLjE0MS0wLjQ0NiAxLjU3NCAwIDAuNDM2IDAuNDQ1IDAuNDA4IDEuMTk3IDAgMS42MTUtMC40MDYgMC40MTgtNC42OTUgNC41MDItNC42OTUgNC41MDItMC4yMTcgMC4yMjMtMC41MDIgMC4zMzUtMC43ODcgMC4zMzVzLTAuNTctMC4xMTItMC43ODktMC4zMzVjMCAwLTQuMjg3LTQuMDg0LTQuNjk1LTQuNTAycy0wLjQzNi0xLjE3IDAtMS42MTV6XCIgLz5cbiAgPC9Tdmc+XG4pO1xuXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbi8vIERyb3Bkb3duICYgQ2xlYXIgQnV0dG9uc1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG5cbmV4cG9ydCBpbnRlcmZhY2UgRHJvcGRvd25JbmRpY2F0b3JQcm9wczxcbiAgT3B0aW9uID0gdW5rbm93bixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4gPSBib29sZWFuLFxuICBHcm91cCBleHRlbmRzIEdyb3VwQmFzZTxPcHRpb24+ID0gR3JvdXBCYXNlPE9wdGlvbj5cbj4gZXh0ZW5kcyBDb21tb25Qcm9wc0FuZENsYXNzTmFtZTxPcHRpb24sIElzTXVsdGksIEdyb3VwPiB7XG4gIC8qKiBUaGUgY2hpbGRyZW4gdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoZSBpbmRpY2F0b3IuICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICAvKiogUHJvcHMgdGhhdCB3aWxsIGJlIHBhc3NlZCBvbiB0byB0aGUgY2hpbGRyZW4uICovXG4gIGlubmVyUHJvcHM6IEpTWC5JbnRyaW5zaWNFbGVtZW50c1snZGl2J107XG4gIC8qKiBUaGUgZm9jdXNlZCBzdGF0ZSBvZiB0aGUgc2VsZWN0LiAqL1xuICBpc0ZvY3VzZWQ6IGJvb2xlYW47XG4gIGlzRGlzYWJsZWQ6IGJvb2xlYW47XG59XG5cbmNvbnN0IGJhc2VDU1MgPSA8XG4gIE9wdGlvbixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj5cbj4oe1xuICBpc0ZvY3VzZWQsXG4gIHRoZW1lOiB7XG4gICAgc3BhY2luZzogeyBiYXNlVW5pdCB9LFxuICAgIGNvbG9ycyxcbiAgfSxcbn06XG4gIHwgRHJvcGRvd25JbmRpY2F0b3JQcm9wczxPcHRpb24sIElzTXVsdGksIEdyb3VwPlxuICB8IENsZWFySW5kaWNhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD4pOiBDU1NPYmplY3RXaXRoTGFiZWwgPT4gKHtcbiAgbGFiZWw6ICdpbmRpY2F0b3JDb250YWluZXInLFxuICBjb2xvcjogaXNGb2N1c2VkID8gY29sb3JzLm5ldXRyYWw2MCA6IGNvbG9ycy5uZXV0cmFsMjAsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgcGFkZGluZzogYmFzZVVuaXQgKiAyLFxuICB0cmFuc2l0aW9uOiAnY29sb3IgMTUwbXMnLFxuXG4gICc6aG92ZXInOiB7XG4gICAgY29sb3I6IGlzRm9jdXNlZCA/IGNvbG9ycy5uZXV0cmFsODAgOiBjb2xvcnMubmV1dHJhbDQwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBkcm9wZG93bkluZGljYXRvckNTUyA9IGJhc2VDU1M7XG5leHBvcnQgY29uc3QgRHJvcGRvd25JbmRpY2F0b3IgPSA8XG4gIE9wdGlvbixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj5cbj4oXG4gIHByb3BzOiBEcm9wZG93bkluZGljYXRvclByb3BzPE9wdGlvbiwgSXNNdWx0aSwgR3JvdXA+XG4pID0+IHtcbiAgY29uc3QgeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBjeCwgZ2V0U3R5bGVzLCBpbm5lclByb3BzIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2dldFN0eWxlcygnZHJvcGRvd25JbmRpY2F0b3InLCBwcm9wcyl9XG4gICAgICBjbGFzc05hbWU9e2N4KFxuICAgICAgICB7XG4gICAgICAgICAgaW5kaWNhdG9yOiB0cnVlLFxuICAgICAgICAgICdkcm9wZG93bi1pbmRpY2F0b3InOiB0cnVlLFxuICAgICAgICB9LFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW4gfHwgPERvd25DaGV2cm9uIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBDbGVhckluZGljYXRvclByb3BzPFxuICBPcHRpb24gPSB1bmtub3duLFxuICBJc011bHRpIGV4dGVuZHMgYm9vbGVhbiA9IGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj4gPSBHcm91cEJhc2U8T3B0aW9uPlxuPiBleHRlbmRzIENvbW1vblByb3BzQW5kQ2xhc3NOYW1lPE9wdGlvbiwgSXNNdWx0aSwgR3JvdXA+IHtcbiAgLyoqIFRoZSBjaGlsZHJlbiB0byBiZSByZW5kZXJlZCBpbnNpZGUgdGhlIGluZGljYXRvci4gKi9cbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIC8qKiBQcm9wcyB0aGF0IHdpbGwgYmUgcGFzc2VkIG9uIHRvIHRoZSBjaGlsZHJlbi4gKi9cbiAgaW5uZXJQcm9wczogSlNYLkludHJpbnNpY0VsZW1lbnRzWydkaXYnXTtcbiAgLyoqIFRoZSBmb2N1c2VkIHN0YXRlIG9mIHRoZSBzZWxlY3QuICovXG4gIGlzRm9jdXNlZDogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IGNsZWFySW5kaWNhdG9yQ1NTID0gYmFzZUNTUztcbmV4cG9ydCBjb25zdCBDbGVhckluZGljYXRvciA9IDxcbiAgT3B0aW9uLFxuICBJc011bHRpIGV4dGVuZHMgYm9vbGVhbixcbiAgR3JvdXAgZXh0ZW5kcyBHcm91cEJhc2U8T3B0aW9uPlxuPihcbiAgcHJvcHM6IENsZWFySW5kaWNhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD5cbikgPT4ge1xuICBjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGN4LCBnZXRTdHlsZXMsIGlubmVyUHJvcHMgfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKX1cbiAgICAgIGNsYXNzTmFtZT17Y3goXG4gICAgICAgIHtcbiAgICAgICAgICBpbmRpY2F0b3I6IHRydWUsXG4gICAgICAgICAgJ2NsZWFyLWluZGljYXRvcic6IHRydWUsXG4gICAgICAgIH0sXG4gICAgICAgIGNsYXNzTmFtZVxuICAgICAgKX1cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbiB8fCA8Q3Jvc3NJY29uIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBTZXBhcmF0b3Jcbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG5leHBvcnQgaW50ZXJmYWNlIEluZGljYXRvclNlcGFyYXRvclByb3BzPFxuICBPcHRpb24gPSB1bmtub3duLFxuICBJc011bHRpIGV4dGVuZHMgYm9vbGVhbiA9IGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj4gPSBHcm91cEJhc2U8T3B0aW9uPlxuPiBleHRlbmRzIENvbW1vblByb3BzQW5kQ2xhc3NOYW1lPE9wdGlvbiwgSXNNdWx0aSwgR3JvdXA+IHtcbiAgaXNEaXNhYmxlZDogYm9vbGVhbjtcbiAgaXNGb2N1c2VkOiBib29sZWFuO1xuICBpbm5lclByb3BzPzogSlNYLkludHJpbnNpY0VsZW1lbnRzWydzcGFuJ107XG59XG5cbmV4cG9ydCBjb25zdCBpbmRpY2F0b3JTZXBhcmF0b3JDU1MgPSA8XG4gIE9wdGlvbixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj5cbj4oe1xuICBpc0Rpc2FibGVkLFxuICB0aGVtZToge1xuICAgIHNwYWNpbmc6IHsgYmFzZVVuaXQgfSxcbiAgICBjb2xvcnMsXG4gIH0sXG59OiBJbmRpY2F0b3JTZXBhcmF0b3JQcm9wczxPcHRpb24sIElzTXVsdGksIEdyb3VwPik6IENTU09iamVjdFdpdGhMYWJlbCA9PiAoe1xuICBsYWJlbDogJ2luZGljYXRvclNlcGFyYXRvcicsXG4gIGFsaWduU2VsZjogJ3N0cmV0Y2gnLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGlzRGlzYWJsZWQgPyBjb2xvcnMubmV1dHJhbDEwIDogY29sb3JzLm5ldXRyYWwyMCxcbiAgbWFyZ2luQm90dG9tOiBiYXNlVW5pdCAqIDIsXG4gIG1hcmdpblRvcDogYmFzZVVuaXQgKiAyLFxuICB3aWR0aDogMSxcbn0pO1xuXG5leHBvcnQgY29uc3QgSW5kaWNhdG9yU2VwYXJhdG9yID0gPFxuICBPcHRpb24sXG4gIElzTXVsdGkgZXh0ZW5kcyBib29sZWFuLFxuICBHcm91cCBleHRlbmRzIEdyb3VwQmFzZTxPcHRpb24+XG4+KFxuICBwcm9wczogSW5kaWNhdG9yU2VwYXJhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD5cbikgPT4ge1xuICBjb25zdCB7IGNsYXNzTmFtZSwgY3gsIGdldFN0eWxlcywgaW5uZXJQcm9wcyB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPHNwYW5cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2luZGljYXRvclNlcGFyYXRvcicsIHByb3BzKX1cbiAgICAgIGNsYXNzTmFtZT17Y3goeyAnaW5kaWNhdG9yLXNlcGFyYXRvcic6IHRydWUgfSwgY2xhc3NOYW1lKX1cbiAgICAvPlxuICApO1xufTtcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBMb2FkaW5nXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuY29uc3QgbG9hZGluZ0RvdEFuaW1hdGlvbnMgPSBrZXlmcmFtZXNgXG4gIDAlLCA4MCUsIDEwMCUgeyBvcGFjaXR5OiAwOyB9XG4gIDQwJSB7IG9wYWNpdHk6IDE7IH1cbmA7XG5cbmV4cG9ydCBjb25zdCBsb2FkaW5nSW5kaWNhdG9yQ1NTID0gPFxuICBPcHRpb24sXG4gIElzTXVsdGkgZXh0ZW5kcyBib29sZWFuLFxuICBHcm91cCBleHRlbmRzIEdyb3VwQmFzZTxPcHRpb24+XG4+KHtcbiAgaXNGb2N1c2VkLFxuICBzaXplLFxuICB0aGVtZToge1xuICAgIGNvbG9ycyxcbiAgICBzcGFjaW5nOiB7IGJhc2VVbml0IH0sXG4gIH0sXG59OiBMb2FkaW5nSW5kaWNhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD4pOiBDU1NPYmplY3RXaXRoTGFiZWwgPT4gKHtcbiAgbGFiZWw6ICdsb2FkaW5nSW5kaWNhdG9yJyxcbiAgY29sb3I6IGlzRm9jdXNlZCA/IGNvbG9ycy5uZXV0cmFsNjAgOiBjb2xvcnMubmV1dHJhbDIwLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIHBhZGRpbmc6IGJhc2VVbml0ICogMixcbiAgdHJhbnNpdGlvbjogJ2NvbG9yIDE1MG1zJyxcbiAgYWxpZ25TZWxmOiAnY2VudGVyJyxcbiAgZm9udFNpemU6IHNpemUsXG4gIGxpbmVIZWlnaHQ6IDEsXG4gIG1hcmdpblJpZ2h0OiBzaXplLFxuICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICB2ZXJ0aWNhbEFsaWduOiAnbWlkZGxlJyxcbn0pO1xuXG5pbnRlcmZhY2UgTG9hZGluZ0RvdFByb3BzIHtcbiAgZGVsYXk6IG51bWJlcjtcbiAgb2Zmc2V0OiBib29sZWFuO1xufVxuY29uc3QgTG9hZGluZ0RvdCA9ICh7IGRlbGF5LCBvZmZzZXQgfTogTG9hZGluZ0RvdFByb3BzKSA9PiAoXG4gIDxzcGFuXG4gICAgY3NzPXt7XG4gICAgICBhbmltYXRpb246IGAke2xvYWRpbmdEb3RBbmltYXRpb25zfSAxcyBlYXNlLWluLW91dCAke2RlbGF5fW1zIGluZmluaXRlO2AsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6ICdjdXJyZW50Q29sb3InLFxuICAgICAgYm9yZGVyUmFkaXVzOiAnMWVtJyxcbiAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgbWFyZ2luTGVmdDogb2Zmc2V0ID8gJzFlbScgOiB1bmRlZmluZWQsXG4gICAgICBoZWlnaHQ6ICcxZW0nLFxuICAgICAgdmVydGljYWxBbGlnbjogJ3RvcCcsXG4gICAgICB3aWR0aDogJzFlbScsXG4gICAgfX1cbiAgLz5cbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTG9hZGluZ0luZGljYXRvclByb3BzPFxuICBPcHRpb24gPSB1bmtub3duLFxuICBJc011bHRpIGV4dGVuZHMgYm9vbGVhbiA9IGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj4gPSBHcm91cEJhc2U8T3B0aW9uPlxuPiBleHRlbmRzIENvbW1vblByb3BzQW5kQ2xhc3NOYW1lPE9wdGlvbiwgSXNNdWx0aSwgR3JvdXA+IHtcbiAgLyoqIFByb3BzIHRoYXQgd2lsbCBiZSBwYXNzZWQgb24gdG8gdGhlIGNoaWxkcmVuLiAqL1xuICBpbm5lclByb3BzOiBKU1guSW50cmluc2ljRWxlbWVudHNbJ2RpdiddO1xuICAvKiogVGhlIGZvY3VzZWQgc3RhdGUgb2YgdGhlIHNlbGVjdC4gKi9cbiAgaXNGb2N1c2VkOiBib29sZWFuO1xuICBpc0Rpc2FibGVkOiBib29sZWFuO1xuICAvKiogU2V0IHNpemUgb2YgdGhlIGNvbnRhaW5lci4gKi9cbiAgc2l6ZTogbnVtYmVyO1xufVxuZXhwb3J0IGNvbnN0IExvYWRpbmdJbmRpY2F0b3IgPSA8XG4gIE9wdGlvbixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj5cbj4oXG4gIHByb3BzOiBMb2FkaW5nSW5kaWNhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD5cbikgPT4ge1xuICBjb25zdCB7IGNsYXNzTmFtZSwgY3gsIGdldFN0eWxlcywgaW5uZXJQcm9wcywgaXNSdGwgfSA9IHByb3BzO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2xvYWRpbmdJbmRpY2F0b3InLCBwcm9wcyl9XG4gICAgICBjbGFzc05hbWU9e2N4KFxuICAgICAgICB7XG4gICAgICAgICAgaW5kaWNhdG9yOiB0cnVlLFxuICAgICAgICAgICdsb2FkaW5nLWluZGljYXRvcic6IHRydWUsXG4gICAgICAgIH0sXG4gICAgICAgIGNsYXNzTmFtZVxuICAgICAgKX1cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgID5cbiAgICAgIDxMb2FkaW5nRG90IGRlbGF5PXswfSBvZmZzZXQ9e2lzUnRsfSAvPlxuICAgICAgPExvYWRpbmdEb3QgZGVsYXk9ezE2MH0gb2Zmc2V0IC8+XG4gICAgICA8TG9hZGluZ0RvdCBkZWxheT17MzIwfSBvZmZzZXQ9eyFpc1J0bH0gLz5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5Mb2FkaW5nSW5kaWNhdG9yLmRlZmF1bHRQcm9wcyA9IHsgc2l6ZTogNCB9O1xuIl19 */",
-                                            "name": "tj5bde-Svg",
-                                            "styles": "display:inline-block;fill:currentColor;line-height:1;stroke:currentColor;stroke-width:0;label:Svg;",
-                                            "toString": [Function],
-                                          }
-                                        }
-                                        focusable="false"
-                                        height={20}
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          className="css-tj5bde-Svg"
-                                          focusable="false"
-                                          height={20}
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                        >
-                                          <path
-                                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                                          />
-                                        </svg>
-                                      </EmotionCssPropInternal>
-                                    </Svg>
-                                  </DownChevron>
-                                </div>
-                              </EmotionCssPropInternal>
-                            </DropdownIndicator>
-                          </div>
-                        </EmotionCssPropInternal>
-                      </IndicatorsContainer>
-                    </div>
-                  </EmotionCssPropInternal>
-                </Control>
-                <MenuPlacer
-                  clearValue={[Function]}
-                  cx={[Function]}
-                  getStyles={[Function]}
-                  getValue={[Function]}
-                  hasValue={false}
-                  isMulti={false}
-                  isRtl={false}
-                  maxMenuHeight={300}
-                  menuPlacement="bottom"
-                  menuPosition="absolute"
-                  menuShouldScrollIntoView={true}
-                  minMenuHeight={140}
-                  options={
-                    Array [
-                      Object {
-                        "label": "One",
-                        "value": "one",
-                      },
-                      Object {
-                        "label": "Two",
-                        "value": "two",
-                      },
-                      Object {
-                        "label": "One hundred",
-                        "value": "hundred",
-                      },
-                    ]
-                  }
-                  selectOption={[Function]}
-                  selectProps={
-                    Object {
-                      "aria-live": "polite",
-                      "backspaceRemovesValue": true,
-                      "blurInputOnSelect": true,
-                      "captureMenuScroll": false,
-                      "closeMenuOnScroll": false,
-                      "closeMenuOnSelect": true,
-                      "components": Object {},
-                      "controlShouldRenderValue": true,
-                      "escapeClearsValue": false,
-                      "filterOption": [Function],
-                      "formatGroupLabel": [Function],
-                      "getOptionLabel": [Function],
-                      "getOptionValue": [Function],
-                      "inputValue": "two",
-                      "isDisabled": false,
-                      "isLoading": false,
-                      "isMulti": false,
-                      "isOptionDisabled": [Function],
-                      "isRtl": false,
-                      "isSearchable": true,
-                      "loadingMessage": [Function],
-                      "maxMenuHeight": 300,
-                      "menuIsOpen": true,
-                      "menuPlacement": "bottom",
-                      "menuPosition": "absolute",
-                      "menuShouldBlockScroll": false,
-                      "menuShouldScrollIntoView": true,
-                      "minMenuHeight": 140,
-                      "noOptionsMessage": [Function],
-                      "onChange": [Function],
-                      "onInputChange": [Function],
-                      "onMenuClose": [Function],
-                      "onMenuOpen": [Function],
-                      "openMenuOnClick": true,
-                      "openMenuOnFocus": false,
-                      "options": Array [
-                        Object {
-                          "label": "One",
-                          "value": "one",
-                        },
-                        Object {
-                          "label": "Two",
-                          "value": "two",
-                        },
-                        Object {
-                          "label": "One hundred",
-                          "value": "hundred",
-                        },
-                      ],
-                      "pageSize": 5,
-                      "placeholder": "Select...",
-                      "screenReaderStatus": [Function],
-                      "styles": Object {
-                        "container": [Function],
-                        "control": [Function],
-                        "menu": [Function],
-                      },
-                      "tabIndex": 0,
-                      "tabSelectsValue": true,
-                      "theme": [Function],
-                      "value": null,
-                    }
-                  }
-                  setValue={[Function]}
-                  theme={
-                    Object {
-                      "borderRadius": 0,
-                      "colors": Object {
-                        "danger": undefined,
-                        "dangerLight": undefined,
-                        "neutral0": undefined,
-                        "neutral10": undefined,
-                        "neutral20": undefined,
-                        "neutral30": undefined,
-                        "neutral40": undefined,
-                        "neutral5": undefined,
-                        "neutral50": "hsl(0, 0%, 50%)",
-                        "neutral60": undefined,
-                        "neutral70": "hsl(0, 0%, 30%)",
-                        "neutral80": undefined,
-                        "neutral90": "hsl(0, 0%, 10%)",
-                        "primary": undefined,
-                        "primary25": undefined,
-                        "primary50": undefined,
-                        "primary75": "#4C9AFF",
-                      },
-                      "spacing": Object {
-                        "baseUnit": 2,
-                        "controlHeight": 30,
-                        "menuGutter": 8,
-                      },
-                    }
-                  }
-                >
-                  <Menu
-                    clearValue={[Function]}
-                    cx={[Function]}
-                    getStyles={[Function]}
-                    getValue={[Function]}
-                    hasValue={false}
-                    innerProps={
-                      Object {
-                        "id": "react-select-4-listbox",
-                        "onMouseDown": [Function],
-                        "onMouseMove": [Function],
-                      }
-                    }
-                    innerRef={[Function]}
-                    isLoading={false}
-                    isMulti={false}
-                    isRtl={false}
-                    maxMenuHeight={300}
-                    menuPlacement="bottom"
-                    menuPosition="absolute"
-                    menuShouldScrollIntoView={true}
-                    minMenuHeight={140}
-                    options={
-                      Array [
-                        Object {
-                          "label": "One",
-                          "value": "one",
-                        },
-                        Object {
-                          "label": "Two",
-                          "value": "two",
-                        },
-                        Object {
-                          "label": "One hundred",
-                          "value": "hundred",
-                        },
-                      ]
-                    }
-                    placement="bottom"
-                    selectOption={[Function]}
-                    selectProps={
-                      Object {
-                        "aria-live": "polite",
-                        "backspaceRemovesValue": true,
-                        "blurInputOnSelect": true,
-                        "captureMenuScroll": false,
-                        "closeMenuOnScroll": false,
-                        "closeMenuOnSelect": true,
-                        "components": Object {},
-                        "controlShouldRenderValue": true,
-                        "escapeClearsValue": false,
-                        "filterOption": [Function],
-                        "formatGroupLabel": [Function],
-                        "getOptionLabel": [Function],
-                        "getOptionValue": [Function],
-                        "inputValue": "two",
-                        "isDisabled": false,
-                        "isLoading": false,
-                        "isMulti": false,
-                        "isOptionDisabled": [Function],
-                        "isRtl": false,
-                        "isSearchable": true,
-                        "loadingMessage": [Function],
-                        "maxMenuHeight": 300,
-                        "menuIsOpen": true,
-                        "menuPlacement": "bottom",
-                        "menuPosition": "absolute",
-                        "menuShouldBlockScroll": false,
-                        "menuShouldScrollIntoView": true,
-                        "minMenuHeight": 140,
-                        "noOptionsMessage": [Function],
-                        "onChange": [Function],
-                        "onInputChange": [Function],
-                        "onMenuClose": [Function],
-                        "onMenuOpen": [Function],
-                        "openMenuOnClick": true,
-                        "openMenuOnFocus": false,
-                        "options": Array [
-                          Object {
-                            "label": "One",
-                            "value": "one",
-                          },
-                          Object {
-                            "label": "Two",
-                            "value": "two",
-                          },
-                          Object {
-                            "label": "One hundred",
-                            "value": "hundred",
-                          },
-                        ],
-                        "pageSize": 5,
-                        "placeholder": "Select...",
-                        "screenReaderStatus": [Function],
-                        "styles": Object {
-                          "container": [Function],
-                          "control": [Function],
-                          "menu": [Function],
-                        },
-                        "tabIndex": 0,
-                        "tabSelectsValue": true,
-                        "theme": [Function],
-                        "value": null,
-                      }
-                    }
-                    setValue={[Function]}
-                    theme={
-                      Object {
-                        "borderRadius": 0,
-                        "colors": Object {
-                          "danger": undefined,
-                          "dangerLight": undefined,
-                          "neutral0": undefined,
-                          "neutral10": undefined,
-                          "neutral20": undefined,
-                          "neutral30": undefined,
-                          "neutral40": undefined,
-                          "neutral5": undefined,
-                          "neutral50": "hsl(0, 0%, 50%)",
-                          "neutral60": undefined,
-                          "neutral70": "hsl(0, 0%, 30%)",
-                          "neutral80": undefined,
-                          "neutral90": "hsl(0, 0%, 10%)",
-                          "primary": undefined,
-                          "primary25": undefined,
-                          "primary50": undefined,
-                          "primary75": "#4C9AFF",
-                        },
-                        "spacing": Object {
-                          "baseUnit": 2,
-                          "controlHeight": 30,
-                          "menuGutter": 8,
-                        },
-                      }
-                    }
-                  >
-                    <EmotionCssPropInternal
-                      __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Menu"
-                      __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                      className=""
-                      css={
-                        Object {
-                          "backgroundColor": undefined,
-                          "borderRadius": 0,
-                          "boxShadow": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)",
-                          "boxSizing": "border-box",
-                          "label": "menu",
-                          "marginBottom": 8,
-                          "marginTop": 8,
-                          "position": "absolute",
-                          "top": "100%",
-                          "width": "100%",
-                          "zIndex": 10,
-                        }
-                      }
-                      id="react-select-4-listbox"
-                      onMouseDown={[Function]}
-                      onMouseMove={[Function]}
-                    >
-                      <div
-                        className=" css-17wpf85-menu"
-                        id="react-select-4-listbox"
-                        onMouseDown={[Function]}
-                        onMouseMove={[Function]}
-                      >
-                        <ScrollManager
-                          captureEnabled={false}
-                          lockEnabled={false}
-                        >
-                          <MenuList
-                            clearValue={[Function]}
-                            cx={[Function]}
-                            focusedOption={
-                              Object {
-                                "label": "Two",
-                                "value": "two",
-                              }
-                            }
-                            getStyles={[Function]}
-                            getValue={[Function]}
-                            hasValue={false}
-                            innerRef={[Function]}
-                            isLoading={false}
-                            isMulti={false}
-                            isRtl={false}
-                            maxHeight={300}
-                            options={
-                              Array [
-                                Object {
-                                  "label": "One",
-                                  "value": "one",
-                                },
-                                Object {
-                                  "label": "Two",
-                                  "value": "two",
-                                },
-                                Object {
-                                  "label": "One hundred",
-                                  "value": "hundred",
-                                },
-                              ]
-                            }
-                            selectOption={[Function]}
-                            selectProps={
-                              Object {
-                                "aria-live": "polite",
-                                "backspaceRemovesValue": true,
-                                "blurInputOnSelect": true,
-                                "captureMenuScroll": false,
-                                "closeMenuOnScroll": false,
-                                "closeMenuOnSelect": true,
-                                "components": Object {},
-                                "controlShouldRenderValue": true,
-                                "escapeClearsValue": false,
-                                "filterOption": [Function],
-                                "formatGroupLabel": [Function],
-                                "getOptionLabel": [Function],
-                                "getOptionValue": [Function],
-                                "inputValue": "two",
-                                "isDisabled": false,
-                                "isLoading": false,
-                                "isMulti": false,
-                                "isOptionDisabled": [Function],
-                                "isRtl": false,
-                                "isSearchable": true,
-                                "loadingMessage": [Function],
-                                "maxMenuHeight": 300,
-                                "menuIsOpen": true,
-                                "menuPlacement": "bottom",
-                                "menuPosition": "absolute",
-                                "menuShouldBlockScroll": false,
-                                "menuShouldScrollIntoView": true,
-                                "minMenuHeight": 140,
-                                "noOptionsMessage": [Function],
-                                "onChange": [Function],
-                                "onInputChange": [Function],
-                                "onMenuClose": [Function],
-                                "onMenuOpen": [Function],
-                                "openMenuOnClick": true,
-                                "openMenuOnFocus": false,
-                                "options": Array [
-                                  Object {
-                                    "label": "One",
-                                    "value": "one",
-                                  },
-                                  Object {
-                                    "label": "Two",
-                                    "value": "two",
-                                  },
-                                  Object {
-                                    "label": "One hundred",
-                                    "value": "hundred",
-                                  },
-                                ],
-                                "pageSize": 5,
-                                "placeholder": "Select...",
-                                "screenReaderStatus": [Function],
-                                "styles": Object {
-                                  "container": [Function],
-                                  "control": [Function],
-                                  "menu": [Function],
-                                },
-                                "tabIndex": 0,
-                                "tabSelectsValue": true,
-                                "theme": [Function],
-                                "value": null,
-                              }
-                            }
-                            setValue={[Function]}
-                            theme={
-                              Object {
-                                "borderRadius": 0,
-                                "colors": Object {
-                                  "danger": undefined,
-                                  "dangerLight": undefined,
-                                  "neutral0": undefined,
-                                  "neutral10": undefined,
-                                  "neutral20": undefined,
-                                  "neutral30": undefined,
-                                  "neutral40": undefined,
-                                  "neutral5": undefined,
-                                  "neutral50": "hsl(0, 0%, 50%)",
-                                  "neutral60": undefined,
-                                  "neutral70": "hsl(0, 0%, 30%)",
-                                  "neutral80": undefined,
-                                  "neutral90": "hsl(0, 0%, 10%)",
-                                  "primary": undefined,
-                                  "primary25": undefined,
-                                  "primary50": undefined,
-                                  "primary75": "#4C9AFF",
-                                },
-                                "spacing": Object {
-                                  "baseUnit": 2,
-                                  "controlHeight": 30,
-                                  "menuGutter": 8,
-                                },
-                              }
-                            }
-                          >
-                            <EmotionCssPropInternal
-                              __EMOTION_LABEL_PLEASE_DO_NOT_USE__="MenuList"
-                              __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                              className=""
-                              css={
-                                Object {
-                                  "WebkitOverflowScrolling": "touch",
-                                  "boxSizing": "border-box",
-                                  "maxHeight": 300,
-                                  "overflowY": "auto",
-                                  "paddingBottom": 2,
-                                  "paddingTop": 2,
-                                  "position": "relative",
-                                }
-                              }
-                            >
-                              <div
-                                className=" css-87spde-MenuList"
-                              >
-                                <Option
-                                  clearValue={[Function]}
-                                  cx={[Function]}
-                                  data={
-                                    Object {
-                                      "label": "Two",
-                                      "value": "two",
-                                    }
-                                  }
-                                  getStyles={[Function]}
-                                  getValue={[Function]}
-                                  hasValue={false}
-                                  innerProps={
-                                    Object {
-                                      "id": "react-select-4-option-1",
-                                      "onClick": [Function],
-                                      "onMouseMove": [Function],
-                                      "onMouseOver": [Function],
-                                      "tabIndex": -1,
-                                    }
-                                  }
-                                  innerRef={[Function]}
-                                  isDisabled={false}
-                                  isFocused={true}
-                                  isMulti={false}
-                                  isRtl={false}
-                                  isSelected={false}
-                                  key="react-select-4-option-1"
-                                  label="Two"
-                                  options={
-                                    Array [
-                                      Object {
-                                        "label": "One",
-                                        "value": "one",
-                                      },
-                                      Object {
-                                        "label": "Two",
-                                        "value": "two",
-                                      },
-                                      Object {
-                                        "label": "One hundred",
-                                        "value": "hundred",
-                                      },
-                                    ]
-                                  }
-                                  selectOption={[Function]}
-                                  selectProps={
-                                    Object {
-                                      "aria-live": "polite",
-                                      "backspaceRemovesValue": true,
-                                      "blurInputOnSelect": true,
-                                      "captureMenuScroll": false,
-                                      "closeMenuOnScroll": false,
-                                      "closeMenuOnSelect": true,
-                                      "components": Object {},
-                                      "controlShouldRenderValue": true,
-                                      "escapeClearsValue": false,
-                                      "filterOption": [Function],
-                                      "formatGroupLabel": [Function],
-                                      "getOptionLabel": [Function],
-                                      "getOptionValue": [Function],
-                                      "inputValue": "two",
-                                      "isDisabled": false,
-                                      "isLoading": false,
-                                      "isMulti": false,
-                                      "isOptionDisabled": [Function],
-                                      "isRtl": false,
-                                      "isSearchable": true,
-                                      "loadingMessage": [Function],
-                                      "maxMenuHeight": 300,
-                                      "menuIsOpen": true,
-                                      "menuPlacement": "bottom",
-                                      "menuPosition": "absolute",
-                                      "menuShouldBlockScroll": false,
-                                      "menuShouldScrollIntoView": true,
-                                      "minMenuHeight": 140,
-                                      "noOptionsMessage": [Function],
-                                      "onChange": [Function],
-                                      "onInputChange": [Function],
-                                      "onMenuClose": [Function],
-                                      "onMenuOpen": [Function],
-                                      "openMenuOnClick": true,
-                                      "openMenuOnFocus": false,
-                                      "options": Array [
-                                        Object {
-                                          "label": "One",
-                                          "value": "one",
-                                        },
-                                        Object {
-                                          "label": "Two",
-                                          "value": "two",
-                                        },
-                                        Object {
-                                          "label": "One hundred",
-                                          "value": "hundred",
-                                        },
-                                      ],
-                                      "pageSize": 5,
-                                      "placeholder": "Select...",
-                                      "screenReaderStatus": [Function],
-                                      "styles": Object {
-                                        "container": [Function],
-                                        "control": [Function],
-                                        "menu": [Function],
-                                      },
-                                      "tabIndex": 0,
-                                      "tabSelectsValue": true,
-                                      "theme": [Function],
-                                      "value": null,
-                                    }
-                                  }
-                                  setValue={[Function]}
-                                  theme={
-                                    Object {
-                                      "borderRadius": 0,
-                                      "colors": Object {
-                                        "danger": undefined,
-                                        "dangerLight": undefined,
-                                        "neutral0": undefined,
-                                        "neutral10": undefined,
-                                        "neutral20": undefined,
-                                        "neutral30": undefined,
-                                        "neutral40": undefined,
-                                        "neutral5": undefined,
-                                        "neutral50": "hsl(0, 0%, 50%)",
-                                        "neutral60": undefined,
-                                        "neutral70": "hsl(0, 0%, 30%)",
-                                        "neutral80": undefined,
-                                        "neutral90": "hsl(0, 0%, 10%)",
-                                        "primary": undefined,
-                                        "primary25": undefined,
-                                        "primary50": undefined,
-                                        "primary75": "#4C9AFF",
-                                      },
-                                      "spacing": Object {
-                                        "baseUnit": 2,
-                                        "controlHeight": 30,
-                                        "menuGutter": 8,
-                                      },
-                                    }
-                                  }
-                                  type="option"
-                                  value="two"
-                                >
-                                  <EmotionCssPropInternal
-                                    __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Option"
-                                    __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                                    aria-disabled={false}
-                                    className=""
-                                    css={
-                                      Object {
-                                        ":active": Object {
-                                          "backgroundColor": undefined,
-                                        },
-                                        "WebkitTapHighlightColor": "rgba(0, 0, 0, 0)",
-                                        "backgroundColor": undefined,
-                                        "boxSizing": "border-box",
-                                        "color": "inherit",
-                                        "cursor": "default",
-                                        "display": "block",
-                                        "fontSize": "inherit",
-                                        "label": "option",
-                                        "padding": "4px 6px",
-                                        "userSelect": "none",
-                                        "width": "100%",
-                                      }
-                                    }
-                                    id="react-select-4-option-1"
-                                    onClick={[Function]}
-                                    onMouseMove={[Function]}
-                                    onMouseOver={[Function]}
-                                    tabIndex={-1}
-                                  >
-                                    <div
-                                      aria-disabled={false}
-                                      className=" css-1npzjqc-option"
-                                      id="react-select-4-option-1"
-                                      onClick={[Function]}
-                                      onMouseMove={[Function]}
-                                      onMouseOver={[Function]}
-                                      tabIndex={-1}
-                                    >
-                                      Two
-                                    </div>
-                                  </EmotionCssPropInternal>
-                                </Option>
-                              </div>
-                            </EmotionCssPropInternal>
-                          </MenuList>
-                        </ScrollManager>
-                      </div>
-                    </EmotionCssPropInternal>
-                  </Menu>
-                </MenuPlacer>
-              </div>
-            </EmotionCssPropInternal>
-          </SelectContainer>
-        </Select>
-      </ForwardRef>
-    </Select>
-  </Component>
-</WithTheme(Component)>
+          <path
+            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div
+    class=" css-17wpf85-menu"
+    id="react-select-4-listbox"
+  >
+    <div
+      class=" css-87spde-MenuList"
+    >
+      <div
+        aria-disabled="false"
+        class=" css-1npzjqc-option"
+        id="react-select-4-option-1"
+        tabindex="-1"
+      >
+        Two
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`Select shouldn't find any results 1`] = `
-<WithTheme(Component)
-  onChange={[MockFunction]}
-  options={
-    Array [
-      Object {
-        "label": "One",
-        "value": "one",
-      },
-      Object {
-        "label": "Two",
-        "value": "two",
-      },
-      Object {
-        "label": "One hundred",
-        "value": "hundred",
-      },
-    ]
-  }
+<div
+  class=" css-18o3wl1-container"
 >
-  <Component
-    onChange={[MockFunction]}
-    options={
-      Array [
-        Object {
-          "label": "One",
-          "value": "one",
-        },
-        Object {
-          "label": "Two",
-          "value": "two",
-        },
-        Object {
-          "label": "One hundred",
-          "value": "hundred",
-        },
-      ]
-    }
+  <span
+    class="css-1f43avz-a11yText-A11yText"
+    id="react-select-5-live-region"
+  />
+  <span
+    aria-atomic="false"
+    aria-live="polite"
+    aria-relevant="additions text"
+    class="css-1f43avz-a11yText-A11yText"
   >
-    <Select
-      onChange={[MockFunction]}
-      options={
-        Array [
-          Object {
-            "label": "One",
-            "value": "one",
-          },
-          Object {
-            "label": "Two",
-            "value": "two",
-          },
-          Object {
-            "label": "One hundred",
-            "value": "hundred",
-          },
-        ]
-      }
-      theme={
-        Object {
-          "codeFontFamily": "'Source Code Pro', monospace",
-          "fontFamily": "'Source Sans Pro', sans-serif",
-          "inputBorderColor": undefined,
-          "inputBorderRadius": 4,
-          "inputBorderWidth": 1,
-          "inputFocusedStyle": "border-color: undefined",
-          "inputHeight": 30,
-          "inputInternalHeight": 28,
-          "inputPadding": 10,
-          "selectArrowWidth": 4,
-          "spinnerSize": 13,
-        }
-      }
+    <span
+      id="aria-selection"
+    />
+    <span
+      id="aria-context"
     >
-      <ForwardRef
-        onChange={[MockFunction]}
-        options={
-          Array [
-            Object {
-              "label": "One",
-              "value": "one",
-            },
-            Object {
-              "label": "Two",
-              "value": "two",
-            },
-            Object {
-              "label": "One hundred",
-              "value": "hundred",
-            },
-          ]
-        }
-        styles={
-          Object {
-            "container": [Function],
-            "control": [Function],
-            "menu": [Function],
-          }
-        }
-        theme={[Function]}
+       0 results available for search term text. Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.
+    </span>
+  </span>
+  <div
+    class=" css-1gv8qk2-control"
+  >
+    <div
+      class=" css-1dzc0nd-ValueContainer"
+    >
+      <div
+        class=" css-1qx78vi-Input"
+        data-value="text"
       >
-        <Select
-          aria-live="polite"
-          backspaceRemovesValue={true}
-          blurInputOnSelect={true}
-          captureMenuScroll={false}
-          closeMenuOnScroll={false}
-          closeMenuOnSelect={true}
-          components={Object {}}
-          controlShouldRenderValue={true}
-          escapeClearsValue={false}
-          filterOption={[Function]}
-          formatGroupLabel={[Function]}
-          getOptionLabel={[Function]}
-          getOptionValue={[Function]}
-          inputValue="text"
-          isDisabled={false}
-          isLoading={false}
-          isMulti={false}
-          isOptionDisabled={[Function]}
-          isRtl={false}
-          isSearchable={true}
-          loadingMessage={[Function]}
-          maxMenuHeight={300}
-          menuIsOpen={true}
-          menuPlacement="bottom"
-          menuPosition="absolute"
-          menuShouldBlockScroll={false}
-          menuShouldScrollIntoView={true}
-          minMenuHeight={140}
-          noOptionsMessage={[Function]}
-          onChange={[Function]}
-          onInputChange={[Function]}
-          onMenuClose={[Function]}
-          onMenuOpen={[Function]}
-          openMenuOnClick={true}
-          openMenuOnFocus={false}
-          options={
-            Array [
-              Object {
-                "label": "One",
-                "value": "one",
-              },
-              Object {
-                "label": "Two",
-                "value": "two",
-              },
-              Object {
-                "label": "One hundred",
-                "value": "hundred",
-              },
-            ]
-          }
-          pageSize={5}
-          placeholder="Select..."
-          screenReaderStatus={[Function]}
-          styles={
-            Object {
-              "container": [Function],
-              "control": [Function],
-              "menu": [Function],
-            }
-          }
-          tabIndex={0}
-          tabSelectsValue={true}
-          theme={[Function]}
-          value={null}
+        <input
+          aria-autocomplete="list"
+          aria-controls="react-select-5-listbox"
+          aria-describedby="react-select-5-placeholder"
+          aria-expanded="true"
+          aria-haspopup="true"
+          aria-owns="react-select-5-listbox"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          class=""
+          id="react-select-5-input"
+          role="combobox"
+          spellcheck="false"
+          style="opacity: 1; width: 100%; grid-area: 1 / 2; min-width: 2px; border: 0px; margin: 0px; outline: 0; padding: 0px;"
+          tabindex="0"
+          type="text"
+          value="text"
+        />
+      </div>
+    </div>
+    <div
+      class=" css-1hb7zxy-IndicatorsContainer"
+    >
+      <span
+        class=" css-1urf5ax-indicatorSeparator"
+      />
+      <div
+        aria-hidden="true"
+        class=" css-aazq4s-indicatorContainer"
+      >
+        <svg
+          aria-hidden="true"
+          class="css-tj5bde-Svg"
+          focusable="false"
+          height="20"
+          viewBox="0 0 20 20"
+          width="20"
         >
-          <SelectContainer
-            clearValue={[Function]}
-            cx={[Function]}
-            getStyles={[Function]}
-            getValue={[Function]}
-            hasValue={false}
-            innerProps={
-              Object {
-                "id": undefined,
-                "onKeyDown": [Function],
-              }
-            }
-            isDisabled={false}
-            isFocused={false}
-            isMulti={false}
-            isRtl={false}
-            options={
-              Array [
-                Object {
-                  "label": "One",
-                  "value": "one",
-                },
-                Object {
-                  "label": "Two",
-                  "value": "two",
-                },
-                Object {
-                  "label": "One hundred",
-                  "value": "hundred",
-                },
-              ]
-            }
-            selectOption={[Function]}
-            selectProps={
-              Object {
-                "aria-live": "polite",
-                "backspaceRemovesValue": true,
-                "blurInputOnSelect": true,
-                "captureMenuScroll": false,
-                "closeMenuOnScroll": false,
-                "closeMenuOnSelect": true,
-                "components": Object {},
-                "controlShouldRenderValue": true,
-                "escapeClearsValue": false,
-                "filterOption": [Function],
-                "formatGroupLabel": [Function],
-                "getOptionLabel": [Function],
-                "getOptionValue": [Function],
-                "inputValue": "text",
-                "isDisabled": false,
-                "isLoading": false,
-                "isMulti": false,
-                "isOptionDisabled": [Function],
-                "isRtl": false,
-                "isSearchable": true,
-                "loadingMessage": [Function],
-                "maxMenuHeight": 300,
-                "menuIsOpen": true,
-                "menuPlacement": "bottom",
-                "menuPosition": "absolute",
-                "menuShouldBlockScroll": false,
-                "menuShouldScrollIntoView": true,
-                "minMenuHeight": 140,
-                "noOptionsMessage": [Function],
-                "onChange": [Function],
-                "onInputChange": [Function],
-                "onMenuClose": [Function],
-                "onMenuOpen": [Function],
-                "openMenuOnClick": true,
-                "openMenuOnFocus": false,
-                "options": Array [
-                  Object {
-                    "label": "One",
-                    "value": "one",
-                  },
-                  Object {
-                    "label": "Two",
-                    "value": "two",
-                  },
-                  Object {
-                    "label": "One hundred",
-                    "value": "hundred",
-                  },
-                ],
-                "pageSize": 5,
-                "placeholder": "Select...",
-                "screenReaderStatus": [Function],
-                "styles": Object {
-                  "container": [Function],
-                  "control": [Function],
-                  "menu": [Function],
-                },
-                "tabIndex": 0,
-                "tabSelectsValue": true,
-                "theme": [Function],
-                "value": null,
-              }
-            }
-            setValue={[Function]}
-            theme={
-              Object {
-                "borderRadius": 0,
-                "colors": Object {
-                  "danger": undefined,
-                  "dangerLight": undefined,
-                  "neutral0": undefined,
-                  "neutral10": undefined,
-                  "neutral20": undefined,
-                  "neutral30": undefined,
-                  "neutral40": undefined,
-                  "neutral5": undefined,
-                  "neutral50": "hsl(0, 0%, 50%)",
-                  "neutral60": undefined,
-                  "neutral70": "hsl(0, 0%, 30%)",
-                  "neutral80": undefined,
-                  "neutral90": "hsl(0, 0%, 10%)",
-                  "primary": undefined,
-                  "primary25": undefined,
-                  "primary50": undefined,
-                  "primary75": "#4C9AFF",
-                },
-                "spacing": Object {
-                  "baseUnit": 2,
-                  "controlHeight": 30,
-                  "menuGutter": 8,
-                },
-              }
-            }
-          >
-            <EmotionCssPropInternal
-              __EMOTION_LABEL_PLEASE_DO_NOT_USE__="SelectContainer"
-              __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-              className=""
-              css={
-                Object {
-                  "boxSizing": "border-box",
-                  "direction": undefined,
-                  "flexGrow": 1,
-                  "label": "container",
-                  "pointerEvents": undefined,
-                  "position": "relative",
-                }
-              }
-              onKeyDown={[Function]}
-            >
-              <div
-                className=" css-18o3wl1-container"
-                onKeyDown={[Function]}
-              >
-                <LiveRegion
-                  ariaSelection={null}
-                  clearValue={[Function]}
-                  cx={[Function]}
-                  focusableOptions={Array []}
-                  focusedValue={null}
-                  getStyles={[Function]}
-                  getValue={[Function]}
-                  hasValue={false}
-                  id="react-select-5-live-region"
-                  isFocused={false}
-                  isMulti={false}
-                  isRtl={false}
-                  options={
-                    Array [
-                      Object {
-                        "label": "One",
-                        "value": "one",
-                      },
-                      Object {
-                        "label": "Two",
-                        "value": "two",
-                      },
-                      Object {
-                        "label": "One hundred",
-                        "value": "hundred",
-                      },
-                    ]
-                  }
-                  selectOption={[Function]}
-                  selectProps={
-                    Object {
-                      "aria-live": "polite",
-                      "backspaceRemovesValue": true,
-                      "blurInputOnSelect": true,
-                      "captureMenuScroll": false,
-                      "closeMenuOnScroll": false,
-                      "closeMenuOnSelect": true,
-                      "components": Object {},
-                      "controlShouldRenderValue": true,
-                      "escapeClearsValue": false,
-                      "filterOption": [Function],
-                      "formatGroupLabel": [Function],
-                      "getOptionLabel": [Function],
-                      "getOptionValue": [Function],
-                      "inputValue": "text",
-                      "isDisabled": false,
-                      "isLoading": false,
-                      "isMulti": false,
-                      "isOptionDisabled": [Function],
-                      "isRtl": false,
-                      "isSearchable": true,
-                      "loadingMessage": [Function],
-                      "maxMenuHeight": 300,
-                      "menuIsOpen": true,
-                      "menuPlacement": "bottom",
-                      "menuPosition": "absolute",
-                      "menuShouldBlockScroll": false,
-                      "menuShouldScrollIntoView": true,
-                      "minMenuHeight": 140,
-                      "noOptionsMessage": [Function],
-                      "onChange": [Function],
-                      "onInputChange": [Function],
-                      "onMenuClose": [Function],
-                      "onMenuOpen": [Function],
-                      "openMenuOnClick": true,
-                      "openMenuOnFocus": false,
-                      "options": Array [
-                        Object {
-                          "label": "One",
-                          "value": "one",
-                        },
-                        Object {
-                          "label": "Two",
-                          "value": "two",
-                        },
-                        Object {
-                          "label": "One hundred",
-                          "value": "hundred",
-                        },
-                      ],
-                      "pageSize": 5,
-                      "placeholder": "Select...",
-                      "screenReaderStatus": [Function],
-                      "styles": Object {
-                        "container": [Function],
-                        "control": [Function],
-                        "menu": [Function],
-                      },
-                      "tabIndex": 0,
-                      "tabSelectsValue": true,
-                      "theme": [Function],
-                      "value": null,
-                    }
-                  }
-                  selectValue={Array []}
-                  setValue={[Function]}
-                  theme={
-                    Object {
-                      "borderRadius": 0,
-                      "colors": Object {
-                        "danger": undefined,
-                        "dangerLight": undefined,
-                        "neutral0": undefined,
-                        "neutral10": undefined,
-                        "neutral20": undefined,
-                        "neutral30": undefined,
-                        "neutral40": undefined,
-                        "neutral5": undefined,
-                        "neutral50": "hsl(0, 0%, 50%)",
-                        "neutral60": undefined,
-                        "neutral70": "hsl(0, 0%, 30%)",
-                        "neutral80": undefined,
-                        "neutral90": "hsl(0, 0%, 10%)",
-                        "primary": undefined,
-                        "primary25": undefined,
-                        "primary50": undefined,
-                        "primary75": "#4C9AFF",
-                      },
-                      "spacing": Object {
-                        "baseUnit": 2,
-                        "controlHeight": 30,
-                        "menuGutter": 8,
-                      },
-                    }
-                  }
-                >
-                  <A11yText
-                    id="react-select-5-live-region"
-                  >
-                    <EmotionCssPropInternal
-                      __EMOTION_LABEL_PLEASE_DO_NOT_USE__="A11yText"
-                      __EMOTION_TYPE_PLEASE_DO_NOT_USE__="span"
-                      css={
-                        Object {
-                          "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkExMXlUZXh0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNSSIsImZpbGUiOiJBMTF5VGV4dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLy8gQXNzaXN0aXZlIHRleHQgdG8gZGVzY3JpYmUgdmlzdWFsIGVsZW1lbnRzLiBIaWRkZW4gZm9yIHNpZ2h0ZWQgdXNlcnMuXG5jb25zdCBBMTF5VGV4dCA9IChwcm9wczogSlNYLkludHJpbnNpY0VsZW1lbnRzWydzcGFuJ10pID0+IChcbiAgPHNwYW5cbiAgICBjc3M9e3tcbiAgICAgIGxhYmVsOiAnYTExeVRleHQnLFxuICAgICAgekluZGV4OiA5OTk5LFxuICAgICAgYm9yZGVyOiAwLFxuICAgICAgY2xpcDogJ3JlY3QoMXB4LCAxcHgsIDFweCwgMXB4KScsXG4gICAgICBoZWlnaHQ6IDEsXG4gICAgICB3aWR0aDogMSxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgcGFkZGluZzogMCxcbiAgICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgQTExeVRleHQ7XG4iXX0= */",
-                          "name": "1f43avz-a11yText-A11yText",
-                          "styles": "label:a11yText;z-index:9999;border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;position:absolute;overflow:hidden;padding:0;white-space:nowrap;label:A11yText;",
-                          "toString": [Function],
-                        }
-                      }
-                      id="react-select-5-live-region"
-                    >
-                      <span
-                        className="css-1f43avz-a11yText-A11yText"
-                        id="react-select-5-live-region"
-                      />
-                    </EmotionCssPropInternal>
-                  </A11yText>
-                  <A11yText
-                    aria-atomic="false"
-                    aria-live="polite"
-                    aria-relevant="additions text"
-                  >
-                    <EmotionCssPropInternal
-                      __EMOTION_LABEL_PLEASE_DO_NOT_USE__="A11yText"
-                      __EMOTION_TYPE_PLEASE_DO_NOT_USE__="span"
-                      aria-atomic="false"
-                      aria-live="polite"
-                      aria-relevant="additions text"
-                      css={
-                        Object {
-                          "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkExMXlUZXh0LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFNSSIsImZpbGUiOiJBMTF5VGV4dC50c3giLCJzb3VyY2VzQ29udGVudCI6WyIvKiogQGpzeCBqc3ggKi9cbmltcG9ydCB7IGpzeCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLy8gQXNzaXN0aXZlIHRleHQgdG8gZGVzY3JpYmUgdmlzdWFsIGVsZW1lbnRzLiBIaWRkZW4gZm9yIHNpZ2h0ZWQgdXNlcnMuXG5jb25zdCBBMTF5VGV4dCA9IChwcm9wczogSlNYLkludHJpbnNpY0VsZW1lbnRzWydzcGFuJ10pID0+IChcbiAgPHNwYW5cbiAgICBjc3M9e3tcbiAgICAgIGxhYmVsOiAnYTExeVRleHQnLFxuICAgICAgekluZGV4OiA5OTk5LFxuICAgICAgYm9yZGVyOiAwLFxuICAgICAgY2xpcDogJ3JlY3QoMXB4LCAxcHgsIDFweCwgMXB4KScsXG4gICAgICBoZWlnaHQ6IDEsXG4gICAgICB3aWR0aDogMSxcbiAgICAgIHBvc2l0aW9uOiAnYWJzb2x1dGUnLFxuICAgICAgb3ZlcmZsb3c6ICdoaWRkZW4nLFxuICAgICAgcGFkZGluZzogMCxcbiAgICAgIHdoaXRlU3BhY2U6ICdub3dyYXAnLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IGRlZmF1bHQgQTExeVRleHQ7XG4iXX0= */",
-                          "name": "1f43avz-a11yText-A11yText",
-                          "styles": "label:a11yText;z-index:9999;border:0;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;position:absolute;overflow:hidden;padding:0;white-space:nowrap;label:A11yText;",
-                          "toString": [Function],
-                        }
-                      }
-                    >
-                      <span
-                        aria-atomic="false"
-                        aria-live="polite"
-                        aria-relevant="additions text"
-                        className="css-1f43avz-a11yText-A11yText"
-                      />
-                    </EmotionCssPropInternal>
-                  </A11yText>
-                </LiveRegion>
-                <Control
-                  clearValue={[Function]}
-                  cx={[Function]}
-                  getStyles={[Function]}
-                  getValue={[Function]}
-                  hasValue={false}
-                  innerProps={
-                    Object {
-                      "onMouseDown": [Function],
-                      "onTouchEnd": [Function],
-                    }
-                  }
-                  innerRef={[Function]}
-                  isDisabled={false}
-                  isFocused={false}
-                  isMulti={false}
-                  isRtl={false}
-                  menuIsOpen={true}
-                  options={
-                    Array [
-                      Object {
-                        "label": "One",
-                        "value": "one",
-                      },
-                      Object {
-                        "label": "Two",
-                        "value": "two",
-                      },
-                      Object {
-                        "label": "One hundred",
-                        "value": "hundred",
-                      },
-                    ]
-                  }
-                  selectOption={[Function]}
-                  selectProps={
-                    Object {
-                      "aria-live": "polite",
-                      "backspaceRemovesValue": true,
-                      "blurInputOnSelect": true,
-                      "captureMenuScroll": false,
-                      "closeMenuOnScroll": false,
-                      "closeMenuOnSelect": true,
-                      "components": Object {},
-                      "controlShouldRenderValue": true,
-                      "escapeClearsValue": false,
-                      "filterOption": [Function],
-                      "formatGroupLabel": [Function],
-                      "getOptionLabel": [Function],
-                      "getOptionValue": [Function],
-                      "inputValue": "text",
-                      "isDisabled": false,
-                      "isLoading": false,
-                      "isMulti": false,
-                      "isOptionDisabled": [Function],
-                      "isRtl": false,
-                      "isSearchable": true,
-                      "loadingMessage": [Function],
-                      "maxMenuHeight": 300,
-                      "menuIsOpen": true,
-                      "menuPlacement": "bottom",
-                      "menuPosition": "absolute",
-                      "menuShouldBlockScroll": false,
-                      "menuShouldScrollIntoView": true,
-                      "minMenuHeight": 140,
-                      "noOptionsMessage": [Function],
-                      "onChange": [Function],
-                      "onInputChange": [Function],
-                      "onMenuClose": [Function],
-                      "onMenuOpen": [Function],
-                      "openMenuOnClick": true,
-                      "openMenuOnFocus": false,
-                      "options": Array [
-                        Object {
-                          "label": "One",
-                          "value": "one",
-                        },
-                        Object {
-                          "label": "Two",
-                          "value": "two",
-                        },
-                        Object {
-                          "label": "One hundred",
-                          "value": "hundred",
-                        },
-                      ],
-                      "pageSize": 5,
-                      "placeholder": "Select...",
-                      "screenReaderStatus": [Function],
-                      "styles": Object {
-                        "container": [Function],
-                        "control": [Function],
-                        "menu": [Function],
-                      },
-                      "tabIndex": 0,
-                      "tabSelectsValue": true,
-                      "theme": [Function],
-                      "value": null,
-                    }
-                  }
-                  setValue={[Function]}
-                  theme={
-                    Object {
-                      "borderRadius": 0,
-                      "colors": Object {
-                        "danger": undefined,
-                        "dangerLight": undefined,
-                        "neutral0": undefined,
-                        "neutral10": undefined,
-                        "neutral20": undefined,
-                        "neutral30": undefined,
-                        "neutral40": undefined,
-                        "neutral5": undefined,
-                        "neutral50": "hsl(0, 0%, 50%)",
-                        "neutral60": undefined,
-                        "neutral70": "hsl(0, 0%, 30%)",
-                        "neutral80": undefined,
-                        "neutral90": "hsl(0, 0%, 10%)",
-                        "primary": undefined,
-                        "primary25": undefined,
-                        "primary50": undefined,
-                        "primary75": "#4C9AFF",
-                      },
-                      "spacing": Object {
-                        "baseUnit": 2,
-                        "controlHeight": 30,
-                        "menuGutter": 8,
-                      },
-                    }
-                  }
-                >
-                  <EmotionCssPropInternal
-                    __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Control"
-                    __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                    className=""
-                    css={
-                      Object {
-                        "&:hover": Object {
-                          "backgroundColor": undefined,
-                          "borderColor": undefined,
-                        },
-                        "alignItems": "center",
-                        "backgroundColor": undefined,
-                        "borderColor": undefined,
-                        "borderRadius": 0,
-                        "borderStyle": "solid",
-                        "borderWidth": 1,
-                        "boxShadow": undefined,
-                        "boxSizing": "border-box",
-                        "cursor": "default",
-                        "display": "flex",
-                        "flexWrap": "wrap",
-                        "justifyContent": "space-between",
-                        "label": "control",
-                        "minHeight": 30,
-                        "outline": "0 !important",
-                        "position": "relative",
-                        "transition": "all 100ms",
-                      }
-                    }
-                    onMouseDown={[Function]}
-                    onTouchEnd={[Function]}
-                  >
-                    <div
-                      className=" css-gdsksj-control"
-                      onMouseDown={[Function]}
-                      onTouchEnd={[Function]}
-                    >
-                      <ValueContainer
-                        clearValue={[Function]}
-                        cx={[Function]}
-                        getStyles={[Function]}
-                        getValue={[Function]}
-                        hasValue={false}
-                        isDisabled={false}
-                        isMulti={false}
-                        isRtl={false}
-                        options={
-                          Array [
-                            Object {
-                              "label": "One",
-                              "value": "one",
-                            },
-                            Object {
-                              "label": "Two",
-                              "value": "two",
-                            },
-                            Object {
-                              "label": "One hundred",
-                              "value": "hundred",
-                            },
-                          ]
-                        }
-                        selectOption={[Function]}
-                        selectProps={
-                          Object {
-                            "aria-live": "polite",
-                            "backspaceRemovesValue": true,
-                            "blurInputOnSelect": true,
-                            "captureMenuScroll": false,
-                            "closeMenuOnScroll": false,
-                            "closeMenuOnSelect": true,
-                            "components": Object {},
-                            "controlShouldRenderValue": true,
-                            "escapeClearsValue": false,
-                            "filterOption": [Function],
-                            "formatGroupLabel": [Function],
-                            "getOptionLabel": [Function],
-                            "getOptionValue": [Function],
-                            "inputValue": "text",
-                            "isDisabled": false,
-                            "isLoading": false,
-                            "isMulti": false,
-                            "isOptionDisabled": [Function],
-                            "isRtl": false,
-                            "isSearchable": true,
-                            "loadingMessage": [Function],
-                            "maxMenuHeight": 300,
-                            "menuIsOpen": true,
-                            "menuPlacement": "bottom",
-                            "menuPosition": "absolute",
-                            "menuShouldBlockScroll": false,
-                            "menuShouldScrollIntoView": true,
-                            "minMenuHeight": 140,
-                            "noOptionsMessage": [Function],
-                            "onChange": [Function],
-                            "onInputChange": [Function],
-                            "onMenuClose": [Function],
-                            "onMenuOpen": [Function],
-                            "openMenuOnClick": true,
-                            "openMenuOnFocus": false,
-                            "options": Array [
-                              Object {
-                                "label": "One",
-                                "value": "one",
-                              },
-                              Object {
-                                "label": "Two",
-                                "value": "two",
-                              },
-                              Object {
-                                "label": "One hundred",
-                                "value": "hundred",
-                              },
-                            ],
-                            "pageSize": 5,
-                            "placeholder": "Select...",
-                            "screenReaderStatus": [Function],
-                            "styles": Object {
-                              "container": [Function],
-                              "control": [Function],
-                              "menu": [Function],
-                            },
-                            "tabIndex": 0,
-                            "tabSelectsValue": true,
-                            "theme": [Function],
-                            "value": null,
-                          }
-                        }
-                        setValue={[Function]}
-                        theme={
-                          Object {
-                            "borderRadius": 0,
-                            "colors": Object {
-                              "danger": undefined,
-                              "dangerLight": undefined,
-                              "neutral0": undefined,
-                              "neutral10": undefined,
-                              "neutral20": undefined,
-                              "neutral30": undefined,
-                              "neutral40": undefined,
-                              "neutral5": undefined,
-                              "neutral50": "hsl(0, 0%, 50%)",
-                              "neutral60": undefined,
-                              "neutral70": "hsl(0, 0%, 30%)",
-                              "neutral80": undefined,
-                              "neutral90": "hsl(0, 0%, 10%)",
-                              "primary": undefined,
-                              "primary25": undefined,
-                              "primary50": undefined,
-                              "primary75": "#4C9AFF",
-                            },
-                            "spacing": Object {
-                              "baseUnit": 2,
-                              "controlHeight": 30,
-                              "menuGutter": 8,
-                            },
-                          }
-                        }
-                      >
-                        <EmotionCssPropInternal
-                          __EMOTION_LABEL_PLEASE_DO_NOT_USE__="ValueContainer"
-                          __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                          className=""
-                          css={
-                            Object {
-                              "WebkitOverflowScrolling": "touch",
-                              "alignItems": "center",
-                              "boxSizing": "border-box",
-                              "display": "grid",
-                              "flex": 1,
-                              "flexWrap": "wrap",
-                              "overflow": "hidden",
-                              "padding": "1px 4px",
-                              "position": "relative",
-                            }
-                          }
-                        >
-                          <div
-                            className=" css-1dzc0nd-ValueContainer"
-                          >
-                            <Input
-                              aria-autocomplete="list"
-                              aria-controls="react-select-5-listbox"
-                              aria-describedby="react-select-5-placeholder"
-                              aria-expanded={true}
-                              aria-haspopup={true}
-                              aria-owns="react-select-5-listbox"
-                              autoCapitalize="none"
-                              autoComplete="off"
-                              autoCorrect="off"
-                              clearValue={[Function]}
-                              cx={[Function]}
-                              getStyles={[Function]}
-                              getValue={[Function]}
-                              hasValue={false}
-                              id="react-select-5-input"
-                              innerRef={[Function]}
-                              isDisabled={false}
-                              isHidden={false}
-                              isMulti={false}
-                              isRtl={false}
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              options={
-                                Array [
-                                  Object {
-                                    "label": "One",
-                                    "value": "one",
-                                  },
-                                  Object {
-                                    "label": "Two",
-                                    "value": "two",
-                                  },
-                                  Object {
-                                    "label": "One hundred",
-                                    "value": "hundred",
-                                  },
-                                ]
-                              }
-                              role="combobox"
-                              selectOption={[Function]}
-                              selectProps={
-                                Object {
-                                  "aria-live": "polite",
-                                  "backspaceRemovesValue": true,
-                                  "blurInputOnSelect": true,
-                                  "captureMenuScroll": false,
-                                  "closeMenuOnScroll": false,
-                                  "closeMenuOnSelect": true,
-                                  "components": Object {},
-                                  "controlShouldRenderValue": true,
-                                  "escapeClearsValue": false,
-                                  "filterOption": [Function],
-                                  "formatGroupLabel": [Function],
-                                  "getOptionLabel": [Function],
-                                  "getOptionValue": [Function],
-                                  "inputValue": "text",
-                                  "isDisabled": false,
-                                  "isLoading": false,
-                                  "isMulti": false,
-                                  "isOptionDisabled": [Function],
-                                  "isRtl": false,
-                                  "isSearchable": true,
-                                  "loadingMessage": [Function],
-                                  "maxMenuHeight": 300,
-                                  "menuIsOpen": true,
-                                  "menuPlacement": "bottom",
-                                  "menuPosition": "absolute",
-                                  "menuShouldBlockScroll": false,
-                                  "menuShouldScrollIntoView": true,
-                                  "minMenuHeight": 140,
-                                  "noOptionsMessage": [Function],
-                                  "onChange": [Function],
-                                  "onInputChange": [Function],
-                                  "onMenuClose": [Function],
-                                  "onMenuOpen": [Function],
-                                  "openMenuOnClick": true,
-                                  "openMenuOnFocus": false,
-                                  "options": Array [
-                                    Object {
-                                      "label": "One",
-                                      "value": "one",
-                                    },
-                                    Object {
-                                      "label": "Two",
-                                      "value": "two",
-                                    },
-                                    Object {
-                                      "label": "One hundred",
-                                      "value": "hundred",
-                                    },
-                                  ],
-                                  "pageSize": 5,
-                                  "placeholder": "Select...",
-                                  "screenReaderStatus": [Function],
-                                  "styles": Object {
-                                    "container": [Function],
-                                    "control": [Function],
-                                    "menu": [Function],
-                                  },
-                                  "tabIndex": 0,
-                                  "tabSelectsValue": true,
-                                  "theme": [Function],
-                                  "value": null,
-                                }
-                              }
-                              setValue={[Function]}
-                              spellCheck="false"
-                              tabIndex={0}
-                              theme={
-                                Object {
-                                  "borderRadius": 0,
-                                  "colors": Object {
-                                    "danger": undefined,
-                                    "dangerLight": undefined,
-                                    "neutral0": undefined,
-                                    "neutral10": undefined,
-                                    "neutral20": undefined,
-                                    "neutral30": undefined,
-                                    "neutral40": undefined,
-                                    "neutral5": undefined,
-                                    "neutral50": "hsl(0, 0%, 50%)",
-                                    "neutral60": undefined,
-                                    "neutral70": "hsl(0, 0%, 30%)",
-                                    "neutral80": undefined,
-                                    "neutral90": "hsl(0, 0%, 10%)",
-                                    "primary": undefined,
-                                    "primary25": undefined,
-                                    "primary50": undefined,
-                                    "primary75": "#4C9AFF",
-                                  },
-                                  "spacing": Object {
-                                    "baseUnit": 2,
-                                    "controlHeight": 30,
-                                    "menuGutter": 8,
-                                  },
-                                }
-                              }
-                              type="text"
-                              value="text"
-                            >
-                              <EmotionCssPropInternal
-                                __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Input"
-                                __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                                className=""
-                                css={
-                                  Object {
-                                    "&:after": Object {
-                                      "border": 0,
-                                      "content": "attr(data-value) \\" \\"",
-                                      "font": "inherit",
-                                      "gridArea": "1 / 2",
-                                      "margin": 0,
-                                      "minWidth": "2px",
-                                      "outline": 0,
-                                      "padding": 0,
-                                      "visibility": "hidden",
-                                      "whiteSpace": "pre",
-                                    },
-                                    "boxSizing": "border-box",
-                                    "color": undefined,
-                                    "display": "inline-grid",
-                                    "flex": "1 1 auto",
-                                    "gridArea": "1 / 1 / 2 / 3",
-                                    "gridTemplateColumns": "0 min-content",
-                                    "margin": 1,
-                                    "paddingBottom": 1,
-                                    "paddingTop": 1,
-                                    "visibility": "visible",
-                                  }
-                                }
-                                data-value="text"
-                              >
-                                <div
-                                  className=" css-1qx78vi-Input"
-                                  data-value="text"
-                                >
-                                  <input
-                                    aria-autocomplete="list"
-                                    aria-controls="react-select-5-listbox"
-                                    aria-describedby="react-select-5-placeholder"
-                                    aria-expanded={true}
-                                    aria-haspopup={true}
-                                    aria-owns="react-select-5-listbox"
-                                    autoCapitalize="none"
-                                    autoComplete="off"
-                                    autoCorrect="off"
-                                    className=""
-                                    disabled={false}
-                                    id="react-select-5-input"
-                                    onBlur={[Function]}
-                                    onChange={[Function]}
-                                    onFocus={[Function]}
-                                    role="combobox"
-                                    spellCheck="false"
-                                    style={
-                                      Object {
-                                        "background": 0,
-                                        "border": 0,
-                                        "color": "inherit",
-                                        "font": "inherit",
-                                        "gridArea": "1 / 2",
-                                        "label": "input",
-                                        "margin": 0,
-                                        "minWidth": "2px",
-                                        "opacity": 1,
-                                        "outline": 0,
-                                        "padding": 0,
-                                        "width": "100%",
-                                      }
-                                    }
-                                    tabIndex={0}
-                                    type="text"
-                                    value="text"
-                                  />
-                                </div>
-                              </EmotionCssPropInternal>
-                            </Input>
-                          </div>
-                        </EmotionCssPropInternal>
-                      </ValueContainer>
-                      <IndicatorsContainer
-                        clearValue={[Function]}
-                        cx={[Function]}
-                        getStyles={[Function]}
-                        getValue={[Function]}
-                        hasValue={false}
-                        isDisabled={false}
-                        isMulti={false}
-                        isRtl={false}
-                        options={
-                          Array [
-                            Object {
-                              "label": "One",
-                              "value": "one",
-                            },
-                            Object {
-                              "label": "Two",
-                              "value": "two",
-                            },
-                            Object {
-                              "label": "One hundred",
-                              "value": "hundred",
-                            },
-                          ]
-                        }
-                        selectOption={[Function]}
-                        selectProps={
-                          Object {
-                            "aria-live": "polite",
-                            "backspaceRemovesValue": true,
-                            "blurInputOnSelect": true,
-                            "captureMenuScroll": false,
-                            "closeMenuOnScroll": false,
-                            "closeMenuOnSelect": true,
-                            "components": Object {},
-                            "controlShouldRenderValue": true,
-                            "escapeClearsValue": false,
-                            "filterOption": [Function],
-                            "formatGroupLabel": [Function],
-                            "getOptionLabel": [Function],
-                            "getOptionValue": [Function],
-                            "inputValue": "text",
-                            "isDisabled": false,
-                            "isLoading": false,
-                            "isMulti": false,
-                            "isOptionDisabled": [Function],
-                            "isRtl": false,
-                            "isSearchable": true,
-                            "loadingMessage": [Function],
-                            "maxMenuHeight": 300,
-                            "menuIsOpen": true,
-                            "menuPlacement": "bottom",
-                            "menuPosition": "absolute",
-                            "menuShouldBlockScroll": false,
-                            "menuShouldScrollIntoView": true,
-                            "minMenuHeight": 140,
-                            "noOptionsMessage": [Function],
-                            "onChange": [Function],
-                            "onInputChange": [Function],
-                            "onMenuClose": [Function],
-                            "onMenuOpen": [Function],
-                            "openMenuOnClick": true,
-                            "openMenuOnFocus": false,
-                            "options": Array [
-                              Object {
-                                "label": "One",
-                                "value": "one",
-                              },
-                              Object {
-                                "label": "Two",
-                                "value": "two",
-                              },
-                              Object {
-                                "label": "One hundred",
-                                "value": "hundred",
-                              },
-                            ],
-                            "pageSize": 5,
-                            "placeholder": "Select...",
-                            "screenReaderStatus": [Function],
-                            "styles": Object {
-                              "container": [Function],
-                              "control": [Function],
-                              "menu": [Function],
-                            },
-                            "tabIndex": 0,
-                            "tabSelectsValue": true,
-                            "theme": [Function],
-                            "value": null,
-                          }
-                        }
-                        setValue={[Function]}
-                        theme={
-                          Object {
-                            "borderRadius": 0,
-                            "colors": Object {
-                              "danger": undefined,
-                              "dangerLight": undefined,
-                              "neutral0": undefined,
-                              "neutral10": undefined,
-                              "neutral20": undefined,
-                              "neutral30": undefined,
-                              "neutral40": undefined,
-                              "neutral5": undefined,
-                              "neutral50": "hsl(0, 0%, 50%)",
-                              "neutral60": undefined,
-                              "neutral70": "hsl(0, 0%, 30%)",
-                              "neutral80": undefined,
-                              "neutral90": "hsl(0, 0%, 10%)",
-                              "primary": undefined,
-                              "primary25": undefined,
-                              "primary50": undefined,
-                              "primary75": "#4C9AFF",
-                            },
-                            "spacing": Object {
-                              "baseUnit": 2,
-                              "controlHeight": 30,
-                              "menuGutter": 8,
-                            },
-                          }
-                        }
-                      >
-                        <EmotionCssPropInternal
-                          __EMOTION_LABEL_PLEASE_DO_NOT_USE__="IndicatorsContainer"
-                          __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                          className=""
-                          css={
-                            Object {
-                              "alignItems": "center",
-                              "alignSelf": "stretch",
-                              "boxSizing": "border-box",
-                              "display": "flex",
-                              "flexShrink": 0,
-                            }
-                          }
-                        >
-                          <div
-                            className=" css-1hb7zxy-IndicatorsContainer"
-                          >
-                            <IndicatorSeparator
-                              clearValue={[Function]}
-                              cx={[Function]}
-                              getStyles={[Function]}
-                              getValue={[Function]}
-                              hasValue={false}
-                              isDisabled={false}
-                              isFocused={false}
-                              isMulti={false}
-                              isRtl={false}
-                              options={
-                                Array [
-                                  Object {
-                                    "label": "One",
-                                    "value": "one",
-                                  },
-                                  Object {
-                                    "label": "Two",
-                                    "value": "two",
-                                  },
-                                  Object {
-                                    "label": "One hundred",
-                                    "value": "hundred",
-                                  },
-                                ]
-                              }
-                              selectOption={[Function]}
-                              selectProps={
-                                Object {
-                                  "aria-live": "polite",
-                                  "backspaceRemovesValue": true,
-                                  "blurInputOnSelect": true,
-                                  "captureMenuScroll": false,
-                                  "closeMenuOnScroll": false,
-                                  "closeMenuOnSelect": true,
-                                  "components": Object {},
-                                  "controlShouldRenderValue": true,
-                                  "escapeClearsValue": false,
-                                  "filterOption": [Function],
-                                  "formatGroupLabel": [Function],
-                                  "getOptionLabel": [Function],
-                                  "getOptionValue": [Function],
-                                  "inputValue": "text",
-                                  "isDisabled": false,
-                                  "isLoading": false,
-                                  "isMulti": false,
-                                  "isOptionDisabled": [Function],
-                                  "isRtl": false,
-                                  "isSearchable": true,
-                                  "loadingMessage": [Function],
-                                  "maxMenuHeight": 300,
-                                  "menuIsOpen": true,
-                                  "menuPlacement": "bottom",
-                                  "menuPosition": "absolute",
-                                  "menuShouldBlockScroll": false,
-                                  "menuShouldScrollIntoView": true,
-                                  "minMenuHeight": 140,
-                                  "noOptionsMessage": [Function],
-                                  "onChange": [Function],
-                                  "onInputChange": [Function],
-                                  "onMenuClose": [Function],
-                                  "onMenuOpen": [Function],
-                                  "openMenuOnClick": true,
-                                  "openMenuOnFocus": false,
-                                  "options": Array [
-                                    Object {
-                                      "label": "One",
-                                      "value": "one",
-                                    },
-                                    Object {
-                                      "label": "Two",
-                                      "value": "two",
-                                    },
-                                    Object {
-                                      "label": "One hundred",
-                                      "value": "hundred",
-                                    },
-                                  ],
-                                  "pageSize": 5,
-                                  "placeholder": "Select...",
-                                  "screenReaderStatus": [Function],
-                                  "styles": Object {
-                                    "container": [Function],
-                                    "control": [Function],
-                                    "menu": [Function],
-                                  },
-                                  "tabIndex": 0,
-                                  "tabSelectsValue": true,
-                                  "theme": [Function],
-                                  "value": null,
-                                }
-                              }
-                              setValue={[Function]}
-                              theme={
-                                Object {
-                                  "borderRadius": 0,
-                                  "colors": Object {
-                                    "danger": undefined,
-                                    "dangerLight": undefined,
-                                    "neutral0": undefined,
-                                    "neutral10": undefined,
-                                    "neutral20": undefined,
-                                    "neutral30": undefined,
-                                    "neutral40": undefined,
-                                    "neutral5": undefined,
-                                    "neutral50": "hsl(0, 0%, 50%)",
-                                    "neutral60": undefined,
-                                    "neutral70": "hsl(0, 0%, 30%)",
-                                    "neutral80": undefined,
-                                    "neutral90": "hsl(0, 0%, 10%)",
-                                    "primary": undefined,
-                                    "primary25": undefined,
-                                    "primary50": undefined,
-                                    "primary75": "#4C9AFF",
-                                  },
-                                  "spacing": Object {
-                                    "baseUnit": 2,
-                                    "controlHeight": 30,
-                                    "menuGutter": 8,
-                                  },
-                                }
-                              }
-                            >
-                              <EmotionCssPropInternal
-                                __EMOTION_LABEL_PLEASE_DO_NOT_USE__="IndicatorSeparator"
-                                __EMOTION_TYPE_PLEASE_DO_NOT_USE__="span"
-                                className=""
-                                css={
-                                  Object {
-                                    "alignSelf": "stretch",
-                                    "backgroundColor": undefined,
-                                    "boxSizing": "border-box",
-                                    "label": "indicatorSeparator",
-                                    "marginBottom": 4,
-                                    "marginTop": 4,
-                                    "width": 1,
-                                  }
-                                }
-                              >
-                                <span
-                                  className=" css-1urf5ax-indicatorSeparator"
-                                />
-                              </EmotionCssPropInternal>
-                            </IndicatorSeparator>
-                            <DropdownIndicator
-                              clearValue={[Function]}
-                              cx={[Function]}
-                              getStyles={[Function]}
-                              getValue={[Function]}
-                              hasValue={false}
-                              innerProps={
-                                Object {
-                                  "aria-hidden": "true",
-                                  "onMouseDown": [Function],
-                                  "onTouchEnd": [Function],
-                                }
-                              }
-                              isDisabled={false}
-                              isFocused={false}
-                              isMulti={false}
-                              isRtl={false}
-                              options={
-                                Array [
-                                  Object {
-                                    "label": "One",
-                                    "value": "one",
-                                  },
-                                  Object {
-                                    "label": "Two",
-                                    "value": "two",
-                                  },
-                                  Object {
-                                    "label": "One hundred",
-                                    "value": "hundred",
-                                  },
-                                ]
-                              }
-                              selectOption={[Function]}
-                              selectProps={
-                                Object {
-                                  "aria-live": "polite",
-                                  "backspaceRemovesValue": true,
-                                  "blurInputOnSelect": true,
-                                  "captureMenuScroll": false,
-                                  "closeMenuOnScroll": false,
-                                  "closeMenuOnSelect": true,
-                                  "components": Object {},
-                                  "controlShouldRenderValue": true,
-                                  "escapeClearsValue": false,
-                                  "filterOption": [Function],
-                                  "formatGroupLabel": [Function],
-                                  "getOptionLabel": [Function],
-                                  "getOptionValue": [Function],
-                                  "inputValue": "text",
-                                  "isDisabled": false,
-                                  "isLoading": false,
-                                  "isMulti": false,
-                                  "isOptionDisabled": [Function],
-                                  "isRtl": false,
-                                  "isSearchable": true,
-                                  "loadingMessage": [Function],
-                                  "maxMenuHeight": 300,
-                                  "menuIsOpen": true,
-                                  "menuPlacement": "bottom",
-                                  "menuPosition": "absolute",
-                                  "menuShouldBlockScroll": false,
-                                  "menuShouldScrollIntoView": true,
-                                  "minMenuHeight": 140,
-                                  "noOptionsMessage": [Function],
-                                  "onChange": [Function],
-                                  "onInputChange": [Function],
-                                  "onMenuClose": [Function],
-                                  "onMenuOpen": [Function],
-                                  "openMenuOnClick": true,
-                                  "openMenuOnFocus": false,
-                                  "options": Array [
-                                    Object {
-                                      "label": "One",
-                                      "value": "one",
-                                    },
-                                    Object {
-                                      "label": "Two",
-                                      "value": "two",
-                                    },
-                                    Object {
-                                      "label": "One hundred",
-                                      "value": "hundred",
-                                    },
-                                  ],
-                                  "pageSize": 5,
-                                  "placeholder": "Select...",
-                                  "screenReaderStatus": [Function],
-                                  "styles": Object {
-                                    "container": [Function],
-                                    "control": [Function],
-                                    "menu": [Function],
-                                  },
-                                  "tabIndex": 0,
-                                  "tabSelectsValue": true,
-                                  "theme": [Function],
-                                  "value": null,
-                                }
-                              }
-                              setValue={[Function]}
-                              theme={
-                                Object {
-                                  "borderRadius": 0,
-                                  "colors": Object {
-                                    "danger": undefined,
-                                    "dangerLight": undefined,
-                                    "neutral0": undefined,
-                                    "neutral10": undefined,
-                                    "neutral20": undefined,
-                                    "neutral30": undefined,
-                                    "neutral40": undefined,
-                                    "neutral5": undefined,
-                                    "neutral50": "hsl(0, 0%, 50%)",
-                                    "neutral60": undefined,
-                                    "neutral70": "hsl(0, 0%, 30%)",
-                                    "neutral80": undefined,
-                                    "neutral90": "hsl(0, 0%, 10%)",
-                                    "primary": undefined,
-                                    "primary25": undefined,
-                                    "primary50": undefined,
-                                    "primary75": "#4C9AFF",
-                                  },
-                                  "spacing": Object {
-                                    "baseUnit": 2,
-                                    "controlHeight": 30,
-                                    "menuGutter": 8,
-                                  },
-                                }
-                              }
-                            >
-                              <EmotionCssPropInternal
-                                __EMOTION_LABEL_PLEASE_DO_NOT_USE__="DropdownIndicator"
-                                __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                                aria-hidden="true"
-                                className=""
-                                css={
-                                  Object {
-                                    ":hover": Object {
-                                      "color": undefined,
-                                    },
-                                    "boxSizing": "border-box",
-                                    "color": undefined,
-                                    "display": "flex",
-                                    "label": "indicatorContainer",
-                                    "padding": 4,
-                                    "transition": "color 150ms",
-                                  }
-                                }
-                                onMouseDown={[Function]}
-                                onTouchEnd={[Function]}
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  className=" css-aazq4s-indicatorContainer"
-                                  onMouseDown={[Function]}
-                                  onTouchEnd={[Function]}
-                                >
-                                  <DownChevron>
-                                    <Svg
-                                      size={20}
-                                    >
-                                      <EmotionCssPropInternal
-                                        __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Svg"
-                                        __EMOTION_TYPE_PLEASE_DO_NOT_USE__="svg"
-                                        aria-hidden="true"
-                                        css={
-                                          Object {
-                                            "map": "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGljYXRvcnMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXdCSSIsImZpbGUiOiJpbmRpY2F0b3JzLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKiBAanN4IGpzeCAqL1xuaW1wb3J0IHsgUmVhY3ROb2RlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsganN4LCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7XG4gIENvbW1vblByb3BzQW5kQ2xhc3NOYW1lLFxuICBDU1NPYmplY3RXaXRoTGFiZWwsXG4gIEdyb3VwQmFzZSxcbn0gZnJvbSAnLi4vdHlwZXMnO1xuXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbi8vIERyb3Bkb3duICYgQ2xlYXIgSWNvbnNcbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG5jb25zdCBTdmcgPSAoe1xuICBzaXplLFxuICAuLi5wcm9wc1xufTogSlNYLkludHJpbnNpY0VsZW1lbnRzWydzdmcnXSAmIHsgc2l6ZTogbnVtYmVyIH0pID0+IChcbiAgPHN2Z1xuICAgIGhlaWdodD17c2l6ZX1cbiAgICB3aWR0aD17c2l6ZX1cbiAgICB2aWV3Qm94PVwiMCAwIDIwIDIwXCJcbiAgICBhcmlhLWhpZGRlbj1cInRydWVcIlxuICAgIGZvY3VzYWJsZT1cImZhbHNlXCJcbiAgICBjc3M9e3tcbiAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgZmlsbDogJ2N1cnJlbnRDb2xvcicsXG4gICAgICBsaW5lSGVpZ2h0OiAxLFxuICAgICAgc3Ryb2tlOiAnY3VycmVudENvbG9yJyxcbiAgICAgIHN0cm9rZVdpZHRoOiAwLFxuICAgIH19XG4gICAgey4uLnByb3BzfVxuICAvPlxuKTtcblxuZXhwb3J0IHR5cGUgQ3Jvc3NJY29uUHJvcHMgPSBKU1guSW50cmluc2ljRWxlbWVudHNbJ3N2ZyddICYgeyBzaXplPzogbnVtYmVyIH07XG5leHBvcnQgY29uc3QgQ3Jvc3NJY29uID0gKHByb3BzOiBDcm9zc0ljb25Qcm9wcykgPT4gKFxuICA8U3ZnIHNpemU9ezIwfSB7Li4ucHJvcHN9PlxuICAgIDxwYXRoIGQ9XCJNMTQuMzQ4IDE0Ljg0OWMtMC40NjkgMC40NjktMS4yMjkgMC40NjktMS42OTcgMGwtMi42NTEtMy4wMzAtMi42NTEgMy4wMjljLTAuNDY5IDAuNDY5LTEuMjI5IDAuNDY5LTEuNjk3IDAtMC40NjktMC40NjktMC40NjktMS4yMjkgMC0xLjY5N2wyLjc1OC0zLjE1LTIuNzU5LTMuMTUyYy0wLjQ2OS0wLjQ2OS0wLjQ2OS0xLjIyOCAwLTEuNjk3czEuMjI4LTAuNDY5IDEuNjk3IDBsMi42NTIgMy4wMzEgMi42NTEtMy4wMzFjMC40NjktMC40NjkgMS4yMjgtMC40NjkgMS42OTcgMHMwLjQ2OSAxLjIyOSAwIDEuNjk3bC0yLjc1OCAzLjE1MiAyLjc1OCAzLjE1YzAuNDY5IDAuNDY5IDAuNDY5IDEuMjI5IDAgMS42OTh6XCIgLz5cbiAgPC9Tdmc+XG4pO1xuZXhwb3J0IHR5cGUgRG93bkNoZXZyb25Qcm9wcyA9IEpTWC5JbnRyaW5zaWNFbGVtZW50c1snc3ZnJ10gJiB7IHNpemU/OiBudW1iZXIgfTtcbmV4cG9ydCBjb25zdCBEb3duQ2hldnJvbiA9IChwcm9wczogRG93bkNoZXZyb25Qcm9wcykgPT4gKFxuICA8U3ZnIHNpemU9ezIwfSB7Li4ucHJvcHN9PlxuICAgIDxwYXRoIGQ9XCJNNC41MTYgNy41NDhjMC40MzYtMC40NDYgMS4wNDMtMC40ODEgMS41NzYgMGwzLjkwOCAzLjc0NyAzLjkwOC0zLjc0N2MwLjUzMy0wLjQ4MSAxLjE0MS0wLjQ0NiAxLjU3NCAwIDAuNDM2IDAuNDQ1IDAuNDA4IDEuMTk3IDAgMS42MTUtMC40MDYgMC40MTgtNC42OTUgNC41MDItNC42OTUgNC41MDItMC4yMTcgMC4yMjMtMC41MDIgMC4zMzUtMC43ODcgMC4zMzVzLTAuNTctMC4xMTItMC43ODktMC4zMzVjMCAwLTQuMjg3LTQuMDg0LTQuNjk1LTQuNTAycy0wLjQzNi0xLjE3IDAtMS42MTV6XCIgLz5cbiAgPC9Tdmc+XG4pO1xuXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbi8vIERyb3Bkb3duICYgQ2xlYXIgQnV0dG9uc1xuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG5cbmV4cG9ydCBpbnRlcmZhY2UgRHJvcGRvd25JbmRpY2F0b3JQcm9wczxcbiAgT3B0aW9uID0gdW5rbm93bixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4gPSBib29sZWFuLFxuICBHcm91cCBleHRlbmRzIEdyb3VwQmFzZTxPcHRpb24+ID0gR3JvdXBCYXNlPE9wdGlvbj5cbj4gZXh0ZW5kcyBDb21tb25Qcm9wc0FuZENsYXNzTmFtZTxPcHRpb24sIElzTXVsdGksIEdyb3VwPiB7XG4gIC8qKiBUaGUgY2hpbGRyZW4gdG8gYmUgcmVuZGVyZWQgaW5zaWRlIHRoZSBpbmRpY2F0b3IuICovXG4gIGNoaWxkcmVuPzogUmVhY3ROb2RlO1xuICAvKiogUHJvcHMgdGhhdCB3aWxsIGJlIHBhc3NlZCBvbiB0byB0aGUgY2hpbGRyZW4uICovXG4gIGlubmVyUHJvcHM6IEpTWC5JbnRyaW5zaWNFbGVtZW50c1snZGl2J107XG4gIC8qKiBUaGUgZm9jdXNlZCBzdGF0ZSBvZiB0aGUgc2VsZWN0LiAqL1xuICBpc0ZvY3VzZWQ6IGJvb2xlYW47XG4gIGlzRGlzYWJsZWQ6IGJvb2xlYW47XG59XG5cbmNvbnN0IGJhc2VDU1MgPSA8XG4gIE9wdGlvbixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj5cbj4oe1xuICBpc0ZvY3VzZWQsXG4gIHRoZW1lOiB7XG4gICAgc3BhY2luZzogeyBiYXNlVW5pdCB9LFxuICAgIGNvbG9ycyxcbiAgfSxcbn06XG4gIHwgRHJvcGRvd25JbmRpY2F0b3JQcm9wczxPcHRpb24sIElzTXVsdGksIEdyb3VwPlxuICB8IENsZWFySW5kaWNhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD4pOiBDU1NPYmplY3RXaXRoTGFiZWwgPT4gKHtcbiAgbGFiZWw6ICdpbmRpY2F0b3JDb250YWluZXInLFxuICBjb2xvcjogaXNGb2N1c2VkID8gY29sb3JzLm5ldXRyYWw2MCA6IGNvbG9ycy5uZXV0cmFsMjAsXG4gIGRpc3BsYXk6ICdmbGV4JyxcbiAgcGFkZGluZzogYmFzZVVuaXQgKiAyLFxuICB0cmFuc2l0aW9uOiAnY29sb3IgMTUwbXMnLFxuXG4gICc6aG92ZXInOiB7XG4gICAgY29sb3I6IGlzRm9jdXNlZCA/IGNvbG9ycy5uZXV0cmFsODAgOiBjb2xvcnMubmV1dHJhbDQwLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBkcm9wZG93bkluZGljYXRvckNTUyA9IGJhc2VDU1M7XG5leHBvcnQgY29uc3QgRHJvcGRvd25JbmRpY2F0b3IgPSA8XG4gIE9wdGlvbixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj5cbj4oXG4gIHByb3BzOiBEcm9wZG93bkluZGljYXRvclByb3BzPE9wdGlvbiwgSXNNdWx0aSwgR3JvdXA+XG4pID0+IHtcbiAgY29uc3QgeyBjaGlsZHJlbiwgY2xhc3NOYW1lLCBjeCwgZ2V0U3R5bGVzLCBpbm5lclByb3BzIH0gPSBwcm9wcztcbiAgcmV0dXJuIChcbiAgICA8ZGl2XG4gICAgICBjc3M9e2dldFN0eWxlcygnZHJvcGRvd25JbmRpY2F0b3InLCBwcm9wcyl9XG4gICAgICBjbGFzc05hbWU9e2N4KFxuICAgICAgICB7XG4gICAgICAgICAgaW5kaWNhdG9yOiB0cnVlLFxuICAgICAgICAgICdkcm9wZG93bi1pbmRpY2F0b3InOiB0cnVlLFxuICAgICAgICB9LFxuICAgICAgICBjbGFzc05hbWVcbiAgICAgICl9XG4gICAgICB7Li4uaW5uZXJQcm9wc31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW4gfHwgPERvd25DaGV2cm9uIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuZXhwb3J0IGludGVyZmFjZSBDbGVhckluZGljYXRvclByb3BzPFxuICBPcHRpb24gPSB1bmtub3duLFxuICBJc011bHRpIGV4dGVuZHMgYm9vbGVhbiA9IGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj4gPSBHcm91cEJhc2U8T3B0aW9uPlxuPiBleHRlbmRzIENvbW1vblByb3BzQW5kQ2xhc3NOYW1lPE9wdGlvbiwgSXNNdWx0aSwgR3JvdXA+IHtcbiAgLyoqIFRoZSBjaGlsZHJlbiB0byBiZSByZW5kZXJlZCBpbnNpZGUgdGhlIGluZGljYXRvci4gKi9cbiAgY2hpbGRyZW4/OiBSZWFjdE5vZGU7XG4gIC8qKiBQcm9wcyB0aGF0IHdpbGwgYmUgcGFzc2VkIG9uIHRvIHRoZSBjaGlsZHJlbi4gKi9cbiAgaW5uZXJQcm9wczogSlNYLkludHJpbnNpY0VsZW1lbnRzWydkaXYnXTtcbiAgLyoqIFRoZSBmb2N1c2VkIHN0YXRlIG9mIHRoZSBzZWxlY3QuICovXG4gIGlzRm9jdXNlZDogYm9vbGVhbjtcbn1cblxuZXhwb3J0IGNvbnN0IGNsZWFySW5kaWNhdG9yQ1NTID0gYmFzZUNTUztcbmV4cG9ydCBjb25zdCBDbGVhckluZGljYXRvciA9IDxcbiAgT3B0aW9uLFxuICBJc011bHRpIGV4dGVuZHMgYm9vbGVhbixcbiAgR3JvdXAgZXh0ZW5kcyBHcm91cEJhc2U8T3B0aW9uPlxuPihcbiAgcHJvcHM6IENsZWFySW5kaWNhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD5cbikgPT4ge1xuICBjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGN4LCBnZXRTdHlsZXMsIGlubmVyUHJvcHMgfSA9IHByb3BzO1xuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Z2V0U3R5bGVzKCdjbGVhckluZGljYXRvcicsIHByb3BzKX1cbiAgICAgIGNsYXNzTmFtZT17Y3goXG4gICAgICAgIHtcbiAgICAgICAgICBpbmRpY2F0b3I6IHRydWUsXG4gICAgICAgICAgJ2NsZWFyLWluZGljYXRvcic6IHRydWUsXG4gICAgICAgIH0sXG4gICAgICAgIGNsYXNzTmFtZVxuICAgICAgKX1cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgID5cbiAgICAgIHtjaGlsZHJlbiB8fCA8Q3Jvc3NJY29uIC8+fVxuICAgIDwvZGl2PlxuICApO1xufTtcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBTZXBhcmF0b3Jcbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuXG5leHBvcnQgaW50ZXJmYWNlIEluZGljYXRvclNlcGFyYXRvclByb3BzPFxuICBPcHRpb24gPSB1bmtub3duLFxuICBJc011bHRpIGV4dGVuZHMgYm9vbGVhbiA9IGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj4gPSBHcm91cEJhc2U8T3B0aW9uPlxuPiBleHRlbmRzIENvbW1vblByb3BzQW5kQ2xhc3NOYW1lPE9wdGlvbiwgSXNNdWx0aSwgR3JvdXA+IHtcbiAgaXNEaXNhYmxlZDogYm9vbGVhbjtcbiAgaXNGb2N1c2VkOiBib29sZWFuO1xuICBpbm5lclByb3BzPzogSlNYLkludHJpbnNpY0VsZW1lbnRzWydzcGFuJ107XG59XG5cbmV4cG9ydCBjb25zdCBpbmRpY2F0b3JTZXBhcmF0b3JDU1MgPSA8XG4gIE9wdGlvbixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj5cbj4oe1xuICBpc0Rpc2FibGVkLFxuICB0aGVtZToge1xuICAgIHNwYWNpbmc6IHsgYmFzZVVuaXQgfSxcbiAgICBjb2xvcnMsXG4gIH0sXG59OiBJbmRpY2F0b3JTZXBhcmF0b3JQcm9wczxPcHRpb24sIElzTXVsdGksIEdyb3VwPik6IENTU09iamVjdFdpdGhMYWJlbCA9PiAoe1xuICBsYWJlbDogJ2luZGljYXRvclNlcGFyYXRvcicsXG4gIGFsaWduU2VsZjogJ3N0cmV0Y2gnLFxuICBiYWNrZ3JvdW5kQ29sb3I6IGlzRGlzYWJsZWQgPyBjb2xvcnMubmV1dHJhbDEwIDogY29sb3JzLm5ldXRyYWwyMCxcbiAgbWFyZ2luQm90dG9tOiBiYXNlVW5pdCAqIDIsXG4gIG1hcmdpblRvcDogYmFzZVVuaXQgKiAyLFxuICB3aWR0aDogMSxcbn0pO1xuXG5leHBvcnQgY29uc3QgSW5kaWNhdG9yU2VwYXJhdG9yID0gPFxuICBPcHRpb24sXG4gIElzTXVsdGkgZXh0ZW5kcyBib29sZWFuLFxuICBHcm91cCBleHRlbmRzIEdyb3VwQmFzZTxPcHRpb24+XG4+KFxuICBwcm9wczogSW5kaWNhdG9yU2VwYXJhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD5cbikgPT4ge1xuICBjb25zdCB7IGNsYXNzTmFtZSwgY3gsIGdldFN0eWxlcywgaW5uZXJQcm9wcyB9ID0gcHJvcHM7XG4gIHJldHVybiAoXG4gICAgPHNwYW5cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2luZGljYXRvclNlcGFyYXRvcicsIHByb3BzKX1cbiAgICAgIGNsYXNzTmFtZT17Y3goeyAnaW5kaWNhdG9yLXNlcGFyYXRvcic6IHRydWUgfSwgY2xhc3NOYW1lKX1cbiAgICAvPlxuICApO1xufTtcblxuLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBMb2FkaW5nXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cblxuY29uc3QgbG9hZGluZ0RvdEFuaW1hdGlvbnMgPSBrZXlmcmFtZXNgXG4gIDAlLCA4MCUsIDEwMCUgeyBvcGFjaXR5OiAwOyB9XG4gIDQwJSB7IG9wYWNpdHk6IDE7IH1cbmA7XG5cbmV4cG9ydCBjb25zdCBsb2FkaW5nSW5kaWNhdG9yQ1NTID0gPFxuICBPcHRpb24sXG4gIElzTXVsdGkgZXh0ZW5kcyBib29sZWFuLFxuICBHcm91cCBleHRlbmRzIEdyb3VwQmFzZTxPcHRpb24+XG4+KHtcbiAgaXNGb2N1c2VkLFxuICBzaXplLFxuICB0aGVtZToge1xuICAgIGNvbG9ycyxcbiAgICBzcGFjaW5nOiB7IGJhc2VVbml0IH0sXG4gIH0sXG59OiBMb2FkaW5nSW5kaWNhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD4pOiBDU1NPYmplY3RXaXRoTGFiZWwgPT4gKHtcbiAgbGFiZWw6ICdsb2FkaW5nSW5kaWNhdG9yJyxcbiAgY29sb3I6IGlzRm9jdXNlZCA/IGNvbG9ycy5uZXV0cmFsNjAgOiBjb2xvcnMubmV1dHJhbDIwLFxuICBkaXNwbGF5OiAnZmxleCcsXG4gIHBhZGRpbmc6IGJhc2VVbml0ICogMixcbiAgdHJhbnNpdGlvbjogJ2NvbG9yIDE1MG1zJyxcbiAgYWxpZ25TZWxmOiAnY2VudGVyJyxcbiAgZm9udFNpemU6IHNpemUsXG4gIGxpbmVIZWlnaHQ6IDEsXG4gIG1hcmdpblJpZ2h0OiBzaXplLFxuICB0ZXh0QWxpZ246ICdjZW50ZXInLFxuICB2ZXJ0aWNhbEFsaWduOiAnbWlkZGxlJyxcbn0pO1xuXG5pbnRlcmZhY2UgTG9hZGluZ0RvdFByb3BzIHtcbiAgZGVsYXk6IG51bWJlcjtcbiAgb2Zmc2V0OiBib29sZWFuO1xufVxuY29uc3QgTG9hZGluZ0RvdCA9ICh7IGRlbGF5LCBvZmZzZXQgfTogTG9hZGluZ0RvdFByb3BzKSA9PiAoXG4gIDxzcGFuXG4gICAgY3NzPXt7XG4gICAgICBhbmltYXRpb246IGAke2xvYWRpbmdEb3RBbmltYXRpb25zfSAxcyBlYXNlLWluLW91dCAke2RlbGF5fW1zIGluZmluaXRlO2AsXG4gICAgICBiYWNrZ3JvdW5kQ29sb3I6ICdjdXJyZW50Q29sb3InLFxuICAgICAgYm9yZGVyUmFkaXVzOiAnMWVtJyxcbiAgICAgIGRpc3BsYXk6ICdpbmxpbmUtYmxvY2snLFxuICAgICAgbWFyZ2luTGVmdDogb2Zmc2V0ID8gJzFlbScgOiB1bmRlZmluZWQsXG4gICAgICBoZWlnaHQ6ICcxZW0nLFxuICAgICAgdmVydGljYWxBbGlnbjogJ3RvcCcsXG4gICAgICB3aWR0aDogJzFlbScsXG4gICAgfX1cbiAgLz5cbik7XG5cbmV4cG9ydCBpbnRlcmZhY2UgTG9hZGluZ0luZGljYXRvclByb3BzPFxuICBPcHRpb24gPSB1bmtub3duLFxuICBJc011bHRpIGV4dGVuZHMgYm9vbGVhbiA9IGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj4gPSBHcm91cEJhc2U8T3B0aW9uPlxuPiBleHRlbmRzIENvbW1vblByb3BzQW5kQ2xhc3NOYW1lPE9wdGlvbiwgSXNNdWx0aSwgR3JvdXA+IHtcbiAgLyoqIFByb3BzIHRoYXQgd2lsbCBiZSBwYXNzZWQgb24gdG8gdGhlIGNoaWxkcmVuLiAqL1xuICBpbm5lclByb3BzOiBKU1guSW50cmluc2ljRWxlbWVudHNbJ2RpdiddO1xuICAvKiogVGhlIGZvY3VzZWQgc3RhdGUgb2YgdGhlIHNlbGVjdC4gKi9cbiAgaXNGb2N1c2VkOiBib29sZWFuO1xuICBpc0Rpc2FibGVkOiBib29sZWFuO1xuICAvKiogU2V0IHNpemUgb2YgdGhlIGNvbnRhaW5lci4gKi9cbiAgc2l6ZTogbnVtYmVyO1xufVxuZXhwb3J0IGNvbnN0IExvYWRpbmdJbmRpY2F0b3IgPSA8XG4gIE9wdGlvbixcbiAgSXNNdWx0aSBleHRlbmRzIGJvb2xlYW4sXG4gIEdyb3VwIGV4dGVuZHMgR3JvdXBCYXNlPE9wdGlvbj5cbj4oXG4gIHByb3BzOiBMb2FkaW5nSW5kaWNhdG9yUHJvcHM8T3B0aW9uLCBJc011bHRpLCBHcm91cD5cbikgPT4ge1xuICBjb25zdCB7IGNsYXNzTmFtZSwgY3gsIGdldFN0eWxlcywgaW5uZXJQcm9wcywgaXNSdGwgfSA9IHByb3BzO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdlxuICAgICAgY3NzPXtnZXRTdHlsZXMoJ2xvYWRpbmdJbmRpY2F0b3InLCBwcm9wcyl9XG4gICAgICBjbGFzc05hbWU9e2N4KFxuICAgICAgICB7XG4gICAgICAgICAgaW5kaWNhdG9yOiB0cnVlLFxuICAgICAgICAgICdsb2FkaW5nLWluZGljYXRvcic6IHRydWUsXG4gICAgICAgIH0sXG4gICAgICAgIGNsYXNzTmFtZVxuICAgICAgKX1cbiAgICAgIHsuLi5pbm5lclByb3BzfVxuICAgID5cbiAgICAgIDxMb2FkaW5nRG90IGRlbGF5PXswfSBvZmZzZXQ9e2lzUnRsfSAvPlxuICAgICAgPExvYWRpbmdEb3QgZGVsYXk9ezE2MH0gb2Zmc2V0IC8+XG4gICAgICA8TG9hZGluZ0RvdCBkZWxheT17MzIwfSBvZmZzZXQ9eyFpc1J0bH0gLz5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5Mb2FkaW5nSW5kaWNhdG9yLmRlZmF1bHRQcm9wcyA9IHsgc2l6ZTogNCB9O1xuIl19 */",
-                                            "name": "tj5bde-Svg",
-                                            "styles": "display:inline-block;fill:currentColor;line-height:1;stroke:currentColor;stroke-width:0;label:Svg;",
-                                            "toString": [Function],
-                                          }
-                                        }
-                                        focusable="false"
-                                        height={20}
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          className="css-tj5bde-Svg"
-                                          focusable="false"
-                                          height={20}
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                        >
-                                          <path
-                                            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-                                          />
-                                        </svg>
-                                      </EmotionCssPropInternal>
-                                    </Svg>
-                                  </DownChevron>
-                                </div>
-                              </EmotionCssPropInternal>
-                            </DropdownIndicator>
-                          </div>
-                        </EmotionCssPropInternal>
-                      </IndicatorsContainer>
-                    </div>
-                  </EmotionCssPropInternal>
-                </Control>
-                <MenuPlacer
-                  clearValue={[Function]}
-                  cx={[Function]}
-                  getStyles={[Function]}
-                  getValue={[Function]}
-                  hasValue={false}
-                  isMulti={false}
-                  isRtl={false}
-                  maxMenuHeight={300}
-                  menuPlacement="bottom"
-                  menuPosition="absolute"
-                  menuShouldScrollIntoView={true}
-                  minMenuHeight={140}
-                  options={
-                    Array [
-                      Object {
-                        "label": "One",
-                        "value": "one",
-                      },
-                      Object {
-                        "label": "Two",
-                        "value": "two",
-                      },
-                      Object {
-                        "label": "One hundred",
-                        "value": "hundred",
-                      },
-                    ]
-                  }
-                  selectOption={[Function]}
-                  selectProps={
-                    Object {
-                      "aria-live": "polite",
-                      "backspaceRemovesValue": true,
-                      "blurInputOnSelect": true,
-                      "captureMenuScroll": false,
-                      "closeMenuOnScroll": false,
-                      "closeMenuOnSelect": true,
-                      "components": Object {},
-                      "controlShouldRenderValue": true,
-                      "escapeClearsValue": false,
-                      "filterOption": [Function],
-                      "formatGroupLabel": [Function],
-                      "getOptionLabel": [Function],
-                      "getOptionValue": [Function],
-                      "inputValue": "text",
-                      "isDisabled": false,
-                      "isLoading": false,
-                      "isMulti": false,
-                      "isOptionDisabled": [Function],
-                      "isRtl": false,
-                      "isSearchable": true,
-                      "loadingMessage": [Function],
-                      "maxMenuHeight": 300,
-                      "menuIsOpen": true,
-                      "menuPlacement": "bottom",
-                      "menuPosition": "absolute",
-                      "menuShouldBlockScroll": false,
-                      "menuShouldScrollIntoView": true,
-                      "minMenuHeight": 140,
-                      "noOptionsMessage": [Function],
-                      "onChange": [Function],
-                      "onInputChange": [Function],
-                      "onMenuClose": [Function],
-                      "onMenuOpen": [Function],
-                      "openMenuOnClick": true,
-                      "openMenuOnFocus": false,
-                      "options": Array [
-                        Object {
-                          "label": "One",
-                          "value": "one",
-                        },
-                        Object {
-                          "label": "Two",
-                          "value": "two",
-                        },
-                        Object {
-                          "label": "One hundred",
-                          "value": "hundred",
-                        },
-                      ],
-                      "pageSize": 5,
-                      "placeholder": "Select...",
-                      "screenReaderStatus": [Function],
-                      "styles": Object {
-                        "container": [Function],
-                        "control": [Function],
-                        "menu": [Function],
-                      },
-                      "tabIndex": 0,
-                      "tabSelectsValue": true,
-                      "theme": [Function],
-                      "value": null,
-                    }
-                  }
-                  setValue={[Function]}
-                  theme={
-                    Object {
-                      "borderRadius": 0,
-                      "colors": Object {
-                        "danger": undefined,
-                        "dangerLight": undefined,
-                        "neutral0": undefined,
-                        "neutral10": undefined,
-                        "neutral20": undefined,
-                        "neutral30": undefined,
-                        "neutral40": undefined,
-                        "neutral5": undefined,
-                        "neutral50": "hsl(0, 0%, 50%)",
-                        "neutral60": undefined,
-                        "neutral70": "hsl(0, 0%, 30%)",
-                        "neutral80": undefined,
-                        "neutral90": "hsl(0, 0%, 10%)",
-                        "primary": undefined,
-                        "primary25": undefined,
-                        "primary50": undefined,
-                        "primary75": "#4C9AFF",
-                      },
-                      "spacing": Object {
-                        "baseUnit": 2,
-                        "controlHeight": 30,
-                        "menuGutter": 8,
-                      },
-                    }
-                  }
-                >
-                  <Menu
-                    clearValue={[Function]}
-                    cx={[Function]}
-                    getStyles={[Function]}
-                    getValue={[Function]}
-                    hasValue={false}
-                    innerProps={
-                      Object {
-                        "id": "react-select-5-listbox",
-                        "onMouseDown": [Function],
-                        "onMouseMove": [Function],
-                      }
-                    }
-                    innerRef={[Function]}
-                    isLoading={false}
-                    isMulti={false}
-                    isRtl={false}
-                    maxMenuHeight={300}
-                    menuPlacement="bottom"
-                    menuPosition="absolute"
-                    menuShouldScrollIntoView={true}
-                    minMenuHeight={140}
-                    options={
-                      Array [
-                        Object {
-                          "label": "One",
-                          "value": "one",
-                        },
-                        Object {
-                          "label": "Two",
-                          "value": "two",
-                        },
-                        Object {
-                          "label": "One hundred",
-                          "value": "hundred",
-                        },
-                      ]
-                    }
-                    placement="bottom"
-                    selectOption={[Function]}
-                    selectProps={
-                      Object {
-                        "aria-live": "polite",
-                        "backspaceRemovesValue": true,
-                        "blurInputOnSelect": true,
-                        "captureMenuScroll": false,
-                        "closeMenuOnScroll": false,
-                        "closeMenuOnSelect": true,
-                        "components": Object {},
-                        "controlShouldRenderValue": true,
-                        "escapeClearsValue": false,
-                        "filterOption": [Function],
-                        "formatGroupLabel": [Function],
-                        "getOptionLabel": [Function],
-                        "getOptionValue": [Function],
-                        "inputValue": "text",
-                        "isDisabled": false,
-                        "isLoading": false,
-                        "isMulti": false,
-                        "isOptionDisabled": [Function],
-                        "isRtl": false,
-                        "isSearchable": true,
-                        "loadingMessage": [Function],
-                        "maxMenuHeight": 300,
-                        "menuIsOpen": true,
-                        "menuPlacement": "bottom",
-                        "menuPosition": "absolute",
-                        "menuShouldBlockScroll": false,
-                        "menuShouldScrollIntoView": true,
-                        "minMenuHeight": 140,
-                        "noOptionsMessage": [Function],
-                        "onChange": [Function],
-                        "onInputChange": [Function],
-                        "onMenuClose": [Function],
-                        "onMenuOpen": [Function],
-                        "openMenuOnClick": true,
-                        "openMenuOnFocus": false,
-                        "options": Array [
-                          Object {
-                            "label": "One",
-                            "value": "one",
-                          },
-                          Object {
-                            "label": "Two",
-                            "value": "two",
-                          },
-                          Object {
-                            "label": "One hundred",
-                            "value": "hundred",
-                          },
-                        ],
-                        "pageSize": 5,
-                        "placeholder": "Select...",
-                        "screenReaderStatus": [Function],
-                        "styles": Object {
-                          "container": [Function],
-                          "control": [Function],
-                          "menu": [Function],
-                        },
-                        "tabIndex": 0,
-                        "tabSelectsValue": true,
-                        "theme": [Function],
-                        "value": null,
-                      }
-                    }
-                    setValue={[Function]}
-                    theme={
-                      Object {
-                        "borderRadius": 0,
-                        "colors": Object {
-                          "danger": undefined,
-                          "dangerLight": undefined,
-                          "neutral0": undefined,
-                          "neutral10": undefined,
-                          "neutral20": undefined,
-                          "neutral30": undefined,
-                          "neutral40": undefined,
-                          "neutral5": undefined,
-                          "neutral50": "hsl(0, 0%, 50%)",
-                          "neutral60": undefined,
-                          "neutral70": "hsl(0, 0%, 30%)",
-                          "neutral80": undefined,
-                          "neutral90": "hsl(0, 0%, 10%)",
-                          "primary": undefined,
-                          "primary25": undefined,
-                          "primary50": undefined,
-                          "primary75": "#4C9AFF",
-                        },
-                        "spacing": Object {
-                          "baseUnit": 2,
-                          "controlHeight": 30,
-                          "menuGutter": 8,
-                        },
-                      }
-                    }
-                  >
-                    <EmotionCssPropInternal
-                      __EMOTION_LABEL_PLEASE_DO_NOT_USE__="Menu"
-                      __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                      className=""
-                      css={
-                        Object {
-                          "backgroundColor": undefined,
-                          "borderRadius": 0,
-                          "boxShadow": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)",
-                          "boxSizing": "border-box",
-                          "label": "menu",
-                          "marginBottom": 8,
-                          "marginTop": 8,
-                          "position": "absolute",
-                          "top": "100%",
-                          "width": "100%",
-                          "zIndex": 10,
-                        }
-                      }
-                      id="react-select-5-listbox"
-                      onMouseDown={[Function]}
-                      onMouseMove={[Function]}
-                    >
-                      <div
-                        className=" css-17wpf85-menu"
-                        id="react-select-5-listbox"
-                        onMouseDown={[Function]}
-                        onMouseMove={[Function]}
-                      >
-                        <ScrollManager
-                          captureEnabled={false}
-                          lockEnabled={false}
-                        >
-                          <MenuList
-                            clearValue={[Function]}
-                            cx={[Function]}
-                            getStyles={[Function]}
-                            getValue={[Function]}
-                            hasValue={false}
-                            innerRef={[Function]}
-                            isLoading={false}
-                            isMulti={false}
-                            isRtl={false}
-                            maxHeight={300}
-                            options={
-                              Array [
-                                Object {
-                                  "label": "One",
-                                  "value": "one",
-                                },
-                                Object {
-                                  "label": "Two",
-                                  "value": "two",
-                                },
-                                Object {
-                                  "label": "One hundred",
-                                  "value": "hundred",
-                                },
-                              ]
-                            }
-                            selectOption={[Function]}
-                            selectProps={
-                              Object {
-                                "aria-live": "polite",
-                                "backspaceRemovesValue": true,
-                                "blurInputOnSelect": true,
-                                "captureMenuScroll": false,
-                                "closeMenuOnScroll": false,
-                                "closeMenuOnSelect": true,
-                                "components": Object {},
-                                "controlShouldRenderValue": true,
-                                "escapeClearsValue": false,
-                                "filterOption": [Function],
-                                "formatGroupLabel": [Function],
-                                "getOptionLabel": [Function],
-                                "getOptionValue": [Function],
-                                "inputValue": "text",
-                                "isDisabled": false,
-                                "isLoading": false,
-                                "isMulti": false,
-                                "isOptionDisabled": [Function],
-                                "isRtl": false,
-                                "isSearchable": true,
-                                "loadingMessage": [Function],
-                                "maxMenuHeight": 300,
-                                "menuIsOpen": true,
-                                "menuPlacement": "bottom",
-                                "menuPosition": "absolute",
-                                "menuShouldBlockScroll": false,
-                                "menuShouldScrollIntoView": true,
-                                "minMenuHeight": 140,
-                                "noOptionsMessage": [Function],
-                                "onChange": [Function],
-                                "onInputChange": [Function],
-                                "onMenuClose": [Function],
-                                "onMenuOpen": [Function],
-                                "openMenuOnClick": true,
-                                "openMenuOnFocus": false,
-                                "options": Array [
-                                  Object {
-                                    "label": "One",
-                                    "value": "one",
-                                  },
-                                  Object {
-                                    "label": "Two",
-                                    "value": "two",
-                                  },
-                                  Object {
-                                    "label": "One hundred",
-                                    "value": "hundred",
-                                  },
-                                ],
-                                "pageSize": 5,
-                                "placeholder": "Select...",
-                                "screenReaderStatus": [Function],
-                                "styles": Object {
-                                  "container": [Function],
-                                  "control": [Function],
-                                  "menu": [Function],
-                                },
-                                "tabIndex": 0,
-                                "tabSelectsValue": true,
-                                "theme": [Function],
-                                "value": null,
-                              }
-                            }
-                            setValue={[Function]}
-                            theme={
-                              Object {
-                                "borderRadius": 0,
-                                "colors": Object {
-                                  "danger": undefined,
-                                  "dangerLight": undefined,
-                                  "neutral0": undefined,
-                                  "neutral10": undefined,
-                                  "neutral20": undefined,
-                                  "neutral30": undefined,
-                                  "neutral40": undefined,
-                                  "neutral5": undefined,
-                                  "neutral50": "hsl(0, 0%, 50%)",
-                                  "neutral60": undefined,
-                                  "neutral70": "hsl(0, 0%, 30%)",
-                                  "neutral80": undefined,
-                                  "neutral90": "hsl(0, 0%, 10%)",
-                                  "primary": undefined,
-                                  "primary25": undefined,
-                                  "primary50": undefined,
-                                  "primary75": "#4C9AFF",
-                                },
-                                "spacing": Object {
-                                  "baseUnit": 2,
-                                  "controlHeight": 30,
-                                  "menuGutter": 8,
-                                },
-                              }
-                            }
-                          >
-                            <EmotionCssPropInternal
-                              __EMOTION_LABEL_PLEASE_DO_NOT_USE__="MenuList"
-                              __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                              className=""
-                              css={
-                                Object {
-                                  "WebkitOverflowScrolling": "touch",
-                                  "boxSizing": "border-box",
-                                  "maxHeight": 300,
-                                  "overflowY": "auto",
-                                  "paddingBottom": 2,
-                                  "paddingTop": 2,
-                                  "position": "relative",
-                                }
-                              }
-                            >
-                              <div
-                                className=" css-87spde-MenuList"
-                              >
-                                <NoOptionsMessage
-                                  clearValue={[Function]}
-                                  cx={[Function]}
-                                  getStyles={[Function]}
-                                  getValue={[Function]}
-                                  hasValue={false}
-                                  isMulti={false}
-                                  isRtl={false}
-                                  options={
-                                    Array [
-                                      Object {
-                                        "label": "One",
-                                        "value": "one",
-                                      },
-                                      Object {
-                                        "label": "Two",
-                                        "value": "two",
-                                      },
-                                      Object {
-                                        "label": "One hundred",
-                                        "value": "hundred",
-                                      },
-                                    ]
-                                  }
-                                  selectOption={[Function]}
-                                  selectProps={
-                                    Object {
-                                      "aria-live": "polite",
-                                      "backspaceRemovesValue": true,
-                                      "blurInputOnSelect": true,
-                                      "captureMenuScroll": false,
-                                      "closeMenuOnScroll": false,
-                                      "closeMenuOnSelect": true,
-                                      "components": Object {},
-                                      "controlShouldRenderValue": true,
-                                      "escapeClearsValue": false,
-                                      "filterOption": [Function],
-                                      "formatGroupLabel": [Function],
-                                      "getOptionLabel": [Function],
-                                      "getOptionValue": [Function],
-                                      "inputValue": "text",
-                                      "isDisabled": false,
-                                      "isLoading": false,
-                                      "isMulti": false,
-                                      "isOptionDisabled": [Function],
-                                      "isRtl": false,
-                                      "isSearchable": true,
-                                      "loadingMessage": [Function],
-                                      "maxMenuHeight": 300,
-                                      "menuIsOpen": true,
-                                      "menuPlacement": "bottom",
-                                      "menuPosition": "absolute",
-                                      "menuShouldBlockScroll": false,
-                                      "menuShouldScrollIntoView": true,
-                                      "minMenuHeight": 140,
-                                      "noOptionsMessage": [Function],
-                                      "onChange": [Function],
-                                      "onInputChange": [Function],
-                                      "onMenuClose": [Function],
-                                      "onMenuOpen": [Function],
-                                      "openMenuOnClick": true,
-                                      "openMenuOnFocus": false,
-                                      "options": Array [
-                                        Object {
-                                          "label": "One",
-                                          "value": "one",
-                                        },
-                                        Object {
-                                          "label": "Two",
-                                          "value": "two",
-                                        },
-                                        Object {
-                                          "label": "One hundred",
-                                          "value": "hundred",
-                                        },
-                                      ],
-                                      "pageSize": 5,
-                                      "placeholder": "Select...",
-                                      "screenReaderStatus": [Function],
-                                      "styles": Object {
-                                        "container": [Function],
-                                        "control": [Function],
-                                        "menu": [Function],
-                                      },
-                                      "tabIndex": 0,
-                                      "tabSelectsValue": true,
-                                      "theme": [Function],
-                                      "value": null,
-                                    }
-                                  }
-                                  setValue={[Function]}
-                                  theme={
-                                    Object {
-                                      "borderRadius": 0,
-                                      "colors": Object {
-                                        "danger": undefined,
-                                        "dangerLight": undefined,
-                                        "neutral0": undefined,
-                                        "neutral10": undefined,
-                                        "neutral20": undefined,
-                                        "neutral30": undefined,
-                                        "neutral40": undefined,
-                                        "neutral5": undefined,
-                                        "neutral50": "hsl(0, 0%, 50%)",
-                                        "neutral60": undefined,
-                                        "neutral70": "hsl(0, 0%, 30%)",
-                                        "neutral80": undefined,
-                                        "neutral90": "hsl(0, 0%, 10%)",
-                                        "primary": undefined,
-                                        "primary25": undefined,
-                                        "primary50": undefined,
-                                        "primary75": "#4C9AFF",
-                                      },
-                                      "spacing": Object {
-                                        "baseUnit": 2,
-                                        "controlHeight": 30,
-                                        "menuGutter": 8,
-                                      },
-                                    }
-                                  }
-                                >
-                                  <EmotionCssPropInternal
-                                    __EMOTION_LABEL_PLEASE_DO_NOT_USE__="NoOptionsMessage"
-                                    __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
-                                    className=""
-                                    css={
-                                      Object {
-                                        "boxSizing": "border-box",
-                                        "color": undefined,
-                                        "padding": "4px 6px",
-                                        "textAlign": "center",
-                                      }
-                                    }
-                                  >
-                                    <div
-                                      className=" css-36co7-NoOptionsMessage"
-                                    >
-                                      No options
-                                    </div>
-                                  </EmotionCssPropInternal>
-                                </NoOptionsMessage>
-                              </div>
-                            </EmotionCssPropInternal>
-                          </MenuList>
-                        </ScrollManager>
-                      </div>
-                    </EmotionCssPropInternal>
-                  </Menu>
-                </MenuPlacer>
-              </div>
-            </EmotionCssPropInternal>
-          </SelectContainer>
-        </Select>
-      </ForwardRef>
-    </Select>
-  </Component>
-</WithTheme(Component)>
+          <path
+            d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
+          />
+        </svg>
+      </div>
+    </div>
+  </div>
+  <div
+    class=" css-17wpf85-menu"
+    id="react-select-5-listbox"
+  >
+    <div
+      class=" css-87spde-MenuList"
+    >
+      <div
+        class=" css-36co7-NoOptionsMessage"
+      >
+        No options
+      </div>
+    </div>
+  </div>
+</div>
 `;
diff --git a/packages/redux-devtools-ui/tests/__snapshots__/Slider.test.tsx.snap b/packages/redux-devtools-ui/tests/__snapshots__/Slider.test.tsx.snap
index d99b04c7..5f82cfd6 100644
--- a/packages/redux-devtools-ui/tests/__snapshots__/Slider.test.tsx.snap
+++ b/packages/redux-devtools-ui/tests/__snapshots__/Slider.test.tsx.snap
@@ -19,7 +19,8 @@ exports[`Slider renders with props 1`] = `
   disabled=""
 >
   <label>
-    Hi 
+    Hi
+     
   </label>
   <input
     disabled=""
diff --git a/packages/redux-devtools-ui/tests/__snapshots__/Tabs.test.tsx.snap b/packages/redux-devtools-ui/tests/__snapshots__/Tabs.test.tsx.snap
index d4bb21b3..66da46e9 100644
--- a/packages/redux-devtools-ui/tests/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/redux-devtools-ui/tests/__snapshots__/Tabs.test.tsx.snap
@@ -120,9 +120,10 @@ exports[`Tabs renders with props 1`] = `
   </div>
   <div>
     <div
-      style="display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:22px"
+      style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 22px;"
     >
-      Selected Tab2
+      Selected 
+      Tab2
     </div>
   </div>
 </div>
diff --git a/packages/redux-devtools-ui/tests/setup.ts b/packages/redux-devtools-ui/tests/setup.ts
deleted file mode 100644
index fc7b0dce..00000000
--- a/packages/redux-devtools-ui/tests/setup.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import Enzyme from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-
-Enzyme.configure({ adapter: new Adapter() });
diff --git a/yarn.lock b/yarn.lock
index 539fc530..4afa3a8d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5066,11 +5066,12 @@ __metadata:
     "@rjsf/core": ^3.2.0
     "@storybook/addon-essentials": ^6.3.12
     "@storybook/react": ^6.3.12
+    "@testing-library/dom": ^8.10.1
+    "@testing-library/react": ^12.1.2
+    "@testing-library/user-event": ^13.5.0
     "@types/base16": ^1.0.2
     "@types/codemirror": ^5.60.5
     "@types/color": ^3.0.2
-    "@types/enzyme": ^3.10.10
-    "@types/enzyme-adapter-react-16": ^1.0.6
     "@types/jest": ^27.0.2
     "@types/json-schema": ^7.0.9
     "@types/prop-types": ^15.7.4
@@ -5080,13 +5081,11 @@ __metadata:
     "@types/styled-components": ^5.1.15
     "@typescript-eslint/eslint-plugin": ^5.1.0
     "@typescript-eslint/parser": ^5.1.0
+    babel-loader: ^8.2.3
     base16: ^1.0.0
     codemirror: ^5.63.3
     color: ^3.2.1
     csstype: ^3.0.9
-    enzyme: ^3.11.0
-    enzyme-adapter-react-16: ^1.15.6
-    enzyme-to-json: ^3.6.2
     eslint: ^7.32.0
     eslint-config-prettier: ^8.3.0
     eslint-plugin-jest: ^25.2.2
@@ -5109,6 +5108,7 @@ __metadata:
     stylelint-processor-styled-components: ^1.10.0
     ts-jest: ^27.0.7
     typescript: ~4.4.4
+    webpack: ^5.59.1
   peerDependencies:
     "@types/react": ^16.3.0 || ^17.0.0
     "@types/styled-components": ^5.1.15
@@ -6293,7 +6293,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^8.0.0":
+"@testing-library/dom@npm:^8.0.0, @testing-library/dom@npm:^8.10.1":
   version: 8.10.1
   resolution: "@testing-library/dom@npm:8.10.1"
   dependencies:
@@ -6322,6 +6322,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@testing-library/user-event@npm:^13.5.0":
+  version: 13.5.0
+  resolution: "@testing-library/user-event@npm:13.5.0"
+  dependencies:
+    "@babel/runtime": ^7.12.5
+  peerDependencies:
+    "@testing-library/dom": ">=7.21.4"
+  checksum: 16319de685fbb7008f1ba667928f458b2d08196918002daca56996de80ef35e6d9de26e9e1ece7d00a004692b95a597cf9142fff0dc53f2f51606a776584f549
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"