From 85d810af98c72454845d62eee7438e2afa19a4f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Thu, 21 Sep 2023 12:02:06 +0100
Subject: [PATCH] feat(hooks): add use-form hook and changes to related
 components (#14)

---
 .changeset/violet-frogs-travel.md             |   6 +
 .eslintignore                                 |   1 -
 jest.config.js                                |   2 +-
 package.json                                  |   7 +-
 packages/components/src/Input/BaseInput.tsx   |   6 +-
 packages/components/src/Input/Input.style.tsx |   1 +
 packages/components/src/List/List.tsx         |   7 +-
 .../src/NumberInput/NumberInput.tsx           |   2 +-
 .../components/src/Overlay/OpenTransition.tsx |   6 +-
 .../components/src/Select/Select.stories.tsx  |   3 +-
 packages/components/src/Select/Select.tsx     |   4 +-
 packages/components/src/Table/Table.tsx       |   4 +-
 .../components/src/TokenInput/TokenInput.tsx  |  52 ++-
 .../src/TokenInput/TokenInputBalance.tsx      |   4 +-
 .../src/TokenInput/TokenInputLabel.tsx        |   3 +
 packages/hooks/package.json                   |   5 +-
 packages/hooks/src/index.ts                   |   1 +
 .../src/use-form/__tests__/use-form.test.tsx  | 355 +++++++++++++++++
 packages/hooks/src/use-form/index.tsx         |   2 +
 packages/hooks/src/use-form/use-form.tsx      | 161 ++++++++
 pnpm-lock.yaml                                | 367 +++++++++++++-----
 scripts/setup-test.ts                         |   2 +-
 tsconfig.json                                 |   5 +-
 23 files changed, 883 insertions(+), 123 deletions(-)
 create mode 100644 .changeset/violet-frogs-travel.md
 create mode 100644 packages/hooks/src/use-form/__tests__/use-form.test.tsx
 create mode 100644 packages/hooks/src/use-form/index.tsx
 create mode 100644 packages/hooks/src/use-form/use-form.tsx

diff --git a/.changeset/violet-frogs-travel.md b/.changeset/violet-frogs-travel.md
new file mode 100644
index 000000000..fef9cbe45
--- /dev/null
+++ b/.changeset/violet-frogs-travel.md
@@ -0,0 +1,6 @@
+---
+"@interlay/ui": patch
+"@interlay/hooks": patch
+---
+
+feat(hooks): add use-form hook and changes to related components
diff --git a/.eslintignore b/.eslintignore
index 9f2c1facb..199129c4b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,7 +1,6 @@
 *.css
 .changeset
 dist
-scripts/*
 *.config.js
 .DS_Store
 node_modules
diff --git a/jest.config.js b/jest.config.js
index 4d704b7ed..4d8d94366 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,7 @@ module.exports = {
     ]
   },
   transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$'],
-  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect', './scripts/setup-test.ts'],
+  setupFilesAfterEnv: ['./scripts/setup-test.ts'],
   testTimeout: 10000,
   globals: {
     'ts-jest': {
diff --git a/package.json b/package.json
index ef0be3493..fb1769f0b 100644
--- a/package.json
+++ b/package.json
@@ -43,11 +43,10 @@
     "@storybook/react-vite": "^7.4.0",
     "@swc/core": "^1.3.84",
     "@swc/jest": "^0.2.29",
-    "@testing-library/dom": "^8.1.0",
-    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.4",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
diff --git a/packages/components/src/Input/BaseInput.tsx b/packages/components/src/Input/BaseInput.tsx
index efc41f3b6..dc674fd0b 100644
--- a/packages/components/src/Input/BaseInput.tsx
+++ b/packages/components/src/Input/BaseInput.tsx
@@ -1,5 +1,5 @@
 import { ValidationState } from '@react-types/shared';
-import { forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
+import { FocusEvent, forwardRef, InputHTMLAttributes, ReactNode, useEffect, useRef, useState } from 'react';
 import { Sizes, Spacing } from '@interlay/theme';
 
 import { Field, FieldProps, useFieldProps } from '../Field';
@@ -22,6 +22,8 @@ type Props = {
   padding?: { top?: Spacing; bottom?: Spacing; left?: Spacing; right?: Spacing };
   validationState?: ValidationState;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onFocus?: (e: FocusEvent<Element>) => void;
+  onBlur?: (e: FocusEvent<Element>) => void;
 };
 
 type NativeAttrs = Omit<InputHTMLAttributes<HTMLInputElement>, keyof Props>;
@@ -29,7 +31,7 @@ type NativeAttrs = Omit<InputHTMLAttributes<HTMLInputElement>, keyof Props>;
 type InheritAttrs = Omit<
   HelperTextProps &
     Pick<FieldProps, 'label' | 'labelPosition' | 'labelProps' | 'maxWidth' | 'justifyContent' | 'alignItems'>,
-  keyof Props & NativeAttrs
+  keyof (Props & NativeAttrs)
 >;
 type BaseInputProps = Props & NativeAttrs & InheritAttrs;
 
diff --git a/packages/components/src/Input/Input.style.tsx b/packages/components/src/Input/Input.style.tsx
index 63a618d28..2f9b558ac 100644
--- a/packages/components/src/Input/Input.style.tsx
+++ b/packages/components/src/Input/Input.style.tsx
@@ -32,6 +32,7 @@ const StyledBaseInput = styled.input<BaseInputProps>`
     $adornments.bottom ? theme.input.overflow.large.text : theme.input[$size].text};
   line-height: ${theme.lineHeight.base};
   font-weight: ${({ $size }) => theme.input[$size].weight};
+  text-overflow: ellipsis;
 
   background-color: ${({ $isDisabled }) => ($isDisabled ? theme.input.disabled.bg : theme.input.background)};
   overflow: hidden;
diff --git a/packages/components/src/List/List.tsx b/packages/components/src/List/List.tsx
index 062f6dc45..e7882e9b8 100644
--- a/packages/components/src/List/List.tsx
+++ b/packages/components/src/List/List.tsx
@@ -25,8 +25,11 @@ type NativeAttrs = Omit<FlexProps, keyof Props>;
 type ListProps = Props & NativeAttrs & InheritAttrs;
 
 const List = forwardRef<HTMLUListElement, ListProps>(
-  ({ variant = 'primary', direction = 'column', onSelectionChange, ...props }, ref): JSX.Element => {
-    const ariaProps = { onSelectionChange, ...props };
+  (
+    { variant = 'primary', direction = 'column', onSelectionChange, selectionMode, selectedKeys, ...props },
+    ref
+  ): JSX.Element => {
+    const ariaProps = { onSelectionChange, selectionMode, selectedKeys, ...props };
     const state = useListState(ariaProps);
     const listRef = useDOMRef<HTMLUListElement>(ref);
     const { gridProps } = useGridList(ariaProps, state, listRef);
diff --git a/packages/components/src/NumberInput/NumberInput.tsx b/packages/components/src/NumberInput/NumberInput.tsx
index 9b1948519..d68149fa4 100644
--- a/packages/components/src/NumberInput/NumberInput.tsx
+++ b/packages/components/src/NumberInput/NumberInput.tsx
@@ -25,7 +25,7 @@ type InheritAttrs = Omit<
   keyof Props | 'errorMessageProps' | 'descriptionProps' | 'disabled' | 'required' | 'readOnly'
 >;
 
-type AriaAttrs = Omit<AriaTextFieldOptions<'input'>, (keyof Props & InheritAttrs) | 'onChange'>;
+type AriaAttrs = Omit<AriaTextFieldOptions<'input'>, keyof (Props & InheritAttrs)>;
 
 type NumberInputProps = Props & InheritAttrs & AriaAttrs;
 
diff --git a/packages/components/src/Overlay/OpenTransition.tsx b/packages/components/src/Overlay/OpenTransition.tsx
index f77564c1d..969e98df2 100644
--- a/packages/components/src/Overlay/OpenTransition.tsx
+++ b/packages/components/src/Overlay/OpenTransition.tsx
@@ -20,9 +20,9 @@ type OpenTransitionProps = Props & InheritAttrs;
 
 const OpenTransition = (props: OpenTransitionProps): any => {
   // Do not apply any transition if in chromatic (based on react-spectrum)
-  // if (process.env.CHROMATIC) {
-  //   return Children.map(props.children, (child) => child && cloneElement(child as any, { isOpen: props.in }));
-  // }
+  if (process.env.NODE_ENV === 'test') {
+    return Children.map(props.children, (child) => child && cloneElement(child as any, { isOpen: props.in }));
+  }
 
   return (
     <Transition timeout={{ enter: 0, exit: 350 }} {...props}>
diff --git a/packages/components/src/Select/Select.stories.tsx b/packages/components/src/Select/Select.stories.tsx
index 5a8c2a9e6..e48754156 100644
--- a/packages/components/src/Select/Select.stories.tsx
+++ b/packages/components/src/Select/Select.stories.tsx
@@ -35,8 +35,7 @@ export default {
     layout: 'centered'
   },
   args: {
-    label: 'Coin',
-    withModal: false
+    label: 'Coin'
   },
   render: Render
 } as Meta<typeof Select>;
diff --git a/packages/components/src/Select/Select.tsx b/packages/components/src/Select/Select.tsx
index 37ab84cb0..2123c1ce2 100644
--- a/packages/components/src/Select/Select.tsx
+++ b/packages/components/src/Select/Select.tsx
@@ -129,7 +129,7 @@ const Select = <F extends SelectType = 'listbox', T extends SelectObject = Selec
           disabled={disabled}
           name={name}
           tabIndex={-1}
-          value={onChange ? state.selectedKey || '' : undefined}
+          value={onChange ? state.selectedKey.toString() || '' : undefined}
           onChange={onChange}
         />
       </VisuallyHidden>
@@ -153,7 +153,7 @@ const Select = <F extends SelectType = 'listbox', T extends SelectObject = Selec
           ref={modalRef}
           id={modalId}
           isOpen={state.isOpen}
-          listProps={{ selectedKeys: [state.selectedItem?.key], disabledKeys }}
+          listProps={{ selectedKeys: state.selectedItem?.key ? [state.selectedItem?.key] : [], disabledKeys }}
           state={state}
           title={modalTitle}
           onClose={state.close}
diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx
index faa2996ee..a3f63e933 100644
--- a/packages/components/src/Table/Table.tsx
+++ b/packages/components/src/Table/Table.tsx
@@ -24,7 +24,9 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
     <BaseTable ref={ref} {...props}>
       {/* TODO: rename `uid` to `id` */}
       <TableHeader columns={columns}>{(column) => <Column key={column.uid}>{column.name}</Column>}</TableHeader>
