less barrels

components/src/components/atoms/DynamicPopover/DynamicPopover.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { TransitionState, useTransition } from 'react-transition-state'
 
-import { Portal } from '../Portal'
+import { Portal } from '../Portal/Portal'
 import { Box, BoxProps } from '../Box/Box'
 import { getValueForTransitionState } from './utils/getValueForTransitionState'
 import { container } from './style.css'

components/src/components/atoms/index.ts

@@ -1,13 +1,13 @@
-export { Avatar, AvatarProps } from './Avatar/Avatar'
+export { Avatar, type AvatarProps } from './Avatar/Avatar'
 export { BackdropSurface } from './BackdropSurface'
-export { Banner, BannerProps } from './Banner/Banner'
+export { Banner, type BannerProps } from './Banner/Banner'
 export { Button, type ButtonProps } from './Button/Button'
-export { Card, CardDivider, CardProps } from './Card/Card'
+export { Card, CardDivider, type CardProps } from './Card/Card'
 export { DynamicPopover } from './DynamicPopover'
 export { Field } from './Field/Field'
 export { FileInput } from './FileInput/FileInput'
 export { Heading } from './Heading'
-export { Portal, PortalProps } from './Portal/Portal'
+export { Portal, type PortalProps } from './Portal/Portal'
 export { RecordItem, type RecordItemProps } from './RecordItem/RecordItem'
 export { ScrollBox } from './ScrollBox'
 export { Skeleton } from './Skeleton/Skeleton'

components/src/components/molecules/Backdrop/Backdrop.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { TransitionState, useTransition } from 'react-transition-state'
 
-import { Portal } from '../../atoms/Portal'
+import { Portal } from '../../atoms/Portal/Portal'
 
 import { BackdropSurface } from '../../atoms/BackdropSurface'
 

components/src/components/molecules/Checkbox/Checkbox.tsx

