diff --git a/libs/ui-toolkit/src/components/select/select.spec.tsx b/libs/ui-toolkit/src/components/select/select.spec.tsx
new file mode 100644
index 000000000..116892a6d
--- /dev/null
+++ b/libs/ui-toolkit/src/components/select/select.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Select from './select';
+
+describe('Select', () => {
+ it('should render successfully', () => {
+ const { baseElement } = render();
+ expect(baseElement).toBeTruthy();
+ });
+});
diff --git a/libs/ui-toolkit/src/components/select/select.stories.tsx b/libs/ui-toolkit/src/components/select/select.stories.tsx
new file mode 100644
index 000000000..f223cb9d3
--- /dev/null
+++ b/libs/ui-toolkit/src/components/select/select.stories.tsx
@@ -0,0 +1,26 @@
+import { Story, Meta } from '@storybook/react';
+import { Select } from './select';
+
+export default {
+ component: Select,
+ title: 'Select',
+} as Meta;
+
+const Template: Story = (args) => (
+
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithError = Template.bind({});
+WithError.args = {
+ hasError: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+ disabled: true,
+};
diff --git a/libs/ui-toolkit/src/components/select/select.tsx b/libs/ui-toolkit/src/components/select/select.tsx
new file mode 100644
index 000000000..014e5d942
--- /dev/null
+++ b/libs/ui-toolkit/src/components/select/select.tsx
@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+import { inputClassNames, inputStyle } from '../input/input';
+
+/* eslint-disable-next-line */
+export interface TextAreaProps {
+ onChange?: React.FormEventHandler;
+ hasError?: boolean;
+ disabled?: boolean;
+ className?: string;
+ value?: string | number;
+ children?: React.ReactNode;
+}
+
+export function Select({
+ hasError,
+ onChange,
+ disabled,
+ className,
+ children,
+}: TextAreaProps) {
+ return (
+
+ );
+}
+
+export default Select;
diff --git a/libs/ui-toolkit/src/components/textArea/textArea.tsx b/libs/ui-toolkit/src/components/textArea/textArea.tsx
index 0da8fa647..7b7b1f8b7 100644
--- a/libs/ui-toolkit/src/components/textArea/textArea.tsx
+++ b/libs/ui-toolkit/src/components/textArea/textArea.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { inputClassNames, inputStyle } from '../input/input';
/* eslint-disable-next-line */
export interface TextAreaProps {
@@ -10,47 +10,6 @@ export interface TextAreaProps {
children?: React.ReactNode;
}
-export const inputClassNames = ({
- hasError,
- disabled,
- className,
-}: {
- hasError?: boolean;
- disabled?: boolean;
- className?: string;
-}) =>
- classNames(
- [
- 'inline-flex',
- 'items-center',
- 'box-border',
- 'pl-8',
- 'pr-8',
- 'border',
- 'border-light-gray-50',
- 'bg-neutral-753',
- 'text-light-gray-50',
- 'text-ui',
- 'focus-visible:shadow-focus',
- 'focus-visible:outline-0',
- ],
- {
- 'border-vega-pink': hasError,
- 'text-disabled': disabled,
- 'bg-transparent': disabled,
- },
- className
- );
-
-export const inputStyle = ({ disabled }: { disabled?: boolean }) => {
- const style: React.CSSProperties = {};
- if (disabled) {
- style.backgroundImage =
- 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAAXNSR0IArs4c6QAAACNJREFUGFdjtLS0/M8ABcePH2eEsRlJl4BpBdHIuuFmEi0BABqjEQVjx/LTAAAAAElFTkSuQmCC)';
- }
- return style;
-};
-
export function TextArea({
hasError,
onChange,