fix: tests

packages/components/package.json

@@ -38,7 +38,6 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@interlay/coin-icons": "workspace:*",
     "@interlay/hooks": "workspace:*",
     "@interlay/icons": "workspace:*",
     "@interlay/system": "workspace:*",

packages/components/src/Accordion/__tests__/Accordion.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import * as React from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Accordion, AccordionItem } from '..';
 

packages/components/src/Alert/__tests__/Alert.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Alert } from '..';
 

packages/components/src/Breadcrumbs/__tests__/Breadcrumbs.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { BreadcrumbItem, Breadcrumbs } from '..';
 

packages/components/src/Button/__tests__/CTA.test.tsx → packages/components/src/Button/__tests__/Button.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Button } from '..';
 

packages/components/src/CSSReset/__tests__/CSSReset.test.tsx

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/react';
+import { render } from '@interlay/test-utils';
 
 import { CSSReset } from '..';
 

packages/components/src/CTA/__tests__/CTA.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, testA11y } from '@interlay/test-utils';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
 
 import { CTA } from '..';
 

packages/components/src/Card/__tests__/Card.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 import { createRef } from 'react';
 
 import { Card } from '..';

packages/components/src/Dialog/__tests__/Dialog.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, testA11y } from '@interlay/test-utils';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
 
 import { Dialog, DialogBody, DialogFooter, DialogHeader } from '..';
 

packages/components/src/Divider/__tests__/Divider.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, testA11y } from '@interlay/test-utils';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
 
 import { Divider } from '..';
 

packages/components/src/Drawer/__tests__/Drawer.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, testA11y } from '@interlay/test-utils';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
 
 import { Drawer } from '..';
 

packages/components/src/Field/__tests__/Field.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, testA11y } from '@interlay/test-utils';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
 
 import { Field } from '..';
 

packages/components/src/Flex/__tests__/Flex.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Flex } from '..';
 

packages/components/src/HelperText/__tests__/HelperText.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { HelperText } from '..';
 

packages/components/src/Input/__tests__/Input.test.tsx

@@ -1,5 +1,5 @@
-import { blur, focus, testA11y } from '@interlay/test-utils';
-import { render, screen, waitFor } from '@testing-library/react';
+import { blur, focus, testA11y, render } from '@interlay/test-utils';
+import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { createRef, useState } from 'react';
 

packages/components/src/Label/__tests__/Label.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Label } from '..';
 

packages/components/src/List/__tests__/List.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { List, ListItem } from '..';
 

packages/components/src/Meter/__tests__/Meter.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Meter } from '..';
 

packages/components/src/Modal/__tests__/Modal.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Modal, ModalBody, ModalFooter, ModalHeader } from '..';
 

packages/components/src/NumberInput/__tests__/NumberInput.test.tsx

@@ -1,5 +1,5 @@
-import { blur, focus, testA11y } from '@interlay/test-utils';
-import { render, screen, waitFor } from '@testing-library/react';
+import { blur, focus, testA11y, render } from '@interlay/test-utils';
+import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { createRef, useState } from 'react';
 

packages/components/src/Overlay/__tests__/Overlay.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
-import React, { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { render, testA11y } from '@interlay/test-utils';
+import { createRef } from 'react';
 
 import { Overlay } from '..';
 

packages/components/src/Overlay/__tests__/Underlay.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { render, testA11y } from '@interlay/test-utils';
 
 import { Underlay } from '..';
 

packages/components/src/Popover/__tests__/Popover.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, testA11y } from '@interlay/test-utils';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
 
 import { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger } from '..';
 

packages/components/src/ProgressBar/__tests__/ProgressBar.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { ProgressBar } from '..';
 

packages/components/src/ProgressCircle/__tests__/ProgressCircle.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { ProgressCircle } from '..';
 

packages/components/src/Radio/__tests__/Radio.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { RadioGroup } from '../RadioGroup';
 import { Radio } from '../Radio';

packages/components/src/Select/Select.style.tsx

@@ -78,9 +78,12 @@ const StyledTriggerValue = styled(Span)<StyledTriggerValueProps>`
   font-weight: inherit;
 `;
 
-const StyledList = styled(List)`
-  overflow: auto;
-  padding: 0 12px 12px;
+const StyledList: any = styled(List)`
+  ${({ theme }) => theme.tokenInput.list.base};
+
+  > :last-child {
+    margin-bottom: ${({ theme }) => theme.spacing('lg')};
+  }
 `;
 
 const StyledChevronDown = styled(ChevronDown)`

packages/components/src/Select/__tests__/Select.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 import { createRef } from 'react';
 
 import { Select, Item } from '..';

packages/components/src/Slider/__tests__/Slider.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 import { createRef } from 'react';
 
 import { Slider } from '..';

packages/components/src/Spinner/__tests__/Spinner.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Spinner } from '..';
 