@@ -9,7 +9,7 @@ import {
 
 import * as styles from './styles.css'
 
-import { Field } from '../..'
+import { Field } from '../../atoms/Field/Field'
 import { FieldBaseProps } from '../../atoms/Field/Field'
 import { getTestId } from '../../../utils/utils'
 import { Box, BoxProps } from '../../atoms/Box/Box'

components/src/components/molecules/CheckboxRow/CheckboxRow.tsx

@@ -8,9 +8,10 @@ import {
 } from './utils/getValueForColorStyle'
 
 import * as styles from './styles.css'
-import { CheckSVG, Typography } from '../..'
 import { useId } from '../../../hooks/useId'
 import { Box, BoxProps } from '../../atoms/Box/Box'
+import { CheckSVG } from '@/src/icons'
+import { Typography } from '../../atoms'
 
 export type CheckboxRowProps = {
   label: string

components/src/components/molecules/CountdownCircle/CountdownCircle.tsx

@@ -4,11 +4,11 @@ import { P, match } from 'ts-pattern'
 
 import { CheckSVG } from '@/src/icons'
 
-import { VisuallyHidden } from '../..'
 import { getTestId } from '../../../utils/utils'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForNumberForSize } from './utils/getValueForNumberForSize'
 import { Color, getValidatedColor } from './utils/getValidatedColor'
+import { VisuallyHidden } from '../../atoms'
 
 const NumberBox = ({
   $size,

components/src/components/molecules/Dropdown/ActionSheet.tsx

@@ -4,9 +4,10 @@ import { breakpoints } from '@/src/tokens'
 
 import { actionSheeItem } from './styles.css'
 
-import { Button, Modal, Typography } from '../..'
 import type { DropdownItem, DropdownItemObject } from './Dropdown'
 import { Box, BoxProps } from '../../atoms/Box/Box'
+import { Typography, Button } from '../../atoms'
+import { Modal } from '../Modal/Modal'
 
 const ActionSheetContent = React.forwardRef<HTMLElement, BoxProps>(
   (props, ref) => (

components/src/components/molecules/Dropdown/Dropdown.tsx

@@ -3,18 +3,19 @@ import { P, match } from 'ts-pattern'
 
 import { TransitionState } from 'react-transition-state'
 
-import { Button, ButtonProps } from '@/src/components/atoms/Button'
+import { Button, ButtonProps } from '@/src/components/atoms/Button/Button'
 import { Colors, breakpoints } from '@/src/tokens'
 
 import { commonVars, modeVars } from '@/src/css/theme.css'
 
 import { Color } from '@/src/interfaces/withColor'
 
-import { DownChevronSVG, DynamicPopover, ScrollBox } from '../..'
 import { ActionSheet } from './ActionSheet'
 import { Box, BoxProps } from '../../atoms/Box/Box'
-import { PopoverProps } from '../../atoms/DynamicPopover'
+import { DynamicPopover, PopoverProps } from '../../atoms/DynamicPopover'
 import { debounce } from '@/src/utils/debounce'
+import { DownChevronSVG } from '@/src/icons'
+import { ScrollBox } from '../../atoms/ScrollBox/ScrollBox'
 
 type Align = 'left' | 'right'
 type LabelAlign = 'flex-start' | 'flex-end' | 'center'

components/src/components/molecules/FieldSet/FieldSet.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 
 import { ReactNodeNoStrings } from '../../../types'
-import { Heading, Tag } from '../..'
-import { TagProps } from '../../atoms/Tag/Tag'
+import { Tag, TagProps } from '../../atoms/Tag/Tag'
 import { Box, BoxProps } from '../../atoms/Box/Box'
+import { Heading } from '../../atoms'
 
 const Container = (props: BoxProps) => (
   <Box

components/src/components/molecules/Input/Input.tsx

@@ -8,11 +8,11 @@ import { scale } from '@/src/css/utils/common'
 
 import * as styles from './styles.css'
 
-import { CrossCircleSVG, Field } from '../..'
-import { FieldBaseProps } from '../../atoms/Field/Field'
+import { Field, FieldBaseProps } from '../../atoms/Field/Field'
 import { Space } from '../../../tokens/index'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForSize } from './utils/getValueForSize'
+import { CrossCircleSVG } from '@/src/icons'
 
 type NativeInputProps = React.InputHTMLAttributes<HTMLInputElement>
 

components/src/components/molecules/Modal/Modal.tsx

@@ -2,9 +2,9 @@ import * as React from 'react'
 
 import type { TransitionState } from 'react-transition-state'
 
-import { Backdrop } from '../..'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForMode } from './utils/getValueForMode'
+import { Backdrop } from '../Backdrop/Backdrop'
 
 type ContainerProps = {
   $state: TransitionState['status']

components/src/components/molecules/Profile/Profile.tsx

@@ -8,11 +8,11 @@ import { removeNullishProps } from '@/src/utils/removeNullishProps'
 
 import { getTestId, shortenAddress } from '../../../utils/utils'
 
-import { Typography } from '../..'
-import { Avatar, Props as AvatarProps } from '../../atoms/Avatar'
+import { Avatar, AvatarProps } from '../../atoms/Avatar/Avatar'
 import { Dropdown, DropdownItem } from '../Dropdown/Dropdown'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForSize } from './utils/getValueForSize'
+import { Typography } from '../../atoms/Typography/Typography'
 
 export type Size = 'small' | 'medium' | 'large'
 

components/src/components/molecules/RadioButton/RadioButton.tsx

@@ -4,8 +4,7 @@ import { brightness, translateY } from '@/src/css/utils/common'
 
 import * as styles from './styles.css'
 
-import { Field } from '../..'
-import { FieldBaseProps } from '../../atoms/Field/Field'
+import { Field, FieldBaseProps } from '../../atoms/Field/Field'
 import { getTestId } from '../../../utils/utils'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { Color, getValidatedColor } from './utils/getValidatedColor'

components/src/components/molecules/RadioButtonGroup/RadioButtonGroup.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 
-import { RadioButton } from '@/src/components'
+import type { RadioButton } from '@/src/components/molecules'
 
 import { getTestId } from '../../../utils/utils'
 import { createSyntheticEvent } from '../../../utils/createSyntheticEvent'

components/src/components/molecules/Select/Select.tsx

@@ -8,7 +8,7 @@ import { useDocumentEvent } from '@/src/hooks/useDocumentEvent'
 
 import { Colors, Space } from '@/src/tokens'
 
-import { CrossCircleSVG } from '@/src/icons'
+import { CrossCircleSVG, DownChevronSVG } from '@/src/icons'
 
 import { statusDot } from '@/src/css/recipes/statusDot.css'
 
@@ -18,14 +18,13 @@ import { rotate } from '@/src/css/utils/common'
 
 import * as styles from './styles.css'
 
-import { DownChevronSVG, Field, ScrollBox } from '../..'
-
-import { FieldBaseProps, State as FieldState } from '../../atoms/Field/Field'
+import { Field, FieldBaseProps, State as FieldState } from '../../atoms/Field/Field'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForSize } from './utils/getValueForSize'
 import { getValueForTransitionState } from './utils/getValueForTransitionState'
 import { cssVars } from '@/src/css/theme.css'
 import { uniqueId } from '@/src/utils/uniqueId'
+import { ScrollBox } from '../../atoms'
 
 const CREATE_OPTION_VALUE = 'CREATE_OPTION_VALUE'
 

components/src/components/molecules/Textarea/Textarea.tsx

@@ -12,10 +12,10 @@ import { translateY } from '@/src/css/utils/common'
 
 import * as styles from './styles.css'
 
-import { CrossCircleSVG, Field } from '../..'
-import { FieldBaseProps } from '../../atoms/Field/Field'
+import { Field, FieldBaseProps } from '../../atoms/Field/Field'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForSize } from './utils/getValueForSize'
+import { CrossCircleSVG } from '@/src/icons'
 
 export type Size = TextareaProps['size']
 

components/src/components/molecules/ThemeToggle/ThemeToggle.tsx

@@ -4,9 +4,9 @@ import { useId } from '../../../hooks/useId'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import * as styles from './styles.css'
 import { Color, getValidatedColor } from './utils/getValidatedColor'
-import { MoonSVG, SunSVG } from '../..'
 import { getValueForSize } from './utils/getValueForSize'
 import { icon } from './styles.css'
+import { MoonSVG, SunSVG } from '@/src/icons'
 
 export type Size = 'extraSmall' | 'small' | 'medium'
 

components/src/components/organisms/Dialog/Dialog.tsx

@@ -9,10 +9,11 @@ import { FontSize } from '@/src/tokens/typography'
 
 import { DialogContent } from './DialogContent'
 
-import { Modal, Typography } from '../..'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { getValueForAlert } from './utils/getValueForAlert'
 import { getValueForStepType } from './utils/getValueForStepType'
+import { Typography } from '../../atoms'
+import { Modal } from '../../molecules'
 
 const CloseButton = (props: BoxProps) => (
   <Box

components/src/components/organisms/Dialog/DialogContent.tsx

@@ -5,8 +5,7 @@ import { forwardRef } from 'react'
 import { Space } from '@/src/tokens'
 
 import { space } from '@/src/tokens/space'
-
-import { Box, BoxProps, ScrollBox } from '../..'
+import { ScrollBox, BoxProps, Box } from '../../atoms'
 
 type NativeFromProps = React.FormHTMLAttributes<HTMLFormElement>
 

components/src/components/organisms/Toast/Toast.tsx

@@ -5,7 +5,9 @@ import { match } from 'ts-pattern'
 
 import { translateY } from '@/src/css/utils/common'
 
-import { Backdrop, CrossSVG, Typography } from '../..'
+import { Typography } from '../../atoms'
+import { Backdrop } from '../../molecules'
+import { CrossSVG } from '@/src/icons'
 import { getTestId } from '../../../utils/utils'
 import { Box, BoxProps } from '../../atoms/Box/Box'
 import { Space } from '@/src/tokens'

components/src/utils/removeNullishProps.ts

@@ -1,4 +1,4 @@
-import { BoxProps } from '../components'
+import { BoxProps } from '../components/atoms/Box/Box'
 
 export const removeNullishProps = (props: BoxProps): object => {
   const keys = Object.keys(props) as (keyof BoxProps)[]