Enable @typescript-eslint/consistent-type-imports (#2581)

* Enable @typescript-eslint/consistent-type-imports

* Change files

* prettier

* cleanup dead code

* Undo addition of packages to win32 test app devDeps

apps/E2E/package.json

@@ -46,7 +46,7 @@
     "metro-config": "^0.67.0",
     "metro-react-native-babel-preset": "^0.67.0",
     "ts-node": "^8.10.1",
-    "typescript": "4.5.4",
+    "typescript": "4.9.4",
     "webdriverio": "7.23.0"
   },
   "rnx-kit": {

apps/fluent-tester/src/@types/RNTester/index.d.ts

@@ -1,5 +1,5 @@
 declare module '*.svg' {
-  import { SvgProps } from 'react-native-svg';
+  import type { SvgProps } from 'react-native-svg';
   const content: React.FC<SvgProps>;
   export default content;
 }

apps/fluent-tester/src/FluentTester.tsx

@@ -1,4 +1,4 @@
-import { Theme } from '@fluentui-react-native/framework';
+import type { Theme } from '@fluentui-react-native/framework';
 import { Separator, Text } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';

apps/fluent-tester/src/FluentTesterApp.tsx

@@ -3,7 +3,8 @@
 import { ThemeProvider } from '@fluentui-react-native/theme';
 import * as React from 'react';
 import { Platform } from 'react-native';
-import { FluentTester, FluentTesterProps } from './FluentTester';
+import type { FluentTesterProps } from './FluentTester';
+import { FluentTester } from './FluentTester';
 import { testerTheme } from './theme/index';
 import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions';
 

apps/fluent-tester/src/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx

@@ -3,7 +3,8 @@ import { ActivityIndicator } from '@fluentui-react-native/experimental-activity-
 import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { ACTIVITY_INDICATOR_TESTPAGE } from '../../../../E2E/src/ActivityIndicator/consts';
 import { View, Switch } from 'react-native';
 

apps/fluent-tester/src/TestComponents/Avatar/AvatarTest.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { AVATAR_TESTPAGE } from '../../../../E2E/src/Avatar/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { StandardUsage } from './BasicAvatar';
 import { CustomizeUsage } from './CustomizedAvatar';
 import { E2EAvatarTest } from './E2EAvatarTest';

apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.android.tsx

@@ -1,10 +1,11 @@
-import React, { FunctionComponent } from 'react';
+import type { FunctionComponent } from 'react';
+import React from 'react';
 import { Avatar } from '@fluentui-react-native/avatar';
 import { View } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
 import { mobileStyles } from '../Common/styles';
 import { Switch } from '@fluentui-react-native/switch';
-import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 
 export const StandardUsage: FunctionComponent = () => {
   const [activityRing, setActivityRing] = React.useState(true);

apps/fluent-tester/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -1,6 +1,9 @@
-import React, { useState, useCallback, FunctionComponent } from 'react';
-import { AvatarSize, AvatarSizes, AvatarColor, AvatarColors, Avatar, AvatarActive } from '@fluentui-react-native/avatar';
-import { PresenceBadgeStatuses, PresenceBadgeStatus } from '@fluentui-react-native/badge';
+import type { FunctionComponent } from 'react';
+import React, { useState, useCallback } from 'react';
+import type { AvatarSize, AvatarColor, AvatarActive } from '@fluentui-react-native/avatar';
+import { AvatarSizes, AvatarColors, Avatar } from '@fluentui-react-native/avatar';
+import type { PresenceBadgeStatus } from '@fluentui-react-native/badge';
+import { PresenceBadgeStatuses } from '@fluentui-react-native/badge';
 import { View, Text, Platform } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';

apps/fluent-tester/src/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -1,9 +1,10 @@
 import React, { useState, useMemo } from 'react';
-import { Avatar, AvatarSize } from '@fluentui-react-native/avatar';
+import type { AvatarSize } from '@fluentui-react-native/avatar';
+import { Avatar } from '@fluentui-react-native/avatar';
 import { View, Text, TextInput, Platform, StyleSheet } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
-import { FontWeight } from '@fluentui-react-native/theme-types';
+import type { FontWeight } from '@fluentui-react-native/theme-types';
 import { svgProps } from '../Common/iconExamples';
 import { ToggleButton } from '@fluentui/react-native';
 

apps/fluent-tester/src/TestComponents/Avatar/NativeAvatarTest.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { NativeAvatar, Size } from '@fluentui-react-native/experimental-avatar/';
+import type { Size } from '@fluentui-react-native/experimental-avatar/';
+import { NativeAvatar } from '@fluentui-react-native/experimental-avatar/';
 import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { NATIVE_AVATAR_TESTPAGE } from '../../../../E2E/src/Avatar/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { testImageSource, rainbowGradientSource } from './testImageSources';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { Switch, View } from 'react-native';

apps/fluent-tester/src/TestComponents/Badge/BadgeTest.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { BADGE_TESTPAGE } from '../../../../E2E/src/Badge/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { BasicBadge } from './BasicBadgeTest';
 import { CounterBadgeTest } from './CounterBadgeTest';
 import { PresenceBadgeTest } from './PresenceBadgeTest';

apps/fluent-tester/src/TestComponents/Badge/BasicBadgeTest.tsx

@@ -1,20 +1,16 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useState, useCallback, useMemo } from 'react';
 import { View, Platform, Text, Image } from 'react-native';
-import {
-  Badge,
+import type {
   BadgeAppearance,
-  BadgeAppearances,
   BadgeColor,
-  BadgeColors,
   BadgeShape,
-  BadgeShapes,
   BadgeSize,
-  BadgeSizes,
   BadgeIconPosition,
   BadgeProps,
   BadgeTokens,
 } from '@fluentui-react-native/badge';
+import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes } from '@fluentui-react-native/badge';
 import { StyledPicker } from '../Common/StyledPicker';
 import { satyaPhotoUrl } from './../PersonaCoin/styles';
 import { ToggleButton } from '@fluentui/react-native';

apps/fluent-tester/src/TestComponents/Badge/PresenceBadgeTest.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useState, useCallback } from 'react';
 import { View, Platform, Text } from 'react-native';