-      <TableBody items={rows}>{(item: any) => <Row>{(columnKey) => <Cell>{item[columnKey]}</Cell>}</Row>}</TableBody>
+      <TableBody items={rows}>
+        {(item: any) => <Row>{(columnKey) => <Cell>{item[columnKey.toString()]}</Cell>}</Row>}
+      </TableBody>
     </BaseTable>
   )
 );
diff --git a/packages/components/src/TokenInput/TokenInput.tsx b/packages/components/src/TokenInput/TokenInput.tsx
index d25722c41..3c3d3b5f7 100644
--- a/packages/components/src/TokenInput/TokenInput.tsx
+++ b/packages/components/src/TokenInput/TokenInput.tsx
@@ -1,13 +1,12 @@
 import { useLabel } from '@react-aria/label';
 import { chain, mergeProps, useId } from '@react-aria/utils';
-import { forwardRef, Key, ReactNode, useEffect, useState } from 'react';
+import { ChangeEvent, FocusEvent, forwardRef, Key, ReactNode, useEffect, useState } from 'react';
 import { useDOMRef } from '@interlay/hooks';
 
 import { Flex } from '../Flex';
 import { HelperText } from '../HelperText';
 import { NumberInput, NumberInputProps } from '../NumberInput';
 import { formatUSD } from '../utils/format';
-import { triggerChangeEvent } from '../utils/input';
 
 import { TokenAdornment, TokenTicker } from './TokenAdornment';
 import { StyledUSDAdornment } from './TokenInput.style';
@@ -22,6 +21,7 @@ type Props = {
   ticker?: TokenTicker;
   onClickBalance?: (balance?: string | number) => void;
   onChangeTicker?: (ticker?: string) => void;
+  onValueChange?: (value?: string | number) => void;
   selectProps?: Omit<TokenSelectProps, 'label' | 'helperTextId'>;
 };
 
@@ -43,17 +43,22 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
       hidden,
       className,
       onClickBalance,
+      onValueChange,
       onChangeTicker,
       selectProps,
       placeholder = '0',
       errorMessage,
       description,
+      value: valueProp,
+      defaultValue,
+      onBlur,
       ...props
     },
     ref
   ): JSX.Element => {
     const inputRef = useDOMRef(ref);
 
+    const [value, setValue] = useState(defaultValue);
     const [ticker, setTicker] = useState<string>(
       (selectProps?.defaultValue as string) || (typeof tickerProp === 'string' ? tickerProp : tickerProp?.text) || ''
     );
@@ -61,6 +66,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
     const { labelProps, fieldProps } = useLabel({ label, ...props });
 
     const selectHelperTextId = useId();
+    const inputId = useId();
 
     const itemsArr = Array.from(selectProps?.items || []);
     const isSelectAdornment = itemsArr.length > 1;
@@ -72,11 +78,19 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
       setTicker(selectProps.value as string);
     }, [selectProps?.value]);
 
+    useEffect(() => {
+      if (valueProp === undefined) return;
+
+      setValue(valueProp);
+    }, [valueProp]);
+
     const handleClickBalance = () => {
       if (!balance) return;
 
-      triggerChangeEvent(inputRef, balance);
+      inputRef.current?.focus();
       onClickBalance?.(balance);
+      setValue(balance);
+      onValueChange?.(balance);
     };
 
     const handleTokenChange = (ticker: Key) => {
@@ -84,6 +98,25 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
       setTicker(ticker as string);
     };
 
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value;
+
+      onValueChange?.(value);
+      setValue(value);
+    };
+
+    const handleBlur = (e: FocusEvent<Element>) => {
+      const relatedTargetEl = e.relatedTarget as HTMLButtonElement;
+
+      if (!relatedTargetEl) return;
+
+      const isTargetingMaxBtn = relatedTargetEl.getAttribute('aria-controls') === inputId;
+
+      if (!isTargetingMaxBtn) {
+        onBlur?.(e);
+      }
+    };
+
     // Prioritise Number Input description and error message
     const hasSelectHelperText =
       !errorMessage && !description && (selectProps?.errorMessage || selectProps?.description);
@@ -105,6 +138,15 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
     ) : null;
 
     const hasLabel = !!label || balance !== undefined;
