refactor(imports): update circular import references

src/ActionList/Description.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Box from '../Box'
 import {SxProp, merge} from '../sx'
 import Truncate from '../Truncate'
-import {Slot, ItemContext} from './Item'
+import {Slot, ItemContext} from './shared'
 
 export type ActionListDescriptionProps = {
   /**

src/ActionList/Item.tsx

@@ -5,94 +5,13 @@ import styled from 'styled-components'
 import Box, {BoxProps} from '../Box'
 import sx, {BetterSystemStyleObject, merge, SxProp} from '../sx'
 import {useTheme} from '../ThemeProvider'
-import createSlots from '../utils/create-slots'
-import {AriaRole} from '../utils/types'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {ActionListGroupProps, GroupContext} from './Group'
 import {ActionListProps, ListContext} from './List'
 import {Selection} from './Selection'
-
-export const getVariantStyles = (
-  variant: ActionListItemProps['variant'],
-  disabled: ActionListItemProps['disabled']
-) => {
-  if (disabled) {
-    return {
-      color: 'primer.fg.disabled',
-      iconColor: 'primer.fg.disabled',
-      annotationColor: 'primer.fg.disabled'
-    }
-  }
-
-  switch (variant) {
-    case 'danger':
-      return {
-        color: 'danger.fg',
-        iconColor: 'danger.fg',
-        annotationColor: 'fg.muted',
-        hoverColor: 'actionListItem.danger.hoverText'
-      }
-    default:
-      return {
-        color: 'fg.default',
-        iconColor: 'fg.muted',
-        annotationColor: 'fg.muted',
-        hoverColor: 'fg.default'
-      }
-  }
-}
-
-export type ActionListItemProps = {
-  /**
-   * Primary content for an Item
-   */
-  children?: React.ReactNode
-  /**
-   * Callback that will trigger both on click selection and keyboard selection.
-   */
-  onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
-  /**
-   * Is the `Item` is currently selected?
-   */
-  selected?: boolean
-  /**
-   * Indicate whether the item is active. There should never be more than one active item.
-   */
-  active?: boolean
-  /**
-   * Style variations associated with various `Item` types.
-   *
-   * - `"default"` - An action `Item`.
-   * - `"danger"` - A destructive action `Item`.
-   */
-  variant?: 'default' | 'danger'
-  /**
-   * Items that are disabled can not be clicked, selected, or navigated through.
-   */
-  disabled?: boolean
-  /**
-   * The ARIA role describing the function of `Item` component. `option` is a common value.
-   */
-  role?: AriaRole
-  /**
-   * id to attach to the root element of the Item
-   */
-  id?: string
-  /**
-   * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
-   */
-  _PrivateItemWrapper?: React.FC<React.PropsWithChildren<unknown>>
-} & SxProp
-
-const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
-export {Slot}
-export type ItemContext = Pick<ActionListItemProps, 'variant' | 'disabled'> & {
-  inlineDescriptionId: string
-  blockDescriptionId: string
-}
+import {ActionListItemProps, Slots, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
 
 const LiBox = styled.li<SxProp>(sx)
-export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale
 
 export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
   (

src/ActionList/LinkItem.tsx

@@ -2,7 +2,8 @@ import React from 'react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Link from '../Link'
 import {SxProp, merge} from '../sx'
-import {Item, ActionListItemProps} from './Item'
+import {Item} from './Item'
+import {ActionListItemProps} from './shared'
 
 // adopted from React.AnchorHTMLAttributes
 type LinkProps = {

src/ActionList/Selection.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {CheckIcon} from '@primer/octicons-react'
 import {ListContext, ActionListProps} from './List'
 import {GroupContext, ActionListGroupProps} from './Group'
-import {ActionListItemProps} from './Item'
+import {ActionListItemProps} from './shared'
 import {LeadingVisualContainer} from './Visuals'
 
 type SelectionProps = Pick<ActionListItemProps, 'selected'>

src/ActionList/Visuals.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import Box from '../Box'
 import {SxProp, merge} from '../sx'
 import {get} from '../constants'
-import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './Item'
+import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './shared'
 
 type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
 

src/ActionList/index.ts

@@ -8,7 +8,7 @@ import {LeadingVisual, TrailingVisual} from './Visuals'
 
 export type {ActionListProps} from './List'
 export type {ActionListGroupProps} from './Group'
-export type {ActionListItemProps} from './Item'
+export type {ActionListItemProps} from './shared'
 export type {ActionListLinkItemProps} from './LinkItem'
 export type {ActionListDividerProps} from './Divider'
 export type {ActionListDescriptionProps} from './Description'

src/ActionList/shared.ts

@@ -0,0 +1,85 @@
+import React from 'react'
+import {SxProp} from '../sx'
+import createSlots from '../utils/create-slots'
+import {AriaRole} from '../utils/types'
+
+export type ActionListItemProps = {
+  /**
+   * Primary content for an Item
+   */
+  children?: React.ReactNode
+  /**
+   * Callback that will trigger both on click selection and keyboard selection.
+   */
+  onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void
+  /**
+   * Is the `Item` is currently selected?
+   */
+  selected?: boolean
+  /**
+   * Indicate whether the item is active. There should never be more than one active item.
+   */
+  active?: boolean
+  /**
+   * Style variations associated with various `Item` types.
+   *
+   * - `"default"` - An action `Item`.
+   * - `"danger"` - A destructive action `Item`.
+   */
+  variant?: 'default' | 'danger'
+  /**
+   * Items that are disabled can not be clicked, selected, or navigated through.
+   */
+  disabled?: boolean
+  /**
+   * The ARIA role describing the function of `Item` component. `option` is a common value.
+   */
+  role?: AriaRole
+  /**
+   * id to attach to the root element of the Item
+   */
+  id?: string
+  /**
+   * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
+   */
+  _PrivateItemWrapper?: React.FC<React.PropsWithChildren<unknown>>
+} & SxProp
+
+export type ItemContext = Pick<ActionListItemProps, 'variant' | 'disabled'> & {
+  inlineDescriptionId: string
+  blockDescriptionId: string
+}
+
+export const getVariantStyles = (
+  variant: ActionListItemProps['variant'],
+  disabled: ActionListItemProps['disabled']
+) => {
+  if (disabled) {
+    return {
+      color: 'primer.fg.disabled',
+      iconColor: 'primer.fg.disabled',
+      annotationColor: 'primer.fg.disabled'
+    }
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: 'danger.fg',
+        iconColor: 'danger.fg',
+        annotationColor: 'fg.muted',
+        hoverColor: 'actionListItem.danger.hoverText'
+      }
+    default:
+      return {
+        color: 'fg.default',
+        iconColor: 'fg.muted',
+        annotationColor: 'fg.muted',
+        hoverColor: 'fg.default'
+      }
+  }
+}
+
+export const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
+
+export const TEXT_ROW_HEIGHT = '20px' // custom value off the scale

src/Autocomplete/AutocompleteMenu.tsx

@@ -4,7 +4,9 @@ import type {ScrollIntoViewOptions} from '@primer/behaviors'
 import {ActionList, ItemProps} from '../deprecated/ActionList'
 import {useFocusZone} from '../hooks/useFocusZone'
 import {ComponentProps, MandateProps} from '../utils/types'
-import {Box, Spinner, useSSRSafeId} from '../'
+import Box from '../Box'
+import Spinner from '../Spinner'
+import {useSSRSafeId} from '../utils/ssr'
 import {AutocompleteContext} from './AutocompleteContext'
 import {PlusIcon} from '@primer/octicons-react'
 import VisuallyHidden from '../_VisuallyHidden'

src/AvatarPair.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import Avatar from './Avatar'
 import {get} from './constants'
-import {Box, BoxProps} from '.'
+import Box, {BoxProps} from './Box'
 
 const ChildAvatar = styled(Avatar)`
   position: absolute;

src/AvatarStack.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames'
 import React from 'react'
 import styled from 'styled-components'
 import {get} from './constants'
-import {Box} from '.'
+import Box from './Box'
 import sx, {SxProp} from './sx'
 
 type StyledAvatarStackWrapperProps = {

src/Checkbox.tsx

@@ -4,7 +4,7 @@ import React, {ChangeEventHandler, InputHTMLAttributes, ReactElement, useContext
 import sx, {SxProp} from './sx'
 import useLayoutEffect from './utils/useIsomorphicLayoutEffect'
 import {FormValidationStatus} from './utils/types/FormValidationStatus'
-import {CheckboxGroupContext} from './CheckboxGroup'
+import {CheckboxGroupContext} from './CheckboxGroupContext'
 import getGlobalFocusStyles from './_getGlobalFocusStyles'
 
 export type CheckboxProps = {

src/CheckboxGroup.tsx

@@ -1,11 +1,13 @@
-import React, {ChangeEvent, ChangeEventHandler, createContext, FC} from 'react'
+import React, {ChangeEvent, ChangeEventHandler, FC} from 'react'
 import CheckboxOrRadioGroup, {CheckboxOrRadioGroupProps} from './_CheckboxOrRadioGroup'
 import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption'
 import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel'
 import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation'
 import {useRenderForcingRef} from './hooks'
 import {SxProp} from './sx'
-import {Checkbox, FormControl} from '.'
+import FormControl from './FormControl'
+import Checkbox from './Checkbox'
+import {CheckboxGroupContext} from './CheckboxGroupContext'
 
 type CheckboxGroupProps = {
   /**
@@ -15,11 +17,6 @@ type CheckboxGroupProps = {
 } & CheckboxOrRadioGroupProps &
   SxProp
 
-export const CheckboxGroupContext = createContext<{
-  disabled?: boolean
-  onChange?: ChangeEventHandler<HTMLInputElement>
-}>({})
-
 const CheckboxGroup: FC<React.PropsWithChildren<CheckboxGroupProps>> = ({children, disabled, onChange, ...rest}) => {
   const formControlComponentChildren = React.Children.toArray(children)
     .filter(child => React.isValidElement(child) && child.type === FormControl)
@@ -69,6 +66,8 @@ const CheckboxGroup: FC<React.PropsWithChildren<CheckboxGroupProps>> = ({childre
   )
 }
 
+export {CheckboxGroupContext}
+
 export default Object.assign(CheckboxGroup, {
   Caption: CheckboxOrRadioGroupCaption,
   Label: CheckboxOrRadioGroupLabel,

src/CheckboxGroupContext.ts

@@ -0,0 +1,6 @@
+import {ChangeEventHandler, createContext} from 'react'
+
+export const CheckboxGroupContext = createContext<{
+  disabled?: boolean
+  onChange?: ChangeEventHandler<HTMLInputElement>
+}>({})

src/FormControl/FormControl.tsx

@@ -1,5 +1,13 @@
 import React, {useContext} from 'react'
-import {Autocomplete, Box, Checkbox, Radio, Select, Textarea, TextInput, TextInputWithTokens, useSSRSafeId} from '..'
+import Autocomplete from '../Autocomplete'
+import Box from '../Box'
+import Checkbox from '../Checkbox'
+import Radio from '../Radio'
+import Select from '../Select'
+import Textarea from '../Textarea'
+import TextInput from '../TextInput'
+import TextInputWithTokens from '../TextInputWithTokens'
+import {useSSRSafeId} from '../utils/ssr'
 import FormControlCaption from './_FormControlCaption'
 import FormControlLabel from './_FormControlLabel'
 import FormControlValidation from './_FormControlValidation'

src/FormControl/_FormControlLeadingVisual.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Box} from '..'
+import Box from '../Box'
 import {get} from '../constants'
 import {SxProp} from '../sx'
 import {FormControlContext} from './FormControl'

src/PageLayout/PageLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {useStickyPaneHeight} from './useStickyPaneHeight'
-import {Box} from '..'
+import Box from '../Box'
 import {isResponsiveValue, ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
 import {BetterSystemStyleObject, merge, SxProp} from '../sx'
 

src/SegmentedControl/SegmentedControl.tsx

@@ -1,7 +1,9 @@
 import React, {useRef, useState} from 'react'
 import Button, {SegmentedControlButtonProps} from './SegmentedControlButton'
 import SegmentedControlIconButton, {SegmentedControlIconButtonProps} from './SegmentedControlIconButton'
-import {ActionList, ActionMenu, useTheme} from '..'
+import {ActionList} from '../ActionList'
+import {ActionMenu} from '../ActionMenu'
+import {useTheme} from '../ThemeProvider'
 import sx, {merge, SxProp} from '../sx'
 import {ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
 import {ViewportRangeKeys} from '../utils/types/ViewportRangeKeys'

src/SegmentedControl/SegmentedControlButton.tsx

@@ -1,7 +1,7 @@
 import React, {HTMLAttributes} from 'react'
 import {IconProps} from '@primer/octicons-react'
 import styled from 'styled-components'
-import {Box} from '..'
+import Box from '../Box'
 import sx, {merge, SxProp} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
 

src/Timeline.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React from 'react'
 import styled, {css} from 'styled-components'
-import {Box} from '.'
+import Box from './Box'
 import {get} from './constants'
 import sx, {SxProp} from './sx'
 import {ComponentProps} from './utils/types'

src/ToggleSwitch.tsx

@@ -1,7 +1,9 @@
 import React, {MouseEventHandler, useCallback, useEffect} from 'react'
 import styled, {css} from 'styled-components'
 import {variant} from 'styled-system'
-import {Box, Spinner, Text} from '.'
+import Box from './Box'
+import Spinner from './Spinner'
+import Text from './Text'
 import {get} from './constants'
 import {useProvidedStateOrCreate} from './hooks'
 import sx, {BetterSystemStyleObject, SxProp} from './sx'

src/Token/AvatarToken.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import {get} from '../constants'
 import {TokenBaseProps, defaultTokenSize, tokenSizes, TokenSizeKeys} from './TokenBase'
 import Token from './Token'
-import {Avatar} from '..'
+import Avatar from '../Avatar'
 
 // TODO: update props to only accept 'large' and 'xlarge' on the next breaking change
 export interface AvatarTokenProps extends TokenBaseProps {

src/Token/Token.tsx

@@ -1,5 +1,5 @@
 import React, {forwardRef, MouseEventHandler} from 'react'
-import {Box} from '..'
+import Box from '../Box'
 import {merge, SxProp} from '../sx'
 import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase'
 import RemoveTokenButton from './_RemoveTokenButton'