-import { PresenceBadge, BadgeSize, BadgeSizes } from '@fluentui-react-native/badge';
+import type { BadgeSize } from '@fluentui-react-native/badge';
+import { PresenceBadge, BadgeSizes } from '@fluentui-react-native/badge';
 import { StyledPicker } from '../Common/StyledPicker';
 import { ToggleButton } from '@fluentui/react-native';
 

apps/fluent-tester/src/TestComponents/Button/ButtonHOCTestSection.tsx

@@ -3,7 +3,8 @@ import { TextV1 as Text } from '@fluentui-react-native/text';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
 import { commonTestStyles, stackStyle } from '../Common/styles';
-import { InteractionEvent, isGestureResponderEvent } from '@fluentui-react-native/interactive-hooks';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { isGestureResponderEvent } from '@fluentui-react-native/interactive-hooks';
 import { svgProps } from '../Common/iconExamples';
 
 const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });

apps/fluent-tester/src/TestComponents/Button/ButtonTest.tsx

@@ -3,7 +3,8 @@ import { ButtonFocusTest_deprecated } from './deprecated/ButtonFocusTest';
 import { ButtonIconTest_deprecated } from './deprecated/ButtonIconTest';
 import { BUTTON_TESTPAGE } from '../../../../E2E/src/ButtonLegacy/consts';
 import { E2EButtonTest_deprecated } from './deprecated/E2EButtonTest';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { ButtonVariantTest } from './ButtonVariantTestSection';
 import { ToggleButtonTest } from './ToggleButtonTestSection';
 import { ButtonIconTest } from '../Button/ButtonIconTestSection';

apps/fluent-tester/src/TestComponents/Button/E2EButtonTest.tsx

@@ -17,7 +17,7 @@ import {
   BUTTON_FOCUSABLE_TEST_COMPONENT,
   BUTTON_FOCUSABLE_TEST_COMPONENT_LABEL,
 } from '../../../../E2E/src/ButtonLegacy/consts';