+    const hasLabelWithBalance = hasLabel && balance !== undefined;
+
+    const numberInputProps: Partial<NumberInputProps> = hasLabelWithBalance
+      ? {
+          id: inputId,
+          onBlur: handleBlur,
+          onChange: handleChange
+        }
+      : { onBlur, onChange: handleChange };
 
     return (
       <Flex className={className} direction='column' gap='spacing0' hidden={hidden} style={style}>
@@ -112,6 +154,7 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
           <TokenInputLabel
             balance={humanBalance || balance}
             balanceLabel={balanceLabel}
+            inputId={inputId}
             isDisabled={isDisabled || !ticker}
             ticker={ticker}
             onClickBalance={handleClickBalance}
@@ -137,7 +180,8 @@ const TokenInput = forwardRef<HTMLInputElement, TokenInputProps>(
           pattern='^[0-9]*[.,]?[0-9]*$'
           placeholder={placeholder}
           size='large'
-          {...mergeProps(props, fieldProps)}
+          value={value}
+          {...mergeProps(props, fieldProps, numberInputProps)}
         />
         {hasSelectHelperText && (
           <HelperText
diff --git a/packages/components/src/TokenInput/TokenInputBalance.tsx b/packages/components/src/TokenInput/TokenInputBalance.tsx
index 998da474c..e74cdcd99 100644
--- a/packages/components/src/TokenInput/TokenInputBalance.tsx
+++ b/packages/components/src/TokenInput/TokenInputBalance.tsx
@@ -9,6 +9,7 @@ import {
 } from './TokenInput.style';
 
 type TokenInputBalanceProps = {
+  inputId: string;
   ticker?: string;
   value: string | number;
   onClickBalance?: () => void;
@@ -18,6 +19,7 @@ type TokenInputBalanceProps = {
 };
 
 const TokenInputBalance = ({
+  inputId,
   ticker,
   value,
   onClickBalance,
@@ -33,7 +35,7 @@ const TokenInputBalance = ({
       <dd>
         <StyledTokenInputBalanceValue>{ticker ? value : 0}</StyledTokenInputBalanceValue>
       </dd>
-      <CTA disabled={isDisabled} size='x-small' onPress={onClickBalance}>
+      <CTA aria-controls={inputId} disabled={isDisabled} size='x-small' onPress={onClickBalance}>
         MAX
       </CTA>
     </StyledTokenInputBalanceWrapper>
diff --git a/packages/components/src/TokenInput/TokenInputLabel.tsx b/packages/components/src/TokenInput/TokenInputLabel.tsx
index 34de57d87..9263778e9 100644
--- a/packages/components/src/TokenInput/TokenInputLabel.tsx
+++ b/packages/components/src/TokenInput/TokenInputLabel.tsx
@@ -6,6 +6,7 @@ import { Label, LabelProps } from '../Label';
 import { TokenInputBalance } from './TokenInputBalance';
 
 type Props = {
+  inputId: string;
   ticker?: string;
   balance?: string | number;
   balanceLabel?: ReactNode;
@@ -18,6 +19,7 @@ type InheritAttrs = Omit<LabelProps, keyof Props>;
 type TokenInputLabelProps = Props & InheritAttrs;
 
 const TokenInputLabel = ({
+  inputId,
   balance,
   balanceLabel,
   isDisabled,
@@ -33,6 +35,7 @@ const TokenInputLabel = ({
       {hasLabel && <Label {...props}>{children}</Label>}
       {balance !== undefined && (
         <TokenInputBalance
+          inputId={inputId}
           isDisabled={isDisabled}
           label={balanceLabel}
           ticker={ticker}
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
index 57e19bf4d..b3f9732af 100644
--- a/packages/hooks/package.json
+++ b/packages/hooks/package.json
@@ -35,7 +35,10 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@interlay/theme": "workspace:*"
+    "@interlay/theme": "workspace:*",
+    "@react-aria/utils": "^3.19.0",
+    "formik": "^2.4.5",
+    "react-use": "^17.4.0"
   },
   "peerDependencies": {
     "react": ">=18",
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
index 57b611c96..1518eee2f 100644
--- a/packages/hooks/src/index.ts
+++ b/packages/hooks/src/index.ts
@@ -1,4 +1,5 @@
 export { useMediaQuery } from './use-media-query';
 export { useStyleProps } from './use-style-props';
+export * from './use-form';
 export type { MarginProps, StyleProps, UseStylePropsResult, StyledMarginProps } from './use-style-props';
 export { useDOMRef } from './use-dom-ref';
diff --git a/packages/hooks/src/use-form/__tests__/use-form.test.tsx b/packages/hooks/src/use-form/__tests__/use-form.test.tsx
new file mode 100644
index 000000000..8a2d584bb
--- /dev/null
+++ b/packages/hooks/src/use-form/__tests__/use-form.test.tsx
@@ -0,0 +1,355 @@
+import { render, renderHook, screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+import { Input, TokenInput, Select, Item, InterlayUIProvider } from '../../../../components/src';
+import { useForm } from '../use-form';
+
+type FormData = {
+  firstName: string;
+  lastName: string;
+};
+
+const validate = (values: FormData) => {
+  const errors: any = {};
+
+  if (!values.firstName) {
+    errors.firstName = 'Required';
+  }
+
+  if (!values.lastName) {
+    errors.lastName = 'Required';
+  }
+
+  return errors;
+};
+
+describe('useForm', () => {
+  const handleSubmit = jest.fn();
+
+  beforeEach(() => {
+    handleSubmit.mockClear();
+  });
+
+  describe('Input', () => {
+    const commonProps = { initialValues: { firstName: '', lastName: '' }, validate, onSubmit: handleSubmit };
+
+    it('should set field value', async () => {
+      const { result } = renderHook(() => useForm<FormData>(commonProps));
+
+      render(
+        <form onSubmit={result.current.handleSubmit}>
+          <Input label='First Name' {...result.current.getFieldProps('firstName')} />
+          <Input label='Last Name' {...result.current.getFieldProps('lastName')} />
+          <button type='submit'>Submit</button>
+        </form>
+      );
+
+      userEvent.type(screen.getByRole('textbox', { name: /first name/i }), 'j');
+
+      await waitFor(() => {
+        expect(result.current.values.firstName).toBe('j');
+      });
+    });
+
+    it('should hide all errors', async () => {
+      const { result } = renderHook(() =>
+        useForm<FormData>({
+          ...commonProps,
+          hideErrors: true
+        })
+      );
+
+      render(
+        <form onSubmit={result.current.handleSubmit}>
+          <Input label='First Name' {...result.current.getFieldProps('firstName')} />
+          <Input label='Last Name' {...result.current.getFieldProps('lastName')} />
+          <button type='submit'>Submit</button>
+        </form>
+      );
+
+      userEvent.click(screen.getByRole('textbox', { name: /first name/i }));
+
+      userEvent.click(screen.getByRole('button', { name: /submit/i }));
+
+      await waitFor(() => {
+        expect(result.current.errors.firstName).toBeDefined();
+        expect(result.current.errors.lastName).toBeDefined();
+      });
+
+      expect(result.current.getFieldProps('firstName').errorMessage).not.toBeDefined();
+      expect(result.current.getFieldProps('lastName').errorMessage).not.toBeDefined();
+    });
+
+    it('should hide errors of specific field', async () => {
+      const { result } = renderHook(() =>
+        useForm<FormData>({
+          ...commonProps,
+          hideErrors: {
+            firstName: true
+          }
+        })
+      );
+
+      render(
+        <form onSubmit={result.current.handleSubmit}>
+          <Input label='First Name' {...result.current.getFieldProps('firstName')} />
+          <Input label='Last Name' {...result.current.getFieldProps('lastName')} />
+          <button type='submit'>Submit</button>
+        </form>
+      );
+
+      userEvent.click(screen.getByRole('textbox', { name: /first name/i }));
+
+      userEvent.click(screen.getByRole('button', { name: /submit/i }));
+
+      await waitFor(() => {
+        expect(result.current.errors.firstName).toBeDefined();
+        expect(result.current.errors.lastName).toBeDefined();
+      });
+
+      expect(result.current.getFieldProps('firstName').errorMessage).not.toBeDefined();
+      expect(result.current.getFieldProps('lastName').errorMessage).toBeDefined();
+    });
+
+    it('should hide untouched field errors', async () => {
+      const { result } = renderHook(() =>
+        useForm<FormData>({
+          ...commonProps,
+          hideErrors: 'untouched'
+        })
+      );
+
+      render(
+        <form onSubmit={result.current.handleSubmit}>
+          <Input label='First Name' {...result.current.getFieldProps('firstName')} />
+          <Input label='Last Name' {...result.current.getFieldProps('lastName')} />
+          <button type='submit'>Submit</button>
+        </form>
+      );
+
+      userEvent.type(screen.getByRole('textbox', { name: /first name/i }), 't');
+
+      await waitFor(() => {
+        expect(result.current.values.firstName).toBe('t');
+      });
+
+      userEvent.click(screen.getByRole('button', { name: /submit/i }));
+
+      await waitFor(() => {
+        expect(result.current.errors.firstName).not.toBeDefined();
+        expect(result.current.errors.lastName).toBeDefined();
+      });
+
+      expect(result.current.getFieldProps('firstName').errorMessage).not.toBeDefined();
+      expect(result.current.getFieldProps('lastName').errorMessage).not.toBeDefined();
+    });
+
+    it('should hide specified untouched field errors', async () => {
+      const { result } = renderHook(() =>
+        useForm<FormData>({
+          ...commonProps,
+          hideErrors: {
+            lastName: 'untouched'
+          }
+        })
+      );
+
+      render(
+        <form onSubmit={result.current.handleSubmit}>
+          <Input label='First Name' {...result.current.getFieldProps('firstName')} />
+          <Input label='Last Name' {...result.current.getFieldProps('lastName')} />
+          <button type='submit'>Submit</button>
+        </form>
+      );
+
+      userEvent.type(screen.getByRole('textbox', { name: /first name/i }), 't');
+
+      await waitFor(() => {
+        expect(result.current.values.firstName).toBe('t');
+      });
+
+      userEvent.click(screen.getByRole('button', { name: /submit/i }));
+
+      await waitFor(() => {
+        expect(result.current.errors.firstName).not.toBeDefined();
+        expect(result.current.errors.lastName).toBeDefined();
+      });
+
+      expect(result.current.getFieldProps('firstName').errorMessage).not.toBeDefined();
+      expect(result.current.getFieldProps('lastName').errorMessage).not.toBeDefined();
+    });
+  });
+
+  describe('TokenInput', () => {
+    const commonProps = { initialValues: { amount: '' }, onSubmit: handleSubmit };
+
+    it('should set field value', async () => {
+      const { result } = renderHook(() => useForm<{ amount: string }>(commonProps));
+
+      const props = result.current.getTokenFieldProps('amount');
+
+      render(
+        <form onSubmit={result.current.handleSubmit}>
+          <TokenInput label='Amount' {...props} />
+          <button type='submit'>Submit</button>
+        </form>
+      );
+
+      expect((props as any).onChange).toBeUndefined();
+
+      userEvent.type(screen.getByRole('textbox', { name: /amount/i }), '1');
+
+      await waitFor(() => {
+        expect(result.current.values.amount).toBe('1');
+      });
+    });
+  });
+
+  describe('Select', () => {
+    type SelectFormData = {
+      token: string;
+    };
+
+    const commonProps = { initialValues: { token: '' }, onSubmit: handleSubmit };
+
+    it('should persist untouched until focus is out of component', async () => {
+      const { result } = renderHook(() =>
+        useForm<SelectFormData>({
+          ...commonProps
+        })
+      );
+
+      render(
+        <InterlayUIProvider>
+          <form onSubmit={result.current.handleSubmit}>
+            <Select<'modal', any>
+              label='Token'
+              modalTitle='Select Token'
+              type='modal'
+              {...result.current.getSelectFieldProps('token')}
+            >
+              <Item key='BTC' textValue='BTC'>
+                BTC
+              </Item>
+              <Item key='ETH' textValue='ETH'>
+                ETH
+              </Item>
+              <Item key='USDT' textValue='USDT'>
+                USDT
+              </Item>
+            </Select>
+            <button type='submit'>Submit</button>
+          </form>
+        </InterlayUIProvider>
+      );
+
+      userEvent.click(screen.getByRole('button', { name: /token/i }));
+
+      await waitFor(() => {
+        expect(screen.getByRole('dialog', { name: /select token/i })).toBeInTheDocument();
+      });
+
+      expect(result.current.touched.token).toBeFalsy();
+
+      const dialog = within(screen.getByRole('dialog', { name: /select token/i }));
+
+      userEvent.click(dialog.getByRole('button', { name: /dismiss/i }));
+
+      await waitForElementToBeRemoved(screen.queryByRole('dialog', { name: /select token/i }));
+
+      expect(result.current.touched.token).toBeFalsy();
+
+      userEvent.click(screen.getByRole('button', { name: /submit/i }));
+
+      await waitFor(() => {
+        expect(result.current.touched.token).toBeTruthy();
+      });
+    });
+
+    it('should set field value', async () => {
+      const { result } = renderHook(() =>
+        useForm<SelectFormData>({
+          ...commonProps
+        })
+      );
+
+      const props = result.current.getSelectFieldProps('token');
+
+      expect((props as any).onChange).toBeUndefined();
+
+      props.onSelectionChange?.('BTC');
+
+      await waitFor(() => {
+        expect(result.current.values.token).toBe('BTC');
+      });
+    });
+  });
+
+  describe('onComplete', () => {
+    const handleComplete = jest.fn();
+
+    const validate = (values: FormData) => {
+      const errors: any = {};
+
+      if (!values.firstName) {
+        errors.firstName = 'Required';
+      }
+
+      return errors;
+    };
+
+    const commonProps = {
+      initialValues: { firstName: '', lastName: '' },
+      validate,
+      onSubmit: handleSubmit,
+      onComplete: handleComplete
+    };
+
+    beforeEach(() => {
+      handleComplete.mockClear();
+    });
+
+    it('should emit event', async () => {
+      const { result } = renderHook(() => useForm<FormData>(commonProps));
+
+      render(
+        <form onSubmit={result.current.handleSubmit}>
+          <Input label='First Name' {...result.current.getFieldProps('firstName')} />
+          <Input label='Last Name' {...result.current.getFieldProps('lastName')} />
+          <button type='submit'>Submit</button>
+        </form>
+      );
+
+      userEvent.type(screen.getByRole('textbox', { name: /first name/i }), 'j');
+
+      await waitFor(() => {
+        expect(result.current.dirty).toBeTruthy();
+        expect(result.current.isValid).toBeTruthy();
+
+        expect(handleComplete).toHaveBeenCalledTimes(1);
+        expect(handleComplete).toHaveBeenCalledWith({ firstName: 'j', lastName: '' });
+      });
+    });
+
+    it('should not emit event', async () => {
+      const { result } = renderHook(() => useForm<FormData>(commonProps));
+
+      render(
+        <form onSubmit={result.current.handleSubmit}>
+          <Input label='First Name' {...result.current.getFieldProps('firstName')} />
+          <Input label='Last Name' {...result.current.getFieldProps('lastName')} />
+          <button type='submit'>Submit</button>
+        </form>
+      );
+
+      userEvent.type(screen.getByRole('textbox', { name: /last name/i }), 'j');
+
+      await waitFor(() => {
+        expect(result.current.dirty).toBeTruthy();
+        expect(result.current.isValid).not.toBeTruthy();
+
+        expect(handleComplete).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/packages/hooks/src/use-form/index.tsx b/packages/hooks/src/use-form/index.tsx
new file mode 100644
index 000000000..db744b075
--- /dev/null
+++ b/packages/hooks/src/use-form/index.tsx
@@ -0,0 +1,2 @@
+export { useForm } from './use-form';
+export type { FormErrors } from './use-form';
diff --git a/packages/hooks/src/use-form/use-form.tsx b/packages/hooks/src/use-form/use-form.tsx
new file mode 100644
index 000000000..b34d6ded8
--- /dev/null
+++ b/packages/hooks/src/use-form/use-form.tsx
@@ -0,0 +1,161 @@
+import { FieldInputProps, FormikConfig, FormikErrors as FormErrors, FormikValues, useFormik } from 'formik';
+import { FocusEvent, Key, useCallback } from 'react';
+import { useDebounce } from 'react-use';
+
+const shouldEmitBlur = (relatedTargetEl?: HTMLElement, targetEl?: HTMLElement) => {
+  if (!relatedTargetEl || !targetEl) {
+    return true;
+  }
+
+  const isModal = relatedTargetEl.getAttribute('role') === 'dialog';
+
+  if (!isModal) {
+    return true;
+  }
+
+  const modalId = relatedTargetEl.getAttribute('id');
+  const buttonAriaControls = targetEl.getAttribute('aria-controls');
+
+  if (!modalId || !buttonAriaControls || buttonAriaControls !== modalId) {
+    return true;
+  }
+
+  return false;
+};
+
+const getFieldName = (nameOrOptions: any) => {
+  const isOptions = nameOrOptions !== null && typeof nameOrOptions === 'object';
+
+  return isOptions ? nameOrOptions.name : nameOrOptions;
+};
+
+type GetFieldProps = (nameOrOptions: any) => FieldInputProps<any> & {
+  errorMessage?: string | string[];
+};
+
+type GetTokenFieldProps = (
+  nameOrOptions: any
+) => Omit<ReturnType<GetFieldProps>, 'onChange'> & { onValueChange?: (value?: string | number) => void };
+
+type GetSelectFieldProps = (
+  nameOrOptions: any
+) => Omit<ReturnType<GetFieldProps>, 'onChange'> & { onSelectionChange?: (key: Key) => void };
+
+type HideErrors = boolean | 'untouched';
+
+type UseFormArgs<Values extends FormikValues = FormikValues> = FormikConfig<Values> & {
+  hideErrors?: HideErrors | Record<keyof FormikValues, HideErrors>;
+  onComplete?: (form: Values) => void;
+};
+
+const useForm = <Values extends FormikValues = FormikValues>({
+  hideErrors,
+  onComplete,
+  ...args
+}: UseFormArgs<Values>) => {
+  const {
+    validateForm,
+    values,
+    getFieldProps: getFormikFieldProps,
+    setFieldTouched,
+    setFieldValue,
+    ...formik
+  } = useFormik<Values>(args);
+
+  // emits onComplete event based on debounced values, only if form is modified and valid
+  // meaning that it will only check for completeness in 250ms interval of no changes to the values
+  useDebounce(
+    () => {
+      if (!formik.isValid || !formik.dirty) return;
+
+      onComplete?.(values);
+    },
+    250,
+    // do not run debounce if onComplete is not passed
+    onComplete ? [values] : []
+  );
+
+  const getFieldProps: GetFieldProps = useCallback(
+    (nameOrOptions: any) => {
+      const fieldProps = getFormikFieldProps(nameOrOptions);
+      const fieldName = getFieldName(nameOrOptions);
+
+      const hideErrorMessage = typeof hideErrors === 'object' ? hideErrors[fieldName] : hideErrors;
+      const shouldHideUntouchedErrors = hideErrorMessage === 'untouched';
+
+      if (!hideErrorMessage || shouldHideUntouchedErrors) {
+        const isTouched = formik.touched[fieldName];
+
+        const errorMessage = shouldHideUntouchedErrors
+          ? isTouched
+            ? formik.errors[fieldName]
+            : undefined
+          : formik.errors[fieldName];
+
+        return {
+          ...fieldProps,
+          errorMessage: errorMessage as string | string[] | undefined
+        };
+      }
+
+      return fieldProps;
+    },
+    [getFormikFieldProps, hideErrors, formik.touched, formik.errors]
+  );
+
+  const getTokenFieldProps: GetTokenFieldProps = useCallback(
+    (nameOrOptions: any) => {
+      const props = getFieldProps(nameOrOptions);
+      const fieldName = getFieldName(nameOrOptions);
+
+      return {
+        ...props,
+        onValueChange: (value) => setFieldValue(fieldName, value, true),
+        onChange: undefined
+      };
+    },
+    [getFieldProps, setFieldValue]
+  );
+
+  const getSelectFieldProps: GetSelectFieldProps = useCallback(
+    (nameOrOptions: any) => {
+      const { onBlur, ...props } = getFieldProps(nameOrOptions);
+      const fieldName = getFieldName(nameOrOptions);
+
+      return {
+        ...props,
+        onSelectionChange: (key: Key) => {
+          setFieldValue(fieldName, key, true);
+        },
+        // enforce the omission of onBlur to avoid setting field as touched
+        // when the focus was set temporarly into the related select modal
+        onBlur: (e: FocusEvent<HTMLElement>) => {
+          const relatedTargetEl = e.relatedTarget as HTMLElement;
+          const targetEl = e.target as HTMLElement;
+
+          const emitBlur = shouldEmitBlur(relatedTargetEl, targetEl);
+
+          if (emitBlur) {
+            onBlur(e);
+          }
+        },
+        onChange: undefined
+      };
+    },
+    [getFieldProps, setFieldValue]
+  );
+
+  return {
+    values,
+    validateForm,
+    getFieldProps,
+    getSelectFieldProps,
+    setFieldTouched,
+    setFieldValue,
+    getTokenFieldProps,
+    ...formik
+  };
+};
+
+export { useForm };
+export type { FormErrors };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3be484704..3aceca439 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -55,20 +55,17 @@ importers:
         specifier: ^0.2.29
         version: 0.2.29(@swc/core@1.3.85)
       '@testing-library/dom':
-        specifier: ^8.1.0
-        version: 8.20.1
+        specifier: ^9.3.3
+        version: 9.3.3
       '@testing-library/jest-dom':
-        specifier: ^5.16.4
-        version: 5.17.0
+        specifier: ^6.1.3
+        version: 6.1.3(@types/jest@29.5.4)(jest@29.7.0)
       '@testing-library/react':
         specifier: ^14.0.0
         version: 14.0.0(react-dom@18.2.0)(react@18.2.0)
-      '@testing-library/react-hooks':
-        specifier: ^8.0.1
-        version: 8.0.1(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
       '@testing-library/user-event':
-        specifier: ^14.4.3
-        version: 14.5.0(@testing-library/dom@8.20.1)
+        specifier: ^14.5.1
+        version: 14.5.1(@testing-library/dom@9.3.3)
       '@types/jest':
         specifier: ^29.5.4
         version: 29.5.4
@@ -167,7 +164,7 @@ importers:
         version: 7.2.0(@swc/core@1.3.85)(ts-node@10.9.1)(typescript@5.2.2)
       turbo:
         specifier: latest
-        version: 1.10.13
+        version: 1.10.14
       typescript:
         specifier: '>=3.0.0'
         version: 5.2.2
@@ -362,6 +359,15 @@ importers:
       '@interlay/theme':
         specifier: workspace:*
         version: link:../core/theme
+      '@react-aria/utils':
+        specifier: ^3.19.0
+        version: 3.20.0(react@18.2.0)
+      formik:
+        specifier: ^2.4.5
+        version: 2.4.5(react@18.2.0)
+      react-use:
+        specifier: ^17.4.0
+        version: 17.4.0(react-dom@18.2.0)(react@18.2.0)
     devDependencies:
       clean-package:
         specifier: ^2.2.0
@@ -418,7 +424,7 @@ importers:
         version: 14.0.0(react-dom@18.2.0)(react@18.2.0)
       '@testing-library/user-event':
         specifier: ^14.4.3
-        version: 14.5.0(@testing-library/dom@8.20.1)
+        version: 14.5.0(@testing-library/dom@9.3.3)
       '@types/jest-axe':
         specifier: ^3.5.5
         version: 3.5.5
@@ -5524,9 +5530,9 @@ packages:
   /@swc/types@0.1.4:
     resolution: {integrity: sha512-z/G02d+59gyyUb7KYhKi9jOhicek6QD2oMaotUyG+lUkybpXoV49dY9bj7Ah5Q+y7knK2jU67UTX9FyfGzaxQg==}
 
-  /@testing-library/dom@8.20.1:
-    resolution: {integrity: sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==}
-    engines: {node: '>=12'}
+  /@testing-library/dom@9.3.1:
+    resolution: {integrity: sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==}
+    engines: {node: '>=14'}
     dependencies:
       '@babel/code-frame': 7.22.13
       '@babel/runtime': 7.22.15
@@ -5537,8 +5543,8 @@ packages:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  /@testing-library/dom@9.3.1:
-    resolution: {integrity: sha512-0DGPd9AR3+iDTjGoMpxIkAsUihHZ3Ai6CneU6bRRrffXMgzCdlNk43jTrD2/5LT6CBb3MWTP8v510JzYtahD2w==}
+  /@testing-library/dom@9.3.3:
+    resolution: {integrity: sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==}
     engines: {node: '>=14'}
     dependencies:
       '@babel/code-frame': 7.22.13
@@ -5550,21 +5556,6 @@ packages:
       lz-string: 1.5.0
       pretty-format: 27.5.1
 
-  /@testing-library/jest-dom@5.17.0:
-    resolution: {integrity: sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==}
-    engines: {node: '>=8', npm: '>=6', yarn: '>=1'}
-    dependencies:
-      '@adobe/css-tools': 4.3.1
-      '@babel/runtime': 7.22.15
-      '@types/testing-library__jest-dom': 5.14.9
-      aria-query: 5.3.0
-      chalk: 3.0.0
-      css.escape: 1.5.1
-      dom-accessibility-api: 0.5.16
-      lodash: 4.17.21
-      redent: 3.0.0
-    dev: true
-
   /@testing-library/jest-dom@6.1.3(@types/jest@29.5.4)(jest@29.7.0):
     resolution: {integrity: sha512-YzpjRHoCBWPzpPNtg6gnhasqtE/5O4qz8WCwDEaxtfnPO6gkaLrnuXusrGSPyhIGPezr1HM7ZH0CFaUTY9PJEQ==}
     engines: {node: '>=14', npm: '>=6', yarn: '>=1'}
@@ -5593,30 +5584,6 @@ packages:
       jest: 29.7.0(@types/node@20.4.7)(ts-node@10.9.1)
       lodash: 4.17.21
       redent: 3.0.0
-    dev: false
-
-  /@testing-library/react-hooks@8.0.1(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-Aqhl2IVmLt8IovEVarNDFuJDVWVvhnr9/GCU6UUnrYXwgDFF9h2L2o2P9KBni1AST5sT6riAyoukFLyjQUgD/g==}
-    engines: {node: '>=12'}
-    peerDependencies:
-      '@types/react': ^16.9.0 || ^17.0.0
-      react: ^18.2.0
-      react-dom: ^18.2.0
-      react-test-renderer: ^16.9.0 || ^17.0.0
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      react-dom:
-        optional: true
-      react-test-renderer:
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.22.15
-      '@types/react': 18.2.21
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      react-error-boundary: 3.1.4(react@18.2.0)
-    dev: true
 
   /@testing-library/react@14.0.0(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-S04gSNJbYE30TlIMLTzv6QCTzt9AqIF5y6s6SzVFILNcNvbV/jU96GeiTPillGQo+Ny64M/5PV7klNYYgv5Dfg==}
@@ -5631,13 +5598,23 @@ packages:
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
 
-  /@testing-library/user-event@14.5.0(@testing-library/dom@8.20.1):
+  /@testing-library/user-event@14.5.0(@testing-library/dom@9.3.3):
     resolution: {integrity: sha512-nQRCteEZvULJJrlcGQuNhwGekz25TOUILA+sTWI9PB/vNKKivS+7K7XRTwoikw/2fmJPaM4pPKy+hLWEGg9+JA==}
     engines: {node: '>=12', npm: '>=6'}
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
     dependencies:
-      '@testing-library/dom': 8.20.1
+      '@testing-library/dom': 9.3.3
+    dev: false
+
+  /@testing-library/user-event@14.5.1(@testing-library/dom@9.3.3):
+    resolution: {integrity: sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==}
+    engines: {node: '>=12', npm: '>=6'}
+    peerDependencies:
+      '@testing-library/dom': '>=7.21.4'
+    dependencies:
+      '@testing-library/dom': 9.3.3
+    dev: true
 
   /@tootallnate/once@2.0.0:
     resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
@@ -5770,7 +5747,6 @@ packages:
     dependencies:
       '@types/react': 18.2.21
       hoist-non-react-statics: 3.3.2
-    dev: true
 
   /@types/http-errors@2.0.1:
     resolution: {integrity: sha512-/K3ds8TRAfBvi5vfjuz8y6+GiAYBZ0x4tXv1Av6CWBWn0IlADc+ZX9pMq7oU0fNQPnBwIZl3rmeLp6SBApbxSQ==}
@@ -5808,6 +5784,10 @@ packages:
       expect: 29.7.0
       pretty-format: 29.7.0
 
+  /@types/js-cookie@2.2.7:
+    resolution: {integrity: sha512-aLkWa0C0vO5b4Sr798E26QgOkss68Un0bLjs7u9qxzPT5CG+8DuNTffWES58YzJs3hrVAOs1wonycqEBqNJubA==}
+    dev: false
+
   /@types/jsdom@20.0.1:
     resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
     dependencies:
@@ -5950,12 +5930,6 @@ packages:
   /@types/stylis@4.2.0:
     resolution: {integrity: sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==}
 
-  /@types/testing-library__jest-dom@5.14.9:
-    resolution: {integrity: sha512-FSYhIjFlfOpGSRyVoMBMuS3ws5ehFQODymf3vlI7U1K8c7PHwWwFY7VREfmsuzHSOnoKs/9/Y983ayOs7eRzqw==}
-    dependencies:
-      '@types/jest': 29.5.4
-    dev: true
-
   /@types/tough-cookie@4.0.3:
     resolution: {integrity: sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==}
     dev: true
@@ -6268,6 +6242,10 @@ packages:
       - supports-color
     dev: true
 
+  /@xobotyi/scrollbar-width@1.9.5:
+    resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==}
+    dev: false
+
   /@yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15(esbuild@0.18.20):
     resolution: {integrity: sha512-kYzDJO5CA9sy+on/s2aIW0411AklfCi8Ck/4QDivOqsMKpStZA2SsR+X27VTggGwpStWaLrjJcDcdDMowtG8MA==}
     engines: {node: '>=14.15.0'}
@@ -7350,6 +7328,12 @@ packages:
     engines: {node: '>= 0.6'}
     dev: true
 
+  /copy-to-clipboard@3.3.3:
+    resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==}
+    dependencies:
+      toggle-selection: 1.0.6
+    dev: false
+
   /core-js-compat@3.32.2:
     resolution: {integrity: sha512-+GjlguTDINOijtVRUxrQOv3kfu9rl+qPNdX2LTbJ/ZyVTuxK+ksVSAGX1nHstu4hrv1En/uPTtWgq2gI5wt4AQ==}
     dependencies:
@@ -7447,6 +7431,12 @@ packages:
     resolution: {integrity: sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==}
     engines: {node: '>=4'}
 
+  /css-in-js-utils@3.1.0:
+    resolution: {integrity: sha512-fJAcud6B3rRu+KHYk+Bwf+WFL2MDCJJ1XG9x137tJQ0xYxor7XziQtuGFbWNdqrvF4Tk26O3H73nfVqXt/fW1A==}
+    dependencies:
+      hyphenate-style-name: 1.0.4
+    dev: false
+
   /css-to-react-native@3.2.0:
     resolution: {integrity: sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==}
     dependencies:
@@ -7454,6 +7444,14 @@ packages:
       css-color-keywords: 1.0.0
       postcss-value-parser: 4.2.0
 
+  /css-tree@1.1.3:
+    resolution: {integrity: sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      mdn-data: 2.0.14
+      source-map: 0.6.1
+    dev: false
+
   /css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -7603,6 +7601,11 @@ packages:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
     dev: true
 
+  /deepmerge@2.2.1:
+    resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -7873,6 +7876,12 @@ packages:
     dependencies:
       is-arrayish: 0.2.1
 
+  /error-stack-parser@2.1.4:
+    resolution: {integrity: sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ==}
+    dependencies:
+      stackframe: 1.3.4
+    dev: false
+
   /es-abstract@1.22.2:
     resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==}
     engines: {node: '>= 0.4'}
@@ -8719,7 +8728,6 @@ packages:
 
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
-    dev: true
 
   /fast-diff@1.3.0:
     resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==}
@@ -8743,6 +8751,18 @@ packages:
     resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==}
     dev: true
 
+  /fast-loops@1.1.3:
+    resolution: {integrity: sha512-8EZzEP0eKkEEVX+drtd9mtuQ+/QrlfW/5MlwcwK5Nds6EkZ/tRzEexkzUY2mIssnAyVLT+TKHuRXmFNNXYUd6g==}
+    dev: false
+
+  /fast-shallow-equal@1.0.0:
+    resolution: {integrity: sha512-HPtaa38cPgWvaCFmRNhlc6NG7pv6NUHqjPgVAkWGoB9mQMwYB27/K0CvOM5Czy+qpT3e8XJ6Q4aPAnzpNpzNaw==}
+    dev: false
+
+  /fastest-stable-stringify@2.0.2:
+    resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==}
+    dev: false
+
   /fastq@1.15.0:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
@@ -8900,6 +8920,22 @@ packages:
       mime-types: 2.1.35
     dev: true
 
+  /formik@2.4.5(react@18.2.0):
+    resolution: {integrity: sha512-Gxlht0TD3vVdzMDHwkiNZqJ7Mvg77xQNfmBRrNtvzcHZs72TJppSTDKHpImCMJZwcWPBJ8jSQQ95GJzXFf1nAQ==}
+    peerDependencies:
+      react: ^18.2.0
+    dependencies:
+      '@types/hoist-non-react-statics': 3.3.1
+      deepmerge: 2.2.1
+      hoist-non-react-statics: 3.3.2
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      react: 18.2.0
+      react-fast-compare: 2.0.4
+      tiny-warning: 1.0.3
+      tslib: 2.6.2
+    dev: false
+
   /forwarded@0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
     engines: {node: '>= 0.6'}
@@ -9238,7 +9274,6 @@ packages:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
     dependencies:
       react-is: 16.13.1
-    dev: true
 
   /hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
@@ -9327,6 +9362,10 @@ packages:
     hasBin: true
     dev: true
 
+  /hyphenate-style-name@1.0.4:
+    resolution: {integrity: sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==}
+    dev: false
+
   /iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -9387,6 +9426,13 @@ packages:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
     dev: true
 
+  /inline-style-prefixer@6.0.4:
+    resolution: {integrity: sha512-FwXmZC2zbeeS7NzGjJ6pAiqRhXR0ugUShSNb6GApMl6da0/XGc4MOJsoWAywia52EEWbXNSy0pzkwz/+Y+swSg==}
+    dependencies:
+      css-in-js-utils: 3.1.0
+      fast-loops: 1.1.3
+    dev: false
+
   /internal-slot@1.0.5:
     resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==}
     engines: {node: '>= 0.4'}
@@ -9583,6 +9629,7 @@ packages:
   /is-number@7.0.0:
     resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
     engines: {node: '>=0.12.0'}
+    requiresBuild: true
 
   /is-obj@2.0.0:
     resolution: {integrity: sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==}
@@ -10303,6 +10350,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /js-cookie@2.2.1:
+    resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -10596,6 +10647,10 @@ packages:
       p-locate: 5.0.0
     dev: true
 
+  /lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.camelcase@4.3.0:
     resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
     dev: true
@@ -10772,6 +10827,10 @@ packages:
     resolution: {integrity: sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==}
     dev: true
 
+  /mdn-data@2.0.14:
+    resolution: {integrity: sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==}
+    dev: false
+
   /media-typer@0.3.0:
     resolution: {integrity: sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==}
     engines: {node: '>= 0.6'}
@@ -10985,6 +11044,24 @@ packages:
       thenify-all: 1.6.0
     dev: true
 
+  /nano-css@5.3.5(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-vSB9X12bbNu4ALBu7nigJgRViZ6ja3OU7CeuiV1zMIbXOdmkLahgtPmh3GBOlDxbKY0CitqlPdOReGlBLSp+yg==}
+    peerDependencies:
+      react: ^18.2.0
+      react-dom: ^18.2.0
+    dependencies:
+      css-tree: 1.1.3
+      csstype: 3.1.2
+      fastest-stable-stringify: 2.0.2
+      inline-style-prefixer: 6.0.4
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      rtl-css-js: 1.16.1
+      sourcemap-codec: 1.4.8
+      stacktrace-js: 2.0.2
+      stylis: 4.3.0
+    dev: false
+
   /nanoid@3.3.6:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -11718,15 +11795,9 @@ packages:
       react-is: 18.1.0
     dev: true
 
-  /react-error-boundary@3.1.4(react@18.2.0):
-    resolution: {integrity: sha512-uM9uPzZJTF6wRQORmSrvOIgt4lJ9MC1sNgEOj2XGsDTRE4kmpWxg7ENK9EWNKJRMAOY9z0MuF4yIfl6gp4sotA==}
-    engines: {node: '>=10', npm: '>=6'}
-    peerDependencies:
-      react: ^18.2.0
-    dependencies:
-      '@babel/runtime': 7.22.15
-      react: 18.2.0
-    dev: true
+  /react-fast-compare@2.0.4:
+    resolution: {integrity: sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==}
+    dev: false
 
   /react-inspector@6.0.2(react@18.2.0):
     resolution: {integrity: sha512-x+b7LxhmHXjHoU/VrFAzw5iutsILRoYyDq97EDYdFpPLcvqtEzk4ZSZSQjnFPbr5T57tLXnHcqFYoN1pI6u8uQ==}
@@ -11820,6 +11891,40 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /react-universal-interface@0.6.2(react@18.2.0)(tslib@2.6.2):
+    resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==}
+    peerDependencies:
+      react: ^18.2.0
+      tslib: '*'
+    dependencies:
+      react: 18.2.0
+      tslib: 2.6.2
+    dev: false
+
+  /react-use@17.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-TgbNTCA33Wl7xzIJegn1HndB4qTS9u03QUwyNycUnXaweZkE4Kq2SB+Yoxx8qbshkZGYBDvUXbXWRUmQDcZZ/Q==}
+    peerDependencies:
+      react: ^18.2.0
+      react-dom: ^18.2.0
+    dependencies:
+      '@types/js-cookie': 2.2.7
+      '@xobotyi/scrollbar-width': 1.9.5
+      copy-to-clipboard: 3.3.3
+      fast-deep-equal: 3.1.3
+      fast-shallow-equal: 1.0.0
+      js-cookie: 2.2.1
+      nano-css: 5.3.5(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-universal-interface: 0.6.2(react@18.2.0)(tslib@2.6.2)
+      resize-observer-polyfill: 1.5.1
+      screenfull: 5.2.0
+      set-harmonic-interval: 1.0.1
+      throttle-debounce: 3.0.1
+      ts-easing: 0.2.0
+      tslib: 2.6.2
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -11999,6 +12104,10 @@ packages:
     resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
     dev: true
 
+  /resize-observer-polyfill@1.5.1:
+    resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==}
+    dev: false
+
   /resolve-cwd@3.0.0:
     resolution: {integrity: sha512-OrZaX2Mb+rJCpH/6CpSqt9xFVpN++x01XnN2ie9g6P5/3xelLAkXWVADpdz1IHD/KFfEXyE6V0U01OQ3UO2rEg==}
     engines: {node: '>=8'}
@@ -12104,6 +12213,12 @@ packages:
       fsevents: 2.3.3
     dev: true
 
+  /rtl-css-js@1.16.1:
+    resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==}
+    dependencies:
+      '@babel/runtime': 7.22.15
+    dev: false
+
   /run-applescript@5.0.0:
     resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
     engines: {node: '>=12'}
@@ -12163,6 +12278,11 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
+  /screenfull@5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -12234,6 +12354,11 @@ packages:
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.0
 
+  /set-harmonic-interval@1.0.1:
+    resolution: {integrity: sha512-AhICkFV84tBP1aWqPwLZqFvAwqEoVA9kxNMniGEUvzOlm4vLmOFLiTT3UZ6bziJTy4bOVpzWGTfSCbmaayGx8g==}
+    engines: {node: '>=6.9'}
+    dev: false
+
   /setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
     dev: true
@@ -12346,6 +12471,11 @@ packages:
       source-map: 0.6.1
     dev: true
 
+  /source-map@0.5.6:
+    resolution: {integrity: sha512-MjZkVp0NHr5+TPihLcadqnlVoGIoWo4IBHptutGh9wI3ttUYvCG26HkSuDi+K6lsZ25syXJXcctwgyVCt//xqA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
     engines: {node: '>=0.10.0'}
@@ -12357,6 +12487,11 @@ packages:
       whatwg-url: 7.1.0
     dev: true
 
+  /sourcemap-codec@1.4.8:
+    resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==}
+    deprecated: Please use @jridgewell/sourcemap-codec instead
+    dev: false
+
   /space-separated-tokens@1.1.5:
     resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==}
     dev: true
@@ -12399,12 +12534,37 @@ packages:
   /sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  /stack-generator@2.0.10:
+    resolution: {integrity: sha512-mwnua/hkqM6pF4k8SnmZ2zfETsRUpWXREfA/goT8SLCV4iOFa4bzOX2nDipWAZFPTjLvQB82f5yaodMVhK0yJQ==}
+    dependencies:
+      stackframe: 1.3.4
+    dev: false
+
   /stack-utils@2.0.6:
     resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
     engines: {node: '>=10'}
     dependencies:
       escape-string-regexp: 2.0.0
 
+  /stackframe@1.3.4:
+    resolution: {integrity: sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw==}
+    dev: false
+
+  /stacktrace-gps@3.1.2:
+    resolution: {integrity: sha512-GcUgbO4Jsqqg6RxfyTHFiPxdPqF+3LFmQhm7MgCuYQOYuWyqxo5pwRPz5d/u6/WYJdEnWfK4r+jGbyD8TSggXQ==}
+    dependencies:
+      source-map: 0.5.6
+      stackframe: 1.3.4
+    dev: false
+
+  /stacktrace-js@2.0.2:
+    resolution: {integrity: sha512-Je5vBeY4S1r/RnLydLl0TBTi3F2qdfWmYsGvtfZgEI+SCprPppaIhQf5nGcal4gI4cGpCV/duLcAzT1np6sQqg==}
+    dependencies:
+      error-stack-parser: 2.1.4
+      stack-generator: 2.0.10
+      stacktrace-gps: 3.1.2
+    dev: false
+
   /statuses@2.0.1:
     resolution: {integrity: sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==}
     engines: {node: '>= 0.8'}
@@ -12761,6 +12921,11 @@ packages:
       any-promise: 1.3.0
     dev: true
 
+  /throttle-debounce@3.0.1:
+    resolution: {integrity: sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==}
+    engines: {node: '>=10'}
+    dev: false
+
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
     dependencies:
@@ -12782,6 +12947,10 @@ packages:
     resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==}
     dev: true
 
+  /tiny-warning@1.0.3:
+    resolution: {integrity: sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==}
+    dev: false
+
   /titleize@3.0.0:
     resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
     engines: {node: '>=12'}
@@ -12811,6 +12980,10 @@ packages:
     resolution: {integrity: sha512-IfajhBTeg0HlMXu1f+VMbPef05QpDTsZ9X2Yn1+8npdaXsXg/+wrm9Ze1WG5OS1UDC3qJ5EQN/XOZ3gfXjPFCw==}
     dev: true
 
+  /toggle-selection@1.0.6:
+    resolution: {integrity: sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ==}
+    dev: false
+
   /toidentifier@1.0.1:
     resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==}
     engines: {node: '>=0.6'}
@@ -12867,6 +13040,10 @@ packages:
     engines: {node: '>=6.10'}
     dev: true
 
+  /ts-easing@0.2.0:
+    resolution: {integrity: sha512-Z86EW+fFFh/IFB1fqQ3/+7Zpf9t2ebOAxNI/V6Wo7r5gqiqtxmgTlQ1qbqQcjLKYeSHPTsEmvlJUDg/EuL0uHQ==}
+    dev: false
+
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
     dev: true
@@ -12979,64 +13156,64 @@ packages:
       yargs: 17.7.2
     dev: true
 
-  /turbo-darwin-64@1.10.13:
-    resolution: {integrity: sha512-vmngGfa2dlYvX7UFVncsNDMuT4X2KPyPJ2Jj+xvf5nvQnZR/3IeDEGleGVuMi/hRzdinoxwXqgk9flEmAYp0Xw==}
+  /turbo-darwin-64@1.10.14:
+    resolution: {integrity: sha512-I8RtFk1b9UILAExPdG/XRgGQz95nmXPE7OiGb6ytjtNIR5/UZBS/xVX/7HYpCdmfriKdVwBKhalCoV4oDvAGEg==}
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-darwin-arm64@1.10.13:
-    resolution: {integrity: sha512-eMoJC+k7gIS4i2qL6rKmrIQGP6Wr9nN4odzzgHFngLTMimok2cGLK3qbJs5O5F/XAtEeRAmuxeRnzQwTl/iuAw==}
+  /turbo-darwin-arm64@1.10.14:
+    resolution: {integrity: sha512-KAdUWryJi/XX7OD0alOuOa0aJ5TLyd4DNIYkHPHYcM6/d7YAovYvxRNwmx9iv6Vx6IkzTnLeTiUB8zy69QkG9Q==}
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-64@1.10.13:
-    resolution: {integrity: sha512-0CyYmnKTs6kcx7+JRH3nPEqCnzWduM0hj8GP/aodhaIkLNSAGAa+RiYZz6C7IXN+xUVh5rrWTnU2f1SkIy7Gdg==}
+  /turbo-linux-64@1.10.14:
+    resolution: {integrity: sha512-BOBzoREC2u4Vgpap/WDxM6wETVqVMRcM8OZw4hWzqCj2bqbQ6L0wxs1LCLWVrghQf93JBQtIGAdFFLyCSBXjWQ==}
     cpu: [x64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-linux-arm64@1.10.13:
-    resolution: {integrity: sha512-0iBKviSGQQlh2OjZgBsGjkPXoxvRIxrrLLbLObwJo3sOjIH0loGmVIimGS5E323soMfi/o+sidjk2wU1kFfD7Q==}
+  /turbo-linux-arm64@1.10.14:
+    resolution: {integrity: sha512-D8T6XxoTdN5D4V5qE2VZG+/lbZX/89BkAEHzXcsSUTRjrwfMepT3d2z8aT6hxv4yu8EDdooZq/2Bn/vjMI32xw==}
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-64@1.10.13:
-    resolution: {integrity: sha512-S5XySRfW2AmnTeY1IT+Jdr6Goq7mxWganVFfrmqU+qqq3Om/nr0GkcUX+KTIo9mPrN0D3p5QViBRzulwB5iuUQ==}
+  /turbo-windows-64@1.10.14:
+    resolution: {integrity: sha512-zKNS3c1w4i6432N0cexZ20r/aIhV62g69opUn82FLVs/zk3Ie0GVkSB6h0rqIvMalCp7enIR87LkPSDGz9K4UA==}
     cpu: [x64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo-windows-arm64@1.10.13:
-    resolution: {integrity: sha512-nKol6+CyiExJIuoIc3exUQPIBjP9nIq5SkMJgJuxsot2hkgGrafAg/izVDRDrRduQcXj2s8LdtxJHvvnbI8hEQ==}
+  /turbo-windows-arm64@1.10.14:
+    resolution: {integrity: sha512-rkBwrTPTxNSOUF7of8eVvvM+BkfkhA2OvpHM94if8tVsU+khrjglilp8MTVPHlyS9byfemPAmFN90oRIPB05BA==}
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
     dev: true
     optional: true
 
-  /turbo@1.10.13:
-    resolution: {integrity: sha512-vOF5IPytgQPIsgGtT0n2uGZizR2N3kKuPIn4b5p5DdeLoI0BV7uNiydT7eSzdkPRpdXNnO8UwS658VaI4+YSzQ==}
+  /turbo@1.10.14:
+    resolution: {integrity: sha512-hr9wDNYcsee+vLkCDIm8qTtwhJ6+UAMJc3nIY6+PNgUTtXcQgHxCq8BGoL7gbABvNWv76CNbK5qL4Lp9G3ZYRA==}
     hasBin: true
     optionalDependencies:
-      turbo-darwin-64: 1.10.13
-      turbo-darwin-arm64: 1.10.13
-      turbo-linux-64: 1.10.13
-      turbo-linux-arm64: 1.10.13
-      turbo-windows-64: 1.10.13
-      turbo-windows-arm64: 1.10.13
+      turbo-darwin-64: 1.10.14
+      turbo-darwin-arm64: 1.10.14
+      turbo-linux-64: 1.10.14
+      turbo-linux-arm64: 1.10.14
+      turbo-windows-64: 1.10.14
+      turbo-windows-arm64: 1.10.14
     dev: true
 
   /tween-functions@1.2.0:
diff --git a/scripts/setup-test.ts b/scripts/setup-test.ts
index 40e7ab1be..0f0f06186 100644
--- a/scripts/setup-test.ts
+++ b/scripts/setup-test.ts
@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom'
 
 const { getComputedStyle } = window;
 
diff --git a/tsconfig.json b/tsconfig.json
index 4dba2cb1f..742e93558 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,8 +15,9 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "downlevelIteration": true
+    "downlevelIteration": true,
+    "types": ["@testing-library/jest-dom"]
   },
-  "include": ["packages"],
+  "include": ["packages", "scripts/setup-test.ts"],
   "exclude": ["**/node_modules", "**/dist", "**/.turbo"]
 }