fix ESLint errors

packages/braid-design-system/css/atoms.docs.tsx

@@ -1,14 +1,16 @@
 import dedent from 'dedent';
 import React from 'react';
-import {
-  responsiveProperties,
+import type {
   ResponsiveProperties,
-  pseudoProperties,
   PseudoProperties,
-  unresponsiveProperties,
   UnresponsiveProperties,
   BoxShadow,
 } from 'braid-src/lib/css/atoms/atomicProperties';
+import {
+  responsiveProperties,
+  pseudoProperties,
+  unresponsiveProperties,
+} from 'braid-src/lib/css/atoms/atomicProperties';
 import { atoms } from 'braid-src/css';
 import {
   Stack,
@@ -27,7 +29,7 @@ import { Box } from 'braid-src/lib/components/Box/Box';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
 import { ThemedExample } from 'site/App/ThemeSetting';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 type BoxShadowDocs = Required<Record<BoxShadow, string>>;

packages/braid-design-system/css/breakpoints.docs.tsx

@@ -11,7 +11,7 @@ import {
 } from 'braid-src/lib/components';
 import { breakpoints } from 'braid-src/lib/css/breakpoints';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const bps = Object.keys(breakpoints) as Array<keyof typeof breakpoints>;

packages/braid-design-system/css/colorModeStyle.docs.tsx

@@ -4,7 +4,7 @@ import { colorModeStyle, vars } from '.';
 import { Strong, Text, TextLink } from 'braid-src/lib/components';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 
 const docs: CssDoc = {
   usage: (

packages/braid-design-system/css/globalHeadingStyle.docs.tsx

@@ -4,7 +4,7 @@ import { Alert, Stack, Strong, Text, TextLink } from '../lib/components';
 import { globalHeadingStyle } from '../lib/css/globalTypographyStyles';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const docs: CssDoc = {

packages/braid-design-system/css/globalTextStyle.docs.tsx

@@ -4,7 +4,7 @@ import { Alert, Stack, Strong, Text, TextLink } from '../lib/components';
 import { globalTextStyle } from '../lib/css/globalTypographyStyles';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const docs: CssDoc = {

packages/braid-design-system/css/index.ts

@@ -1,5 +1,6 @@
 import { vars as internalVars } from '../lib/themes/vars.css';
-import { atoms as internalAtoms, Atoms } from '../lib/css/atoms/atoms';
+import type { Atoms } from '../lib/css/atoms/atoms';
+import { atoms as internalAtoms } from '../lib/css/atoms/atoms';
 import { colorModeStyle } from '../lib/css/colorModeStyle';
 import { responsiveStyle } from '../lib/css/responsiveStyle';
 import { breakpoints } from '../lib/css/breakpoints';

packages/braid-design-system/css/responsiveStyle.docs.tsx

@@ -4,7 +4,7 @@ import { responsiveStyle, vars, breakpoints } from '.';
 import { Notice, Strong, Text, TextLink } from '../lib/components';
 import source from '../lib/utils/source.macro';
 import Code from 'site/App/Code/Code';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const bps = Object.keys(breakpoints);

packages/braid-design-system/css/vars.docs.tsx

@@ -1,4 +1,5 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { vars } from '.';
 import {
   Text,
@@ -11,11 +12,12 @@ import {
   Alert,
   List,
 } from '../lib/components';
-import { Box, BoxProps } from '../lib/components/Box/Box';
-import { ReactNodeNoStrings } from '../lib/components/private/ReactNodeNoStrings';
+import type { BoxProps } from '../lib/components/Box/Box';
+import { Box } from '../lib/components/Box/Box';
+import type { ReactNodeNoStrings } from '../lib/components/private/ReactNodeNoStrings';
 import Code from 'site/App/Code/Code';
 import { ThemedExample, useThemeSettings } from 'site/App/ThemeSetting';
-import { CssDoc } from 'site/types';
+import type { CssDoc } from 'site/types';
 import { VanillaMigrationBanner } from './VanillaMigrationBanner';
 
 const Row = ({

packages/braid-design-system/lib/components/Accordion/Accordion.docs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentDocs } from 'site/types';
+import type { ComponentDocs } from 'site/types';
 import source from '../../utils/source.macro';
 import {
   Accordion,

packages/braid-design-system/lib/components/Accordion/Accordion.gallery.tsx

@@ -8,7 +8,7 @@ import {
   IconPromote,
   Placeholder,
 } from '../../playroom/components';
-import { ComponentExample } from 'site/types';
+import type { ComponentExample } from 'site/types';
 
 export const galleryItems: ComponentExample[] = [
   {

packages/braid-design-system/lib/components/Accordion/Accordion.playroom.tsx

@@ -1,11 +1,8 @@
 import React from 'react';
 import { mapResponsiveValue } from '../../css/atoms/sprinkles.css';
 import { wireframe } from '../../themes';
-import {
-  Accordion as BraidAccordion,
-  AccordionProps,
-  validSpaceValues,
-} from './Accordion';
+import type { AccordionProps } from './Accordion';
+import { Accordion as BraidAccordion, validSpaceValues } from './Accordion';
 
 type ValidSpaceValue = typeof validSpaceValues[number];
 

packages/braid-design-system/lib/components/Accordion/Accordion.screenshots.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ComponentScreenshot } from 'site/types';
+import type { ComponentScreenshot } from 'site/types';
 import { AccordionItem, Accordion, Badge, Text, IconPromote, Stack } from '../';
 import { Placeholder } from '../../playroom/components';
 import { Box } from '../Box/Box';

packages/braid-design-system/lib/components/Accordion/Accordion.snippets.tsx

@@ -6,7 +6,7 @@ import {
   Placeholder,
 } from '../../playroom/components';
 import source from '../../utils/source.macro';
-import { Snippets } from '../private/Snippets';
+import type { Snippets } from '../private/Snippets';
 
 export const snippets: Snippets = [
   {

packages/braid-design-system/lib/components/Accordion/Accordion.tsx

@@ -1,21 +1,15 @@
 import assert from 'assert';
 import React, { useMemo } from 'react';
-import { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
-import {
-  normalizeResponsiveValue,
-  RequiredResponsiveValue,
-} from '../../css/atoms/sprinkles.css';
-import buildDataAttributes, {
-  DataAttributeMap,
-} from '../private/buildDataAttributes';
+import type { ReactNodeNoStrings } from '../private/ReactNodeNoStrings';
+import type { RequiredResponsiveValue } from '../../css/atoms/sprinkles.css';
+import { normalizeResponsiveValue } from '../../css/atoms/sprinkles.css';
+import type { DataAttributeMap } from '../private/buildDataAttributes';
+import buildDataAttributes from '../private/buildDataAttributes';
 import { Box } from '../Box/Box';
 import { Stack } from '../Stack/Stack';
 import { Divider } from '../Divider/Divider';
-import {
-  AccordionContext,
-  AccordionContextValue,
-  validTones,
-} from './AccordionContext';
+import type { AccordionContextValue } from './AccordionContext';
+import { AccordionContext, validTones } from './AccordionContext';
 
 export const validSpaceValues = ['medium', 'large', 'xlarge'] as const;
 

packages/braid-design-system/lib/components/Accordion/AccordionContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { TextProps } from '../Text/Text';
+import type { TextProps } from '../Text/Text';
 
 export const validTones = ['neutral', 'secondary'] as const;
 

packages/braid-design-system/lib/components/Accordion/AccordionItem.playroom.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { useFallbackState, StateProp } from '../../playroom/playroomState';
+import type { StateProp } from '../../playroom/playroomState';
+import { useFallbackState } from '../../playroom/playroomState';
 import { useFallbackId } from '../../playroom/utils';
-import {
-  AccordionItem as BraidAccordionItem,
+import type {
   AccordionItemProps,
   AccordionItemBaseProps,
   AccordionItemStateProps,
 } from './AccordionItem';
+import { AccordionItem as BraidAccordionItem } from './AccordionItem';
 
 type OptionalProps = 'id';
 type PlayroomAccordionItemProps = StateProp &

packages/braid-design-system/lib/components/Accordion/AccordionItem.tsx

@@ -1,34 +1,27 @@
-import React, {
-  cloneElement,
-  ReactElement,
-  ReactNode,
-  useContext,
-} from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React, { cloneElement, useContext } from 'react';
 import assert from 'assert';
 import { Box } from '../Box/Box';
-import { Text, TextProps } from '../Text/Text';
+import type { TextProps } from '../Text/Text';
+import { Text } from '../Text/Text';
 import { Columns } from '../Columns/Columns';
 import { Column } from '../Column/Column';
 import { Inline } from '../Inline/Inline';
-import { BadgeProps } from '../Badge/Badge';
+import type { BadgeProps } from '../Badge/Badge';
 import { IconChevron } from '../icons';
-import {
-  useDisclosure,
+import type {
   UseDisclosureProps,
   DisclosureStateProps,
 } from '../Disclosure/useDisclosure';
+import { useDisclosure } from '../Disclosure/useDisclosure';
 
 import { virtualTouchable } from '../private/touchable/virtualTouchable';
 import { hideFocusRingsClassName } from '../private/hideFocusRings/hideFocusRings';
 import { Overlay } from '../private/Overlay/Overlay';
-import {
-  AccordionContext,
-  AccordionContextValue,
-  validTones,
-} from './AccordionContext';
-import buildDataAttributes, {
-  DataAttributeMap,
-} from '../private/buildDataAttributes';
+import type { AccordionContextValue } from './AccordionContext';
+import { AccordionContext, validTones } from './AccordionContext';
+import type { DataAttributeMap } from '../private/buildDataAttributes';
+import buildDataAttributes from '../private/buildDataAttributes';
 import * as styles from './AccordionItem.css';
 
 const itemSpaceForSize = {

packages/braid-design-system/lib/components/Actions/Actions.docs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentDocs } from 'site/types';
+import type { ComponentDocs } from 'site/types';
 import source from '../../utils/source.macro';
 import { Actions, Button, TextLink, Text, Strong, Card, Stack } from '../';
 

packages/braid-design-system/lib/components/Actions/Actions.gallery.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import source from '../../utils/source.macro';
-import { ComponentExample } from 'site/types';
+import type { ComponentExample } from 'site/types';
 import { Actions, Button, IconDelete } from '../';
 
 export const galleryItems: ComponentExample[] = [

packages/braid-design-system/lib/components/Actions/Actions.screenshots.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentScreenshot } from 'site/types';
+import type { ComponentScreenshot } from 'site/types';
 import { Button, Actions } from '../';
 
 export const screenshots: ComponentScreenshot = {

packages/braid-design-system/lib/components/Actions/Actions.snippets.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Actions, Button, IconDelete } from '../../playroom/components';
 import source from '../../utils/source.macro';
-import { Snippets } from '../private/Snippets';
+import type { Snippets } from '../private/Snippets';
 
 export const snippets: Snippets = [
   {

packages/braid-design-system/lib/components/Actions/Actions.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
 import ActionsContext from './ActionsContext';
-import { Inline, InlineProps } from '../Inline/Inline';
-import { ButtonProps } from '../Button/Button';
+import type { InlineProps } from '../Inline/Inline';
+import { Inline } from '../Inline/Inline';
+import type { ButtonProps } from '../Button/Button';
 
 export interface ActionsProps {
   size?: ButtonProps['size'];

packages/braid-design-system/lib/components/Actions/ActionsContext.ts

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { ButtonProps } from '../Button/Button';
+import type { ButtonProps } from '../Button/Button';
 
 interface ActionsContextValue extends Pick<ButtonProps, 'size'> {}
 

packages/braid-design-system/lib/components/Alert/Alert.docs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentDocs } from 'site/types';
+import type { ComponentDocs } from 'site/types';
 import source from '../../utils/source.macro';
 import { Alert, Text, Strong, Stack, TextLink, List } from '../';
 import { Card } from '../Card/Card';

packages/braid-design-system/lib/components/Alert/Alert.gallery.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import source from '../../utils/source.macro';
-import { ComponentExample } from 'site/types';
+import type { ComponentExample } from 'site/types';
 import { Alert, Text, Stack, TextLink, List } from '../';
 
 export const galleryItems: ComponentExample[] = [

packages/braid-design-system/lib/components/Alert/Alert.playroom.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Alert as BraidAlert, AlertProps } from './Alert';
+import type { AlertProps } from './Alert';
+import { Alert as BraidAlert } from './Alert';
 
 export const Alert = ({ tone, ...restProps }: AlertProps) => (
   <BraidAlert

packages/braid-design-system/lib/components/Alert/Alert.screenshots.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentScreenshot } from 'site/types';
+import type { ComponentScreenshot } from 'site/types';
 import { Alert, Text, Stack, TextLink, List } from '../';
 
 export const screenshots: ComponentScreenshot = {

packages/braid-design-system/lib/components/Alert/Alert.snippets.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Alert, Text } from '../../playroom/components';
 import source from '../../utils/source.macro';
-import { Snippets } from '../private/Snippets';
+import type { Snippets } from '../private/Snippets';
 
 export const snippets: Snippets = [
   {

packages/braid-design-system/lib/components/Alert/Alert.tsx

@@ -1,5 +1,7 @@
-import React, { ReactNode } from 'react';
-import { Box, BoxProps } from '../Box/Box';
+import type { ReactNode } from 'react';
+import React from 'react';
+import type { BoxProps } from '../Box/Box';
+import { Box } from '../Box/Box';
 import {
   IconInfo,
   IconCritical,
@@ -8,16 +10,15 @@ import {
   IconCaution,
   IconClear,
 } from '../icons';
-import { AllOrNone } from '../private/AllOrNone';
+import type { AllOrNone } from '../private/AllOrNone';
 import { Columns } from '../Columns/Columns';
 import { Column } from '../Column/Column';
 import { Overlay } from '../private/Overlay/Overlay';
 import { useBackground } from '../Box/BackgroundContext';
 import { textAlignedToIcon } from '../../css/textAlignedToIcon.css';
-import buildDataAttributes, {
-  DataAttributeMap,
-} from '../private/buildDataAttributes';
-import { BoxShadow } from '../../css/atoms/atomicProperties';
+import type { DataAttributeMap } from '../private/buildDataAttributes';
+import buildDataAttributes from '../private/buildDataAttributes';
+import type { BoxShadow } from '../../css/atoms/atomicProperties';
 import { Keyline } from '../private/Keyline/Keyline';
 import { virtualTouchable } from '../private/touchable/virtualTouchable';
 import { iconContainerSize } from '../../hooks/useIcon';

packages/braid-design-system/lib/components/Autosuggest/Autosuggest.docs.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentDocs } from 'site/types';
+import type { ComponentDocs } from 'site/types';
 import source from '../../utils/source.macro';
 import {
   Autosuggest,

packages/braid-design-system/lib/components/Autosuggest/Autosuggest.gallery.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ComponentExample } from 'site/types';
+import type { ComponentExample } from 'site/types';
 import { Autosuggest, filterSuggestions, IconSearch } from '../';
 import { makeSuggestions } from './Autosuggest.docs';
 import source from '../../utils/source.macro';