-import { IViewWin32Props } from '@office-iss/react-native-win32';
+import type { IViewWin32Props } from '@office-iss/react-native-win32';
 import { testProps } from '../Common/TestProps';
 
 export const E2EButtonTest: React.FunctionComponent = () => {

apps/fluent-tester/src/TestComponents/Button/deprecated/ButtonFocusTest.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@fluentui/react-native';
-import { IFocusable } from '@fluentui-react-native/interactive-hooks';
+import type { IFocusable } from '@fluentui-react-native/interactive-hooks';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
 import { findNodeHandle } from 'react-native';

apps/fluent-tester/src/TestComponents/Callout/CalloutE2ETest.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
-import { ScreenRect, View } from 'react-native';
-import { ButtonV1 as Button, Callout, Text, DismissBehaviors } from '@fluentui/react-native';
+import type { ScreenRect } from 'react-native';
+import { View } from 'react-native';
+import type { DismissBehaviors } from '@fluentui/react-native';
+import { ButtonV1 as Button, Callout, Text } from '@fluentui/react-native';
 import { Switch } from '@fluentui-react-native/switch';
 import { BUTTON_TO_OPEN_CALLOUT, CALLOUT_ACCESSIBILITY_LABEL, CALLOUT_TEST_COMPONENT } from '../../../../E2E/src/Callout/consts';
 import { testProps } from '../Common/TestProps';

apps/fluent-tester/src/TestComponents/Callout/CalloutTest.tsx

@@ -1,17 +1,11 @@
 import * as React from 'react';
-import { ScreenRect, Text, View, Switch, ScrollView } from 'react-native';
-import {
-  Button,
-  Callout,
-  Separator,
-  IFocusable,
-  Pressable,
-  RestoreFocusEvent,
-  DismissBehaviors,
-  StealthButton,
-} from '@fluentui/react-native';
+import type { ScreenRect } from 'react-native';
+import { Text, View, Switch, ScrollView } from 'react-native';
+import type { IFocusable, RestoreFocusEvent, DismissBehaviors } from '@fluentui/react-native';
+import { Button, Callout, Separator, Pressable, StealthButton } from '@fluentui/react-native';
 import { CALLOUT_TESTPAGE } from '../../../../E2E/src/Callout/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { E2ECalloutTest } from './CalloutE2ETest';
 import { fluentTesterStyles } from '../Common/styles';
 import { MenuPicker } from '../Common/MenuPicker';

apps/fluent-tester/src/TestComponents/CheckboxLegacy/CheckboxLegacyTest.tsx

@@ -1,11 +1,13 @@
 import { Checkbox } from '@fluentui/react-native';
-import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
 import * as React from 'react';
 import { View, TextInput } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { CHECKBOX_TESTPAGE } from '../../../../E2E/src/CheckboxLegacy/consts';
 import { CheckboxLegacyE2ETest } from './CheckboxLegacyE2ETest';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 
 function onChangeUncontrolled(isChecked: boolean) {

apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
 import { View, TextInput, Platform } from 'react-native';
 import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
 import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
-import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 

apps/fluent-tester/src/TestComponents/ColorTokens/ColorTokenTest.tsx

@@ -1,18 +1,22 @@
 import * as React from 'react';
-import { View, ViewStyle, StyleSheet, ColorValue, Platform } from 'react-native';
-import { useTheme, Theme } from '@fluentui-react-native/theme-types';
+import type { ViewStyle, ColorValue } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
 import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
 import { createAliasTokens } from '@fluentui-react-native/default-theme';
 import { commonTestStyles } from '../Common/styles';
 import { Text, ToggleButton } from '@fluentui/react-native';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '../../../../E2E/src/ColorTokens/consts';
 import { testProps } from '../Common/TestProps';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
-import Svg, { G, Path, SvgProps } from 'react-native-svg';
-import { SvgIconProps } from '@fluentui-react-native/icon';
+import type { SvgProps } from 'react-native-svg';
+import Svg, { G, Path } from 'react-native-svg';
+import type { SvgIconProps } from '@fluentui-react-native/icon';
 
 const getThemedStyles = themedStyleSheet((theme: Theme) => {
   return {

apps/fluent-tester/src/TestComponents/Common/AlignmentPicker.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { undefinedText } from '../PersonaCoin/styles';
-import { IconAlignment } from '@fluentui/react-native';
-import { StyleProp, ViewStyle } from 'react-native';
+import type { IconAlignment } from '@fluentui/react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { MenuPicker } from './MenuPicker';
 
 const alignmentValues: Array<typeof undefinedText | IconAlignment> = [undefinedText, 'start', 'center', 'end'];

apps/fluent-tester/src/TestComponents/Common/MenuPicker.desktop.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
-import { MenuPickerProps, CollectionItem } from './MenuPicker';
+import type { MenuPickerProps, CollectionItem } from './MenuPicker';
+export type { MenuPickerProps, CollectionItem } from './MenuPicker';
 import { ButtonV1 as Button, Text } from '@fluentui/react-native';
 import { SvgXml } from 'react-native-svg';
 

apps/fluent-tester/src/TestComponents/Common/MenuPicker.windows.tsx

@@ -1,7 +1,7 @@
 export * from './MenuPicker.desktop';
 import * as React from 'react';
 import { Button, Text, View, StyleSheet } from 'react-native';
-import { MenuPickerProps, CollectionItem } from './MenuPicker';
+import type { MenuPickerProps, CollectionItem } from './MenuPicker';
 
 export const MenuPicker: React.FunctionComponent<MenuPickerProps> = (props: MenuPickerProps) => {
   const { prompt, onChange, collection } = props;

apps/fluent-tester/src/TestComponents/Common/Slider.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { ViewProps, StyleSheet, StyleProp, ViewStyle, UIManager, Text, findNodeHandle, View } from 'react-native';
+import type { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, UIManager, Text, findNodeHandle, View } from 'react-native';
 import { Separator, Pressable } from '@fluentui/react-native';
-import { IPressableState } from '@fluentui-react-native/interactive-hooks';
+import type { IPressableState } from '@fluentui-react-native/interactive-hooks';
 
 const thumbSize = 20;
 const defaultMaximumValue = 100;

apps/fluent-tester/src/TestComponents/Common/Square.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ViewProps, View, StyleProp, ViewStyle, ColorValue } from 'react-native';
+import type { ViewProps, StyleProp, ViewStyle, ColorValue } from 'react-native';
+import { View } from 'react-native';
 
 export interface ISquareProps extends ViewProps {
   color?: ColorValue;

apps/fluent-tester/src/TestComponents/Common/StyledPicker.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MenuPicker } from './MenuPicker';
-import { ColorValue } from 'react-native';
+import type { ColorValue } from 'react-native';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { commonTestStyles as commonStyles } from './styles';
 

apps/fluent-tester/src/TestComponents/Common/iconExamples.tsx

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { SvgIconProps, FontIconProps, IconProps } from '@fluentui-react-native/icon';
+import type { SvgIconProps, FontIconProps, IconProps } from '@fluentui-react-native/icon';
 import TestSvg from '../../../assets/test.svg';
 
 export const svgProps: SvgIconProps = {

apps/fluent-tester/src/TestComponents/Common/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { IStackProps } from '@fluentui-react-native/stack';
+import type { IStackProps } from '@fluentui-react-native/stack';
 
 export const commonTestStyles = StyleSheet.create({
   root: {

apps/fluent-tester/src/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -12,7 +12,8 @@ import {
   Checkbox,
 } from '@fluentui/react-native';
 import { CONTEXTUALMENU_TESTPAGE } from '../../../../E2E/src/ContextualMenu/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { svgProps, fontProps, testImage } from '../Common/iconExamples';
 import { E2EContextualMenuTest } from './E2EContextualMenuTest';
 

apps/fluent-tester/src/TestComponents/CornerRadius/CornerRadiusTest.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { HOMEPAGE_CORNERRADIUS_TESTPAGE } from '../../../../E2E/src/CornerRadiusTokens/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { View } from 'react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';

apps/fluent-tester/src/TestComponents/Drawer/DrawerTest.tsx

@@ -7,7 +7,8 @@ import { Drawer } from '@fluentui-react-native/experimental-drawer';
 import { Stack } from '@fluentui-react-native/stack';
 import { Icon } from '@fluentui-react-native/icon';
 import { DRAWER_TESTPAGE } from './consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { svgProps } from '../Common/iconExamples';
 
 const BasicDrawer: React.FunctionComponent = () => {

apps/fluent-tester/src/TestComponents/Dropdown/DropdownTest.tsx

@@ -3,7 +3,8 @@ import { Option, Dropdown } from '@fluentui-react-native/dropdown';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { DROPDOWN_TESTPAGE } from './consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 
 const DropdownDefault: React.FunctionComponent = () => {
   return (

apps/fluent-tester/src/TestComponents/Expander/ExpanderTest.tsx

@@ -3,7 +3,8 @@ import { Expander } from '@fluentui-react-native/experimental-expander';
 import { Text } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { EXPANDER_TESTPAGE } from './consts';
 import { View, Switch } from 'react-native';
 

apps/fluent-tester/src/TestComponents/FocusTrapZone/FocusTrapZoneTest.tsx

@@ -1,11 +1,15 @@
-import { FocusTrapZone, IFocusTrapZoneProps, Text } from '@fluentui/react-native';
-import { KeyPressEvent, useFocusState } from '@fluentui-react-native/interactive-hooks';
+import type { IFocusTrapZoneProps } from '@fluentui/react-native';
+import { FocusTrapZone, Text } from '@fluentui/react-native';
+import type { KeyPressEvent } from '@fluentui-react-native/interactive-hooks';
+import { useFocusState } from '@fluentui-react-native/interactive-hooks';
 import { Stack } from '@fluentui-react-native/stack';
 import * as React from 'react';
-import { TouchableHighlight, TouchableHighlightProps, View, ViewProps } from 'react-native';
+import type { TouchableHighlightProps, ViewProps } from 'react-native';
+import { TouchableHighlight, View } from 'react-native';
 import { stackStyle } from '../Common/styles';
 import { FOCUSTRAPZONE_TESTPAGE } from '../../../../E2E/src/FocusTrapZone/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 
 const trapZoneStyle: IFocusTrapZoneProps['style'] = {
   padding: 10,

apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneE2ETest.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import { View } from 'react-native';
-import { FocusZoneDirection, FocusZone, MenuButton, Text } from '@fluentui/react-native';
+import type { FocusZoneDirection } from '@fluentui/react-native';
+import { FocusZone, MenuButton, Text } from '@fluentui/react-native';
 import { Switch } from '@fluentui-react-native/switch';
-import { ButtonV1 as Button, ButtonProps } from '@fluentui-react-native/button';
+import type { ButtonProps } from '@fluentui-react-native/button';
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { commonTestStyles } from '../Common/styles';
 import {
   FOCUSZONE_TEST_COMPONENT,

apps/fluent-tester/src/TestComponents/FocusZone/FocusZoneTest.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import { View, ScrollView, Pressable } from 'react-native';
-import { FocusZone, FocusZoneDirection, Text, useOnPressWithFocus } from '@fluentui/react-native';
+import type { FocusZoneDirection } from '@fluentui/react-native';
+import { FocusZone, Text, useOnPressWithFocus } from '@fluentui/react-native';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Checkbox, CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { CheckboxProps } from '@fluentui-react-native/experimental-checkbox';
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { FOCUSZONE_TESTPAGE } from '../../../../E2E/src/FocusZone/consts';
 import { focusZoneTestStyles, SubheaderText } from './styles';
 import { FocusZone2D, FocusZoneDirections, FocusZoneListWrapper, GridOfButtons } from './FocusZoneE2ETest';
-import { MenuPicker, CollectionItem } from '../Common/MenuPicker';
+import type { CollectionItem } from '../Common/MenuPicker';
+import { MenuPicker } from '../Common/MenuPicker';
 
 const directionCollection: CollectionItem[] = FocusZoneDirections.map((dir) => ({ label: dir, value: dir }));
 

apps/fluent-tester/src/TestComponents/Icon/IconLegacyE2ETest.tsx

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import { Text } from '@fluentui/react-native';
 import { Icon } from '@fluentui-react-native/icon';
 import { ICON_ACCESSIBILITY_LABEL } from '../../../../E2E/src/IconLegacy/consts';
-import { RasterImageIconProps } from '@fluentui-react-native/icon';
+import type { RasterImageIconProps } from '@fluentui-react-native/icon';
 import { testImage } from '../Common/iconExamples';
 
 export const E2ETestingIcon: React.FunctionComponent = () => {

apps/fluent-tester/src/TestComponents/Icon/IconTest.tsx

@@ -2,8 +2,10 @@
 import * as React from 'react';
 import { Platform, PlatformColor, View } from 'react-native';
 import { Text } from '@fluentui/react-native';
-import { Icon, RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { RasterImageIconProps, SvgIconProps, FontIconProps } from '@fluentui-react-native/icon';
+import { Icon } from '@fluentui-react-native/icon';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { ICON_TESTPAGE } from '../../../../E2E/src/IconLegacy/consts';
 import { E2ETestingIcon } from './IconLegacyE2ETest';
 import { IconV1E2ETest } from './IconV1E2ETest';

apps/fluent-tester/src/TestComponents/Icon/IconV1.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
-import { FontIcon, SvgIcon, IconV1, FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon';
+import type { FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon';
+import { FontIcon, SvgIcon, IconV1 } from '@fluentui-react-native/icon';
 import { Text, View } from 'react-native';
 import TestSvg from '../../../assets/test.svg';
 

apps/fluent-tester/src/TestComponents/Icon/IconV1E2ETest.tsx

@@ -2,7 +2,8 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { Text } from '@fluentui/react-native';
-import { FontIcon, SvgIcon, IconV1, FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon';
+import type { FontIconPropsV1, SvgIconPropsV1 } from '@fluentui-react-native/icon';
+import { FontIcon, SvgIcon, IconV1 } from '@fluentui-react-native/icon';
 import {
   ICON_ACCESSIBILITY_LABEL,
   ICON_TEST_COMPONENT,

apps/fluent-tester/src/TestComponents/LinkLegacy/LinkLegacyTest.tsx

@@ -4,7 +4,8 @@ import { Link } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { LINK_TESTPAGE } from '../../../../E2E/src/LinkLegacy/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { E2ELinkLegacyTest } from './E2ELinkLegacyTest';
 
 const Links: React.FunctionComponent = () => {

apps/fluent-tester/src/TestComponents/LinkV1/LinkV1Test.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { Alert, View, StyleSheet, Text, TextInput } from 'react-native';
-import { LinkV1 as Link, LinkTokens } from '@fluentui/react-native';
+import type { LinkTokens } from '@fluentui/react-native';
+import { LinkV1 as Link } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
 import { LINKV1_TESTPAGE } from '../../../../E2E/src/LinkV1/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { E2ELinkV1Test } from './E2ELinkV1Test';
 import { Platform } from 'react-native';
 import { InlineLinks } from './InlineLinksTest';

apps/fluent-tester/src/TestComponents/Menu/MenuTest.tsx

@@ -13,7 +13,8 @@ import {
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { MENU_TESTPAGE } from '../../../../E2E/src/Menu/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { E2EMenuTest } from './E2EMenuTest';
 import { MenuTriggerHoverCallback, MenuTriggerOnClickCallback } from './MenuTriggerCallbacks';

apps/fluent-tester/src/TestComponents/Menu/MenuTriggerCallbacks.tsx

@@ -3,7 +3,7 @@ import { ButtonV1 as Button } from '@fluentui/react-native';
 import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
-import { ColorValue } from 'react-native';
+import type { ColorValue } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 export const MenuTriggerOnClickCallback: React.FunctionComponent = () => {

apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyE2ETest.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { MenuButton, ContextualMenuProps } from '@fluentui/react-native';
+import type { ContextualMenuProps } from '@fluentui/react-native';
+import { MenuButton } from '@fluentui/react-native';
 import { Text, View } from 'react-native';
 import { menuItems } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles';

apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTest.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { MENU_BUTTON_TESTPAGE } from '../../../../E2E/src/MenuButtonLegacy/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { StandardMenuButton } from './StandardMenuButtonTest';
 import { NestedMenuButton } from './NestedMenuButtonTest';
 import { CustomizedMenuButton } from './CustomizedMenuButtonTest';

apps/fluent-tester/src/TestComponents/MenuButtonLegacy/MenuButtonLegacyTestStyles.ts

@@ -1,4 +1,4 @@
-import { ViewStyle, TextStyle } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
 export const viewWrapperStyle: ViewStyle = { flexDirection: 'row', paddingVertical: 5 };
 export const columnStyle: ViewStyle = { flexDirection: 'column', paddingHorizontal: 5 };
 export const rowStyle: ViewStyle = { flexDirection: 'row' };

apps/fluent-tester/src/TestComponents/MenuButtonLegacy/StandardMenuButtonTest.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Separator, MenuButton, ContextualMenuProps } from '@fluentui/react-native';
+import type { ContextualMenuProps } from '@fluentui/react-native';
+import { Separator, MenuButton } from '@fluentui/react-native';
 import { Text, View, Switch, Platform } from 'react-native';
 import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonLegacyTestStyles';
-import { IconSourcesType } from '@fluentui-react-native/icon';
+import type { IconSourcesType } from '@fluentui-react-native/icon';
 import { testImage } from '../Common/iconExamples';
 
 export const StandardMenuButton: React.FunctionComponent = () => {

apps/fluent-tester/src/TestComponents/MenuButtonLegacy/testData.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { MenuButtonItemProps } from '@fluentui/react-native';
+import type { MenuButtonItemProps } from '@fluentui/react-native';
 import { MENU_ITEM_1_COMPONENT } from '../../../../E2E/src/MenuButtonLegacy/consts';
 import { svgProps, testImage } from '../Common/iconExamples';
 

apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1E2ETest.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
-import { ContextualMenuProps } from '@fluentui/react-native';
+import type { ContextualMenuProps } from '@fluentui/react-native';
 import { Text, View } from 'react-native';
 import { menuItems } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';

apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1Test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { MENUBUTTONV1_TESTPAGE } from '../../../../E2E/src/MenuButtonV1/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { StandardMenuButton } from './StandardMenuButtonTest';
 import { NestedMenuButton } from './NestedMenuButtonTest';
 import { MenuButtonV1E2ETest } from './MenuButtonV1E2ETest';

apps/fluent-tester/src/TestComponents/MenuButtonV1/MenuButtonV1TestStyles.ts

@@ -1,4 +1,4 @@
-import { ViewStyle, TextStyle } from 'react-native';
+import type { ViewStyle, TextStyle } from 'react-native';
 export const viewWrapperStyle: ViewStyle = { flexDirection: 'row', paddingVertical: 5 };
 export const columnStyle: ViewStyle = { flexDirection: 'column', paddingHorizontal: 5 };
 export const rowStyle: ViewStyle = { flexDirection: 'row' };

apps/fluent-tester/src/TestComponents/MenuButtonV1/StandardMenuButtonTest.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { Separator, ContextualMenuProps } from '@fluentui/react-native';
+import type { ContextualMenuProps } from '@fluentui/react-native';
+import { Separator } from '@fluentui/react-native';
 import { Text, View, Switch, Platform } from 'react-native';
 import { menuItems, iconProps } from './testData';
 import { viewWrapperStyle, columnStyle, rowStyle, textColor } from './MenuButtonV1TestStyles';
-import { IconSourcesType } from '@fluentui-react-native/icon';
+import type { IconSourcesType } from '@fluentui-react-native/icon';
 import { MenuButton } from '@fluentui-react-native/experimental-menu-button';
 import { testImage } from '../Common/iconExamples';
 

apps/fluent-tester/src/TestComponents/MenuButtonV1/testData.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { MenuButtonItemProps } from '@fluentui/react-native';
+import type { MenuButtonItemProps } from '@fluentui/react-native';
 import { testImage, svgProps } from '../Common/iconExamples';
 
 export const menuItems: MenuButtonItemProps[] = [

apps/fluent-tester/src/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx

@@ -1,7 +1,8 @@
 import { Button } from '@fluentui-react-native/button';
 import { NativeDatePicker } from '@fluentui-react-native/experimental-native-date-picker';
 import { NATIVEDATEPICKER_TESTPAGE } from './consts';
-import { PlatformStatus, Test, TestSection } from '../Test';
+import type { PlatformStatus, TestSection } from '../Test';
+import { Test } from '../Test';
 import * as React from 'react';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';

apps/fluent-tester/src/TestComponents/Notification/NotificationTest.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
-import { Notification, NotificationVariant, NotificationVariants } from '@fluentui-react-native/notification';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { NotificationVariant } from '@fluentui-react-native/notification';
+import { Notification, NotificationVariants } from '@fluentui-react-native/notification';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { Animated, StyleSheet, Switch, TextInput, View } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { StyledPicker } from '../Common/StyledPicker';
 import { commonTestStyles as commonStyles } from '../Common/styles';
-import { SvgIconProps } from '@fluentui-react-native/icon';
+import type { SvgIconProps } from '@fluentui-react-native/icon';
 import PlayButton from './assets/play_button.svg';
 
 const svgProps: SvgIconProps = {

apps/fluent-tester/src/TestComponents/Persona/CustomizeUsage.tsx

@@ -3,7 +3,8 @@ import { View, Text, Switch, TextInput } from 'react-native';
 import { Persona } from '@fluentui/react-native';
 import { michaelImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
-import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
 import { Slider } from '../Common/Slider';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 

apps/fluent-tester/src/TestComponents/Persona/PersonaTest.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { StandardUsage } from './StandardUsage';
 import { CustomizeUsage } from './CustomizeUsage';
 import { PERSONA_TESTPAGE } from '../../../../E2E/src/Persona/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 
 const personaSections: TestSection[] = [
   {

apps/fluent-tester/src/TestComponents/Persona/StandardUsage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Persona, PersonaSize } from '@fluentui/react-native';
+import type { PersonaSize } from '@fluentui/react-native';
+import { Persona } from '@fluentui/react-native';
 import { satyaImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { View, Text, Switch } from 'react-native';

apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PersonaCoin } from '@fluentui/react-native';
 import { Switch, View, Text, TextInput, StyleSheet } from 'react-native';
 import Slider from '@react-native-community/slider';
-import { steveBallmerPhotoUrl, undefinedText } from './styles';
+import type { undefinedText } from './styles';
+import { steveBallmerPhotoUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
 

apps/fluent-tester/src/TestComponents/PersonaCoin/CustomizeUsage.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { PersonaCoin, IconAlignment } from '@fluentui/react-native';
+import type { IconAlignment } from '@fluentui/react-native';
+import { PersonaCoin } from '@fluentui/react-native';
 import { Switch, View, Text, TextInput } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './styles';
-import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
 import { AlignmentPicker } from '../Common/AlignmentPicker';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';

apps/fluent-tester/src/TestComponents/PersonaCoin/PersonaCoinTest.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { StandardUsage } from './StandardUsage';
 import { CustomizeUsage } from './CustomizeUsage';
 import { PERSONACOIN_TESTPAGE } from '../../../../E2E/src/PersonaCoin/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 
 const personaCoinSections: TestSection[] = [
   {

apps/fluent-tester/src/TestComponents/PersonaCoin/StandardUsage.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { PersonaSize, PersonaCoinFluentColor, PersonaCoin, PersonaPresence } from '@fluentui/react-native';
+import type { PersonaSize, PersonaCoinFluentColor, PersonaPresence } from '@fluentui/react-native';
+import { PersonaCoin } from '@fluentui/react-native';
 import { StyledPicker } from '../Common/StyledPicker';
-import { Switch, View, Text, ColorValue } from 'react-native';
+import type { ColorValue } from 'react-native';
+import { Switch, View, Text } from 'react-native';
 import { satyaPhotoUrl, undefinedText } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';

apps/fluent-tester/src/TestComponents/Pressable/PressableTest.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
-import { IPressableState, useFocusState, useHoverState, usePressState } from '@fluentui-react-native/interactive-hooks';
+import type { IPressableState } from '@fluentui-react-native/interactive-hooks';
+import { useFocusState, useHoverState, usePressState } from '@fluentui-react-native/interactive-hooks';
 import { Pressable } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { Square } from '../Common/Square';
-import { Alert, GestureResponderEvent, StyleSheet, View, ViewProps, ViewStyle, Text } from 'react-native';
+import type { GestureResponderEvent, ViewProps, ViewStyle } from 'react-native';
+import { Alert, StyleSheet, View, Text } from 'react-native';
 import { PRESSABLE_TESTPAGE } from '../../../../E2E/src/Pressable/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 
 const styles = StyleSheet.create({
   dottedBorder: {

apps/fluent-tester/src/TestComponents/RadioGroupLegacy/RadioGroupLegacyTest.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { RadioButton, RadioGroup, Separator } from '@fluentui/react-native';
 import { RADIOGROUP_TESTPAGE } from '../../../../E2E/src/RadioGroupLegacy/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { RadioGroupLegacyE2ETest } from './RadioGroupLegacyE2ETest';
 
 const BasicRadioGroup: React.FunctionComponent = () => {

apps/fluent-tester/src/TestComponents/RadioGroupV1/CustomizedRadioGroup.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { View, TextInput, Text, StyleSheet } from 'react-native';
-import { RadioGroup, Radio, RadioGroupTokens, RadioTokens } from '@fluentui-react-native/experimental-radio-group';
+import type { RadioGroupTokens, RadioTokens } from '@fluentui-react-native/experimental-radio-group';
+import { RadioGroup, Radio } from '@fluentui-react-native/experimental-radio-group';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 
 const styles = StyleSheet.create({

apps/fluent-tester/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx

@@ -7,7 +7,8 @@ import { SubtextRadioGroup } from './SubtextRadioGroup';
 import { HorizontalRadioGroup } from './HorizontalRadioGroup';
 import { CustomizedRadioGroup } from './CustomizedRadioGroup';
 import { RadioGroupV1E2ETest } from './RadioGroupV1E2ETest';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { Platform } from 'react-native';
 
 const radioGroupV1Sections: TestSection[] = [

apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.mobile.tsx

@@ -4,7 +4,8 @@ import { Text } from '@fluentui-react-native/experimental-text';
 import { commonTestStyles, mobileStyles } from '../Common/styles';
 import { Stack } from '@fluentui-react-native/stack';
 import { SEPARATOR_TESTPAGE } from '../../../../E2E/src/Separator/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 
 const CustomisedText = Text.customize({
   textAlign: 'right',

apps/fluent-tester/src/TestComponents/Separator/SeparatorTest.tsx

@@ -5,7 +5,8 @@ import { Text } from '@fluentui-react-native/experimental-text';
 import { stackStyle, separatorStackStyle } from '../Common/styles';
 import { Stack } from '@fluentui-react-native/stack';
 import { SEPARATOR_TESTPAGE } from '../../../../E2E/src/Separator/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 
 const BlueSeparator = Separator.customize({ color: 'blue' });
 const RedSeparator = Separator.customize({ color: 'red' });

apps/fluent-tester/src/TestComponents/Shadow/ShadowDepthTestSection.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { Text } from '@fluentui/react-native';
 import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
-import { ShadowToken, Theme, useTheme } from '@fluentui-react-native/theme-types';
+import type { ShadowToken, Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
 import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { shadowTestPageStyles } from './ShadowTestPageStyles';

apps/fluent-tester/src/TestComponents/Shadow/ShadowTest.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { SHADOW_TESTPAGE } from '../../../../E2E/src/Shadow/consts';
 import { ShadowDepthTestSection } from './ShadowDepthTestSection';
 import { ShadowButtonTestSection } from './ShadowButtonTestSection';

apps/fluent-tester/src/TestComponents/Shadow/ShadowTestPageStyles.tsx

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { Theme } from '@fluentui-react-native/theme-types';
+import type { Theme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 
 /**

apps/fluent-tester/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { Text } from '@fluentui/react-native';
 import { Shadow } from '@fluentui-react-native/experimental-shadow';
-import { Theme, useFluentTheme } from '@fluentui-react-native/framework';
+import type { Theme } from '@fluentui-react-native/framework';
+import { useFluentTheme } from '@fluentui-react-native/framework';
 import { View } from 'react-native';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { mergeStyles } from '@fluentui-react-native/merge-props';

apps/fluent-tester/src/TestComponents/Shimmer/ShimmerTest.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { Shimmer } from '@fluentui-react-native/experimental-shimmer';
 import { SHIMMER_TESTPAGE } from '../../../../E2E/src/Shimmer/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets';

apps/fluent-tester/src/TestComponents/Shimmer/ShimmerTestElementSets.tsx

@@ -1,4 +1,4 @@
-import { ShimmerRectElement, ShimmerCircleElement } from '@fluentui-react-native/experimental-shimmer';
+import type { ShimmerRectElement, ShimmerCircleElement } from '@fluentui-react-native/experimental-shimmer';
 
 export function shimmerRects(): Array<ShimmerRectElement | ShimmerCircleElement> {
   return [

apps/fluent-tester/src/TestComponents/Spacing/SpacingTest.tsx

@@ -3,7 +3,8 @@ import { globalTokens } from '@fluentui-react-native/theme-tokens';
 import * as React from 'react';
 import { Text, View } from 'react-native';
 import { stackStyle } from '../Common/styles';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { SPACING_TESTPAGE } from '../../../../E2E/src/Spacing/consts';
 
 const BasicUsage: React.FunctionComponent = () => {

apps/fluent-tester/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { STROKEWIDTH_TESTPAGE } from '../../../../E2E/src/StrokeWidthTokens/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { View } from 'react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 import { Text } from '@fluentui/react-native';
-import { Theme, useFluentTheme } from '@fluentui-react-native/framework';
+import type { Theme } from '@fluentui-react-native/framework';
+import { useFluentTheme } from '@fluentui-react-native/framework';
 import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 

apps/fluent-tester/src/TestComponents/Svg/RNSVGIcons.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { RNSVGIcons_TESTPAGE } from '../../../../E2E/src/Svg/consts';
 import { /* Text, */ View } from 'react-native';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
 import { faMugSaucer } from '@fortawesome/free-solid-svg-icons/faMugSaucer';
 import { faSquareCheck } from '@fortawesome/free-solid-svg-icons/faSquareCheck';

apps/fluent-tester/src/TestComponents/Svg/SvgTest.tsx

@@ -4,7 +4,8 @@ import { Separator } from '@fluentui/react-native';
 import { Circle, Defs, G, Line, Path, Polygon, LinearGradient, RadialGradient, Rect, Stop, Svg, SvgUri, Use } from 'react-native-svg';
 import TestSvg from './Assets/accessible-icon-brands.svg';
 import { SVG_TESTPAGE } from '../../../../E2E/src/Svg/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 const styles = StyleSheet.create({
   svg: {
     backgroundColor: 'green',

apps/fluent-tester/src/TestComponents/Switch/CustomizedSwitch.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import { View, TextInput, StyleSheet } from 'react-native';
 import { Text } from '@fluentui-react-native/experimental-text';
-import { Switch, SwitchTokens } from '@fluentui-react-native/switch';
+import type { SwitchTokens } from '@fluentui-react-native/switch';
+import { Switch } from '@fluentui-react-native/switch';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 
 const styles = StyleSheet.create({

apps/fluent-tester/src/TestComponents/Switch/SwitchTest.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { SWITCH_TESTPAGE } from '../../../../E2E/src/Switch/consts';
 import { View, StyleSheet } from 'react-native';
 import { Switch } from '@fluentui-react-native/switch';
 import { E2ESwitchTest } from './E2ESwitchTest';
 import { commonTestStyles } from '../Common/styles';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { CustomizedSwitch } from './CustomizedSwitch';
 import { Platform } from 'react-native';
 

apps/fluent-tester/src/TestComponents/TabsLegacy/TabsLegacyTest.tsx

@@ -3,7 +3,8 @@ import { Platform, View } from 'react-native';
 import { Tabs, TabsItem, Text, Button } from '@fluentui/react-native';
 import { stackStyle } from '../Common/styles';
 import { TABS_TESTPAGE } from '../../../../E2E/src/TabsLegacy/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { TabsLegacyE2ETest } from './TabsLegacyE2ETest';
 import { svgProps } from '../Common/iconExamples';
 

apps/fluent-tester/src/TestComponents/TabsV1/TabsV1Test.tsx

@@ -5,7 +5,8 @@ import { Button } from '@fluentui-react-native/experimental-button';
 import { Tabs, TabsItem } from '@fluentui-react-native/experimental-tabs';
 import { stackStyle } from '../Common/styles';
 import { TABSV1_TESTPAGE } from '../../../../E2E/src/TabsV1/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { TabsV1E2ETest } from './TabsV1E2ETest';
 import { svgProps } from '../Common/iconExamples';
 

apps/fluent-tester/src/TestComponents/Test.tsx

@@ -4,8 +4,9 @@ import { Text, ToggleButton, Separator, Link } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from './Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
-import Svg, { G, Path, SvgProps } from 'react-native-svg';
-import { SvgIconProps } from '@fluentui-react-native/icon';
+import type { SvgProps } from 'react-native-svg';
+import Svg, { G, Path } from 'react-native-svg';
+import type { SvgIconProps } from '@fluentui-react-native/icon';
 import { Button } from '@fluentui-react-native/experimental-button';
 import { testProps } from './Common/TestProps';
 

apps/fluent-tester/src/TestComponents/TextLegacy/TextLegacyTest.tsx

@@ -3,7 +3,8 @@ import { StandardUsage } from './StandardUsage';
 import { CustomizeUsage } from './CustomizeUsage';
 import { PressableUsage } from './PressableUsage';
 import { TextLegacyE2ETest } from './TextLegacyE2ETest';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { TEXT_TESTPAGE } from '../../../../E2E/src/index.consts';
 
 const textSections: TestSection[] = [

apps/fluent-tester/src/TestComponents/TextV1/TextV1Test.tsx

@@ -4,7 +4,8 @@ import { V2Usage } from './V2Usage';
 import { MaximumFontSizeUsage } from './MaximumFontSize';
 import { CustomizeUsage } from './CustomizeUsage';
 import { PressableUsage } from './PressableUsage';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 import { TextV1E2ETest } from './TextV1E2ETest';
 import { TEXTV1_TESTPAGE } from '../../../../E2E/src/TextV1/consts';
 

apps/fluent-tester/src/TestComponents/Theme/ThemeTest.tsx

@@ -1,11 +1,14 @@
 import * as React from 'react';
-import { View, ViewStyle, StyleSheet, ColorValue } from 'react-native';
-import { useTheme, Theme } from '@fluentui-react-native/theme-types';
+import type { ViewStyle, ColorValue } from 'react-native';
+import { View, StyleSheet } from 'react-native';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { commonTestStyles } from '../Common/styles';
 import { Button, PrimaryButton, Text, StealthButton } from '@fluentui/react-native';
 import { THEME_TESTPAGE } from '../../../../E2E/src/Theme/consts';
-import { Test, TestSection, PlatformStatus } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
 
 const getThemedStyles = themedStyleSheet((theme: Theme) => {
   return {

apps/fluent-tester/src/TestComponents/index.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 export type TestDescription = {
   name: string;

apps/fluent-tester/src/testPages.ts

@@ -1,4 +1,4 @@
-import { TestDescription } from './TestComponents';
+import type { TestDescription } from './TestComponents';
 import { ActivityIndicatorTest } from './TestComponents/ActivityIndicator';
 import { AvatarTest, NativeAvatarTest } from './TestComponents/Avatar';
 import { BadgeTest } from './TestComponents/Badge';

apps/fluent-tester/src/theme/CustomThemes.ts

@@ -2,10 +2,12 @@ import { createAppleTheme } from '@fluentui-react-native/apple-theme';
 import { createDefaultTheme } from '@fluentui-react-native/default-theme';
 import { ThemeReference } from '@fluentui-react-native/theme';
 import { Platform } from 'react-native';
-import { applyBrand, OfficeBrand } from './applyBrand';
-import { applyTheme, ThemeNames } from './applyTheme';
+import type { OfficeBrand } from './applyBrand';
+import { applyBrand } from './applyBrand';
+import type { ThemeNames } from './applyTheme';
+import { applyTheme } from './applyTheme';
 import { createAndroidTheme } from '@fluentui-react-native/android-theme';
-import { ThemeOptions } from '@fluentui-react-native/theme-types';
+import type { ThemeOptions } from '@fluentui-react-native/theme-types';
 
 const themeOptions: ThemeOptions = { paletteName: 'TaskPane', appearance: 'dynamic' };
 

apps/fluent-tester/src/theme/ThemePickers.android.tsx

@@ -2,11 +2,15 @@ import * as React from 'react';
 import { View } from 'react-native';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { lightnessOptions, testerTheme } from './CustomThemes';
-import { themeChoices, ThemeNames } from './applyTheme';
-import { brandOptions, OfficeBrand } from './applyBrand';
-import { Theme, useTheme } from '@fluentui-react-native/framework';
+import type { ThemeNames } from './applyTheme';
+import { themeChoices } from './applyTheme';
+import type { OfficeBrand } from './applyBrand';
+import { brandOptions } from './applyBrand';
+import type { Theme } from '@fluentui-react-native/framework';
+import { useTheme } from '@fluentui-react-native/framework';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-import { Picker, PickerProps } from '@react-native-picker/picker';
+import type { PickerProps } from '@react-native-picker/picker';
+import { Picker } from '@react-native-picker/picker';
 
 const getThemedDropdownStyles = themedStyleSheet((t: Theme) => {
   return {

apps/fluent-tester/src/theme/ThemePickers.ios.tsx

@@ -1,11 +1,15 @@
 import * as React from 'react';
 import { View } from 'react-native';
 import { Button } from '@fluentui-react-native/experimental-button';
-import { MenuAction, MenuView } from '@react-native-menu/menu';
+import type { MenuAction } from '@react-native-menu/menu';
+import { MenuView } from '@react-native-menu/menu';
 import { testerTheme } from './CustomThemes';
-import { themeChoices, ThemeNames } from './applyTheme';
-import { brandOptions, OfficeBrand } from './applyBrand';
-import { Theme, useTheme } from '@fluentui-react-native/framework';
+import type { ThemeNames } from './applyTheme';
+import { themeChoices } from './applyTheme';
+import type { OfficeBrand } from './applyBrand';
+import { brandOptions } from './applyBrand';
+import type { Theme } from '@fluentui-react-native/framework';
+import { useTheme } from '@fluentui-react-native/framework';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 
 export const themePickerStyles = themedStyleSheet((t: Theme) => {

apps/fluent-tester/src/theme/ThemePickers.macos.tsx

@@ -5,8 +5,10 @@ import { SvgXml } from 'react-native-svg';
 import { Menu, MenuItem, MenuTrigger, MenuPopover, MenuList } from '@fluentui-react-native/menu';
 import { ButtonV1 as Button } from '@fluentui/react-native';
 import { testerTheme } from './CustomThemes';
-import { themeChoices, ThemeNames } from './applyTheme';
-import { brandOptions, OfficeBrand } from './applyBrand';
+import type { ThemeNames } from './applyTheme';
+import { themeChoices } from './applyTheme';
+import type { OfficeBrand } from './applyBrand';
+import { brandOptions } from './applyBrand';
 
 export const themePickerStyles = StyleSheet.create({
   pickerRoot: {

apps/fluent-tester/src/theme/ThemePickers.tsx

@@ -2,9 +2,11 @@ import * as React from 'react';
 import { View, StyleSheet } from 'react-native';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { lightnessOptions, testerTheme } from './CustomThemes';
-import { themeChoices, ThemeNames } from './applyTheme';
-import { brandOptions, OfficeBrand } from './applyBrand';
-import { ThemeOptions } from '@fluentui-react-native/theme-types';
+import type { ThemeNames } from './applyTheme';
+import { themeChoices } from './applyTheme';
+import type { OfficeBrand } from './applyBrand';
+import { brandOptions } from './applyBrand';
+import type { ThemeOptions } from '@fluentui-react-native/theme-types';
 import { MenuPicker } from '../TestComponents/Common/MenuPicker';
 
 export const themePickerStyles = StyleSheet.create({

apps/fluent-tester/src/theme/applyBrand.ts

@@ -1,4 +1,4 @@
-import { PartialTheme, Theme } from '@fluentui-react-native/theme-types';
+import type { PartialTheme, Theme } from '@fluentui-react-native/theme-types';
 import { getCurrentBrandAliasTokens } from '@fluentui-react-native/win32-theme';
 
 export type OfficeBrand = 'Default' | 'Office' | 'Word' | 'Excel' | 'Powerpoint' | 'Outlook';

apps/fluent-tester/src/theme/applyTheme.ts

@@ -1,4 +1,4 @@
-import { PartialTheme, Theme, ThemeOptions } from '@fluentui-react-native/framework';
+import type { PartialTheme, Theme, ThemeOptions } from '@fluentui-react-native/framework';
 import { createOfficeTheme, getThemingModule } from '@fluentui-react-native/win32-theme';
 
 export type ThemeNames = 'Default' | 'Office' | 'Caterpillar' | 'Apple';