diff --git a/package.json b/package.json
index 93459ad..bc50d1e 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.1",
+    "react-select": "^5.8.0",
     "styled-components": "^6.1.13",
     "tailwindcss": "^3.4.10",
     "tsconfig-paths": "^4.2.0",
diff --git a/src/components/form/form-container.tsx b/src/components/form/form-container.tsx
new file mode 100644
index 0000000..ee753ec
--- /dev/null
+++ b/src/components/form/form-container.tsx
@@ -0,0 +1,15 @@
+import { FormHTMLAttributes, ReactNode } from 'react'
+
+type FormProps = {
+  children: ReactNode
+} & FormHTMLAttributes<HTMLFormElement>
+
+export const FormContainer = ({ children, className, ...props }: FormProps) => {
+  let localClassName = 'flex gap-6 flex-col'
+
+  if (className) {
+    localClassName += ` ${className}`
+  }
+
+  return <form className={localClassName} {...props}>{children}</form>
+}
diff --git a/src/components/form/input/adapter/checkbox.tsx b/src/components/form/input/adapter/checkbox.tsx
new file mode 100644
index 0000000..16a85e2
--- /dev/null
+++ b/src/components/form/input/adapter/checkbox.tsx
@@ -0,0 +1,22 @@
+import { InputProps } from '..'
+
+export const Checkbox = ({ options, name, label, value, ...props }: InputProps) => {
+  return (
+    <div>
+      {options?.map((opt) => (
+        <div className="flex items-center mt-4 pl-4">
+          <input
+            id={`${name}-${opt.value}`}
+            name={name}
+            checked={Array.isArray(value) ? value.includes(opt.value) : opt.value === value}
+            type="checkbox"
+            value={opt.value}
+            className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600"
+            {...props}
+          />
+          <label htmlFor={`${name}-${opt.value}`} className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{opt.label}</label>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/form/input/adapter/index.ts b/src/components/form/input/adapter/index.ts
new file mode 100644
index 0000000..5f75a40
--- /dev/null
+++ b/src/components/form/input/adapter/index.ts
@@ -0,0 +1,19 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { Toggle } from './toggle'
+import { Checkbox } from './checkbox'
+import { Radio } from './radio'
+import { Select } from './select'
+import { Textarea } from './textarea'
+
+type AdapterType = {
+  [key: string]: any
+}
+
+export const Adapters: AdapterType = {
+  'checkbox': Checkbox,
+  'select': Select,
+  'radio': Radio,
+  'textarea': Textarea,
+  'toggle': Toggle,
+}
diff --git a/src/components/form/input/adapter/radio.tsx b/src/components/form/input/adapter/radio.tsx
new file mode 100644
index 0000000..f38000e
--- /dev/null
+++ b/src/components/form/input/adapter/radio.tsx
@@ -0,0 +1,14 @@
+import { InputProps } from '..'
+
+export const Radio = ({ options, name, label, value, ...props }: InputProps) => {
+  return (
+    <div>
+      {options?.map((opt) => (
+        <div className="flex items-center mt-4 pl-4">
+          <input id={`${name}-${opt.value}`} checked={value === opt.value} type="radio" value={opt.value} className="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded dark:ring-offset-gray-800 dark:bg-gray-700 dark:border-gray-600" {...props} />
+          <label htmlFor={`${name}-${opt.value}`} className="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">{opt.label}</label>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/form/input/adapter/select.tsx b/src/components/form/input/adapter/select.tsx
new file mode 100644
index 0000000..0331e41
--- /dev/null
+++ b/src/components/form/input/adapter/select.tsx
@@ -0,0 +1,31 @@
+import ReactSelect, { Props } from 'react-select'
+import { InputProps } from '..'
+
+type SelectProps = InputProps & Props
+
+export const Select = ({ options, name, error, className, label, helpText, value, onChange, ...props }: SelectProps) => {
+  return (
+    <>
+      <ReactSelect
+        id={name}
+        options={options}
+        value={options ? options?.filter((opt) => Array.isArray(value) ? value.includes(opt.value) : opt.value === value) : []}
+        onChange={(e: any) => {
+          if (Array.isArray(e) && onChange) {
+            onChange({ target: { value: e.map((item: any) => item.value) } } as any)
+            return
+          }
+
+          if (onChange) {
+            onChange({ target: { value: e?.value } } as any)
+          }
+        }}
+        isSearchable
+        isClearable
+        className={`react-select-container${error ? ' error' : ''}`}
+        classNamePrefix="react-select"
+        {...props}
+      />
+    </>
+  )
+}
diff --git a/src/components/form/input/adapter/textarea.tsx b/src/components/form/input/adapter/textarea.tsx
new file mode 100644
index 0000000..8cc082e
--- /dev/null
+++ b/src/components/form/input/adapter/textarea.tsx
@@ -0,0 +1,22 @@
+import { ReactNode, TextareaHTMLAttributes } from 'react'
+import { resolveClassName } from '../input-field'
+
+type TextareaProps = {
+  children?: ReactNode
+  rows?: number
+  label?: string
+  helpText?: ReactNode
+  error?: boolean
+} & TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const Textarea = ({ children, rows, name, label, helpText, className, error, ...props }: TextareaProps) => {
+  const localClassName = resolveClassName({ error, className })
+
+  return (
+    <div>
+      <div className="flex items-center mt-4">
+        <textarea id={name} rows={rows} className={localClassName} {...props}>{children}</textarea>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/form/input/adapter/toggle.tsx b/src/components/form/input/adapter/toggle.tsx
new file mode 100644
index 0000000..1707f2c
--- /dev/null
+++ b/src/components/form/input/adapter/toggle.tsx
@@ -0,0 +1,19 @@
+import { InputProps } from '..'
+import { Toggle as ToggleComponent } from '../../toggle'
+
+export const Toggle = ({ options, value, onChange }: InputProps) => {
+  return (
+    <div>
+      {options?.map((opt) => (
+        <div className="flex items-center mt-4 pl-4">
+          <ToggleComponent
+            checked={Array.isArray(value) ? value.includes(opt.value) : opt.value === value}
+            onClick={() => onChange ? onChange({ target: { value: opt.value } } as any) : ''}
+          >
+            {opt.label}
+          </ToggleComponent>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/src/components/form/input/index.tsx b/src/components/form/input/index.tsx
new file mode 100644
index 0000000..537d6cb
--- /dev/null
+++ b/src/components/form/input/index.tsx
@@ -0,0 +1,46 @@
+import { ReactNode, useEffect, useState } from 'react'
+import { InputField, InputFieldProps } from './input-field'
+import { Typography } from '../../Typography'
+import { Adapters } from './adapter'
+import { Label } from './label'
+
+export type Option = {
+  value: any
+  label: string
+}
+
+export type InputProps = InputFieldProps & {
+  name: string
+  label?: string
+  helpText?: ReactNode
+  options?: Option[]
+  rows?: number
+  isMulti?: boolean
+}
+
+export const Input = ({ label, helpText, type = 'text', options, onChange, ...props }: InputProps) => {
+  const [hasAdapter, setHasAdapter] = useState<boolean>(false)
+
+  useEffect(() => {
+    setHasAdapter(!!Adapters[type])
+  }, [type])
+
+  let localHelpTextClassName = 'mt-2 !mb-0 text-sm text-gray-500 dark:text-gray-400'
+
+  if (props?.error) {
+    localHelpTextClassName += ' !text-red-500'
+  }
+
+  return (
+    <div>
+      {label && <Label name={props.name} label={label} />}
+      <InputField type={hasAdapter ? 'hidden' : type} id={props.name} onChange={onChange} {...props} />
+      {
+        hasAdapter && Adapters[type]({ label, helpText, type, options, onChange, ...props })
+      }
+      {helpText &&
+        <Typography id="helper-text-explanation" className={localHelpTextClassName}>{helpText}</Typography>
+      }
+    </div>
+  )
+}
diff --git a/src/components/form/input/input-field.tsx b/src/components/form/input/input-field.tsx
new file mode 100644
index 0000000..0b6d286
--- /dev/null
+++ b/src/components/form/input/input-field.tsx
@@ -0,0 +1,37 @@
+import { HTMLInputTypeAttribute, InputHTMLAttributes } from 'react'
+
+export type InputFieldProps = {
+  label?: string
+  type?: HTMLInputTypeAttribute
+  error?: boolean
+  isLoading?: boolean
+} & InputHTMLAttributes<HTMLInputElement>
+
+const classNameTemplate = 'bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white'
+const classNameErrorTemplate = '!border-red-500 !outline-red-500'
+
+export const resolveClassName = ({ className, error }: Partial<InputFieldProps>): string => {
+  let localClassName = classNameTemplate
+
+  if (className) {
+    localClassName = `${localClassName} ${className}`
+  }
+
+  if (error) {
+    localClassName = `${localClassName} ${classNameErrorTemplate}`
+  }
+
+  return localClassName
+}
+
+export const InputField = ({ type, error, className, ...props }: InputFieldProps) => {
+  const localClassName = resolveClassName({ error, className })
+
+  return (
+    <input
+      type={type ?? 'text'}
+      className={localClassName}
+      {...props}
+    />
+  )
+}
diff --git a/src/components/form/input/label.tsx b/src/components/form/input/label.tsx
new file mode 100644
index 0000000..7582772
--- /dev/null
+++ b/src/components/form/input/label.tsx
@@ -0,0 +1,7 @@
+type LabelProps = {
+  label: string
+  name?: string
+}
+
+export const Label = ({ name, label }: LabelProps) =>
+  <label htmlFor={name} className="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{label}</label>
\ No newline at end of file
diff --git a/src/components/form/toggle/index.tsx b/src/components/form/toggle/index.tsx
index c547cb3..b778de3 100644
--- a/src/components/form/toggle/index.tsx
+++ b/src/components/form/toggle/index.tsx
@@ -2,8 +2,8 @@ import { ReactNode } from 'react'
 
 type ToggleProps = {
   checked?: boolean,
-  onClick: () => void,
-  children: ReactNode,
+  onClick?: () => void,
+  children?: ReactNode,
 }
 
 export const Toggle = ({ checked, onClick, children }: ToggleProps) => (
diff --git a/src/config/routes.tsx b/src/config/routes.tsx
index 69740fb..e14c0e1 100644
--- a/src/config/routes.tsx
+++ b/src/config/routes.tsx
@@ -3,6 +3,8 @@ import { RouteObject } from 'react-router-dom'
 import { Home } from '../pages/home'
 import { ReactNode } from 'react'
 import { NoTemplate } from '@pages/no-template'
+import { Forms } from '@pages/forms'
+import { LoginLayout } from '@layouts/default/login.layout'
 
 type RouteConfigItemProps = {
   title?: ReactNode,
@@ -37,17 +39,17 @@ export const RoutesConfig: RouteConfigItem[] = [
       menuLabel: 'Formulários',
       menuIcon: 'input',
     },
-    element: <>Formulários</>,
+    element: <Forms />,
   },
   {
-    layout: DefaultLayout,
+    layout: LoginLayout,
     path: '/login',
     props: {
       title: <><span className="material-symbols-outlined">passkey</span> Login</>,
       menuLabel: 'Login',
       menuIcon: 'passkey',
     },
-    element: <>Login</>,
+    element: <></>,
   },
   {
     path: '/empty',
diff --git a/src/components/menu/index.tsx b/src/layouts/default/components/menu/index.tsx
similarity index 97%
rename from src/components/menu/index.tsx
rename to src/layouts/default/components/menu/index.tsx
index 515c3ac..8cf63db 100644
--- a/src/components/menu/index.tsx
+++ b/src/layouts/default/components/menu/index.tsx
@@ -1,5 +1,5 @@
 import { MouseEventHandler, ReactNode, useEffect, useState } from 'react'
-import { Card } from '../card'
+import { Card } from '../../../../components/card'
 import { useLocation } from 'react-router-dom'
 import { RoutesConfig } from '@config/routes'
 
diff --git a/src/layouts/default/default.layout.tsx b/src/layouts/default/default.layout.tsx
index a9ae68c..f77c4fe 100644
--- a/src/layouts/default/default.layout.tsx
+++ b/src/layouts/default/default.layout.tsx
@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { Rounded } from '../../components/rounded'
 import { useDarkMode } from '../../contexts/dark-mode'
 import './style.css'
-import { Menu, MenuItem } from '../../components/menu'
+import { Menu, MenuItem } from './components/menu'
 import { Typography } from '../../components/Typography'
 import { Toggle } from '../../components/form/toggle'
 import { Outlet, useNavigate } from 'react-router-dom'
diff --git a/src/layouts/default/login.layout.tsx b/src/layouts/default/login.layout.tsx
new file mode 100644
index 0000000..fb00a87
--- /dev/null
+++ b/src/layouts/default/login.layout.tsx
@@ -0,0 +1,84 @@
+import { FormEvent, useCallback } from 'react'
+import { useDarkMode } from '../../contexts/dark-mode'
+import { Typography } from '../../components/Typography'
+import { Toggle } from '../../components/form/toggle'
+import { Rounded } from '../../components/rounded'
+import { Img } from '../../components/img'
+import { Card, CardBackground } from '../../components/card'
+import { FormContainer } from '../../components/form/form-container'
+import { Input } from '../../components/form/input'
+import { Button } from '../../components/button'
+import { useNavigate } from 'react-router-dom'
+
+export const LoginLayout = () => {
+  const { isDarkMode, toggleDarkMode } = useDarkMode()
+  const navigate = useNavigate()
+
+  const darkModeHandler = useCallback(() => {
+    toggleDarkMode()
+  }, [isDarkMode])
+
+  const submit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    navigate('/')
+  }
+
+  return (
+    <div className={isDarkMode ? 'dark' : ''}>
+      <div className="grid grid-cols-2 h-screen">
+
+        <div className="flex justify-center items-center bg-gray-300 relative">
+          <CardBackground src="/programmer.jpeg" className="bg-dark/80 rounded-full text-white flex flex-col gap-16 items-center justify-around">
+            <div className="flex items-center gap-3">
+              <Rounded><Img src="/logo.png" width={50} height={50} /></Rounded>
+              {' '}
+              <span>Erik <span className='text-primary'>Dashboard</span></span>
+            </div>
+          </CardBackground>
+        </div>
+
+        <div className="flex justify-center items-center bg-gray-200 dark:text-white dark:bg-gray-800 p-4">
+          <FormContainer style={{ maxWidth: 400, width: '100%' }} onSubmit={submit}>
+            <Card className='flex gap-6 flex-col'>
+              <Typography type="h2" className="flex items-center gap-3">
+                <Rounded><Img src="/logo.png" width={50} height={50} /></Rounded>
+                Sign in to your account
+              </Typography>
+
+              <Input
+                name="email"
+                label="Email"
+                type="email"
+                placeholder='Field with HTML props support'
+              />
+
+              <Input
+                name="password"
+                label="Field text"
+                type="password"
+                placeholder='Field with HTML props support'
+              />
+
+              <Input
+                name="input-text-checkbox"
+                type='checkbox'
+                options={[
+                  { label: 'Remember-me', value: 'remember' },
+                ]}
+              />
+
+              <Button>Login</Button>
+            </Card>
+          </FormContainer>
+        </div>
+
+      </div>
+
+      <Typography type="display" className='absolute bottom-4 right-1 flex items-center gap-6 dark:text-white'>
+        <Toggle checked={isDarkMode} onClick={darkModeHandler}>
+          <span className="material-symbols-outlined">{isDarkMode ? 'brightness_4' : 'brightness_7'}</span> Dark Mode
+        </Toggle>
+      </Typography>
+    </div>
+  )
+}
diff --git a/src/layouts/default/style.css b/src/layouts/default/style.css
index 141d4c2..aeffff1 100644
--- a/src/layouts/default/style.css
+++ b/src/layouts/default/style.css
@@ -36,4 +36,51 @@ a:hover {
   line-height: inherit;
   display: inline-flex;
   vertical-align: top;
-}
\ No newline at end of file
+}
+
+:focus {
+  @apply focus:border-gray-900 focus:border-2 !outline-none
+}
+
+/* :focus-visible {
+  @apply !outline-none
+} */
+
+@layer components {
+  .react-select-container .react-select__control {
+    @apply flex bg-gray-50 border-2 border-gray-300 hover:border-gray-300 focus:border-2 text-gray-900 text-sm rounded-lg w-full p-1 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white;
+  }
+
+  .react-select-container.error .react-select__control {
+    @apply border-red-500
+  }
+
+  .react-select-container .react-select__control--is-focused {
+    @apply border-2 border-gray-900 hover:border-gray-900 shadow-none;
+  }
+
+  .react-select-container.error .react-select__control--is-focused {
+    @apply border-2 border-red-500 hover:border-red-500 shadow-none;
+  }
+
+  .react-select-container .react-select__menu {
+    @apply bg-gray-100 dark:bg-gray-700;
+  }
+
+  .react-select-container .react-select__option {
+    @apply text-gray-600 dark:text-gray-200 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-800;
+  }
+  .react-select-container .react-select__option--is-focused {
+    @apply bg-gray-200 dark:bg-gray-800;
+  }
+
+  .react-select-container .react-select__indicator-separator {
+    @apply bg-gray-400;
+  }
+
+  .react-select-container .react-select__input-container,
+  .react-select-container .react-select__placeholder,
+  .react-select-container .react-select__single-value {
+    @apply text-gray-600 dark:text-gray-200;
+  }
+}
diff --git a/src/pages/forms.tsx b/src/pages/forms.tsx
new file mode 100644
index 0000000..e812c90
--- /dev/null
+++ b/src/pages/forms.tsx
@@ -0,0 +1,162 @@
+import { useState } from 'react'
+import { Button } from '../components/button'
+import { Card } from '../components/card'
+import { FormContainer } from '../components/form/form-container'
+import { Input } from '../components/form/input'
+import { useOnChange } from '../utils/handleOnChange'
+
+export const Forms = () => {
+  const [formData, setFormData] = useState<any>({
+    'input-password': 'option1',
+    'input-text-checkbox': ['option1', 'option2'],
+    'input-text-radio': 'option2',
+    'input-text-toggle': ['option1', 'option2'],
+    'input-text-select': 'option1',
+    'input-text-select-multiple': ['option1', 'option3'],
+  })
+
+  const { handleOnChange, handleOnChangeMultiple } = useOnChange<typeof formData>(formData, setFormData)
+
+  return (
+    <Card>
+      <FormContainer>
+        <Input
+          name="input-text"
+          label="Field text"
+          placeholder='Field with HTML props support'
+          helpText="This component support all HTML Input proporties of native HTML 5"
+        />
+
+        <Input
+          name="input-text-error"
+          label="Field text with error validation"
+          placeholder='Field with error'
+          helpText="Error validation message"
+          error
+        />
+
+        <div className="grid grid-cols-2 gap-6">
+          <Input
+            name="input-text-date"
+            label="Date field"
+            type='date'
+          />
+
+          <Input
+            name="input-textdatetime"
+            label="Date Time field"
+            type='datetime-local'
+          />
+        </div>
+
+        <div className="grid grid-cols-2 gap-6">
+          <Input
+            name="input-password"
+            label="Password"
+            type='password'
+            value={formData['input-password']}
+            onChange={(e) => handleOnChange('input-password', e)}
+          />
+
+          <Input
+            name="input-upload"
+            label="File upload field"
+            type='file'
+          />
+        </div>
+
+        <div className="grid grid-cols-3 gap-6">
+          <Input
+            name="input-text-checkbox"
+            label="Checkbox field"
+            type='checkbox'
+            value={formData['input-text-checkbox']}
+            onChange={(e) => handleOnChangeMultiple('input-text-checkbox', e)}
+            options={[
+              { label: 'Option 1', value: 'option1' },
+              { label: 'Option 2', value: 'option2' },
+            ]}
+          />
+
+          <Input
+            name="input-text-radio"
+            label="Radio field"
+            type='radio'
+            value={formData['input-text-radio']}
+            onChange={(e) => handleOnChange('input-text-radio', e)}
+            options={[
+              { label: 'Option 1', value: 'option1' },
+              { label: 'Option 2', value: 'option2' },
+            ]}
+          />
+
+          <Input
+            name="input-text-toggle"
+            label="Toggle"
+            type='toggle'
+            value={formData['input-text-toggle']}
+            onChange={(e) => handleOnChangeMultiple('input-text-toggle', e)}
+            options={[
+              { label: 'Option 1', value: 'option1' },
+              { label: 'Option 2', value: 'option2' },
+            ]}
+          />
+        </div>
+
+        <Input
+          name="input-textarea"
+          label="Textarea"
+          placeholder="Textarea with support all attributes of HTML 5"
+          helpText="Rows=4 - All inputs support optional help text and labels (titles)"
+          type='textarea'
+          rows={4}
+        />
+
+        <Input
+          name="input-textarea-errors"
+          label="Textarea with error"
+          placeholder="Textarea with support all attributes of HTML 5"
+          helpText="Textarea with support all attributes of HTML 5"
+          type='textarea'
+          error
+        />
+
+        <div className="grid grid-cols-2 gap-6">
+          <Input
+            name="input-text-select"
+            label="Select"
+            type='select'
+            value={formData['input-text-select']}
+            onChange={(e) => handleOnChange('input-text-select', e)}
+            options={[
+              { label: 'Option 1', value: 'option1' },
+              { label: 'Option 2', value: 'option2' },
+            ]}
+            helpText="Select single"
+          />
+
+          <Input
+            name="input-text-select-multiple"
+            label="Select multiple"
+            type='select'
+            error
+            value={formData['input-text-select-multiple']}
+            onChange={(e) => handleOnChangeMultiple('input-text-select-multiple', e)}
+            options={[
+              { label: 'Option 1', value: 'option1' },
+              { label: 'Option 2', value: 'option2' },
+              { label: 'Option 3', value: 'option3' },
+            ]}
+            isMulti
+            helpText="Select multiple"
+          />
+        </div>
+
+        <div>
+          <Button>Confirm button</Button>
+          <Button type="reset" className="bg-gray-500 hover:bg-dark">Reset button</Button>
+        </div>
+      </FormContainer>
+    </Card>
+  )
+}
diff --git a/src/utils/handleOnChange.ts b/src/utils/handleOnChange.ts
new file mode 100644
index 0000000..78200e3
--- /dev/null
+++ b/src/utils/handleOnChange.ts
@@ -0,0 +1,57 @@
+import { useCallback } from 'react'
+
+type FormDataType<T> = {
+  [K in keyof T]: string | string[]
+}
+
+export const useOnChange = <T>(formData: FormDataType<T>, setFormData: (data: FormDataType<T>) => void) => {
+  const handleOnChange = useCallback((field: keyof T, e: React.ChangeEvent<HTMLInputElement>) => {
+    const localFieldData = { ...formData }
+    localFieldData[field] = e.target.value
+    setFormData(localFieldData)
+  }, [formData])
+
+  const handleOnChangeMultiple = useCallback((field: keyof T, e: React.ChangeEvent<HTMLInputElement>) => {
+    let currentValue = formData[field]
+
+    // Se o valor novo for um array
+    if (Array.isArray(e.target.value)) {
+
+      // Se o valor atual for um array e contem o valor atual ou está vazio
+      if (
+        Array.isArray(currentValue)
+        && currentValue.filter((current: any) => (e.target.value).includes(current)).length > 0
+        || e.target.value.length === 0
+      ) {
+        // Seto o valor novo como atual, removendo valores não informados
+        currentValue = e.target.value
+      } else {
+        // Se não, eu adiciono o valor novo, mesclando os arrays
+        // O new Set remove os valores repetidos
+        currentValue = [...new Set([...currentValue, ...e.target.value])]
+      }
+
+      // Se o valor novo não for um array
+    } else {
+
+      // Se o valor atual for um array e contem o valor antigo
+      if (Array.isArray(currentValue) && currentValue.includes(e.target.value)) {
+        // Removemos os valores que não são o novo
+        currentValue = currentValue.filter((value: unknown) => value !== e.target.value)
+      } else if (Array.isArray(currentValue)) {
+        // Se valor antigo for um array, mas NÃO contem o valor novo, adicionamos
+        currentValue = [...currentValue, e.target.value]
+      } else {
+        // Se nenhum valor for array, trocamos o antigo par ao novo
+        currentValue = e.target.value
+      }
+    }
+
+    // Atualizamos o state
+    const localFieldData = { ...formData }
+    localFieldData[field] = currentValue
+    setFormData(localFieldData)
+  }, [formData])
+
+  return { handleOnChange, handleOnChangeMultiple }
+}
diff --git a/yarn.lock b/yarn.lock
index e43db69..7c7ff64 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15,7 +15,7 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@babel/code-frame@^7.24.7":
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.7.tgz#882fd9e09e8ee324e496bd040401c6f046ef4465"
   integrity sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==
@@ -70,7 +70,7 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
-"@babel/helper-module-imports@^7.24.7":
+"@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz#f2f980392de5b84c3328fc71d38bd81bbb83042b"
   integrity sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==
@@ -155,6 +155,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.7"
 
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
+  version "7.25.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.6.tgz#9afc3289f7184d8d7f98b099884c26317b9264d2"
+  integrity sha512-VBj9MYyDb9tuLq7yzqjgzt6Q+IBQLrGZfdjOekyEirZPHxXWoTSGUTMrpsfi58Up73d13NfYLv8HT9vmznjzhQ==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.25.0":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
@@ -186,6 +193,39 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@emotion/babel-plugin@^11.12.0":
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
+  integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/serialize" "^1.2.0"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.13.0", "@emotion/cache@^11.4.0":
+  version "11.13.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
+  integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
 "@emotion/is-prop-valid@1.2.2":
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz#d4175076679c6a26faa92b03bb786f9e52612337"
@@ -198,11 +238,66 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
   integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==
 
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
+"@emotion/react@^11.8.1":
+  version "11.13.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.13.3.tgz#a69d0de2a23f5b48e0acf210416638010e4bd2e4"
+  integrity sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.12.0"
+    "@emotion/cache" "^11.13.0"
+    "@emotion/serialize" "^1.3.1"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.1.0"
+    "@emotion/utils" "^1.4.0"
+    "@emotion/weak-memoize" "^0.4.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.1":
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.1.tgz#490b660178f43d2de8e92b278b51079d726c05c3"
+  integrity sha512-dEPNKzBPU+vFPGa+z3axPRn8XVDetYORmDC0wAiej+TNcOZE70ZMJa0X7JdeoM6q/nWTMZeLpN/fTnD9o8MQBA==
+  dependencies:
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/unitless" "^0.10.0"
+    "@emotion/utils" "^1.4.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
 "@emotion/unitless@0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3"
   integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
+"@emotion/unitless@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
+  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
+  integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
+
+"@emotion/utils@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.0.tgz#262f1d02aaedb2ec91c83a0955dd47822ad5fbdd"
+  integrity sha512-spEnrA1b6hDR/C68lC2M7m6ALPUHZC0lIY7jAS/B/9DuuO1ZP04eov8SMv/6fwRd8pzmsn2AuJEznRREWlQrlQ==
+
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
 "@esbuild/aix-ppc64@0.21.5":
   version "0.21.5"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz#c7184a326533fcdf1b8ee0733e21c713b975575f"
@@ -364,6 +459,26 @@
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
   integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
+"@floating-ui/core@^1.6.0":
+  version "1.6.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.7.tgz#7602367795a390ff0662efd1c7ae8ca74e75fb12"
+  integrity sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.7"
+
+"@floating-ui/dom@^1.0.1":
+  version "1.6.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.10.tgz#b74c32f34a50336c86dcf1f1c845cf3a39e26d6f"
+  integrity sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.7"
+
+"@floating-ui/utils@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.7.tgz#d0ece53ce99ab5a8e37ebdfe5e32452a2bfc073e"
+  integrity sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA==
+
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
@@ -586,6 +701,11 @@
   dependencies:
     undici-types "~6.19.2"
 
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
 "@types/prop-types@*":
   version "15.7.12"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.12.tgz#12bb1e2be27293c1406acb6af1c3f3a1481d98c6"
@@ -598,6 +718,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-transition-group@^4.4.0":
+  version "4.4.11"
+  resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.11.tgz#d963253a611d757de01ebb241143b1017d5d63d5"
+  integrity sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^18.3.3":
   version "18.3.3"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
@@ -810,6 +937,15 @@ autoprefixer@^10.4.20:
     picocolors "^1.0.1"
     postcss-value-parser "^4.2.0"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 balanced-match@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -938,11 +1074,27 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
 convert-source-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a"
   integrity sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==
 
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz#1443b9afa596b670082ea46cbd8f6a62b84635f6"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cross-spawn@^7.0.0, cross-spawn@^7.0.2:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
@@ -1005,6 +1157,14 @@ dlv@^1.1.3:
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.3.tgz#5c198a8a11453596e751494d49874bc7732f2e79"
   integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -1025,6 +1185,13 @@ emoji-regex@^9.2.2:
   resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72"
   integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
 
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
 esbuild@^0.21.3:
   version "0.21.5"
   resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.21.5.tgz#9ca301b120922959b766360d8ac830da0d02997d"
@@ -1217,6 +1384,11 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
@@ -1346,6 +1518,13 @@ hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
+hoist-non-react-statics@^3.3.1:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 ignore@^5.2.0, ignore@^5.3.1:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
@@ -1364,6 +1543,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
 is-binary-path@~2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
@@ -1446,6 +1630,11 @@ json-buffer@3.0.1:
   resolved "https://registry.yarnpkg.com/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -1522,6 +1711,11 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
@@ -1654,6 +1848,16 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 path-exists@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
@@ -1778,7 +1982,7 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prop-types@^15.8.1:
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -1812,7 +2016,7 @@ react-dom@^18.3.1:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -1837,6 +2041,31 @@ react-router@6.26.1:
   dependencies:
     "@remix-run/router" "1.19.1"
 
+react-select@^5.8.0:
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.8.0.tgz#bd5c467a4df223f079dd720be9498076a3f085b5"
+  integrity sha512-TfjLDo58XrhP6VG5M/Mi56Us0Yt8X7xD6cDybC7yoRMUNm7BGO7qk8J0TLQOua/prb8vUOtsfnXZwfm30HGsAA==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.1.2"
+
+react-transition-group@^4.3.0:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
@@ -1858,12 +2087,17 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
-resolve@^1.1.7, resolve@^1.22.2:
+resolve@^1.1.7, resolve@^1.19.0, resolve@^1.22.2:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -1958,6 +2192,11 @@ source-map-js@^1.2.0:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
 
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
   name string-width-cjs
   version "4.2.3"
@@ -2017,6 +2256,11 @@ styled-components@^6.1.13:
     stylis "4.3.2"
     tslib "2.6.2"
 
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
 stylis@4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.3.2.tgz#8f76b70777dd53eb669c6f58c997bf0a9972e444"
@@ -2238,6 +2482,11 @@ uri-js@^4.2.2:
   dependencies:
     punycode "^2.1.0"
 
+use-isomorphic-layout-effect@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
 util-deprecate@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
@@ -2298,6 +2547,11 @@ yallist@^3.0.2:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd"
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
 yaml@^2.3.4:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.5.0.tgz#c6165a721cf8000e91c36490a41d7be25176cf5d"