packages/components/src/Stack/__tests__/Stack.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Stack } from '..';
 

packages/components/src/Switch/__tests__/Switch.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Switch } from '..';
 

packages/components/src/Table/__tests__/Table.test.tsx

@@ -1,5 +1,5 @@
-import { testA11y } from '@interlay/test-utils';
-import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { testA11y, render } from '@interlay/test-utils';
+import { fireEvent, screen, waitFor, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { createRef } from 'react';
 

packages/components/src/Tabs/__tests__/Tabs.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Tabs, TabsItem } from '..';
 

packages/components/src/Text/__tests__/Text.test.tsx

@@ -1,5 +1,4 @@
-import { render } from '@testing-library/react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 import { createRef } from 'react';
 
 import { H1 } from '..';

packages/components/src/TextArea/__tests__/TextArea.test.tsx

@@ -1,5 +1,5 @@
-import { blur, focus, testA11y } from '@interlay/test-utils';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, blur, focus, testA11y } from '@interlay/test-utils';
+import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { createRef, useState } from 'react';
 

packages/components/src/TextLink/__tests__/TextLink.test.tsx

@@ -1,6 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { TextLink } from '..';
 

packages/components/src/TokenInput/BaseTokenInput.tsx

@@ -135,7 +135,7 @@ const BaseTokenInput = forwardRef<HTMLInputElement, BaseTokenInputProps>(
           <StyledGroupInputWrapper>
             <StyledNumberInputWrapper>
               <StyledBaseInput
-                ref={ref}
+                ref={inputRef}
                 $adornmentBottom={!!bottomAdornment}
                 $hasError={error}
                 $size={size}

packages/components/src/TokenInput/__tests__/TokenInput.test.tsx

@@ -1,5 +1,5 @@
-import { blur, testA11y } from '@interlay/test-utils';
-import { render, screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
+import { blur, testA11y, render } from '@interlay/test-utils';
+import { screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { Key, createRef, useState } from 'react';
 
@@ -26,7 +26,7 @@ describe('TokenInput', () => {
   it('should render with placeholder', () => {
     render(<TokenInput label='label' logoUrl='' ticker='BTC' />);
 
-    expect(screen.getByPlaceholderText('0')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('0.00')).toBeInTheDocument();
   });
 
   it('should render with usd value', () => {
@@ -73,13 +73,13 @@ describe('TokenInput', () => {
     it('should render', () => {
       render(<TokenInput balance={10} label='label' logoUrl='' ticker='BTC' />);
 
-      expect(screen.getByRole('definition')).toHaveTextContent('10');
+      expect(screen.getByRole('button')).toHaveTextContent('10');
     });
 
     it('should render human value', () => {
       render(<TokenInput balance={10} humanBalance={11} label='label' logoUrl='' ticker='BTC' />);
 
-      expect(screen.getByRole('definition')).toHaveTextContent('11');
+      expect(screen.getByRole('button')).toHaveTextContent('11');
     });
 
     it('should update input when applying max', async () => {
@@ -176,13 +176,13 @@ describe('TokenInput', () => {
     it('should render with ticker adornment', () => {
       render(<TokenInput label='label' logoUrl='' ticker='BTC' />);
 
-      expect(screen.getAllByText(/btc/i)).toHaveLength(2);
+      expect(screen.getByText(/btc/i)).toBeInTheDocument();
     });
 
     it('should render with unknown ticker', () => {
       render(<TokenInput label='label' logoUrl='' ticker='ABC' />);
 
-      expect(screen.getAllByText(/abc/i)).toHaveLength(2);
+      expect(screen.getByText(/abc/i)).toBeInTheDocument();
     });
   });
 

packages/components/src/TokenInput/stories/FixedTokenInput.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import * as coins from '../../../../icons/coin/src';
 import { TokenInput, TokenInputProps } from '..';
 
 export default {
@@ -10,9 +9,6 @@ export default {
   parameters: {
     layout: 'centered'
   },
-  argTypes: {
-    ticker: { control: 'select', options: Object.keys(coins) }
-  },
   args: {
     ticker: 'ETH',
     logoUrl: 'https://ethereum-optimism.github.io/data/ETH/logo.svg',

packages/components/src/TokenInput/stories/SelectableTokenInput.stories.tsx

@@ -2,7 +2,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 import { mergeProps } from '@react-aria/utils';
 
-import * as coins from '../../../../icons/coin/src';
 import { TokenInput, TokenInputProps } from '..';
 
 const items = [
@@ -22,9 +21,6 @@ export default {
   parameters: {
     layout: 'centered'
   },
-  argTypes: {
-    ticker: { control: 'select', options: Object.keys(coins) }
-  },
   args: {
     type: 'selectable',
     label: 'Amount',

packages/components/src/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, testA11y } from '@interlay/test-utils';
 import { createRef } from 'react';
-import { testA11y } from '@interlay/test-utils';
 
 import { Tooltip } from '..';